From d9ef3c6cc3bb5e0b4369b3c0f3ffc8a2299a0ed9 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 01:11:56 +0300 Subject: [PATCH] =?UTF-8?q?feat(redesign):=20aurora=20foundation=20?= =?UTF-8?q?=E2=80=94=20tokens,=20glass=20sidebar,=20dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Foundation pass on the Aurora redesign: - app.css: full token swap to lavender/orchid/mint/sky pastel palette, vivid aurora gradient backdrop, frosted glass surface tokens, two themes (Aurora dark + Pearl light), shadow recipe for floating glass. - fonts: add Geist Sans / Geist Mono / Newsreader, drop DM Sans usage (legacy fontsource entries kept in package.json until full migration). - layout.svelte: sidebar becomes a floating glass rail with a conic- gradient brand orb, Newsreader italic 'Bridge' wordmark, soft glass hovers on nav links, gradient active indicator, gradient user avatar. - Card.svelte: glass surface + inner highlight + soft hover lift. - PageHeader.svelte: Newsreader serif display title. - +page.svelte (dashboard): stat cards become glass with colored accent 'orb', event timeline gets soft glass rows + slide-on-hover. Build clean (0 errors, pre-existing a11y warnings unchanged). Other pages still inherit old chrome via shared tokens but will need component-specific passes; tracked separately. --- frontend/package-lock.json | 46 ++- frontend/package.json | 3 + frontend/src/app.css | 306 +++++++++++++----- frontend/src/lib/components/Card.svelte | 47 ++- frontend/src/lib/components/PageHeader.svelte | 42 ++- frontend/src/routes/+layout.svelte | 229 +++++++++---- frontend/src/routes/+page.svelte | 139 +++++++- 7 files changed, 633 insertions(+), 179 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4a44fc0..29e0d5c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1,12 +1,12 @@ { "name": "notify-bridge-frontend", - "version": "0.1.0", + "version": "0.5.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "notify-bridge-frontend", - "version": "0.1.0", + "version": "0.5.2", "dependencies": { "@codemirror/autocomplete": "^6.18.0", "@codemirror/lang-html": "^6.4.11", @@ -15,7 +15,10 @@ "@codemirror/theme-one-dark": "^6.1.3", "@codemirror/view": "^6.40.0", "@fontsource/dm-sans": "^5.2.8", + "@fontsource/geist-mono": "^5.2.7", + "@fontsource/geist-sans": "^5.2.5", "@fontsource/jetbrains-mono": "^5.2.8", + "@fontsource/newsreader": "^5.2.10", "@mdi/js": "^7.4.47", "codemirror": "^6.0.2" }, @@ -612,6 +615,22 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource/geist-mono": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz", + "integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/geist-sans": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz", + "integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@fontsource/jetbrains-mono": { "version": "5.2.8", "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz", @@ -620,6 +639,14 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource/newsreader": { + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/@fontsource/newsreader/-/newsreader-5.2.10.tgz", + "integrity": "sha512-TFaYzoFhDqarUyV2yYjgZZEwT4bpaj6sGBnXSnFknQ/QB8/9LzfY6IO9+inHOX4zzPp87Z7/KuG1OI5gr91Q3A==", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@internationalized/date": { "version": "3.12.0", "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz", @@ -2865,11 +2892,26 @@ "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz", "integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA==" }, + "@fontsource/geist-mono": { + "version": "5.2.7", + "resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz", + "integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==" + }, + "@fontsource/geist-sans": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz", + "integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==" + }, "@fontsource/jetbrains-mono": { "version": "5.2.8", "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz", "integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==" }, + "@fontsource/newsreader": { + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/@fontsource/newsreader/-/newsreader-5.2.10.tgz", + "integrity": "sha512-TFaYzoFhDqarUyV2yYjgZZEwT4bpaj6sGBnXSnFknQ/QB8/9LzfY6IO9+inHOX4zzPp87Z7/KuG1OI5gr91Q3A==" + }, "@internationalized/date": { "version": "3.12.0", "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 337e10d..de44dcb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -35,7 +35,10 @@ "@codemirror/theme-one-dark": "^6.1.3", "@codemirror/view": "^6.40.0", "@fontsource/dm-sans": "^5.2.8", + "@fontsource/geist-mono": "^5.2.7", + "@fontsource/geist-sans": "^5.2.5", "@fontsource/jetbrains-mono": "^5.2.8", + "@fontsource/newsreader": "^5.2.10", "@mdi/js": "^7.4.47", "codemirror": "^6.0.2" } diff --git a/frontend/src/app.css b/frontend/src/app.css index af791dc..fc71713 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1,41 +1,80 @@ -@import '@fontsource/dm-sans/300.css'; -@import '@fontsource/dm-sans/400.css'; -@import '@fontsource/dm-sans/500.css'; -@import '@fontsource/dm-sans/600.css'; -@import '@fontsource/dm-sans/700.css'; -@import '@fontsource/jetbrains-mono/400.css'; -@import '@fontsource/jetbrains-mono/500.css'; -@import '@fontsource/jetbrains-mono/600.css'; +@import '@fontsource/geist-sans/300.css'; +@import '@fontsource/geist-sans/400.css'; +@import '@fontsource/geist-sans/500.css'; +@import '@fontsource/geist-sans/600.css'; +@import '@fontsource/geist-sans/700.css'; +@import '@fontsource/geist-mono/400.css'; +@import '@fontsource/geist-mono/500.css'; +@import '@fontsource/geist-mono/600.css'; +@import '@fontsource/newsreader/300-italic.css'; +@import '@fontsource/newsreader/400.css'; +@import '@fontsource/newsreader/400-italic.css'; +@import '@fontsource/newsreader/500.css'; +@import '@fontsource/newsreader/500-italic.css'; +@import '@fontsource/newsreader/600.css'; @import 'tailwindcss'; @theme { - --color-background: #f8f9fb; - --color-foreground: #1a1a2e; - --color-muted: #eef0f4; - --color-muted-foreground: #525866; - --color-border: #e2e4ea; - --color-primary: #0d9488; - --color-primary-foreground: #ffffff; - --color-accent: #eef0f4; - --color-accent-foreground: #1a1a2e; - --color-destructive: #ef4444; - --color-card: #ffffff; - --color-card-foreground: #1a1a2e; - --color-success-bg: #ecfdf5; - --color-success-fg: #059669; - --color-warning-bg: #fffbeb; - --color-warning-fg: #d97706; - --color-error-bg: #fef2f2; - --color-error-fg: #dc2626; - --color-glow: rgba(13, 148, 136, 0.15); - --color-glow-strong: rgba(13, 148, 136, 0.3); - --color-sidebar: #ffffff; - --color-sidebar-active: rgba(13, 148, 136, 0.08); - --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace; - --radius: 0.625rem; - /* Layered z-index scale — refer to these instead of ad-hoc numbers. - Ordered: base < sticky < dropdown < overlay < modal < tooltip < toast */ + /* === AURORA: dark default ("Aurora") === */ + --color-background: #050613; + --color-background-deep: #02030a; + --color-foreground: #f3f1ff; + --color-muted: rgba(255, 255, 255, 0.04); + --color-muted-foreground: #b6b2d4; + --color-border: rgba(255, 255, 255, 0.08); + + /* Glass surfaces — replace solid card */ + --color-glass: rgba(255, 255, 255, 0.04); + --color-glass-strong: rgba(255, 255, 255, 0.07); + --color-glass-elev: rgba(255, 255, 255, 0.10); + --color-highlight: rgba(255, 255, 255, 0.14); + --color-input-bg: rgba(255, 255, 255, 0.04); + --color-rule-strong: rgba(255, 255, 255, 0.16); + + /* Accent palette — soft pastel constellation */ + --color-primary: #b8a7ff; /* lavender — main accent */ + --color-primary-foreground: #02030a; + --color-orchid: #ff9ec4; + --color-mint: #7ee8c4; + --color-citrus: #f0e16a; + --color-coral: #ff8a78; + --color-sky: #8ec9ff; + + --color-accent: rgba(255, 255, 255, 0.07); + --color-accent-foreground: #f3f1ff; + --color-destructive: #ff8a78; + + /* Card mapping (kept for backward compat with components that read --color-card) */ + --color-card: rgba(255, 255, 255, 0.04); + --color-card-foreground: #f3f1ff; + + /* Status surfaces */ + --color-success-bg: rgba(126, 232, 196, 0.12); + --color-success-fg: #7ee8c4; + --color-warning-bg: rgba(240, 225, 106, 0.12); + --color-warning-fg: #f0e16a; + --color-error-bg: rgba(255, 138, 120, 0.12); + --color-error-fg: #ff8a78; + + /* Glow tokens — used for focus rings, hover halos */ + --color-glow: rgba(184, 167, 255, 0.20); + --color-glow-strong: rgba(184, 167, 255, 0.45); + + /* Sidebar tokens */ + --color-sidebar: rgba(255, 255, 255, 0.04); + --color-sidebar-active: rgba(255, 255, 255, 0.10); + + /* Shadow recipe for floating glass */ + --shadow-card: 0 1px 0 rgba(255,255,255,0.07) inset, 0 30px 60px -20px rgba(0,0,0,0.6); + + /* Typography */ + --font-sans: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace; + --font-display: 'Newsreader', ui-serif, Georgia, serif; + + --radius: 1rem; + + /* z-index scale (unchanged) */ --z-base: 1; --z-sticky: 10; --z-dropdown: 30; @@ -45,30 +84,56 @@ --z-toast: 70; } -/* Dark theme overrides */ +/* === AURORA: light theme ("Pearl") overrides === */ +[data-theme="light"] { + --color-background: #f5f3ff; + --color-background-deep: #ede9fe; + --color-foreground: #1a1530; + --color-muted: rgba(20, 15, 60, 0.04); + --color-muted-foreground: #4a4670; + --color-border: rgba(20, 15, 60, 0.08); + + --color-glass: rgba(255, 255, 255, 0.55); + --color-glass-strong: rgba(255, 255, 255, 0.65); + --color-glass-elev: rgba(255, 255, 255, 0.80); + --color-highlight: rgba(255, 255, 255, 0.9); + --color-input-bg: rgba(255, 255, 255, 0.85); + --color-rule-strong: rgba(20, 15, 60, 0.16); + + --color-primary: #6d4ce0; + --color-primary-foreground: #ffffff; + --color-orchid: #d63384; + --color-mint: #008a64; + --color-citrus: #a07a00; + --color-coral: #e0512f; + --color-sky: #1f6fcc; + + --color-accent: rgba(20, 15, 60, 0.04); + --color-accent-foreground: #1a1530; + --color-destructive: #e0512f; + + --color-card: rgba(255, 255, 255, 0.55); + --color-card-foreground: #1a1530; + + --color-success-bg: rgba(0, 138, 100, 0.10); + --color-success-fg: #008a64; + --color-warning-bg: rgba(160, 122, 0, 0.10); + --color-warning-fg: #a07a00; + --color-error-bg: rgba(224, 81, 47, 0.10); + --color-error-fg: #e0512f; + + --color-glow: rgba(109, 76, 224, 0.18); + --color-glow-strong: rgba(109, 76, 224, 0.40); + + --color-sidebar: rgba(255, 255, 255, 0.55); + --color-sidebar-active: rgba(255, 255, 255, 0.85); + + --shadow-card: 0 1px 0 rgba(255,255,255,0.5) inset, 0 20px 40px -16px rgba(80, 50, 180, 0.18); +} + +/* Legacy alias — many components still read [data-theme="dark"] */ [data-theme="dark"] { - --color-background: #0c0e14; - --color-foreground: #e4e6ed; - --color-muted: #1a1d28; - --color-muted-foreground: #8b8fa4; - --color-border: #252836; - --color-primary: #14b8a6; - --color-primary-foreground: #0c0e14; - --color-accent: #1a1d28; - --color-accent-foreground: #e4e6ed; - --color-destructive: #f87171; - --color-card: #13151e; - --color-card-foreground: #e4e6ed; - --color-success-bg: #052e16; - --color-success-fg: #34d399; - --color-warning-bg: #422006; - --color-warning-fg: #fbbf24; - --color-error-bg: #450a0a; - --color-error-fg: #f87171; - --color-glow: rgba(20, 184, 166, 0.12); - --color-glow-strong: rgba(20, 184, 166, 0.25); - --color-sidebar: #10121a; - --color-sidebar-active: rgba(20, 184, 166, 0.1); + /* defaults already match :root — no overrides needed, declaration kept for color-scheme */ } body { @@ -78,25 +143,49 @@ body { transition: background-color 0.3s ease, color 0.3s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + letter-spacing: -0.005em; + min-height: 100vh; + overflow-x: hidden; } -/* Subtle background pattern */ +/* === Aurora atmosphere — vivid blurred blobs behind everything === */ body::before { + content: ''; + position: fixed; + inset: -20vh -10vw; + background: + radial-gradient(40vw 40vw at 12% 18%, rgba(184, 167, 255, 0.55), transparent 60%), + radial-gradient(35vw 35vw at 88% 22%, rgba(255, 158, 196, 0.45), transparent 60%), + radial-gradient(50vw 35vw at 78% 88%, rgba(126, 232, 196, 0.40), transparent 60%), + radial-gradient(40vw 30vw at 6% 92%, rgba(142, 201, 255, 0.42), transparent 60%); + filter: blur(60px) saturate(140%); + pointer-events: none; + z-index: -2; + animation: aurora-drift 28s ease-in-out infinite alternate; +} + +body::after { content: ''; position: fixed; inset: 0; z-index: -1; - opacity: 0.4; - background-image: radial-gradient(circle at 1px 1px, var(--color-border) 0.5px, transparent 0); - background-size: 32px 32px; + background: radial-gradient(circle at 50% 50%, transparent 30%, var(--color-background-deep) 100%); pointer-events: none; + opacity: 0.7; } +@keyframes aurora-drift { + from { transform: translate(0, 0) scale(1); } + to { transform: translate(-2%, 1%) scale(1.05); } +} + +[data-theme="light"] body::before { opacity: 0.85; } + /* Form controls */ input, select, textarea { color: var(--color-foreground); - background-color: var(--color-background); - border-color: var(--color-border); + background-color: var(--color-input-bg); + border-color: var(--color-rule-strong); font-family: var(--font-sans); transition: border-color 0.2s ease, box-shadow 0.2s ease; } @@ -107,39 +196,61 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px var(--color-glow), 0 0 12px var(--color-glow); } -button:focus-visible { +button:focus-visible, a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; - border-radius: 0.375rem; + border-radius: 0.5rem; } -a:focus-visible { - outline: 2px solid var(--color-primary); - outline-offset: 2px; - border-radius: 0.375rem; -} - -/* Override browser autofill styles in dark mode */ +/* Override browser autofill in dark mode */ [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] input:-webkit-autofill:hover, [data-theme="dark"] input:-webkit-autofill:focus, [data-theme="dark"] select:-webkit-autofill { - -webkit-box-shadow: 0 0 0 1000px #13151e inset !important; - -webkit-text-fill-color: #e4e6ed !important; - caret-color: #e4e6ed; + -webkit-box-shadow: 0 0 0 1000px #0d0e1c inset !important; + -webkit-text-fill-color: #f3f1ff !important; + caret-color: #f3f1ff; } -/* Color scheme for native controls */ [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } /* Scrollbar styling */ -::-webkit-scrollbar { width: 6px; height: 6px; } +::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } +::-webkit-scrollbar-thumb { background: var(--color-rule-strong); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-muted-foreground); } -/* Animations */ +/* === Glass surface utility — used by cards, panels, sidebar === */ +.glass { + background: var(--color-glass); + backdrop-filter: blur(28px) saturate(160%); + -webkit-backdrop-filter: blur(28px) saturate(160%); + border: 1px solid var(--color-border); + border-radius: 22px; + box-shadow: var(--shadow-card); + position: relative; +} +.glass::after { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + background: linear-gradient(180deg, var(--color-highlight), transparent 30%); + opacity: 0.4; +} +.glass-strong { + background: var(--color-glass-strong); +} +.glass-elev { + background: var(--color-glass-elev); +} + +/* Selection */ +::selection { background: var(--color-primary); color: var(--color-primary-foreground); } + +/* === Animations === */ @keyframes fadeSlideIn { from { opacity: 0; } to { opacity: 1; } @@ -160,6 +271,16 @@ a:focus-visible { to { opacity: 1; } } +@keyframes aurora-rise { + from { opacity: 0; transform: translateY(14px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes aurora-pulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.5); opacity: 0.6; } +} + .animate-fade-slide-in { animation: fadeSlideIn 0.4s ease-out forwards; } @@ -178,9 +299,13 @@ a:focus-visible { animation: countUp 0.5s ease-out both; } +.animate-rise { + animation: aurora-rise 0.6s cubic-bezier(.2,.7,.2,1) both; +} + /* Stagger children utility */ .stagger-children > * { - animation: fadeSlideIn 0.4s ease-out forwards; + animation: aurora-rise 0.55s cubic-bezier(.2,.7,.2,1) both; } .stagger-children > *:nth-child(1) { animation-delay: 0ms; } .stagger-children > *:nth-child(2) { animation-delay: 60ms; } @@ -193,10 +318,14 @@ a:focus-visible { font-family: var(--font-mono); } +.font-display { + font-family: var(--font-display); +} + /* Card highlight for cross-entity navigation */ @keyframes cardHighlight { 0%, 100% { box-shadow: none; } - 25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); } + 25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px var(--color-glow-strong); } } /* Dim overlay behind highlighted card */ @@ -213,3 +342,16 @@ a:focus-visible { .nav-dim-overlay.active { opacity: 1; } + +/* Live pulse dot — for "live" / armed indicators */ +.aurora-pulse { + width: 7px; height: 7px; + border-radius: 50%; + background: var(--color-mint); + box-shadow: 0 0 8px var(--color-mint); + display: inline-block; + animation: aurora-pulse 1.4s ease-in-out infinite; +} +.aurora-pulse.warn { background: var(--color-citrus); box-shadow: 0 0 8px var(--color-citrus); } +.aurora-pulse.error { background: var(--color-coral); box-shadow: 0 0 8px var(--color-coral); } +.aurora-pulse.idle { background: var(--color-muted-foreground); box-shadow: none; opacity: 0.5; animation: none; } diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte index 0562324..4d09658 100644 --- a/frontend/src/lib/components/Card.svelte +++ b/frontend/src/lib/components/Card.svelte @@ -1,30 +1,55 @@
- {@render children()} +
+ {@render children()} +
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte index cfef354..c5f1faf 100644 --- a/frontend/src/lib/components/PageHeader.svelte +++ b/frontend/src/lib/components/PageHeader.svelte @@ -1,16 +1,20 @@ -
+
-

{title}

+

{title}

{#if description} -

{description}

+

{description}

{/if}
{#if children} @@ -19,3 +23,29 @@
{/if}
+ + diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 2025a1a..61b2e06 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -7,7 +7,7 @@ import { cubicOut } from 'svelte/easing'; import { api } from '$lib/api'; import { getAuth, loadUser, logout } from '$lib/auth.svelte'; - import { t, getLocale, setLocale, type Locale } from '$lib/i18n'; + import { t, getLocale, setLocale } from '$lib/i18n'; import { getTheme, initTheme, setTheme, type Theme } from '$lib/theme.svelte'; import Modal from '$lib/components/Modal.svelte'; import MdiIcon from '$lib/components/MdiIcon.svelte'; @@ -346,26 +346,28 @@ {:else if auth.user} -
+