Merge pull request 'image-viewer-improvements' (#27) from image-viewer-improvements into main

Reviewed-on: http://gitea.lan/gpatti/MediaLore/pulls/27

src/app/api/ai-tagging/extract-text/route.ts

@@ -3,14 +3,14 @@ import { requireLibraryAccess } from '@/lib/auth'
 import { enqueueJob } from '@/lib/ai-jobs'
 
 export async function POST(request: NextRequest) {
-  let body: { itemKey?: string; ocrLanguages?: string }
+  let body: { itemKey?: string; ocrLanguages?: string; ocrMode?: string }
   try {
     body = await request.json()
   } catch {
     return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
   }
 
-  const { itemKey, ocrLanguages } = body
+  const { itemKey, ocrLanguages, ocrMode } = body
   if (!itemKey || typeof itemKey !== 'string') {
     return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
   }
@@ -19,12 +19,15 @@ export async function POST(request: NextRequest) {
   const auth = await requireLibraryAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
+  const payload: Record<string, string> = {}
+  if (ocrLanguages) payload.ocrLanguages = ocrLanguages
+  if (ocrMode) payload.ocrMode = ocrMode
   const jobId = enqueueJob(
     itemKey,
     'extract',
     libraryId,
     undefined,
-    ocrLanguages ? { ocrLanguages } : undefined,
+    Object.keys(payload).length ? payload : undefined,
   )
   return NextResponse.json({ jobId }, { status: 202 })
 }

src/app/api/ai-tagging/fields/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { requireLibraryAccess } from '@/lib/auth'
-import { getAiFields, updateExtractedText } from '@/lib/ai-tagger'
+import { getAiFields, updateExtractedText, updateAiDescription } from '@/lib/ai-tagger'
 
 export async function GET(request: NextRequest) {
   const { searchParams } = request.nextUrl
@@ -19,25 +19,37 @@ export async function GET(request: NextRequest) {
 }
 
 export async function PATCH(request: NextRequest) {
-  let body: { itemKey?: string; extractedText?: string }
+  let body: { itemKey?: string; extractedText?: string; aiDescription?: string }
   try {
     body = await request.json()
   } catch {
     return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
   }
 
-  const { itemKey, extractedText } = body
+  const { itemKey, extractedText, aiDescription } = body
   if (!itemKey || typeof itemKey !== 'string') {
     return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
   }
-  if (typeof extractedText !== 'string') {
+  if (extractedText === undefined && aiDescription === undefined) {
-    return NextResponse.json({ error: 'extractedText is required' }, { status: 400 })
+    return NextResponse.json({ error: 'extractedText or aiDescription is required' }, { status: 400 })
   }
 
   const libraryId = itemKey.split(':')[0]
   const auth = await requireLibraryAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
+  if (extractedText !== undefined) {
+    if (typeof extractedText !== 'string') {
+      return NextResponse.json({ error: 'extractedText must be a string' }, { status: 400 })
+    }
     updateExtractedText(itemKey, extractedText)
+  }
+  if (aiDescription !== undefined) {
+    if (typeof aiDescription !== 'string') {
+      return NextResponse.json({ error: 'aiDescription must be a string' }, { status: 400 })
+    }
+    updateAiDescription(itemKey, aiDescription)
+  }
+
   return NextResponse.json({ ok: true })
 }

src/app/api/ai-tagging/translate-bulk/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireLibraryAccess } from '@/lib/auth'
+import { enqueueJob } from '@/lib/ai-jobs'
+import { getDb } from '@/lib/db'
+
+export async function POST(request: NextRequest) {
+  let body: { libraryId?: string; path?: string }
+  try {
+    body = await request.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
+  }
+
+  const { libraryId, path: dirPath } = body
+  if (!libraryId || typeof libraryId !== 'string') {
+    return NextResponse.json({ error: 'libraryId is required' }, { status: 400 })
+  }
+
+  const auth = await requireLibraryAccess(request, libraryId)
+  if (auth instanceof NextResponse) return auth
+
+  const db = getDb()
+  const prefix = dirPath
+    ? `${libraryId}:mixed_file:${encodeURIComponent(dirPath + '/')}`
+    : `${libraryId}:mixed_file:`
+
+  // Only enqueue translate jobs for items that already have extracted text
+  const items = db
+    .prepare(
+      'SELECT item_key FROM media_items WHERE item_key LIKE ? AND item_type = ? AND extracted_text IS NOT NULL'
+    )
+    .all(`${prefix}%`, 'mixed_file') as { item_key: string }[]
+
+  const jobIds = items.map(({ item_key }) => enqueueJob(item_key, 'translate', libraryId))
+  return NextResponse.json({ jobIds, queued: jobIds.length }, { status: 202 })
+}

src/app/api/browse/route.ts

@@ -33,18 +33,37 @@ export async function GET(request: NextRequest) {
     ? scanDirectoryRecursive(root, libraryId, subpath)
     : scanDirectory(root, libraryId, subpath)
 
-  // Annotate image entries with whether they have extracted text
+  // Annotate image files with hasExtractedText, and directories if any descendant has extracted text
   const db = getDb()
   const rows = db
     .prepare('SELECT item_key FROM media_items WHERE library_id = ? AND extracted_text IS NOT NULL')
     .all(libraryId) as { item_key: string }[]
   const withText = new Set(rows.map((r) => r.item_key))
 
+  // Build a set of all ancestor directory relative paths that contain at least one item with text
+  // e.g. item_key "lib:mixed_file:manga%2Fch1%2Fp1.jpg" → ancestors "manga", "manga/ch1"
+  const dirsWithText = new Set<string>()
+  const keyPrefix = `${libraryId}:mixed_file:`
+  for (const key of withText) {
+    const decoded = decodeURIComponent(key.slice(keyPrefix.length))
+    const parts = decoded.split('/')
+    for (let i = 1; i < parts.length; i++) {
+      dirsWithText.add(parts.slice(0, i).join('/'))
+    }
+  }
+
   listing.entries = listing.entries.map((e) => {
-    if (e.type !== 'file' || e.mediaType !== 'image') return e
+    if (e.type === 'file') {
+      if (e.mediaType !== 'image') return e
       const relPath = subpath ? path.join(subpath, e.name) : e.name
       const itemKey = `${libraryId}:mixed_file:${encodeURIComponent(relPath)}`
       return { ...e, hasExtractedText: withText.has(itemKey) }
+    }
+    if (e.type === 'directory') {
+      const dirRel = subpath ? `${subpath}/${e.name}` : e.name
+      if (dirsWithText.has(dirRel)) return { ...e, hasExtractedText: true }
+    }
+    return e
   })
 
   return NextResponse.json(listing)

src/components/mixed/ImageLightbox.tsx

@@ -12,11 +12,15 @@ interface Props {
   itemKey?: string
   onTagsChanged?: () => void
   onAiTag?: () => Promise<void>
+  showTags?: boolean
+  onShowTagsChange?: (v: boolean) => void
 }
 
-export default function ImageLightbox({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag }: Props) {
+export default function ImageLightbox({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag, showTags: showTagsProp, onShowTagsChange }: Props) {
   const overlayRef = useRef<HTMLDivElement>(null)
-  const [showTags, setShowTags] = useState(false)
+  const [showTagsLocal, setShowTagsLocal] = useState(false)
+  const showTags = showTagsProp ?? showTagsLocal
+  const setShowTags = onShowTagsChange ?? setShowTagsLocal
   const [aiTagging, setAiTagging] = useState(false)
   const [aiTagError, setAiTagError] = useState<string | null>(null)
   const [tagRefreshKey, setTagRefreshKey] = useState(0)
@@ -33,8 +37,10 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
   const [savingText, setSavingText] = useState(false)
   const [sourceLanguage, setSourceLanguage] = useState('')
 
-  // Description state (moved from TagSelector)
+  // Description state
   const [aiDescription, setAiDescription] = useState<string | null>(null)
+  const [editedDescription, setEditedDescription] = useState<string>('')
+  const [savingDesc, setSavingDesc] = useState(false)
   const [generatingDesc, setGeneratingDesc] = useState(false)
   const [descPending, setDescPending] = useState(false)
   const [descError, setDescError] = useState<string | null>(null)
@@ -67,6 +73,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
         setEditedExtractedText(data.extractedText ?? '')
         setTranslatedText(data.extractedTextTranslated)
         setAiDescription(data.aiDescription)
+        setEditedDescription(data.aiDescription ?? '')
       })
       .catch(() => {})
   }, [itemKey])
@@ -112,6 +119,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
           setEditedExtractedText(data.extractedText ?? '')
           setTranslatedText(data.extractedTextTranslated)
           setAiDescription(data.aiDescription)
+          setEditedDescription(data.aiDescription ?? '')
           setExtractPending(false)
           setTranslatePending(false)
           setDescPending(false)
@@ -168,292 +176,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
     }
   }
 
