refactor: migrate all Svelte components from Svelte 4 to Svelte 5 runes
- Replace `export let` with `$props()` and `$bindable()` across all components
- Replace `$:` reactive statements with `$derived()` and `$effect()`
- Replace `createEventDispatcher` with callback props (e.g. `onchange`)
- Replace `on:event` directives with inline event handlers (`onclick`, `oninput`, etc.)
- Replace `<slot />` with `{@render children()}` in layout
- Use `untrack()` for SSR-safe $state initialization from reactive props
- Replace `blur` + `setTimeout` anti-pattern in TagInput with `clickOutside` action
- Fix `page` store usage in layout to use `$app/state` directly
- 0 errors, 0 warnings after svelte-check
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -2,116 +2,112 @@
|
||||
import './layout.css';
|
||||
import { enhance } from '$app/forms';
|
||||
import { page } from '$app/state';
|
||||
$: user = page.data.user;
|
||||
$: isAdmin = user?.groups.some(g => g.permissions.includes("ADMIN"))
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
const isAdmin = $derived(page.data.user?.groups.some((g: { permissions: string[] }) => g.permissions.includes('ADMIN')));
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-brand-sand">
|
||||
<!-- Changed background to Sand -->
|
||||
|
||||
<!-- Corporate Header -->
|
||||
{#if !page.url.pathname.startsWith('/login')}
|
||||
<header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-20">
|
||||
<!-- Slightly taller header -->
|
||||
{#if !page.url.pathname.startsWith('/login')}
|
||||
<header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-20">
|
||||
|
||||
<!-- Logo & Nav -->
|
||||
<div class="flex">
|
||||
<!-- LOGO (Extracted from their SVG) -->
|
||||
<div class="flex-shrink-0 flex items-center mr-8">
|
||||
<a href="/" class="flex items-center gap-2" aria-label="Familienarchiv">
|
||||
<!-- SVG Code from their site -->
|
||||
<svg
|
||||
width="250"
|
||||
height="25"
|
||||
viewBox="0 0 250 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.156128 1.01562C5.375 1.43431 9.621 4.65591 9.621 11.6669V19.8779H0.156128V10.4467H5.76852C5.76852 5.6736 3.70661 3.72129 0.156128 2.8334V1.01562Z"
|
||||
fill="#B4B9FF"
|
||||
></path>
|
||||
<path
|
||||
d="M10.5892 19.8779C15.8076 19.4592 20.0541 16.2371 20.0541 9.22655V1.01562H10.5892V10.4467H16.2012C16.2012 15.2199 14.1397 17.1722 10.5892 18.0601V19.8779Z"
|
||||
fill="#B4B9FF"
|
||||
></path>
|
||||
<!-- Logo & Nav -->
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 flex items-center mr-8">
|
||||
<a href="/" class="flex items-center gap-2" aria-label="Familienarchiv">
|
||||
<svg
|
||||
width="250"
|
||||
height="25"
|
||||
viewBox="0 0 250 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.156128 1.01562C5.375 1.43431 9.621 4.65591 9.621 11.6669V19.8779H0.156128V10.4467H5.76852C5.76852 5.6736 3.70661 3.72129 0.156128 2.8334V1.01562Z"
|
||||
fill="#B4B9FF"
|
||||
></path>
|
||||
<path
|
||||
d="M10.5892 19.8779C15.8076 19.4592 20.0541 16.2371 20.0541 9.22655V1.01562H10.5892V10.4467H16.2012C16.2012 15.2199 14.1397 17.1722 10.5892 18.0601V19.8779Z"
|
||||
fill="#B4B9FF"
|
||||
></path>
|
||||
|
||||
<text
|
||||
x="35"
|
||||
y="20"
|
||||
fill="#002850"
|
||||
font-family="Montserrat"
|
||||
font-weight="bold"
|
||||
font-size="20">FAMILIENARCHIV</text
|
||||
>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<text
|
||||
x="35"
|
||||
y="20"
|
||||
fill="#002850"
|
||||
font-family="Montserrat"
|
||||
font-weight="bold"
|
||||
font-size="20">FAMILIENARCHIV</text
|
||||
>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Nav Links (Montserrat font, Uppercase style often used in corporate) -->
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Dokumente
|
||||
</a>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
|
||||
<a
|
||||
href="/"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Dokumente
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/persons"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname.startsWith('/persons')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Personen
|
||||
</a>
|
||||
<a
|
||||
href="/persons"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname.startsWith('/persons')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Personen
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/conversations"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname.startsWith('/conversations')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Konversationen
|
||||
</a>
|
||||
{#if isAdmin}
|
||||
<a
|
||||
href="/admin"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname.startsWith('/admin')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Admin
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="/conversations"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname.startsWith('/conversations')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Konversationen
|
||||
</a>
|
||||
{#if isAdmin}
|
||||
<a
|
||||
href="/admin"
|
||||
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-bold uppercase tracking-wide font-sans
|
||||
{page.url.pathname.startsWith('/admin')
|
||||
? 'border-brand-navy text-brand-navy'
|
||||
: 'border-transparent text-gray-500 hover:border-brand-light hover:text-brand-navy'}"
|
||||
>
|
||||
Admin
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side -->
|
||||
<div class="flex items-center">
|
||||
<form action="/logout" method="POST" use:enhance>
|
||||
<button
|
||||
type="submit"
|
||||
class="text-sm text-gray-500 hover:text-brand-navy font-bold uppercase font-sans tracking-wide px-3 py-2 transition"
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{/if}
|
||||
<!-- Right Side -->
|
||||
<div class="flex items-center">
|
||||
<form action="/logout" method="POST" use:enhance>
|
||||
<button
|
||||
type="submit"
|
||||
class="text-sm text-gray-500 hover:text-brand-navy font-bold uppercase font-sans tracking-wide px-3 py-2 transition"
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
<main class="py-6">
|
||||
<slot />
|
||||
</main>
|
||||
<main class="py-6">
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user