= {};
- for (const tag of tagsToMeasure) {
- const element = buttonRefs.current.get(tag);
- if (!element) continue;
- const rect = element.getBoundingClientRect();
- nextAnchors[tag] = {
- x: rect.left - canvasRect.left + rect.width / 2,
- y: rect.top - canvasRect.top + rect.height / 2,
- };
- }
- setAnchors(nextAnchors);
- }, [activeTag, visibleConnections]);
-
- useLayoutEffect(() => {
- if (!activeTag) {
- setAnchors({});
- return;
- }
-
- let firstFrame = 0;
- let secondFrame = 0;
- const settleTimer = window.setTimeout(measureAnchors, 180);
- firstFrame = window.requestAnimationFrame(() => {
- measureAnchors();
- secondFrame = window.requestAnimationFrame(measureAnchors);
- });
- return () => {
- window.cancelAnimationFrame(firstFrame);
- window.cancelAnimationFrame(secondFrame);
- window.clearTimeout(settleTimer);
- };
- }, [activeTag, canvasSize.w, canvasSize.h, measureAnchors]);
-
- return (
-
-
- {nodes.map((node) => {
- const isActive = activeTag === node.entry.tag;
- const connectedRelated = connectedByTag.get(node.entry.tag);
- const isRelated = connectedRelated !== undefined;
- const dimmed = activeTag !== null && !isActive && !isRelated;
- const opacity = dimmed ? 0.2 : minOpacity + node.ratio * (1 - minOpacity);
- return (
-
-
-
- );
- })}
-
- );
-}
-
-function Spinner() {
- return (
-
- );
-}
-
-function ExploreLoadingPanel({ mode }: { mode: ExploreMode }) {
- const title = mode === "visual" ? "Building visual clusters" : "Reading tag frequencies";
- const subtitle =
- mode === "visual"
- ? "Grouping similar images into browsable clusters."
- : "Collecting tags from the current library scope.";
-
- return (
-
-
-
-
- {title}
-
-
{subtitle}
-
-
-
-
-
-
- {nodes.map((node) => (
-
- ))}
-
-
- {editing ? (
-
setValue(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === "Enter") { e.preventDefault(); void commitRename(); }
- if (e.key === "Escape") setEditing(false);
- }}
- disabled={busy}
- />
- ) : (
-
-
-
- )}
-
- {entry.has_ai_source ? (
-
-
-
- {entry.count.toLocaleString()}
-
-
- ) : (
-
- {entry.count.toLocaleString()}
-
- )}
-
-
-
- {editing ? (
-
-
-
-
- ) : confirming ? (
-
-
-
-
- ) : (
-
-
-
-
-
-
-
-
- )}
-
-
-
-
-
- {entries.length.toLocaleString()} tags
- {totalUses.toLocaleString()} uses
- {query.trim() ? (
-
- {filteredEntries.length.toLocaleString()} matches
-
- ) : null}
-
-
- Rename tags to clean them up, rename into an existing tag to merge, or delete a tag everywhere in the current scope.
-
- {resetStatus ?
{resetStatus}
: null}
-
-
-
-
- {resetConfirming ? (
-
- ) : null}
-
-
setQuery(event.target.value)}
- placeholder="Filter tags"
- />
- {query ? (
-
-
-
-
-
- ) : null}
-
-
-
-
-
-
-
-
- {filteredEntries.length === 0 ? (
-
- No tags match that filter.
-
- ) : (
-
- {visibleItems.map((virtualRow) => {
- const start = virtualRow.index * columns;
- const rowEntries = filteredEntries.slice(start, start + columns);
- return (
-
- {rowEntries.map((entry) => (
-
- ))}
-
- );
- })}
-
- )}
-
-
-
+ ) : (
+
+ )}
+
+ {/* Accent glow on hover */}
+
+
+
+
Cluster
+
{node.entry.count.toLocaleString()}
+
+
+ {nodes.map((node) => (
+
+ ))}
+
+
+
+
+ {title}
+
+
{subtitle}
+
+
+
+
+
+
+ {nodes.map((node) => {
+ const isActive = activeTag === node.entry.tag;
+ const connectedRelated = connectedByTag.get(node.entry.tag);
+ const isRelated = connectedRelated !== undefined;
+ const dimmed = activeTag !== null && !isActive && !isRelated;
+ const opacity = dimmed ? 0.2 : minOpacity + node.ratio * (1 - minOpacity);
+ return (
+
+
+
+ );
+ })}
+
+ );
+}
+
+
diff --git a/src/components/explore/TagManageList.tsx b/src/components/explore/TagManageList.tsx
new file mode 100644
index 0000000..05343ea
--- /dev/null
+++ b/src/components/explore/TagManageList.tsx
@@ -0,0 +1,430 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import type { ExploreTagEntry } from "../../store";
+import { Dropdown } from "../menu";
+import { Tooltip } from "../Tooltip";
+
+type TagManageSort = "count_desc" | "count_asc" | "az" | "za";
+
+const TAG_MANAGE_SORTS: { value: TagManageSort; label: string }[] = [
+ { value: "count_desc", label: "Most used" },
+ { value: "count_asc", label: "Least used" },
+ { value: "az", label: "A-Z" },
+ { value: "za", label: "Z-A" },
+];
+
+function AiSourceGlyph({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+function RenameGlyph({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+function DeleteGlyph({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
+
+// Compact management tile for a single tag. Rename doubles as merge when the new
+// name already exists, and delete applies across the scoped tag set.
+function TagManageTile({
+ entry,
+ onSearch,
+ onRename,
+ onDelete,
+}: {
+ entry: ExploreTagEntry;
+ onSearch: (tag: string) => void;
+ onRename: (from: string, to: string) => Promise;
+ onDelete: (tag: string) => Promise;
+}) {
+ const [editing, setEditing] = useState(false);
+ const [value, setValue] = useState(entry.tag);
+ const [confirming, setConfirming] = useState(false);
+ const [busy, setBusy] = useState(false);
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ if (editing) {
+ setValue(entry.tag);
+ setTimeout(() => inputRef.current?.select(), 0);
+ }
+ }, [editing, entry.tag]);
+
+ const commitRename = async () => {
+ const next = value.trim();
+ if (!next || next === entry.tag) {
+ setEditing(false);
+ return;
+ }
+ setBusy(true);
+ try {
+ await onRename(entry.tag, next);
+ setEditing(false);
+ } finally {
+ setBusy(false);
+ }
+ };
+
+ const sourceLabel = entry.has_ai_source
+ ? entry.has_user_source
+ ? "Used by AI tags and user tags"
+ : "AI-generated tag"
+ : "User tag";
+
+ return (
+
+
+ {editing ? (
+
setValue(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") { e.preventDefault(); void commitRename(); }
+ if (e.key === "Escape") setEditing(false);
+ }}
+ disabled={busy}
+ />
+ ) : (
+
+
+
+ )}
+
+ {entry.has_ai_source ? (
+
+
+
+ {entry.count.toLocaleString()}
+
+
+ ) : (
+
+ {entry.count.toLocaleString()}
+
+ )}
+
+
+
+ {editing ? (
+
+
+
+
+ ) : confirming ? (
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {entries.length.toLocaleString()} tags
+ {totalUses.toLocaleString()} uses
+ {query.trim() ? (
+
+ {filteredEntries.length.toLocaleString()} matches
+
+ ) : null}
+
+
+ Rename tags to clean them up, rename into an existing tag to merge, or delete a tag everywhere in the current scope.
+
+ {resetStatus ?
{resetStatus}
: null}
+
+
+
+
+ {resetConfirming ? (
+
+ ) : null}
+
+
setQuery(event.target.value)}
+ placeholder="Filter tags"
+ />
+ {query ? (
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+ {filteredEntries.length === 0 ? (
+
+ No tags match that filter.
+
+ ) : (
+
+ {visibleItems.map((virtualRow) => {
+ const start = virtualRow.index * columns;
+ const rowEntries = filteredEntries.slice(start, start + columns);
+ return (
+
+ {rowEntries.map((entry) => (
+
+ ))}
+
+ );
+ })}
+
+ )}
+
+
+