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
+14 -5
View File
@@ -1,6 +1,11 @@
<script lang="ts">
// Route-scoped styles: kept off the global critical path (Vite code-splits
// this into the /login route chunk, loaded only when this page renders).
import '$lib/styles/ported/auth.css';
import { goto } from '$app/navigation';
import { resolve } from '$app/paths';
import { page } from '$app/state';
import type { Pathname } from '$app/types';
import { onMount } from 'svelte';
import {
exchangeOidcCode,
@@ -65,7 +70,10 @@
let oidc = $state<OidcProviders>({ enabled: false });
const passwordLoginEnabled = $derived(oidc.password_login_enabled !== false);
const redirectTarget = $derived(page.url.searchParams.get('redirect') || '/files');
// The redirect target is an in-SPA destination (e.g. /files or a deep link a
// guard bounced us from). It's user-supplied via the query string so its exact
// value isn't a known route literal — cast to Pathname for resolve().
const redirectTarget = $derived((page.url.searchParams.get('redirect') || '/files') as Pathname);
const matchState = $derived(
regConfirm.length === 0 ? '' : regPassword === regConfirm ? 'ok' : 'bad'
);
@@ -100,7 +108,7 @@
return;
}
session.user = data.user;
await goto(redirectTarget, { replaceState: true });
await goto(resolve(redirectTarget), { replaceState: true });
} catch (err) {
error = err instanceof Error ? err.message : t('auth.login_error', 'Error logging in');
} finally {
@@ -196,7 +204,7 @@
const user = await exchangeOidcCode(oidcCode);
if (user) {
session.user = user;
await goto(redirectTarget, { replaceState: true });
await goto(resolve(redirectTarget), { replaceState: true });
return;
}
// Exchange failed — fall through to the normal login UI.
@@ -207,7 +215,7 @@
const me = await fetchMe();
if (me) {
session.user = me;
await goto(redirectTarget, { replaceState: true });
await goto(resolve(redirectTarget), { replaceState: true });
return;
}
} catch {
@@ -362,7 +370,8 @@
{#if passwordLoginEnabled}
<div class="auth-divider"><span>{t('auth.or', 'or')}</span></div>
{/if}
<a class="auth-button auth-button-oidc" href={oidc.authorize_endpoint}>
<!-- Backend OIDC authorize endpoint (not a SvelteKit route). -->
<a class="auth-button auth-button-oidc" href={oidc.authorize_endpoint} rel="external">
{t(
'auth.sso_login_provider',
{ provider: oidc.provider_name ?? 'SSO' },