From 82904bd1daad5f4939b4f9b3c59cf3c98a557ea0 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Tue, 16 Jul 2024 02:11:01 +0300
Subject: [PATCH] @-patch

---
 src/components/Article/FullArticle.tsx        |   2 +-
 .../Author/AuthorBadge/AuthorBadge.tsx        |   2 +-
 .../Author/AuthorCard/AuthorCard.tsx          |   2 +-
 .../Author/AuthorLink/AuthorLink.tsx          |   2 +-
 src/components/Author/Userpic/Userpic.tsx     |   2 +-
 src/components/Feed/Sidebar/Sidebar.tsx       |   2 +-
 src/components/Nav/ProfilePopup.tsx           |   4 +-
 .../NotificationView/NotificationGroup.tsx    |   2 +-
 .../Views/AllAuthors/AllAuthors.tsx           |   2 +-
 src/components/Views/Author/Author.tsx        |  11 +-
 .../_shared/VotersList/VotersList.tsx         |   2 +-
 src/routes/[slug]/[...tab].tsx                | 125 +++++++++---------
 12 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 427cc0b0..e53c1707 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -354,7 +354,7 @@ export const FullArticle = (props: Props) => {
                     {(a: Maybe<Author>, index: () => number) => (
                       <>
                         <Show when={index() > 0}>, </Show>
-                        <A href={`/author/${a?.slug}`}>{a && getAuthorName(a)}</A>
+                        <A href={`/@${a?.slug}`}>{a && getAuthorName(a)}</A>
                       </>
                     )}
                   </For>
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index 51ffcf82..8531f3f5 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -95,7 +95,7 @@ export const AuthorBadge = (props: Props) => {
         <ConditionalWrapper
           condition={!props.inviteView}
           wrapper={(children) => (
-            <a href={`/author/${props.author.slug}`} class={styles.info}>
+            <a href={`/@${props.author.slug}`} class={styles.info}>
               {children}
             </a>
           )}
diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx
index fe444e13..8c11f7b8 100644
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@@ -262,7 +262,7 @@ export const AuthorCard = (props: Props) => {
                   description={props.author.bio || ''}
                   imageUrl={props.author.pic || ''}
                   shareUrl={getShareUrl({
-                    pathname: `/author/${props.author.slug}`
+                    pathname: `/@${props.author.slug}`
                   })}
                   trigger={<Button variant="secondary" value={t('Share')} />}
                 />
diff --git a/src/components/Author/AuthorLink/AuthorLink.tsx b/src/components/Author/AuthorLink/AuthorLink.tsx
index aba32ffb..4f08f074 100644
--- a/src/components/Author/AuthorLink/AuthorLink.tsx
+++ b/src/components/Author/AuthorLink/AuthorLink.tsx
@@ -30,7 +30,7 @@ export const AuthorLink = (props: Props) => {
         [styles.authorLinkFloorImportant]: props.isFloorImportant
       })}
     >
-      <a class={styles.link} href={`/author/${props.author.slug}`}>
+      <a class={styles.link} href={`/@${props.author.slug}`}>
         <Userpic size={props.size ?? 'M'} name={name() || ''} userpic={props.author.pic || ''} />
         <div class={styles.name}>{name()}</div>
       </a>
diff --git a/src/components/Author/Userpic/Userpic.tsx b/src/components/Author/Userpic/Userpic.tsx
index 4233f0c5..fbec00c9 100644
--- a/src/components/Author/Userpic/Userpic.tsx
+++ b/src/components/Author/Userpic/Userpic.tsx
@@ -55,7 +55,7 @@ export const Userpic = (props: Props) => {
       <Show when={!props.loading} fallback={<Loading />}>
         <ConditionalWrapper
           condition={Boolean(props.hasLink)}
-          wrapper={(children) => <a href={`/author/${props.slug}`}>{children}</a>}
+          wrapper={(children) => <a href={`/@${props.slug}`}>{children}</a>}
         >
           <Show keyed={true} when={props.userpic} fallback={<div class={styles.letters}>{letters()}</div>}>
             <Image src={props.userpic} width={avatarSize()} height={avatarSize()} alt={props.name} />
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index c78b2169..da116213 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -96,7 +96,7 @@ export const Sidebar = () => {
           <For each={follows.authors}>
             {(a: Author) => (
               <li>
-                <a href={`/author/${a.slug}`} classList={{ [styles.unread]: checkAuthorIsSeen(a.slug) }}>
+                <a href={`/@${a.slug}`} classList={{ [styles.unread]: checkAuthorIsSeen(a.slug) }}>
                   <div class={styles.sidebarItemName}>
                     <Userpic name={a.name || ''} userpic={a.pic || ''} size="XS" class={styles.userpic} />
                     <div class={styles.sidebarItemNameLabel}>{a.name}</div>
diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx
index 406f54a4..9b53c58f 100644
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@@ -20,7 +20,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
     <Popup {...props} horizontalAnchor="right" popupCssClass={styles.profilePopup}>
       <ul class="nodash">
         <li>
-          <A class={styles.action} href={`/author/${author()?.slug || 'anonymous'}`}>
+          <A class={styles.action} href={`/@${author()?.slug || 'anonymous'}`}>
             <Icon name="profile" class={styles.icon} />
             {t('Profile')}
           </A>
@@ -32,7 +32,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
           </A>
         </li>
         <li>
-          <A class={styles.action} href={`/author/${author()?.slug}?m=following`}>
+          <A class={styles.action} href={`/@${author()?.slug}?m=following`}>
             <Icon name="feed-all" class={styles.icon} />
             {t('Subscriptions')}
           </A>
diff --git a/src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx b/src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx
index 2eab2fd9..16b7c861 100644
--- a/src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx
+++ b/src/components/NotificationsPanel/NotificationView/NotificationGroup.tsx
@@ -77,7 +77,7 @@ export const NotificationGroup = (props: NotificationGroupProps) => {
                   {getTitle(n.shout?.title || '')}
                 </A>{' '}
                 {t('from')}{' '}
-                <A href={`/author/${n.authors?.[0]?.slug || ''}`} onClick={handleLinkClick}>
+                <A href={`/@${n.authors?.[0]?.slug || ''}`} onClick={handleLinkClick}>
                   {n.authors?.[0]?.name || ''}
                 </A>{' '}
               </div>
diff --git a/src/components/Views/AllAuthors/AllAuthors.tsx b/src/components/Views/AllAuthors/AllAuthors.tsx
index 1bd2388b..71b6060f 100644
--- a/src/components/Views/AllAuthors/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors/AllAuthors.tsx
@@ -205,7 +205,7 @@ export const AllAuthors = (props: Props) => {
                     {(author) => (
                       <div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
                         <div class="topic-title">
-                          <a href={`/author/${author.slug}`}>{translateAuthor(author, lang())}</a>
+                          <a href={`/@${author.slug}`}>{translateAuthor(author, lang())}</a>
                           <Show when={author.stat?.shouts || 0}>
                             <span class={styles.articlesCounter}>{author.stat?.shouts || 0}</span>
                           </Show>
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index e995956b..e565429c 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/src/components/Views/Author/Author.tsx
@@ -144,9 +144,10 @@ export const AuthorView = (props: AuthorViewProps) => {
   let bioContainerRef: HTMLDivElement
   let bioWrapperRef: HTMLDivElement
   const checkBioHeight = () => {
-    console.debug('[AuthorView] mounted, checking bio height...')
     if (bioContainerRef) {
-      setShowExpandBioControl(bioContainerRef.offsetHeight > bioWrapperRef.offsetHeight)
+      const showExpand = bioContainerRef.offsetHeight > bioWrapperRef.offsetHeight
+      setShowExpandBioControl(showExpand)
+      console.debug('[AuthorView] mounted, show expand bio container:', showExpand)
     }
   }
 
@@ -173,19 +174,19 @@ export const AuthorView = (props: AuthorViewProps) => {
               <div class="col-md-16">
                 <ul class="view-switcher">
                   <li classList={{ 'view-switcher__item--selected': !props.selectedTab }}>
-                    <A href={`/author/${props.authorSlug}`}>{t('Publications')}</A>
+                    <A href={`/@${props.authorSlug}`}>{t('Publications')}</A>
                     <Show when={author()?.stat}>
                       <span class="view-switcher__counter">{author()?.stat?.shouts || 0}</span>
                     </Show>
                   </li>
                   <li classList={{ 'view-switcher__item--selected': props.selectedTab === 'comment' }}>
-                    <A href={`/author/${props.authorSlug}/comments`}>{t('Comments')}</A>
+                    <A href={`/@${props.authorSlug}/comments`}>{t('Comments')}</A>
                     <Show when={author()?.stat}>
                       <span class="view-switcher__counter">{author()?.stat?.comments || 0}</span>
                     </Show>
                   </li>
                   <li classList={{ 'view-switcher__item--selected': props.selectedTab === 'about' }}>
-                    <A onClick={() => checkBioHeight()} href={`/author/${props.authorSlug}/about`}>
+                    <A onClick={() => checkBioHeight()} href={`/@${props.authorSlug}/about`}>
                       {t('About the author')}
                     </A>
                   </li>
diff --git a/src/components/_shared/VotersList/VotersList.tsx b/src/components/_shared/VotersList/VotersList.tsx
index 6ccc753c..a2887f35 100644
--- a/src/components/_shared/VotersList/VotersList.tsx
+++ b/src/components/_shared/VotersList/VotersList.tsx
@@ -28,7 +28,7 @@ export const VotersList = (props: Props) => {
                     userpic={reaction.created_by.pic || ''}
                     class={styles.userpic}
                   />
-                  <a href={`/author/${reaction.created_by.slug}`}>{reaction.created_by.name || ''}</a>
+                  <a href={`/@${reaction.created_by.slug}`}>{reaction.created_by.name || ''}</a>
                 </div>
                 {reaction.kind === ReactionKind.Like ? (
                   <div class={styles.commentRatingPositive}>+1</div>
diff --git a/src/routes/[slug]/[...tab].tsx b/src/routes/[slug]/[...tab].tsx
index a79849f6..cdbd6ad1 100644
--- a/src/routes/[slug]/[...tab].tsx
+++ b/src/routes/[slug]/[...tab].tsx
@@ -29,69 +29,6 @@ export const route: RouteDefinition = {
 
 type ArticlePageProps = { article?: Shout; comments?: Reaction[]; votes?: Reaction[]; author?: Author }
 
-export function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
-  const loc = useLocation()
-  const { t } = useLocalize()
-  const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
-  const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug)))
-
-  onMount(async () => {
-    if (gaIdentity && data()?.id) {
-      try {
-        await loadGAScript(gaIdentity)
-        initGA(gaIdentity)
-      } catch (error) {
-        console.warn('Failed to connect Google Analytics:', error)
-      }
-    }
-  })
-
-  createEffect(
-    on(
-      data,
-      (a?: Shout) => {
-        if (!a?.id) return
-        window?.gtag?.('event', 'page_view', {
-          page_title: a.title,
-          page_location: window?.location.href || '',
-          page_path: loc.pathname
-        })
-      },
-      { defer: true }
-    )
-  )
-
-  return (
-    <ErrorBoundary fallback={() => <HttpStatusCode code={500} />}>
-      <Suspense fallback={<Loading />}>
-        <Show
-          when={data()?.id}
-          fallback={
-            <PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
-              <FourOuFourView />
-              <HttpStatusCode code={404} />
-            </PageLayout>
-          }
-        >
-          <PageLayout
-            title={`${t('Discours')}${data()?.title ? ' :: ' : ''}${data()?.title || ''}`}
-            desc={descFromBody(data()?.body || '')}
-            keywords={keywordsFromTopics(data()?.topics as { title: string }[])}
-            headerTitle={data()?.title || ''}
-            slug={data()?.slug}
-            cover={data()?.cover || ''}
-            scrollToComments={(value) => setScrollToComments(value)}
-          >
-            <ReactionsProvider>
-              <FullArticle article={data() as Shout} scrollToComments={scrollToComments()} />
-            </ReactionsProvider>
-          </PageLayout>
-        </Show>
-      </Suspense>
-    </ErrorBoundary>
-  )
-}
-
 type SlugPageProps = {
   article?: Shout
   comments?: Reaction[]
@@ -125,5 +62,67 @@ export default (props: RouteSectionProps<SlugPageProps>) => {
     return <TopicPage {...patchedProps} />
   }
 
+  function ArticlePage(props: RouteSectionProps<ArticlePageProps>) {
+    const loc = useLocation()
+    const { t } = useLocalize()
+    const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
+    const data = createAsync(async () => props.data?.article || (await fetchShout(props.params.slug)))
+
+    onMount(async () => {
+      if (gaIdentity && data()?.id) {
+        try {
+          await loadGAScript(gaIdentity)
+          initGA(gaIdentity)
+        } catch (error) {
+          console.warn('Failed to connect Google Analytics:', error)
+        }
+      }
+    })
+
+    createEffect(
+      on(
+        data,
+        (a?: Shout) => {
+          if (!a?.id) return
+          window?.gtag?.('event', 'page_view', {
+            page_title: a.title,
+            page_location: window?.location.href || '',
+            page_path: loc.pathname
+          })
+        },
+        { defer: true }
+      )
+    )
+
+    return (
+      <ErrorBoundary fallback={() => <HttpStatusCode code={500} />}>
+        <Suspense fallback={<Loading />}>
+          <Show
+            when={data()?.id}
+            fallback={
+              <PageLayout isHeaderFixed={false} hideFooter={true} title={t('Nothing is here')}>
+                <FourOuFourView />
+                <HttpStatusCode code={404} />
+              </PageLayout>
+            }
+          >
+            <PageLayout
+              title={`${t('Discours')}${data()?.title ? ' :: ' : ''}${data()?.title || ''}`}
+              desc={descFromBody(data()?.body || '')}
+              keywords={keywordsFromTopics(data()?.topics as { title: string }[])}
+              headerTitle={data()?.title || ''}
+              slug={data()?.slug}
+              cover={data()?.cover || ''}
+              scrollToComments={(value) => setScrollToComments(value)}
+            >
+              <ReactionsProvider>
+                <FullArticle article={data() as Shout} scrollToComments={scrollToComments()} />
+              </ReactionsProvider>
+            </PageLayout>
+          </Show>
+        </Suspense>
+      </ErrorBoundary>
+    )
+  }
   return <ArticlePage {...props} />
 }