-  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
+  const callExtract = async (modeOverride: string) => {
-
-  return (
-    <div
-      ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
-      onClick={handleOverlayClick}
-    >
-      {/* Toolbar — collapses to just filename + text overlay when tag panel is open */}
-      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
-        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
-          {name}
-        </span>
-        <div className="flex items-center gap-2 flex-shrink-0">
-          {/* Text overlay button — always shown when text exists */}
-          {extractedText && (
-            <button
-              onClick={(e) => { e.stopPropagation(); setShowTextOverlay((v) => !v) }}
-              className="w-12 h-12 rounded-full flex items-center justify-center transition-colors"
-              style={{
-                backgroundColor: showTextOverlay ? 'var(--accent)' : 'var(--surface)',
-                color: showTextOverlay ? '#fff' : 'var(--text-primary)',
-              }}
-              onMouseEnter={(e) => {
-                if (!showTextOverlay) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
-              }}
-              onMouseLeave={(e) => {
-                if (!showTextOverlay) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
-              }}
-              aria-label={showTextOverlay ? 'Hide text' : 'Show text'}
-              title="Display text"
-            >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="3" y1="6" x2="21" y2="6"/>
-                <line x1="3" y1="12" x2="15" y2="12"/>
-                <line x1="3" y1="18" x2="18" y2="18"/>
-              </svg>
-            </button>
-          )}
-          {/* These buttons only show in the toolbar when the tag panel is closed */}
-          {!showTags && (
-            <>
-              {itemKey && (
-                <button
-                  onClick={(e) => { e.stopPropagation(); setShowTags(true) }}
-                  className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors"
-                  style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)', fontSize: '1.5rem' }}
-                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-                  aria-label="Show tags"
-                  title="Tags"
-                >
-                  🏷
-                </button>
-              )}
-              {onAiTag && (
-                <button
-                  onClick={async (e) => {
-                    e.stopPropagation()
-                    setAiTagging(true)
-                    setAiTagError(null)
-                    try {
-                      await onAiTag()
-                      setTagRefreshKey((k) => k + 1)
-                      onTagsChanged?.()
-                    } catch (err) {
-                      setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                      setTimeout(() => setAiTagError(null), 4000)
-                    } finally {
-                      setAiTagging(false)
-                    }
-                  }}
-                  disabled={aiTagging}
-                  className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors disabled:opacity-50"
-                  style={{
-                    backgroundColor: aiTagError ? '#7f1d1d' : 'var(--surface)',
-                    color: aiTagError ? '#fca5a5' : 'var(--text-primary)',
-                    fontSize: '1.5rem',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
-                  }}
-                  aria-label="AI Tag this image"
-                  title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
-                >
-                  {aiTagging ? (
-                    <span className="animate-spin" style={{ display: 'inline-block', fontSize: '1.2rem' }}>⟳</span>
-                  ) : '✨'}
-                </button>
-              )}
-              <button
-                onClick={onClose}
-                className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors"
-                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)', fontSize: '1.5rem' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-                aria-label="Close"
-              >
-                ✕
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-
-      {showTags ? (
-        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden max-h-fit max-w-fit">
-          {/* Image */}
-          <div className="w-full flex-1 min-w-0 min-h-0 h-full flex items-center justify-center overflow-hidden relative">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={url}
-              alt={name}
-              className="max-w-full max-h-full w-auto h-auto object-contain rounded-lg"
-              onClick={(e) => e.stopPropagation()}
-            />
-            {onPrev && (
-              <button
-                onClick={(e) => { e.stopPropagation(); onPrev() }}
-                className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-                style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-                aria-label="Previous"
-              >
-                ‹
-              </button>
-            )}
-            {onNext && (
-              <button
-                onClick={(e) => { e.stopPropagation(); onNext() }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-                style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-                aria-label="Next"
-              >
-                ›
-              </button>
-            )}
-            {/* Text overlay */}
-            {showTextOverlay && displayText && (
-              <div
-                className="absolute bottom-4 left-4 right-4 z-10 rounded-xl p-4"
-                style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
-                onClick={(e) => e.stopPropagation()}
-              >
-                {extractedText && translatedText && (
-                  <div className="flex justify-end mb-2">
-                    <button
-                      onClick={() => setShowOriginal((v) => !v)}
-                      className="text-xs px-2 py-0.5 rounded-full"
-                      style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }}
-                    >
-                      {showOriginal ? 'Show Translation' : 'Show Original'}
-                    </button>
-                  </div>
-                )}
-                <p className="text-sm whitespace-pre-wrap" style={{ color: 'rgba(255,255,255,0.9)' }}>
-                  {displayText}
-                </p>
-              </div>
-            )}
-          </div>
-
-          {/* Tag panel */}
-          <div
-            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4 flex flex-col gap-4"
-            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Panel header — hide panel + AI tagger + close lightbox */}
-            <div className="flex items-center justify-between flex-shrink-0">
-              <button
-                onClick={() => setShowTags(false)}
-                className={smallBtn}
-                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                aria-label="Hide panel"
-                title="Hide panel"
-              >
-                ›
-              </button>
-              <div className="flex items-center gap-1.5">
-                {onAiTag && (
-                  <button
-                    onClick={async (e) => {
-                      e.stopPropagation()
-                      setAiTagging(true)
-                      setAiTagError(null)
-                      try {
-                        await onAiTag()
-                        setTagRefreshKey((k) => k + 1)
-                        onTagsChanged?.()
-                      } catch (err) {
-                        setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                        setTimeout(() => setAiTagError(null), 4000)
-                      } finally {
-                        setAiTagging(false)
-                      }
-                    }}
-                    disabled={aiTagging}
-                    className={`${smallBtn} disabled:opacity-50`}
-                    style={{
-                      backgroundColor: aiTagError ? '#7f1d1d' : 'var(--border)',
-                      color: aiTagError ? '#fca5a5' : 'var(--text-secondary)',
-                      fontSize: '1rem',
-                    }}
-                    onMouseEnter={(e) => {
-                      if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                    }}
-                    onMouseLeave={(e) => {
-                      if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                    }}
-                    aria-label="AI Tag this image"
-                    title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
-                  >
-                    {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
-                  </button>
-                )}
-                <button
-                  onClick={onClose}
-                  className={smallBtn}
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                  aria-label="Close"
-                  title="Close"
-                >
-                  ✕
-                </button>
-              </div>
-            </div>
-
-            {/* Description section */}
-            <div className="flex flex-col gap-1" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
-                Description
-              </p>
-              {aiDescription && (
-                <p className="text-xs italic mb-2" style={{ color: 'var(--text-secondary)' }}>
-                  {aiDescription}
-                </p>
-              )}
-              <div className="flex items-center gap-1.5">
-                <button
-                  onClick={handleGenerateDescription}
-                  disabled={generatingDesc || descPending}
-                  className="text-xs px-2 py-0.5 rounded-full transition-colors disabled:opacity-50"
-                  style={{
-                    backgroundColor: descPending ? 'var(--accent)' : 'var(--border)',
-                    color: descPending ? '#fff' : 'var(--text-secondary)',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!generatingDesc && !descPending) {
-                      ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                      ;(e.currentTarget as HTMLElement).style.color = 'var(--background)'
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!descPending) {
-                      ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                      ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                    }
-                  }}
-                  title={aiDescription ? 'Regenerate AI description' : 'Generate AI description'}
-                >
-                  {generatingDesc ? '⟳ Generating…' : descPending ? '⟳ Queued…' : aiDescription ? '✦ Regenerate Description' : '✦ Generate Description'}
-                </button>
-                {descError && (
-                  <span className="text-xs" style={{ color: '#f87171' }}>{descError}</span>
-                )}
-              </div>
-            </div>
-
-            {/* Text extraction section — only for images */}
-            {isImage && (
-              <div className="flex flex-col gap-2" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-                <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
-                  Text Extraction
-                </p>
-
-                <div className="flex items-center gap-2 flex-wrap">
-                  <button
-                    onClick={async () => {
     setExtracting(true)
     setExtractError(null)
     setExtractPending(false)
@@ -463,7 +186,8 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           itemKey,
-                            ...(ocrLanguageInput.trim() && { ocrLanguages: ocrLanguageInput.trim() }),
+          ocrMode: modeOverride,
+          ...(modeOverride !== 'llm' && ocrLanguageInput.trim() && { ocrLanguages: ocrLanguageInput.trim() }),
         }),
       })
       if (res.status === 202) {
@@ -485,12 +209,308 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
     } finally {
       setExtracting(false)
     }
+  }
+
+  const handleAiTag = async () => {
+    if (!onAiTag) return
+    setAiTagging(true)
+    setAiTagError(null)
+    try {
+      await onAiTag()
+      setTagRefreshKey((k) => k + 1)
+      onTagsChanged?.()
+    } catch (err) {
+      setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
+      setTimeout(() => setAiTagError(null), 4000)
+    } finally {
+      setAiTagging(false)
+    }
+  }
+
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 overflow-hidden"
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh' }}
+      onClick={handleOverlayClick}
+    >
+      {/* Outer flex — row on md+, col on mobile when panel open */}
+      <div className={`flex h-full w-full ${showTags ? 'flex-col md:flex-row' : ''}`}>
+
+        {/* ── Media pane — always full when no panel, flex-1 when panel open ── */}
+        <div className="relative flex-1 min-h-0 min-w-0">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={url}
+            alt={name}
+            className="absolute inset-0 w-full h-full object-contain"
+            onClick={(e) => e.stopPropagation()}
+          />
+
+          {/* Prev / Next */}
+          {onPrev && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onPrev() }}
+              className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Previous"
+            >
+              ‹
+            </button>
+          )}
+          {onNext && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onNext() }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Next"
+            >
+              ›
+            </button>
+          )}
+
+          {/* Text overlay */}
+          {showTextOverlay && displayText && (
+            <div
+              className="absolute bottom-16 left-4 right-4 z-10 rounded-xl p-4"
+              style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {extractedText && translatedText && (
+                <div className="flex justify-end mb-2">
+                  <button
+                    onClick={() => setShowOriginal((v) => !v)}
+                    className="text-xs px-2 py-0.5 rounded-full"
+                    style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }}
+                  >
+                    {showOriginal ? 'Show Translation' : 'Show Original'}
+                  </button>
+                </div>
+              )}
+              <p className="text-sm whitespace-pre-wrap" style={{ color: 'rgba(255,255,255,0.9)' }}>
+                {displayText}
+              </p>
+            </div>
+          )}
+
+          {/* ── Floating controls ── */}
+
+          {/* Filename pill — bottom-left */}
+          <div
+            className="absolute bottom-4 left-4 max-w-[55%] px-2.5 py-1 rounded-full pointer-events-none"
+            style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}
+          >
+            <span className="block text-xs truncate" style={{ color: 'rgba(255,255,255,0.85)' }}>
+              {name}
+            </span>
+          </div>
+
+          {/* Tags + Close — top-right */}
+          <div
+            className="absolute top-4 right-4 flex items-center gap-1.5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {itemKey && !showTags && (
+              <button
+                onClick={() => { setShowTags(true); setShowTextOverlay(false) }}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                aria-label="Show tags"
+                title="Tags"
+              >
+                🏷
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className={smallBtn}
+              style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+              onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+              onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+              aria-label="Close"
+              title="Close"
+            >
+              ✕
+            </button>
+          </div>
+
+          {/* Text display button — bottom-right, hidden when panel open */}
+          {!showTags && extractedText && (
+            <button
+              onClick={(e) => { e.stopPropagation(); setShowTextOverlay((v) => !v) }}
+              className={`absolute bottom-4 right-4 ${smallBtn}`}
+              style={{
+                backgroundColor: showTextOverlay ? 'var(--accent)' : 'var(--surface)',
+                color: showTextOverlay ? '#fff' : 'var(--text-primary)',
               }}
+              onMouseEnter={(e) => {
+                if (!showTextOverlay) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
+              }}
+              onMouseLeave={(e) => {
+                if (!showTextOverlay) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
+              }}
+              aria-label={showTextOverlay ? 'Hide text' : 'Show text'}
+              title="Display text"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="3" y1="6" x2="21" y2="6"/>
+                <line x1="3" y1="12" x2="15" y2="12"/>
+                <line x1="3" y1="18" x2="18" y2="18"/>
+              </svg>
+            </button>
+          )}
+        </div>
+
+        {/* ── Tag panel — bottom half on mobile, right sidebar on desktop ── */}
+        {showTags && (
+          <div
+            className="flex-shrink-0 flex flex-col overflow-hidden w-full max-h-[50vh] md:w-80 md:max-h-none md:h-full"
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Panel header — ‹ hide  |  ✨ AI tag  ✕ close */}
+            <div className="flex items-center justify-between p-4 flex-shrink-0">
+              <button
+                onClick={() => setShowTags(false)}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                aria-label="Hide panel"
+                title="Hide panel"
+              >
+                ›
+              </button>
+              <div className="flex items-center gap-1.5">
+                <button
+                  onClick={onClose}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                  aria-label="Close"
+                  title="Close"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+
+            {/* Scrollable panel content */}
+            <div className="overflow-y-auto flex-1 min-h-0 flex flex-col gap-4 px-4 pb-4">
+
+              {/* Description section */}
+              <div className="flex flex-col gap-1" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
+                {/* Heading row */}
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                    Description
+                  </p>
+                  <button
+                    onClick={handleGenerateDescription}
+                    disabled={generatingDesc || descPending}
+                    className={`${smallBtn} disabled:opacity-50`}
+                    style={{
+                      backgroundColor: descPending ? 'var(--accent)' : 'var(--border)',
+                      color: descPending ? '#fff' : 'var(--text-secondary)',
+                      fontSize: '1rem',
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!generatingDesc && !descPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!descPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                    }}
+                    aria-label={aiDescription ? 'Regenerate description' : 'Generate description'}
+                    title={aiDescription ? 'Regenerate AI description' : 'Generate AI description'}
+                  >
+                    {generatingDesc || descPending ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                  </button>
+                </div>
+                {/* Editable textarea */}
+                <textarea
+                  value={editedDescription}
+                  onChange={(e) => setEditedDescription(e.target.value)}
+                  placeholder="No description yet…"
+                  className="text-xs rounded-lg p-2 w-full resize-y outline-none"
+                  style={{
+                    backgroundColor: 'var(--background)',
+                    border: '1px solid var(--border)',
+                    color: 'var(--text-primary)',
+                    minHeight: '3.5rem',
+                    maxHeight: '8rem',
+                    fontFamily: 'inherit',
+                  }}
+                />
+                {editedDescription !== (aiDescription ?? '') && (
+                  <button
+                    onClick={async () => {
+                      setSavingDesc(true)
+                      try {
+                        await fetch('/api/ai-tagging/fields', {
+                          method: 'PATCH',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ itemKey, aiDescription: editedDescription }),
+                        })
+                        setAiDescription(editedDescription)
+                      } finally {
+                        setSavingDesc(false)
+                      }
+                    }}
+                    disabled={savingDesc}
+                    className="mt-1 text-xs px-2 py-0.5 rounded-full transition-colors disabled:opacity-50"
+                    style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                  >
+                    {savingDesc ? '⟳ Saving…' : 'Save'}
+                  </button>
+                )}
+                {descError && <span className="text-xs" style={{ color: '#f87171' }}>{descError}</span>}
+              </div>
+
+              {/* Text extraction section — only for images */}
+              {isImage && (
+                <div className="flex flex-col gap-2" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
+                  {/* Heading row */}
+                  <div className="flex items-center justify-between">
+                    <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                      Text Extraction
+                    </p>
+                    {/* AI button — forces LLM, no OCR */}
+                    <button
+                      onClick={() => callExtract('llm')}
                       disabled={extracting || extractPending}
-                    className="text-xs px-2 py-1 rounded-lg transition-colors disabled:opacity-50 self-start flex-shrink-0"
+                      className={`${smallBtn} disabled:opacity-50`}
                       style={{
                         backgroundColor: extractPending ? 'var(--accent)' : 'var(--border)',
                         color: extractPending ? '#fff' : 'var(--text-secondary)',
+                        fontSize: '1rem',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!extracting && !extractPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!extractPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                      }}
+                      aria-label="Extract text with AI"
+                      title="Extract with AI (skips OCR)"
+                    >
+                      {extractPending ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                    </button>
+                  </div>
+
+                  {/* OCR button row */}
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <button
+                      onClick={() => callExtract('tesseract')}
+                      disabled={extracting || extractPending}
+                      className="text-xs px-2 py-1 rounded-lg transition-colors disabled:opacity-50 self-start flex-shrink-0"
+                      style={{
+                        backgroundColor: 'var(--border)',
+                        color: 'var(--text-secondary)',
                       }}
                       onMouseEnter={(e) => {
                         if (!extracting && !extractPending) {
@@ -499,15 +519,12 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                         }
                       }}
                       onMouseLeave={(e) => {
-                      if (!extractPending) {
                         ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
                         ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                      }
                       }}
                     >
-                    {extracting ? '⟳ Extracting…' : extractPending ? '⟳ Queued…' : extractedText ? '🔍 Re-extract Text' : '🔍 Extract Text'}
+                      {extracting ? '⟳ Scanning…' : extractedText ? '🔍 Re-scan with OCR' : '🔍 Scan with OCR'}
                     </button>
-                  {ocrMode && ocrMode !== 'llm' && (
                     <input
                       type="text"
                       value={ocrLanguageInput}
@@ -522,7 +539,6 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                       }}
                       title="Tesseract language(s) for this extraction (e.g. jpn+jpn_vert). Leave blank to use the configured default."
                     />
-                  )}
                   </div>
 
                   {extractError && (
@@ -656,67 +672,40 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
 
               {/* Tags section */}
               <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-              <p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
+                <div className="flex items-center justify-between mb-3">
+                  <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
                     Tags
                   </p>
+                  {onAiTag && (
+                    <button
+                      onClick={handleAiTag}
+                      disabled={aiTagging}
+                      className={`${smallBtn} disabled:opacity-50`}
+                      style={{
+                        backgroundColor: aiTagError ? '#7f1d1d' : 'var(--border)',
+                        color: aiTagError ? '#fca5a5' : 'var(--text-secondary)',
+                        fontSize: '1rem',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                      }}
+                      aria-label="AI Tag this image"
+                      title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
+                    >
+                      {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                    </button>
+                  )}
+                </div>
+                {aiTagError && <p className="text-xs mb-2" style={{ color: '#f87171' }}>{aiTagError}</p>}
                 <TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} refreshKey={tagRefreshKey} hideDescription />
               </div>
             </div>
           </div>
-      ) : (
-        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full relative">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={url}
-            alt={name}
-            className="max-w-full max-h-full object-contain rounded-lg"
-            onClick={(e) => e.stopPropagation()}
-          />
-          {onPrev && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onPrev() }}
-              className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-              aria-label="Previous"
-            >
-              ‹
-            </button>
-          )}
-          {onNext && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onNext() }}
-              className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-              aria-label="Next"
-            >
-              ›
-            </button>
-          )}
-          {/* Text overlay */}
-          {showTextOverlay && displayText && (
-            <div
-              className="absolute bottom-4 left-4 right-4 z-10 rounded-xl p-4"
-              style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
-              onClick={(e) => e.stopPropagation()}
-            >
-              {extractedText && translatedText && (
-                <div className="flex justify-end mb-2">
-                  <button
-                    onClick={() => setShowOriginal((v) => !v)}
-                    className="text-xs px-2 py-0.5 rounded-full"
-                    style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }}
-                  >
-                    {showOriginal ? 'Show Translation' : 'Show Original'}
-                  </button>
-                </div>
-              )}
-              <p className="text-sm whitespace-pre-wrap" style={{ color: 'rgba(255,255,255,0.9)' }}>
-                {displayText}
-              </p>
-            </div>
         )}
       </div>
