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).
This commit is contained in:
@@ -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>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import SectionHeader from './SectionHeader.svelte';
|
||||
import SectionCollapsible from './SectionCollapsible.svelte';
|
||||
import WidgetGrid from '$lib/components/widget/WidgetGrid.svelte';
|
||||
|
||||
interface WidgetData {
|
||||
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 SectionData {
|
||||
id: string;
|
||||
title: string;
|
||||
icon: string | null;
|
||||
order: number;
|
||||
isExpandedByDefault: boolean;
|
||||
widgets: WidgetData[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
section: SectionData;
|
||||
}
|
||||
|
||||
let { section }: Props = $props();
|
||||
|
||||
let expanded = $state(section.isExpandedByDefault);
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-gray-700 bg-gray-800/30">
|
||||
<SectionHeader
|
||||
title={section.title}
|
||||
icon={section.icon}
|
||||
{expanded}
|
||||
onToggle={() => (expanded = !expanded)}
|
||||
/>
|
||||
|
||||
<SectionCollapsible {expanded}>
|
||||
<div class="px-4 pb-4">
|
||||
<WidgetGrid widgets={section.widgets} />
|
||||
</div>
|
||||
</SectionCollapsible>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
expanded: boolean;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { expanded, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if expanded}
|
||||
<div transition:slide={{ duration: 200 }}>
|
||||
{@render children()}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
title: string;
|
||||
icon: string | null;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
let { title, icon, expanded, onToggle }: Props = $props();
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={onToggle}
|
||||
class="flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-gray-700/30"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200"
|
||||
class:rotate-90={expanded}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</svg>
|
||||
|
||||
{#if icon}
|
||||
<span class="text-base">{icon}</span>
|
||||
{/if}
|
||||
|
||||
<span class="font-medium text-white">{title}</span>
|
||||
</button>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script lang="ts">
|
||||
import AppHealthBadge from '$lib/components/app/AppHealthBadge.svelte';
|
||||
|
||||
interface AppData {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
icon: string | null;
|
||||
iconType: string;
|
||||
description: string | null;
|
||||
statuses: Array<{ status: string; responseTime: number | null }>;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
app: AppData;
|
||||
}
|
||||
|
||||
let { app }: Props = $props();
|
||||
|
||||
const latestStatus = $derived(app.statuses[0]?.status ?? 'unknown');
|
||||
|
||||
const iconSrc = $derived.by(() => {
|
||||
if (!app.icon) return null;
|
||||
|
||||
switch (app.iconType) {
|
||||
case 'url':
|
||||
return app.icon;
|
||||
case 'simple': {
|
||||
const slug = app.icon.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return `https://cdn.simpleicons.org/${slug}`;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group flex flex-col items-center gap-2 rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center transition-colors hover:border-indigo-500/50 hover:bg-gray-800"
|
||||
>
|
||||
<!-- Icon -->
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-700 transition-colors group-hover:bg-gray-600">
|
||||
{#if app.iconType === 'emoji' && app.icon}
|
||||
<span class="text-2xl">{app.icon}</span>
|
||||
{:else if iconSrc}
|
||||
<img
|
||||
src={iconSrc}
|
||||
alt="{app.name} icon"
|
||||
class="h-8 w-8 object-contain"
|
||||
/>
|
||||
{:else}
|
||||
<span class="text-lg font-bold text-gray-400">
|
||||
{app.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<span class="text-sm font-medium text-white group-hover:text-indigo-300 transition-colors truncate w-full">
|
||||
{app.name}
|
||||
</span>
|
||||
|
||||
<!-- Status -->
|
||||
<AppHealthBadge status={latestStatus} />
|
||||
</a>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="h-full min-h-[120px]">
|
||||
{@render children()}
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
import AppWidget from './AppWidget.svelte';
|
||||
import WidgetContainer from './WidgetContainer.svelte';
|
||||
|
||||
interface WidgetData {
|
||||
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 {
|
||||
widgets: WidgetData[];
|
||||
}
|
||||
|
||||
let { widgets }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if widgets.length === 0}
|
||||
<p class="text-sm text-gray-500">No widgets in this section.</p>
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
|
||||
{#each widgets as widget (widget.id)}
|
||||
<WidgetContainer>
|
||||
{#if widget.type === 'app' && widget.app}
|
||||
<AppWidget app={widget.app} />
|
||||
{:else}
|
||||
<div class="flex h-full items-center justify-center rounded-lg border border-gray-700 bg-gray-800/50 p-4">
|
||||
<span class="text-xs text-gray-500">{widget.type} widget</span>
|
||||
</div>
|
||||
{/if}
|
||||
</WidgetContainer>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user