@alliance-droid/status-feedback-system 1.2.1 → 1.3.1

package/dist/components/FeedbackBoard.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
-	import { createStatusClient, type BoardItem, type BoardCategory } from '../api.js';
-	import {
-		Card,
-		Button,
-		Badge,
-		Select,
-		Input,
-		Textarea,
-		Spinner,
-		Divider,
-		IconButton,
-	} from '@alliance-droid/svelte-component-library';
+	/**
+	 * All-in-one feedback board component.
+	 * Composes the board sub-components (FeedbackSidebar, FeedbackList,
+	 * FeedbackSubmitForm) with a shared FeedbackBoardState.
+	 */
+	import { untrack } from 'svelte';
+	import { Button } from '@alliance-droid/svelte-component-library';
+	import { createFeedbackBoard, type CategoryConfig, type FeedbackBoardState } from './board/index.js';
+	import FeedbackSidebar from './board/FeedbackSidebar.svelte';
+	import FeedbackList from './board/FeedbackList.svelte';
+	import FeedbackSubmitForm from './board/FeedbackSubmitForm.svelte';
 
 	interface Props {
 		apiUrl: string;
 		apiKey: string;
 		/** Category labels and icons — order determines sidebar order */
-		categoryConfig?: Record<string, { label?: string; icon?: string; description?: string }>;
+		categoryConfig?: Record<string, CategoryConfig>;
 		/** Title shown at the top */
 		title?: string;
 		/** Show the submit form inline */
@@ -34,220 +33,38 @@
 		submitCategories = [],
 	}: Props = $props();
 
-	let client = $derived(createStatusClient({ apiUrl, apiKey }));
-	let items = $state<BoardItem[]>([]);
-	let categories = $state<BoardCategory[]>([]);
-	let total = $state(0);
-	let loading = $state(true);
-	let error = $state('');
-
-	let activeCategory = $state<string | null>(null);
-	let statusFilter = $state<string>('open');
-	let sortBy = $state<string>('votes');
-
-	let expandedId = $state<string | null>(null);
-	let responses = $state<Record<string, { message: string; author: string | null; createdAt: number }[]>>({});
-	let loadingResponses = $state<Record<string, boolean>>({});
-
-	let showForm = $state(false);
-	let submitTitle = $state('');
-	let submitMessage = $state('');
-	let submitCategory = $state('');
-	let submitEmail = $state('');
-	let submitting = $state(false);
-	let submitSuccess = $state(false);
-	let submitError = $state('');
-
-	let votedItems = $state<Record<string, 'up' | 'down'>>({});
-
-	async function load() {
-		loading = true;
-		error = '';
-		try {
-			const data = await client.getBoard({
-				category: activeCategory || undefined,
-				status: statusFilter as 'open' | 'resolved' | 'all',
-				sort: sortBy as 'votes' | 'newest',
-			});
-			items = data.items;
-			total = data.total;
-			categories = data.categories;
-		} catch (e) {
-			error = e instanceof Error ? e.message : 'Failed to load';
-		} finally {
-			loading = false;
-		}
-	}
+	let board: FeedbackBoardState = $state(
+		untrack(() => createFeedbackBoard({ apiUrl, apiKey, categoryConfig }))
+	);
 
+	// Recreate board only when connection details change
 	$effect(() => {
-		void activeCategory;
-		void statusFilter;
-		void sortBy;
-		load();
+		const url = apiUrl;
+		const key = apiKey;
+		const config = categoryConfig;
+		board = createFeedbackBoard({ apiUrl: url, apiKey: key, categoryConfig: config });
 	});
 
