) => {
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
if (scrollHeight - scrollTop - clientHeight >= 100) return;
- if (activeFolderId) {
+ if (activeTagToken) {
+ // Infinite-scroll the open tag's media.
+ if (
+ tagHasMoreRef.current[activeTagToken] !== false &&
+ !tagLoadingRef.current[activeTagToken]
+ ) {
+ loadTagMedia(activeTagToken, false);
+ }
+ } else if (activeFolderId) {
// Infinite-scroll the open folder's media.
if (
folderHasMoreRef.current[activeFolderId] !== false &&
@@ -2266,7 +2487,7 @@ export const GalleryModal = React.memo(
loadItems();
}
},
- [activeFolderId, hasMore, loadItems, loadFolderMedia],
+ [activeTagToken, activeFolderId, hasMore, loadItems, loadFolderMedia, loadTagMedia],
);
// Folder tiles for the current location, rendered on the same grid as media
@@ -2390,7 +2611,55 @@ export const GalleryModal = React.memo(
New folder
)}
- {galleryTab === "folders" && activeFolder ? (
+ {activeTag ? (
+ /* ── Tag view header (Tags / name) ── */
+
+
+ Tags
+
+ /
+
+ {activeTag.tag_value}
+
+
+ {activeTag.use_count} file
+ {activeTag.use_count === 1 ? "" : "s"}
+
+
+
+
+ ) : tagBrowserOpen ? (
+ /* ── All-tags browser header ── */
+
+
Tags
+
+
+
+ ) : galleryTab === "folders" && activeFolder ? (
/* ── Folder header (breadcrumb trail) ── */
)}
- {galleryTab === "unsorted" && activeFilter !== "uploaded" && (
+ {galleryTab === "unsorted" &&
+ !activeTagToken &&
+ !tagBrowserOpen &&
+ activeFilter !== "uploaded" && (
))
)}
+
+ {/* Tags — most-used first, capped until "Show all". Hidden
+ entirely until the user has tags (they're created from
+ the item view's Tags section). */}
+ {userTags.length > 0 && (
+ <>
+
+
+ Tags
+
+
+ {sidebarTags.map((tag) => (
+
+ handleOpenTagFromSidebar(tag.tag_token)
+ }
+ className={twMerge(
+ "flex w-full flex-shrink-0 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+ activeTagToken === tag.tag_token
+ ? "bg-ui-controls/60 text-base-fg font-medium"
+ : "text-base-fg/70 hover:bg-ui-controls/30 hover:text-base-fg",
+ )}
+ >
+ {tag.tag_value}
+
+ {tag.use_count}
+
+
+ ))}
+
+ All tags
+
+ {sortedTags.length}
+
+
+
+ )}
)}
@@ -2738,7 +3069,125 @@ export const GalleryModal = React.memo(
>
{/* Subfolder tiles for the current location (root or open folder) */}
{folderChipsSection}
- {galleryTab === "folders" && !activeFolderId ? (
+ {activeTagToken ? (
+ /* ── Tag view ── */
+ tagContentLoading && activeTagItems.length === 0 ? (
+
+
+ ) : activeTagItems.length === 0 ? (
+
+
+
+
+ No files carry this tag
+
+
+ Add tags to media from the item view's Tags section.
+
+
+ {Object.entries(tagGroupedItems).map(
+ ([date, dateItems], groupIndex) => {
+ const filteredItems = dateItems.filter(filterItem);
+ if (filteredItems.length === 0) return null;
+ return (
+
+
+ {date}
+
+
+ {filteredItems.map((item) => (
+ handleItemClick(item)}
+ onImageError={(e) => {
+ e.currentTarget.src =
+ PLACEHOLDER_IMAGES.DEFAULT;
+ e.currentTarget.style.opacity = "0.3";
+ (
+ e.currentTarget as HTMLImageElement
+ ).dataset.brokenurl =
+ item.thumbnail || "";
+ handleImageError(item.thumbnail!);
+ }}
+ disableTooltipAndBadge={mode === "select"}
+ imageFit={imageFit}
+ onDeleted={handleItemDeleted}
+ onDelete={onDeleteMedia}
+ onEditClicked={onEditClicked}
+ maxSelections={maxSelections}
+ bulkSelected={bulkSelectedIds.has(item.id)}
+ onBulkSelectToggle={() =>
+ toggleBulkSelect(item.id)
+ }
+ bulkSelectionMode={bulkSelectionMode}
+ getBulkDragItems={getBulkDragItems}
+ folders={folders}
+ onAddToFolder={requestFolderDrop}
+ onCreateFolderFromMenu={
+ handleOpenNewFolderModal
+ }
+ />
+ ))}
+
+
+ );
+ },
+ )}
+ {tagLoadingMore && (
+
+
+ )}
+
+
+
+
+ No tags yet
+
+
+ Open any item and add tags in its details panel —
+ they'll show up here.
+
+
diff --git a/frontend/libs/components/lightbox-modal/src/index.ts b/frontend/libs/components/lightbox-modal/src/index.ts
index 3b6e8f2163..1191d9cdf1 100644
--- a/frontend/libs/components/lightbox-modal/src/index.ts
+++ b/frontend/libs/components/lightbox-modal/src/index.ts
@@ -1,2 +1,4 @@
export * from './lib/lightbox-modal';
+export * from './lib/tags/TagsSection';
+export * from './lib/tags/TagChipInput';
diff --git a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
index b49915397a..fb1aa9c4f8 100644
--- a/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
+++ b/frontend/libs/components/lightbox-modal/src/lib/lightbox-modal.tsx
@@ -61,6 +61,7 @@ import {
formatDuration,
formatResolution,
} from "@storyteller/common";
+import { TagsSection } from "./tags/TagsSection";
interface LightboxModalProps {
isOpen: boolean;
@@ -1055,6 +1056,8 @@ export function LightboxModal({
/>
)}
+
diff --git a/frontend/apps/artcraft-webapp/src/components/tags/TagChipInput.tsx b/frontend/libs/components/lightbox-modal/src/lib/tags/TagChipInput.tsx
similarity index 95%
rename from frontend/apps/artcraft-webapp/src/components/tags/TagChipInput.tsx
rename to frontend/libs/components/lightbox-modal/src/lib/tags/TagChipInput.tsx
index 3d5dcf38ea..b22b35b6d3 100644
--- a/frontend/apps/artcraft-webapp/src/components/tags/TagChipInput.tsx
+++ b/frontend/libs/components/lightbox-modal/src/lib/tags/TagChipInput.tsx
@@ -131,7 +131,7 @@ export function TagChipInput({
};
const chipClass = (value: string) =>
- `flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-white/80 transition-all ${
+ `flex items-center gap-1 rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-base-fg/80 transition-all ${
flashValue === value ? "ring-2 ring-primary" : ""
}`;
@@ -146,7 +146,7 @@ export function TagChipInput({
{chips.map((value) =>
disabled ? (
-
) : (
@@ -181,7 +181,7 @@ export function TagChipInput({
if (draft.trim()) commit(draft);
}}
placeholder={chips.length === 0 ? "Add tags (comma separated)" : "Add tag"}
- className="min-w-[7rem] flex-1 bg-transparent py-0.5 text-sm text-white placeholder:text-white/40 focus:outline-none"
+ className="min-w-[7rem] flex-1 bg-transparent py-0.5 text-sm text-base-fg placeholder:text-base-fg/40 focus:outline-none"
/>
)}
@@ -196,13 +196,13 @@ export function TagChipInput({
onMouseDown={(e) => e.preventDefault()}
onClick={() => pickSuggestion(suggestion.value)}
onMouseEnter={() => setHighlightIndex(index)}
- className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-white transition-colors ${
+ className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-base-fg transition-colors ${
highlight === index ? "bg-ui-controls/60" : "hover:bg-ui-controls/40"
}`}
>
- {suggestion.value}
-
+
{suggestion.useCount}
diff --git a/frontend/libs/components/lightbox-modal/src/lib/tags/TagsSection.tsx b/frontend/libs/components/lightbox-modal/src/lib/tags/TagsSection.tsx
new file mode 100644
index 0000000000..3a309f83f4
--- /dev/null
+++ b/frontend/libs/components/lightbox-modal/src/lib/tags/TagsSection.tsx
@@ -0,0 +1,262 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTag } from "@fortawesome/pro-solid-svg-icons";
+import {
+ TagsApi,
+ UsersApi,
+ type TagDetails,
+ type UserInfo,
+} from "@storyteller/api";
+import { toast } from "@storyteller/ui-toaster";
+import { TagChipInput, type TagSuggestion } from "./TagChipInput";
+
+export interface TagsSectionProps {
+ mediaToken?: string | null;
+ creator?: UserInfo | null;
+ /**
+ * The logged-in username when the host app already knows it (string =
+ * user, null = logged out). Left undefined, the section resolves the
+ * session itself (cached module-wide).
+ */
+ currentUsername?: string | null;
+ /**
+ * Autocomplete suggestions supplied by the host app (e.g. the webapp's
+ * tags store). Left undefined, the section fetches the user's tags itself.
+ */
+ suggestions?: TagSuggestion[];
+ /** Canonical tags after every successful save (fresh use counts). */
+ onSaved?: (tags: TagDetails[]) => void;
+}
+
+/** A queued save: the full desired tag set for one media file. */
+interface PendingSave {
+ token: string;
+ values: string[];
+}
+
+// Session + own-tags lookups are module-cached so reopening the lightbox
+// doesn't refetch (only used when the host doesn't supply the data).
+let cachedUsername: string | null | undefined;
+let usernameInFlight: Promise | null = null;
+
+const resolveSessionUsername = (): Promise => {
+ if (cachedUsername !== undefined) return Promise.resolve(cachedUsername);
+ if (!usernameInFlight) {
+ usernameInFlight = new UsersApi()
+ .GetSession()
+ .then((res) => {
+ cachedUsername =
+ res.success && res.data?.loggedIn && res.data.user
+ ? res.data.user.username
+ : null;
+ return cachedUsername;
+ })
+ .catch(() => {
+ usernameInFlight = null;
+ return null;
+ });
+ }
+ return usernameInFlight;
+};
+
+/**
+ * The "Tags" section of the media details panel. Fetches the file's tags,
+ * lets the owner edit them as chips (with autocomplete over their existing
+ * tags), and renders read-only chips for everyone else. Hidden entirely for
+ * non-owners when the file has no tags.
+ *
+ * Saves send one snapshot `SetMediaFileTags` per commit, serialized and
+ * coalesced: while a call is in flight only the latest desired tag set is
+ * remembered, so rapid edits collapse into a single follow-up request and
+ * add/remove can never interleave.
+ */
+export function TagsSection({
+ mediaToken,
+ creator,
+ currentUsername,
+ suggestions,
+ onSaved,
+}: TagsSectionProps) {
+ const tagsApi = useMemo(() => new TagsApi(), []);
+
+ // Session: prop wins; otherwise resolve (and cache) it ourselves.
+ const [resolvedUsername, setResolvedUsername] = useState(null);
+ useEffect(() => {
+ if (currentUsername !== undefined) return;
+ let cancelled = false;
+ resolveSessionUsername().then((username) => {
+ if (!cancelled) setResolvedUsername(username);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [currentUsername]);
+ const effectiveUsername = currentUsername ?? resolvedUsername;
+ const isOwner =
+ !!effectiveUsername &&
+ !!creator?.username &&
+ creator.username === effectiveUsername;
+
+ // null until the first fetch resolves — the section doesn't render (and
+ // can't be edited) before we know the file's current tags.
+ const [tags, setTags] = useState(null);
+ const mediaTokenRef = useRef(mediaToken);
+ mediaTokenRef.current = mediaToken;
+ /** Last server-confirmed tag set — the revert target on save failure. */
+ const lastAckedRef = useRef([]);
+ const pendingRef = useRef(null);
+ const savingRef = useRef(false);
+
+ useEffect(() => {
+ setTags(null);
+ lastAckedRef.current = [];
+ pendingRef.current = null;
+ if (!mediaToken) return;
+ let cancelled = false;
+ tagsApi.ListMediaFileTags({ mediaFileToken: mediaToken }).then((res) => {
+ if (cancelled) return;
+ const fetched = res.success && res.data ? res.data : [];
+ setTags(fetched);
+ lastAckedRef.current = fetched;
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [mediaToken, tagsApi]);
+
+ // Autocomplete fallback: when the host doesn't supply suggestions, fetch
+ // the user's tags once per mount (merged with canonical tags after saves).
+ const [ownTags, setOwnTags] = useState([]);
+ const ownTagsLoadedRef = useRef(false);
+ useEffect(() => {
+ if (suggestions !== undefined || !isOwner || ownTagsLoadedRef.current) {
+ return;
+ }
+ ownTagsLoadedRef.current = true;
+ let cancelled = false;
+ (async () => {
+ const all: TagDetails[] = [];
+ let cursor: string | undefined = undefined;
+ for (let page = 0; page < 50; page++) {
+ const res = await tagsApi.ListTags({ cursor });
+ if (!res.success || !res.data) break;
+ all.push(...res.data);
+ const next = res.pagination?.maybe_cursor;
+ if (!next) break;
+ cursor = next ?? undefined;
+ }
+ if (cancelled) return;
+ setOwnTags(
+ all
+ .sort(
+ (a, b) =>
+ b.use_count - a.use_count ||
+ a.tag_value_lowercase.localeCompare(b.tag_value_lowercase),
+ )
+ .map((t) => ({ value: t.tag_value, useCount: t.use_count })),
+ );
+ })();
+ return () => {
+ cancelled = true;
+ };
+ }, [suggestions, isOwner, tagsApi]);
+
+ const effectiveSuggestions = suggestions ?? ownTags;
+
+ const runQueue = async () => {
+ savingRef.current = true;
+ while (pendingRef.current) {
+ const { token, values } = pendingRef.current;
+ pendingRef.current = null;
+ const res = await tagsApi.SetMediaFileTags({
+ mediaFileToken: token,
+ tags: values,
+ });
+ if (res.success && res.data) {
+ onSaved?.(res.data.tags);
+ if (suggestions === undefined && res.data.tags.length > 0) {
+ // Keep the self-fetched suggestion list fresh with new tags.
+ setOwnTags((prev) => {
+ const known = new Set(prev.map((s) => s.value.toLowerCase()));
+ const added = res.data!.tags
+ .filter((t) => !known.has(t.tag_value_lowercase))
+ .map((t) => ({ value: t.tag_value, useCount: t.use_count }));
+ return added.length > 0 ? [...prev, ...added] : prev;
+ });
+ }
+ if (mediaTokenRef.current === token) {
+ lastAckedRef.current = res.data.tags;
+ // Don't clobber newer optimistic chips a queued edit represents.
+ if (!pendingRef.current) setTags(res.data.tags);
+ }
+ } else {
+ toast.error(res.errorMessage || "Failed to save tags.");
+ if (mediaTokenRef.current === token) {
+ pendingRef.current = null;
+ setTags(lastAckedRef.current);
+ }
+ }
+ }
+ savingRef.current = false;
+ };
+
+ const enqueueSave = (values: string[]) => {
+ if (!mediaToken) return;
+ pendingRef.current = { token: mediaToken, values };
+ if (!savingRef.current) void runQueue();
+ };
+
+ const handleAdd = (values: string[]) => {
+ const next = [
+ ...(tags ?? []),
+ ...values.map((value) => ({
+ tag_token: "",
+ tag_value: value,
+ tag_value_lowercase: value.toLowerCase(),
+ use_count: 0,
+ })),
+ ];
+ setTags(next);
+ enqueueSave(next.map((t) => t.tag_value));
+ };
+
+ const handleRemove = (value: string) => {
+ const next = (tags ?? []).filter((t) => t.tag_value !== value);
+ setTags(next);
+ enqueueSave(next.map((t) => t.tag_value));
+ };
+
+ const handleClear = () => {
+ setTags([]);
+ enqueueSave([]);
+ };
+
+ if (!mediaToken || tags === null) return null;
+ if (!isOwner && tags.length === 0) return null;
+
+ return (
+
+
+
+ Tags
+
+ {isOwner && tags.length >= 2 && (
+
+ Clear
+
+ )}
+
+
t.tag_value)}
+ suggestions={effectiveSuggestions}
+ disabled={!isOwner}
+ onAdd={handleAdd}
+ onRemove={handleRemove}
+ />
+