Merge pull request 'ui-cleanup' (#1 ) from ui-cleanup into main

Reviewed-on: http://gitea.lan/gpatti/MediaLore-Web-App/pulls/1
media viewer visual update
2026-05-16 19:46:16 +00:00 · 2026-05-16 15:32:29 -04:00 · 2026-05-16 15:13:56 -04:00 · 2026-05-16 14:39:00 -04:00
7 changed files with 245 additions and 100 deletions
--- a/backend/app/routers/libraries.py
+++ b/backend/app/routers/libraries.py
@@ -47,6 +47,22 @@ async def get_scan_status(library_id: int):
    return {"scanning": scanner.is_scanning(library_id)}


+@router.post("/{library_id}/rescan")
+async def rescan_library(
+    library_id: int,
+    background_tasks: BackgroundTasks,
+    db: AsyncSession = Depends(get_db),
+):
+    result = await db.execute(select(Library).where(Library.id == library_id))
+    lib = result.scalars().first()
+    if not lib:
+        raise HTTPException(404, "Library not found")
+    if scanner.is_scanning(library_id):
+        raise HTTPException(409, "Scan already in progress")
+    background_tasks.add_task(scanner.scan_library_background, lib.id, lib.path)
+    return {"scanning": True}
+
+
@router.delete("/{library_id}", status_code=204)
 async def delete_library(library_id: int, db: AsyncSession = Depends(get_db)):
    result = await db.execute(select(Library).where(Library.id == library_id))
@@ -88,7 +104,7 @@ async def browse_library(library_id: int, path: str = "", db: AsyncSession = Dep

    entries: list[BrowseEntry] = []

-    for entry in sorted(target.iterdir(), key=lambda e: (e.is_file(), e.name.lower())):
+    for entry in sorted((e for e in target.iterdir() if not e.name.startswith(".")), key=lambda e: (e.is_file(), e.name.lower())):
        rel_entry = str(entry.relative_to(root))
        if entry.is_dir():
            entries.append(BrowseEntry(name=entry.name, type="dir", rel_path=rel_entry))
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -69,6 +69,8 @@ export const api = {
      request<BrowseResult>(`/libraries/${id}/browse?path=${encodeURIComponent(path)}`),
    scanStatus: (id: number) =>
      request<{ scanning: boolean }>(`/libraries/${id}/scan-status`),
+    rescan: (id: number) =>
+      request<{ scanning: boolean }>(`/libraries/${id}/rescan`, { method: "POST" }),
  },

  media: {
--- a/frontend/src/components/FileBrowser/FileBrowser.tsx
+++ b/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);
  }

--- a/frontend/src/components/MediaViewer/MediaViewer.tsx
+++ b/frontend/src/components/MediaViewer/MediaViewer.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { api, type BrowseEntry, type MediaItem } from "../../api/client";
 import TagPanel from "../TagPanel/TagPanel";
@@ -11,6 +11,8 @@ interface Props {
 }

 export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
+  const [showTags, setShowTags] = useState(true);
+
  const { data: item } = useQuery<MediaItem>({
    queryKey: ["media", mediaId],
    queryFn: () => api.media.get(mediaId),
@@ -32,31 +34,36 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
  }, [prevId, nextId, onClose, onNavigate]);

  return (
+    <>
+      {/* Backdrop */}
      <div
        onClick={onClose}
-      style={{
-        position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
-        display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100,
-      }}
-    >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        style={{
-          display: "flex", gap: 16, background: "#1a1a1a", borderRadius: 8,
-          padding: 16, maxWidth: "95vw", maxHeight: "95vh", overflow: "auto",
-        }}
-      >
+        style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 100 }}
+      />
+
      {/* Prev */}
      <button
        onClick={() => prevId && onNavigate(prevId)}
        disabled={!prevId}
-          style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
+        style={{ position: "fixed", left: 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
      >
        ‹
      </button>

-        {/* Media */}
-        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
+      {/* Next */}
+      <button
+        onClick={() => nextId && onNavigate(nextId)}
+        disabled={!nextId}
+        style={{ position: "fixed", right: showTags ? 276 : 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
+      >
+        ›
+      </button>
+
+      {/* Media card */}
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 101, background: "#1a1a1a", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, maxWidth: "80vw", maxHeight: "90vh", overflow: "auto" }}
+      >
        {item?.filename && (
          <div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
        )}
@@ -64,42 +71,43 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
          <img
            src={api.media.fileUrl(mediaId)}
            alt={item.filename}
-              style={{ maxWidth: "70vw", maxHeight: "80vh", objectFit: "contain" }}
+            style={{ maxWidth: "70vw", maxHeight: "82vh", objectFit: "contain" }}
          />
        )}
        {item?.media_type === "video" && (
          <video
            src={api.media.fileUrl(mediaId)}
            controls
-              style={{ maxWidth: "70vw", maxHeight: "80vh" }}
+            style={{ maxWidth: "70vw", maxHeight: "82vh" }}
          />
        )}
      </div>

-        {/* Next */}
+      {/* Top-right controls */}
+      <div style={{ position: "fixed", top: 16, right: 16, zIndex: 103, display: "flex", gap: 8 }}>
        <button
-          onClick={() => nextId && onNavigate(nextId)}
-          disabled={!nextId}
-          style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
+          onClick={() => setShowTags((v) => !v)}
+          style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
        >
-          ›
+          ☰
        </button>
-
-        {/* Tag panel */}
-        {item && (
-          <div style={{ color: "#fff", borderLeft: "1px solid #333", paddingLeft: 16, minWidth: 200 }}>
-            <TagPanel item={item} />
-          </div>
-        )}
-
-        {/* Close */}
        <button
          onClick={onClose}
-          style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
+          style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
        >
          ✕
        </button>
      </div>
