DioCrafts
eef0ef5522
Checkpoint of the in-progress frontend toolchain work (Vite pinned to ^6 after the 7/8 rolldown build break, eslint-plugin-svelte v3 navigation/reactivity fixes, CI/Dockerfile/manifest updates) together with three UI performance optimizations (verified on the Vite 6 build): - Critical CSS: move auth.css/music.css off the global path into their route chunks (login/device/nextcloud-login, music) -- -25% gzipped critical CSS (~5.4 KB) on every non-auth/non-music page load. - relativeTimeAgo: cache the Intl.RelativeTimeFormat (was rebuilt per call, once per row per render) -- 22.7x faster date formatting in large lists. - Virtualize search results and grouped trash (list view) via VirtualList -- DOM rows mounted stay ~constant (~27) instead of O(N) (94.6% fewer for 500 hits). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import { SvelteSet } from 'svelte/reactivity';
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* Backed by a reactive {@link SvelteSet}, so in-place mutations (`add`/`delete`)
|
|
* drive `$derived`/template reads without copying the set.
|
|
*/
|
|
export class Selection {
|
|
#ids = new SvelteSet<string>();
|
|
|
|
/** The live selection set (read-only intent — mutate via the methods). */
|
|
get ids(): SvelteSet<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 {
|
|
if (this.#ids.has(id)) this.#ids.delete(id);
|
|
else this.#ids.add(id);
|
|
}
|
|
|
|
add(id: string): void {
|
|
this.#ids.add(id);
|
|
}
|
|
|
|
delete(id: string): void {
|
|
this.#ids.delete(id);
|
|
}
|
|
|
|
/** Replace the whole selection. */
|
|
set(ids: Iterable<string>): void {
|
|
this.#ids.clear();
|
|
for (const id of ids) this.#ids.add(id);
|
|
}
|
|
|
|
clear(): void {
|
|
this.#ids.clear();
|
|
}
|
|
}
|
|
|
|
/** Create a reactive {@link Selection}. */
|
|
export function useSelection(): Selection {
|
|
return new Selection();
|
|
}
|