kilo-cms 0.1.0

package/src/admin/MediaLibrary.tsx

@@ -0,0 +1,483 @@
+'use client'
+
+import { useEffect, useState, type HTMLAttributes, type ReactNode } from 'react'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { MediaUploader } from './MediaUploader'
+import { useBodyScrollLock } from '../useBodyScrollLock'
+import { Portal } from './Portal'
+import { CloseButton } from './CloseButton'
+import { Button } from './Button'
+
+type Folder = { id: string; name: string; slug: string; count: number; pinned: boolean }
+type Media = { id: string; filename: string; url: string; folder: string; mimeType: string; size: number; starred: boolean; deletedAt: string | null }
+type View = 'library' | 'recent' | 'starred' | 'trash'
+type Stats = { count: number; bytes: number; trashCount: number }
+
+function formatSize(bytes: number) { return bytes >= 1024 * 1024 ? `${(bytes / (1024 * 1024)).toFixed(1)} MB` : `${Math.round(bytes / 1024)} KB` }
+
+function fileKind(mimeType: string): 'image' | 'video' | 'audio' | 'pdf' | 'file' {
+  if (mimeType.startsWith('image/')) return 'image'
+  if (mimeType.startsWith('video/')) return 'video'
+  if (mimeType.startsWith('audio/')) return 'audio'
+  if (mimeType === 'application/pdf') return 'pdf'
+  return 'file'
+}
+
+function FileTypeIcon({ mimeType }: { mimeType: string }) {
+  const kind = fileKind(mimeType)
+  const paths: Record<'video' | 'audio' | 'pdf' | 'file', ReactNode> = {
+    video: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M10 9.3v5.4l4.8-2.7Z" fill="currentColor" stroke="none" /></>,
+    audio: <><path d="M9 18V6l10-2v12" /><circle cx="6" cy="18" r="3" /><circle cx="16" cy="16" r="3" /></>,
+    pdf: <><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z" /><path d="M14 2v6h6" /></>,
+    file: <><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z" /><path d="M14 2v6h6" /></>,
+  }
+  return <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">{paths[kind === 'image' ? 'file' : kind]}</svg>
+}
+
+function MediaThumb({ item }: { item: Media }) {
+  const kind = fileKind(item.mimeType)
+  if (kind === 'image') return <img src={item.url} alt={item.filename} />
+  if (kind === 'video') return <>
+    {/* #t= seeks to that timestamp on load, so the frame renders as a static thumbnail with no JS or server-side processing. */}
+    <video src={`${item.url}#t=0.5`} muted playsInline preload="metadata" />
+    <span className="cms-media-video-badge"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7Z" /></svg></span>
+  </>
+  return <div className="cms-media-file-thumb"><FileTypeIcon mimeType={item.mimeType} /><span>{item.mimeType.split('/')[1]?.toUpperCase() ?? 'FILE'}</span></div>
+}
+
+function CardButton({ className, onClick, children, ...rest }: { className: string; onClick: () => void; children: ReactNode } & HTMLAttributes<HTMLDivElement>) {
+  return <div role="button" tabIndex={0} className={className} onClick={onClick} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); onClick() } }} {...rest}>{children}</div>
+}
+
+function SelectCheckbox({ checked, onToggle }: { checked: boolean; onToggle: () => void }) {
+  return <button type="button" className={`cms-select-checkbox ${checked ? 'is-checked' : ''}`} onClick={(event) => { event.stopPropagation(); onToggle() }} aria-label={checked ? 'Deselect' : 'Select'} aria-pressed={checked}>
+    {checked && <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12.5l5 5L20 6" /></svg>}
+  </button>
+}
+
+function RestoreButton({ onRestore }: { onRestore: () => void }) {
+  return <button type="button" className="cms-media-icon-btn cms-media-icon-btn-restore" onClick={(event) => { event.stopPropagation(); onRestore() }} aria-label="Restore">
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 11a9 9 0 1 1 2.6 6.3" /><path d="M3 5v6h6" /></svg>
+  </button>
+}
+
+function DeleteForeverButton({ onDelete }: { onDelete: () => void }) {
+  return <button type="button" className="cms-media-icon-btn cms-media-icon-btn-danger" onClick={(event) => { event.stopPropagation(); onDelete() }} aria-label="Delete permanently">
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16" /><path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /><path d="M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" /><path d="M10 11v6M14 11v6" /></svg>
+  </button>
+}
+
+function MenuTrigger({ onToggle, open }: { onToggle: () => void; open: boolean }) {
+  return <button type="button" className="cms-card-menu-trigger" onClick={onToggle} aria-haspopup="menu" aria-expanded={open} aria-label="Options">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="12" cy="19" r="1.8" /></svg>
+  </button>
+}
+
+function FolderMenu({ folder, open, onToggle, onPin, onRename, onDelete }: {
+  folder: Folder
+  open: boolean
+  onToggle: () => void
+  onPin: () => void
+  onRename: () => void
+  onDelete: () => void
+}) {
+  return <div className="cms-card-menu" onClick={(event) => event.stopPropagation()}>
+    <MenuTrigger onToggle={onToggle} open={open} />
+    {open && <div className="cms-card-menu-popup" role="menu">
+      <button type="button" role="menuitem" onClick={onPin}>{folder.pinned ? 'Unpin folder' : 'Pin folder'}</button>
+      <button type="button" role="menuitem" onClick={onRename}>Rename folder</button>
+      <button type="button" role="menuitem" className="cms-card-menu-danger" onClick={onDelete}>Delete folder</button>
+    </div>}
+  </div>
+}
+
+function ItemMenu({ item, open, onToggle, onStar, onRename, onMove, onTrash }: {
+  item: Media
+  open: boolean
+  onToggle: () => void
+  onStar: () => void
+  onRename: () => void
+  onMove: () => void
+  onTrash: () => void
+}) {
+  return <div className="cms-card-menu" onClick={(event) => event.stopPropagation()}>
+    <MenuTrigger onToggle={onToggle} open={open} />
+    {open && <div className="cms-card-menu-popup" role="menu">
+      <button type="button" role="menuitem" onClick={onStar}>{item.starred ? 'Unstar' : 'Star'}</button>
+      <button type="button" role="menuitem" onClick={onRename}>Rename</button>
+      <button type="button" role="menuitem" onClick={onMove}>Move to folder</button>
+      <button type="button" role="menuitem" className="cms-card-menu-danger" onClick={onTrash}>Move to trash</button>
+    </div>}
+  </div>
+}
+
+function FolderIcon({ size = 46 }: { size?: number }) {
+  return <svg className="cms-folder-icon" width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <path d="M3 7a2 2 0 0 1 2-2h4.5l2 2.2H19a2 2 0 0 1 2 2v8.3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" fill="var(--acid)" stroke="var(--ink)" strokeWidth="1.3" strokeLinejoin="round" />
+  </svg>
+}
+
+function MoveToFolderModal({ folders, count, name, onNameChange, onMove, onCreateAndMove, onClose }: {
+  folders: Folder[]
+  count: number
+  name: string
+  onNameChange: (value: string) => void
+  onMove: (slug: string) => void
+  onCreateAndMove: () => void
+  onClose: () => void
+}) {
+  return <Portal><div className="move-popup-modal" role="dialog" aria-modal="true" aria-label="Move to folder" onClick={onClose}>
+    <div className="move-popup" onClick={(event) => event.stopPropagation()}>
+      <header><strong>Move {count} item{count === 1 ? '' : 's'}</strong><CloseButton onClick={onClose} /></header>
+      <div className="move-popup-list">
+        {folders.map((folder) => <button type="button" key={folder.id} onClick={() => onMove(folder.slug)}><FolderIcon size={22} />{folder.name}</button>)}
+      </div>
+      <div className="move-popup-create">
+        <input value={name} onChange={(event) => onNameChange(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter') onCreateAndMove() }} placeholder="New folder name" aria-label="New folder name" />
+        <Button type="button" variant="positive" compact onClick={onCreateAndMove}>Create &amp; move</Button>
+      </div>
+    </div>
+  </div></Portal>
+}
+
+export function MediaLibrary({ userName }: { userName: string }) {
+  const [view, setView] = useState<View>('library')
+  const [libraryFolder, setLibraryFolder] = useState('uploads')
+  const [folders, setFolders] = useState<Folder[]>([])
+  const [items, setItems] = useState<Media[]>([])
+  const [status, setStatus] = useState('Loading…')
+  const [loading, setLoading] = useState(true)
+  const [preview, setPreview] = useState<Media | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [openFolderMenu, setOpenFolderMenu] = useState<string | null>(null)
+  const [openItemMenu, setOpenItemMenu] = useState<string | null>(null)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+  const [movePopupIds, setMovePopupIds] = useState<string[] | null>(null)
+  const [moveFolderName, setMoveFolderName] = useState('')
+  useBodyScrollLock(!!preview || movePopupIds !== null)
+
+  useEffect(() => {
+    if (!openFolderMenu && !openItemMenu) return
+    function closeMenu(event: PointerEvent) { if (!(event.target as Element).closest('.cms-card-menu')) { setOpenFolderMenu(null); setOpenItemMenu(null) } }
+    function closeOnEscape(event: KeyboardEvent) { if (event.key === 'Escape') { setOpenFolderMenu(null); setOpenItemMenu(null) } }
+    document.addEventListener('pointerdown', closeMenu)
+    document.addEventListener('keydown', closeOnEscape)
+    return () => { document.removeEventListener('pointerdown', closeMenu); document.removeEventListener('keydown', closeOnEscape) }
+  }, [openFolderMenu, openItemMenu])
+
+  async function loadStats() {
+    const response = await fetch('/api/admin/media/stats')
+    if (response.ok) setStats(await response.json())
+  }
+
+  async function goToFolder(slug: string) {
+    setView('library')
+    setSelectedIds(new Set())
+    setLoading(true)
+    setStatus('Loading…')
+    try {
+      const response = await fetch(`/api/admin/media?folder=${encodeURIComponent(slug)}`)
+      const data = await response.json()
+      if (!response.ok) { setStatus(data.error || 'Could not load media'); return }
+      setFolders(data.folders)
+      setItems(data.media)
+      setLibraryFolder(slug)
+      setStatus(`${data.media.length} item${data.media.length === 1 ? '' : 's'}`)
+    } finally { setLoading(false) }
+  }
+
+  async function loadFlat(kind: 'recent' | 'starred' | 'trash') {
+    setView(kind)
+    setSelectedIds(new Set())
+    setLoading(true)
+    setStatus(kind === 'recent' ? 'Loading recent uploads…' : kind === 'starred' ? 'Loading starred…' : 'Loading trash…')
+    try {
+      const response = await fetch(`/api/admin/media?view=${kind}`)
+      const data = await response.json()
+      if (!response.ok) { setStatus(data.error || 'Could not load media'); return }
+      setFolders(data.folders)
+      setItems(data.media)
+      setStatus(`${data.media.length} item${data.media.length === 1 ? '' : 's'}`)
+    } finally { setLoading(false) }
+  }
+
+  useEffect(() => { void goToFolder('uploads'); void loadStats() }, [])
+
+  async function createFolderPrompt() {
+    const trimmed = window.prompt('New folder name')?.trim()
+    if (!trimmed) return
+    const response = await fetch('/api/admin/media', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: trimmed }) })
+    const data = await response.json()
+    if (!response.ok) { setStatus(data.error || 'Could not create folder'); return }
+    await goToFolder(data.slug)
+  }
+
+  async function copyUrl(url: string) { try { await navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1500) } catch { /* clipboard unavailable */ } }
+
+  async function toggleStar(item: Media) {
+    setOpenItemMenu(null)
+    const response = await fetch(`/api/admin/media/${item.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ starred: !item.starred }) })
+    if (!response.ok) return
+    const updated: Media = await response.json()
+    setItems((current) => view === 'starred' && !updated.starred ? current.filter((existing) => existing.id !== updated.id) : current.map((existing) => existing.id === updated.id ? updated : existing))
+    setPreview((current) => current && current.id === updated.id ? updated : current)
+  }
+
+  async function renameItem(item: Media) {
+    setOpenItemMenu(null)
+    const next = window.prompt('Rename file', item.filename)?.trim()
+    if (!next || next === item.filename) return
+    const response = await fetch(`/api/admin/media/${item.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ filename: next }) })
+    if (!response.ok) { setStatus('Could not rename file'); return }
+    const updated: Media = await response.json()
+    setItems((current) => current.map((existing) => existing.id === updated.id ? updated : existing))
+    setPreview((current) => current && current.id === updated.id ? updated : current)
+  }
+
+  async function trashItem(item: Media) {
+    setOpenItemMenu(null)
+    const response = await fetch(`/api/admin/media/${item.id}`, { method: 'DELETE' })
+    if (!response.ok) return
+    setItems((current) => current.filter((existing) => existing.id !== item.id))
+    setPreview((current) => current && current.id === item.id ? null : current)
+    void loadStats()
+  }
+
+  async function restoreItem(item: Media) {
+    const response = await fetch(`/api/admin/media/${item.id}/restore`, { method: 'POST' })
+    if (!response.ok) return
+    setItems((current) => current.filter((existing) => existing.id !== item.id))
+    setSelectedIds((current) => { const next = new Set(current); next.delete(item.id); return next })
+    void loadStats()
+  }
+
+  async function deleteForever(item: Media) {
+    if (!window.confirm(`Permanently delete "${item.filename}"? This cannot be undone.`)) return
+    const response = await fetch(`/api/admin/media/${item.id}?permanent=1`, { method: 'DELETE' })
+    if (!response.ok) return
+    setItems((current) => current.filter((existing) => existing.id !== item.id))
+    setSelectedIds((current) => { const next = new Set(current); next.delete(item.id); return next })
+    void loadStats()
+  }
+
+  function toggleSelect(id: string) {
+    setSelectedIds((current) => { const next = new Set(current); next.has(id) ? next.delete(id) : next.add(id); return next })
+  }
+
+  function selectAll() { setSelectedIds(new Set(items.map((item) => item.id))) }
+  function clearSelection() { setSelectedIds(new Set()) }
+
+  async function bulkRestore() {
+    if (!selectedIds.size) return
+    const ids = [...selectedIds]
+    const response = await fetch('/api/admin/media/bulk', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids, action: 'restore' }) })
+    if (!response.ok) return
+    setItems((current) => current.filter((item) => !ids.includes(item.id)))
+    setSelectedIds(new Set())
+    void loadStats()
+  }
+
+  async function bulkDeleteForever() {
+    if (!selectedIds.size) return
+    if (!window.confirm(`Permanently delete ${selectedIds.size} item${selectedIds.size === 1 ? '' : 's'}? This cannot be undone.`)) return
+    const ids = [...selectedIds]
+    const response = await fetch('/api/admin/media/bulk', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids, action: 'delete' }) })
+    if (!response.ok) return
+    setItems((current) => current.filter((item) => !ids.includes(item.id)))
+    setSelectedIds(new Set())
+    void loadStats()
+  }
+
+  async function bulkTrash() {
+    if (!selectedIds.size) return
+    const ids = [...selectedIds]
+    const response = await fetch('/api/admin/media/bulk', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids, action: 'trash' }) })
+    if (!response.ok) return
+    setItems((current) => current.filter((item) => !ids.includes(item.id)))
+    setSelectedIds(new Set())
+    void loadStats()
+  }
+
+  async function moveItemsToFolder(ids: string[], targetFolder: string) {
+    const response = await fetch('/api/admin/media/bulk', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids, action: 'move', folder: targetFolder }) })
+    if (!response.ok) { setStatus('Could not move items'); return }
+    setSelectedIds(new Set())
+    setMovePopupIds(null)
+    setMoveFolderName('')
+    refreshCurrentView()
+  }
+
+  async function createFolderAndMove() {
+    const trimmed = moveFolderName.trim()
+    if (!trimmed || !movePopupIds) return
+    const response = await fetch('/api/admin/media', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: trimmed }) })
+    const data = await response.json()
+    if (!response.ok) { setStatus(data.error || 'Could not create folder'); return }
+    await moveItemsToFolder(movePopupIds, data.slug)
+  }
+
+  async function togglePin(folder: Folder) {
+    if (folder.slug === 'uploads') return
+    const response = await fetch(`/api/admin/media/folders/${folder.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pinned: !folder.pinned }) })
+    if (!response.ok) return
+    const updated: { pinned: boolean } = await response.json()
+    setFolders((current) => current.map((item) => item.id === folder.id ? { ...item, pinned: updated.pinned } : item))
+  }
+
+  async function renameFolder(folder: Folder) {
+    setOpenFolderMenu(null)
+    const next = window.prompt('Rename folder', folder.name)?.trim()
+    if (!next || next === folder.name) return
+    const response = await fetch(`/api/admin/media/folders/${folder.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: next }) })
+    if (!response.ok) { setStatus('Could not rename folder'); return }
+    const updated: { name: string } = await response.json()
+    setFolders((current) => current.map((item) => item.id === folder.id ? { ...item, name: updated.name } : item))
+  }
+
+  async function deleteFolder(folder: Folder) {
+    setOpenFolderMenu(null)
+    if (!window.confirm(`Delete "${folder.name}"? Files inside will be moved back to Uploads.`)) return
+    const response = await fetch(`/api/admin/media/folders/${folder.id}`, { method: 'DELETE' })
+    if (!response.ok) { setStatus('Could not delete folder'); return }
+    if (view === 'library' && libraryFolder === folder.slug) void goToFolder('uploads')
+    else refreshCurrentView()
+    void loadStats()
+  }
+
+  function refreshCurrentView() {
+    if (view === 'library') void goToFolder(libraryFolder)
+    else void loadFlat(view)
+    void loadStats()
+  }
+
+  const currentFolder = folders.find((item) => item.slug === libraryFolder)
+  const pinnedFolders = folders.filter((folder) => folder.pinned && folder.slug !== 'uploads').map((folder) => ({ slug: folder.slug, name: folder.name }))
+  const mediaContext = {
+    view: (view === 'recent' ? 'recent' : view === 'starred' ? 'starred' : view === 'trash' ? 'trash' : 'gallery') as 'gallery' | 'recent' | 'starred' | 'trash',
+    onSelect: (next: 'gallery' | 'recent' | 'starred' | 'trash') => { next === 'gallery' ? void goToFolder('uploads') : void loadFlat(next) },
+    stats,
+    pinnedFolders,
+    activeFolder: view === 'library' ? libraryFolder : null,
+    onOpenFolder: (slug: string) => void goToFolder(slug),
+  }
+  const addMediaAction = <MediaUploader folder={view === 'library' ? libraryFolder : 'uploads'} onUploaded={refreshCurrentView} />
+
+  const activeActions = <>
+    <Button type="button" variant="secondary" onClick={clearSelection}>Clear ({selectedIds.size})</Button>
+    <Button type="button" variant="secondary" onClick={() => setMovePopupIds([...selectedIds])}>Move to folder</Button>
+    <Button type="button" variant="negative" onClick={() => void bulkTrash()}>Delete</Button>
+  </>
+  const idleActions = <>{addMediaAction}{items.length > 0 && <Button type="button" variant="secondary" onClick={selectAll}>Select all</Button>}</>
+  const headerActions = selectedIds.size > 0 ? activeActions : idleActions
+  const trashActions = selectedIds.size > 0
+    ? <>
+        <Button type="button" variant="secondary" onClick={clearSelection}>Clear selection</Button>
+        <Button type="button" variant="secondary" onClick={() => void bulkRestore()}>Restore ({selectedIds.size})</Button>
+        <Button type="button" variant="negative" onClick={() => void bulkDeleteForever()}>Delete permanently ({selectedIds.size})</Button>
+      </>
+    : items.length > 0
+      ? <Button type="button" variant="secondary" onClick={selectAll}>Select all</Button>
+      : undefined
+
+  const folderStrip = view !== 'trash' ? <div className="cms-folder-strip-row">
+    {folders.map((folder) => (
+      <div
+        key={folder.id}
+        role="button"
+        tabIndex={0}
+        className={`cms-folder-chip ${view === 'library' && libraryFolder === folder.slug ? 'active' : ''}`}
+        onClick={() => void goToFolder(folder.slug)}
+        onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); void goToFolder(folder.slug) } }}
+      >
+        {folder.slug !== 'uploads' && <FolderMenu
+          folder={folder}
+          open={openFolderMenu === folder.id}
+          onToggle={() => setOpenFolderMenu((current) => current === folder.id ? null : folder.id)}
+          onPin={() => { setOpenFolderMenu(null); void togglePin(folder) }}
+          onRename={() => void renameFolder(folder)}
+          onDelete={() => void deleteFolder(folder)}
+        />}
+        <FolderIcon size={30} />
+        <strong>{folder.name}</strong>
+        <span className="cms-folder-chip-count">{folder.count}</span>
+      </div>
+    ))}
+    <button type="button" className="cms-folder-chip-new" onClick={() => void createFolderPrompt()}>
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
+      <span>New folder</span>
+    </button>
+  </div> : null
+
+  const mediaGrid = <section className="cms-media-grid">
+    {loading ? <><div className="cms-skeleton-card" /><div className="cms-skeleton-card" /><div className="cms-skeleton-card" /><div className="cms-skeleton-card" /><div className="cms-skeleton-card" /><div className="cms-skeleton-card" /></> : <>
+      {items.map((item) => <CardButton
+        className="cms-media-item"
+        key={item.id}
+        onClick={() => view === 'trash' ? toggleSelect(item.id) : setPreview(item)}
+      >
+        {view === 'trash' ? <>
+          <SelectCheckbox checked={selectedIds.has(item.id)} onToggle={() => toggleSelect(item.id)} />
+          <RestoreButton onRestore={() => void restoreItem(item)} />
+          <DeleteForeverButton onDelete={() => void deleteForever(item)} />
+        </> : <>
+          <SelectCheckbox checked={selectedIds.has(item.id)} onToggle={() => toggleSelect(item.id)} />
+          <ItemMenu
+            item={item}
+            open={openItemMenu === item.id}
+            onToggle={() => setOpenItemMenu((current) => current === item.id ? null : item.id)}
+            onStar={() => void toggleStar(item)}
+            onRename={() => void renameItem(item)}
+            onMove={() => { setOpenItemMenu(null); setMovePopupIds([item.id]) }}
+            onTrash={() => void trashItem(item)}
+          />
+        </>}
+        <MediaThumb item={item} />
+        <p>{item.filename}</p>
+      </CardButton>)}
+      {!items.length && <p className="cms-empty-state">{view === 'starred' ? 'No starred media yet.' : view === 'recent' ? 'No media uploaded yet.' : view === 'trash' ? 'Trash is empty.' : 'No media in this folder yet.'}</p>}
+    </>}
+  </section>
+
+  const title = view === 'recent' ? 'Recent uploads' : view === 'starred' ? 'Starred' : view === 'trash' ? 'Trash' : currentFolder?.name ?? 'Files'
+
+  return <main className="cms-dashboard"><CmsSidebar active="media" userName={userName} mediaContext={mediaContext} /><section className="cms-content">
+    <EditorHeader compact title={title} meta={status} actions={view === 'trash' ? trashActions : headerActions} />
+    {folderStrip}
+    {mediaGrid}
+  </section>
+  {preview && <Portal><div className="media-preview-modal" role="dialog" aria-modal="true" aria-label="Media preview" onClick={() => setPreview(null)}>
+    <div className="media-preview" onClick={(event) => event.stopPropagation()}>
+      <div className="media-preview-stage">
+        {fileKind(preview.mimeType) === 'image' ? <img src={preview.url} alt={preview.filename} />
+          : fileKind(preview.mimeType) === 'video' ? <video src={preview.url} controls />
+          : fileKind(preview.mimeType) === 'audio' ? <div className="media-preview-audio"><FileTypeIcon mimeType={preview.mimeType} /><audio src={preview.url} controls /></div>
+          : <div className="media-preview-file"><FileTypeIcon mimeType={preview.mimeType} /><span>{preview.filename}</span></div>}
+      </div>
+      <div className="media-preview-side">
+        <header><strong>{preview.filename}</strong><CloseButton onClick={() => setPreview(null)} /></header>
+        <dl className="media-preview-meta"><dt>Type</dt><dd>{preview.mimeType}</dd><dt>Size</dt><dd>{formatSize(preview.size)}</dd><dt>Folder</dt><dd>{folders.find((folder) => folder.slug === preview.folder)?.name ?? preview.folder}</dd></dl>
+        <div className="media-preview-actions">
+          <input readOnly value={preview.url} onFocus={(event) => event.target.select()} />
+          <Button type="button" variant="secondary" onClick={() => copyUrl(preview.url)}>{copied ? 'Copied ✓' : 'Copy URL'}</Button>
+          <Button type="button" variant="secondary" onClick={() => void toggleStar(preview)}>{preview.starred ? '★ Starred' : '☆ Star'}</Button>
+          <Button type="button" variant="secondary" onClick={() => void renameItem(preview)}>Rename</Button>
+          <Button type="button" variant="secondary" onClick={() => setMovePopupIds([preview.id])}>Move to folder</Button>
+          <Button type="button" variant="negative" onClick={() => void trashItem(preview)}>Move to trash</Button>
+          <Button variant="primary" href={preview.url} target="_blank" rel="noreferrer" icon="↗">Open</Button>
+        </div>
+      </div>
+    </div>
+  </div></Portal>}
+  {movePopupIds && <MoveToFolderModal
+    folders={folders}
+    count={movePopupIds.length}
+    name={moveFolderName}
+    onNameChange={setMoveFolderName}
+    onMove={(slug) => void moveItemsToFolder(movePopupIds, slug)}
+    onCreateAndMove={() => void createFolderAndMove()}
+    onClose={() => { setMovePopupIds(null); setMoveFolderName('') }}
+  />}
+  </main>
+}