-	async function handleVote(itemId: string, direction: 'up' | 'down') {
-		const prev = votedItems[itemId];
-		try {
-			const result = await client.vote(itemId, direction);
-			const item = items.find((i) => i.id === itemId);
-			if (item) item.votes = result.votes;
-			if (prev === direction) {
-				delete votedItems[itemId];
-				votedItems = { ...votedItems };
-			} else {
-				votedItems = { ...votedItems, [itemId]: direction };
-			}
-		} catch {
-			// Vote failures are silent — optimistic UI, vote just doesn't persist
-		}
-	}
-
-	async function toggleExpand(itemId: string) {
-		if (expandedId === itemId) {
-			expandedId = null;
-			return;
-		}
-		expandedId = itemId;
-		if (!responses[itemId]) {
-			loadingResponses = { ...loadingResponses, [itemId]: true };
-			try {
-				const data = await client.getResponses(itemId);
-				responses = { ...responses, [itemId]: data.responses };
-			} catch {
-				// Show empty responses on failure — user can re-expand to retry
-				responses = { ...responses, [itemId]: [] };
-			} finally {
-				loadingResponses = { ...loadingResponses, [itemId]: false };
-			}
-		}
-	}
-
-	async function handleSubmit() {
-		if (!submitMessage.trim()) return;
-		submitting = true;
-		submitError = '';
-		try {
-			await client.submitFeedback({
-				title: submitTitle.trim() || undefined,
-				message: submitMessage.trim(),
-				category: submitCategory || undefined,
-				email: submitEmail.trim() || undefined,
-				pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
-			});
-			submitSuccess = true;
-			submitTitle = '';
-			submitMessage = '';
-			submitCategory = '';
-			submitEmail = '';
-			setTimeout(() => {
-				submitSuccess = false;
-				showForm = false;
-			}, 2000);
-			await load();
-		} catch (err) {
-			submitError = err instanceof Error ? err.message : 'Failed to submit feedback';
-		} finally {
-			submitting = false;
-		}
-	}
-
-	function getCategoryIcon(name: string): string {
-		return categoryConfig[name]?.icon || 'fa-solid fa-circle';
-	}
-
-	function getCategoryLabel(name: string): string {
-		return categoryConfig[name]?.label || name;
-	}
-
-	function getCategoryDescription(name: string): string {
-		return categoryConfig[name]?.description || '';
-	}
-
-	function timeAgo(timestamp: number): string {
-		const seconds = Math.floor((Date.now() - timestamp) / 1000);
-		if (seconds < 60) return 'just now';
-		if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-		if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-		const days = Math.floor(seconds / 86400);
-		if (days < 30) return `${days}d ago`;
-		return new Date(timestamp).toLocaleDateString();
-	}
-
-	function getStatusBadgeVariant(status: string): 'success' | 'neutral' | 'info' {
-		if (status === 'new' || status === 'reviewed') return 'success';
-		if (status === 'resolved') return 'neutral';
-		return 'info';
-	}
-
-	const statusOptions = [
-		{ value: 'open', label: 'Open' },
-		{ value: 'resolved', label: 'Resolved' },
-		{ value: 'all', label: 'All' },
-	];
-
-	const sortOptions = [
-		{ value: 'votes', label: 'Most Votes' },
-		{ value: 'newest', label: 'Newest' },
-	];
-
-	let submitCategoryOptions = $derived(
-		submitCategories.map((c) => ({ value: c, label: getCategoryLabel(c) }))
-	);
+	let showForm = $state(false);
 </script>
 
 <div class="flex gap-6 min-h-[400px]">
 	<!-- Sidebar -->
