@actuate-media/cms-admin 0.8.0 → 0.8.1

package/src/views/MediaBrowser.tsx

@@ -1,44 +1,66 @@
-'use client';
+'use client'
 
 import {
-  Upload, Grid3x3, List, Search, Trash2, Download, FileText,
-  ArrowUpDown, ArrowUp, ArrowDown, X, Bot, Sparkles, Link2,
-  AlertTriangle, Copy, ExternalLink, ImageIcon, FileImage, Loader2,
-  FolderInput, GripVertical,
-} from 'lucide-react';
-import { useState, useMemo, useRef, useCallback } from 'react';
-import { toast } from 'sonner';
-import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
-import { FolderTree, type FolderSelection } from '../components/FolderTree.js';
-import { FocalPointPicker } from '../components/FocalPointPicker.js';
+  Upload,
+  Grid3x3,
+  List,
+  Search,
+  Trash2,
+  Download,
+  FileText,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  X,
+  Bot,
+  Sparkles,
+  Link2,
+  AlertTriangle,
+  Copy,
+  ExternalLink,
+  ImageIcon,
+  FileImage,
+  Loader2,
+  FolderInput,
+  GripVertical,
+} from 'lucide-react'
+import { useState, useMemo, useRef, useCallback } from 'react'
+import { toast } from 'sonner'
+import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
+import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
+import { FocalPointPicker } from '../components/FocalPointPicker.js'
 
 interface MediaItem {
-  id: number | string;
-  name: string;
-  type: string;
-  size: string;
-  sizeBytes: number;
-  date: string;
-  url: string;
-  dimensions?: string;
-  format?: string;
-  altTag?: string;
-  title?: string;
-  usedOn?: { page: string; path: string }[];
+  id: number | string
+  name: string
+  type: string
+  size: string
+  sizeBytes: number
+  date: string
+  url: string
+  dimensions?: string
+  format?: string
+  altTag?: string
+  title?: string
+  usedOn?: { page: string; path: string }[]
 }
 
 function isImageMedia(item: MediaItem): boolean {
-  return Boolean(item.url) && (item.type?.startsWith('image/') || /\.(avif|gif|jpe?g|png|webp|svg)$/i.test(item.url));
+  return (
+    Boolean(item.url) &&
+    (item.type?.startsWith('image/') || /\.(avif|gif|jpe?g|png|webp|svg)$/i.test(item.url))
+  )
 }
 
 function matchesMediaType(item: MediaItem, filterType: string): boolean {
-  if (filterType === 'all') return true;
-  if (filterType === 'image') return item.type?.startsWith('image/') || isImageMedia(item);
-  if (filterType === 'video') return item.type?.startsWith('video/');
-  if (filterType === 'document') return !item.type?.startsWith('image/') && !item.type?.startsWith('video/');
-  return item.type === filterType;
+  if (filterType === 'all') return true
+  if (filterType === 'image') return item.type?.startsWith('image/') || isImageMedia(item)
+  if (filterType === 'video') return item.type?.startsWith('video/')
+  if (filterType === 'document')
+    return !item.type?.startsWith('image/') && !item.type?.startsWith('video/')
+  return item.type === filterType
 }
 
 function MediaPreview({ item }: { item: MediaItem }) {
@@ -50,105 +72,115 @@ function MediaPreview({ item }: { item: MediaItem }) {
         className="h-full w-full object-cover"
         loading="lazy"
       />
-    );
+    )
   }
 
-  return <FileImage className="w-6 h-6 sm:w-8 sm:h-8 text-muted-foreground" />;
+  return <FileImage className="w-6 h-6 sm:w-8 sm:h-8 text-muted-foreground" />
 }
 
-type MediaSortKey = 'name' | 'type' | 'size' | 'date';
+type MediaSortKey = 'name' | 'type' | 'size' | 'date'
 
 export interface MediaBrowserProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 function buildMediaApiUrl(folderSel: FolderSelection): string {
-  const base = '/media?pageSize=100';
+  const base = '/media?pageSize=100'
   if (folderSel.type === 'smart') {
-    if (folderSel.smart === 'recent') return `${base}&sort=updatedAt&order=desc&pageSize=20`;
-    if (folderSel.smart === 'uncategorized') return `${base}&folderId=none`;
-    return base;
+    if (folderSel.smart === 'recent') return `${base}&sort=updatedAt&order=desc&pageSize=20`
+    if (folderSel.smart === 'uncategorized') return `${base}&folderId=none`
+    return base
   }
-  return `${base}&folderId=${folderSel.folderId}`;
+  return `${base}&folderId=${folderSel.folderId}`
 }
 
 export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
-  const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' });
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-
-  const apiUrl = useMemo(() => buildMediaApiUrl(folderSel), [folderSel]);
-  const { data, loading, error, refetch } = useApiData<{ data?: MediaItem[]; items?: MediaItem[]; total: number }>(apiUrl);
-
-  const allData = useApiData<{ data: MediaItem[]; total: number }>('/media?pageSize=1');
-  const uncatData = useApiData<{ data: MediaItem[]; total: number }>('/media?pageSize=1&folderId=none');
-
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterType, setFilterType] = useState('all');
-  const [selectedMedia, setSelectedMedia] = useState<Array<number | string>>([]);
-  const [sortConfig, setSortConfig] = useState<SortConfig<MediaSortKey> | null>(null);
-  const [activeItem, setActiveItem] = useState<MediaItem | null>(null);
-
-  const [editAlt, setEditAlt] = useState('');
-  const [editTitle, setEditTitle] = useState('');
-  const [editFilename, setEditFilename] = useState('');
-  const [focalX, setFocalX] = useState(0.5);
-  const [focalY, setFocalY] = useState(0.5);
-  const [saving, setSaving] = useState(false);
-  const [aiGenerating, setAiGenerating] = useState<string | null>(null);
-  const [uploading, setUploading] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const mediaItems = data?.data ?? data?.items ?? [];
+  const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' })
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+
+  const apiUrl = useMemo(() => buildMediaApiUrl(folderSel), [folderSel])
+  const { data, loading, error, refetch } = useApiData<{
+    data?: MediaItem[]
+    items?: MediaItem[]
+    total: number
+  }>(apiUrl)
+
+  const allData = useApiData<{ data: MediaItem[]; total: number }>('/media?pageSize=1')
+  const uncatData = useApiData<{ data: MediaItem[]; total: number }>(
+    '/media?pageSize=1&folderId=none',
+  )
+
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterType, setFilterType] = useState('all')
+  const [selectedMedia, setSelectedMedia] = useState<Array<number | string>>([])
+  const [sortConfig, setSortConfig] = useState<SortConfig<MediaSortKey> | null>(null)
+  const [activeItem, setActiveItem] = useState<MediaItem | null>(null)
+
+  const [editAlt, setEditAlt] = useState('')
+  const [editTitle, setEditTitle] = useState('')
+  const [editFilename, setEditFilename] = useState('')
+  const [focalX, setFocalX] = useState(0.5)
+  const [focalY, setFocalY] = useState(0.5)
+  const [saving, setSaving] = useState(false)
+  const [aiGenerating, setAiGenerating] = useState<string | null>(null)
+  const [uploading, setUploading] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const mediaItems = data?.data ?? data?.items ?? []
 
   const filteredAndSorted = useMemo(() => {
     let results = mediaItems.filter((item) => {
-      const matchesSearch = (item.name ?? '').toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesType = matchesMediaType(item, filterType);
-      return matchesSearch && matchesType;
-    });
+      const matchesSearch = (item.name ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesType = matchesMediaType(item, filterType)
+      return matchesSearch && matchesType
+    })
 
     if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (m) => [m.name]);
