Add collection detail page (#37897)

app/javascript/mastodon/features/ui/index.jsx

@@ -65,6 +65,7 @@ import {
   ListEdit,
   ListMembers,
   Collections,
+  CollectionDetail,
   CollectionsEditor,
   Blocks,
   DomainBlocks,
@@ -269,12 +270,12 @@ class SwitchingColumnsArea extends PureComponent {
             <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} />
+              [
+                <WrappedRoute path={['/collections/new', '/collections/:id/edit']} component={CollectionsEditor} content={children} />,
+                <WrappedRoute path='/collections/:id' component={CollectionDetail} content={children} />,
+                <WrappedRoute path='/collections' component={Collections} content={children} />
+              ]
             }
-            {areCollectionsEnabled() &&
-              <WrappedRoute path='/collections' component={Collections} content={children} />
-            }
-
             <Route component={BundleColumnError} />
           </WrappedSwitch>
         </ColumnsAreaContainer>

app/javascript/mastodon/features/ui/util/async-components.js

@@ -44,13 +44,19 @@ export function Lists () {
   return import('../../lists');
 }
 
-export function Collections () {
+export function Collections() {
   return import('../../collections').then(
     module => ({default: module.Collections})
   );
 }
 
-export function CollectionsEditor () {
+export function CollectionDetail() {
+  return import('../../collections/detail/index').then(
+    module => ({default: module.CollectionDetailPage})
+  );
+}
+
+export function CollectionsEditor() {
   return import('../../collections/editor').then(
     module => ({default: module.CollectionEditorPage})
   );