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:
DioCrafts
2026-06-21 19:03:07 +02:00
parent 778d551090
commit eef0ef5522
36 changed files with 1147 additions and 1420 deletions
+6 -6
View File
@@ -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);
}
}