@alliance-droid/status-feedback-system 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.3.0
+
+### Added
+
+- `<FeedbackBoard>` submit form and reply threads: paste a screenshot from clipboard (Cmd/Ctrl+V) into the textarea. Pasted images are sent to the server as `metadata.pastedScreenshot` (submit form) or `pastedImage` (reply). Existing responses with `imageUrl` render inline on reload.
+- `FeedbackResponse.imageUrl` field for persisted image rendering.
+
 ## 2.2.0
 
 ### Added

package/dist/api.d.ts

@@ -92,6 +92,7 @@ export interface StatusClient {
     submitResponse(feedbackId: string, data: {
         message: string;
         author?: string;
+        pastedImage?: string;
     }): Promise<FeedbackResponse>;
 }
 /**

package/dist/components/board/FeedbackDetail.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { Badge, Spinner, Button, Textarea } from '@alliance-droid/svelte-component-library';
 	import type { BoardItem } from '../../api.js';
 	import type { FeedbackResponse } from '../../types.js';
@@ -21,6 +21,65 @@
 	let submittingReply = $state(false);
 	let replyError = $state('');
 	let replySuccess = $state(false);
+	let replyTextareaWrapperEl: HTMLDivElement | undefined = $state();
+	let replyTextareaEl: HTMLTextAreaElement | undefined = $state();
+	let pastedImage = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let pasteError = $state('');
+
+	const MAX_BYTES = 5 * 1024 * 1024;
+	const ALLOWED_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+
+	$effect(() => {
+		if (replyTextareaWrapperEl) {
+			replyTextareaEl = replyTextareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
+
+	$effect(() => {
+		if (!replyTextareaEl) return;
+		const handler = (e: ClipboardEvent) => void handlePaste(e);
+		replyTextareaEl.addEventListener('paste', handler);
+		return () => replyTextareaEl?.removeEventListener('paste', handler);
+	});
+
+	async function handlePaste(e: ClipboardEvent) {
+		const clipItems = Array.from(e.clipboardData?.items ?? []);
+		const imageItem = clipItems.find((i) => i.kind === 'file' && i.type.startsWith('image/'));
+		if (!imageItem) return;
+
+		e.preventDefault();
+		const file = imageItem.getAsFile();
+		if (!file) return;
+
+		if (!ALLOWED_MIME.includes(file.type)) {
+			pasteError = 'Unsupported image type \u2014 PNG, JPEG, GIF, or WebP only';
+			return;
+		}
+		if (file.size > MAX_BYTES) {
+			pasteError = 'Image too large \u2014 max 5 MB';
+			return;
+		}
+
+		const reader = new FileReader();
+		reader.onload = () => {
+			pastedImage = reader.result as string;
+			const ext = file.type.split('/')[1] || 'png';
+			const stamp = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14);
+			pastedFilename = `pasted-image-${stamp}.${ext}`;
+			pasteError = '';
+		};
+		reader.readAsDataURL(file);
+	}
+
+	function formatSize(dataUrl: string): string {
+		const comma = dataUrl.indexOf(',');
+		if (comma === -1) return '';
+		const bytes = Math.round((dataUrl.length - comma - 1) * 0.75);
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+	}
 
 	let isAuthenticated = $derived(!!board.userEmail);
 
@@ -34,10 +93,11 @@
 		submittingReply = true;
 		replyError = '';
 		try {
-			await board.submitResponse(item.id, replyMessage.trim());
-			// Refresh responses
+			await board.submitResponse(item.id, replyMessage.trim(), pastedImage);
 			responses = await board.getResponses(item.id);
 			replyMessage = '';
+			pastedImage = null;
+			pastedFilename = '';
 			replySuccess = true;
 			setTimeout(() => { replySuccess = false; }, 2000);
 		} catch (err) {
@@ -121,6 +181,9 @@
 						<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>
+				{#if resp.imageUrl}
+					<img src={resp.imageUrl} alt="Pasted screenshot" class="mt-2 max-w-full rounded border border-border" />
+				{/if}
 				</div>
 			{/each}
 		</div>
@@ -145,12 +208,30 @@
 				<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 bind:this={replyTextareaWrapperEl}>
+				<Textarea
+					value={replyMessage}
+					oninput={(e) => (replyMessage = (e.currentTarget as HTMLTextAreaElement).value)}
+					placeholder="Share your thoughts (paste an image to attach it)\u2026"
+					rows={3}
+				/>
+			</div>
+
+			{#if pastedImage}
+				<div class="sf-paste-preview">
+					<img src={pastedImage} alt={pastedFilename} class="sf-paste-thumb" />
+					<div class="sf-paste-meta">
+						<span class="sf-paste-name">{pastedFilename}</span>
+						<span class="sf-paste-size">{formatSize(pastedImage)}</span>
+					</div>
+					<button type="button" class="sf-paste-remove" onclick={() => { pastedImage = null; pastedFilename = ''; }} aria-label="Remove image">&times;</button>
+				</div>
+			{/if}
+
+			{#if pasteError}
+				<p class="text-sm" style="color: var(--color-danger, #ef4444);">{pasteError}</p>
+			{/if}
+
 			<div class="flex gap-2 items-center justify-end">
 				<Button
 					variant="primary"
@@ -171,3 +252,48 @@
 		{/if}
 	</div>
 </div>
+
+<style>
+	.sf-paste-preview {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.5rem;
+		border: 1px solid var(--color-border, #2a2f3a);
+		border-radius: 0.5rem;
+		background: var(--color-surface-secondary, rgba(255, 255, 255, 0.04));
+	}
+	.sf-paste-thumb {
+		width: 120px;
+		height: 80px;
+		object-fit: cover;
+		border-radius: 0.25rem;
+		flex-shrink: 0;
+	}
+	.sf-paste-meta {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+	.sf-paste-name {
+		font-size: 0.8125rem;
+		color: var(--color-foreground, #e5e7eb);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.sf-paste-size {
+		font-size: 0.75rem;
+		color: var(--color-foreground-tertiary, #9ca3af);
+	}
+	.sf-paste-remove {
+		background: transparent;
+		border: none;
+		color: var(--color-foreground-tertiary, #9ca3af);
+		font-size: 1.25rem;
+		cursor: pointer;
+		padding: 0.25rem 0.5rem;
+	}
+	.sf-paste-remove:hover { color: var(--color-danger, #ef4444); }
+</style>

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

@@ -47,7 +47,7 @@ export interface FeedbackBoardState {
         message: string;
         category?: string;
     }): Promise<void>;
-    submitResponse(itemId: string, message: string): Promise<void>;
+    submitResponse(itemId: string, message: string, pastedImage?: string | null): Promise<void>;
     getCategoryIcon(name: string): string;
     getCategoryLabel(name: string): string;
     getCategoryDescription(name: string): string;

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

@@ -135,10 +135,13 @@ export function createFeedbackBoard(options) {
         });
         await load();
     }
-    async function submitResponse(itemId, message) {
+    async function submitResponse(itemId, message, pastedImage) {
         if (!resolvedEmail)
             throw new Error('Authentication required to submit a response');
-        await client.submitResponse(itemId, { message, author: resolvedEmail });
+        const payload = { message, author: resolvedEmail };
+        if (pastedImage)
+            payload.pastedImage = pastedImage;
+        await client.submitResponse(itemId, payload);
         // Invalidate cache so next getResponses fetches fresh data
         delete responseCache[itemId];
         // Update response count on the item

package/dist/types.d.ts

@@ -49,6 +49,7 @@ export interface FeedbackResponse {
     message: string;
     author: string | null;
     createdAt: number;
+    imageUrl: string | null;
 }
 export interface Feedback {
     id: string;

package/package.json

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