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

package/README.md

@@ -14,7 +14,8 @@ This is the **client package** — UI components that talk to a [status-feedback
 │  │ StatusPage        │──┼───────┼──│ /api/status        │  │
 │  │ FeedbackButton    │  │       │  │ /api/feedback      │  │
 │  │ DevFeedback       │  │       │  │ /api/incidents     │  │
-│  │ FeedbackBoard     │  │       │  │ /api/board         │  │
+│  │ Feedback board    │  │       │  │ /api/board         │  │
+│  │  (composable)     │  │       │  │                    │  │
 │  └───────────────────┘  │       │  └────────────────────┘  │
 │                         │       │           │              │
 │  npm package            │       │  MSSQL + Azure Blob      │
@@ -152,32 +153,70 @@ Standalone feedback form — embed it wherever you need it.
 | `onSuccess` | `() => void` | — | Called after successful submission |
 | `onError` | `(error: string) => void` | — | Called on submission error |
 
-### FeedbackBoard
+### Feedback board (composable)
 
-Public feedback board with voting, category filtering, and admin responses.
+> 📖 **Full integration guide:** [docs/custom-feedback-integration.md](docs/custom-feedback-integration.md) — composing the parts into your own shell, status management via `getAuthToken`, list restyling, and the not-configured fallback.
+
+The board is composed from parts around **one shared state** (`createFeedbackBoard`), so it drops into your own layout/shell — app rails, breadcrumb, a right-hand detail panel, whatever you have.
 
 ```svelte
-<FeedbackBoard
-  apiUrl="https://status-admin.example.com"
-  apiKey="sf_abc123..."
-  title="Feature Requests"
-  showSubmit={true}
-  submitCategories={['Bug', 'Feature Request', 'Improvement']}
-  categoryConfig={{
-    Bug: { icon: 'fa-solid fa-bug', label: 'Bugs', description: 'Something broken' },
-    'Feature Request': { icon: 'fa-solid fa-lightbulb', label: 'Ideas' },
-  }}
-/>
+<script lang="ts">
+  import {
+    createFeedbackBoard,
+    FeedbackSidebar,
+    FeedbackList,
+    FeedbackDetail,
+    FeedbackSubmitForm,
+    type BoardItem,
+  } from '@alliance-droid/status-feedback-system';
+
+  let { data } = $props();
+  const board = createFeedbackBoard({
+    apiUrl: 'https://status-admin.example.com',
+    apiKey: 'sf_abc123...',
+    userEmail: data.user?.email,
+    getAuthToken: () => auth.getAccessToken(), // optional — enables status management
+    categoryConfig: {
+      Bug: { icon: 'fa-solid fa-bug', label: 'Bugs' },
+      'Feature Request': { icon: 'fa-solid fa-lightbulb', label: 'Ideas' },
+    },
+  });
+
+  let selected = $state<BoardItem | null>(null);
+</script>
+
+<YourSidebar><FeedbackSidebar {board} /></YourSidebar>
+<YourMain><FeedbackList {board} onSelect={(i) => (selected = i)} /></YourMain>
+<YourRail>
+  {#if selected}<FeedbackDetail {board} item={selected} />{/if}
+</YourRail>
+<!-- Render <FeedbackSubmitForm {board} /> wherever you want submission. -->
 ```
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
+`createFeedbackBoard(options)` returns a reactive `FeedbackBoardState` (items, categories, filters, voting, `loadTransitions`/`setStatus`, …) shared by every sub-component.
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
 | `apiUrl` | `string` | required | Admin backend URL |
-| `apiKey` | `string` | required | Project API key |
-| `title` | `string` | `'Feedback Board'` | Header title |
-| `showSubmit` | `boolean` | `true` | Show inline submit form |
-| `submitCategories` | `string[]` | `[]` | Category options for submit form |
-| `categoryConfig` | `Record<string, { label?, icon?, description? }>` | `{}` | Customize sidebar categories |
+| `apiKey` | `string` | required | Project API key (`sf_…`) |
+| `userEmail` | `string` | — | Authenticated user (required to submit feedback/replies) |
+| `categoryConfig` | `Record<string, { label?, icon?, description? }>` | `{}` | Relabel / add icons to sidebar categories |
+| `getAuthToken` | `() => string \| Promise<string \| null>` | — | Bearer token so privileged users can set status (see below) |
+| `pageSize` | `number` | `50` | Items per page |
+
+Exported parts: `createFeedbackBoard`, `FeedbackSidebar`, `FeedbackList`, `FeedbackItem`, `FeedbackDetail`, `FeedbackSubmitForm`.
+
+Categories are fixed by the system (**Bug**, **Feature Request**) — `categoryConfig` only relabels or adds icons.
+
+#### Setting status (Admin / ProductOwner)
+
+When you pass `getAuthToken`, a signed-in **Admin** or **ProductOwner** can change an item's status from the board (via the status badge → menu) — Open → Considering → Accepted, or a decline with a reason — no trip to the admin dashboard.
+
+- `getAuthToken` must return the user's **Alliance OIDC access token** whose audience covers **`status-feedback-admin`** (an *id token*, whose `aud` is your app's client id, is rejected). It's called on demand; return `null` for anonymous / non-privileged users and the control simply won't appear.
+- The token travels as `Authorization: Bearer …` to the admin backend, which **verifies it against the IdP** and derives the user's roles. Authorization (per-project access + which transitions a role may make, including reason prompts on declines/reopens) is enforced **server-side** by the same logic as the dashboard — the client never decides permissions.
+- The available transitions are returned by the backend per item, so the menu always reflects exactly what that user may do.
+
+> Security note: the project `apiKey` alone never grants status changes — it only identifies the project. Every mutation additionally requires a valid IdP token, so the public board key stays safe to embed.
 
 ### DevFeedback
 
