feat(phase2): OAuth/Authentik integration + drag-and-drop reordering

- Add OIDC/OAuth2 login via openid-client with PKCE flow - Auto-provision OAuth users with group mapping - Conditional login page (OAuth/local/both based on auth mode) - Admin OAuth test connection button - Install svelte-dnd-action for board editor DnD - Draggable sections and widgets with cross-section moves - Reorder APIs with atomic Prisma transactions - Visual drag handles and drop zone indicators
2026-03-24 22:54:54 +03:00
parent ae114ab9ce
commit bf4e5089ee
22 changed files with 1273 additions and 257 deletions
@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { dndzone } from 'svelte-dnd-action';
+	import DraggableWidget from '$lib/components/widget/DraggableWidget.svelte';
+
+	interface WidgetData {
+		id: string;
+		type: string;
+		order: number;
+		config: string;
+		appId: string | null;
+		sectionId: string;
+		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;
+		boardId: string;
+		apps: Array<{ id: string; name: string }>;
+		onWidgetsUpdate: (sectionId: string, widgets: WidgetData[]) => void;
+		addWidgetSectionId: string | null;
+		onToggleAddWidget: (sectionId: string) => void;
+		onDeleteSection: (sectionId: string) => void;
+		onAddWidget: (sectionId: string, appId: string) => void;
+		onDeleteWidget: (widgetId: string) => void;
+	}
+
+	let {
+		section,
+		boardId,
+		apps,
+		onWidgetsUpdate,
+		addWidgetSectionId,
+		onToggleAddWidget,
+		onDeleteSection,
+		onAddWidget,
+		onDeleteWidget
+	}: Props = $props();
+
+	let widgets = $state<WidgetData[]>([...section.widgets]);
+
+	// Keep local state in sync when parent data changes
+	$effect(() => {
+		widgets = [...section.widgets];
+	});
+
+	const flipDurationMs = 200;
+
+	function handleConsider(e: CustomEvent<{ items: WidgetData[] }>) {
+		widgets = e.detail.items;
+	}
+
+	function handleFinalize(e: CustomEvent<{ items: WidgetData[] }>) {
+		widgets = e.detail.items;
+		onWidgetsUpdate(section.id, widgets);
+	}
+
+	let selectedAppId = $state('');
+</script>
+
+<div class="rounded-xl border border-border bg-card p-4 shadow-sm">
+	<div class="mb-3 flex items-center justify-between">
+		<div class="flex items-center gap-2">
+			<!-- Section drag handle -->
+			<div
+				class="flex shrink-0 cursor-grab items-center px-1 text-muted-foreground transition-opacity active:cursor-grabbing"
+				aria-label="Drag to reorder section"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="16"
+					height="16"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<circle cx="9" cy="5" r="1" />
+					<circle cx="9" cy="12" r="1" />
+					<circle cx="9" cy="19" r="1" />
+					<circle cx="15" cy="5" r="1" />
+					<circle cx="15" cy="12" r="1" />
+					<circle cx="15" cy="19" r="1" />
+				</svg>
+			</div>
+			<span class="font-medium text-foreground">{section.title}</span>
+			<span class="text-xs text-muted-foreground">Order: {section.order}</span>
+			{#if section.icon}
+				<span class="text-xs text-muted-foreground">({section.icon})</span>
+			{/if}
+		</div>
+		<div class="flex items-center gap-2">
+			<button
+				type="button"
+				onclick={() => onToggleAddWidget(section.id)}
+				class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+			>
+				Add Widget
+			</button>
+			<button
+				type="button"
+				onclick={() => onDeleteSection(section.id)}
+				class="rounded-md bg-destructive px-2 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
+			>
+				Delete
+			</button>
+		</div>
+	</div>
+
+	{#if addWidgetSectionId === section.id}
+		<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
+			<div>
+				<label for="widget-app-{section.id}" class="mb-1 block text-sm font-medium text-foreground"
+					>Select App</label
+				>
+				<select
+					id="widget-app-{section.id}"
+					bind:value={selectedAppId}
+					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
+				>
+					<option value="">Choose an app...</option>
+					{#each apps as app (app.id)}
+						<option value={app.id}>{app.name}</option>
+					{/each}
+				</select>
+			</div>
+			<div class="mt-2">
+				<button
+					type="button"
+					onclick={() => {
+						if (selectedAppId) {
+							onAddWidget(section.id, selectedAppId);
+							selectedAppId = '';
+						}
+					}}
+					disabled={!selectedAppId}
+					class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+				>
+					Add
+				</button>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Widgets drop zone -->
+	{#if widgets.length === 0}
+		<div
+			use:dndzone={{ items: widgets, flipDurationMs, dropTargetStyle: {} }}
+			onconsider={handleConsider}
+			onfinalize={handleFinalize}
+			class="min-h-[48px] rounded-lg border-2 border-dashed border-border/50 p-2 transition-colors"
+		>
+			<p class="text-center text-sm text-muted-foreground">
+				No widgets. Drag widgets here or add one above.
+			</p>
+		</div>
+	{:else}
+		<div
+			use:dndzone={{ items: widgets, flipDurationMs, dropTargetStyle: {} }}
+			onconsider={handleConsider}
+			onfinalize={handleFinalize}
+			class="min-h-[48px] space-y-2 rounded-lg border-2 border-dashed border-transparent p-1 transition-colors"
+		>
+			{#each widgets as widget (widget.id)}
+				<div class="rounded-lg border border-border bg-background/50 px-3 py-2">
+					<DraggableWidget>
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<span class="text-xs font-medium uppercase text-primary">{widget.type}</span>
+								{#if widget.app}
+									<span class="text-sm text-foreground">{widget.app.name}</span>
+									<span class="text-xs text-muted-foreground">({widget.app.url})</span>
+								{:else}
+									<span class="text-sm text-muted-foreground">Widget #{widget.order}</span>
+								{/if}
+							</div>
+							<button
+								type="button"
+								onclick={() => onDeleteWidget(widget.id)}
+								class="rounded-md bg-destructive px-2 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
+							>
+								Remove
+							</button>
+						</div>
+					</DraggableWidget>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>