@actuate-media/cms-admin 0.65.0 → 0.67.0

package/src/views/MediaBrowser.tsx

@@ -31,6 +31,8 @@ import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
 import { StatusBadge } from '../components/ui/StatusBadge.js'
+import { StatPill } from '../components/ui/StatPill.js'
+import { MediaSeoAudit, type MediaSeoAuditItem } from './MediaSeoAudit.js'
 
 interface MediaItem {
   id: number | string
@@ -44,6 +46,11 @@ interface MediaItem {
   format?: string
   altTag?: string
   title?: string
+  caption?: string
+  description?: string
+  focusKeyword?: string
+  /** Derived server-side by cms-core's `calculateMediaSeoScore()`. */
+  seoScore?: number
   usedOn?: { page: string; path: string }[]
 }
 
@@ -63,6 +70,14 @@ function matchesMediaType(item: MediaItem, filterType: string): boolean {
   return item.type === filterType
 }
 
+function formatStorage(bytes: number): string {
+  if (bytes <= 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.min(units.length - 1, Math.floor(Math.log2(bytes) / 10))
+  const value = bytes / 1024 ** i
+  return `${value >= 100 || i === 0 ? Math.round(value) : value.toFixed(1)} ${units[i]}`
+}
+
 function MediaPreview({ item }: { item: MediaItem }) {
   if (isImageMedia(item)) {
     return (
@@ -110,6 +125,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     '/media?pageSize=1&folderId=none',
   )
 
+  const [activeTab, setActiveTab] = useState<'library' | 'audit'>('library')
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
   const [searchQuery, setSearchQuery] = useState('')
   const [filterType, setFilterType] = useState('all')
@@ -120,6 +136,9 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
   const [editAlt, setEditAlt] = useState('')
   const [editTitle, setEditTitle] = useState('')
   const [editFilename, setEditFilename] = useState('')
+  const [editCaption, setEditCaption] = useState('')
+  const [editDescription, setEditDescription] = useState('')
+  const [editFocusKeyword, setEditFocusKeyword] = useState('')
   const [saving, setSaving] = useState(false)
   const [aiGenerating, setAiGenerating] = useState<string | null>(null)
   const [uploading, setUploading] = useState(false)
@@ -150,11 +169,43 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
     return results
   }, [mediaItems, searchQuery, filterType, sortConfig])
 
+  // Header stat pills (design `.mc-stats`): counts over the current folder
+  // scope, before search/type filters, so the numbers describe the library.
+  const mediaStats = useMemo(() => {
+    let images = 0
+    let videos = 0
+    let documents = 0
+    let bytes = 0
+    for (const item of mediaItems) {
+      if (item.type?.startsWith('image/') || isImageMedia(item)) images++
+      else if (item.type?.startsWith('video/')) videos++
+      else documents++
+      bytes += item.sizeBytes || 0
+    }
+    return { total: mediaItems.length, images, videos, documents, bytes }
+  }, [mediaItems])
+
   const openDetail = (item: MediaItem) => {
     setActiveItem(item)
     setEditAlt(item.altTag ?? '')
     setEditTitle(item.title ?? '')
     setEditFilename(item.name)
+    setEditCaption(item.caption ?? '')
+    setEditDescription(item.description ?? '')
+    setEditFocusKeyword(item.focusKeyword ?? '')
+  }
+
+  // Count of items missing alt OR title — drives the SEO Audit tab badge.
+  const auditAttentionCount = useMemo(
+    () => mediaItems.filter((item) => !item.altTag?.trim() || !item.title?.trim()).length,
+    [mediaItems],
+  )
+
+  const handleAuditEdit = (auditItem: MediaSeoAuditItem) => {
+    const item = mediaItems.find((m) => m.id === auditItem.id)
+    if (!item) return
+    setActiveTab('library')
+    openDetail(item)
   }
 
   const closeDetail = () => {
@@ -183,6 +234,9 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
         alt: editAlt,
         title: editTitle,
         filename: editFilename,
+        caption: editCaption,
+        description: editDescription,
+        focusKeyword: editFocusKeyword,
       }),
     })
     setSaving(false)
@@ -413,7 +467,13 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
           </button>
           <div>
             <h1 className="text-foreground mb-1">Media Library</h1>
-            <p className="text-muted-foreground text-sm">{filteredAndSorted.length} files</p>
+            <div className="flex flex-wrap items-center gap-1.5">
+              <StatPill value={mediaStats.total} label="Total Files" />
+              <StatPill value={mediaStats.images} label="Images" />
+              <StatPill value={mediaStats.videos} label="Videos" />
+              <StatPill value={mediaStats.documents} label="Documents" />
+              <StatPill value={formatStorage(mediaStats.bytes)} label="Storage used" />
+            </div>
           </div>
         </div>
         <div>
@@ -440,585 +500,686 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
         </div>
       </div>
 
