@alliance-droid/status-feedback-system 1.3.12 → 1.3.14

package/dist/components/DevFeedback.svelte

@@ -31,7 +31,7 @@
 		showOnboarding?: boolean;
 		/** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
 		boardUrl?: string;
-		/** Pre-fill the email field (e.g. from the logged-in user's session) */
+		/** Authenticated user email. Required for submitting feedback. */
 		userEmail?: string;
 	}
 
@@ -115,7 +115,8 @@
 	let formType = $state<'bug' | 'feature'>('bug');
 	let formTitle = $state('');
 	let formMessage = $state('');
-	let formEmail = $state('');
+
+	let isAuthenticated = $derived(!!userEmail);
 	let submitting = $state(false);
 	let submitResult = $state<'success' | 'error' | null>(null);
 
@@ -233,7 +234,6 @@
 		formType = type;
 		formTitle = '';
 		formMessage = '';
-		formEmail = userEmail ?? '';
 		submitResult = null;
 		menuOpen = false;
 		formOpen = true;
@@ -249,7 +249,7 @@
 	}
 
 	async function handleSubmit() {
-		if (!formMessage.trim()) return;
+		if (!formMessage.trim() || !isAuthenticated) return;
 		submitting = true;
 		submitResult = null;
 
@@ -286,7 +286,7 @@
 				title: formTitle.trim() || undefined,
 				message: formMessage.trim(),
 				category: formType === 'bug' ? 'bug' : 'feature',
-				email: formEmail.trim() || undefined,
+				email: userEmail,
 				pageUrl: window.location.href,
 				metadata,
 			});
@@ -337,8 +337,8 @@
 		>
 			<Card variant="elevated" padding="none" class="flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden">
 				<!-- Header (draggable) -->
-				<!-- svelte-ignore a11y_no_static_element_interactions — drag handle needs mousedown -->
 				<div
+					role="presentation"
 					class="flex items-center justify-between px-5 py-4 border-b border-border shrink-0 select-none"
 					style="cursor: {isDragging ? 'grabbing' : 'grab'};"
 					onmousedown={handleDragStart}
@@ -372,7 +372,17 @@
 								{formType === 'bug' ? "We'll look into this." : "Thanks for the suggestion!"}
 							</p>
 						</div>
+					{:else if !isAuthenticated}
+						<div class="text-center py-6 text-foreground-tertiary">
+							<i class="fa-solid fa-lock text-2xl" aria-hidden="true"></i>
+							<p class="mt-2 text-sm">Sign in to submit feedback</p>
+						</div>
 					{:else}
+						<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
+							<i class="fa-solid fa-user" aria-hidden="true"></i>
+							<span>Submitting as <span class="font-medium text-foreground-secondary">{userEmail}</span></span>
+						</div>
+
 						<Input
 							bind:value={formTitle}
 							placeholder={formType === 'bug' ? 'Brief summary of the bug' : 'Feature title'}
@@ -388,13 +398,6 @@
 							rows={4}
 						/>
 
-						<Input
-							type="email"
-							bind:value={formEmail}
-							placeholder="your@email.com (optional)"
-							label="Email"
-						/>
-
 						<!-- Auto-captured context (bugs only) -->
 						{#if formType === 'bug'}
 							<div class="space-y-2">
@@ -470,7 +473,7 @@
 				</div>
 
 				<!-- Footer -->
-				{#if submitResult !== 'success'}
+				{#if submitResult !== 'success' && isAuthenticated}
 					<div class="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0">
 						<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
 							Cancel

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

@@ -9,7 +9,7 @@ interface Props {
     showOnboarding?: boolean;
     /** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
     boardUrl?: string;
-    /** Pre-fill the email field (e.g. from the logged-in user's session) */
+    /** Authenticated user email. Required for submitting feedback. */
     userEmail?: string;
 }
 declare const DevFeedback: import("svelte").Component<Props, {}, "">;

package/dist/components/FeedbackForm.svelte

@@ -96,7 +96,7 @@
 					bind:value={category}
 					class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"
 				>
-					{#each categories as cat}
+					{#each categories as cat (cat)}
 						<option value={cat}>{cat}</option>
 					{/each}
 				</select>

package/dist/components/StatusBanner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, untrack } from 'svelte';
+	import { onMount } from 'svelte';
 	import type { System, SystemStatus } from '../types.js';
 	import { createStatusClient, type StatusClient } from '../api.js';
 	import { deriveOverallStatus } from '../utils.js';
@@ -20,8 +20,8 @@
 
 	let { systems: systemsProp, apiUrl, apiKey, statusUrl, refreshInterval = 60 }: Props = $props();
 
-	let systems: System[] = $state(untrack(() => systemsProp ?? []));
-	let loading = $state(untrack(() => !systemsProp && !!apiUrl && !!apiKey));
+	let systems = $derived(systemsProp ?? []);
+	let loading = $derived(!systemsProp && !!apiUrl && !!apiKey);
 	let fetchFailed = $state(false);
 
 	let usesApi = $derived(!systemsProp && !!apiUrl && !!apiKey);
@@ -66,10 +66,6 @@
 		};
 	});
 
-	$effect(() => {
-		if (systemsProp) systems = systemsProp;
-	});
-
 	let overallStatus = $derived(deriveOverallStatus(systems));
 
 	const messages: Record<SystemStatus, string> = {

package/dist/components/StatusPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, untrack } from 'svelte';
+	import { onMount } from 'svelte';
 	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
 	import { createStatusClient, type StatusClient } from '../api.js';
 	import { deriveOverallStatus } from '../utils.js';
@@ -37,10 +37,10 @@
 	}: Props = $props();
 
 	// ── State ──
