chore(frontend): toolchain migration checkpoint + UI perf optimizations
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>
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
* section, selection). Dialog/context-menu targets stay component-local until a
|
||||
* view proves they must be shared.
|
||||
*/
|
||||
import { SvelteSet } from 'svelte/reactivity';
|
||||
import type { FolderItem } from '$lib/api/types';
|
||||
import { t } from '$lib/i18n/index.svelte';
|
||||
|
||||
@@ -85,7 +86,8 @@ class FilesStore {
|
||||
viewMode = $state<ViewMode>(readViewMode());
|
||||
section = $state<Section>('files');
|
||||
isSearchMode = $state(false);
|
||||
selection = $state<Set<string>>(new Set());
|
||||
// Reactive set: in-place mutations below drive template/$derived reads.
|
||||
selection = new SvelteSet<string>();
|
||||
|
||||
setViewMode(mode: ViewMode): void {
|
||||
this.viewMode = mode;
|
||||
@@ -93,7 +95,7 @@ class FilesStore {
|
||||
}
|
||||
|
||||
clearSelection(): void {
|
||||
this.selection = new Set();
|
||||
this.selection.clear();
|
||||
}
|
||||
|
||||
// Soft ceiling so the per-item toggle can't grow the set without bound.
|
||||
@@ -102,10 +104,8 @@ class FilesStore {
|
||||
static readonly MAX_SELECTION = 10_000;
|
||||
|
||||
toggleSelected(id: string): void {
|
||||
const next = new Set(this.selection);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else if (next.size < FilesStore.MAX_SELECTION) next.add(id);
|
||||
this.selection = next;
|
||||
if (this.selection.has(id)) this.selection.delete(id);
|
||||
else if (this.selection.size < FilesStore.MAX_SELECTION) this.selection.add(id);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user