-      <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
-        {sidebarOpen && (
-          <div className="border-border bg-card flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
-            <FolderTree
-              scope="media"
-              selected={folderSel}
-              onSelect={(sel) => {
-                setFolderSel(sel)
-                setSelectedMedia([])
-              }}
-              totalCount={allData.data?.total}
-              uncategorizedCount={uncatData.data?.total}
-              onDropItem={handleDropItem}
-            />
-          </div>
-        )}
+      <div
+        role="tablist"
+        aria-label="Media views"
+        className="mb-4 flex border-b border-[var(--bdr)]"
+      >
+        <button
+          type="button"
+          role="tab"
+          aria-selected={activeTab === 'library'}
+          onClick={() => setActiveTab('library')}
+          className={`-mb-px flex items-center gap-1.5 border-b-2 px-4 py-2.5 text-[13px] font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
+            activeTab === 'library'
+              ? 'border-[var(--acc)] text-[var(--acc)]'
+              : 'border-transparent text-[var(--muted)] hover:text-[var(--txt)]'
+          }`}
+        >
+          <ImageIcon size={14} aria-hidden />
+          Library
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={activeTab === 'audit'}
+          onClick={() => setActiveTab('audit')}
+          className={`-mb-px flex items-center gap-1.5 border-b-2 px-4 py-2.5 text-[13px] font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
+            activeTab === 'audit'
+              ? 'border-[var(--acc)] text-[var(--acc)]'
+              : 'border-transparent text-[var(--muted)] hover:text-[var(--txt)]'
+          }`}
+        >
+          <Search size={14} aria-hidden />
+          SEO Audit
+          <span
+            className={`rounded-[4px] px-[5px] py-px text-[10px] font-semibold ${
+              auditAttentionCount === 0
+                ? 'bg-[var(--suc-l)] text-[var(--suc)]'
+                : 'bg-[var(--err-l)] text-[var(--err)]'
+            }`}
+            aria-label={`${auditAttentionCount} items need attention`}
+          >
+            {auditAttentionCount}
+          </span>
+        </button>
+      </div>
 
