@alliance-droid/status-feedback-system 3.0.0 → 4.0.0

package/dist/components/board/FeedbackSidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Divider, Select } from '@alliance-droid/svelte-component-library';
-	import type { FeedbackBoardState } from './state.svelte.js';
+	import { Divider, Select } from "@alliance-droid/svelte-component-library";
+	import type { FeedbackBoardState } from "./state.svelte.js";
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -9,52 +9,75 @@
 	let { board }: Props = $props();
 
 	const statusOptions = [
-		{ value: 'open', label: 'Open' },
-		{ value: 'resolved', label: 'Resolved' },
-		{ value: 'all', label: 'All' },
+		{ value: "open", label: "Open" },
+		{ value: "resolved", label: "Done" },
+		{ value: "all", label: "All" },
 	];
 
 	const sortOptions = [
-		{ value: 'votes', label: 'Most Votes' },
-		{ value: 'newest', label: 'Newest' },
+		{ value: "votes", label: "Most Votes" },
+		{ value: "newest", label: "Newest" },
 	];
 </script>
 
 <aside class="flex flex-col gap-1" aria-label="Filter feedback">
-	<button
-		class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-			{board.activeCategory === null ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-		onclick={() => (board.activeCategory = null)}
-	>
-		<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
-		<span>All</span>
-		<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{board.total}</span>
-	</button>
-
-	{#each board.categories as cat (cat.name)}
+	<div class="mx-2 pt-2">
 		<button
 			class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
-				{board.activeCategory === cat.name ? 'bg-surface-secondary text-foreground font-semibold' : 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
-			onclick={() => (board.activeCategory = board.activeCategory === cat.name ? null : cat.name)}
+			{board.activeCategory === null
+				? 'bg-surface-secondary text-foreground font-semibold'
+				: 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+			onclick={() => (board.activeCategory = null)}
 		>
-			<i class={board.getCategoryIcon(cat.name)} aria-hidden="true"></i>
-			<span>{board.getCategoryLabel(cat.name)}</span>
-			<span class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs">{cat.count}</span>
+			<i class="fa-solid fa-layer-group" aria-hidden="true"></i>
+			<span>All</span>
+			<span
+				class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs"
+				>{board.total}</span
+			>
 		</button>
-	{/each}
+
+		{#each board.categories as cat (cat.name)}
+			<button
+				class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-left w-full transition-colors
+				{board.activeCategory === cat.name
+					? 'bg-surface-secondary text-foreground font-semibold'
+					: 'text-foreground-secondary hover:bg-surface-hover hover:text-foreground'}"
+				onclick={() =>
+					(board.activeCategory =
+						board.activeCategory === cat.name ? null : cat.name)}
+			>
+				<i class={board.getCategoryIcon(cat.name)} aria-hidden="true"
+				></i>
+				<span>{board.getCategoryLabel(cat.name)}</span>
+				<span
+					class="ml-auto bg-surface-hover px-2 py-0.5 rounded-full text-xs"
+					>{cat.count}</span
+				>
+			</button>
+		{/each}
+	</div>
 
 	<Divider class="my-2" />
 
-	<div class="px-3 space-y-3">
-		<Select
-			label="Status"
-			options={statusOptions}
-			bind:value={board.statusFilter}
-		/>
-		<Select
-			label="Sort By"
-			options={sortOptions}
-			bind:value={board.sortBy}
-		/>
+	<div class="space-y-3">
+		<div class="mx-4">
+			<Select
+				label="Status"
+				class="rounded-lg border-0 bg-surface-hover"
+				options={statusOptions}
+				bind:value={board.statusFilter}
+			/>
+		</div>
+		<Divider class="my-2" />
+		<div class="mx-4">
+			<Select
+				label="Sort By"
+				class="rounded-lg border-0 bg-surface-hover"
+				options={sortOptions}
+				bind:value={board.sortBy}
+			/>
+		</div>
 	</div>
 </aside>
+

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

@@ -1,4 +1,4 @@
-import type { FeedbackBoardState } from './state.svelte.js';
+import type { FeedbackBoardState } from "./state.svelte.js";
 interface Props {
     board: FeedbackBoardState;
 }

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -1,123 +1,239 @@
-<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;
-		/** Available category options for the dropdown */
-		categories?: string[];
-	}
-
-	let { board, categories = [] }: Props = $props();
-
-	let title = $state('');
-	let message = $state('');
-	let category = $state('');
-	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);
-
-	let categoryOptions = $derived(
-		categories.map((c) => ({ value: c, label: board.getCategoryLabel(c) }))
-	);
-
-	async function handleSubmit() {
-		if (!message.trim() || !isAuthenticated) return;
-		submitting = true;
-		error = '';
-		try {
-			await board.submitFeedback({
-				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';
-		} finally {
-			submitting = false;
-		}
-	}
-</script>
-
-<Card variant="outlined" padding="md">
-	{#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)"
-			/>
-			<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">
-					<i class="fa-solid fa-exclamation-circle mr-1"></i>
-					{error}
-				</p>
-			{/if}
-			<div class="flex gap-2 items-center flex-wrap">
-				{#if categoryOptions.length > 0}
-					<div class="min-w-[140px]">
-						<Select
-							options={[{ value: '', label: 'Category...' }, ...categoryOptions]}
-							bind:value={category}
-						/>
-					</div>
-				{/if}
-				<div class="flex-1"></div>
-				<Button
-					variant="primary"
-					disabled={submitting || !message.trim()}
-					loading={submitting}
-					onclick={handleSubmit}
-				>
-					Submit
-				</Button>
-			</div>
-		</div>
-	{/if}
-</Card>
+<script lang="ts">
+	import { Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
+	import { FEEDBACK_CATEGORIES } from '../../types.js';
+	import type { FeedbackBoardState } from './state.svelte.js';
+
+	interface Props {
+		board: FeedbackBoardState;
+	}
+
+	let { board }: Props = $props();
+
+	let title = $state('');
+	let message = $state('');
+	let category = $state('');
+	let submitting = $state(false);
+	let success = $state(false);
+	let error = $state('');
+	let pastedImage = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let fileInputEl: HTMLInputElement | undefined = $state();
+	let dragActive = $state(false);
+	let textareaWrapperEl: HTMLDivElement | undefined = $state();
+	let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+	const MAX_BYTES = 5 * 1024 * 1024;
+	const ALLOWED_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+
+	$effect(() => {
+		if (textareaWrapperEl) {
+			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
+
+	$effect(() => {
+		if (!textareaEl) return;
+		const handler = (e: ClipboardEvent) => handlePaste(e);
+		textareaEl.addEventListener('paste', handler);
+		return () => textareaEl?.removeEventListener('paste', handler);
+	});
+
+	let isAuthenticated = $derived(!!board.userEmail);
+
+	// Labels are the canonical system category names — not the consumer's
+	// `categoryConfig` (which only customizes the sidebar).
+	let categoryOptions = FEEDBACK_CATEGORIES.map((c) => ({ value: c, label: c }));
+
+	/** Validate and load an image file (shared by paste, file-pick, and drop). */
+	function processFile(file: File) {
+		if (!ALLOWED_MIME.includes(file.type)) {
+			error = 'Unsupported image type — PNG, JPEG, GIF, or WebP only';
+			return;
+		}
+		if (file.size > MAX_BYTES) {
+			error = 'Image too large — 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 = file.name || `screenshot-${stamp}.${ext}`;
+			error = '';
+		};
+		reader.readAsDataURL(file);
+	}
+
+	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;
+		const file = imageItem.getAsFile();
+		if (!file) return;
+		e.preventDefault();
+		processFile(file);
+	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		if (file) processFile(file);
+		input.value = '';
+	}
+
+	function handleDrop(e: DragEvent) {
+		e.preventDefault();
+		dragActive = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file) processFile(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`;
+	}
+
+	async function handleSubmit() {
+		if (!message.trim() || !category || !isAuthenticated) return;
+		submitting = true;
+		error = '';
+		try {
+			await board.submitFeedback({
+				title: title.trim() || undefined,
+				message: message.trim(),
+				category,
+				pastedImage,
+			});
+			success = true;
+			title = '';
+			message = '';
+			category = '';
+			pastedImage = null;
+			pastedFilename = '';
+			setTimeout(() => { success = false; }, 2000);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to submit';
+		} finally {
+			submitting = false;
+		}
+	}
+</script>
+
+<div>
+	{#if !isAuthenticated}
+		<div class="py-3 text-center 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="py-2 text-center font-semibold text-green-400">
+			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
+		</div>
+	{:else}
+		<div class="space-y-2">
+			<!-- Composer card: title + description + attachment + toolbar -->
+			<div
+				class="overflow-hidden rounded-xl border bg-background shadow-sm transition-all {dragActive
+					? 'border-primary ring-2 ring-primary/30'
+					: 'border-border focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'}"
+				role="group"
+				ondragover={(e) => { e.preventDefault(); dragActive = true; }}
+				ondragleave={() => (dragActive = false)}
+				ondrop={handleDrop}
+			>
+				<div class="border-b border-border">
+					<Input
+						class="rounded-none border-0 bg-transparent px-4 py-3 text-sm font-medium hover:border-transparent focus:border-transparent"
+						bind:value={title}
+						placeholder="Title (optional)"
+					/>
+				</div>
+
+				<div bind:this={textareaWrapperEl}>
+					<Textarea
+						class="resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm hover:border-transparent focus:border-transparent"
+						value={message}
+						oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+						placeholder="Describe your feedback…"
+						rows={4}
+					/>
+				</div>
+
+				{#if pastedImage}
+					<div class="flex items-center gap-3 border-t border-border px-3 py-2">
+						<img
+							src={pastedImage}
+							alt={pastedFilename}
+							class="h-11 w-11 flex-shrink-0 rounded border border-border object-cover"
+						/>
+						<div class="min-w-0 flex-1">
+							<p class="truncate text-xs font-medium text-foreground">{pastedFilename}</p>
+							<p class="text-[11px] text-foreground-tertiary">{formatSize(pastedImage)}</p>
+						</div>
+						<button
+							type="button"
+							class="flex-shrink-0 rounded p-1.5 text-foreground-tertiary transition-colors hover:bg-surface-hover hover:text-foreground"
+							onclick={() => { pastedImage = null; pastedFilename = ''; }}
+							aria-label="Remove image"
+						>
+							<i class="fa-solid fa-xmark" aria-hidden="true"></i>
+						</button>
+					</div>
+				{/if}
+
+				<!-- Toolbar -->
+				<div class="flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2.5">
+					<div class="flex items-center gap-2">
+						<div class="min-w-[150px]">
+							<Select
+								class="border-0 bg-transparent"
+								size="sm"
+								placeholder="Category…"
+								options={categoryOptions}
+								required
+								bind:value={category}
+							/>
+						</div>
+						<button
+							type="button"
+							class="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-medium text-foreground-secondary transition-colors hover:border-border-strong hover:text-foreground"
+							onclick={() => fileInputEl?.click()}
+						>
+							<i class="fa-solid fa-image" aria-hidden="true"></i>
+							Attach screenshot
+						</button>
+					</div>
+					<Button
+						variant="primary"
+						size="sm"
+						disabled={submitting || !message.trim() || !category}
+						loading={submitting}
+						onclick={handleSubmit}
+					>
+						Submit
+					</Button>
+				</div>
+
+				<input
+					bind:this={fileInputEl}
+					type="file"
+					accept="image/png,image/jpeg,image/gif,image/webp"
+					class="hidden"
+					onchange={handleFileSelect}
+				/>
+			</div>
+
+			{#if error}
+				<p class="text-sm text-red-400">
+					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
+					{error}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -1,8 +1,6 @@
 import type { FeedbackBoardState } from './state.svelte.js';
 interface Props {
     board: FeedbackBoardState;
-    /** Available category options for the dropdown */
-    categories?: string[];
 }
 declare const FeedbackSubmitForm: import("svelte").Component<Props, {}, "">;
 type FeedbackSubmitForm = ReturnType<typeof FeedbackSubmitForm>;