Merge branch 'dev' into hotfix/editor-permission

package.json

@@ -47,7 +47,7 @@
     "@nanostores/solid": "0.4.2",
     "@playwright/test": "1.41.2",
     "@popperjs/core": "2.11.8",
-    "@sentry/browser": "7.99.0",
+    "@sentry/browser": "^7.113.0",
     "@solid-primitives/media": "2.2.3",
     "@solid-primitives/memo": "1.2.4",
     "@solid-primitives/pagination": "0.2.10",

public/locales/ru/translation.json

@@ -532,7 +532,7 @@
   "resend confirmation link": "отправить ссылку ещё раз",
   "shout": "пост",
   "shout not found": "публикация не найдена",
-  "shoutsWithCount": "{count} {count, plural, one {пост} few {поста}  other {постов}}",
+  "shoutsWithCount": "{count} {count, plural, one {публикация} few {публикации}  other {публикаций}}",
   "sign in": "войти",
   "sign up or sign in": "зарегистрироваться или войти",
   "sign up": "зарегистрироваться",

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -60,11 +60,13 @@
   .bio {
     @include font-size(1.2rem);
 
+    color: var(--black-400);
     display: flex;
     flex-direction: row;
-    gap: 1rem;
-    color: var(--black-400);
     font-weight: 500;
+    gap: 1rem;
+    max-width: 100%;
+    word-break: break-word;
   }
 
   .actions {

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -27,6 +27,7 @@ type Props = {
   inviteView?: boolean
   onInvite?: (id: number) => void
   selected?: boolean
+  subscriptionsMode?: boolean
 }
 export const AuthorBadge = (props: Props) => {
   const { mediaMatches } = useMediaQuery()
@@ -45,7 +46,6 @@ export const AuthorBadge = (props: Props) => {
     setIsMobileView(!mediaMatches.sm)
   })
 
-  // const { setFollowing } = useFollowing()
   const { changeSearchParams } = useRouter()
   const { t, formatDate, lang } = useLocalize()
 
@@ -114,7 +114,7 @@ export const AuthorBadge = (props: Props) => {
                 <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
               </Match>
             </Switch>
-            <Show when={props.author?.stat}>
+            <Show when={props.author?.stat && !props.subscriptionsMode}>
               <div class={styles.bio}>
                 <Show when={props.author?.stat.shouts > 0}>
                   <div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -312,9 +312,9 @@ export const AuthorCard = (props: Props) => {
                     <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
-                          <AuthorBadge author={subscription} />
+                          <AuthorBadge author={subscription} subscriptionsMode={true} />
                         ) : (
-                          <TopicBadge topic={subscription} />
+                          <TopicBadge topic={subscription} subscriptionsMode={true} />
                         )
                       }
                     </For>

src/components/Editor/Editor.tsx

@@ -151,7 +151,7 @@ export const Editor = (props: Props) => {
       }
 
       showSnackbar({ body: t('Uploading image') })
-      const result = await handleImageUpload(uplFile)
+      const result = await handleImageUpload(uplFile, session()?.access_token)
 
       editor()
         .chain()

src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx

@@ -28,6 +28,7 @@ const embedData = (data) => {
 
   const result: { src: string; width?: string; height?: string } = { src: '' }
 
+  // biome-ignore lint/style/useForOf: <explanation>
   for (let i = 0; i < attributes.length; i++) {
     const attribute = attributes.item(i)
     if (attribute) {

src/components/Editor/UploadModalContent/UploadModalContent.tsx

@@ -12,6 +12,7 @@ import { Icon } from '../../_shared/Icon'
 import { Loading } from '../../_shared/Loading'
 import { InlineForm } from '../InlineForm'
 
+import { useSession } from '../../../context/session'
 import styles from './UploadModalContent.module.scss'
 
 type Props = {
@@ -24,12 +25,12 @@ export const UploadModalContent = (props: Props) => {
   const [uploadError, setUploadError] = createSignal<string | undefined>()
   const [dragActive, setDragActive] = createSignal(false)
   const [dragError, setDragError] = createSignal<string | undefined>()
-
+  const { session } = useSession()
   const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' })
   const runUpload = async (file: UploadFile) => {
     try {
       setIsUploading(true)
-      const result = await handleImageUpload(file)
+      const result = await handleImageUpload(file, session()?.access_token)
       props.onClose(result)
       setIsUploading(false)
     } catch (error) {

src/components/Nav/Header/Header.module.scss

@@ -298,10 +298,6 @@
   box-sizing: content-box;
   display: inline-flex;
 
-  @include media-breakpoint-up(sm) {
-    padding-left: divide($container-padding-x, 2);
-  }
-
   @include media-breakpoint-up(lg) {
     display: none;
   }
@@ -425,7 +421,7 @@
   width: 100%;
 
   @include media-breakpoint-up(xl) {
-    right: 9rem;
+    right: 1.4rem;
   }
 
   .control {
@@ -457,6 +453,14 @@
   }
 }
 
+.articleControlsAuthorized {
+  right: 3.6rem;
+
+  @include media-breakpoint-up(xl) {
+    right: 9rem;
+  }
+}
+
 .userControl {
   align-items: center;
   display: flex;
@@ -484,7 +488,8 @@
   }
 
   .editorControl {
-    border-radius: 1.2em;
+    border-radius: 2em;
+    font-size: 1.4rem !important;
 
     &:hover {
       background: var(--background-color-invert);
@@ -518,6 +523,7 @@
   height: 2.8rem;
   justify-content: center;
   margin: 0 0.4rem;
+  order: 2;
   position: relative;
   transition: margin-left 0.3s;
   width: 2.8rem;
@@ -528,7 +534,7 @@
     width: 3.2rem;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(xl) {
     margin-left: 0.4rem !important;
   }
 
@@ -579,6 +585,10 @@
 
 .userControlItemSearch {
   margin: 0 1rem 0 2.2rem;
+
+  @include media-breakpoint-down(xl) {
+    order: 1;
+  }
 }
 
 .userControlItemUserpic {
@@ -591,13 +601,6 @@
   }
 }
 
-.userControlItemInbox,
-.userControlItemSearch {
-  @include media-breakpoint-down(sm) {
-    display: none;
-  }
-}
-
 .userControlItemVerbose {
   align-items: stretch;
   display: flex;
@@ -677,7 +680,9 @@
     }
 
     &:hover {
+      @include media-breakpoint-up(xl) {
         background-color: var(--link-hover-background);
+      }
 
       &,
       .textLabel {
@@ -703,6 +708,18 @@
   }
 }
 
+.userControlItemCreate {
+  .icon {
+    height: 2.8rem;
+    width: 2.8rem;
+
+    @include media-breakpoint-up(md) {
+      height: 3.2rem;
+      width: 3.2rem;
+    }
+  }
+}
+
 .subnavigation {
   background: #000;
   color: #fff;

src/components/Nav/Header/Header.tsx

@@ -59,6 +59,7 @@ export const Header = (props: Props) => {
   const [isTopicsVisible, setIsTopicsVisible] = createSignal(false)
   const [isZineVisible, setIsZineVisible] = createSignal(false)
   const [isFeedVisible, setIsFeedVisible] = createSignal(false)
+  const { isAuthenticated } = useSession()
 
   const toggleFixed = () => setFixed(!fixed())
 
@@ -68,7 +69,9 @@ export const Header = (props: Props) => {
   let windowScrollTop = 0
 
   createEffect(() => {
+    if (topics()?.length) {
       setRandomTopics(getRandomTopicsFromArray(topics()))
+    }
   })
 
   createEffect(() => {
@@ -330,7 +333,11 @@ export const Header = (props: Props) => {
           </div>
           <HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
           <Show when={props.title}>
-            <div class={clsx(styles.articleControls, 'col-auto')}>
+            <div
+              class={clsx(styles.articleControls, 'col-auto', {
+                [styles.articleControlsAuthorized]: isAuthenticated(),
+              })}
+            >
               <SharePopup
                 title={props.title}
                 imageUrl={props.cover}

src/components/Nav/HeaderAuth.tsx

@@ -113,8 +113,8 @@ export const HeaderAuth = (props: Props) => {
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
-                  <Icon name="pencil" class={styles.icon} />
-                  <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
+                  <Icon name="pencil-outline" class={styles.icon} />
+                  <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                 </a>
               </div>
             </Show>
@@ -221,8 +221,8 @@ export const HeaderAuth = (props: Props) => {
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
-                  <Icon name="pencil" class={styles.icon} />
-                  <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
+                  <Icon name="pencil-outline" class={styles.icon} />
+                  <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                 </a>
               </div>
             </Show>
@@ -235,7 +235,7 @@ export const HeaderAuth = (props: Props) => {
                     <a href="?m=auth&mode=login">
                       <span class={styles.textLabel}>{t('Enter')}</span>
                       <Icon name="key" class={styles.icon} />
-                      {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
+                      <Icon name="key" class={clsx(styles.icon, styles.iconHover)} />
                     </a>
                   </div>
                 </Show>

src/components/ProfileSettings/ProfileSettings.tsx

@@ -57,7 +57,7 @@ export const ProfileSettings = () => {
   const [nameError, setNameError] = createSignal<string>()
   const { form, submit, updateFormField, setForm } = useProfileForm()
   const { showSnackbar } = useSnackbar()
-  const { loadAuthor } = useSession()
+  const { loadAuthor, session } = useSession()
   const { showConfirm } = useConfirm()
 
   createEffect(() => {
@@ -140,7 +140,7 @@ export const ProfileSettings = () => {
       setUploadError(false)
       setIsUserpicUpdating(true)
 
-      const result = await handleImageUpload(uploadFile)
+      const result = await handleImageUpload(uploadFile, session()?.access_token)
       updateFormField('pic', result.url)
 
       setUserpicFile(null)

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -1,12 +1,11 @@
 .TopicBadge {
-  margin-bottom: 2rem;
+  margin-bottom: 4.8rem;
   gap: 1rem;
 
   .content {
     align-items: flex-start;
     display: flex;
     flex-direction: row;
-    margin-bottom: .8rem;
   }
 
   .basicInfo {
@@ -48,11 +47,62 @@
     @include font-size(1.4rem);
 
     border: none;
-    display: flex;
-    flex-direction: column;
+
+    // display: flex;
+    // flex-direction: column;
 
     &:hover {
       background: unset;
+      color: inherit;
+
+      .title {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+      }
+    }
+
+    .title {
+      @include font-size(2.2rem);
+
+      font-weight: bold;
+    }
+
+    .description {
+      @include font-size(1.6rem);
+
+      line-height: 1.4;
+      margin: 0.8rem 0;
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    margin-bottom: -1rem;
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
+  }
+}
+
+.TopicBadgeSubscriptionsMode {
+  margin-bottom: 2rem;
+
+  .content {
+    margin-bottom: 0.8rem;
+  }
+
+  .info {
+    &:hover {
+      .title {
+        background-color: var(--blue-500);
+        color: var(--white-500);
+      }
     }
 
     .title {
@@ -66,7 +116,11 @@
 
     .description {
       color: var(--black-400);
+
+      @include font-size(1.2rem);
+
       font-weight: 500;
+      margin: 0;
     }
   }
 
@@ -88,7 +142,6 @@
 
   color: var(--secondary-color);
   display: flex;
-  margin: 0 0 1em;
 
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
@@ -101,6 +154,7 @@
   .statsItem {
     @include font-size(1.4rem);
 
+    font-weight: 500;
     margin-right: 1.6rem;
     white-space: nowrap;
 

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -15,6 +15,7 @@ type Props = {
   topic: Topic
   minimizeSubscribeButton?: boolean
   showStat?: boolean
+  subscriptionsMode?: boolean
 }
 
 export const TopicBadge = (props: Props) => {
@@ -47,9 +48,10 @@ export const TopicBadge = (props: Props) => {
     lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
 
   return (
-    <div class={styles.TopicBadge}>
+    <div class={clsx(styles.TopicBadge, { [styles.TopicBadgeSubscriptionsMode]: props.subscriptionsMode })}>
       <div class={styles.content}>
         <div class={styles.basicInfo}>
+          <Show when={props.subscriptionsMode}>
             <a
               href={`/topic/${props.topic.slug}`}
               class={clsx(styles.picture, {
@@ -62,8 +64,11 @@ export const TopicBadge = (props: Props) => {
                 }
               }
             />
+          </Show>
+
           <a href={`/topic/${props.topic.slug}`} class={styles.info}>
             <span class={styles.title}>{title()}</span>
+
             <Show
               when={props.topic.body}
               fallback={
@@ -86,9 +91,13 @@ export const TopicBadge = (props: Props) => {
           />
         </div>
       </div>
+
+      <Show when={!props.subscriptionsMode}>
         <div class={styles.stats}>
           <span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
-        <span class={styles.statsItem}>{t('authorsWithCount', { count: props.topic?.stat?.authors })}</span>
+          <span class={styles.statsItem}>
+            {t('authorsWithCount', { count: props.topic?.stat?.authors })}
+          </span>
           <span class={styles.statsItem}>
             {t('FollowersWithCount', { count: props.topic?.stat?.followers })}
           </span>
@@ -98,6 +107,7 @@ export const TopicBadge = (props: Props) => {
             </span>
           </Show>
         </div>
+      </Show>
     </div>
   )
 }

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -42,7 +42,8 @@ export const AllAuthors = (props: Props) => {
   const filteredAuthors = createMemo(() => {
     const query = searchQuery().toLowerCase()
     return sortedAuthors().filter((author) => {
-      return author.name.toLowerCase().includes(query) // Предполагаем, что у автора есть свойство name
+      // Предполагаем, что у автора есть свойство name
+      return author.name.toLowerCase().includes(query)
     })
   })
 

src/components/Views/AllTopics/AllTopics.tsx

@@ -80,7 +80,7 @@ export const AllTopics = (props: Props) => {
 
   const AllTopicsHead = () => (
     <div class="row">
-      <div class="col-lg-20 col-xl-18">
+      <div class="col-lg-18 col-xl-15">
         <h1>{t('Topics')}</h1>
         <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
@@ -129,7 +129,7 @@ export const AllTopics = (props: Props) => {
 
             <Show when={filteredResults().length > 0}>
               <Show when={searchParams().by === 'title'}>
-                <div class="col-lg-20 col-xl-18">
+                <div class="col-lg-18 col-xl-15">
                   <ul class={clsx('nodash', styles.alphabet)}>
                     <For each={ALPHABET}>
                       {(letter, index) => (
@@ -180,7 +180,7 @@ export const AllTopics = (props: Props) => {
 
               <Show when={searchParams().by && searchParams().by !== 'title'}>
                 <div class="row">
-                  <div class="col-lg-20 col-xl-18 py-4">
+                  <div class="col-lg-18 col-xl-15 py-4">
                     <For each={filteredResults().slice(0, limit())}>
                       {(topic) => (
                         <>

src/components/_shared/Button/Button.module.scss

@@ -141,7 +141,7 @@
     float: none;
     padding-bottom: 0.6rem;
     padding-top: 0.6rem;
-    width: 10em;
+    width: 9em;
 
     .icon {
       img {

src/components/_shared/DropArea/DropArea.tsx

@@ -5,6 +5,7 @@ import { clsx } from 'clsx'
 import { JSX, Show, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
 import { UploadedFile } from '../../../pages/types'
 import { handleFileUpload } from '../../../utils/handleFileUpload'
 import { handleImageUpload } from '../../../utils/handleImageUpload'
@@ -27,6 +28,7 @@ export const DropArea = (props: Props) => {
   const [dragActive, setDragActive] = createSignal(false)
   const [dropAreaError, setDropAreaError] = createSignal<string>()
   const [loading, setLoading] = createSignal(false)
+  const { session } = useSession()
 
   const runUpload = async (files) => {
     try {
@@ -35,7 +37,7 @@ export const DropArea = (props: Props) => {
       const results: UploadedFile[] = []
       for (const file of files) {
         const handler = props.fileType === 'image' ? handleImageUpload : handleFileUpload
-        const result = await handler(file)
+        const result = await handler(file, session()?.access_token)
         results.push(result)
       }
       props.onUpload(results)

src/components/_shared/SolidSwiper/EditorSwiper.tsx

@@ -19,6 +19,7 @@ import { Popover } from '../Popover'
 
 import { SwiperRef } from './swiper'
 
+import { useSession } from '../../../context/session'
 import styles from './Swiper.module.scss'
 
 const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor'))
@@ -36,7 +37,7 @@ export const EditorSwiper = (props: Props) => {
   const [loading, setLoading] = createSignal(false)
   const [slideIndex, setSlideIndex] = createSignal(0)
   const [slideBody, setSlideBody] = createSignal<string>()
-
+  const { session } = useSession()
   const mainSwipeRef: { current: SwiperRef } = { current: null }
   const thumbSwipeRef: { current: SwiperRef } = { current: null }
 
@@ -100,7 +101,7 @@ export const EditorSwiper = (props: Props) => {
       setLoading(true)
       const results: UploadedFile[] = []
       for (const file of selectedFiles) {
-        const result = await handleImageUpload(file)
+        const result = await handleImageUpload(file, session()?.access_token)
         results.push(result)
       }
       props.onImagesAdd(composeMediaItems(results))

src/utils/handleFileUpload.ts

@@ -5,12 +5,15 @@ import { UploadedFile } from '../pages/types'
 const apiBaseUrl = 'https://core.discours.io'
 const apiUrl = `${apiBaseUrl}/upload`
 
-export const handleFileUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
+export const handleFileUpload = async (uploadFile: UploadFile, token: string): Promise<UploadedFile> => {
   const formData = new FormData()
   formData.append('file', uploadFile.file, uploadFile.name)
   const response = await fetch(apiUrl, {
     method: 'POST',
     body: formData,
+    headers: {
+      Authorization: token,
+    },
   })
   return response.json()
 }

src/utils/handleImageUpload.ts

@@ -4,12 +4,14 @@ import { UploadedFile } from '../pages/types'
 
 import { thumborUrl } from './config'
 
-export const handleImageUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
+export const handleImageUpload = async (uploadFile: UploadFile, token: string): Promise<UploadedFile> => {
   const formData = new FormData()
   formData.append('media', uploadFile.file, uploadFile.name)
+  const headers = token ? { Authorization: token } : {}
   const response = await fetch(`${thumborUrl}/image`, {
     method: 'POST',
     body: formData,
+    headers,
   })
 
   const location = response.headers.get('Location')