-        <div className="flex min-w-0 flex-1 flex-col">
-          <div className="border-border bg-card mb-4 rounded-lg border">
-            <div className="flex items-center justify-between p-3">
-              <div className="flex flex-1 items-center gap-3">
-                <div className="relative max-w-md flex-1">
-                  <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-                  <input
-                    type="text"
-                    placeholder="Search media..."
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="border-input focus:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
-                  />
-                </div>
-                <select
-                  value={filterType}
-                  onChange={(e) => setFilterType(e.target.value)}
-                  className="border-input focus:ring-ring rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                >
-                  <option value="all">All Types</option>
-                  <option value="image">Images</option>
-                  <option value="video">Videos</option>
-                  <option value="document">Documents</option>
-                </select>
-              </div>
-              <div className="bg-muted flex items-center gap-1 rounded-lg p-1">
-                <button
-                  onClick={() => setViewMode('grid')}
-                  className={`rounded p-1.5 transition-colors ${viewMode === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-                >
-                  <Grid3x3 className="h-4 w-4" />
-                </button>
-                <button
-                  onClick={() => setViewMode('list')}
-                  className={`rounded p-1.5 transition-colors ${viewMode === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-                >
-                  <List className="h-4 w-4" />
-                </button>
-              </div>
+      {activeTab === 'audit' ? (
+        <MediaSeoAudit items={mediaItems} onEdit={handleAuditEdit} />
+      ) : (
+        <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
+          {sidebarOpen && (
+            <div className="border-border bg-card flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
+              <FolderTree
+                scope="media"
+                selected={folderSel}
+                onSelect={(sel) => {
+                  setFolderSel(sel)
+                  setSelectedMedia([])
+                }}
+                totalCount={allData.data?.total}
+                uncategorizedCount={uncatData.data?.total}
+                onDropItem={handleDropItem}
+              />
             </div>
-          </div>
+          )}
 
-          {selectedMedia.length > 0 && (
-            <div className="border-primary/30 bg-primary/10 mb-4 rounded-lg border p-3">
-              <div className="flex items-center justify-between">
-                <span className="text-primary text-sm">
-                  {selectedMedia.length} file{selectedMedia.length !== 1 ? 's' : ''} selected
-                </span>
-                <div className="flex items-center gap-2">
+          <div className="flex min-w-0 flex-1 flex-col">
+            <div className="border-border bg-card mb-4 rounded-lg border">
+              <div className="flex items-center justify-between p-3">
+                <div className="flex flex-1 items-center gap-3">
+                  <div className="relative max-w-md flex-1">
+                    <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+                    <input
+                      type="text"
+                      placeholder="Search media..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="border-input focus:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
+                    />
+                  </div>
+                  <select
+                    value={filterType}
+                    onChange={(e) => setFilterType(e.target.value)}
+                    className="border-input focus:ring-ring rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                  >
+                    <option value="all">All Types</option>
+                    <option value="image">Images</option>
+                    <option value="video">Videos</option>
+                    <option value="document">Documents</option>
+                  </select>
+                </div>
+                <div className="bg-muted flex items-center gap-1 rounded-lg p-1">
                   <button
-                    onClick={async () => {
-                      for (const id of selectedMedia) await deleteMedia(id)
-                      setSelectedMedia([])
-                    }}
-                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg px-3 py-1.5 text-sm transition-colors"
+                    onClick={() => setViewMode('grid')}
+                    className={`rounded p-1.5 transition-colors ${viewMode === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                   >
-                    Delete Selected
+                    <Grid3x3 className="h-4 w-4" />
                   </button>
                   <button
-                    onClick={() => setSelectedMedia([])}
-                    className="border-input bg-card hover:bg-muted rounded-lg border px-3 py-1.5 text-sm transition-colors"
+                    onClick={() => setViewMode('list')}
+                    className={`rounded p-1.5 transition-colors ${viewMode === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                   >
-                    Cancel
+                    <List className="h-4 w-4" />
                   </button>
                 </div>
               </div>
             </div>
-          )}
 
-          {filteredAndSorted.length === 0 && !loading ? (
-            <div className="flex flex-col items-center justify-center py-16 text-center">
-              <div className="bg-muted mb-4 flex h-12 w-12 items-center justify-center rounded-full">
-                <ImageIcon className="text-muted-foreground h-6 w-6" />
+            {selectedMedia.length > 0 && (
+              <div className="border-primary/30 bg-primary/10 mb-4 rounded-lg border p-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-primary text-sm">
+                    {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="bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-lg px-3 py-1.5 text-sm transition-colors"
+                    >
+                      Delete Selected
+                    </button>
+                    <button
+                      onClick={() => setSelectedMedia([])}
+                      className="border-input bg-card hover:bg-muted rounded-lg border px-3 py-1.5 text-sm transition-colors"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
               </div>
-              <h3 className="text-foreground mb-1 text-sm font-medium">
-                {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
-                  ? 'No uncategorized media'
-                  : folderSel.type === 'folder'
-                    ? 'No media in this folder'
-                    : 'No media yet'}
-              </h3>
-              <p className="text-muted-foreground text-sm">
-                Upload your first file to get started.
-              </p>
-            </div>
-          ) : (
-            <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
-              <div
-                className={`border-border bg-card overflow-hidden rounded-lg border transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
-              >
-                {viewMode === 'grid' ? (
-                  <div
-                    className={`grid h-full auto-rows-min content-start gap-3 overflow-y-auto p-2 sm:gap-4 sm:p-3 ${
-                      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
-                      const typeLabel = (
-                        item.name.includes('.')
-                          ? item.name.split('.').pop()!
-                          : item.format || item.type || ''
-                      )
-                        .replace(/^.*\//, '')
-                        .toUpperCase()
-                      return (
-                        <div
-                          key={item.id}
-                          className={`group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border-2 transition-all ${
-                            isActive
-                              ? 'border-primary ring-primary/30 ring-2'
-                              : selectedMedia.includes(item.id)
-                                ? 'border-primary/60 ring-primary/20 ring-1'
-                                : 'border-border hover:border-input'
-                          }`}
-                          onClick={() => openDetail(item)}
-                          draggable
-                          onDragStart={(e) => handleDragStart(e, item.id)}
-                        >
-                          <div className="relative aspect-square w-full overflow-hidden">
-                            <div className="bg-muted flex h-full w-full items-center justify-center">
-                              <MediaPreview item={item} />
-                            </div>
-                            {hasIssues && (
-                              <div
-                                className="bg-warning absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full"
-                                title="Needs attention"
-                              >
-                                <AlertTriangle className="text-warning-foreground h-3 w-3" />
+            )}
+
+            {filteredAndSorted.length === 0 && !loading ? (
+              <div className="flex flex-col items-center justify-center py-16 text-center">
+                <div className="bg-muted mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+                  <ImageIcon className="text-muted-foreground h-6 w-6" />
+                </div>
+                <h3 className="text-foreground mb-1 text-sm font-medium">
+                  {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
+                    ? 'No uncategorized media'
+                    : folderSel.type === 'folder'
+                      ? 'No media in this folder'
+                      : 'No media yet'}
+                </h3>
+                <p className="text-muted-foreground text-sm">
+                  Upload your first file to get started.
+                </p>
+              </div>
+            ) : (
+              <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
+                <div
+                  className={`border-border bg-card overflow-hidden rounded-lg border transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
+                >
+                  {viewMode === 'grid' ? (
+                    <div
+                      className={`grid h-full auto-rows-min content-start gap-3 overflow-y-auto p-2 sm:gap-4 sm:p-3 ${
+                        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
+                        const typeLabel = (
+                          item.name.includes('.')
+                            ? item.name.split('.').pop()!
+                            : item.format || item.type || ''
+                        )
+                          .replace(/^.*\//, '')
+                          .toUpperCase()
+                        return (
+                          <div
+                            key={item.id}
+                            className={`group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border-2 transition-all ${
+                              isActive
+                                ? 'border-primary ring-primary/30 ring-2'
+                                : selectedMedia.includes(item.id)
+                                  ? 'border-primary/60 ring-primary/20 ring-1'
+                                  : 'border-border hover:border-input'
+                            }`}
+                            onClick={() => openDetail(item)}
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, item.id)}
+                          >
+                            <div className="relative aspect-square w-full overflow-hidden">
+                              <div className="bg-muted flex h-full w-full items-center justify-center">
+                                <MediaPreview item={item} />
                               </div>
-                            )}
-                            <div
-                              className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
-                              onClick={(e) => handleCheckbox(e, item.id)}
-                            >
+                              {hasIssues && (
+                                <div
+                                  className="bg-warning absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full"
+                                  title="Needs attention"
+                                >
+                                  <AlertTriangle className="text-warning-foreground h-3 w-3" />
+                                </div>
+                              )}
                               <div
-                                className={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
-                                  selectedMedia.includes(item.id)
-                                    ? 'border-primary bg-primary'
-                                    : 'border-input bg-card/80'
-                                }`}
+                                className="absolute top-1.5 right-1.5 opacity-0 transition-opacity group-hover:opacity-100"
+                                onClick={(e) => handleCheckbox(e, item.id)}
                               >
-                                {selectedMedia.includes(item.id) && (
-                                  <svg
-                                    className="text-primary-foreground h-3 w-3"
-                                    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={`flex h-5 w-5 items-center justify-center rounded border-2 transition-colors ${
+                                    selectedMedia.includes(item.id)
+                                      ? 'border-primary bg-primary'
+                                      : 'border-input bg-card/80'
+                                  }`}
+                                >
+                                  {selectedMedia.includes(item.id) && (
+                                    <svg
+                                      className="text-primary-foreground h-3 w-3"
+                                      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>
                               </div>
                             </div>
-                          </div>
-                          <div className="border-border bg-card flex items-center gap-2 border-t px-2 py-1.5">
-                            <span
-                              className={`mt-0.5 h-2 w-2 shrink-0 self-start rounded-full ${
-                                hasIssues ? 'bg-warning' : 'bg-success'
-                              }`}
-                              title={hasIssues ? 'Needs attention' : 'SEO complete'}
-                            />
-                            <div className="min-w-0 flex-1">
-                              <p className="text-foreground truncate text-xs font-medium">
-                                {item.name}
-                              </p>
-                              <p className="text-muted-foreground truncate text-xs">
-                                {[typeLabel, item.size].filter(Boolean).join(' · ')}
-                              </p>
+                            <div className="border-border bg-card flex items-center gap-2 border-t px-2 py-1.5">
+                              <span
+                                className={`mt-0.5 h-2 w-2 shrink-0 self-start rounded-full ${
+                                  hasIssues ? 'bg-warning' : 'bg-success'
+                                }`}
+                                title={hasIssues ? 'Needs attention' : 'SEO complete'}
+                              />
+                              <div className="min-w-0 flex-1">
+                                <p className="text-foreground truncate text-xs font-medium">
+                                  {item.name}
+                                </p>
+                                <p className="text-muted-foreground truncate text-xs">
+                                  {[typeLabel, item.size].filter(Boolean).join(' · ')}
+                                </p>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-                ) : (
-                  <div className="h-full overflow-y-auto">
-                    <table className="w-full">
-                      <thead className="border-border bg-muted sticky top-0 border-b">
-                        <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="border-input rounded"
-                            />
-                          </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="text-foreground px-3 py-2 text-left text-xs font-medium">
-                            Status
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody className="divide-border divide-y">
-                        {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={`cursor-pointer transition-colors ${isActive ? 'bg-primary/10' : 'hover:bg-muted'}`}
-                              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="border-input rounded"
-                                />
-                              </td>
-                              <td className="cursor-grab px-1 py-2">
-                                <GripVertical className="text-muted-foreground h-4 w-4" />
-                              </td>
-                              <td className="px-3 py-2">
-                                <div className="flex items-center gap-3">
-                                  <div className="bg-muted flex h-10 w-10 items-center justify-center overflow-hidden rounded">
-                                    <MediaPreview item={item} />
+                        )
+                      })}
+                    </div>
+                  ) : (
+                    <div className="h-full overflow-y-auto">
+                      <table className="w-full">
+                        <thead className="border-border bg-muted sticky top-0 border-b">
+                          <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="border-input rounded"
+                              />
+                            </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="text-foreground px-3 py-2 text-left text-xs font-medium">
+                              Status
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-border divide-y">
+                          {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={`cursor-pointer transition-colors ${isActive ? 'bg-primary/10' : 'hover:bg-muted'}`}
+                                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="border-input rounded"
+                                  />
+                                </td>
+                                <td className="cursor-grab px-1 py-2">
+                                  <GripVertical className="text-muted-foreground h-4 w-4" />
+                                </td>
+                                <td className="px-3 py-2">
+                                  <div className="flex items-center gap-3">
+                                    <div className="bg-muted flex h-10 w-10 items-center justify-center overflow-hidden rounded">
+                                      <MediaPreview item={item} />
+                                    </div>
+                                    <span className="text-foreground text-sm font-medium">
+                                      {item.name}
+                                    </span>
                                   </div>
-                                  <span className="text-foreground text-sm font-medium">
-                                    {item.name}
-                                  </span>
-                                </div>
-                              </td>
-                              <td className="text-muted-foreground px-3 py-2 text-sm">
-                                {item.format ?? item.type}
-                              </td>
-                              <td className="text-muted-foreground px-3 py-2 text-sm">
-                                {item.size}
-                              </td>
-                              <td className="text-muted-foreground px-3 py-2 text-sm">
-                                {item.date}
-                              </td>
-                              <td className="px-3 py-2">
-                                {hasIssues ? (
-                                  <StatusBadge tone="warning">Needs attention</StatusBadge>
-                                ) : (
-                                  <StatusBadge tone="success">Complete</StatusBadge>
-                                )}
-                              </td>
-                            </tr>
-                          )
-                        })}
-                      </tbody>
-                    </table>
-                  </div>
-                )}
-              </div>
+                                </td>
+                                <td className="text-muted-foreground px-3 py-2 text-sm">
+                                  {item.format ?? item.type}
+                                </td>
+                                <td className="text-muted-foreground px-3 py-2 text-sm">
+                                  {item.size}
+                                </td>
+                                <td className="text-muted-foreground px-3 py-2 text-sm">
+                                  {item.date}
+                                </td>
+                                <td className="px-3 py-2">
+                                  {hasIssues ? (
+                                    <StatusBadge tone="warning">Needs attention</StatusBadge>
+                                  ) : (
+                                    <StatusBadge tone="success">Complete</StatusBadge>
+                                  )}
+                                </td>
+                              </tr>
+                            )
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </div>
 
-              {panelOpen && activeItem && (
-                <div className="border-border bg-card flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96">
-                  <div className="border-border bg-card sticky top-0 z-10 flex items-center justify-between border-b p-4">
-                    <h3 className="text-foreground truncate text-sm font-medium">
-                      {activeItem.name}
-                    </h3>
-                    <button
-                      onClick={closeDetail}
-                      className="hover:bg-muted rounded p-1 transition-colors"
-                      aria-label="Close panel"
-                    >
-                      <X className="text-muted-foreground h-4 w-4" />
-                    </button>
-                  </div>
+                {panelOpen && activeItem && (
+                  <div className="border-border bg-card flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96">
+                    <div className="border-border bg-card sticky top-0 z-10 flex items-center justify-between border-b p-4">
+                      <h3 className="text-foreground truncate text-sm font-medium">
+                        {activeItem.name}
+                      </h3>
+                      <button
+                        onClick={closeDetail}
+                        className="hover:bg-muted rounded p-1 transition-colors"
+                        aria-label="Close panel"
+                      >
+                        <X className="text-muted-foreground h-4 w-4" />
+                      </button>
+                    </div>
 
-                  <div className="flex-1 overflow-y-auto">
-                    <div className="border-border border-b p-4">
-                      <div className="bg-muted flex aspect-video items-center justify-center overflow-hidden rounded-lg">
-                        {isImageMedia(activeItem) ? (
-                          <MediaPreview item={activeItem} />
-                        ) : (
-                          <ImageIcon className="text-muted-foreground h-12 w-12" />
-                        )}
+                    <div className="flex-1 overflow-y-auto">
+                      <div className="border-border border-b p-4">
+                        <div className="bg-muted flex aspect-video items-center justify-center overflow-hidden rounded-lg">
+                          {isImageMedia(activeItem) ? (
+                            <MediaPreview item={activeItem} />
+                          ) : (
+                            <ImageIcon className="text-muted-foreground h-12 w-12" />
+                          )}
+                        </div>
                       </div>
-                    </div>
 
-                    {issues.length > 0 && (
-                      <div className="border-warning/30 bg-warning/10 mx-4 mt-4 rounded-lg border p-3">
-                        <div className="flex items-start gap-2">
-                          <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
+                      {issues.length > 0 && (
+                        <div className="border-warning/30 bg-warning/10 mx-4 mt-4 rounded-lg border p-3">
+                          <div className="flex items-start gap-2">
+                            <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
+                            <div>
+                              <p className="text-warning mb-1 text-xs font-medium">
+                                {issues.length} issue{issues.length !== 1 ? 's' : ''} found
+                              </p>
+                              <ul className="space-y-0.5">
+                                {issues.map((issue, i) => (
+                                  <li key={i} className="text-warning text-xs">
+                                    • {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="bg-warning text-warning-foreground hover:bg-warning/90 mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-xs transition-colors"
+                          >
+                            <Sparkles className="h-3.5 w-3.5" />
+                            AI Fix All Issues
+                          </button>
+                        </div>
+                      )}
+
+                      <div className="border-border space-y-3 border-b p-4">
+                        <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+                          File Information
+                        </h4>
+                        <div className="grid grid-cols-2 gap-3">
                           <div>
-                            <p className="text-warning mb-1 text-xs font-medium">
-                              {issues.length} issue{issues.length !== 1 ? 's' : ''} found
-                            </p>
-                            <ul className="space-y-0.5">
-                              {issues.map((issue, i) => (
-                                <li key={i} className="text-warning text-xs">
-                                  • {issue}
-                                </li>
-                              ))}
-                            </ul>
+                            <div className="text-muted-foreground mb-0.5 text-xs">Format</div>
+                            <div className="text-foreground text-sm">
+                              {activeItem.format ?? 'Unknown'}
+                            </div>
+                          </div>
+                          <div>
+                            <div className="text-muted-foreground mb-0.5 text-xs">File Size</div>
+                            <div className="text-foreground flex items-center gap-1 text-sm">
+                              {activeItem.size}
+                              {activeItem.sizeBytes > 2000000 && (
+                                <span className="text-warning text-xs">(large)</span>
+                              )}
+                            </div>
+                          </div>
+                          <div>
+                            <div className="text-muted-foreground mb-0.5 text-xs">Dimensions</div>
+                            <div className="text-foreground text-sm">
+                              {activeItem.dimensions ?? '—'}
+                            </div>
+                          </div>
+                          <div>
+                            <div className="text-muted-foreground mb-0.5 text-xs">Uploaded</div>
+                            <div className="text-foreground text-sm">{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="bg-warning text-warning-foreground hover:bg-warning/90 mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg px-3 py-1.5 text-xs transition-colors"
-                        >
-                          <Sparkles className="h-3.5 w-3.5" />
-                          AI Fix All Issues
-                        </button>
-                      </div>
-                    )}
 
-                    <div className="border-border space-y-3 border-b p-4">
-                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-                        File Information
-                      </h4>
-                      <div className="grid grid-cols-2 gap-3">
                         <div>
-                          <div className="text-muted-foreground mb-0.5 text-xs">Format</div>
-                          <div className="text-foreground text-sm">
-                            {activeItem.format ?? 'Unknown'}
+                          <div className="text-muted-foreground mb-1 text-xs">URL</div>
+                          <div className="flex items-center gap-1">
+                            <code className="border-border bg-muted text-foreground flex-1 truncate rounded border px-2 py-1.5 text-xs">
+                              {activeItem.url}
+                            </code>
+                            <button
+                              onClick={handleCopyUrl}
+                              className="hover:bg-muted shrink-0 rounded p-1.5 transition-colors"
+                              title="Copy URL"
+                            >
+                              <Copy className="text-muted-foreground h-3.5 w-3.5" />
+                            </button>
                           </div>
                         </div>
+                      </div>
+
+                      <div className="border-border space-y-4 border-b p-4">
+                        <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+                          SEO & Accessibility
+                        </h4>
+
                         <div>
-                          <div className="text-muted-foreground mb-0.5 text-xs">File Size</div>
-                          <div className="text-foreground flex items-center gap-1 text-sm">
-                            {activeItem.size}
-                            {activeItem.sizeBytes > 2000000 && (
-                              <span className="text-warning text-xs">(large)</span>
-                            )}
+                          <div className="mb-1 flex items-center justify-between">
+                            <label className="text-foreground text-sm font-medium">Alt Tag</label>
+                            <button
+                              type="button"
+                              onClick={() => handleAiGenerate('alt')}
+                              disabled={aiGenerating === 'alt'}
+                              className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs transition-colors disabled:opacity-50"
+                            >
+                              <Bot className="h-3.5 w-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="border-input focus:ring-ring w-full resize-none rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                          />
+                          {!editAlt && (
+                            <p className="text-destructive mt-1 text-xs">
+                              Required for accessibility and SEO
+                            </p>
+                          )}
                         </div>
+
                         <div>
-                          <div className="text-muted-foreground mb-0.5 text-xs">Dimensions</div>
-                          <div className="text-foreground text-sm">
-                            {activeItem.dimensions ?? '—'}
+                          <div className="mb-1 flex items-center justify-between">
+                            <label className="text-foreground text-sm font-medium">Title</label>
+                            <button
+                              type="button"
+                              onClick={() => handleAiGenerate('title')}
+                              disabled={aiGenerating === 'title'}
+                              className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs transition-colors disabled:opacity-50"
+                            >
+                              <Bot className="h-3.5 w-3.5" />
+                              {aiGenerating === 'title' ? 'Generating...' : 'AI Generate'}
+                            </button>
                           </div>
+                          <input
+                            type="text"
+                            value={editTitle}
+                            onChange={(e) => setEditTitle(e.target.value)}
+                            placeholder="Image title..."
+                            className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                          />
                         </div>
+
                         <div>
-                          <div className="text-muted-foreground mb-0.5 text-xs">Uploaded</div>
-                          <div className="text-foreground text-sm">{activeItem.date}</div>
+                          <label
+                            htmlFor="media-detail-caption"
+                            className="text-foreground mb-1 block text-sm font-medium"
+                          >
+                            Caption
+                          </label>
+                          <input
+                            id="media-detail-caption"
+                            type="text"
+                            value={editCaption}
+                            onChange={(e) => setEditCaption(e.target.value)}
+                            placeholder="Short caption shown alongside the asset..."
+                            className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                          />
                         </div>
-                      </div>
 
-                      <div>
-                        <div className="text-muted-foreground mb-1 text-xs">URL</div>
-                        <div className="flex items-center gap-1">
-                          <code className="border-border bg-muted text-foreground flex-1 truncate rounded border px-2 py-1.5 text-xs">
-                            {activeItem.url}
-                          </code>
-                          <button
-                            onClick={handleCopyUrl}
-                            className="hover:bg-muted shrink-0 rounded p-1.5 transition-colors"
-                            title="Copy URL"
+                        <div>
+                          <label
+                            htmlFor="media-detail-description"
+                            className="text-foreground mb-1 block text-sm font-medium"
                           >
-                            <Copy className="text-muted-foreground h-3.5 w-3.5" />
-                          </button>
+                            Description
+                          </label>
+                          <textarea
+                            id="media-detail-description"
+                            value={editDescription}
+                            onChange={(e) => setEditDescription(e.target.value)}
+                            placeholder="Longer description for search and reuse..."
+                            rows={2}
+                            className="border-input focus:ring-ring w-full resize-none rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                          />
                         </div>
-                      </div>
-                    </div>
-
-                    <div className="border-border space-y-4 border-b p-4">
-                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-                        SEO & Accessibility
-                      </h4>
 
-                      <div>
-                        <div className="mb-1 flex items-center justify-between">
-                          <label className="text-foreground text-sm font-medium">Alt Tag</label>
-                          <button
-                            type="button"
-                            onClick={() => handleAiGenerate('alt')}
-                            disabled={aiGenerating === 'alt'}
-                            className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs transition-colors disabled:opacity-50"
+                        <div>
+                          <label
+                            htmlFor="media-detail-focus-keyword"
+                            className="text-foreground mb-1 block text-sm font-medium"
                           >
-                            <Bot className="h-3.5 w-3.5" />
-                            {aiGenerating === 'alt' ? 'Generating...' : 'AI Generate'}
-                          </button>
+                            Focus Keyword
+                          </label>
+                          <input
+                            id="media-detail-focus-keyword"
+                            type="text"
+                            value={editFocusKeyword}
+                            onChange={(e) => setEditFocusKeyword(e.target.value)}
+                            placeholder="Primary keyword this asset targets..."
+                            className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                          />
                         </div>
-                        <textarea
-                          value={editAlt}
-                          onChange={(e) => setEditAlt(e.target.value)}
-                          placeholder="Describe this image for accessibility..."
-                          rows={2}
-                          className="border-input focus:ring-ring w-full resize-none rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                        />
-                        {!editAlt && (
-                          <p className="text-destructive mt-1 text-xs">
-                            Required for accessibility and SEO
-                          </p>
-                        )}
-                      </div>
 
-                      <div>
-                        <div className="mb-1 flex items-center justify-between">
-                          <label className="text-foreground text-sm font-medium">Title</label>
-                          <button
-                            type="button"
-                            onClick={() => handleAiGenerate('title')}
-                            disabled={aiGenerating === 'title'}
-                            className="text-primary hover:text-primary/80 flex items-center gap-1 text-xs transition-colors disabled:opacity-50"
-                          >
-                            <Bot className="h-3.5 w-3.5" />
-                            {aiGenerating === 'title' ? 'Generating...' : 'AI Generate'}
-                          </button>
+                        <div>
+                          <label className="text-foreground mb-1 block text-sm font-medium">
+                            File Name
+                          </label>
+                          <input
+                            type="text"
+                            value={editFilename}
+                            onChange={(e) => setEditFilename(e.target.value)}
+                            className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+                          />
                         </div>
-                        <input
-                          type="text"
-                          value={editTitle}
-                          onChange={(e) => setEditTitle(e.target.value)}
-                          placeholder="Image title..."
-                          className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                        />
                       </div>
 
-                      <div>
-                        <label className="text-foreground mb-1 block text-sm font-medium">
-                          File Name
-                        </label>
-                        <input
-                          type="text"
-                          value={editFilename}
-                          onChange={(e) => setEditFilename(e.target.value)}
-                          className="border-input focus:ring-ring w-full rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-                        />
+                      <div className="border-border border-b p-4">
+                        <h4 className="text-muted-foreground mb-3 text-xs font-medium tracking-wide uppercase">
+                          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="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-2 text-left transition-colors"
+                              >
+                                <Link2 className="text-muted-foreground h-4 w-4 shrink-0" />
+                                <span className="text-foreground flex-1 truncate text-sm">
+                                  {usage.page}
+                                </span>
+                                <ExternalLink className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+                              </button>
+                            ))}
+                          </div>
+                        ) : (
+                          <div className="border-warning/30 bg-warning/10 rounded-lg border p-3">
+                            <div className="flex items-start gap-2">
+                              <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
+                              <div>
+                                <p className="text-warning text-xs font-medium">Orphaned media</p>
+                                <p className="text-warning mt-0.5 text-xs">
+                                  This file isn&apos;t used on any page. Consider deleting it to
+                                  save storage.
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        )}
                       </div>
-                    </div>
 
-                    <div className="border-border border-b p-4">
-                      <h4 className="text-muted-foreground mb-3 text-xs font-medium tracking-wide uppercase">
-                        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="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-2 text-left transition-colors"
-                            >
-                              <Link2 className="text-muted-foreground h-4 w-4 shrink-0" />
-                              <span className="text-foreground flex-1 truncate text-sm">
-                                {usage.page}
-                              </span>
-                              <ExternalLink className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-                            </button>
-                          ))}
-                        </div>
-                      ) : (
-                        <div className="border-warning/30 bg-warning/10 rounded-lg border p-3">
-                          <div className="flex items-start gap-2">
-                            <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
-                            <div>
-                              <p className="text-warning text-xs font-medium">Orphaned media</p>
-                              <p className="text-warning mt-0.5 text-xs">
-                                This file isn&apos;t used on any page. Consider deleting it to save
-                                storage.
-                              </p>
+                      <div className="space-y-3 p-4">
+                        <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+                          AI Optimization
+                        </h4>
+                        <button
+                          type="button"
+                          onClick={() => handleAiGenerate('optimize')}
+                          disabled={aiGenerating === 'optimize'}
+                          className="border-primary/30 bg-primary/10 hover:bg-primary/15 flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors disabled:opacity-50"
+                        >
+                          <Sparkles
+                            className={`text-primary h-5 w-5 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
+                          />
+                          <div className="flex-1">
+                            <div className="text-primary text-sm font-medium">
+                              {aiGenerating === 'optimize' ? 'Optimizing...' : 'Optimize Image'}
+                            </div>
+                            <div className="text-primary mt-0.5 text-xs">
+                              Compress and convert to modern format (WebP/AVIF)
                             </div>
                           </div>
-                        </div>
-                      )}
+                        </button>
+                        <button
+                          type="button"
+                          className="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors"
+                        >
+                          <Bot className="text-muted-foreground h-5 w-5 shrink-0" />
+                          <div className="flex-1">
+                            <div className="text-foreground text-sm font-medium">
+                              AI Content Analysis
+                            </div>
+                            <div className="text-muted-foreground mt-0.5 text-xs">
+                              Detect objects, faces, text, and suggest categories
+                            </div>
+                          </div>
+                        </button>
+                      </div>
                     </div>
 
-                    <div className="space-y-3 p-4">
-                      <h4 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-                        AI Optimization
-                      </h4>
+                    <div className="border-border bg-card sticky bottom-0 flex items-center gap-2 border-t p-4">
                       <button
                         type="button"
-                        onClick={() => handleAiGenerate('optimize')}
-                        disabled={aiGenerating === 'optimize'}
-                        className="border-primary/30 bg-primary/10 hover:bg-primary/15 flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors disabled:opacity-50"
+                        onClick={handleSaveDetails}
+                        disabled={saving}
+                        className="bg-primary text-primary-foreground hover:bg-primary/90 flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm transition-colors disabled:opacity-50"
                       >
-                        <Sparkles
-                          className={`text-primary h-5 w-5 shrink-0 ${aiGenerating === 'optimize' ? 'animate-spin' : ''}`}
-                        />
-                        <div className="flex-1">
-                          <div className="text-primary text-sm font-medium">
-                            {aiGenerating === 'optimize' ? 'Optimizing...' : 'Optimize Image'}
-                          </div>
-                          <div className="text-primary mt-0.5 text-xs">
-                            Compress and convert to modern format (WebP/AVIF)
-                          </div>
-                        </div>
+                        {saving && <Loader2 className="h-4 w-4 animate-spin" />}
+                        {saving ? 'Saving...' : 'Save Changes'}
                       </button>
                       <button
                         type="button"
-                        className="border-border hover:bg-muted flex w-full items-center gap-2 rounded-lg border p-3 text-left transition-colors"
+                        className="hover:bg-muted rounded-lg p-2 transition-colors"
+                        title="Download"
                       >
-                        <Bot className="text-muted-foreground h-5 w-5 shrink-0" />
-                        <div className="flex-1">
-                          <div className="text-foreground text-sm font-medium">
-                            AI Content Analysis
-                          </div>
-                          <div className="text-muted-foreground mt-0.5 text-xs">
-                            Detect objects, faces, text, and suggest categories
-                          </div>
-                        </div>
+                        <Download className="text-muted-foreground h-4 w-4" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => deleteMedia(activeItem.id)}
+                        className="hover:bg-muted rounded-lg p-2 transition-colors"
+                        title="Delete"
+                      >
+                        <Trash2 className="text-destructive h-4 w-4" />
                       </button>
                     </div>
                   </div>
-
-                  <div className="border-border bg-card sticky bottom-0 flex items-center gap-2 border-t p-4">
-                    <button
-                      type="button"
-                      onClick={handleSaveDetails}
-                      disabled={saving}
-                      className="bg-primary text-primary-foreground hover:bg-primary/90 flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm transition-colors disabled:opacity-50"
-                    >
-                      {saving && <Loader2 className="h-4 w-4 animate-spin" />}
-                      {saving ? 'Saving...' : 'Save Changes'}
-                    </button>
-                    <button
-                      type="button"
-                      className="hover:bg-muted rounded-lg p-2 transition-colors"
-                      title="Download"
-                    >
-                      <Download className="text-muted-foreground h-4 w-4" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => deleteMedia(activeItem.id)}
-                      className="hover:bg-muted rounded-lg p-2 transition-colors"
-                      title="Delete"
-                    >
-                      <Trash2 className="text-destructive h-4 w-4" />
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
+                )}
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   )
 }