+      results = sortByRelevance(results, searchQuery, (m) => [m.name])
     } else if (sortConfig) {
       results = [...results].sort((a, b) => {
-        let cmp: number;
+        let cmp: number
         if (sortConfig.key === 'size') {
-          cmp = a.sizeBytes - b.sizeBytes;
+          cmp = a.sizeBytes - b.sizeBytes
         } else {
-          cmp = String(a[sortConfig.key]).localeCompare(String(b[sortConfig.key]));
+          cmp = String(a[sortConfig.key]).localeCompare(String(b[sortConfig.key]))
         }
-        return sortConfig.direction === 'asc' ? cmp : -cmp;
-      });
+        return sortConfig.direction === 'asc' ? cmp : -cmp
+      })
     }
-    return results;
-  }, [mediaItems, searchQuery, filterType, sortConfig]);
+    return results
+  }, [mediaItems, searchQuery, filterType, sortConfig])
 
   const openDetail = (item: MediaItem) => {
-    setActiveItem(item);
-    setEditAlt(item.altTag ?? '');
-    setEditTitle(item.title ?? '');
-    setEditFilename(item.name);
-    setFocalX((item as any).focalPointX ?? 0.5);
-    setFocalY((item as any).focalPointY ?? 0.5);
-  };
+    setActiveItem(item)
+    setEditAlt(item.altTag ?? '')
+    setEditTitle(item.title ?? '')
+    setEditFilename(item.name)
+    setFocalX((item as any).focalPointX ?? 0.5)
+    setFocalY((item as any).focalPointY ?? 0.5)
+  }
 
   const closeDetail = () => {
-    setActiveItem(null);
-  };
+    setActiveItem(null)
+  }
 
   const handleCheckbox = (e: React.MouseEvent, id: number | string) => {
-    e.stopPropagation();
-    setSelectedMedia(prev => prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]);
-  };
+    e.stopPropagation()
+    setSelectedMedia((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
+    )
+  }
 
   const handleSelectAll = () => {
-    setSelectedMedia(prev => prev.length === filteredAndSorted.length ? [] : filteredAndSorted.map(item => item.id));
-  };
+    setSelectedMedia((prev) =>
+      prev.length === filteredAndSorted.length ? [] : filteredAndSorted.map((item) => item.id),
+    )
+  }
 
   const handleSaveDetails = async () => {
-    if (!activeItem) return;
-    setSaving(true);
+    if (!activeItem) return
+    setSaving(true)
     const res = await cmsApi(`/media/${activeItem.id}`, {
       method: 'PUT',
       body: JSON.stringify({
@@ -158,147 +190,160 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
         focalX,
         focalY,
       }),
-    });
-    setSaving(false);
+    })
+    setSaving(false)
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Media details saved');
-      refetch();
+      toast.success('Media details saved')
+      refetch()
     }
-  };
+  }
 
   const deleteMedia = async (id: number | string) => {
-    const res = await cmsApi(`/media/${id}`, { method: 'DELETE' });
+    const res = await cmsApi(`/media/${id}`, { method: 'DELETE' })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Media deleted');
-      if (activeItem?.id === id) closeDetail();
-      refetch();
+      toast.success('Media deleted')
+      if (activeItem?.id === id) closeDetail()
+      refetch()
     }
-  };
+  }
 
   const handleAiGenerate = async (field: 'alt' | 'title' | 'optimize') => {
-    setAiGenerating(field);
+    setAiGenerating(field)
 
     if (field === 'optimize' && activeItem) {
-      const res = await cmsApi<MediaItem & {
-        optimization?: {
-          originalSize: number;
-          optimizedSize: number;
-          savings: number;
-          originalSizeFormatted: string;
-          optimizedSizeFormatted: string;
-          alreadyOptimized?: boolean;
-        };
-      }>(`/media/${activeItem.id}/optimize`, { method: 'POST' });
+      const res = await cmsApi<
+        MediaItem & {
+          optimization?: {
+            originalSize: number
+            optimizedSize: number
+            savings: number
+            originalSizeFormatted: string
+            optimizedSizeFormatted: string
+            alreadyOptimized?: boolean
+          }
+        }
+      >(`/media/${activeItem.id}/optimize`, { method: 'POST' })
 
       if (res.error) {
-        toast.error(res.error);
+        toast.error(res.error)
       } else if ((res.data as any)?.optimization?.alreadyOptimized) {
-        toast.info('Image is already in WebP format — no further optimization needed');
+        toast.info('Image is already in WebP format — no further optimization needed')
       } else if ((res.data as any)?.optimization) {
-        const opt = (res.data as any).optimization;
+        const opt = (res.data as any).optimization
         toast.success(
           `Optimized: ${opt.originalSizeFormatted} → ${opt.optimizedSizeFormatted} (${opt.savings}% smaller)`,
-        );
-        refetch();
+        )
+        refetch()
       }
 
-      setAiGenerating(null);
-      return;
+      setAiGenerating(null)
+      return
     }
 
