@alliance-droid/status-feedback-system 1.3.7 → 1.3.9

package/dist/api.d.ts

@@ -39,6 +39,7 @@ export interface BoardItem {
     title: string | null;
     category: string | null;
     message: string;
+    email: string | null;
     status: string;
     votes: number;
     adminResponse: string | null;
@@ -87,6 +88,11 @@ export interface StatusClient {
     getResponses(feedbackId: string): Promise<{
         responses: FeedbackResponse[];
     }>;
+    /** Submit a public response to a feedback item */
+    submitResponse(feedbackId: string, data: {
+        message: string;
+        author?: string;
+    }): Promise<FeedbackResponse>;
 }
 /**
  * Create a status API client instance

package/dist/api.js

@@ -96,5 +96,11 @@ export function createStatusClient(config) {
         async getResponses(feedbackId) {
             return request(`/api/board/${feedbackId}/responses`);
         },
+        async submitResponse(feedbackId, data) {
+            return request(`/api/board/${feedbackId}/responses`, {
+                method: 'POST',
+                body: JSON.stringify(data),
+            });
+        },
     };
 }

package/dist/components/board/FeedbackDetail.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { Badge, Spinner } from '@alliance-droid/svelte-component-library';
+	import { Badge, Spinner, Button, Textarea, Input } 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';
 	import { timeAgo, getStatusBadgeVariant } from './utils.js';
 
@@ -12,13 +13,42 @@
 
 	let { board, item }: Props = $props();
 
-	let responses = $state<{ message: string; author: string | null; createdAt: number }[]>([]);
+	let responses = $state<FeedbackResponse[]>([]);
 	let loadingResponses = $state(true);
 
+	// Response form state
+	let replyMessage = $state('');
+	let replyAuthor = $state('');
+	let submittingReply = $state(false);
+	let replyError = $state('');
+	let replySuccess = $state(false);
+
 	onMount(async () => {
 		responses = await board.getResponses(item.id);
 		loadingResponses = false;
 	});
+
+	async function handleSubmitReply() {
+		if (!replyMessage.trim()) return;
+		submittingReply = true;
+		replyError = '';
+		try {
+			await board.submitResponse(item.id, {
+				message: replyMessage.trim(),
+				author: replyAuthor.trim() || undefined,
+			});
+			// Refresh responses
+			responses = await board.getResponses(item.id);
+			replyMessage = '';
+			replyAuthor = '';
+			replySuccess = true;
+			setTimeout(() => { replySuccess = false; }, 2000);
+		} catch (err) {
+			replyError = err instanceof Error ? err.message : 'Failed to submit';
+		} finally {
+			submittingReply = false;
+		}
+	}
 </script>
 
 <div class="space-y-4">
@@ -38,6 +68,14 @@
 		{/if}
 	</div>
 
+	<!-- Submitter email -->
+	{#if item.email}
+		<p class="text-sm text-foreground-tertiary flex items-center gap-1">
+			<i class="fa-solid fa-envelope" aria-hidden="true"></i>
+			{item.email}
+		</p>
+	{/if}
+
 	<!-- Title + Message -->
 	{#if item.title}
 		<h3 class="text-lg font-semibold text-foreground">{item.title}</h3>
@@ -71,12 +109,18 @@
 			<h4 class="text-sm font-semibold text-foreground">
 				<i class="fa-solid fa-comments mr-1" aria-hidden="true"></i> Responses
 			</h4>
-			{#each responses as resp}
+			{#each responses as resp (resp.id)}
 				<div class="rounded-lg bg-surface-secondary p-3">
 					<div class="flex items-center justify-between mb-1">
-						<span class="text-xs font-semibold text-primary">
-							<i class="fa-solid fa-shield mr-1" aria-hidden="true"></i>{resp.author || 'Team'}
-						</span>
+						{#if !resp.author}
+							<span class="text-xs font-semibold text-primary">
+								<i class="fa-solid fa-shield mr-1" aria-hidden="true"></i>Team
+							</span>
+						{:else}
+							<span class="text-xs font-semibold text-foreground-secondary">
+								<i class="fa-solid fa-user mr-1" aria-hidden="true"></i>{resp.author}
+							</span>
+						{/if}
 						<span class="text-[0.6875rem] text-foreground-tertiary">{timeAgo(resp.createdAt)}</span>
 					</div>
 					<p class="text-sm text-foreground-secondary leading-relaxed whitespace-pre-wrap">{resp.message}</p>
@@ -84,4 +128,46 @@
 			{/each}
 		</div>
 	{/if}
+
+	<!-- Reply form -->
+	<div class="border-t border-border pt-4 space-y-2">
+		<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}
+			<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}
+			<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>
+				<Button
+					variant="primary"
+					size="sm"
+					disabled={submittingReply || !replyMessage.trim()}
+					loading={submittingReply}
+					onclick={handleSubmitReply}
+				>
+					Submit
+				</Button>
+			</div>
+			{#if replyError}
+				<p class="text-sm text-red-400">
+					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
+					{replyError}
+				</p>
+			{/if}
+		{/if}
+	</div>
 </div>

package/dist/components/board/FeedbackItem.svelte

@@ -33,9 +33,7 @@
 	<div class="flex gap-3 p-4">
 		<!-- Vote column -->
 		<div class="flex flex-col items-center gap-0.5 min-w-[2.5rem]" role="group" aria-label="Vote on this feedback">
-			<!-- svelte-ignore a11y_click_events_have_key_events — IconButton handles keyboard -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div onclick={(e) => e.stopPropagation()}>
+			<div role="presentation" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
 				<IconButton
 					size="sm"
 					variant={board.votedItems[item.id] === 'up' ? 'primary' : 'neutral'}
@@ -51,9 +49,7 @@
 					<i class="fa-solid fa-exclamation-circle" aria-hidden="true"></i>
 				</span>
 			{/if}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div onclick={(e) => e.stopPropagation()}>
+			<div role="presentation" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
 				<IconButton
 					size="sm"
 					variant={board.votedItems[item.id] === 'down' ? 'primary' : 'neutral'}
@@ -83,17 +79,26 @@
 				<p class="text-sm text-foreground-secondary mt-1.5 leading-relaxed line-clamp-2">{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.email}
+				<p class="text-[0.8125rem] text-foreground-tertiary mt-1.5 flex items-center gap-1">
+					<i class="fa-solid fa-envelope" aria-hidden="true"></i>
+					{item.email}
+				</p>
+			{/if}
+
+			<div class="flex items-center justify-between mt-2 text-[0.8125rem] text-foreground-tertiary">
+				<div class="flex items-center gap-3">
+					<span>{timeAgo(item.createdAt)}</span>
+					{#if item.adminResponse}
+						<span class="text-xs text-primary">
+							<i class="fa-solid fa-shield" aria-hidden="true"></i> Official response
+						</span>
+					{/if}
+				</div>
 				{#if item.responseCount > 0}
 					<span class="flex items-center gap-1" aria-label="{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}">
 						<i class="fa-solid fa-comment" aria-hidden="true"></i>
-						{item.responseCount} {item.responseCount === 1 ? 'response' : 'responses'}
-					</span>
-				{/if}
-				{#if item.adminResponse}
-					<span class="text-xs text-primary">
-						<i class="fa-solid fa-shield" aria-hidden="true"></i> Official response
+						{item.responseCount}
 					</span>
 				{/if}
 			</div>

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -6,14 +6,16 @@
 		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 = [] }: Props = $props();
+	let { board, categories = [], userEmail }: Props = $props();
 
 	let title = $state('');
 	let message = $state('');
 	let category = $state('');
-	let email = $state('');
+	let email = $derived(userEmail ?? '');
 	let submitting = $state(false);
 	let success = $state(false);
 	let error = $state('');

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

@@ -3,6 +3,8 @@ 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

@@ -6,6 +6,7 @@
  *   <FeedbackSidebar {board} />
  *   <FeedbackList {board} />
  */
+import type { FeedbackResponse } from '../../types.js';
 import { type BoardItem, type BoardCategory, type StatusClient } from '../../api.js';
 export interface CategoryConfig {
     label?: string;
@@ -37,17 +38,17 @@ export interface FeedbackBoardState {
     reload(): Promise<void>;
     loadMore(): Promise<void>;
     vote(itemId: string, direction: 'up' | 'down'): Promise<void>;
-    getResponses(itemId: string): Promise<{
-        message: string;
-        author: string | null;
-        createdAt: number;
-    }[]>;
+    getResponses(itemId: string): Promise<FeedbackResponse[]>;
     submitFeedback(data: {
         title?: string;
         message: string;
         category?: string;
         email?: string;
     }): Promise<void>;
+    submitResponse(itemId: string, data: {
+        message: string;
+        author?: string;
+    }): Promise<void>;
     getCategoryIcon(name: string): string;
     getCategoryLabel(name: string): string;
     getCategoryDescription(name: string): string;

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

@@ -123,6 +123,15 @@ export function createFeedbackBoard(options) {
         });
         await load();
     }
+    async function submitResponse(itemId, data) {
+        await client.submitResponse(itemId, data);
+        // Invalidate cache so next getResponses fetches fresh data
+        delete responseCache[itemId];
+        // Update response count on the item
+        const item = items.find((i) => i.id === itemId);
+        if (item)
+            item.responseCount += 1;
+    }
     return {
         get client() { return client; },
         get categoryConfig() { return categoryConfig; },
@@ -146,6 +155,7 @@ export function createFeedbackBoard(options) {
         vote,
         getResponses,
         submitFeedback,
+        submitResponse,
         getCategoryIcon(name) {
             return categoryConfig[name]?.icon || 'fa-solid fa-circle';
         },

package/dist/components/dev/DevContextMenu.svelte

@@ -94,18 +94,17 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions — context menu positioned at cursor -->
 <!-- popover="manual" promotes to browser top layer (above <dialog> modals) -->
 <div
 	bind:this={popoverEl}
+	role="presentation"
 	popover="manual"
 	class="sf-ctx-popover"
 	style="left: {adjustedX}px; top: {adjustedY}px;"
 	onmousedown={(e) => e.stopPropagation()}
 	onclick={(e) => e.stopPropagation()}
+	onkeydown={(e) => e.stopPropagation()}
 >
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div class="sf-ctx-menu" role="menu" tabindex="-1" aria-label="Feedback actions" onkeydown={handleKeydown}>
 		<button class="sf-ctx-item" role="menuitem" onclick={onReportBug}>
 			<i class="fa-solid fa-bug text-red-400" aria-hidden="true"></i>

package/package.json

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