package/src/admin/MediaUploader.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useState, type ChangeEvent } from 'react'
+import { useToast } from './Toast'
+
+type Props = { folder: string; onUploaded: () => void; label?: string }
+
+const ACCEPT = 'image/jpeg,image/png,image/webp,image/gif,image/svg+xml,video/mp4,video/webm,video/quicktime,audio/mpeg,audio/wav,audio/ogg,application/pdf'
+
+function Spinner() {
+  return <svg className="cms-upload-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 3a9 9 0 1 0 9 9" /></svg>
+}
+
+export function MediaUploader({ folder, onUploaded, label = '+ Add media' }: Props) {
+  const toast = useToast()
+  const [uploading, setUploading] = useState(false)
+  const [justUploaded, setJustUploaded] = useState(false)
+
+  async function handleFiles(event: ChangeEvent<HTMLInputElement>) {
+    const files = Array.from(event.target.files ?? [])
+    event.target.value = ''
+    if (!files.length) return
+    setUploading(true)
+    setJustUploaded(false)
+    let failures = 0
+    let lastError = ''
+    for (const file of files) {
+      const form = new FormData()
+      form.append('file', file)
+      form.append('folder', folder)
+      try {
+        const response = await fetch('/api/admin/upload', { method: 'POST', body: form })
+        if (!response.ok) { failures += 1; lastError = (await response.json().catch(() => null))?.error || 'Upload failed' }
+      } catch { failures += 1; lastError = 'Upload failed' }
+    }
+    setUploading(false)
+    const succeeded = files.length - failures
+    if (succeeded > 0) {
+      toast.success(succeeded === 1 ? 'File uploaded.' : `${succeeded} files uploaded.`)
+      setJustUploaded(true)
+      setTimeout(() => setJustUploaded(false), 2000)
+    }
+    if (failures > 0) toast.error(files.length === 1 ? lastError : `${failures} of ${files.length} files failed — ${lastError}`)
+    onUploaded()
+  }
+
+  return <div className="image-uploader">
+    <div className="image-upload-actions">
+      <label className={`cms-upload-button ${uploading ? 'is-uploading' : ''} ${justUploaded ? 'is-success' : ''}`}>
+        {uploading ? <><Spinner /> Uploading…</> : justUploaded ? <>✓ Uploaded</> : label}
+        <input type="file" multiple accept={ACCEPT} disabled={uploading} onChange={(event) => void handleFiles(event)} />
+      </label>
+    </div>
+  </div>
+}

package/src/admin/Portal.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { useEffect, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+export function Portal({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => { setMounted(true) }, [])
+  return mounted ? createPortal(children, document.body) : null
+}