-	let systems: System[] = $state(untrack(() => systemsProp ?? []));
-	let incidents: Incident[] = $state(untrack(() => incidentsProp ?? []));
-	let statusHistory: Record<string, StatusHistoryEntry[]> = $state(untrack(() => statusHistoryProp ?? {}));
-	let loading = $state(untrack(() => !systemsProp));
+	let systems = $derived(systemsProp ?? []);
+	let incidents = $derived(incidentsProp ?? []);
+	let statusHistory = $derived(statusHistoryProp ?? {});
+	let loading = $derived(!systemsProp);
 	let error = $state('');
 
 	// ── Self-fetching mode ──
@@ -95,17 +95,6 @@
 		};
 	});
 
-	// ── Sync props when in pass-through mode ──
-	$effect(() => {
-		if (systemsProp) systems = systemsProp;
-	});
-	$effect(() => {
-		if (incidentsProp) incidents = incidentsProp;
-	});
-	$effect(() => {
-		if (statusHistoryProp) statusHistory = statusHistoryProp;
-	});
-
 	// ── Derived state ──
 
 	let overallStatus = $derived(deriveOverallStatus(systems));
@@ -176,7 +165,7 @@
 			<section>
 				<h2 class="mb-4 text-lg font-semibold text-foreground">Systems</h2>
 				<div class="space-y-3">
-					{#each systems as system}
+					{#each systems as system (system.id)}
 						<SystemCard
 							{system}
 							history={statusHistory[system.id] || []}
@@ -192,7 +181,7 @@
 			<section>
 				<h2 class="mb-4 text-lg font-semibold text-foreground">Active Incidents</h2>
 				<div class="space-y-4">
-					{#each activeIncidents as incident}
+					{#each activeIncidents as incident (incident.id)}
 						<div class="rounded-lg border border-border bg-surface p-4">
 							<div class="flex items-start justify-between">
 								<div>
@@ -222,7 +211,7 @@
 			<section>
 				<h2 class="mb-4 text-lg font-semibold text-foreground">Past Incidents</h2>
 				<div class="space-y-4">
-					{#each recentResolved as incident}
+					{#each recentResolved as incident (incident.id)}
 						<div class="rounded-lg border border-border bg-surface p-4">
 							<div class="flex items-start justify-between">
 								<div>

package/dist/components/board/FeedbackSidebar.svelte

@@ -31,7 +31,7 @@
 		<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{board.total}</span>
 	</button>
 
-	{#each board.categories as cat}
+	{#each board.categories as cat (cat.name)}
 		<button
 			class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
 				{board.activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"

package/dist/components/shared/IncidentTimeline.svelte

@@ -36,7 +36,7 @@
 </script>
 
 <div class="space-y-4" role="list" aria-label="Incident timeline">
-	{#each updates as update}
+	{#each updates as update (update.id)}
 		{@const config = statusConfig[update.status]}
 		<div class="flex gap-3" role="listitem">
 			<div class="flex flex-col items-center">

package/dist/components/shared/UptimeBar.svelte

@@ -74,7 +74,7 @@
 		<span>Today</span>
 	</div>
 	<div class="flex gap-px">
-		{#each dayBars as bar}
+		{#each dayBars as bar (bar.date)}
 			<div
 				class="h-8 flex-1 rounded-sm transition-opacity hover:opacity-80"
 				style="background-color: {bar.color}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",