linking-fix

src/components/Feed/Sidebar/Sidebar.tsx

@@ -1,7 +1,6 @@
+import { A, useLocation, useParams } from '@solidjs/router'
 import { clsx } from 'clsx'
 import { For, Show, createSignal } from 'solid-js'
-
-import { A, useMatch } from '@solidjs/router'
 import { Icon } from '~/components/_shared/Icon'
 import { useFeed } from '~/context/feed'
 import { useFollowing } from '~/context/following'
@@ -15,10 +14,8 @@ export const Sidebar = () => {
   const { follows } = useFollowing()
   const { feedByTopic, feedByAuthor, seen } = useFeed()
   const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(true)
-  const matchFeed = useMatch(() => '/feed')
-  const matchFeedMy = useMatch(() => '/feed/followed')
-  const matchFeedCollabs = useMatch(() => '/feed/coauthored')
-  const matchFeedDiscussions = useMatch(() => '/feed/discussed')
+  const loc = useLocation()
+  const params = useParams()
   const checkTopicIsSeen = (topicSlug: string) => {
     return feedByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug]))
   }
@@ -32,9 +29,9 @@ export const Sidebar = () => {
       <ul class={styles.feedFilters}>
         <li>
           <A
-            href={'feed'}
+            href={'/feed'}
             class={clsx({
-              [styles.selected]: matchFeed()
+              [styles.selected]: !loc.pathname.includes('feed/my')
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -45,9 +42,9 @@ export const Sidebar = () => {
         </li>
         <li>
           <A
-            href={'/feed/followed'}
+            href={'/feed/my/followed'}
             class={clsx({
-              [styles.selected]: matchFeedMy()
+              [styles.selected]: !params.mode || params.mode === 'followed'
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -58,9 +55,9 @@ export const Sidebar = () => {
         </li>
         <li>
           <A
-            href={'/feed/coauthored'}
+            href={'/feed/my/coauthored'}
             class={clsx({
-              [styles.selected]: matchFeedCollabs()
+              [styles.selected]: params.mode === 'coauthored'
             })}
           >
             <span class={styles.sidebarItemName}>
@@ -71,9 +68,9 @@ export const Sidebar = () => {
         </li>
         <li>
           <a
-            href={'/feed/discussed'}
+            href={'/feed/my/discussed'}
             class={clsx({
-              [styles.selected]: matchFeedDiscussions()
+              [styles.selected]: params.mode === 'discussed'
             })}
           >
             <span class={styles.sidebarItemName}>

src/components/Nav/Header/Header.tsx

@@ -477,7 +477,7 @@ export const Header = (props: Props) => {
               </li>
 
               <li>
-                <A href={'/feed/followed'}>
+                <A href={'/feed/my/followed'}>
                   <span class={styles.subnavigationItemName}>
                     <Icon name="feed-my" class={styles.icon} />
                     {t('My feed')}
@@ -485,7 +485,7 @@ export const Header = (props: Props) => {
                 </A>
               </li>
               <li>
-                <A href={'/feed/coauthored'}>
+                <A href={'/feed/my/coauthored'}>
                   <span class={styles.subnavigationItemName}>
                     <Icon name="feed-collaborate" class={styles.icon} />
                     {t('Participation')}
@@ -493,7 +493,7 @@ export const Header = (props: Props) => {
                 </A>
               </li>
               <li>
-                <A href={'/feed/discussed'}>
+                <A href={'/feed/my/discussed'}>
                   <span class={styles.subnavigationItemName}>
                     <Icon name="feed-discussion" class={styles.icon} />
                     {t('Discussions')}

src/components/Views/Feed/Feed.tsx

@@ -35,7 +35,7 @@ export type PeriodType = 'week' | 'month' | 'year'
 
 export type FeedProps = {
   shouts: Shout[]
-  mode?: 'followed' | 'discussed' | 'coauthored' | 'unrated'
+  mode?: 'followed' | 'discussed' | 'coauthored' | 'unrated' | 'all'
   order?: '' | 'likes' | 'hot'
 }
 
@@ -143,8 +143,8 @@ export const FeedView = (props: FeedProps) => {
                 </Show>
                 <DropDown
                   popupProps={{ horizontalAnchor: 'right' }}
-                  options={asOptions(['followed', 'unrated', 'discussed', 'coauthored'])}
-                  currentOption={asOption(loc.pathname.split('/').pop() || '')}
+                  options={asOptions(['all', 'featured', 'followed', 'unrated', 'discussed', 'coauthored'])}
+                  currentOption={asOption(props.mode || '')}
                   triggerCssClass={styles.periodSwitcher}
                   onChange={(mode: Option) => navigate(`/feed/${mode.value}`)}
                 />

src/intl/locales/ru/translation.json

@@ -256,6 +256,7 @@
   "Language": "Язык",
   "Last rev.": "Посл. изм.",
   "Let's log in": "Давайте авторизуемся",
+  "Liked": "Популярное",
   "Link copied": "Ссылка скопирована",
   "Link copied to clipboard": "Ссылка скопирована в буфер обмена",
   "Link sent, check your email": "Ссылка отправлена, проверьте почту",

src/routes/feed/my/[...mode]/[...order].tsx

@@ -114,7 +114,7 @@ export default (props: RouteSectionProps<{ shouts: Shout[]; topics: Topic[] }>)
         <ReactionsProvider>
           <Feed
             shouts={feed() || []}
-            mode={(mode() || 'followed') as FeedProps['mode']}
+            mode={(mode() || 'all') as FeedProps['mode']}
             order={order() as FeedProps['order']}
           />
         </ReactionsProvider>