add rescan button

frontend/src/components/FileBrowser/FileBrowser.tsx

@@ -8,9 +8,11 @@ interface Props {
 }
 
 export default function FileBrowser({ libraryId }: Props) {
-  const [currentPath, setCurrentPath] = useState("");
+  const [libraryPaths, setLibraryPaths] = useState<Record<number, string>>({});
   const [viewingId, setViewingId] = useState<number | null>(null);
 
+  const currentPath = libraryPaths[libraryId] ?? "";
+
   const { data, isLoading } = useQuery<BrowseResult>({
     queryKey: ["browse", libraryId, currentPath],
     queryFn: () => api.libraries.browse(libraryId, currentPath),
@@ -19,7 +21,7 @@ export default function FileBrowser({ libraryId }: Props) {
   const pathParts = currentPath ? currentPath.split("/").filter(Boolean) : [];
 
   function navigate(relPath: string) {
-    setCurrentPath(relPath);
+    setLibraryPaths((prev) => ({ ...prev, [libraryId]: relPath }));
     setViewingId(null);
   }
 

frontend/src/components/TagPanel/TagPanel.tsx

@@ -17,6 +17,9 @@ export default function TagPanel({ item }: Props) {
 
   const [newName, setNewName] = useState("");
   const [newCategory, setNewCategory] = useState("");
+  const [quickAddCategory, setQuickAddCategory] = useState<string | null>(null);
+  const [quickAddName, setQuickAddName] = useState("");
+  const [categorySearch, setCategorySearch] = useState<Record<string, string>>({});
 
   const setTagsMutation = useMutation({
     mutationFn: (ids: number[]) => api.media.setTags(item.id, ids),
@@ -24,12 +27,15 @@ export default function TagPanel({ item }: Props) {
   });
 
   const createTagMutation = useMutation({
-    mutationFn: () => api.tags.create(newName.trim(), newCategory.trim()),
+    mutationFn: ({ name, category }: { name: string; category: string }) =>
+      api.tags.create(name.trim(), category.trim()),
     onSuccess: (tag: Tag) => {
       qc.invalidateQueries({ queryKey: ["tags"] });
       setTagsMutation.mutate([...assignedIds, tag.id]);
       setNewName("");
       setNewCategory("");
+      setQuickAddCategory(null);
+      setQuickAddName("");
     },
   });
 
@@ -40,53 +46,130 @@ export default function TagPanel({ item }: Props) {
     setTagsMutation.mutate(next);
   }
 
+  function toggleQuickAdd(category: string) {
+    if (quickAddCategory === category) {
+      setQuickAddCategory(null);
+      setQuickAddName("");
+    } else {
+      setQuickAddCategory(category);
+      setQuickAddName("");
+    }
+  }
+
   return (
     <div style={{ minWidth: 220 }}>
       <h3 style={{ margin: "0 0 12px", color: "var(--text)" }}>Tags</h3>
 
-      {grouped.map((group) => (
-        <div key={group.category} style={{ marginBottom: 12 }}>
-          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 4 }}>
-            {group.category}
-          </div>
-          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
-            {group.tags.map((tag) => (
+      {grouped.map((group) => {
+        const search = categorySearch[group.category] ?? "";
+        const visibleTags = search
+          ? group.tags.filter((t) => t.name.toLowerCase().includes(search.toLowerCase()))
+          : group.tags;
+
+        return (
+          <div key={group.category} style={{ marginBottom: 16 }}>
+            {/* Category header row */}
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
+              <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "var(--text-muted)" }}>
+                {group.category}
+              </span>
               <button
-                key={tag.id}
-                onClick={() => toggle(tag.id)}
+                onClick={() => toggleQuickAdd(group.category)}
+                title={`Add tag to ${group.category}`}
                 style={{
-                  padding: "3px 10px",
-                  borderRadius: 12,
-                  border: "1px solid",
+                  background: quickAddCategory === group.category ? "var(--accent)" : "transparent",
+                  color: quickAddCategory === group.category ? "#fff" : "var(--text-muted)",
+                  border: "1px solid var(--border)",
+                  borderRadius: 4,
+                  padding: "1px 7px",
+                  fontSize: 16,
+                  lineHeight: 1,
                   cursor: "pointer",
-                  background: assignedIds.has(tag.id) ? "var(--accent)" : "transparent",
-                  color: assignedIds.has(tag.id) ? "#fff" : "var(--text)",
-                  borderColor: assignedIds.has(tag.id) ? "var(--accent)" : "var(--border)",
-                  fontSize: 13,
                 }}
               >
-                {tag.name}
+                +
               </button>
-            ))}
-          </div>
-        </div>
-      ))}
+            </div>
 
-      <details style={{ marginTop: 16 }}>
+            {/* Per-category search */}
+            <input
+              placeholder={`Search ${group.category.toLowerCase()}…`}
+              value={search}
+              onChange={(e) =>
+                setCategorySearch((prev) => ({ ...prev, [group.category]: e.target.value }))
+              }
+              style={{ marginBottom: 6, fontSize: 12, padding: "3px 8px" }}
+            />
+
+            {/* Tag chips */}
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+              {visibleTags.map((tag) => (
+                <button
+                  key={tag.id}
+                  onClick={() => toggle(tag.id)}
+                  style={{
+                    padding: "3px 10px",
+                    borderRadius: 12,
+                    border: "1px solid",
+                    cursor: "pointer",
+                    background: assignedIds.has(tag.id) ? "var(--accent)" : "transparent",
+                    color: assignedIds.has(tag.id) ? "#fff" : "var(--text)",
+                    borderColor: assignedIds.has(tag.id) ? "var(--accent)" : "var(--border)",
+                    fontSize: 13,
+                  }}
+                >
+                  {tag.name}
+                </button>
+              ))}
+              {search && visibleTags.length === 0 && (
+                <span style={{ fontSize: 12, color: "var(--text-muted)" }}>No matches</span>
+              )}
+            </div>
+
+            {/* Inline quick-add form */}
+            {quickAddCategory === group.category && (
+              <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
+                <input
+                  placeholder="Tag name"
+                  value={quickAddName}
+                  onChange={(e) => setQuickAddName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && quickAddName.trim()) {
+                      createTagMutation.mutate({ name: quickAddName, category: group.category });
+                    }
+                  }}
+                  autoFocus
+                  style={{ flex: 1, fontSize: 12, padding: "3px 8px" }}
+                />
+                <button
+                  onClick={() => createTagMutation.mutate({ name: quickAddName, category: group.category })}
+                  disabled={!quickAddName.trim() || createTagMutation.isPending}
+                  style={{ background: "var(--accent)", color: "#fff", border: "none", padding: "3px 10px", borderRadius: 4, fontSize: 12 }}
+                >
+                  Add
+                </button>
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      {/* Global new-tag form */}
+      <details style={{ marginTop: 8 }}>
         <summary style={{ cursor: "pointer", fontSize: 13, color: "var(--accent-text)" }}>+ New tag</summary>
         <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 8 }}>
-          <input
-            placeholder="Tag name"
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-          />
           <input
             placeholder="Category"
             value={newCategory}
             onChange={(e) => setNewCategory(e.target.value)}
           />
+          <input
+            placeholder="Tag name"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+          />
           <button
-            onClick={() => createTagMutation.mutate()}
+            onClick={() => createTagMutation.mutate({ name: newName, category: newCategory })}
             disabled={!newName.trim() || !newCategory.trim() || createTagMutation.isPending}
           >
             Create & assign