-    await new Promise(r => setTimeout(r, 1500));
+    await new Promise((r) => setTimeout(r, 1500))
     if (field === 'alt') {
-      const generated = `A ${(activeItem?.format ?? 'media').toLowerCase()} image showing ${(activeItem?.name ?? 'uploaded').replace(/[-_]/g, ' ').replace(/\.\w+$/, '')} content`;
-      setEditAlt(generated);
-      toast.success('Alt tag generated by AI');
+      const generated = `A ${(activeItem?.format ?? 'media').toLowerCase()} image showing ${(activeItem?.name ?? 'uploaded').replace(/[-_]/g, ' ').replace(/\.\w+$/, '')} content`
+      setEditAlt(generated)
+      toast.success('Alt tag generated by AI')
     } else if (field === 'title') {
-      const generated = activeItem?.name.replace(/[-_]/g, ' ').replace(/\.\w+$/, '').replace(/\b\w/g, c => c.toUpperCase()) ?? '';
-      setEditTitle(generated);
-      toast.success('Title generated by AI');
+      const generated =
+        activeItem?.name
+          .replace(/[-_]/g, ' ')
+          .replace(/\.\w+$/, '')
+          .replace(/\b\w/g, (c) => c.toUpperCase()) ?? ''
+      setEditTitle(generated)
+      toast.success('Title generated by AI')
     }
-    setAiGenerating(null);
-  };
+    setAiGenerating(null)
+  }
 
   const handleCopyUrl = () => {
     if (activeItem?.url) {
-      navigator.clipboard.writeText(activeItem.url);
-      toast.success('URL copied to clipboard');
+      navigator.clipboard.writeText(activeItem.url)
+      toast.success('URL copied to clipboard')
     }
-  };
+  }
 
   const handleUploadFiles = async (files: FileList | null) => {
-    if (!files || files.length === 0) return;
-    setUploading(true);
+    if (!files || files.length === 0) return
+    setUploading(true)
 
-    let successCount = 0;
+    let successCount = 0
 
     for (let i = 0; i < files.length; i++) {
-      const file = files[i]!;
-      const formData = new FormData();
-      formData.append('file', file);
-
-      const res = await cmsApi<MediaItem & {
-        optimization?: {
-          originalSize: number;
-          optimizedSize: number;
-          savings: number;
-          originalSizeFormatted: string;
-          optimizedSizeFormatted: string;
-        };
-      }>('/media/upload', { method: 'POST', body: formData });
+      const file = files[i]!
+      const formData = new FormData()
+      formData.append('file', file)
+
+      const res = await cmsApi<
+        MediaItem & {
+          optimization?: {
+            originalSize: number
+            optimizedSize: number
+            savings: number
+            originalSizeFormatted: string
+            optimizedSizeFormatted: string
+          }
+        }
+      >('/media/upload', { method: 'POST', body: formData })
 
       if (res.error) {
-        toast.error(`Failed to upload ${file.name}: ${res.error}`);
+        toast.error(`Failed to upload ${file.name}: ${res.error}`)
       } else {
-        const opt = (res.data as any)?.optimization;
+        const opt = (res.data as any)?.optimization
         if (opt && opt.savings > 0) {
           toast.success(
             `${file.name} → WebP (${opt.originalSizeFormatted} → ${opt.optimizedSizeFormatted}, ${opt.savings}% saved)`,
-          );
+          )
         } else {
-          toast.success(`Uploaded ${file.name}`);
+          toast.success(`Uploaded ${file.name}`)
         }
-        successCount++;
+        successCount++
       }
     }
 
-    if (successCount > 0) refetch();
-    if (fileInputRef.current) fileInputRef.current.value = '';
-    setUploading(false);
-  };
+    if (successCount > 0) refetch()
+    if (fileInputRef.current) fileInputRef.current.value = ''
+    setUploading(false)
+  }
 