-	<aside class="w-56 flex-shrink-0 flex flex-col gap-1">
-		<button
-			class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-				{activeCategory === null ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-			onclick={() => (activeCategory = null)}
-		>
-			<i class="fa-solid fa-layer-group"></i>
-			<span>All</span>
-			<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{total}</span>
-		</button>
-
-		{#each categories as cat}
-			<button
-				class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-					{activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-				onclick={() => (activeCategory = activeCategory === cat.name ? null : cat.name)}
-			>
-				<i class={getCategoryIcon(cat.name)}></i>
-				<span>{getCategoryLabel(cat.name)}</span>
-				<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{cat.count}</span>
-			</button>
-		{/each}
-
-		<Divider class="my-2" />
-
-		<div class="px-3 space-y-3">
-			<Select
-				label="Status"
-				options={statusOptions}
-				bind:value={statusFilter}
-			/>
-			<Select
-				label="Sort By"
-				options={sortOptions}
-				bind:value={sortBy}
-			/>
-		</div>
+	<aside class="w-56 flex-shrink-0">
+		<FeedbackSidebar {board} />
 	</aside>
 
 	<!-- Main -->
 	<main class="flex-1 min-w-0">
 		<div class="flex items-start justify-between mb-4">
 			<div>
-				{#if activeCategory}
+				{#if board.activeCategory}
 					<h2 class="text-xl font-bold flex items-center gap-2">
-						<i class={getCategoryIcon(activeCategory)}></i>
-						{getCategoryLabel(activeCategory)}
+						<i class={board.getCategoryIcon(board.activeCategory)}></i>
+						{board.getCategoryLabel(board.activeCategory)}
 					</h2>
-					{#if getCategoryDescription(activeCategory)}
-						<p class="text-sm text-foreground-secondary mt-1">{getCategoryDescription(activeCategory)}</p>
+					{#if board.getCategoryDescription(board.activeCategory)}
+						<p class="text-sm text-foreground-secondary mt-1">{board.getCategoryDescription(board.activeCategory)}</p>
 					{/if}
 				{:else if title}
 					<h2 class="text-xl font-bold">{title}</h2>
@@ -262,165 +79,12 @@
 
 		<!-- Submit form -->
 		{#if showForm}
-			<Card variant="outlined" padding="md" class="mb-4">
-				{#if submitSuccess}
-					<div class="text-center py-2 text-green-400 font-semibold">
-						<i class="fa-solid fa-check-circle mr-1"></i> Submitted! It will appear once reviewed.
-					</div>
-				{:else}
-					<div class="space-y-3">
-						<Input
-							bind:value={submitTitle}
-							placeholder="Title (optional)"
-						/>
-						<Textarea
-							value={submitMessage} oninput={(e) => (submitMessage = (e.currentTarget as HTMLTextAreaElement).value)}
-							placeholder="Describe your feedback..."
-							rows={3}
-						/>
-						{#if submitError}
-							<p class="text-sm text-red-400">
-								<i class="fa-solid fa-exclamation-circle mr-1"></i>
-								{submitError}
-							</p>
-						{/if}
-						<div class="flex gap-2 items-center flex-wrap">
-							{#if submitCategoryOptions.length > 0}
-								<div class="min-w-[140px]">
-									<Select
-										options={[{ value: '', label: 'Category...' }, ...submitCategoryOptions]}
-										bind:value={submitCategory}
-									/>
-								</div>
-							{/if}
-							<div class="flex-1">
-								<Input
-									type="email"
-									bind:value={submitEmail}
-									placeholder="Email (optional)"
-								/>
-							</div>
-							<Button
-								variant="primary"
-								disabled={submitting || !submitMessage.trim()}
-								loading={submitting}
-								onclick={handleSubmit}
-							>
-								Submit
-							</Button>
-						</div>
-					</div>
-				{/if}
-			</Card>
+			<div class="mb-4">
+				<FeedbackSubmitForm {board} categories={submitCategories} />
+			</div>
 		{/if}
 
 		<!-- Items -->
-		{#if loading}
-			<div class="text-center py-12 text-foreground-tertiary">
-				<Spinner />
-				<p class="mt-2">Loading...</p>
-			</div>
-		{:else if error}
-			<div class="text-center py-12 text-foreground-tertiary">
-				<i class="fa-solid fa-exclamation-triangle text-2xl"></i>
-				<p class="mt-2">{error}</p>
-			</div>
-		{:else if items.length === 0}
-			<div class="text-center py-12 text-foreground-tertiary">
-				<i class="fa-solid fa-inbox text-3xl"></i>
-				<p class="mt-2">No feedback yet</p>
-				<p class="text-sm">Be the first to submit!</p>
-			</div>
-		{:else}
-			<div class="flex flex-col gap-2">
-				{#each items as item (item.id)}
-					<Card variant="outlined" padding="none" hover>
-						<div class="flex gap-3 p-4">
-							<!-- Vote column -->
-							<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]">
-								<IconButton
-									size="sm"
-									variant={votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
-									onclick={() => handleVote(item.id, 'up')}
-									label="Upvote"
-								>
-									<i class="fa-solid fa-chevron-up text-xs"></i>
-								</IconButton>
-								<span class="text-sm font-bold">{item.votes}</span>
-								<IconButton
-									size="sm"
-									variant={votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
-									onclick={() => handleVote(item.id, 'down')}
-									label="Downvote"
-								>
-									<i class="fa-solid fa-chevron-down text-xs"></i>
-								</IconButton>
-							</div>
-
-							<!-- Content -->
-							<div class="flex-1 min-w-0">
-								<div class="flex items-center gap-2 flex-wrap">
-									{#if item.category}
-										<i class="{getCategoryIcon(item.category)} text-sm text-foreground-secondary"></i>
-									{/if}
-									<h3 class="text-[0.9375rem] font-semibold flex-1">
-										{item.title || item.message.slice(0, 80)}
-									</h3>
-									<Badge variant={getStatusBadgeVariant(item.status)} size="sm">
-										{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-									</Badge>
-								</div>
-
-								{#if item.title}
-									<p class="text-sm text-foreground-secondary mt-1.5 leading-relaxed">{item.message}</p>
-								{/if}
-
-								<div class="flex items-center gap-3 mt-2 text-[0.8125rem] text-foreground-tertiary">
-									<span>{timeAgo(item.createdAt)}</span>
-									{#if item.responseCount > 0}
-										<button
-											class="flex items-center gap-1 hover:text-foreground transition-colors bg-transparent border-none cursor-pointer text-[0.8125rem] text-foreground-tertiary p-0"
-											onclick={() => toggleExpand(item.id)}
-										>
-											<i class="fa-solid fa-comment"></i>
-											{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}
-										</button>
-									{/if}
-									{#if item.adminResponse}
-										<span class="text-xs text-primary">
-											<i class="fa-solid fa-shield"></i> Official response
-										</span>
-									{/if}
-								</div>
-
-								<!-- Expanded responses -->
-								{#if expandedId === item.id}
-									<div class="mt-3 pt-3 border-t border-border space-y-2">
-										{#if loadingResponses[item.id]}
-											<p class="text-sm text-foreground-tertiary"><Spinner /> Loading...</p>
-										{:else if responses[item.id]?.length}
-											{#each responses[item.id] as resp}
-												<div class="p-3 rounded-lg bg-surface">
-													<div class="flex items-center justify-between mb-1">
-														<span class="text-[0.8125rem] font-semibold text-primary">
-															<i class="fa-solid fa-shield mr-1"></i>
-															{resp.author || 'Team'}
-														</span>
-														<span class="text-xs text-foreground-tertiary">{timeAgo(resp.createdAt)}</span>
-													</div>
-													<p class="text-sm text-foreground-secondary leading-relaxed m-0">{resp.message}</p>
-												</div>
-											{/each}
-										{:else}
-											<p class="text-sm text-foreground-tertiary">No responses yet.</p>
-										{/if}
-									</div>
-								{/if}
-							</div>
-						</div>
-					</Card>
-				{/each}
-			</div>
-		{/if}
+		<FeedbackList {board} />
 	</main>
 </div>

package/dist/components/FeedbackBoard.svelte.d.ts

@@ -1,12 +1,9 @@
+import { type CategoryConfig } from './board/index.js';
 interface Props {
     apiUrl: string;
     apiKey: string;
     /** Category labels and icons — order determines sidebar order */
-    categoryConfig?: Record<string, {
-        label?: string;
-        icon?: string;
-        description?: string;
-    }>;
+    categoryConfig?: Record<string, CategoryConfig>;
     /** Title shown at the top */
     title?: string;
     /** Show the submit form inline */

package/dist/components/FeedbackForm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { createStatusClient } from '../api.js';
+	import { createStatusClient, type StatusClient } from '../api.js';
 
 	interface Props {
 		apiKey: string;
@@ -20,7 +20,18 @@
 		onError,
 	}: Props = $props();
 
-	let client = $derived(createStatusClient({ apiUrl, apiKey }));
+	let client: StatusClient | null = $state(null);
+	let lastApiUrl = '';
+	let lastApiKey = '';
+
+	function getClient(): StatusClient {
+		if (!client || lastApiUrl !== apiUrl || lastApiKey !== apiKey) {
+			client = createStatusClient({ apiUrl, apiKey });
+			lastApiUrl = apiUrl;
+			lastApiKey = apiKey;
+		}
+		return client;
+	}
 
 	let category = $state(untrack(() => categories[0] || ''));
 	let message = $state('');
@@ -37,7 +48,7 @@
 		errorMsg = '';
 
 		try {
-			await client.submitFeedback({
+			await getClient().submitFeedback({
 				category,
 				message: message.trim(),
 				email: email.trim() || undefined,

package/dist/components/StatusBanner.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
 	import type { System, SystemStatus } from '../types.js';
-	import { createStatusClient } from '../api.js';
+	import { createStatusClient, type StatusClient } from '../api.js';
+	import { deriveOverallStatus } from '../utils.js';
 	import StatusIndicator from './shared/StatusIndicator.svelte';
 
 	interface Props {
@@ -13,38 +14,63 @@
 		apiKey?: string;
 		/** Link to full status page */
 		statusUrl?: string;
+		/** Auto-refresh interval in seconds. 0 = disabled. Default: 60 */
+		refreshInterval?: number;
 	}
 
-	let { systems: systemsProp, apiUrl, apiKey, statusUrl }: Props = $props();
+	let { systems: systemsProp, apiUrl, apiKey, statusUrl, refreshInterval = 60 }: Props = $props();
 
 	let systems: System[] = $state(untrack(() => systemsProp ?? []));
 	let loading = $state(untrack(() => !systemsProp && !!apiUrl && !!apiKey));
+	let fetchFailed = $state(false);
 
-	onMount(async () => {
-		if (systemsProp || !apiUrl || !apiKey) return;
+	let usesApi = $derived(!systemsProp && !!apiUrl && !!apiKey);
+
+	let cachedClient: StatusClient | null = null;
+	let cachedApiUrl = '';
+	let cachedApiKey = '';
+
+	function getClient(): StatusClient {
+		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
+			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
+			cachedApiUrl = apiUrl!;
+			cachedApiKey = apiKey!;
+		}
+		return cachedClient;
+	}
+
+	async function fetchData() {
+		if (!usesApi) return;
 		try {
-			const client = createStatusClient({ apiUrl, apiKey });
+			const client = getClient();
 			const data = await client.getStatus();
 			systems = data.systems;
+			fetchFailed = false;
 		} catch {
-			// Error is silent — banner simply stays in loading state
-			// Consumer can use StatusPage for full error display
+			fetchFailed = true;
 		} finally {
 			loading = false;
 		}
+	}
+
+	onMount(() => {
+		fetchData();
+
+		let timer: ReturnType<typeof setInterval> | null = null;
+		if (usesApi && refreshInterval > 0) {
+			timer = setInterval(fetchData, refreshInterval * 1000);
+		}
+
+		return () => {
+			if (timer) clearInterval(timer);
+		};
 	});
 
 	$effect(() => {
 		if (systemsProp) systems = systemsProp;
 	});
 
-	let overallStatus = $derived.by((): SystemStatus => {
-		if (systems.length === 0) return 'operational';
-		if (systems.some((s) => s.status === 'outage')) return 'outage';
-		if (systems.some((s) => s.status === 'degraded')) return 'degraded';
-		if (systems.some((s) => s.status === 'maintenance')) return 'maintenance';
-		return 'operational';
-	});
+	let overallStatus = $derived(deriveOverallStatus(systems));
 
 	const messages: Record<SystemStatus, string> = {
 		operational: 'All systems operational',
@@ -59,6 +85,14 @@
 		<div class="h-2 w-2 animate-pulse rounded-full bg-foreground-tertiary"></div>
 		<span>Loading...</span>
 	</div>
+{:else if fetchFailed}
+	<button
+		onclick={() => { loading = true; fetchData(); }}
+		class="inline-flex items-center gap-2 rounded-full border border-red-500/30 px-3 py-1.5 text-xs text-red-400 transition-colors hover:bg-red-500/10"
+	>
+		<i class="fa-solid fa-circle-exclamation"></i>
+		<span>Status unavailable</span>
+	</button>
 {:else if statusUrl}
 	<a
 		href={statusUrl}

package/dist/components/StatusBanner.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     apiKey?: string;
     /** Link to full status page */
     statusUrl?: string;
+    /** Auto-refresh interval in seconds. 0 = disabled. Default: 60 */
+    refreshInterval?: number;
 }
 declare const StatusBanner: import("svelte").Component<Props, {}, "">;
 type StatusBanner = ReturnType<typeof StatusBanner>;