@alliance-droid/status-feedback-system 2.3.2 → 3.1.0

package/dist/components/board/FeedbackDetail.svelte

@@ -1,299 +1,299 @@
-<script lang="ts">
-	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';
-	import type { FeedbackBoardState } from './state.svelte.js';
-	import { timeAgo, getStatusBadgeVariant } from './utils.js';
-
-	interface Props {
-		board: FeedbackBoardState;
-		item: BoardItem;
-	}
-
-	let { board, item }: Props = $props();
-
-	let responses = $state<FeedbackResponse[]>([]);
-	let loadingResponses = $state(true);
-
-	// Response form state
-	let replyMessage = $state('');
-	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);
-
-	onMount(async () => {
-		responses = await board.getResponses(item.id);
-		loadingResponses = false;
-	});
-
-	async function handleSubmitReply() {
-		if (!replyMessage.trim() || !isAuthenticated) return;
-		submittingReply = true;
-		replyError = '';
-		try {
-			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) {
-			replyError = err instanceof Error ? err.message : 'Failed to submit';
-		} finally {
-			submittingReply = false;
-		}
-	}
-</script>
-
-<div class="space-y-4">
-	<!-- Header -->
-	<div class="flex items-center gap-2 flex-wrap">
-		{#if item.category}
-			<i class="{board.getCategoryIcon(item.category)} text-foreground-secondary" aria-hidden="true"></i>
-		{/if}
-		<Badge variant={getStatusBadgeVariant(item.status)} size="sm">
-			{item.status === 'new' ? 'Open' : item.status.charAt(0).toUpperCase() + item.status.slice(1)}
-		</Badge>
-		<span class="text-xs text-foreground-tertiary">{timeAgo(item.createdAt)}</span>
-		{#if item.responseCount > 0}
-			<span class="text-xs text-foreground-tertiary flex items-center gap-1">
-				<i class="fa-solid fa-comment" aria-hidden="true"></i> {item.responseCount}
-			</span>
-		{/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>
-	{/if}
-	<p class="text-sm text-foreground-secondary leading-relaxed whitespace-pre-wrap">{item.message}</p>
-
-	<!-- Votes -->
-	<div class="flex items-center gap-2 text-sm text-foreground-tertiary" aria-label="{item.votes} votes">
-		<i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
-		<span class="font-semibold">{item.votes}</span>
-		<span>votes</span>
-	</div>
-
-	<!-- Admin response -->
-	{#if item.adminResponse}
-		<div class="rounded-lg bg-primary/5 border border-primary/20 p-3">
-			<p class="text-xs font-semibold text-primary mb-1">
-				<i class="fa-solid fa-shield mr-1" aria-hidden="true"></i> Official Response
-			</p>
-			<p class="text-sm text-foreground-secondary">{item.adminResponse}</p>
-		</div>
-	{/if}
-
-	<!-- Responses -->
-	{#if loadingResponses}
-		<div class="text-foreground-tertiary text-sm">
-			<Spinner /> Loading responses...
-		</div>
-	{:else if responses.length > 0}
-		<div class="space-y-3">
-			<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 (resp.id)}
-				<div class="rounded-lg bg-surface-secondary p-3">
-					<div class="flex items-center justify-between mb-1">
-						{#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>
-				{#if resp.imageUrl}
-					<img src={resp.imageUrl} alt="Pasted screenshot" class="mt-2 max-w-full rounded border border-border" />
-				{/if}
-				</div>
-			{/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 !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>
-			<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"
-					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>
-
-<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>
+<script lang="ts">
+	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';
+	import type { FeedbackBoardState } from './state.svelte.js';
+	import { timeAgo, getStatusBadgeVariant, publicStatusLabel } from './utils.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+		item: BoardItem;
+	}
+
+	let { board, item }: Props = $props();
+
+	let responses = $state<FeedbackResponse[]>([]);
+	let loadingResponses = $state(true);
+
+	// Response form state
+	let replyMessage = $state('');
+	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);
+
+	onMount(async () => {
+		responses = await board.getResponses(item.id);
+		loadingResponses = false;
+	});
+
+	async function handleSubmitReply() {
+		if (!replyMessage.trim() || !isAuthenticated) return;
+		submittingReply = true;
+		replyError = '';
+		try {
+			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) {
+			replyError = err instanceof Error ? err.message : 'Failed to submit';
+		} finally {
+			submittingReply = false;
+		}
+	}
+</script>
+
+<div class="space-y-4">
+	<!-- Header -->
+	<div class="flex items-center gap-2 flex-wrap">
+		{#if item.category}
+			<i class="{board.getCategoryIcon(item.category)} text-foreground-secondary" aria-hidden="true"></i>
+		{/if}
+		<Badge variant={getStatusBadgeVariant(item.publicStatus)} size="sm">
+			{publicStatusLabel(item.publicStatus)}
+		</Badge>
+		<span class="text-xs text-foreground-tertiary">{timeAgo(item.createdAt)}</span>
+		{#if item.responseCount > 0}
+			<span class="text-xs text-foreground-tertiary flex items-center gap-1">
+				<i class="fa-solid fa-comment" aria-hidden="true"></i> {item.responseCount}
+			</span>
+		{/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>
+	{/if}
+	<p class="text-sm text-foreground-secondary leading-relaxed whitespace-pre-wrap">{item.message}</p>
+
+	<!-- Votes -->
+	<div class="flex items-center gap-2 text-sm text-foreground-tertiary" aria-label="{item.votes} votes">
+		<i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
+		<span class="font-semibold">{item.votes}</span>
+		<span>votes</span>
+	</div>
+
+	<!-- Admin response -->
+	{#if item.adminResponse}
+		<div class="rounded-lg bg-primary/5 border border-primary/20 p-3">
+			<p class="text-xs font-semibold text-primary mb-1">
+				<i class="fa-solid fa-shield mr-1" aria-hidden="true"></i> Official Response
+			</p>
+			<p class="text-sm text-foreground-secondary">{item.adminResponse}</p>
+		</div>
+	{/if}
+
+	<!-- Responses -->
+	{#if loadingResponses}
+		<div class="text-foreground-tertiary text-sm">
+			<Spinner /> Loading responses...
+		</div>
+	{:else if responses.length > 0}
+		<div class="space-y-3">
+			<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 (resp.id)}
+				<div class="rounded-lg bg-surface-secondary p-3">
+					<div class="flex items-center justify-between mb-1">
+						{#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>
+				{#if resp.imageUrl}
+					<img src={resp.imageUrl} alt="Pasted screenshot" class="mt-2 max-w-full rounded border border-border" />
+				{/if}
+				</div>
+			{/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 !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>
+			<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"
+					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>
+
+<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>