add individual library scanning

src/components/ScanLibraryButton.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react'
+
+interface Props {
+  libraryId: string
+}
+
+export default function ScanLibraryButton({ libraryId }: Props) {
+  const [scanning, setScanning] = useState(false)
+  const [message, setMessage] = useState<string | null>(null)
+
+  const handleScan = async () => {
+    setScanning(true)
+    setMessage(null)
+
+    try {
+      const res = await fetch(`/api/scan/${encodeURIComponent(libraryId)}`, { method: 'POST' })
+
+      if (res.status === 409) {
+        setMessage('A scan is already in progress.')
+      }
+    } catch {
+      setMessage('Failed to start scan.')
+    } finally {
+      setScanning(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        onClick={handleScan}
+        disabled={scanning}
+        className="text-sm px-3 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+        style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+        onMouseEnter={(e) => {
+          if (!scanning) (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
+        }}
+        onMouseLeave={(e) => {
+          ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+        }}
+      >
+        {scanning ? 'Scanning…' : 'Scan'}
+      </button>
+      {message && (
+        <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+          {message}
+        </span>
+      )}
+    </div>
+  )
+}