-  const handleDropItem = useCallback(async (itemId: string, folderId: string | null) => {
-    const res = await cmsApi(`/media/${itemId}/folder`, {
-      method: 'PUT',
-      body: JSON.stringify({ folderId }),
-    });
-    if (res.error) {
-      toast.error(res.error);
-    } else {
-      toast.success(folderId ? 'Moved to folder' : 'Removed from folder');
-      refetch();
-    }
-  }, [refetch]);
+  const handleDropItem = useCallback(
+    async (itemId: string, folderId: string | null) => {
+      const res = await cmsApi(`/media/${itemId}/folder`, {
+        method: 'PUT',
+        body: JSON.stringify({ folderId }),
+      })
+      if (res.error) {
+        toast.error(res.error)
+      } else {
+        toast.success(folderId ? 'Moved to folder' : 'Removed from folder')
+        refetch()
+      }
+    },
+    [refetch],
+  )
 
   const handleDragStart = (e: React.DragEvent, id: number | string) => {
-    e.dataTransfer.setData('text/actuate-item-id', String(id));
-    e.dataTransfer.effectAllowed = 'move';
-  };
-
-  const panelOpen = activeItem !== null;
-  const issues = activeItem ? [
-    ...(!activeItem.altTag ? ['Missing alt tag'] : []),
-    ...(!activeItem.title ? ['Missing title'] : []),
-    ...(activeItem.sizeBytes > 2000000 ? ['File size over 2 MB — consider optimizing'] : []),
-    ...(activeItem.usedOn?.length === 0 ? ['Not used on any page'] : []),
-  ] : [];
+    e.dataTransfer.setData('text/actuate-item-id', String(id))
+    e.dataTransfer.effectAllowed = 'move'
+  }
+
+  const panelOpen = activeItem !== null
+  const issues = activeItem
+    ? [
+        ...(!activeItem.altTag ? ['Missing alt tag'] : []),
+        ...(!activeItem.title ? ['Missing title'] : []),
+        ...(activeItem.sizeBytes > 2000000 ? ['File size over 2 MB — consider optimizing'] : []),
+        ...(activeItem.usedOn?.length === 0 ? ['Not used on any page'] : []),
+      ]
+    : []
 
   function SortHeader({ label, sortKey }: { label: string; sortKey: MediaSortKey }) {
-    const active = sortConfig?.key === sortKey;
+    const active = sortConfig?.key === sortKey
     return (
       <button
         type="button"
@@ -307,12 +352,16 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
       >
         {label}
         {active ? (
-          sortConfig!.direction === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />
+          sortConfig!.direction === 'asc' ? (
+            <ArrowUp className="w-3 h-3" />
+          ) : (
+            <ArrowDown className="w-3 h-3" />
+          )
         ) : (
           <ArrowUpDown className="w-3 h-3 text-gray-400" />
         )}
       </button>
-    );
+    )
   }
 
   if (loading) {
@@ -320,7 +369,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -329,7 +378,12 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
@@ -337,7 +391,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
         <div className="flex items-center gap-3">
           <button
             type="button"
-            onClick={() => setSidebarOpen(prev => !prev)}
+            onClick={() => setSidebarOpen((prev) => !prev)}
             className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
@@ -362,7 +416,11 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
             disabled={uploading}
             className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50"
           >
-            {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
+            {uploading ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Upload className="w-4 h-4" />
+            )}
             {uploading ? 'Uploading...' : 'Upload Files'}
           </button>
         </div>
@@ -374,7 +432,10 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
             <FolderTree
               scope="media"
               selected={folderSel}
-              onSelect={(sel) => { setFolderSel(sel); setSelectedMedia([]); }}
+              onSelect={(sel) => {
+                setFolderSel(sel)
+                setSelectedMedia([])
+              }}
               totalCount={allData.data?.total}
               uncategorizedCount={uncatData.data?.total}
               onDropItem={handleDropItem}
@@ -388,9 +449,19 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
               <div className="flex items-center gap-3 flex-1">
                 <div className="flex-1 max-w-md relative">
                   <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-                  <input type="text" placeholder="Search media..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                  <input
+                    type="text"
+                    placeholder="Search media..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  />
                 </div>
-                <select value={filterType} onChange={(e) => setFilterType(e.target.value)} className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <select
+                  value={filterType}
+                  onChange={(e) => setFilterType(e.target.value)}
+                  className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
                   <option value="all">All Types</option>
                   <option value="image">Images</option>
                   <option value="video">Videos</option>
@@ -398,10 +469,16 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                 </select>
               </div>
               <div className="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
-                <button onClick={() => setViewMode('grid')} className={`p-1.5 rounded transition-colors ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}>
+                <button
+                  onClick={() => setViewMode('grid')}
+                  className={`p-1.5 rounded transition-colors ${viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
+                >
                   <Grid3x3 className="w-4 h-4" />
                 </button>
-                <button onClick={() => setViewMode('list')} className={`p-1.5 rounded transition-colors ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}>
+                <button
+                  onClick={() => setViewMode('list')}
+                  className={`p-1.5 rounded transition-colors ${viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'}`}
+                >
                   <List className="w-4 h-4" />
                 </button>
               </div>
@@ -411,10 +488,25 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
           {selectedMedia.length > 0 && (
             <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
               <div className="flex items-center justify-between">
-                <span className="text-sm text-blue-900">{selectedMedia.length} file{selectedMedia.length !== 1 ? 's' : ''} selected</span>
+                <span className="text-sm text-blue-900">
+                  {selectedMedia.length} file{selectedMedia.length !== 1 ? 's' : ''} selected
+                </span>
                 <div className="flex items-center gap-2">
-                  <button onClick={async () => { for (const id of selectedMedia) await deleteMedia(id); setSelectedMedia([]); }} className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">Delete Selected</button>
-                  <button onClick={() => setSelectedMedia([])} className="px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors">Cancel</button>
+                  <button
+                    onClick={async () => {
+                      for (const id of selectedMedia) await deleteMedia(id)
+                      setSelectedMedia([])
+                    }}
+                    className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                  >
+                    Delete Selected
+                  </button>
+                  <button
+                    onClick={() => setSelectedMedia([])}
+                    className="px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors"
+                  >
+                    Cancel
+                  </button>
                 </div>
               </div>
             </div>
@@ -429,377 +521,479 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                 {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
                   ? 'No uncategorized media'
                   : folderSel.type === 'folder'
-                  ? 'No media in this folder'
-                  : 'No media yet'}
+                    ? 'No media in this folder'
+                    : 'No media yet'}
               </h3>
               <p className="text-sm text-gray-500">Upload your first file to get started.</p>
             </div>
           ) : (
-          <div className="flex gap-4 flex-1 overflow-hidden min-h-0">
-            <div className={`bg-white rounded-lg border border-gray-200 overflow-hidden transition-all duration-200 ${panelOpen ? 'flex-1 min-w-0' : 'w-full'}`}>
-              {viewMode === 'grid' ? (
-                <div className={`grid gap-2 sm:gap-3 p-2 sm:p-3 overflow-y-auto h-full ${
-                  panelOpen
-                    ? 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
-                    : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8'
-                }`}>
-                  {filteredAndSorted.map((item) => {
-                    const isActive = activeItem?.id === item.id;
-                    const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0;
-                    return (
-                      <div
-                        key={item.id}
-                        className={`group relative aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all ${
-                          isActive ? 'border-blue-500 ring-2 ring-blue-200' :
-                          selectedMedia.includes(item.id) ? 'border-blue-400 ring-1 ring-blue-100' :
-                          'border-gray-200 hover:border-gray-300'
-                        }`}
-                        onClick={() => openDetail(item)}
-                        draggable
-                        onDragStart={(e) => handleDragStart(e, item.id)}
-                      >
-                        <div className="w-full h-full bg-gray-100 flex items-center justify-center">
-                          <MediaPreview item={item} />
-                        </div>
-                        <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
-                          <div className="absolute bottom-0 left-0 right-0 p-2">
-                            <p className="text-white text-xs font-medium truncate">{item.name}</p>
-                            <p className="text-white/80 text-xs">{item.size}</p>
-                          </div>
-                        </div>
-                        {hasIssues && (
-                          <div className="absolute top-1.5 left-1.5 w-5 h-5 bg-yellow-500 rounded-full flex items-center justify-center" title="Needs attention">
-                            <AlertTriangle className="w-3 h-3 text-white" />
+            <div className="flex gap-4 flex-1 overflow-hidden min-h-0">
+              <div
+                className={`bg-white rounded-lg border border-gray-200 overflow-hidden transition-all duration-200 ${panelOpen ? 'flex-1 min-w-0' : 'w-full'}`}
+              >
+                {viewMode === 'grid' ? (
+                  <div
+                    className={`grid gap-2 sm:gap-3 p-2 sm:p-3 overflow-y-auto h-full ${
+                      panelOpen
+                        ? 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
+                        : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8'
+                    }`}
+                  >
+                    {filteredAndSorted.map((item) => {
+                      const isActive = activeItem?.id === item.id
+                      const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0
+                      return (
+                        <div
+                          key={item.id}
+                          className={`group relative aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all ${
+                            isActive
+                              ? 'border-blue-500 ring-2 ring-blue-200'
+                              : selectedMedia.includes(item.id)
+                                ? 'border-blue-400 ring-1 ring-blue-100'
+                                : 'border-gray-200 hover:border-gray-300'
+                          }`}
+                          onClick={() => openDetail(item)}
+                          draggable
+                          onDragStart={(e) => handleDragStart(e, item.id)}
+                        >
+                          <div className="w-full h-full bg-gray-100 flex items-center justify-center">
+                            <MediaPreview item={item} />
                           </div>
-                        )}
-                        <div className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => handleCheckbox(e, item.id)}>
-                          <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
-                            selectedMedia.includes(item.id) ? 'bg-blue-600 border-blue-600' : 'bg-white/80 border-gray-400'
-                          }`}>
-                            {selectedMedia.includes(item.id) && (
-                              <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 12 12">
-                                <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                              </svg>
-                            )}
+                          <div className="absolute inset-0 bg-linear-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+                            <div className="absolute bottom-0 left-0 right-0 p-2">
+                              <p className="text-white text-xs font-medium truncate">{item.name}</p>
+                              <p className="text-white/80 text-xs">{item.size}</p>
+                            </div>
                           </div>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              ) : (
-                <div className="overflow-y-auto h-full">
-                  <table className="w-full">
-                    <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
-                      <tr>
-                        <th className="w-8 px-3 py-2 text-left"><input type="checkbox" checked={selectedMedia.length === filteredAndSorted.length && filteredAndSorted.length > 0} onChange={handleSelectAll} className="rounded border-gray-300" /></th>
-                        <th className="w-6 px-1 py-2"></th>
-                        <th className="px-3 py-2 text-left"><SortHeader label="Name" sortKey="name" /></th>
-                        <th className="px-3 py-2 text-left"><SortHeader label="Type" sortKey="type" /></th>
-                        <th className="px-3 py-2 text-left"><SortHeader label="Size" sortKey="size" /></th>
-                        <th className="px-3 py-2 text-left"><SortHeader label="Uploaded" sortKey="date" /></th>
-                        <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">Status</th>
-                      </tr>
-                    </thead>
-                    <tbody className="divide-y divide-gray-200">
-                      {filteredAndSorted.map((item) => {
-                        const isActive = activeItem?.id === item.id;
-                        const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0;
-                        return (
-                          <tr
-                            key={item.id}
-                            className={`transition-colors cursor-pointer ${isActive ? 'bg-blue-50' : 'hover:bg-gray-50'}`}
-                            onClick={() => openDetail(item)}
-                            draggable
-                            onDragStart={(e) => handleDragStart(e, item.id)}
+                          {hasIssues && (
+                            <div
+                              className="absolute top-1.5 left-1.5 w-5 h-5 bg-yellow-500 rounded-full flex items-center justify-center"
+                              title="Needs attention"
+                            >
+                              <AlertTriangle className="w-3 h-3 text-white" />
+                            </div>
+                          )}
+                          <div
+                            className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={(e) => handleCheckbox(e, item.id)}
                           >
-                            <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
-                              <input type="checkbox" checked={selectedMedia.includes(item.id)} onChange={() => handleCheckbox({ stopPropagation: () => {} } as React.MouseEvent, item.id)} className="rounded border-gray-300" />
-                            </td>
-                            <td className="px-1 py-2 cursor-grab">
-                              <GripVertical className="w-4 h-4 text-gray-300" />
-                            </td>
-                            <td className="px-3 py-2">
-                              <div className="flex items-center gap-3">
-                                <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center overflow-hidden"><MediaPreview item={item} /></div>
-                                <span className="text-sm font-medium text-gray-900">{item.name}</span>
-                              </div>
-                            </td>
-                            <td className="px-3 py-2 text-sm text-gray-600">{item.format ?? item.type}</td>
-                            <td className="px-3 py-2 text-sm text-gray-600">{item.size}</td>
-                            <td className="px-3 py-2 text-sm text-gray-600">{item.date}</td>
-                            <td className="px-3 py-2">
-                              {hasIssues ? (
-                                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
-                                  <AlertTriangle className="w-3 h-3" /> Needs attention
-                                </span>
-                              ) : (
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Complete</span>
+                            <div
+                              className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                                selectedMedia.includes(item.id)
+                                  ? 'bg-blue-600 border-blue-600'
+                                  : 'bg-white/80 border-gray-400'
+                              }`}
+                            >
+                              {selectedMedia.includes(item.id) && (
+                                <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 12 12">
+                                  <path
+                                    d="M10 3L4.5 8.5L2 6"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                  />
+                                </svg>
                               )}
-                            </td>
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                ) : (
+                  <div className="overflow-y-auto h-full">
+                    <table className="w-full">
+                      <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                        <tr>
+                          <th className="w-8 px-3 py-2 text-left">
+                            <input
+                              type="checkbox"
+                              checked={
+                                selectedMedia.length === filteredAndSorted.length &&
+                                filteredAndSorted.length > 0
+                              }
+                              onChange={handleSelectAll}
+                              className="rounded border-gray-300"
+                            />
+                          </th>
+                          <th className="w-6 px-1 py-2"></th>
+                          <th className="px-3 py-2 text-left">
+                            <SortHeader label="Name" sortKey="name" />
+                          </th>
+                          <th className="px-3 py-2 text-left">
+                            <SortHeader label="Type" sortKey="type" />
+                          </th>
+                          <th className="px-3 py-2 text-left">
+                            <SortHeader label="Size" sortKey="size" />
+                          </th>
+                          <th className="px-3 py-2 text-left">
+                            <SortHeader label="Uploaded" sortKey="date" />
+                          </th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">
+                            Status
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-200">
+                        {filteredAndSorted.map((item) => {
+                          const isActive = activeItem?.id === item.id
+                          const hasIssues = !item.altTag || !item.title || item.usedOn?.length === 0
+                          return (
+                            <tr
+                              key={item.id}
+                              className={`transition-colors cursor-pointer ${isActive ? 'bg-blue-50' : 'hover:bg-gray-50'}`}
+                              onClick={() => openDetail(item)}
+                              draggable
+                              onDragStart={(e) => handleDragStart(e, item.id)}
+                            >
+                              <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
+                                <input
+                                  type="checkbox"
+                                  checked={selectedMedia.includes(item.id)}
+                                  onChange={() =>
+                                    handleCheckbox(
+                                      { stopPropagation: () => {} } as React.MouseEvent,
+                                      item.id,
+                                    )
+                                  }
+                                  className="rounded border-gray-300"
+                                />
+                              </td>
+                              <td className="px-1 py-2 cursor-grab">
+                                <GripVertical className="w-4 h-4 text-gray-300" />
+                              </td>
+                              <td className="px-3 py-2">
+                                <div className="flex items-center gap-3">
+                                  <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center overflow-hidden">
+                                    <MediaPreview item={item} />
+                                  </div>
+                                  <span className="text-sm font-medium text-gray-900">
+                                    {item.name}
+                                  </span>
+                                </div>
+                              </td>
+                              <td className="px-3 py-2 text-sm text-gray-600">
+                                {item.format ?? item.type}
+                              </td>
+                              <td className="px-3 py-2 text-sm text-gray-600">{item.size}</td>
+                              <td className="px-3 py-2 text-sm text-gray-600">{item.date}</td>
+                              <td className="px-3 py-2">
+                                {hasIssues ? (
+                                  <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                                    <AlertTriangle className="w-3 h-3" /> Needs attention
+                                  </span>
+                                ) : (
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                                    Complete
+                                  </span>
+                                )}
+                              </td>
+                            </tr>
+                          )
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
 
-            {panelOpen && activeItem && (
-              <div className="w-80 lg:w-96 bg-white rounded-lg border border-gray-200 overflow-y-auto shrink-0 flex flex-col">
-                <div className="flex items-center justify-between p-4 border-b border-gray-200 sticky top-0 bg-white z-10">
-                  <h3 className="text-sm font-semibold text-gray-900 truncate">{activeItem.name}</h3>
-                  <button onClick={closeDetail} className="p-1 hover:bg-gray-100 rounded transition-colors" aria-label="Close panel">
-                    <X className="w-4 h-4 text-gray-500" />
-                  </button>
-                </div>
+              {panelOpen && activeItem && (
+                <div className="w-80 lg:w-96 bg-white rounded-lg border border-gray-200 overflow-y-auto shrink-0 flex flex-col">
+                  <div className="flex items-center justify-between p-4 border-b border-gray-200 sticky top-0 bg-white z-10">
+                    <h3 className="text-sm font-semibold text-gray-900 truncate">
+                      {activeItem.name}
+                    </h3>
+                    <button
+                      onClick={closeDetail}
+                      className="p-1 hover:bg-gray-100 rounded transition-colors"
+                      aria-label="Close panel"
+                    >
+                      <X className="w-4 h-4 text-gray-500" />
+                    </button>
+                  </div>
 
-                <div className="flex-1 overflow-y-auto">
-                  <div className="p-4 border-b border-gray-200">
-                    <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
-                      {isImageMedia(activeItem) ? (
-                        <MediaPreview item={activeItem} />
-                      ) : (
-                        <ImageIcon className="w-12 h-12 text-gray-300" />
-                      )}
+                  <div className="flex-1 overflow-y-auto">
+                    <div className="p-4 border-b border-gray-200">
+                      <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
+                        {isImageMedia(activeItem) ? (
+                          <MediaPreview item={activeItem} />
+                        ) : (
+                          <ImageIcon className="w-12 h-12 text-gray-300" />
+                        )}
+                      </div>
                     </div>
-                  </div>
 
-                  {issues.length > 0 && (
-                    <div className="mx-4 mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-                      <div className="flex items-start gap-2">
-                        <AlertTriangle className="w-4 h-4 text-yellow-600 mt-0.5 shrink-0" />
+                    {issues.length > 0 && (
+                      <div className="mx-4 mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+                        <div className="flex items-start gap-2">
+                          <AlertTriangle className="w-4 h-4 text-yellow-600 mt-0.5 shrink-0" />
+                          <div>
+                            <p className="text-xs font-semibold text-yellow-900 mb-1">
+                              {issues.length} issue{issues.length !== 1 ? 's' : ''} found
+                            </p>
+                            <ul className="space-y-0.5">
+                              {issues.map((issue, i) => (
+                                <li key={i} className="text-xs text-yellow-800">
+                                  • {issue}
+                                </li>
+                              ))}
+                            </ul>
+                          </div>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={async () => {
+                            if (!activeItem.altTag) await handleAiGenerate('alt')
+                            if (!activeItem.title) await handleAiGenerate('title')
+                            if (activeItem.sizeBytes > 2000000) await handleAiGenerate('optimize')
+                          }}
+                          className="mt-2 w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
+                        >
+                          <Sparkles className="w-3.5 h-3.5" />
+                          AI Fix All Issues
+                        </button>
+                      </div>
+                    )}
+
+                    <div className="p-4 border-b border-gray-200 space-y-3">
+                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                        File Information
+                      </h4>
+                      <div className="grid grid-cols-2 gap-3">
                         <div>
-                          <p className="text-xs font-semibold text-yellow-900 mb-1">{issues.length} issue{issues.length !== 1 ? 's' : ''} found</p>
-                          <ul className="space-y-0.5">
-                            {issues.map((issue, i) => (
-                              <li key={i} className="text-xs text-yellow-800">• {issue}</li>
-                            ))}
-                          </ul>
+                          <div className="text-xs text-gray-500 mb-0.5">Format</div>
+                          <div className="text-sm text-gray-900">
+                            {activeItem.format ?? 'Unknown'}
+                          </div>
+                        </div>
+                        <div>
+                          <div className="text-xs text-gray-500 mb-0.5">File Size</div>
+                          <div className="text-sm text-gray-900 flex items-center gap-1">
+                            {activeItem.size}
+                            {activeItem.sizeBytes > 2000000 && (
+                              <span className="text-yellow-600 text-xs">(large)</span>
+                            )}
+                          </div>
+                        </div>
+                        <div>
+                          <div className="text-xs text-gray-500 mb-0.5">Dimensions</div>
+                          <div className="text-sm text-gray-900">
+                            {activeItem.dimensions ?? '—'}
+                          </div>
+                        </div>
+                        <div>
+                          <div className="text-xs text-gray-500 mb-0.5">Uploaded</div>
+                          <div className="text-sm text-gray-900">{activeItem.date}</div>
                         </div>
                       </div>
-                      <button
-                        type="button"
-                        onClick={async () => {
-                          if (!activeItem.altTag) await handleAiGenerate('alt');
-                          if (!activeItem.title) await handleAiGenerate('title');
-                          if (activeItem.sizeBytes > 2000000) await handleAiGenerate('optimize');
-                        }}
-                        className="mt-2 w-full flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
-                      >
-                        <Sparkles className="w-3.5 h-3.5" />
-                        AI Fix All Issues
-                      </button>
-                    </div>
-                  )}
 
-                  <div className="p-4 border-b border-gray-200 space-y-3">
-                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">File Information</h4>
-                    <div className="grid grid-cols-2 gap-3">
                       <div>
-                        <div className="text-xs text-gray-500 mb-0.5">Format</div>
-                        <div className="text-sm text-gray-900">{activeItem.format ?? 'Unknown'}</div>
+                        <div className="text-xs text-gray-500 mb-1">URL</div>
+                        <div className="flex items-center gap-1">
+                          <code className="flex-1 text-xs bg-gray-50 border border-gray-200 px-2 py-1.5 rounded text-gray-700 truncate">
+                            {activeItem.url}
+                          </code>
+                          <button
+                            onClick={handleCopyUrl}
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors shrink-0"
+                            title="Copy URL"
+                          >
+                            <Copy className="w-3.5 h-3.5 text-gray-500" />
+                          </button>
+                        </div>
                       </div>
+                    </div>
+
+                    <div className="p-4 border-b border-gray-200 space-y-4">
+                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                        SEO & Accessibility
+                      </h4>
+
                       <div>
-                        <div className="text-xs text-gray-500 mb-0.5">File Size</div>
-                        <div className="text-sm text-gray-900 flex items-center gap-1">
-                          {activeItem.size}
-                          {activeItem.sizeBytes > 2000000 && (
-                            <span className="text-yellow-600 text-xs">(large)</span>
-                          )}
+                        <div className="flex items-center justify-between mb-1">
+                          <label className="text-sm font-medium text-gray-700">Alt Tag</label>
+                          <button
+                            type="button"
+                            onClick={() => handleAiGenerate('alt')}
+                            disabled={aiGenerating === 'alt'}
+                            className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
+                          >
+                            <Bot className="w-3.5 h-3.5" />
+                            {aiGenerating === 'alt' ? 'Generating...' : 'AI Generate'}
+                          </button>
                         </div>
+                        <textarea
+                          value={editAlt}
+                          onChange={(e) => setEditAlt(e.target.value)}
+                          placeholder="Describe this image for accessibility..."
+                          rows={2}
+                          className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+                        />
+                        {!editAlt && (
+                          <p className="text-xs text-red-500 mt-1">
+                            Required for accessibility and SEO
+                          </p>
+                        )}
                       </div>
+
                       <div>
-                        <div className="text-xs text-gray-500 mb-0.5">Dimensions</div>
-                        <div className="text-sm text-gray-900">{activeItem.dimensions ?? '—'}</div>
+                        <div className="flex items-center justify-between mb-1">
+                          <label className="text-sm font-medium text-gray-700">Title</label>
+                          <button
+                            type="button"
+                            onClick={() => handleAiGenerate('title')}
+                            disabled={aiGenerating === 'title'}
+                            className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
+                          >
+                            <Bot className="w-3.5 h-3.5" />
+                            {aiGenerating === 'title' ? 'Generating...' : 'AI Generate'}
+                          </button>
+                        </div>
+                        <input
+                          type="text"
+                          value={editTitle}
+                          onChange={(e) => setEditTitle(e.target.value)}
+                          placeholder="Image title..."
+                          className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        />
                       </div>
+
                       <div>
-                        <div className="text-xs text-gray-500 mb-0.5">Uploaded</div>
-                        <div className="text-sm text-gray-900">{activeItem.date}</div>
+                        <label className="text-sm font-medium text-gray-700 mb-1 block">
+                          File Name
+                        </label>
+                        <input
+                          type="text"
+                          value={editFilename}
+                          onChange={(e) => setEditFilename(e.target.value)}
+                          className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        />
                       </div>
                     </div>
 
-                    <div>
-                      <div className="text-xs text-gray-500 mb-1">URL</div>
-                      <div className="flex items-center gap-1">
-                        <code className="flex-1 text-xs bg-gray-50 border border-gray-200 px-2 py-1.5 rounded text-gray-700 truncate">{activeItem.url}</code>
-                        <button onClick={handleCopyUrl} className="p-1.5 hover:bg-gray-100 rounded transition-colors shrink-0" title="Copy URL">
-                          <Copy className="w-3.5 h-3.5 text-gray-500" />
-                        </button>
+                    {isImageMedia(activeItem) && activeItem.url && (
+                      <div className="p-4 border-b border-gray-200">
+                        <FocalPointPicker
+                          imageUrl={activeItem.url}
+                          focalX={focalX}
+                          focalY={focalY}
+                          onChange={(x, y) => {
+                            setFocalX(x)
+                            setFocalY(y)
+                          }}
+                        />
                       </div>
-                    </div>
-                  </div>
-
-                  <div className="p-4 border-b border-gray-200 space-y-4">
-                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">SEO & Accessibility</h4>
+                    )}
 
-                    <div>
-                      <div className="flex items-center justify-between mb-1">
-                        <label className="text-sm font-medium text-gray-700">Alt Tag</label>
-                        <button
-                          type="button"
-                          onClick={() => handleAiGenerate('alt')}
-                          disabled={aiGenerating === 'alt'}
-                          className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
-                        >
-                          <Bot className="w-3.5 h-3.5" />
-                          {aiGenerating === 'alt' ? 'Generating...' : 'AI Generate'}
-                        </button>
-                      </div>
-                      <textarea
-                        value={editAlt}
-                        onChange={(e) => setEditAlt(e.target.value)}
-                        placeholder="Describe this image for accessibility..."
-                        rows={2}
-                        className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
-                      />
-                      {!editAlt && (
-                        <p className="text-xs text-red-500 mt-1">Required for accessibility and SEO</p>
+                    <div className="p-4 border-b border-gray-200">
+                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">
+                        Used On {activeItem.usedOn && `(${activeItem.usedOn.length})`}
+                      </h4>
+                      {activeItem.usedOn && activeItem.usedOn.length > 0 ? (
+                        <div className="space-y-2">
+                          {activeItem.usedOn.map((usage, i) => (
+                            <button
+                              key={i}
+                              type="button"
+                              onClick={() => onNavigate?.(usage.path)}
+                              className="w-full flex items-center gap-2 p-2 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
+                            >
+                              <Link2 className="w-4 h-4 text-gray-400 shrink-0" />
+                              <span className="text-sm text-gray-900 flex-1 truncate">
+                                {usage.page}
+                              </span>
+                              <ExternalLink className="w-3.5 h-3.5 text-gray-400 shrink-0" />
+                            </button>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="p-3 bg-orange-50 border border-orange-200 rounded-lg">
+                          <div className="flex items-start gap-2">
+                            <AlertTriangle className="w-4 h-4 text-orange-600 mt-0.5 shrink-0" />
+                            <div>
+                              <p className="text-xs font-medium text-orange-900">Orphaned media</p>
+                              <p className="text-xs text-orange-700 mt-0.5">
+                                This file isn&apos;t used on any page. Consider deleting it to save
+                                storage.
+                              </p>
+                            </div>
+                          </div>
+                        </div>
                       )}
                     </div>
 
-                    <div>
-                      <div className="flex items-center justify-between mb-1">
-                        <label className="text-sm font-medium text-gray-700">Title</label>
-                        <button
-                          type="button"
-                          onClick={() => handleAiGenerate('title')}
-                          disabled={aiGenerating === 'title'}
-                          className="flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700 disabled:opacity-50 transition-colors"
-                        >
-                          <Bot className="w-3.5 h-3.5" />
-                          {aiGenerating === 'title' ? 'Generating...' : 'AI Generate'}
-                        </button>
-                      </div>
-                      <input
-                        type="text"
-                        value={editTitle}
-                        onChange={(e) => setEditTitle(e.target.value)}
-                        placeholder="Image title..."
-                        className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                      />
-                    </div>
-
-                    <div>
-                      <label className="text-sm font-medium text-gray-700 mb-1 block">File Name</label>
-                      <input
-                        type="text"
-                        value={editFilename}
-                        onChange={(e) => setEditFilename(e.target.value)}
-                        className="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                      />
-                    </div>
-                  </div>
-
-                  {isImageMedia(activeItem) && activeItem.url && (
-                    <div className="p-4 border-b border-gray-200">
-                      <FocalPointPicker
-                        imageUrl={activeItem.url}
-                        focalX={focalX}
-                        focalY={focalY}
-                        onChange={(x, y) => { setFocalX(x); setFocalY(y); }}
-                      />
-                    </div>
-                  )}
-
-                  <div className="p-4 border-b border-gray-200">
-                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">
-                      Used On {activeItem.usedOn && `(${activeItem.usedOn.length})`}
-                    </h4>
-                    {activeItem.usedOn && activeItem.usedOn.length > 0 ? (
-                      <div className="space-y-2">
-                        {activeItem.usedOn.map((usage, i) => (
-                          <button
-                            key={i}
-                            type="button"
-                            onClick={() => onNavigate?.(usage.path)}
-                            className="w-full flex items-center gap-2 p-2 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
-                          >
-                            <Link2 className="w-4 h-4 text-gray-400 shrink-0" />
-                            <span className="text-sm text-gray-900 flex-1 truncate">{usage.page}</span>
-                            <ExternalLink className="w-3.5 h-3.5 text-gray-400 shrink-0" />
-                          </button>
-                        ))}
-                      </div>
-                    ) : (
-                      <div className="p-3 bg-orange-50 border border-orange-200 rounded-lg">
-                        <div className="flex items-start gap-2">
-                          <AlertTriangle className="w-4 h-4 text-orange-600 mt-0.5 shrink-0" />
-                          <div>
-                            <p className="text-xs font-medium text-orange-900">Orphaned media</p>
-                            <p className="text-xs text-orange-700 mt-0.5">This file isn&apos;t used on any page. Consider deleting it to save storage.</p>
+                    <div className="p-4 space-y-3">
+                      <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                        AI Optimization
+                      </h4>
+                      <button
+                        type="button"
+                        onClick={() => handleAiGenerate('optimize')}
+                        disabled={aiGenerating === 'optimize'}
+                        className="w-full flex items-center gap-2 p-3 rounded-lg border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition-colors text-left disabled:opacity-50"
+                      >
+                        <Sparkles
+                          className={`w-5 h-5 text-indigo-600 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
+                        />
+                        <div className="flex-1">
+                          <div className="text-sm font-medium text-indigo-900">
+                            {aiGenerating === 'optimize' ? 'Optimizing...' : 'Optimize Image'}
+                          </div>
+                          <div className="text-xs text-indigo-700 mt-0.5">
+                            Compress and convert to modern format (WebP/AVIF)
                           </div>
                         </div>
-                      </div>
-                    )}
+                      </button>
+                      <button
+                        type="button"
+                        className="w-full flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
+                      >
+                        <Bot className="w-5 h-5 text-gray-500 shrink-0" />
+                        <div className="flex-1">
+                          <div className="text-sm font-medium text-gray-900">
+                            AI Content Analysis
+                          </div>
+                          <div className="text-xs text-gray-600 mt-0.5">
+                            Detect objects, faces, text, and suggest categories
+                          </div>
+                        </div>
+                      </button>
+                    </div>
                   </div>
 
-                  <div className="p-4 space-y-3">
-                    <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">AI Optimization</h4>
+                  <div className="p-4 border-t border-gray-200 bg-white sticky bottom-0 flex items-center gap-2">
                     <button
                       type="button"
-                      onClick={() => handleAiGenerate('optimize')}
-                      disabled={aiGenerating === 'optimize'}
-                      className="w-full flex items-center gap-2 p-3 rounded-lg border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition-colors text-left disabled:opacity-50"
+                      onClick={handleSaveDetails}
+                      disabled={saving}
+                      className="flex-1 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
                     >
-                      <Sparkles className={`w-5 h-5 text-indigo-600 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`} />
-                      <div className="flex-1">
-                        <div className="text-sm font-medium text-indigo-900">
-                          {aiGenerating === 'optimize' ? 'Optimizing...' : 'Optimize Image'}
-                        </div>
-                        <div className="text-xs text-indigo-700 mt-0.5">
-                          Compress and convert to modern format (WebP/AVIF)
-                        </div>
-                      </div>
+                      {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+                      {saving ? 'Saving...' : 'Save Changes'}
                     </button>
                     <button
                       type="button"
-                      className="w-full flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors text-left"
+                      className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                      title="Download"
                     >
-                      <Bot className="w-5 h-5 text-gray-500 shrink-0" />
-                      <div className="flex-1">
-                        <div className="text-sm font-medium text-gray-900">AI Content Analysis</div>
-                        <div className="text-xs text-gray-600 mt-0.5">
-                          Detect objects, faces, text, and suggest categories
-                        </div>
-                      </div>
+                      <Download className="w-4 h-4 text-gray-600" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => deleteMedia(activeItem.id)}
+                      className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4 text-red-600" />
                     </button>
                   </div>
                 </div>
-
-                <div className="p-4 border-t border-gray-200 bg-white sticky bottom-0 flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={handleSaveDetails}
-                    disabled={saving}
-                    className="flex-1 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
-                  >
-                    {saving && <Loader2 className="w-4 h-4 animate-spin" />}
-                    {saving ? 'Saving...' : 'Save Changes'}
-                  </button>
-                  <button
-                    type="button"
-                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    title="Download"
-                  >
-                    <Download className="w-4 h-4 text-gray-600" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => deleteMedia(activeItem.id)}
-                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    title="Delete"
-                  >
-                    <Trash2 className="w-4 h-4 text-red-600" />
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
+              )}
+            </div>
           )}
         </div>
       </div>
     </div>
-  );
+  )
 }