feat(mvp): phase 5 - board, section & widget system

Add board/section/widget CRUD APIs with permission filtering, board view page with collapsible sections and app widgets in responsive grid, form-based board editor, and 9 Svelte components (Board, Section, Widget families).
2026-03-24 21:05:00 +03:00
parent 4d941f566f
commit b0d77d3c29
23 changed files with 1564 additions and 27 deletions
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Section from '$lib/components/section/Section.svelte';
+
+	interface SectionData {
+		id: string;
+		title: string;
+		icon: string | null;
+		order: number;
+		isExpandedByDefault: boolean;
+		widgets: Array<{
+			id: string;
+			type: string;
+			order: number;
+			config: string;
+			appId: string | null;
+			app: {
+				id: string;
+				name: string;
+				url: string;
+				icon: string | null;
+				iconType: string;
+				description: string | null;
+				statuses: Array<{ status: string; responseTime: number | null }>;
+			} | null;
+		}>;
+	}
+
+	interface Props {
+		sections: SectionData[];
+	}
+
+	let { sections }: Props = $props();
+</script>
+
+<div class="space-y-6">
+	{#if sections.length === 0}
+		<div class="rounded-lg border border-gray-700 bg-gray-800/50 p-12 text-center">
+			<p class="text-gray-400">This board has no sections yet.</p>
+		</div>
+	{:else}
+		{#each sections as section (section.id)}
+			<Section {section} />
+		{/each}
+	{/if}
+</div>
@@ -0,0 +1,57 @@
+<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="group block rounded-lg border border-gray-700 bg-gray-800/50 p-5 transition-colors hover:border-indigo-500/50 hover:bg-gray-800"
+>
+	<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-gray-700 text-sm text-gray-400">
+				B
+			</span>
+		{/if}
+		<div class="min-w-0 flex-1">
+			<div class="flex items-center gap-2">
+				<h3 class="truncate font-semibold text-white group-hover:text-indigo-300 transition-colors">
+					{board.name}
+				</h3>
+				{#if board.isDefault}
+					<span class="shrink-0 rounded bg-indigo-600/20 px-1.5 py-0.5 text-xs text-indigo-400">
+						Default
+					</span>
+				{/if}
+				{#if board.isGuestAccessible}
+					<span class="shrink-0 rounded bg-green-600/20 px-1.5 py-0.5 text-xs text-green-400">
+						Guest
+					</span>
+				{/if}
+			</div>
+			{#if board.description}
+				<p class="mt-1 line-clamp-2 text-sm text-gray-400">{board.description}</p>
+			{/if}
+			<p class="mt-2 text-xs text-gray-500">
+				{sectionCount} section{sectionCount === 1 ? '' : 's'}
+			</p>
+		</div>
+	</div>
+</a>
@@ -0,0 +1,42 @@
+<script lang="ts">
+	interface Props {
+		name: string;
+		description: string | null;
+		icon: string | null;
+		boardId: string;
+		canEdit: boolean;
+	}
+
+	let { name, description, icon, boardId, canEdit }: Props = $props();
+</script>
+
+<div class="mb-6 flex items-start justify-between">
+	<div class="flex items-center gap-3">
+		{#if icon}
+			<span class="text-2xl">{icon}</span>
+		{/if}
+		<div>
+			<h1 class="text-3xl font-bold text-white">{name}</h1>
+			{#if description}
+				<p class="mt-1 text-sm text-gray-400">{description}</p>
+			{/if}
+		</div>
+	</div>
+
+	<div class="flex items-center gap-2">
+		<a
+			href="/boards"
+			class="rounded-lg bg-gray-700 px-3 py-2 text-sm text-gray-200 hover:bg-gray-600 transition-colors"
+		>
+			All Boards
+		</a>
+		{#if canEdit}
+			<a
+				href="/boards/{boardId}/edit"
+				class="rounded-lg bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
+			>
+				Edit
+			</a>
+		{/if}
+	</div>
+</div>