add tagging system for media items

Introduces user-defined tag categories and tags with a many-to-many
relationship to media items. Tags are stored in a SQLite database
(medialore.db via better-sqlite3) with ON DELETE CASCADE for automatic
cleanup. Users can manage categories and tags at /manage/tags, assign
tags to games in the detail modal, and tag mixed media files via a
hover button on each tile.

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

src/components/mixed/MixedView.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback, useRef } from 'react'
 import type { DirectoryListing, FileEntry } from '@/types'
 import VideoPlayerModal from './VideoPlayerModal'
 import ImageLightbox from './ImageLightbox'
+import TagSelector from '@/components/tags/TagSelector'
 
 interface Props {
   libraryId: string
@@ -15,12 +16,15 @@ type ModalState =
   | { type: 'image'; url: string; name: string }
   | null
 
+type TagPanelState = { entry: FileEntry; mediaKey: string } | null
+
 export default function MixedView({ libraryId, initialPath }: Props) {
   const [currentPath, setCurrentPath] = useState(initialPath)
   const [listing, setListing] = useState<DirectoryListing | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [modal, setModal] = useState<ModalState>(null)
+  const [tagPanel, setTagPanel] = useState<TagPanelState>(null)
 
   const loadPath = useCallback(
     (path: string) => {
@@ -64,6 +68,12 @@ export default function MixedView({ libraryId, initialPath }: Props) {
     }
   }
 
+  const handleTagEntry = (entry: FileEntry) => {
+    const relativePath = currentPath ? `${currentPath}/${entry.name}` : entry.name
+    const mediaKey = `${libraryId}:${encodeURIComponent(relativePath)}`
+    setTagPanel({ entry, mediaKey })
+  }
+
   const navigateUp = () => {
     const parts = currentPath.split('/').filter(Boolean)
     parts.pop()
@@ -136,7 +146,7 @@ export default function MixedView({ libraryId, initialPath }: Props) {
                 </button>
               )}
               {listing.entries.map((entry) => (
-                <EntryTile key={entry.name} entry={entry} onOpen={handleEntry} />
+                <EntryTile key={entry.name} entry={entry} onOpen={handleEntry} onTag={handleTagEntry} />
               ))}
             </div>
           )}
@@ -149,11 +159,49 @@ export default function MixedView({ libraryId, initialPath }: Props) {
       {modal?.type === 'image' && (
         <ImageLightbox url={modal.url} name={modal.name} onClose={() => setModal(null)} />
       )}
+
+      {/* Tag panel */}
+      {tagPanel && (
+        <div
+          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
+          style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
+          onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
+        >
+          <div
+            className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+          >
+            <div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
+              <div className="min-w-0">
+                <p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
+                  Tags
+                </p>
+                <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
+                  {tagPanel.entry.name}
+                </p>
+              </div>
+              <button
+                onClick={() => setTagPanel(null)}
+                className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                aria-label="Close"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="px-5 py-4">
+              <TagSelector mediaKey={tagPanel.mediaKey} />
+            </div>
+          </div>
+        </div>
+      )}
     </>
   )
 }
 
-function EntryTile({ entry, onOpen }: { entry: FileEntry; onOpen: (e: FileEntry) => void }) {
+function EntryTile({ entry, onOpen, onTag }: { entry: FileEntry; onOpen: (e: FileEntry) => void; onTag: (e: FileEntry) => void }) {
   type ImgState = 'loading' | 'loaded' | 'error'
   const [imgState, setImgState] = useState<ImgState>(
     entry.thumbnailUrl ? 'loading' : 'error'
@@ -244,6 +292,17 @@ function EntryTile({ entry, onOpen }: { entry: FileEntry; onOpen: (e: FileEntry)
           ▶
         </div>
       )}
+
+      {/* Tag button — top-left, shown on hover */}
+      <button
+        onClick={(e) => { e.stopPropagation(); onTag(entry) }}
+        className="absolute top-2 left-2 w-6 h-6 rounded-full items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:flex"
+        style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
+        aria-label={`Tag ${entry.name}`}
+        title="Tags"
+      >
+        🏷
+      </button>
     </button>
   )
 }