fix(dashboard): Fix display of collection children column

packages/dashboard/src/app/routes/_authenticated/_collections/collections.graphql.ts

@@ -27,6 +27,7 @@ export const collectionListDocument = graphql(
                     }
                     children {
                         id
+                        name
                     }
                     position
                     isPrivate

packages/dashboard/src/app/routes/_authenticated/_collections/collections.tsx

@@ -13,6 +13,7 @@ import { ResultOf } from 'gql.tada';
 import { Folder, FolderOpen, FolderTreeIcon, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
 import {
     AssignCollectionsToChannelBulkAction,
@@ -150,6 +151,26 @@ function CollectionListPage() {
                             );
                         },
                     },
+                    children: {
+                        cell: ({ row }) => {
+                            const children = row.original.children ?? [];
+                            const count = children.length;
+                            const maxDisplay = 5;
+                            const leftOver = Math.max(count - maxDisplay, 0);
+                            return (
+                                <div className="flex flex-wrap gap-2">
+                                    {children.slice(0, maxDisplay).map(child => (
+                                        <Badge variant="outline">{child.name}</Badge>
+                                    ))}
+                                    {leftOver > 0 ? (
+                                        <Badge variant="outline">
+                                            <Trans>+ {leftOver} more</Trans>
+                                        </Badge>
+                                    ) : null}
+                                </div>
+                            );
+                        },
+                    },
                 }}
                 defaultColumnOrder={[
                     'featuredAsset',