+
+      {/* Tag panel */}
+      {showTags && item && (
+        <div
+          onClick={(e) => e.stopPropagation()}
+          style={{ position: "fixed", top: 0, right: 0, height: "100%", width: 260, background: "#1a1a1a", borderLeft: "1px solid #333", padding: "48px 16px 16px", zIndex: 101, overflowY: "auto" }}
+        >
+          <TagPanel item={item} />
        </div>
+      )}
+    </>
  );
 }
--- a/frontend/src/components/TagPanel/TagPanel.tsx
+++ b/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,17 +46,64 @@ 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 }}>
+      {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
+                onClick={() => toggleQuickAdd(group.category)}
+                title={`Add tag to ${group.category}`}
+                style={{
+                  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",
+                }}
+              >
+                +
+              </button>
            </div>
+
+            {/* 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 }}>
-            {group.tags.map((tag) => (
+              {visibleTags.map((tag) => (
                <button
                  key={tag.id}
                  onClick={() => toggle(tag.id)}
@@ -68,25 +121,55 @@ export default function TagPanel({ item }: Props) {
                  {tag.name}
                </button>
              ))}
+              {search && visibleTags.length === 0 && (
+                <span style={{ fontSize: 12, color: "var(--text-muted)" }}>No matches</span>
+              )}
            </div>
-        </div>
-      ))}

-      <details style={{ marginTop: 16 }}>
-        <summary style={{ cursor: "pointer", fontSize: 13, color: "var(--accent-text)" }}>+ New tag</summary>
-        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 8 }}>
+            {/* Inline quick-add form */}
+            {quickAddCategory === group.category && (
+              <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
                <input
                  placeholder="Tag name"
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
+                  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="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
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -1,11 +1,13 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { api, type MediaItem, type TagsByCategory } from "../api/client";
+import { api, type MediaItem, type TagsByCategory, type BrowseEntry } from "../api/client";
+import MediaViewer from "../components/MediaViewer/MediaViewer";

 export default function SearchPage() {
  const [q, setQ] = useState("");
  const [selectedTags, setSelectedTags] = useState<number[]>([]);
  const [submitted, setSubmitted] = useState(false);
+  const [viewingId, setViewingId] = useState<number | null>(null);

  const { data: grouped = [] } = useQuery<TagsByCategory[]>({
    queryKey: ["tags"],
@@ -78,7 +80,7 @@ export default function SearchPage() {

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 12 }}>
        {results.map((item) => (
-          <div key={item.id} style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", background: "var(--bg-card)" }}>
+          <div key={item.id} onClick={() => setViewingId(item.id)} style={{ border: "1px solid var(--border)", borderRadius: 6, overflow: "hidden", background: "var(--bg-card)", cursor: "pointer" }}>
            <img
              src={api.media.thumbnailUrl(item.id)}
              alt={item.filename}
@@ -104,6 +106,23 @@ export default function SearchPage() {
      {submitted && !isFetching && results.length === 0 && (
        <p style={{ color: "var(--text-secondary)" }}>No results found.</p>
      )}
+
+      {viewingId !== null && (() => {
+        const siblings: BrowseEntry[] = results.map((item) => ({
+          name: item.filename,
+          type: item.media_type,
+          rel_path: item.rel_path,
+          media_item_id: item.id,
+        }));
+        return (
+          <MediaViewer
+            mediaId={viewingId}
+            siblings={siblings}
+            onClose={() => setViewingId(null)}
+            onNavigate={(id) => setViewingId(id)}
+          />
+        );
+      })()}
    </div>
  );
 }
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -3,6 +3,7 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api, type Library } from "../api/client";

 function LibraryRow({ lib, onRemove }: { lib: Library; onRemove: (id: number) => void }) {
+  const qc = useQueryClient();
  const { data } = useQuery({
    queryKey: ["scan-status", lib.id],
    queryFn: () => api.libraries.scanStatus(lib.id),
@@ -11,6 +12,11 @@ function LibraryRow({ lib, onRemove }: { lib: Library; onRemove: (id: number) =>

  const scanning = data?.scanning ?? false;

+  const rescanMutation = useMutation({
+    mutationFn: () => api.libraries.rescan(lib.id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["scan-status", lib.id] }),
+  });
+
  return (
    <li style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--border-subtle)" }}>
      <div>
@@ -22,6 +28,14 @@ function LibraryRow({ lib, onRemove }: { lib: Library; onRemove: (id: number) =>
        )}
        <div style={{ fontSize: 12, color: "var(--text-secondary)" }}>{lib.path}</div>
      </div>
+      <div style={{ display: "flex", gap: 8 }}>
+        <button
+          onClick={() => rescanMutation.mutate()}
+          disabled={scanning}
+          style={{ color: scanning ? "var(--text-muted)" : "var(--accent)", background: "transparent", border: "none" }}
+        >
+          Rescan
+        </button>
        <button
          onClick={() => onRemove(lib.id)}
          disabled={scanning}
@@ -29,6 +43,7 @@ function LibraryRow({ lib, onRemove }: { lib: Library; onRemove: (id: number) =>
        >
          Remove
        </button>
+      </div>
    </li>
  );
 }
Author	SHA1	Message	Date
gpatti	8ada8af62f	Merge pull request 'ui-cleanup' (#1 ) from ui-cleanup into main Reviewed-on: http://gitea.lan/gpatti/MediaLore-Web-App/pulls/1	2026-05-16 19:46:16 +00:00
Garret Patti	b8eab67a93	media viewer visual update	2026-05-16 15:32:29 -04:00
Garret Patti	5c766f042c	search navigation	2026-05-16 15:13:56 -04:00
Garret Patti	b243266ad3	add rescan button	2026-05-16 14:39:00 -04:00