tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Port d6c0b93c859febbb88332276d8fa40b9297efbea to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-04-09 17:31:49 +02:00 committed by Claire
parent 852e3052e8
commit 4c38bcce5d
6 changed files with 63 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/components/column_header.tsx
View File

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

66
app/javascript/flavours/glitch/features/collections/index.tsx
View File

@ -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 ? (
<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
bindToDocument={!multiColumn}
label={intl.formatMessage(messages.heading)}
>
<Column bindToDocument={!multiColumn} label={pageTitle}>
<ColumnHeader
title={intl.formatMessage(messages.heading)}
title={pageTitleHtml}
icon='collections'
iconComponent={CollectionsFilledIcon}
multiColumn={multiColumn}
extraButton={
<Link
to='/collections/new'
className='column-header__button'
title={intl.formatMessage(editorMessages.create)}
aria-label={intl.formatMessage(editorMessages.create)}
>
<Icon id='plus' icon={AddIcon} />
</Link>
isOwnCollection && (
<Link
to='/collections/new'
className='column-header__button'
title={intl.formatMessage(editorMessages.create)}
aria-label={intl.formatMessage(editorMessages.create)}
>
<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>

4
app/javascript/flavours/glitch/features/navigation_panel/index.tsx
View File

@ -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}

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

@ -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');
}, [dispatch, history, id]);
history.push(`/@${currentUserName}/collections`);
}, [dispatch, history, id, currentUserName]);
return (
<ConfirmationModal

14
app/javascript/flavours/glitch/features/ui/index.jsx
View File

@ -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>

2
app/javascript/flavours/glitch/reducers/slices/collections.ts
View File

@ -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,
],