-      )}
     </div>
   )
 }

src/components/mixed/MixedView.tsx

@@ -27,6 +27,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [modal, setModal] = useState<ModalState>(null)
+  const [modalShowTags, setModalShowTags] = useState(false)
   const [tagPanel, setTagPanel] = useState<TagPanelState>(null)
   const [search, setSearch] = useState('')
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
@@ -469,6 +470,18 @@ export default function MixedView({ libraryId, initialPath }: Props) {
                     }
                   }}
                   onTranslate={async (e) => {
+                    if (e.type === 'directory') {
+                      const dirRel = filtersActive ? e.name : (currentPath ? `${currentPath}/${e.name}` : e.name)
+                      const res = await fetch('/api/ai-tagging/translate-bulk', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ libraryId, path: dirRel }),
+                      })
+                      if (!res.ok) {
+                        const data = await res.json().catch(() => ({}))
+                        throw new Error((data as { error?: string }).error ?? 'Translation failed')
+                      }
+                    } else {
                       const itemKey = itemKeyFor(e)
                       const res = await fetch('/api/ai-tagging/translate', {
                         method: 'POST',
@@ -479,6 +492,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
                         const data = await res.json().catch(() => ({}))
                         throw new Error((data as { error?: string }).error ?? 'Translation failed')
                       }
+                    }
                   }}
                   onDelete={(e) => {
                     const rel = filtersActive ? e.name : (currentPath ? `${currentPath}/${e.name}` : e.name)
@@ -520,9 +534,11 @@ export default function MixedView({ libraryId, initialPath }: Props) {
           name={modal.name}
           itemKey={modal.itemKey}
           onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
-          onClose={() => setModal(null)}
+          onClose={() => { setModal(null); setModalShowTags(false) }}
           onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
           onNext={modal.mediaIndex < mediaEntries.length - 1 ? () => navigateModal(1) : undefined}
+          showTags={modalShowTags}
+          onShowTagsChange={setModalShowTags}
           onAiTag={modal.itemKey ? async () => {
             const res = await fetch('/api/ai-tagging', {
               method: 'POST',
@@ -544,9 +560,11 @@ export default function MixedView({ libraryId, initialPath }: Props) {
           name={modal.name}
           itemKey={modal.itemKey}
           onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
-          onClose={() => setModal(null)}
+          onClose={() => { setModal(null); setModalShowTags(false) }}
           onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
           onNext={modal.mediaIndex < mediaEntries.length - 1 ? () => navigateModal(1) : undefined}
+          showTags={modalShowTags}
+          onShowTagsChange={setModalShowTags}
           onAiTag={async () => {
             const res = await fetch('/api/ai-tagging', {
               method: 'POST',
@@ -746,7 +764,7 @@ function EntryTile({ entry, onOpen, onTag, onDelete, onRename, onAiTag, onExtrac
       </button>
 
       {/* Kebab menu — bottom-right, shown on hover */}
-      {(onDelete || onRename || (onAiTag && entry.mediaType === 'image') || (onExtractText && entry.mediaType === 'image') || (onExtractText && entry.type === 'directory') || (onDescribe && (entry.mediaType === 'image' || entry.mediaType === 'video' || entry.type === 'directory'))) && (
+      {(onDelete || onRename || (onAiTag && entry.mediaType === 'image') || (onExtractText && entry.mediaType === 'image') || (onExtractText && entry.type === 'directory') || (onDescribe && (entry.mediaType === 'image' || entry.mediaType === 'video' || entry.type === 'directory')) || (onTranslate && (entry.mediaType === 'image' || entry.type === 'directory') && entry.hasExtractedText)) && (
         <div className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:block z-10" ref={menuRef}>
           <button
             onClick={(e) => { e.stopPropagation(); setMenuOpen((o) => !o); setConfirming(false); setAiTagError(null); setDescribeError(null) }}
@@ -917,7 +935,7 @@ function EntryTile({ entry, onOpen, onTag, onDelete, onRename, onAiTag, onExtrac
                   🔍 Extract Text for Folder
                 </button>
               )}
-              {onTranslate && entry.mediaType === 'image' && entry.hasExtractedText && (
+              {onTranslate && (entry.mediaType === 'image' || entry.type === 'directory') && entry.hasExtractedText && (
                 <button
                   onClick={(e) => {
                     e.stopPropagation()
@@ -934,7 +952,7 @@ function EntryTile({ entry, onOpen, onTag, onDelete, onRename, onAiTag, onExtrac
                   onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
                   onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                 >
-                  🌐 Translate
+                  {entry.type === 'directory' ? '🌐 Translate Folder' : '🌐 Translate'}
                 </button>
               )}
               {onRename && (

src/components/mixed/VideoPlayerModal.tsx

@@ -14,15 +14,20 @@ interface Props {
   onTagsChanged?: () => void
   onAiTag?: () => Promise<void>
   context?: 'mixed' | 'movies' | 'tv'
+  showTags?: boolean
+  onShowTagsChange?: (v: boolean) => void
 }
 
-export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag, context = 'mixed' }: Props) {
+export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag, context = 'mixed', showTags: showTagsProp, onShowTagsChange }: Props) {
   const settings = useUserSettings()
   const autoPlay = context === 'mixed' ? settings.mixedAutoplay : context === 'movies' ? settings.moviesAutoplay : settings.tvAutoplay
   const loop     = context === 'mixed' ? settings.mixedLoop     : context === 'movies' ? settings.moviesLoop     : settings.tvLoop
   const muted    = context === 'mixed' ? settings.mixedMuted    : context === 'movies' ? settings.moviesMuted    : settings.tvMuted
+
   const overlayRef = useRef<HTMLDivElement>(null)
-  const [showTags, setShowTags] = useState(false)
+  const [showTagsLocal, setShowTagsLocal] = useState(false)
+  const showTags = showTagsProp ?? showTagsLocal
+  const setShowTags = onShowTagsChange ?? setShowTagsLocal
   const [aiTagging, setAiTagging] = useState(false)
   const [aiTagError, setAiTagError] = useState<string | null>(null)
   const [tagRefreshKey, setTagRefreshKey] = useState(0)
@@ -45,39 +50,8 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
     if (e.target === overlayRef.current) onClose()
   }
 
-  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
+  const handleAiTag = async () => {
-
+    if (!onAiTag) return
-  return (
-    <div
-      ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
-      onClick={handleOverlayClick}
-    >
-      {/* Toolbar — collapses to just filename when tag panel is open */}
-      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
-        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
-          {name}
-        </span>
-        {!showTags && (
-          <div className="flex items-center gap-2 flex-shrink-0">
-            {itemKey && (
-              <button
-                onClick={(e) => { e.stopPropagation(); setShowTags(true) }}
-                className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-                aria-label="Show tags"
-                title="Tags"
-              >
-                🏷
-              </button>
-            )}
-            {onAiTag && (
-              <button
-                onClick={async (e) => {
-                  e.stopPropagation()
     setAiTagging(true)
     setAiTagError(null)
     try {
@@ -90,45 +64,58 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
     } finally {
       setAiTagging(false)
     }
-                }}
+  }
-                disabled={aiTagging}
+
-                className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors disabled:opacity-50"
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
-                style={{
+
-                  backgroundColor: aiTagError ? '#7f1d1d' : 'var(--surface)',
+  return (
-                  color: aiTagError ? '#fca5a5' : 'var(--text-primary)',
+    <div
-                }}
+      ref={overlayRef}
-                onMouseEnter={(e) => {
+      className="fixed inset-0 z-50 overflow-hidden"
-                  if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh' }}
-                }}
+      onClick={handleOverlayClick}
-                onMouseLeave={(e) => {
-                  if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
-                }}
-                aria-label="AI Tag this video"
-                title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
     >
-                {aiTagging ? (
+      {/* Outer flex — row on md+, col on mobile when panel open */}
-                  <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span>
+      <div className={`flex h-full w-full ${showTags ? 'flex-col md:flex-row' : 'flex-row'}`}>
-                ) : '✨'}
+
+        {/* ── Video column ── */}
+        <div className="flex flex-col flex-1 min-h-0 min-w-0 relative">
+
+          {/* Toolbar — scoped to this column's width */}
+          <div className="flex items-center justify-between px-3 py-2 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
+            <span className="text-sm truncate mr-2" style={{ color: 'var(--text-secondary)' }}>
+              {name}
+            </span>
+            <div className="flex items-center gap-1.5 flex-shrink-0">
+              {itemKey && !showTags && (
+                <button
+                  onClick={() => setShowTags(true)}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                  aria-label="Show tags"
+                  title="Tags"
+                >
+                  🏷
                 </button>
               )}
               <button
                 onClick={onClose}
-              className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 transition-colors"
+                className={smallBtn}
                 style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
                 onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
                 onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
                 aria-label="Close"
+                title="Close"
               >
                 ✕
               </button>
             </div>
-        )}
           </div>
 
-      {showTags ? (
+          {/* Video area — single element, never remounts on panel toggle */}
-        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden">
+          <div className="relative flex-1 min-h-0" onClick={(e) => e.stopPropagation()}>
-          {/* Video */}
-          <div className="flex-1 min-w-0 min-h-0 flex items-center justify-center max-h-full relative">
             <video
               key={url}
               src={url}
@@ -136,14 +123,18 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
               autoPlay={autoPlay}
               muted={muted}
               loop={loop}
-              className="w-full h-full object-contain rounded-lg"
+              playsInline
+              className="w-full h-full object-contain"
               style={{ backgroundColor: '#000' }}
-              onClick={(e) => e.stopPropagation()}
             />
+          </div>
+
+          {/* Prev/Next — positioned relative to the full column height (incl. toolbar)
+              so they align with ImageLightbox's buttons which span the full viewport */}
           {onPrev && (
             <button
               onClick={(e) => { e.stopPropagation(); onPrev() }}
-                className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
               style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
               aria-label="Previous"
             >
@@ -153,7 +144,7 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
           {onNext && (
             <button
               onClick={(e) => { e.stopPropagation(); onNext() }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
               style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
               aria-label="Next"
             >
@@ -162,14 +153,15 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
           )}
         </div>
 
-          {/* Tag panel */}
+        {/* ── Tag panel ── bottom half on mobile, right sidebar on desktop */}
+        {showTags && (
           <div
-            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4 flex flex-col gap-4"
+            className="flex-shrink-0 flex flex-col overflow-hidden w-full max-h-[50vh] md:w-80 md:max-h-none md:h-full"
             style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
             onClick={(e) => e.stopPropagation()}
           >
-            {/* Panel header — hide panel + AI tagger + close */}
+            {/* Panel header — ‹ hide  |  ✕ close */}
-            <div className="flex items-center justify-between flex-shrink-0">
+            <div className="flex items-center justify-between p-4 flex-shrink-0">
               <button
                 onClick={() => setShowTags(false)}
                 className={smallBtn}
@@ -182,23 +174,29 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
                 ›
               </button>
               <div className="flex items-center gap-1.5">
+                <button
+                  onClick={onClose}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+                  aria-label="Close"
+                  title="Close"
+                >
+                  ✕
+                </button>
+              </div>
+            </div>
+
+            {/* Tags */}
+            <div className="overflow-y-auto flex-1 min-h-0 px-4 pb-4" style={{ borderTop: '1px solid var(--border)' }}>
+              <div className="flex items-center justify-between mt-4 mb-3">
+                <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                  Tags
+                </p>
                 {onAiTag && (
                   <button
-                    onClick={async (e) => {
+                    onClick={handleAiTag}
-                      e.stopPropagation()
-                      setAiTagging(true)
-                      setAiTagError(null)
-                      try {
-                        await onAiTag()
-                        setTagRefreshKey((k) => k + 1)
-                        onTagsChanged?.()
-                      } catch (err) {
-                        setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                        setTimeout(() => setAiTagError(null), 4000)
-                      } finally {
-                        setAiTagging(false)
-                      }
-                    }}
                     disabled={aiTagging}
                     className={`${smallBtn} disabled:opacity-50`}
                     style={{
@@ -218,64 +216,13 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
                     {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
                   </button>
                 )}
-                <button
-                  onClick={onClose}
-                  className={smallBtn}
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                  aria-label="Close"
-                  title="Close"
-                >
-                  ✕
-                </button>
               </div>
-            </div>
+              {aiTagError && <p className="text-xs mb-2" style={{ color: '#f87171' }}>{aiTagError}</p>}
-
-            {/* Tags section */}
-            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-              <p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
-                Tags
-              </p>
               <TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} refreshKey={tagRefreshKey} />
             </div>
           </div>
-        </div>
-      ) : (
-        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full relative">
-          <video
-            key={url}
-            src={url}
-            controls
-            autoPlay={autoPlay}
-            muted={muted}
-            loop={loop}
-            className="w-full h-full max-w-4xl object-contain rounded-lg"
-            style={{ backgroundColor: '#000' }}
-            onClick={(e) => e.stopPropagation()}
-          />
-          {onPrev && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onPrev() }}
-              className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-              aria-label="Previous"
-            >
-              ‹
-            </button>
-          )}
-          {onNext && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onNext() }}
-              className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-              aria-label="Next"
-            >
-              ›
-            </button>
         )}
       </div>
-      )}
     </div>
   )
 }

src/lib/ai-jobs.ts

@@ -269,7 +269,7 @@ async function processNextJob(): Promise<boolean> {
         await generateItemDescription(row.item_key)
         break
       case 'extract':
-        await extractItemText(row.item_key, jobPayload?.ocrLanguages)
+        await extractItemText(row.item_key, jobPayload?.ocrLanguages, jobPayload?.ocrMode)
         break
       case 'translate':
         await translateItemText(row.item_key, sourceLanguage || undefined)

src/lib/ai-tagger.ts

@@ -538,7 +538,7 @@ async function extractWithTesseract(
  * Translation is not performed automatically — call translateItemText() separately.
  * Returns { extractedText, translatedText } where translatedText is always null.
  */
-export async function extractItemText(itemKey: string, ocrLanguagesOverride?: string): Promise<{ extractedText: string; translatedText: string | null }> {
+export async function extractItemText(itemKey: string, ocrLanguagesOverride?: string, ocrModeOverride?: string): Promise<{ extractedText: string; translatedText: string | null }> {
   const libraryId = itemKey.split(':')[0]
   const config = getEffectiveAiConfig(libraryId)
 
@@ -567,7 +567,8 @@ export async function extractItemText(itemKey: string, ocrLanguagesOverride?: st
     throw Object.assign(new Error('Text extraction is only available for images'), { code: 'NO_IMAGE' })
   }
 
-  const { ocrMode, ocrLanguages: configOcrLanguages, ocrConfidenceThreshold } = config
+  const { ocrMode: configOcrMode, ocrLanguages: configOcrLanguages, ocrConfidenceThreshold } = config
+  const ocrMode = ocrModeOverride ?? configOcrMode
   const ocrLanguages = ocrLanguagesOverride?.trim() || configOcrLanguages
 
   // ── Tesseract path ────────────────────────────────────────────────────────
@@ -655,6 +656,14 @@ export function updateExtractedText(itemKey: string, text: string): void {
   db.prepare('UPDATE media_items SET extracted_text = ? WHERE item_key = ?').run(text, itemKey)
 }
 
+/**
+ * Update the ai_description of an item.
+ */
+export function updateAiDescription(itemKey: string, description: string): void {
+  const db = getDb()
+  db.prepare('UPDATE media_items SET ai_description = ? WHERE item_key = ?').run(description, itemKey)
+}
+
 /**
  * Translate text to a target language using the chat API.
  * Returns null if the text is already in the target language.