@@ -253,10 +292,16 @@ import {
 ```typescript
 // Components
 import {
-  StatusPage, StatusBanner, FeedbackForm, FeedbackButton,
-  FeedbackBoard, DevFeedback,
-  StatusIndicator, UptimeBar, IncidentTimeline, SystemCard,
+  StatusPage, StatusBanner, FeedbackForm, FeedbackButton, DevFeedback,
+  StatusIndicator, UptimeBar, IncidentTimeline, SystemCard, PasteImageInput,
+} from '@alliance-droid/status-feedback-system';
+
+// Feedback board (composable)
+import {
+  createFeedbackBoard,
+  FeedbackSidebar, FeedbackList, FeedbackItem, FeedbackDetail, FeedbackSubmitForm,
 } from '@alliance-droid/status-feedback-system';
+import type { FeedbackBoardState, FeedbackBoardOptions, CategoryConfig } from '@alliance-droid/status-feedback-system';
 
 // API Client
 import { createStatusClient } from '@alliance-droid/status-feedback-system';

package/dist/api.d.ts

@@ -53,6 +53,30 @@ export interface BoardData {
     total: number;
     categories: BoardCategory[];
 }
+/** A status a privileged user may move an item to, and whether it needs a reason. */
+export interface BoardTransition {
+    /** Raw internal status value to submit. */
+    status: string;
+    /** Human label for the menu. */
+    display: string;
+    /** When true, the user must supply a reason to make this transition. */
+    requiresReason: boolean;
+}
+/** The current status of a board item plus the transitions the caller may make. */
+export interface BoardTransitions {
+    current: {
+        status: string;
+        display: string;
+        publicStatus: PublicStatus;
+    };
+    targets: BoardTransition[];
+}
+/** Result of applying a status change from the board. */
+export interface BoardStatusUpdate {
+    id: string;
+    status: string;
+    publicStatus: PublicStatus;
+}
 export interface StatusClient {
     /** Get current system statuses */
     getStatus(): Promise<StatusData>;
@@ -82,6 +106,17 @@ export interface StatusClient {
         limit?: number;
         offset?: number;
     }): Promise<BoardData>;
+    /**
+     * Status transitions the token's user may make on a board item. Requires an
+     * Alliance id token; the backend returns an empty `targets` list for users
+     * without a qualifying role.
+     */
+    getBoardTransitions(feedbackId: string, token: string): Promise<BoardTransitions>;
+    /** Set a board item's status (privileged). Requires an Alliance id token. */
+    updateBoardStatus(feedbackId: string, data: {
+        status: string;
+        reason?: string;
+    }, token: string): Promise<BoardStatusUpdate>;
     /** Vote on a feedback item */
     vote(feedbackId: string, direction?: 'up' | 'down'): Promise<{
         votes: number;

package/dist/api.js

@@ -87,6 +87,18 @@ export function createStatusClient(config) {
             const qs = params.toString();
             return request(`/api/board${qs ? `?${qs}` : ''}`);
         },
+        async getBoardTransitions(feedbackId, token) {
+            return request(`/api/board/feedback/${feedbackId}/transitions`, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+        },
+        async updateBoardStatus(feedbackId, data, token) {
+            return request(`/api/board/feedback/${feedbackId}/status`, {
+                method: 'PATCH',
+                headers: { Authorization: `Bearer ${token}` },
+                body: JSON.stringify(data),
+            });
+        },
         async vote(feedbackId, direction = 'up') {
             return request('/api/board/vote', {
                 method: 'POST',

package/dist/components/DevFeedback.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { createStatusClient, type StatusClient } from '../api.js';
+	import { FEEDBACK_CATEGORIES } from '../types.js';
 	import PasteImageInput from './shared/PasteImageInput.svelte';
 	import {
 		Card,
@@ -363,7 +364,7 @@
 			await getClient().submitFeedback({
 				title: formTitle.trim() || undefined,
 				message: formMessage.trim(),
-				category: formType === 'bug' ? 'bug' : 'feature',
+				category: formType === 'bug' ? FEEDBACK_CATEGORIES[0] : FEEDBACK_CATEGORIES[1],
 				email: userEmail,
 				pageUrl: window.location.href,
 				metadata,

package/dist/components/board/FeedbackDetail.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { Badge, Spinner, Button, Textarea } from '@alliance-droid/svelte-component-library';
+	import { onMount } from 'svelte';
+	import { Spinner, Button, Textarea, Divider } 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';
+	import { timeAgo } from './utils.js';
+	import StatusBadgeMenu from './StatusBadgeMenu.svelte';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -26,6 +27,8 @@
 	let pastedImage = $state<string | null>(null);
 	let pastedFilename = $state('');
 	let pasteError = $state('');
+	let fileInputEl: HTMLInputElement | undefined = $state();
+	let dragActive = $state(false);
 
 	const MAX_BYTES = 5 * 1024 * 1024;
 	const ALLOWED_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
@@ -43,15 +46,8 @@
 		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;
-
+	/** Validate and load an image file (shared by paste, file-pick, and drop). */
+	function processFile(file: File) {
 		if (!ALLOWED_MIME.includes(file.type)) {
 			pasteError = 'Unsupported image type \u2014 PNG, JPEG, GIF, or WebP only';
 			return;
@@ -60,18 +56,41 @@
 			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}`;
+			pastedFilename = file.name || `screenshot-${stamp}.${ext}`;
 			pasteError = '';
 		};
 		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 '';
