svelte refactor

frontend/src/lib/composables/useOwnerCache.svelte.ts

@@ -0,0 +1,48 @@
+/**
+ * Reactive cache of owner-id → display-name, with memoised parallel resolution.
+ *
+ * Replaces the identical `ownerNames` record + `resolveOwners()` block in the
+ * favorites and recent views. The id→name resolver is injected so the cache
+ * stays decoupled from any specific API endpoint.
+ */
+export class OwnerCache {
+	#names = $state<Record<string, string>>({});
+	#resolver: (id: string) => Promise<string>;
+
+	constructor(resolver: (id: string) => Promise<string>) {
+		this.#resolver = resolver;
+	}
+
+	/** Resolved names so far (id → display name). */
+	get names(): Record<string, string> {
+		return this.#names;
+	}
+
+	/** Display name for an id, or `null` when unknown/empty (for cell rendering). */
+	name(id: string | null | undefined): string | null {
+		if (!id) return null;
+		return this.#names[id] ?? null;
+	}
+
+	/** Display name for an id, falling back to the id itself (for group labels). */
+	label(id: string): string {
+		return this.#names[id] ?? id;
+	}
+
+	/** Resolve every not-yet-cached id in parallel; nullish ids are skipped. */
+	async resolve(ids: Iterable<string | null | undefined>): Promise<void> {
+		const unique = [...new Set([...ids].filter((id): id is string => !!id))];
+		await Promise.all(
+			unique.map(async (id) => {
+				if (this.#names[id]) return;
+				const name = await this.#resolver(id);
+				this.#names = { ...this.#names, [id]: name };
+			})
+		);
+	}
+}
+
+/** Create a reactive {@link OwnerCache} backed by `resolver`. */
+export function useOwnerCache(resolver: (id: string) => Promise<string>): OwnerCache {
+	return new OwnerCache(resolver);
+}

frontend/src/lib/composables/useSelection.svelte.ts

@@ -0,0 +1,65 @@
+/**
+ * Reactive multi-select over string ids. Backs the repeated
+ * `let selected = $state(new Set()); function toggle(id) { … }` pattern used by
+ * the photos grid, music picker and other list views with one source of truth.
+ *
+ * Mutations swap in a fresh Set so `$derived`/template reads re-run.
+ */
+export class Selection {
+	#ids = $state<Set<string>>(new Set());
+
+	/** The live selection set (read-only intent — mutate via the methods). */
+	get ids(): Set<string> {
+		return this.#ids;
+	}
+
+	get size(): number {
+		return this.#ids.size;
+	}
+
+	get isEmpty(): boolean {
+		return this.#ids.size === 0;
+	}
+
+	has(id: string): boolean {
+		return this.#ids.has(id);
+	}
+
+	/** Selected ids as an array (e.g. for batch API calls). */
+	values(): string[] {
+		return [...this.#ids];
+	}
+
+	toggle(id: string): void {
+		const next = new Set(this.#ids);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		this.#ids = next;
+	}
+
+	add(id: string): void {
+		if (this.#ids.has(id)) return;
+		this.#ids = new Set(this.#ids).add(id);
+	}
+
+	delete(id: string): void {
+		if (!this.#ids.has(id)) return;
+		const next = new Set(this.#ids);
+		next.delete(id);
+		this.#ids = next;
+	}
+
+	/** Replace the whole selection. */
+	set(ids: Iterable<string>): void {
+		this.#ids = new Set(ids);
+	}
+
+	clear(): void {
+		if (this.#ids.size) this.#ids = new Set();
+	}
+}
+
+/** Create a reactive {@link Selection}. */
+export function useSelection(): Selection {
+	return new Selection();
+}