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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2.3.1
+
+### Fixed
+
+- `<FeedbackSubmitForm>` paste-to-attach was missing from 2.3.0 (commit didn't land on main before merge). Now included.
+
+## 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/FeedbackSubmitForm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
 	import type { FeedbackBoardState } from './state.svelte.js';
+	import PasteImageInput from '../shared/PasteImageInput.svelte';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -16,6 +17,16 @@
 	let submitting = $state(false);
 	let success = $state(false);
 	let error = $state('');
+	let pastedImage = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let textareaWrapperEl: HTMLDivElement | undefined = $state();
+	let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+	$effect(() => {
+		if (textareaWrapperEl) {
+			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
 
 	let isAuthenticated = $derived(!!board.userEmail);
 
@@ -32,11 +43,14 @@
 				title: title.trim() || undefined,
 				message: message.trim(),
 				category: category || undefined,
+				pastedImage,
 			});
 			success = true;
 			title = '';
 			message = '';
 			category = '';
+			pastedImage = null;
+			pastedFilename = '';
 			setTimeout(() => { success = false; }, 2000);
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to submit';
@@ -66,11 +80,18 @@
 				bind:value={title}
 				placeholder="Title (optional)"
 			/>
-			<Textarea
-				value={message}
-				oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
-				placeholder="Describe your feedback..."
-				rows={3}
+			<div bind:this={textareaWrapperEl}>
+				<Textarea
+					value={message}
+					oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+					placeholder="Describe your feedback (paste an image to attach it)\u2026"
+					rows={3}
+				/>
+			</div>
+			<PasteImageInput
+				{textareaEl}
+				bind:image={pastedImage}
+				bind:filename={pastedFilename}
 			/>
 			{#if error}
 				<p class="text-sm text-red-400">

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

@@ -46,8 +46,9 @@ export interface FeedbackBoardState {
         title?: string;
         message: string;
         category?: string;
+        pastedImage?: string | null;
     }): 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

@@ -128,17 +128,26 @@ export function createFeedbackBoard(options) {
     async function submitFeedback(data) {
         if (!resolvedEmail)
             throw new Error('Authentication required to submit feedback');
+        const metadata = {};
+        if (data.pastedImage)
+            metadata.pastedScreenshot = data.pastedImage;
         await client.submitFeedback({
-            ...data,
+            title: data.title,
+            message: data.message,
+            category: data.category,
             email: resolvedEmail,
             pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
+            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
         });
         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.1",
 	"type": "module",
 	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
 	"svelte": "./dist/index.js",