From 4c38bcce5d047b5c72e95b0a6ec2c3717e560f25 Mon Sep 17 00:00:00 2001 From: diondiondion Date: Thu, 9 Apr 2026 17:31:49 +0200 Subject: [PATCH] [Glitch] Change "My collections" path to `/@username/collections` Port d6c0b93c859febbb88332276d8fa40b9297efbea to glitch-soc Signed-off-by: Claire --- .../glitch/components/column_header.tsx | 2 +- .../glitch/features/collections/index.tsx | 66 +++++++++++++------ .../features/navigation_panel/index.tsx | 4 +- .../confirmation_modals/delete_collection.tsx | 7 +- .../flavours/glitch/features/ui/index.jsx | 14 ++-- .../glitch/reducers/slices/collections.ts | 2 +- 6 files changed, 63 insertions(+), 32 deletions(-) diff --git a/app/javascript/flavours/glitch/components/column_header.tsx b/app/javascript/flavours/glitch/components/column_header.tsx index a24996fa84..d40b47b28c 100644 --- a/app/javascript/flavours/glitch/components/column_header.tsx +++ b/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; diff --git a/app/javascript/flavours/glitch/features/collections/index.tsx b/app/javascript/flavours/glitch/features/collections/index.tsx index b629dc42e9..95e7eb68f6 100644 --- a/app/javascript/flavours/glitch/features/collections/index.tsx +++ b/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 })); - }, [dispatch, me]); + if (accountId) { + void dispatch(fetchAccountCollections({ accountId })); + } + }, [dispatch, accountId]); const emptyMessage = - status === 'error' ? ( + status === 'error' || !accountId ? ( ); + 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: , + }); + return ( - + - - + isOwnCollection && ( + + + + ) } /> @@ -105,7 +131,7 @@ export const Collections: React.FC<{ - {intl.formatMessage(messages.heading)} + {pageTitle} diff --git a/app/javascript/flavours/glitch/features/navigation_panel/index.tsx b/app/javascript/flavours/glitch/features/navigation_panel/index.tsx index f21c4c15a2..842951d84a 100644 --- a/app/javascript/flavours/glitch/features/navigation_panel/index.tsx +++ b/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() && ( { void dispatch(deleteCollection({ collectionId: id })); - history.push('/collections'); - }, [dispatch, history, id]); + history.push(`/@${currentUserName}/collections`); + }, [dispatch, history, id, currentUserName]); return ( + {areCollectionsEnabled() && + [ + , + , + , + ] + } @@ -263,13 +270,6 @@ class SwitchingColumnsArea extends PureComponent { - {areCollectionsEnabled() && - [ - , - , - - ] - } diff --git a/app/javascript/flavours/glitch/reducers/slices/collections.ts b/app/javascript/flavours/glitch/reducers/slices/collections.ts index 8d0e9ad147..76721a07b1 100644 --- a/app/javascript/flavours/glitch/reducers/slices/collections.ts +++ b/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, ],