- 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
32 lines
786 B
Svelte
32 lines
786 B
Svelte
<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("/calendar") ?? false,
|
|
);
|
|
</script>
|
|
|
|
<div class="flex flex-col h-full overflow-hidden">
|
|
<PageHeader title={m.nav_calendar()} icon="calendar_today" iconColor="text-blue-400" />
|
|
|
|
{#if isNavigatingHere}
|
|
<ContentSkeleton variant="calendar" />
|
|
{:else}
|
|
<div class="flex-1 overflow-auto">
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
</div>
|