convex-cms 0.0.5-alpha.3 → 0.0.5-alpha.5

package/admin/src/routes/media.tsx

@@ -1,1095 +1,24 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useQuery, useMutation } from 'convex/react'
-import { api } from '../../convex/_generated/api'
-import { useState, useMemo, useCallback, useEffect } from 'react'
-import { useSettingsConfig } from '~/contexts'
-// IDs are strings when crossing component boundaries
-import { UploadDropzone, type UploadedFile } from '../components/UploadDropzone'
-import { CmsPageHeader } from '~/components/cmsds/CmsPageHeader'
-import { CmsToolbar } from '~/components/cmsds/CmsToolbar'
-import { CmsEmptyState } from '~/components/cmsds/CmsEmptyState'
-import { CmsSurface as _CmsSurface } from '~/components/cmsds/CmsSurface'
-import { CmsButton } from '~/components/cmsds/CmsButton'
-import { TaxonomyFilter } from '~/components/filters/TaxonomyFilter'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from '~/components/ui/dialog'
-import { Input } from '~/components/ui/input'
-import { Label } from '~/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '~/components/ui/select'
-import { Checkbox } from '~/components/ui/checkbox'
-import { cn } from '~/lib/cn'
-import {
-  Image,
-  Video,
-  Music,
-  FileText,
-  File,
-  Folder,
-  Home,
-  ChevronLeft,
-  FolderPlus,
-  Upload,
-  Search,
-  X,
-  Trash2,
-  RotateCcw,
-} from 'lucide-react'
-import {
-  MediaPreviewModal,
-  type MediaAsset,
-} from '~/components/media/MediaPreviewModal'
-import {
-  MediaAssetEditDialog,
-  type MediaAssetForEdit,
-} from '~/components/media/MediaAssetEditDialog'
-import {
-  MediaFolderEditDialog,
-  type MediaFolderForEdit,
-} from '~/components/media/MediaFolderEditDialog'
-import { MediaAssetActions } from '~/components/media/MediaAssetActions'
-import { MediaFolderActions } from '~/components/media/MediaFolderActions'
-import { MediaBulkActionBar } from '~/components/media/MediaBulkActionBar'
-import { MediaTrashBulkActionBar } from '~/components/media/MediaTrashBulkActionBar'
-import { MediaMoveModal } from '~/components/media/MediaMoveModal'
-import { CmsConfirmDialog } from '~/components/cmsds/CmsDialog'
-import { Tabs, TabsList, TabsTrigger } from '~/components/ui/tabs'
-import { Badge } from '~/components/ui/badge'
-
-type MediaView = 'library' | 'trash'
-
-export const Route = createFileRoute('/media')({
-  component: MediaPage,
-})
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
-}
-
-function formatDate(timestamp: number): string {
-  return new Date(timestamp).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  })
-}
-
-function getMediaTypeIcon(type: string, className = 'size-6') {
-  const iconProps = { className }
-  switch (type) {
-    case 'image':
-      return <Image {...iconProps} />
-    case 'video':
-      return <Video {...iconProps} />
-    case 'audio':
-      return <Music {...iconProps} />
-    case 'document':
-      return <FileText {...iconProps} />
-    default:
-      return <File {...iconProps} />
-  }
-}
-
-type MediaType = 'image' | 'video' | 'audio' | 'document' | 'other'
-
-function getMediaTypeFromMimeType(mimeType?: string): MediaType {
-  if (!mimeType) return 'other'
-  if (mimeType.startsWith('image/')) return 'image'
-  if (mimeType.startsWith('video/')) return 'video'
-  if (mimeType.startsWith('audio/')) return 'audio'
-  if (
-    mimeType === 'application/pdf' ||
-    mimeType.includes('document') ||
-    mimeType.includes('sheet') ||
-    mimeType.includes('presentation') ||
-    mimeType.startsWith('text/')
-  ) {
-    return 'document'
-  }
-  return 'other'
-}
-
-function MediaPage() {
-  const { settings } = useSettingsConfig()
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    if (settings && !settings.features.mediaManagement) {
-      navigate({ to: '/' })
-    }
-  }, [settings, navigate])
-
-  const [currentFolderId, setCurrentFolderId] = useState<
-    string | undefined
-  >(undefined)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [typeFilter, setTypeFilter] = useState<MediaType | ''>('')
-  const [selectedTermIds, setSelectedTermIds] = useState<string[]>([])
-  const [selectedAssets, setSelectedAssets] = useState<Set<string>>(
-    new Set()
-  )
-  const [isSelectionMode, setIsSelectionMode] = useState(false)
-  const [showNewFolderModal, setShowNewFolderModal] = useState(false)
-  const [showUploadModal, setShowUploadModal] = useState(false)
-  const [newFolderName, setNewFolderName] = useState('')
-  const [isCreatingFolder, setIsCreatingFolder] = useState(false)
-  const [folderError, setFolderError] = useState('')
-  const [previewIndex, setPreviewIndex] = useState<number | null>(null)
-  const [editingAsset, setEditingAsset] = useState<MediaAssetForEdit | null>(null)
-  const [editingFolder, setEditingFolder] = useState<MediaFolderForEdit | null>(null)
-  const [deleteTarget, setDeleteTarget] = useState<{
-    type: 'asset' | 'folder'
-    id: string
-    name: string
-  } | null>(null)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [showMoveModal, setShowMoveModal] = useState(false)
-  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false)
-  const [isBulkDeleting, setIsBulkDeleting] = useState(false)
-  const [activeView, setActiveView] = useState<MediaView>('library')
-  const [isRestoring, setIsRestoring] = useState(false)
-  const [isPermanentlyDeleting, setIsPermanentlyDeleting] = useState(false)
-  const [showPermanentDeleteConfirm, setShowPermanentDeleteConfirm] = useState(false)
-  const [permanentDeleteTarget, setPermanentDeleteTarget] = useState<string | 'bulk' | null>(null)
-
-  const isTrashView = activeView === 'trash'
-
-  const assetsResult = useQuery(api.media.listAssets, {
-    folderId: isTrashView ? undefined : currentFolderId,
-    type: typeFilter || undefined,
-    search: searchQuery || undefined,
-    deletedOnly: isTrashView ? true : undefined,
-    paginationOpts: { numItems: 100, cursor: null },
-  })
-
-  const trashCount = useQuery(api.media.getTrashCount, {})
-
-  const mediaByTermResult0 = useQuery(
-    api.taxonomies.getMediaByTerm,
-    selectedTermIds[0] ? { termId: selectedTermIds[0] } : 'skip'
-  )
-  const mediaByTermResult1 = useQuery(
-    api.taxonomies.getMediaByTerm,
-    selectedTermIds[1] ? { termId: selectedTermIds[1] } : 'skip'
-  )
-  const mediaByTermResult2 = useQuery(
-    api.taxonomies.getMediaByTerm,
-    selectedTermIds[2] ? { termId: selectedTermIds[2] } : 'skip'
-  )
-
-  const termFilteredMediaIds = useMemo(() => {
-    if (selectedTermIds.length === 0) return null
-    const ids = new Set<string>()
-    const results = [mediaByTermResult0, mediaByTermResult1, mediaByTermResult2]
-    for (let i = 0; i < selectedTermIds.length && i < 3; i++) {
-      const result = results[i]
-      if (result?.page) {
-        for (const mediaId of result.page) {
-          ids.add(mediaId)
-        }
-      }
-    }
-    return ids
-  }, [selectedTermIds, mediaByTermResult0, mediaByTermResult1, mediaByTermResult2])
-
-  const folders = useQuery(api.media.listFolders, {
-    parentId: isTrashView ? undefined : currentFolderId,
-    deletedOnly: isTrashView || undefined,
-  })
-
-  const currentFolder = useQuery(
-    api.media.getFolder,
-    currentFolderId ? { id: currentFolderId } : 'skip'
-  )
-
-  const folderTree = useQuery(api.media.getFolderTree, {})
-
-  const createFolder = useMutation(api.media.createFolder)
-  const deleteAsset = useMutation(api.media.deleteAsset)
-  const deleteFolder = useMutation(api.media.deleteFolder)
-  const restoreAsset = useMutation(api.media.restoreAsset)
-  const restoreFolder = useMutation(api.media.restoreFolder)
-  const permanentDeleteAsset = useMutation(api.media.permanentDeleteAsset)
-  const bulkPermanentDeleteAssets = useMutation(api.media.bulkPermanentDeleteAssets)
-
-  const breadcrumbPath = useMemo(() => {
-    if (!currentFolderId || !folderTree) return []
-
-    type FolderItem = (typeof folderTree)[number]
-    const path: FolderItem[] = []
-    let folder: FolderItem | undefined = folderTree.find(
-      (f) => f._id === currentFolderId
-    )
-
-    while (folder) {
-      path.unshift(folder)
-      const parentId = folder.parentId
-      folder = parentId ? folderTree.find((f) => f._id === parentId) : undefined
-    }
-
-    return path
-  }, [currentFolderId, folderTree])
-
-  const handleFolderClick = useCallback((folderId: string) => {
-    setCurrentFolderId(folderId)
-    setSearchQuery('')
-  }, [])
-
-  const handleNavigateUp = useCallback(() => {
-    if (currentFolder?.parentId) {
-      setCurrentFolderId(currentFolder.parentId as string)
-    } else {
-      setCurrentFolderId(undefined)
-    }
-  }, [currentFolder])
-
-  const handleNavigateToRoot = useCallback(() => {
-    setCurrentFolderId(undefined)
-    setSearchQuery('')
-  }, [])
-
-  const handleAssetSelect = useCallback((assetId: string) => {
-    setSelectedAssets((prev) => {
-      const next = new Set(prev)
-      if (next.has(assetId)) {
-        next.delete(assetId)
-      } else {
-        next.add(assetId)
-      }
-      return next
-    })
-  }, [])
-
-  const handleSelectAll = useCallback(() => {
-    if (!assetsResult?.page) return
-    setSelectedAssets(
-      new Set(assetsResult.page.map((a) => a._id as string))
-    )
-  }, [assetsResult?.page])
-
-  const handleDeselectAll = useCallback(() => {
-    setSelectedAssets(new Set())
-  }, [])
-
-  const handleViewChange = useCallback((view: MediaView) => {
-    setActiveView(view)
-    setSelectedAssets(new Set())
-    setIsSelectionMode(false)
-  }, [])
-
-  const handleAssetClick = useCallback(
-    (assetId: string) => {
-      if (isSelectionMode) {
-        handleAssetSelect(assetId)
-      } else {
-        const index = assetsResult?.page?.findIndex((a) => a._id === assetId) ?? -1
-        if (index !== -1) {
-          setPreviewIndex(index)
-        }
-      }
-    },
-    [isSelectionMode, handleAssetSelect, assetsResult?.page]
-  )
-
-  const handlePreviewNavigate = useCallback((index: number) => {
-    setPreviewIndex(index)
-  }, [])
-
-  const handleDelete = useCallback(async () => {
-    if (!deleteTarget) return
-
-    setIsDeleting(true)
-    try {
-      if (deleteTarget.type === 'asset') {
-        await deleteAsset({ id: deleteTarget.id })
-      } else {
-        await deleteFolder({ id: deleteTarget.id })
-      }
-      setDeleteTarget(null)
-    } catch (err) {
-      console.error('Delete failed:', err)
-    } finally {
-      setIsDeleting(false)
-    }
-  }, [deleteTarget, deleteAsset, deleteFolder])
-
-  const handleBulkDelete = useCallback(async () => {
-    if (selectedAssets.size === 0) return
-
-    setIsBulkDeleting(true)
-    try {
-      const deletePromises = Array.from(selectedAssets).map((id) =>
-        deleteAsset({ id })
-      )
-      await Promise.all(deletePromises)
-      setSelectedAssets(new Set())
-      setIsSelectionMode(false)
-      setShowBulkDeleteConfirm(false)
-    } catch (err) {
-      console.error('Bulk delete failed:', err)
-    } finally {
-      setIsBulkDeleting(false)
-    }
-  }, [selectedAssets, deleteAsset])
-
-  const handleBulkMoveComplete = useCallback(() => {
-    setSelectedAssets(new Set())
-    setIsSelectionMode(false)
-  }, [])
-
-  const handleRestore = useCallback(
-    async (assetId: string) => {
-      setIsRestoring(true)
-      try {
-        await restoreAsset({ id: assetId })
-      } catch (err) {
-        console.error('Restore failed:', err)
-      } finally {
-        setIsRestoring(false)
-      }
-    },
-    [restoreAsset]
-  )
-
-  const handleBulkRestore = useCallback(async () => {
-    if (selectedAssets.size === 0) return
-
-    setIsRestoring(true)
-    try {
-      const restorePromises = Array.from(selectedAssets).map((id) =>
-        restoreAsset({ id })
-      )
-      await Promise.all(restorePromises)
-      setSelectedAssets(new Set())
-      setIsSelectionMode(false)
-    } catch (err) {
-      console.error('Bulk restore failed:', err)
-    } finally {
-      setIsRestoring(false)
-    }
-  }, [selectedAssets, restoreAsset])
-
-  const handleRestoreFolder = useCallback(
-    async (folderId: string) => {
-      setIsRestoring(true)
-      try {
-        await restoreFolder({ id: folderId })
-      } catch (err) {
-        console.error('Restore folder failed:', err)
-      } finally {
-        setIsRestoring(false)
-      }
-    },
-    [restoreFolder]
-  )
-
-  const handlePermanentDelete = useCallback(async () => {
-    if (!permanentDeleteTarget) return
-
-    setIsPermanentlyDeleting(true)
-    try {
-      if (permanentDeleteTarget === 'bulk') {
-        await bulkPermanentDeleteAssets({ ids: Array.from(selectedAssets) })
-        setSelectedAssets(new Set())
-        setIsSelectionMode(false)
-      } else {
-        await permanentDeleteAsset({ id: permanentDeleteTarget })
-      }
-      setShowPermanentDeleteConfirm(false)
-      setPermanentDeleteTarget(null)
-    } catch (err) {
-      console.error('Permanent delete failed:', err)
-    } finally {
-      setIsPermanentlyDeleting(false)
-    }
-  }, [permanentDeleteTarget, permanentDeleteAsset, bulkPermanentDeleteAssets, selectedAssets])
-
-  const handleCreateFolder = useCallback(async () => {
-    if (!newFolderName.trim()) {
-      setFolderError('Folder name is required')
-      return
-    }
-
-    setIsCreatingFolder(true)
-    setFolderError('')
-
-    try {
-      await createFolder({
-        name: newFolderName.trim(),
-        parentId: currentFolderId,
-      })
-      setShowNewFolderModal(false)
-      setNewFolderName('')
-    } catch (error) {
-      setFolderError(
-        error instanceof Error ? error.message : 'Failed to create folder'
-      )
-    } finally {
-      setIsCreatingFolder(false)
-    }
-  }, [newFolderName, currentFolderId, createFolder])
-
-  const handleUploadComplete = useCallback((_results: UploadedFile[]) => {
-    setShowUploadModal(false)
-  }, [])
-
-  const isLoading = assetsResult === undefined || folders === undefined
-
-  const displayedAssets = useMemo(() => {
-    const assets = assetsResult?.page ?? []
-    if (termFilteredMediaIds === null) {
-      return assets
-    }
-    return assets.filter((asset) => termFilteredMediaIds.has(asset._id))
-  }, [assetsResult?.page, termFilteredMediaIds])
-
-  return (
-    <div className="space-y-6 p-6">
-      <CmsPageHeader
-        title="Media Library"
-        description="Upload, organize, and manage media assets for your content."
-      />
-
-      <Tabs value={activeView} onValueChange={(v) => handleViewChange(v as MediaView)}>
-        <TabsList>
-          <TabsTrigger value="library">
-            <Image className="mr-1.5 size-4" />
-            Library
-          </TabsTrigger>
-          <TabsTrigger value="trash">
-            <Trash2 className="mr-1.5 size-4" />
-            Trash
-            {trashCount && trashCount.total > 0 && (
-              <Badge variant="secondary" className="ml-1.5">
-                {trashCount.total}
-              </Badge>
-            )}
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-
-      {!isTrashView && (
-        <nav className="flex items-center gap-1" aria-label="Folder navigation">
-          <button
-            className={cn(
-              'flex items-center gap-1.5 rounded-md px-2 py-1 text-sm transition-colors',
-              !currentFolderId
-                ? 'bg-primary/10 font-medium text-primary'
-                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-            )}
-            onClick={handleNavigateToRoot}
-          >
-            <Home className="size-4" />
-            <span>All Files</span>
-          </button>
-          {breadcrumbPath.map((folder, index) => (
-            <span key={folder._id} className="flex items-center">
-              <span className="mx-1 text-muted-foreground">/</span>
-              <button
-                className={cn(
-                  'rounded-md px-2 py-1 text-sm transition-colors',
-                  index === breadcrumbPath.length - 1
-                    ? 'bg-primary/10 font-medium text-primary'
-                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-                )}
-                onClick={() => handleFolderClick(folder._id as string)}
-              >
-                {folder.name}
-              </button>
-            </span>
-          ))}
-        </nav>
-      )}
-
-      <CmsToolbar
-        left={
-          <div className="flex items-center gap-3">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                type="search"
-                placeholder="Search files..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-64 pl-9"
-              />
-              {searchQuery && (
-                <button
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-muted"
-                  onClick={() => setSearchQuery('')}
-                  aria-label="Clear search"
-                >
-                  <X className="size-4 text-muted-foreground" />
-                </button>
-              )}
-            </div>
-
-            <Select
-              value={typeFilter || 'all'}
-              onValueChange={(v) => setTypeFilter(v === 'all' ? '' : (v as MediaType))}
-            >
-              <SelectTrigger className="w-36">
-                <SelectValue placeholder="All Types" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All Types</SelectItem>
-                <SelectItem value="image">Images</SelectItem>
-                <SelectItem value="video">Videos</SelectItem>
-                <SelectItem value="audio">Audio</SelectItem>
-                <SelectItem value="document">Documents</SelectItem>
-                <SelectItem value="other">Other</SelectItem>
-              </SelectContent>
-            </Select>
-
-            <TaxonomyFilter
-              selectedTermIds={selectedTermIds}
-              onChange={setSelectedTermIds}
-              placeholder="Tags"
-            />
-
-            {assetsResult?.page && assetsResult.page.length > 0 && (
-              <label className="flex cursor-pointer items-center gap-2 text-sm">
-                <Checkbox
-                  checked={isSelectionMode}
-                  onCheckedChange={(checked) => {
-                    setIsSelectionMode(checked as boolean)
-                    if (!checked) {
-                      setSelectedAssets(new Set())
-                    }
-                  }}
-                />
-                Selection Mode
-              </label>
-            )}
-          </div>
-        }
-        right={
-          <div className="flex items-center gap-2">
-            {isSelectionMode && selectedAssets.size > 0 && (
-              <span className="text-sm text-muted-foreground">
-                {selectedAssets.size} selected
-              </span>
-            )}
-
-            {isSelectionMode && (
-              <>
-                <CmsButton variant="secondary" size="sm" onClick={handleSelectAll}>
-                  Select All
-                </CmsButton>
-                <CmsButton variant="secondary" size="sm" onClick={handleDeselectAll}>
-                  Clear
-                </CmsButton>
-              </>
-            )}
-
-            {currentFolderId && !isTrashView && (
-              <CmsButton variant="secondary" onClick={handleNavigateUp}>
-                <ChevronLeft className="size-4" />
-                Up
-              </CmsButton>
-            )}
-
-            {!isTrashView && (
-              <>
-                <CmsButton
-                  variant="secondary"
-                  onClick={() => setShowNewFolderModal(true)}
-                >
-                  <FolderPlus className="size-4" />
-                  New Folder
-                </CmsButton>
-
-                <CmsButton onClick={() => setShowUploadModal(true)}>
-                  <Upload className="size-4" />
-                  Upload Files
-                </CmsButton>
-              </>
-            )}
-          </div>
-        }
-      />
-
-      {isLoading ? (
-        <div className="flex flex-col items-center justify-center py-12">
-          <div className="size-8 animate-spin rounded-full border-2 border-muted border-t-primary" />
-          <p className="mt-4 text-sm text-muted-foreground">
-            Loading media library...
-          </p>
-        </div>
-      ) : (
-        <>
-          {!isTrashView && folders && folders.length > 0 && !searchQuery && (
-            <section>
-              <h3 className="mb-3 text-sm font-medium text-muted-foreground">
-                Folders
-              </h3>
-              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6">
-                {folders.map((folder) => (
-                  <div
-                    key={folder._id}
-                    className="group relative flex flex-col items-center gap-2 rounded-lg border bg-card p-4 text-center transition-colors hover:border-primary/50 hover:bg-muted/50 cursor-pointer"
-                    onClick={() =>
-                      handleFolderClick(folder._id as string)
-                    }
-                  >
-                    <div className="absolute right-2 top-2">
-                      <MediaFolderActions
-                        folder={{ _id: folder._id, name: folder.name }}
-                        onEdit={() =>
-                          setEditingFolder({
-                            _id: folder._id,
-                            name: folder.name,
-                            description: folder.description,
-                          })
-                        }
-                        onDelete={() =>
-                          setDeleteTarget({
-                            type: 'folder',
-                            id: folder._id,
-                            name: folder.name,
-                          })
-                        }
-                      />
-                    </div>
-                    <Folder className="size-10 text-amber-500" />
-                    <span className="truncate text-sm font-medium">
-                      {folder.name}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </section>
-          )}
-
-          {isTrashView && folders && folders.length > 0 && (
-            <section>
-              <h3 className="mb-3 text-sm font-medium text-muted-foreground">
-                Deleted Folders ({folders.length})
-              </h3>
-              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6">
-                {folders.map((folder) => (
-                  <div
-                    key={folder._id}
-                    className="group relative flex flex-col items-center gap-2 rounded-lg border border-destructive/20 bg-card p-4 text-center opacity-60"
-                  >
-                    <Folder className="size-10 text-amber-500/50" />
-                    <span className="truncate text-sm font-medium">
-                      {folder.name}
-                    </span>
-                    <CmsButton
-                      variant="secondary"
-                      size="sm"
-                      onClick={() => handleRestoreFolder(folder._id)}
-                      disabled={isRestoring}
-                    >
-                      <RotateCcw className="mr-1 size-3" />
-                      Restore
-                    </CmsButton>
-                  </div>
-                ))}
-              </div>
-            </section>
-          )}
-
-          {displayedAssets.length > 0 ? (
-            <section>
-              {!isTrashView && folders && folders.length > 0 && !searchQuery && (
-                <h3 className="mb-3 text-sm font-medium text-muted-foreground">
-                  Files
-                </h3>
-              )}
-              {isTrashView && (
-                <h3 className="mb-3 text-sm font-medium text-muted-foreground">
-                  Deleted Files ({displayedAssets.length})
-                </h3>
-              )}
-              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6">
-                {displayedAssets.map((asset) => {
-                  const assetId = asset._id as string
-                  const isSelected = selectedAssets.has(assetId)
-                  const mediaType = getMediaTypeFromMimeType(asset.mimeType)
-
-                  return (
-                    <div
-                      key={asset._id}
-                      className={cn(
-                        'group relative flex flex-col overflow-hidden rounded-lg border bg-card transition-all cursor-pointer hover:border-primary/50',
-                        isSelected && 'border-primary ring-2 ring-primary/20'
-                      )}
-                      onClick={() => handleAssetClick(assetId)}
-                    >
-                      {isSelectionMode && (
-                        <div className="absolute left-2 top-2 z-10">
-                          <Checkbox
-                            checked={isSelected}
-                            onCheckedChange={() => handleAssetSelect(assetId)}
-                            onClick={(e) => e.stopPropagation()}
-                            className="bg-white/80"
-                          />
-                        </div>
-                      )}
-
-                      {!isSelectionMode && !isTrashView && (
-                        <div className="absolute right-2 top-2 z-10">
-                          <MediaAssetActions
-                            asset={{
-                              _id: asset._id,
-                              name: asset.name,
-                              url: asset.url,
-                            }}
-                            onView={() => {
-                              const index = displayedAssets.findIndex(
-                                (a) => a._id === asset._id
-                              )
-                              if (index !== -1) setPreviewIndex(index)
-                            }}
-                            onEdit={() =>
-                              setEditingAsset({
-                                _id: asset._id,
-                                name: asset.name,
-                                title: asset.title,
-                                description: asset.description,
-                                altText: asset.altText,
-                                tags: asset.tags,
-                              })
-                            }
-                            onDelete={() =>
-                              setDeleteTarget({
-                                type: 'asset',
-                                id: asset._id,
-                                name: asset.name,
-                              })
-                            }
-                          />
-                        </div>
-                      )}
-
-                      {!isSelectionMode && isTrashView && (
-                        <div className="absolute right-2 top-2 z-10 flex gap-1 opacity-0 group-hover:opacity-100">
-                          <CmsButton
-                            variant="secondary"
-                            size="icon-sm"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              handleRestore(asset._id)
-                            }}
-                            title="Restore"
-                          >
-                            <RotateCcw className="size-4" />
-                          </CmsButton>
-                          <CmsButton
-                            variant="danger"
-                            size="icon-sm"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              setPermanentDeleteTarget(asset._id)
-                              setShowPermanentDeleteConfirm(true)
-                            }}
-                            title="Delete Forever"
-                          >
-                            <Trash2 className="size-4" />
-                          </CmsButton>
-                        </div>
-                      )}
-
-                      <div className="aspect-square overflow-hidden bg-muted">
-                        {mediaType === 'image' && asset.url ? (
-                          <img
-                            src={asset.url}
-                            alt={asset.title || asset.name}
-                            className="h-full w-full object-cover"
-                          />
-                        ) : (
-                          <div className="flex size-full items-center justify-center text-muted-foreground">
-                            {getMediaTypeIcon(mediaType, 'size-10')}
-                          </div>
-                        )}
-                      </div>
-
-                      <div className="p-2">
-                        <p
-                          className="truncate text-sm font-medium"
-                          title={asset.name}
-                        >
-                          {asset.name}
-                        </p>
-                        <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
-                          <span className="capitalize">{mediaType}</span>
-                          <span>•</span>
-                          <span>{formatFileSize(asset.size ?? 0)}</span>
-                        </div>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          {formatDate(asset._creationTime)}
-                        </p>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-
-              {!assetsResult.isDone && (
-                <p className="mt-4 text-center text-sm text-muted-foreground">
-                  Showing {assetsResult.page.length} files. More files available.
-                </p>
-              )}
-            </section>
-          ) : isTrashView ? (
-            <CmsEmptyState
-              icon={<Trash2 className="size-8" />}
-              title="Trash is empty"
-              description="Deleted files will appear here. You can restore them or permanently delete them."
-            />
-          ) : (
-            !folders?.length && (
-              <CmsEmptyState
-                icon={<Image className="size-8" />}
-                title="No media assets yet"
-                description="Upload images, videos, documents, and other files to use in your content."
-                action={{
-                  label: 'Upload Files',
-                  onClick: () => setShowUploadModal(true),
-                }}
-              />
-            )
-          )}
-
-          {searchQuery && displayedAssets.length === 0 && !isTrashView && (
-            <CmsEmptyState
-              icon={<Search className="size-8" />}
-              title="No results found"
-              description={`No files match "${searchQuery}". Try a different search term.`}
-              action={{
-                label: 'Clear Search',
-                onClick: () => setSearchQuery(''),
-                variant: 'secondary',
-              }}
-            />
-          )}
-        </>
-      )}
-
-      <Dialog open={showNewFolderModal} onOpenChange={setShowNewFolderModal}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Create New Folder</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="folder-name">Folder Name</Label>
-              <Input
-                id="folder-name"
-                value={newFolderName}
-                onChange={(e) => {
-                  setNewFolderName(e.target.value)
-                  setFolderError('')
-                }}
-                placeholder="Enter folder name"
-                autoFocus
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && !isCreatingFolder) {
-                    handleCreateFolder()
-                  }
-                }}
-              />
-              {folderError && (
-                <p className="text-sm text-destructive">{folderError}</p>
-              )}
-            </div>
-          </div>
-          <DialogFooter>
-            <CmsButton
-              variant="secondary"
-              onClick={() => setShowNewFolderModal(false)}
-              disabled={isCreatingFolder}
-            >
-              Cancel
-            </CmsButton>
-            <CmsButton
-              onClick={handleCreateFolder}
-              disabled={isCreatingFolder || !newFolderName.trim()}
-              loading={isCreatingFolder}
-            >
-              Create Folder
-            </CmsButton>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={showUploadModal} onOpenChange={setShowUploadModal}>
-        <DialogContent className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Upload Files</DialogTitle>
-          </DialogHeader>
-          <div className="py-4">
-            <UploadDropzone
-              currentFolderId={currentFolderId}
-              generateUploadUrl={api.media.generateUploadUrl}
-              createAsset={api.media.createAsset}
-              onUploadComplete={handleUploadComplete}
-              maxFileSize={50 * 1024 * 1024}
-              maxConcurrentUploads={3}
-            />
-          </div>
-          <DialogFooter>
-            <CmsButton variant="secondary" onClick={() => setShowUploadModal(false)}>
-              Close
-            </CmsButton>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Preview Modal */}
-      <MediaPreviewModal
-        asset={
-          previewIndex !== null && displayedAssets[previewIndex]
-            ? (displayedAssets[previewIndex] as MediaAsset)
-            : null
-        }
-        assets={displayedAssets as MediaAsset[]}
-        currentIndex={previewIndex ?? 0}
-        open={previewIndex !== null}
-        onOpenChange={(open) => {
-          if (!open) setPreviewIndex(null)
-        }}
-        onNavigate={handlePreviewNavigate}
-        onEdit={
-          isTrashView
-            ? undefined
-            : (asset) =>
-                setEditingAsset({
-                  _id: asset._id,
-                  name: asset.name,
-                  title: asset.title,
-                  description: asset.description,
-                  altText: asset.altText,
-                  tags: asset.tags,
-                })
-        }
-        onDelete={
-          isTrashView
-            ? undefined
-            : (asset) =>
-                setDeleteTarget({
-                  type: 'asset',
-                  id: asset._id,
-                  name: asset.name,
-                })
-        }
-      />
-
-      {/* Edit Asset Dialog */}
-      <MediaAssetEditDialog
-        asset={editingAsset}
-        open={editingAsset !== null}
-        onOpenChange={(open) => {
-          if (!open) setEditingAsset(null)
-        }}
-      />
-
-      {/* Edit Folder Dialog */}
-      <MediaFolderEditDialog
-        folder={editingFolder}
-        open={editingFolder !== null}
-        onOpenChange={(open) => {
-          if (!open) setEditingFolder(null)
-        }}
-      />
-
-      {/* Delete Confirmation Dialog */}
-      <CmsConfirmDialog
-        open={deleteTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setDeleteTarget(null)
-        }}
-        title={`Delete ${deleteTarget?.type === 'folder' ? 'Folder' : 'File'}?`}
-        description={`Are you sure you want to delete "${deleteTarget?.name}"? ${deleteTarget?.type === 'folder' ? 'This will also delete all files inside the folder.' : 'This action can be undone from the trash.'}`}
-        confirmLabel="Delete"
-        onConfirm={handleDelete}
-        variant="danger"
-        loading={isDeleting}
-      />
-
-      {/* Bulk Delete Confirmation Dialog */}
-      <CmsConfirmDialog
-        open={showBulkDeleteConfirm}
-        onOpenChange={setShowBulkDeleteConfirm}
-        title="Delete Selected Files?"
-        description={`Are you sure you want to delete ${selectedAssets.size} ${selectedAssets.size === 1 ? 'file' : 'files'}? This action can be undone from the trash.`}
-        confirmLabel="Delete All"
-        onConfirm={handleBulkDelete}
-        variant="danger"
-        loading={isBulkDeleting}
-      />
-
-      {/* Permanent Delete Confirmation Dialog */}
-      <CmsConfirmDialog
-        open={showPermanentDeleteConfirm}
-        onOpenChange={(open) => {
-          setShowPermanentDeleteConfirm(open)
-          if (!open) setPermanentDeleteTarget(null)
-        }}
-        title={permanentDeleteTarget === 'bulk'
-          ? `Delete ${selectedAssets.size} ${selectedAssets.size === 1 ? 'File' : 'Files'} Forever?`
-          : 'Delete Forever?'
-        }
-        description={permanentDeleteTarget === 'bulk'
-          ? `This will permanently delete ${selectedAssets.size} ${selectedAssets.size === 1 ? 'file' : 'files'}. This action cannot be undone.`
-          : 'This will permanently delete this file. This action cannot be undone.'
-        }
-        confirmLabel="Delete Forever"
-        onConfirm={handlePermanentDelete}
-        variant="danger"
-        loading={isPermanentlyDeleting}
-      />
-
-      {/* Move Modal */}
-      <MediaMoveModal
-        open={showMoveModal}
-        onOpenChange={setShowMoveModal}
-        assetIds={Array.from(selectedAssets)}
-        currentFolderId={currentFolderId}
-        onMoved={handleBulkMoveComplete}
-      />
-
-      {/* Bulk Action Bar - Library View */}
-      {isSelectionMode && !isTrashView && (
-        <MediaBulkActionBar
-          selectedCount={selectedAssets.size}
-          onClear={handleDeselectAll}
-          onMove={() => setShowMoveModal(true)}
-          onDelete={() => setShowBulkDeleteConfirm(true)}
-          isDeleting={isBulkDeleting}
-        />
-      )}
-
-      {/* Bulk Action Bar - Trash View */}
-      {isSelectionMode && isTrashView && (
-        <MediaTrashBulkActionBar
-          selectedCount={selectedAssets.size}
-          onClear={handleDeselectAll}
-          onRestore={handleBulkRestore}
-          onPermanentDelete={() => {
-            setPermanentDeleteTarget('bulk')
-            setShowPermanentDeleteConfirm(true)
-          }}
-          isRestoring={isRestoring}
-          isDeleting={isPermanentlyDeleting}
-        />
-      )}
-    </div>
-  )
+/**
+ * Media Route (CLI)
+ *
+ * Thin wrapper around the shared MediaPage component.
+ * Provides TanStack Router integration and API access.
+ */
+
+import { createFileRoute } from "@tanstack/react-router";
+import { api } from "../../convex/_generated/api";
+import { MediaPage } from "~/pages";
+import { useTanStackNavigation } from "~/lib/tanstack-adapter";
+import { useSettingsConfig } from "~/contexts";
+
+export const Route = createFileRoute("/media")({
+	component: MediaRoute,
+});
+
+function MediaRoute() {
+	const navigation = useTanStackNavigation();
+	const { settings } = useSettingsConfig();
+	return (
+		<MediaPage api={api.admin} navigation={navigation} settings={settings} />
+	);
 }