[Glitch] Change "My collections" path to /@username/collections

Port d6c0b93c859febbb88332276d8fa40b9297efbea to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/column_header.tsx

@@ -73,7 +73,7 @@ const BackButton: React.FC<{
 };
 
 export interface Props {
-  title?: string;
+  title?: React.ReactNode;
   icon?: string;
   iconComponent?: IconProp;
   active?: boolean;

app/javascript/flavours/glitch/features/collections/index.tsx

@@ -10,11 +10,17 @@ import CollectionsFilledIcon from '@/material-icons/400-24px/category-fill.svg?r
 import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
 import { Column } from 'flavours/glitch/components/column';
 import { ColumnHeader } from 'flavours/glitch/components/column_header';
+import { DisplayNameSimple } from 'flavours/glitch/components/display_name/simple';
 import { Icon } from 'flavours/glitch/components/icon';
 import {
   ItemList,
   Scrollable,
 } from 'flavours/glitch/components/scrollable_list/components';
+import { useAccount } from 'flavours/glitch/hooks/useAccount';
+import {
+  useAccountId,
+  useCurrentAccountId,
+} from 'flavours/glitch/hooks/useAccountId';
 import {
   fetchAccountCollections,
   selectAccountCollections,
@@ -25,7 +31,11 @@ import { CollectionListItem } from './components/collection_list_item';
 import { messages as editorMessages } from './editor';
 
 const messages = defineMessages({
-  heading: { id: 'column.collections', defaultMessage: 'My collections' },
+  headingMe: { id: 'column.my_collections', defaultMessage: 'My collections' },
+  headingOther: {
+    id: 'column.other_collections',
+    defaultMessage: 'Collections by {name}',
+  },
 });
 
 export const Collections: React.FC<{
@@ -33,17 +43,22 @@ export const Collections: React.FC<{
 }> = ({ multiColumn }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
-  const me = useAppSelector((state) => state.meta.get('me') as string);
+  const me = useCurrentAccountId();
+  const accountId = useAccountId();
+  const account = useAccount(accountId);
+
   const { collections, status } = useAppSelector((state) =>
-    selectAccountCollections(state, me),
+    selectAccountCollections(state, accountId),
   );
 
   useEffect(() => {
-    void dispatch(fetchAccountCollections({ accountId: me }));
+    if (accountId) {
-  }, [dispatch, me]);
+      void dispatch(fetchAccountCollections({ accountId }));
+    }
+  }, [dispatch, accountId]);
 
   const emptyMessage =
-    status === 'error' ? (
+    status === 'error' || !accountId ? (
       <FormattedMessage
         id='collections.error_loading_collections'
         defaultMessage='There was an error when trying to load your collections.'
@@ -67,25 +82,36 @@ export const Collections: React.FC<{
       </>
     );
 
+  const isOwnCollection = accountId === me;
+  const titleMessage = isOwnCollection
+    ? messages.headingMe
+    : messages.headingOther;
+
+  const pageTitle = intl.formatMessage(titleMessage, {
+    name: account?.get('display_name'),
+  });
+  const pageTitleHtml = intl.formatMessage(titleMessage, {
+    name: <DisplayNameSimple account={account} />,
+  });
+
   return (
-    <Column
+    <Column bindToDocument={!multiColumn} label={pageTitle}>
-      bindToDocument={!multiColumn}
-      label={intl.formatMessage(messages.heading)}
-    >
       <ColumnHeader
-        title={intl.formatMessage(messages.heading)}
+        title={pageTitleHtml}
         icon='collections'
         iconComponent={CollectionsFilledIcon}
         multiColumn={multiColumn}
         extraButton={
-          <Link
+          isOwnCollection && (
-            to='/collections/new'
+            <Link
-            className='column-header__button'
+              to='/collections/new'
-            title={intl.formatMessage(editorMessages.create)}
+              className='column-header__button'
-            aria-label={intl.formatMessage(editorMessages.create)}
+              title={intl.formatMessage(editorMessages.create)}
-          >
+              aria-label={intl.formatMessage(editorMessages.create)}
-            <Icon id='plus' icon={AddIcon} />
+            >
-          </Link>
+              <Icon id='plus' icon={AddIcon} />
+            </Link>
+          )
         }
       />
 
@@ -105,7 +131,7 @@ export const Collections: React.FC<{
       </Scrollable>
 
       <Helmet>
-        <title>{intl.formatMessage(messages.heading)}</title>
+        <title>{pageTitle}</title>
         <meta name='robots' content='noindex' />
       </Helmet>
     </Column>

app/javascript/flavours/glitch/features/navigation_panel/index.tsx

@@ -11,6 +11,7 @@ import type { Map as ImmutableMap } from 'immutable';
 import { animated, useSpring } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 
+import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import BookmarksActiveIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
@@ -226,6 +227,7 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
   const { signedIn, permissions, disabledAccountId } = useIdentity();
   const location = useLocation();
   const showSearch = useBreakpoint('full') && !multiColumn;
+  const account = useAccount(me);
   const dispatch = useAppDispatch();
 
   let banner: React.ReactNode;
@@ -361,7 +363,7 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
             {areCollectionsEnabled() && (
               <ColumnLink
                 transparent
-                to='/collections'
+                to={`/@${account?.acct}/collections`}
                 icon='collections'
                 iconComponent={CollectionsIcon}
                 activeIconComponent={CollectionsActiveIcon}

app/javascript/flavours/glitch/features/ui/components/confirmation_modals/delete_collection.tsx

@@ -4,6 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { useHistory } from 'react-router';
 
+import { useAccount } from '@/flavours/glitch/hooks/useAccount';
+import { me } from '@/flavours/glitch/initial_state';
 import { deleteCollection } from 'flavours/glitch/reducers/slices/collections';
 import { useAppDispatch } from 'flavours/glitch/store';
 
@@ -34,11 +36,12 @@ export const ConfirmDeleteCollectionModal: React.FC<
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const history = useHistory();
+  const { acct: currentUserName } = useAccount(me) ?? {};
 
   const onConfirm = useCallback(() => {
     void dispatch(deleteCollection({ collectionId: id }));
-    history.push('/collections');
+    history.push(`/@${currentUserName}/collections`);
-  }, [dispatch, history, id]);
+  }, [dispatch, history, id, currentUserName]);
 
   return (
     <ConfirmationModal

app/javascript/flavours/glitch/features/ui/index.jsx

@@ -240,6 +240,13 @@ class SwitchingColumnsArea extends PureComponent {
 
             <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
             <WrappedRoute path={['/@:acct/featured', '/accounts/:id/featured']} component={AccountFeatured} content={children} />
+            {areCollectionsEnabled() &&
+              [
+                <WrappedRoute path={['/@:acct/collections']} component={Collections} content={children} key='collections-list' />,
+                <WrappedRoute path={['/collections/new', '/collections/:id/edit']} component={CollectionsEditor} content={children} key='collections-editor' />,
+                <WrappedRoute path='/collections/:id' component={CollectionDetail} content={children} key='collections-detail' />,
+              ]
+            }
             <WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
             <WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
             <WrappedRoute path={['/accounts/:id/followers', '/users/:acct/followers', '/@:acct/followers']} component={Followers} content={children} />
@@ -263,13 +270,6 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/followed_tags' component={FollowedTags} content={children} />
             <WrappedRoute path='/mutes' component={Mutes} content={children} />
             <WrappedRoute path='/lists' component={Lists} content={children} />
-            {areCollectionsEnabled() &&
-              [
-                <WrappedRoute path={['/collections/new', '/collections/:id/edit']} component={CollectionsEditor} content={children} key='collections-editor' />,
-                <WrappedRoute path='/collections/:id' component={CollectionDetail} content={children} key='collections-detail' />,
-                <WrappedRoute path='/collections' component={Collections} content={children} key='collections-list' />
-              ]
-            }
             <Route component={BundleColumnError} />
           </WrappedSwitch>
         </ColumnsArea>

app/javascript/flavours/glitch/reducers/slices/collections.ts

@@ -311,7 +311,7 @@ interface AccountCollectionQuery {
 
 export const selectAccountCollections = createAppSelector(
   [
-    (_, accountId: string | null) => accountId,
+    (_, accountId?: string | null) => accountId,
     (state) => state.collections.accountCollections,
     (state) => state.collections.collections,
   ],