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

package/dist/components/FeedbackBoard.svelte

@@ -16,6 +16,8 @@
 	interface Props {
 		apiUrl: string;
 		apiKey: string;
+		/** Authenticated user email. Required for submitting feedback and replies. */
+		userEmail?: string;
 		/** Category labels and icons — order determines sidebar order */
 		categoryConfig?: Record<string, CategoryConfig>;
 		/** Title shown at the top */
@@ -29,6 +31,7 @@
 	let {
 		apiUrl,
 		apiKey,
+		userEmail,
 		categoryConfig = {},
 		title = 'Feedback Board',
 		showSubmit = true,
@@ -36,7 +39,7 @@
 	}: Props = $props();
 
 	let board: FeedbackBoardState = $derived(
-		createFeedbackBoard({ apiUrl, apiKey, categoryConfig })
+		createFeedbackBoard({ apiUrl, apiKey, userEmail, categoryConfig })
 	);
 
 	let showForm = $state(false);

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

@@ -2,6 +2,8 @@ import { type CategoryConfig } from './board/index.js';
 interface Props {
     apiUrl: string;
     apiKey: string;
+    /** Authenticated user email. Required for submitting feedback and replies. */
+    userEmail?: string;
     /** Category labels and icons — order determines sidebar order */
     categoryConfig?: Record<string, CategoryConfig>;
     /** Title shown at the top */

package/dist/components/board/FeedbackDetail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { Badge, Spinner, Button, Textarea, Input } from '@alliance-droid/svelte-component-library';
+	import { Badge, Spinner, Button, Textarea } from '@alliance-droid/svelte-component-library';
 	import type { BoardItem } from '../../api.js';
 	import type { FeedbackResponse } from '../../types.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
@@ -18,29 +18,26 @@
 
 	// Response form state
 	let replyMessage = $state('');
-	let replyAuthor = $state('');
 	let submittingReply = $state(false);
 	let replyError = $state('');
 	let replySuccess = $state(false);
 
+	let isAuthenticated = $derived(!!board.userEmail);
+
 	onMount(async () => {
 		responses = await board.getResponses(item.id);
 		loadingResponses = false;
 	});
 
 	async function handleSubmitReply() {
-		if (!replyMessage.trim()) return;
+		if (!replyMessage.trim() || !isAuthenticated) return;
 		submittingReply = true;
 		replyError = '';
 		try {
-			await board.submitResponse(item.id, {
-				message: replyMessage.trim(),
-				author: replyAuthor.trim() || undefined,
-			});
+			await board.submitResponse(item.id, replyMessage.trim());
 			// Refresh responses
 			responses = await board.getResponses(item.id);
 			replyMessage = '';
-			replyAuthor = '';
 			replySuccess = true;
 			setTimeout(() => { replySuccess = false; }, 2000);
 		} catch (err) {
@@ -134,24 +131,27 @@
 		<h4 class="text-sm font-semibold text-foreground">
 			<i class="fa-solid fa-reply mr-1" aria-hidden="true"></i> Add a Response
 		</h4>
-		{#if replySuccess}
+		{#if !isAuthenticated}
+			<p class="text-sm text-foreground-tertiary">
+				<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
+				Sign in to respond
+			</p>
+		{:else if replySuccess}
 			<p class="text-sm text-green-400 font-semibold">
 				<i class="fa-solid fa-check-circle mr-1" aria-hidden="true"></i> Response submitted!
 			</p>
 		{: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>Replying as <span class="font-medium text-foreground-secondary">{board.userEmail}</span></span>
+			</div>
 			<Textarea
 				value={replyMessage}
 				oninput={(e) => (replyMessage = (e.currentTarget as HTMLTextAreaElement).value)}
 				placeholder="Share your thoughts..."
 				rows={3}
 			/>
-			<div class="flex gap-2 items-center">
-				<div class="flex-1">
-					<Input
-						bind:value={replyAuthor}
-						placeholder="Your name (optional)"
-					/>
-				</div>
+			<div class="flex gap-2 items-center justify-end">
 				<Button
 					variant="primary"
 					size="sm"

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -6,26 +6,25 @@
 		board: FeedbackBoardState;
 		/** Available category options for the dropdown */
 		categories?: string[];
-		/** Pre-fill the email field (e.g. from the logged-in user's session) */
-		userEmail?: string;
 	}
 
-	let { board, categories = [], userEmail }: Props = $props();
+	let { board, categories = [] }: Props = $props();
 
 	let title = $state('');
 	let message = $state('');
 	let category = $state('');
-	let email = $derived(userEmail ?? '');
 	let submitting = $state(false);
 	let success = $state(false);
 	let error = $state('');
 
+	let isAuthenticated = $derived(!!board.userEmail);
+
 	let categoryOptions = $derived(
 		categories.map((c) => ({ value: c, label: board.getCategoryLabel(c) }))
 	);
 
 	async function handleSubmit() {
-		if (!message.trim()) return;
+		if (!message.trim() || !isAuthenticated) return;
 		submitting = true;
 		error = '';
 		try {
@@ -33,13 +32,11 @@
 				title: title.trim() || undefined,
 				message: message.trim(),
 				category: category || undefined,
-				email: email.trim() || undefined,
 			});
 			success = true;
 			title = '';
 			message = '';
 			category = '';
-			email = '';
 			setTimeout(() => { success = false; }, 2000);
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to submit';
@@ -50,12 +47,21 @@
 </script>
 
 <Card variant="outlined" padding="md">
-	{#if success}
+	{#if !isAuthenticated}
+		<div class="text-center py-3 text-foreground-tertiary">
+			<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
+			<span class="text-sm">Sign in to submit feedback</span>
+		</div>
+	{:else if success}
 		<div class="text-center py-2 text-green-400 font-semibold">
 			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
 		</div>
 	{:else}
 		<div class="space-y-3">
+			<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">{board.userEmail}</span></span>
+			</div>
 			<Input
 				bind:value={title}
 				placeholder="Title (optional)"
@@ -81,13 +87,7 @@
 						/>
 					</div>
 				{/if}
-				<div class="flex-1">
-					<Input
-						type="email"
-						bind:value={email}
-						placeholder="Email (optional)"
-					/>
-				</div>
+				<div class="flex-1"></div>
 				<Button
 					variant="primary"
 					disabled={submitting || !message.trim()}

package/dist/components/board/FeedbackSubmitForm.svelte.d.ts

@@ -3,8 +3,6 @@ interface Props {
     board: FeedbackBoardState;
     /** Available category options for the dropdown */
     categories?: string[];
-    /** Pre-fill the email field (e.g. from the logged-in user's session) */
-    userEmail?: string;
 }
 declare const FeedbackSubmitForm: import("svelte").Component<Props, {}, "">;
 type FeedbackSubmitForm = ReturnType<typeof FeedbackSubmitForm>;

package/dist/components/board/state.svelte.d.ts

@@ -17,12 +17,15 @@ export interface FeedbackBoardOptions {
     apiUrl: string;
     apiKey: string;
     categoryConfig?: Record<string, CategoryConfig>;
+    /** Authenticated user email. Required for submitting feedback and replies. */
+    userEmail?: string;
     /** Items per page. Default: 50 */
     pageSize?: number;
 }
 export interface FeedbackBoardState {
     readonly client: StatusClient;
     readonly categoryConfig: Record<string, CategoryConfig>;
+    readonly userEmail: string | null;
     readonly items: BoardItem[];
     readonly categories: BoardCategory[];
     readonly total: number;
@@ -43,12 +46,8 @@ export interface FeedbackBoardState {
         title?: string;
         message: string;
         category?: string;
-        email?: string;
-    }): Promise<void>;
-    submitResponse(itemId: string, data: {
-        message: string;
-        author?: string;
     }): Promise<void>;
+    submitResponse(itemId: string, message: string): Promise<void>;
     getCategoryIcon(name: string): string;
     getCategoryLabel(name: string): string;
     getCategoryDescription(name: string): string;

package/dist/components/board/state.svelte.js

@@ -8,8 +8,9 @@
  */
 import { createStatusClient } from '../../api.js';
 export function createFeedbackBoard(options) {
-    const { apiUrl, apiKey, categoryConfig = {}, pageSize = 50 } = options;
+    const { apiUrl, apiKey, categoryConfig = {}, userEmail, pageSize = 50 } = options;
     const client = createStatusClient({ apiUrl, apiKey });
+    const resolvedEmail = userEmail?.trim() || null;
     // Reactive state
     let items = $state([]);
     let categories = $state([]);
@@ -24,6 +25,8 @@ export function createFeedbackBoard(options) {
     let voteErrors = $state({});
     // Response cache
     const responseCache = {};
+    // Track in-flight votes to prevent duplicate requests
+    const pendingVotes = new Set();
     async function load() {
         loading = true;
         error = '';
@@ -76,6 +79,9 @@ export function createFeedbackBoard(options) {
         load();
     });
     async function vote(itemId, direction) {
+        if (pendingVotes.has(itemId))
+            return;
+        pendingVotes.add(itemId);
         const prev = votedItems[itemId];
         // Clear any prior error for this item
         if (voteErrors[itemId]) {
@@ -103,6 +109,9 @@ export function createFeedbackBoard(options) {
                 voteErrors = rest;
             }, 3000);
         }
+        finally {
+            pendingVotes.delete(itemId);
+        }
     }
     async function getResponses(itemId) {
         if (responseCache[itemId])
@@ -117,14 +126,19 @@ export function createFeedbackBoard(options) {
         }
     }
     async function submitFeedback(data) {
+        if (!resolvedEmail)
+            throw new Error('Authentication required to submit feedback');
         await client.submitFeedback({
             ...data,
+            email: resolvedEmail,
             pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
         });
         await load();
     }
-    async function submitResponse(itemId, data) {
-        await client.submitResponse(itemId, data);
+    async function submitResponse(itemId, message) {
+        if (!resolvedEmail)
+            throw new Error('Authentication required to submit a response');
+        await client.submitResponse(itemId, { message, author: resolvedEmail });
         // Invalidate cache so next getResponses fetches fresh data
         delete responseCache[itemId];
         // Update response count on the item
@@ -135,6 +149,7 @@ export function createFeedbackBoard(options) {
     return {
         get client() { return client; },
         get categoryConfig() { return categoryConfig; },
+        get userEmail() { return resolvedEmail; },
         get items() { return items; },
         get categories() { return categories; },
         get total() { return total; },

package/package.json

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