Show collection preview cards and open collections links locally (#38643)

app/javascript/mastodon/features/collections/components/collection_lockup.tsx

@@ -13,6 +13,8 @@ import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import { useAccount } from 'mastodon/hooks/useAccount';
 import { domain } from 'mastodon/initial_state';
 
+import { getCollectionPath } from '../utils';
+
 import classes from './collection_lockup.module.scss';
 
 export const AvatarGrid: React.FC<{
@@ -67,7 +69,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
       />
       <div>
         <h2 id={linkId}>
-          <Link to={`/collections/${id}`} className={classes.link}>
+          <Link to={getCollectionPath(id)} className={classes.link}>
             {name}
           </Link>
         </h2>

app/javascript/mastodon/features/collections/components/collection_menu.tsx

@@ -15,6 +15,7 @@ import type { MenuItem } from 'mastodon/models/dropdown_menu';
 import { useAppDispatch } from 'mastodon/store';
 
 import { messages as editorMessages } from '../editor';
+import { getCollectionPath } from '../utils';
 
 const messages = defineMessages({
   view: {
@@ -120,7 +121,7 @@ export const CollectionMenu: React.FC<{
   const menu = useMemo(() => {
     const viewCollectionItem: MenuItem = {
       text: intl.formatMessage(messages.view),
-      to: `/collections/${id}`,
+      to: getCollectionPath(id),
     };
     const shareItems: MenuItem[] = [
       {
@@ -130,7 +131,7 @@ export const CollectionMenu: React.FC<{
       {
         text: intl.formatMessage(messages.copyLink),
         action: () => {
-          void navigator.clipboard.writeText(`/collections/${id}`);
+          void navigator.clipboard.writeText(getCollectionPath(id));
           dispatch(showAlert({ message: messages.copyLinkConfirmation }));
         },
       },

app/javascript/mastodon/features/collections/editor/details.tsx

@@ -38,6 +38,8 @@ import {
 } from 'mastodon/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
+import { getCollectionPath } from '../utils';
+
 import classes from './styles.module.scss';
 import { WizardStepTitle } from './wizard_step_title';
 
@@ -134,7 +136,7 @@ export const CollectionDetails: React.FC = () => {
         ).then((result) => {
           if (isFulfilled(result)) {
             history.replace(`/@${currentUserName}/collections`);
-            history.push(`/collections/${result.payload.collection.id}`, {
+            history.push(getCollectionPath(result.payload.collection.id), {
               newCollection: true,
             });
           }

app/javascript/mastodon/features/collections/utils.ts

@@ -3,3 +3,5 @@ import { isServerFeatureEnabled } from '@/mastodon/utils/environment';
 export function areCollectionsEnabled() {
   return isServerFeatureEnabled('collections');
 }
+
+export const getCollectionPath = (id: string) => `/collections/${id}`;