add extract text button to doom scroll mode

Show an extract-text button (document icon) in the bottom bar when the
current image has no extracted text yet. Clicking it calls the extract-text
API, shows a spinner while in progress, and on success replaces itself with
the text-lines display button and auto-opens the overlay. Error state briefly
turns the button red. Resets on every item navigation alongside the other
text state. Hidden for videos and items without an itemKey.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/DoomScrollView.tsx

@@ -46,6 +46,8 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
   const [translatedText, setTranslatedText] = useState<string | null>(null)
   const [showTextOverlay, setShowTextOverlay] = useState(false)
   const [showOriginal, setShowOriginal] = useState(false)
+  const [extracting, setExtracting] = useState(false)
+  const [extractError, setExtractError] = useState<string | null>(null)
 
   const videoRef = useRef<HTMLVideoElement>(null)
   const cooldownRef = useRef(false)
@@ -130,6 +132,8 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
     setTranslatedText(null)
     setShowTextOverlay(false)
     setShowOriginal(false)
+    setExtracting(false)
+    setExtractError(null)
     if (!current?.itemKey) return
     fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(current.itemKey)}`)
       .then((r) => r.json())
@@ -178,6 +182,32 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
     }
   }, [navigate, onClose, extractedText])
 
+  const handleExtractText = async () => {
+    if (!current?.itemKey) return
+    setExtracting(true)
+    setExtractError(null)
+    try {
+      const res = await fetch('/api/ai-tagging/extract-text', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ itemKey: current.itemKey }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error((data as { error?: string }).error ?? 'Extraction failed')
+      }
+      const result = await res.json()
+      setExtractedText(result.extractedText || null)
+      setTranslatedText(result.translatedText || null)
+      if (result.extractedText) setShowTextOverlay(true)
+    } catch (err) {
+      setExtractError(err instanceof Error ? err.message : 'Extraction failed')
+      setTimeout(() => setExtractError(null), 4000)
+    } finally {
+      setExtracting(false)
+    }
+  }
+
   return (
     <div className="fixed inset-0 z-50 flex flex-col" style={{ backgroundColor: '#000' }}>
       {/* Keyframe for auto-play progress bar */}
@@ -317,7 +347,7 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
           {current?.name}
         </span>
         <div className="flex-shrink-0 flex items-center gap-1">
-          {extractedText && (
+          {extractedText ? (
             <button
               onClick={() => setShowTextOverlay((v) => !v)}
               className="w-9 h-9 rounded-full flex items-center justify-center transition-opacity hover:opacity-100 opacity-70"
@@ -333,7 +363,30 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
                 <line x1="3" y1="18" x2="18" y2="18"/>
               </svg>
             </button>
+          ) : current?.itemKey && current?.mediaType === 'image' ? (
+            <button
+              onClick={handleExtractText}
+              disabled={extracting}
+              className="w-9 h-9 rounded-full flex items-center justify-center transition-opacity hover:opacity-100 opacity-70 disabled:opacity-40"
+              style={{
+                backgroundColor: extractError ? 'rgba(127,29,29,0.8)' : 'rgba(0,0,0,0.5)',
+                color: extractError ? '#fca5a5' : '#fff',
+              }}
+              aria-label="Extract text"
+            >
+              {extracting ? (
+                <span className="animate-spin" style={{ display: 'inline-block', fontSize: '0.75rem' }}>⟳</span>
+              ) : (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                  <polyline points="14 2 14 8 20 8"/>
+                  <line x1="16" y1="13" x2="8" y2="13"/>
+                  <line x1="16" y1="17" x2="8" y2="17"/>
+                  <polyline points="10 9 9 9 8 9"/>
+                </svg>
               )}
+            </button>
+          ) : null}
           {onViewInLibrary && current?.itemKey && (
             <button
               onClick={(e) => { e.stopPropagation(); onViewInLibrary(current) }}