@@ -108,141 +127,201 @@
 	}
 </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}
+<!--
+	Fills the height of its container so a long thread scrolls while the composer
+	stays pinned to the bottom. If the host doesn't constrain the height, it
+	simply flows (composer sits below the thread). The host should give this a
+	bounded height (e.g. a flex child of a full-height rail) for sticky behavior.
+-->
+<div class="flex h-full flex-col">
+	<!-- Scrollable conversation: status, content, responses -->
+	<div class="min-h-0 flex-1 overflow-y-auto">
+	<!-- 1. Status line -->
+	<div class="px-5 py-4">
+		<div class="flex items-center gap-2.5">
+			{#if item.category}
+				<i class="{board.getCategoryIcon(item.category)} text-sm text-foreground-tertiary" aria-hidden="true"></i>
+			{/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>
+			<StatusBadgeMenu {board} {item} loadOnMount />
 
-	<!-- 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 class="ml-auto flex items-center gap-4 text-xs text-foreground-tertiary">
+				<span>{timeAgo(item.createdAt)}</span>
+				{#if item.responseCount > 0}
+					<span class="inline-flex items-center gap-1.5">
+						<i class="fa-solid fa-comment" aria-hidden="true"></i>
+						{item.responseCount}
+					</span>
+				{/if}
+			</div>
+		</div>
 	</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}
+	<Divider />
 
-	<!-- Responses -->
-	{#if loadingResponses}
-		<div class="text-foreground-tertiary text-sm">
-			<Spinner /> Loading responses...
+	<!-- 2. Poster, content, votes -->
+	<div class="space-y-4 px-5 py-6">
+		{#if item.email}
+			<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
+				<i class="fa-solid fa-circle-user" aria-hidden="true"></i>
+				<span>{item.email}</span>
+			</div>
+		{/if}
+		{#if item.title}
+			<h3 class="text-base font-semibold text-foreground">{item.title}</h3>
+		{/if}
+		<p class="text-sm leading-relaxed text-foreground whitespace-pre-wrap">{item.message}</p>
+		<div class="flex items-center gap-1.5 pt-1 text-xs text-foreground-tertiary" aria-label="{item.votes} votes">
+			<i class="fa-solid fa-arrow-up" aria-hidden="true"></i>
+			<span class="font-medium text-foreground-secondary">{item.votes}</span>
+			<span>votes</span>
 		</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>
+		{#if item.adminResponse}
+			<div class="rounded-lg border-l-2 border-primary/60 bg-primary/5 px-3 py-2.5">
+				<p class="mb-1 text-xs font-semibold uppercase tracking-wide text-primary">Official response</p>
+				<p class="text-sm text-foreground-secondary leading-relaxed">{item.adminResponse}</p>
+			</div>
+		{/if}
+	</div>
+
+	<Divider />
+
+	<!-- 3. Responses -->
+	<div class="px-5 py-4 space-y-3">
+		<h4 class="text-xs font-semibold uppercase tracking-wide text-foreground-tertiary">Responses</h4>
+		{#if loadingResponses}
+			<div class="text-foreground-tertiary text-sm flex items-center gap-2">
+				<Spinner /> Loading responses…
+			</div>
+		{:else if responses.length > 0}
+			<div class="space-y-4">
+				{#each responses as resp (resp.id)}
+					<div class="flex gap-3">
+						<div
+							class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border text-xs font-semibold
+								{resp.author
+								? 'border-border bg-surface-secondary text-foreground-secondary'
+								: 'border-primary/30 bg-primary/10 text-primary'}"
+							aria-hidden="true"
+						>
+							{#if resp.author}{resp.author.charAt(0).toUpperCase()}{:else}<i class="fa-solid fa-shield"></i>{/if}
+						</div>
+						<div class="min-w-0 flex-1">
+							<div class="flex items-baseline justify-between gap-2">
+								<span class="text-sm font-medium {resp.author ? 'text-foreground' : 'text-primary'}">
+									{resp.author ?? 'Team'}
+								</span>
+								<span class="flex-shrink-0 text-xs text-foreground-tertiary">{timeAgo(resp.createdAt)}</span>
+							</div>
+							<p class="mt-1 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>
 					</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}
+				{/each}
+			</div>
+		{:else}
+			<p class="text-sm text-foreground-tertiary">No responses yet.</p>
+		{/if}
+	</div>
+	</div>
+
+	<Divider />
 
-	<!-- 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>
+	<!-- 4. Message composer (pinned footer) -->
+	<div class="shrink-0 px-5 py-5">
 		{#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">
+			<p class="text-sm font-semibold text-green-400">
 				<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>
+			<!-- Composer card: textarea + 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 bind:this={replyTextareaWrapperEl}>
+					<Textarea
+						class="resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm hover:border-transparent focus:border-transparent"
+						value={replyMessage}
+						oninput={(e) => (replyMessage = (e.currentTarget as HTMLTextAreaElement).value)}
+						placeholder="Share your thoughts…"
+						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>
+				{#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>
-					<button type="button" class="sf-paste-remove" onclick={() => { pastedImage = null; pastedFilename = ''; }} aria-label="Remove image">&times;</button>
+				{/if}
+
+				<!-- Toolbar -->
+				<div class="flex items-center justify-between gap-2 border-t border-border px-3 py-2.5">
+					<div class="flex items-center gap-2.5">
+						<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>
+						<span class="hidden text-[11px] text-foreground-tertiary sm:inline">or paste / drop</span>
+					</div>
+					<Button
+						variant="primary"
+						size="sm"
+						disabled={submittingReply || !replyMessage.trim()}
+						loading={submittingReply}
+						onclick={handleSubmitReply}
+					>
+						Submit
+					</Button>
 				</div>
-			{/if}
+
+				<input
+					bind:this={fileInputEl}
+					type="file"
+					accept="image/png,image/jpeg,image/gif,image/webp"
+					class="hidden"
+					onchange={handleFileSelect}
+				/>
+			</div>
 
 			{#if pasteError}
-				<p class="text-sm" style="color: var(--color-danger, #ef4444);">{pasteError}</p>
+				<p class="text-sm text-red-400">
+					<i class="fa-solid fa-exclamation-circle mr-1" aria-hidden="true"></i>
+					{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>
@@ -252,48 +331,3 @@
 		{/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>