fix(frontend): replace SvelteKit server loads and fix svelte-check warnings

Author: lkstrp

.pre-commit-config.yaml

@@ -47,6 +47,17 @@ repos:
   hooks:
   - id: gitleaks
 
+  # Svelte/TypeScript - check types and Svelte warnings
+- repo: local
+  hooks:
+  - id: svelte-check
+    name: svelte-check
+    entry: bash -c 'cd frontend/app && npm run check'
+    language: system
+    files: ^frontend/app/src/
+    types_or: [svelte, ts, javascript]
+    pass_filenames: false
+
   # Lint Github Actions
 - repo: https://github.com/rhysd/actionlint
   rev: v1.7.9

frontend/app/src/lib/components/DataTable.svelte

@@ -70,7 +70,9 @@
 		onGlobalFilterChange: (updater: Updater<string>) => {
 			globalFilter = typeof updater === 'function' ? updater(globalFilter) : updater;
 		},
-		globalFilterFn: globalFilterFn ?? (() => true)
+		get globalFilterFn() {
+			return globalFilterFn ?? (() => true);
+		}
 	});
 </script>
 

frontend/app/src/lib/components/EmptyState.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import * as Empty from '$lib/components/ui/empty';
 
-	let { icon, title, description } = $props();
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let { icon, title, description }: { icon: any; title: string; description: string } = $props();
 </script>
 
 <Empty.Root>
 	<Empty.Header>
 		<Empty.Media variant="icon">
-			<icon />
+			<icon></icon>
 		</Empty.Media>
 		<Empty.Title>{title}</Empty.Title>
 		<Empty.Description>{description}</Empty.Description>

frontend/app/src/lib/components/FilterBar.svelte

@@ -5,9 +5,10 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { FilterDialog } from '$lib/components/ui/filter-dialog';
 	import type { FilterState, FilterCategory } from '$lib/components/ui/filter-dialog';
-	import type { ColumnDef, VisibilityState } from '@tanstack/table-core';
+	import type { VisibilityState } from '@tanstack/table-core';
 
-	type ColumnWithAccessor = ColumnDef<unknown, unknown> & { accessorKey?: string };
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	type ColumnWithAccessor = { header?: any; id?: string; accessorKey?: string };
 
 	interface FilterBarProps {
 		filterCategories?: FilterCategory[];

frontend/app/src/lib/components/Navbar.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	// Module-level cache that persists across component instances
 	let cachedVersion: { pypsa: string | null; app: string | null } = { pypsa: null, app: null };
 </script>
@@ -12,8 +12,8 @@
 	import { LogOut, User } from 'lucide-svelte';
 
 	// Use cached version immediately to prevent flicker
-	let pypsaVersion = cachedVersion.pypsa;
-	let appVersion = cachedVersion.app;
+	let pypsaVersion = $state(cachedVersion.pypsa);
+	let appVersion = $state(cachedVersion.app);
 
 	// Format version for display (remove .post1. and git hash)
 	function formatVersion(version: string | null): string | null {

frontend/app/src/lib/server/auth.ts

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
@@ -20,6 +21,34 @@
 
 	let { children, toolbar }: { children?: Snippet; toolbar?: Snippet } = $props();
 
+	// Client-side auth guard
+	$effect(() => {
+		if (authStore.loading || authStore.authEnabled === null) return;
+		if (authStore.authEnabled === false) return;
+
+		const path = $page.url.pathname;
+
+		if (path === '/login') {
+			if (authStore.isAuthenticated && authStore.isApproved) {
+				goto('/', { replaceState: true });
+			}
+		} else if (path === '/pending-approval') {
+			if (!authStore.isAuthenticated) {
+				goto('/login', { replaceState: true });
+			} else if (authStore.isApproved) {
+				goto('/', { replaceState: true });
+			}
+		} else {
+			if (!authStore.isAuthenticated) {
+				goto('/login', { replaceState: true });
+			} else if (authStore.isPending) {
+				goto('/pending-approval', { replaceState: true });
+			} else if (path.startsWith('/admin') && !authStore.isAdmin) {
+				goto('/', { replaceState: true });
+			}
+		}
+	});
+
 	const pageInfo = $derived.by(() => {
 		const path = $page.url.pathname;
 		if (path === '/') return { name: 'Home', url: '/' };
@@ -62,7 +91,11 @@
 <ModeWatcher />
 <Toaster position="bottom-right" closeButton richColors duration={8000} />
 
-{#if showSidebar}
+{#if authStore.loading}
+	<div class="flex min-h-svh items-center justify-center">
+		<div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-foreground"></div>
+	</div>
+{:else if showSidebar}
 	<Sidebar.Provider bind:open={sidebarStore.open}>
 		<AppSidebar />
 		<Sidebar.Inset>