feat: UI overhaul - component library + route layouts with instant headers

- Created 11 reusable UI components: PageHeader, SectionCard, StatCard, StatusBadge, TabBar, MemberList, ActivityFeed, EventCard, ContentSkeleton, QuickLinkGrid, ModuleCard
- Created route-specific +layout.svelte for documents, calendar, kanban, events, settings, account
- Each layout renders PageHeader instantly from parent data, shows ContentSkeleton during navigation
- Removed full-page PageSkeleton from parent layout
- Refactored all pages to use new components instead of inline markup
- Overview page: uses StatCard, SectionCard, EventCard, ActivityFeed, MemberList, QuickLinkGrid
- Events list: uses EventCard, Button components
- Event detail: uses ModuleCard, SectionCard
- Settings/Account/Calendar/Kanban: headers in layouts, toolbars in pages
- Added i18n keys for overview page (EN + ET)
- 0 errors, 112 tests pass
This commit is contained in:
AlacrisDevs
2026-02-07 10:44:53 +02:00
parent fe6ec6e0af
commit 2913912cb8
30 changed files with 1240 additions and 604 deletions

View File

@@ -0,0 +1,31 @@
<script lang="ts">
import type { Snippet } from "svelte";
import { navigating } from "$app/stores";
import { PageHeader, ContentSkeleton } from "$lib/components/ui";
import * as m from "$lib/paraglide/messages";
interface Props {
data: {
org: { id: string; name: string; slug: string };
};
children: Snippet;
}
let { data, children }: Props = $props();
const isNavigatingHere = $derived(
$navigating?.to?.url.pathname.includes("/documents") && !$navigating?.to?.url.pathname.includes("/events"),
);
</script>
<div class="flex flex-col h-full overflow-hidden">
<PageHeader title={m.nav_files()} icon="cloud" iconColor="text-emerald-400" />
{#if isNavigatingHere}
<ContentSkeleton variant="files" />
{:else}
<div class="flex-1 overflow-auto">
{@render children()}
</div>
{/if}
</div>

View File

@@ -22,7 +22,7 @@
<title>Files - {data.org.name} | Root</title>
</svelte:head>
<div class="h-full p-4 lg:p-5">
<div class="h-full p-6">
<FileBrowser
org={data.org}
bind:documents