alexei.dolgolyov
0bd30c5e17
Add layout system (sidebar, header, main layout), dark/light/system theme with HSL customization, 3 ambient backgrounds (mesh gradient, particle field, aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects, status pulse animations, skeleton loaders, and responsive design. Polish all existing pages with consistent theming.
68 lines
1.6 KiB
Svelte
68 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import Sidebar from './Sidebar.svelte';
|
|
import Header from './Header.svelte';
|
|
import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';
|
|
import SearchDialog from '$lib/components/search/SearchDialog.svelte';
|
|
import { ui } from '$lib/stores/ui.svelte.js';
|
|
|
|
interface BoardLink {
|
|
id: string;
|
|
name: string;
|
|
icon: string | null;
|
|
}
|
|
|
|
interface UserInfo {
|
|
displayName: string;
|
|
email: string;
|
|
role: string;
|
|
avatarUrl?: string | null;
|
|
}
|
|
|
|
interface Props {
|
|
user: UserInfo | null;
|
|
boards: BoardLink[];
|
|
children: Snippet;
|
|
}
|
|
|
|
let { user, boards, children }: Props = $props();
|
|
|
|
const isAdmin = $derived(user?.role === 'admin');
|
|
</script>
|
|
|
|
<!-- Ambient Background (fixed, behind everything) -->
|
|
<AmbientBackground />
|
|
|
|
<div class="relative z-10 flex h-screen overflow-hidden">
|
|
<!-- Mobile overlay -->
|
|
{#if ui.isMobile && !ui.sidebarHidden}
|
|
<button
|
|
type="button"
|
|
class="fixed inset-0 z-30 bg-black/50"
|
|
onclick={() => ui.closeMobileSidebar()}
|
|
aria-label="Close sidebar"
|
|
></button>
|
|
{/if}
|
|
|
|
<!-- Sidebar -->
|
|
{#if !ui.sidebarHidden || !ui.isMobile}
|
|
<div
|
|
class="shrink-0 {ui.isMobile ? 'fixed left-0 top-0 z-40 h-full' : 'relative'}"
|
|
>
|
|
<Sidebar {boards} {isAdmin} collapsed={ui.isMobile ? false : ui.sidebarCollapsed} />
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Main content area -->
|
|
<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
|
|
<Header {user} />
|
|
|
|
<main class="flex-1 overflow-y-auto">
|
|
{@render children()}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Dialog (modal, z-50) -->
|
|
<SearchDialog />
|