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.
58 lines
1.5 KiB
Svelte
58 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
interface BoardSummary {
|
|
id: string;
|
|
name: string;
|
|
icon: string | null;
|
|
description: string | null;
|
|
isDefault: boolean;
|
|
isGuestAccessible: boolean;
|
|
_count?: { sections: number };
|
|
}
|
|
|
|
interface Props {
|
|
board: BoardSummary;
|
|
}
|
|
|
|
let { board }: Props = $props();
|
|
|
|
const sectionCount = $derived(board._count?.sections ?? 0);
|
|
</script>
|
|
|
|
<a
|
|
href="/boards/{board.id}"
|
|
class="card-hover group block rounded-xl border border-border bg-card p-5 transition-colors hover:border-primary/50"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
{#if board.icon}
|
|
<span class="text-xl">{board.icon}</span>
|
|
{:else}
|
|
<span class="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-sm text-muted-foreground">
|
|
B
|
|
</span>
|
|
{/if}
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="truncate font-semibold text-foreground transition-colors group-hover:text-primary">
|
|
{board.name}
|
|
</h3>
|
|
{#if board.isDefault}
|
|
<span class="shrink-0 rounded bg-primary/15 px-1.5 py-0.5 text-xs text-primary">
|
|
Default
|
|
</span>
|
|
{/if}
|
|
{#if board.isGuestAccessible}
|
|
<span class="shrink-0 rounded bg-accent px-1.5 py-0.5 text-xs text-accent-foreground">
|
|
Guest
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
{#if board.description}
|
|
<p class="mt-1 line-clamp-2 text-sm text-muted-foreground">{board.description}</p>
|
|
{/if}
|
|
<p class="mt-2 text-xs text-muted-foreground/70">
|
|
{sectionCount} section{sectionCount === 1 ? '' : 's'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|