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

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -1,123 +1,123 @@
-<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 { 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>

package/dist/components/board/utils.d.ts

@@ -1,4 +1,7 @@
 /** Relative time formatting for feedback timestamps */
 export declare function timeAgo(timestamp: number): string;
-/** Map feedback status to badge variant */
-export declare function getStatusBadgeVariant(status: string): 'success' | 'neutral' | 'info';
+import type { PublicStatus } from '../../types.js';
+/** Human label for a public board status. */
+export declare function publicStatusLabel(status: PublicStatus): string;
+/** Map a public board status to a badge variant. */
+export declare function getStatusBadgeVariant(status: PublicStatus): 'success' | 'neutral' | 'info' | 'warning';

package/dist/components/board/utils.js

@@ -12,11 +12,25 @@ export function timeAgo(timestamp) {
         return `${days}d ago`;
     return new Date(timestamp).toLocaleDateString();
 }
-/** Map feedback status to badge variant */
+const PUBLIC_STATUS_LABELS = {
+    open: 'Open',
+    planned: 'Planned',
+    in_progress: 'In progress',
+    done: 'Done',
+    declined: 'Declined'
+};
+const PUBLIC_STATUS_VARIANTS = {
+    open: 'info',
+    planned: 'info',
+    in_progress: 'warning',
+    done: 'success',
+    declined: 'neutral'
+};
+/** Human label for a public board status. */
+export function publicStatusLabel(status) {
+    return PUBLIC_STATUS_LABELS[status] ?? status;
+}
+/** Map a public board status to a badge variant. */
 export function getStatusBadgeVariant(status) {
-    if (status === 'new' || status === 'reviewed')
-        return 'success';
-    if (status === 'resolved')
-        return 'neutral';
-    return 'info';
+    return PUBLIC_STATUS_VARIANTS[status] ?? 'neutral';
 }

package/dist/components/dev/DevContextMenu.svelte

@@ -1,178 +1,178 @@
-<script lang="ts">
-	interface Props {
-		x: number;
-		y: number;
-		boardUrl?: string;
-		onReportBug: () => void;
-		onRequestFeature: () => void;
-		onViewBoard?: () => void;
-	}
-
-	import { onMount, onDestroy } from 'svelte';
-
-	let { x, y, boardUrl, onReportBug, onRequestFeature, onViewBoard }: Props = $props();
-
-	let popoverEl: HTMLDivElement | undefined = $state();
-	let originalParent: HTMLElement | null = null;
-	let portalTarget: HTMLElement | null = null;
-
-	let adjustedX = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 800) - 200));
-	let adjustedY = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 600) - 160));
-
-	/**
-	 * Find the topmost open modal dialog.
-	 * showModal() makes everything outside the dialog inert — including
-	 * top-layer popovers that aren't descendants of the dialog.
-	 * By portalling into the dialog, our menu becomes a descendant and
-	 * escapes the inertness.
-	 */
-	function findOpenModalDialog(): HTMLDialogElement | null {
-		const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog[open]');
-		// showModal() sets the `modal` property — filter for true modals
-		for (const d of dialogs) {
-			// A dialog opened with showModal() will have a non-null ::backdrop
-			// and will be in the top layer. We can detect this via the "open"
-			// attribute + checking if it has modal behavior (no direct API,
-			// but modal dialogs block interaction with the rest of the page).
-			// The simplest reliable check: modal dialogs have returnValue capability
-			// and are in the top layer. In practice, all open dialogs we care about
-			// are modal since our Modal component always uses showModal().
-			if (d.open) return d;
-		}
-		return null;
-	}
-
-	onMount(() => {
-		if (!popoverEl) return;
-
-		// If a modal dialog is open, portal into it to escape inertness
-		const modalDialog = findOpenModalDialog();
-		if (modalDialog) {
-			originalParent = popoverEl.parentElement;
-			portalTarget = modalDialog;
-			modalDialog.appendChild(popoverEl);
-		}
-
-		// Show the popover to promote it to the top layer
-		if (typeof popoverEl.showPopover === 'function') {
-			try {
-				popoverEl.showPopover();
-			} catch {
-				// Fallback: popover API not supported, z-index inline style still applies
-			}
-		}
-	});
-
-	onDestroy(() => {
-		// Move the element back before Svelte tries to clean up
-		if (popoverEl && portalTarget && originalParent) {
-			try {
-				if (typeof popoverEl.hidePopover === 'function') {
-					popoverEl.hidePopover();
-				}
-				originalParent.appendChild(popoverEl);
-			} catch {
-				// Element may already be removed
-			}
-		}
-	});
-
-	function handleKeydown(e: KeyboardEvent) {
-		const menu = (e.currentTarget as HTMLElement);
-		const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
-		const currentIndex = Array.from(items).indexOf(e.target as HTMLElement);
-
-		if (e.key === 'ArrowDown') {
-			e.preventDefault();
-			const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-			items[next]?.focus();
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault();
-			const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-			items[prev]?.focus();
-		}
-	}
-</script>
-
-<!-- popover="manual" promotes to browser top layer (above <dialog> modals) -->
-<div
-	bind:this={popoverEl}
-	role="presentation"
-	popover="manual"
-	class="sf-ctx-popover"
-	style="left: {adjustedX}px; top: {adjustedY}px;"
-	onmousedown={(e) => e.stopPropagation()}
-	onclick={(e) => e.stopPropagation()}
-	onkeydown={(e) => e.stopPropagation()}
->
-	<div class="sf-ctx-menu" role="menu" tabindex="-1" aria-label="Feedback actions" onkeydown={handleKeydown}>
-		<button class="sf-ctx-item" role="menuitem" onclick={onReportBug}>
-			<i class="fa-solid fa-bug text-red-400" aria-hidden="true"></i>
-			Report Bug
-		</button>
-		<button class="sf-ctx-item" role="menuitem" onclick={onRequestFeature}>
-			<i class="fa-solid fa-lightbulb text-amber-400" aria-hidden="true"></i>
-			Request Feature
-		</button>
-		{#if boardUrl && onViewBoard}
-			<div class="sf-ctx-divider" role="separator">
-				<button class="sf-ctx-item sf-ctx-item-secondary" role="menuitem" onclick={onViewBoard}>
-					<i class="fa-solid fa-clipboard-list" aria-hidden="true"></i>
-					View Open Issues
-				</button>
-			</div>
-		{/if}
-	</div>
-</div>
-
-<style>
-	/* Override popover defaults — remove browser default styles */
-	.sf-ctx-popover {
-		position: fixed;
-		margin: 0;
-		padding: 0;
-		border: none;
-		background: transparent;
-		overflow: visible;
-		/* Fallback for browsers without popover support */
-		z-index: 99999;
-	}
-
-	.sf-ctx-menu {
-		background: var(--sf-surface, var(--color-surface, #1e293b));
-		border: 1px solid var(--sf-border, var(--color-border, #334155));
-		border-radius: 0.5rem;
-		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-		overflow: hidden;
-		min-width: 180px;
-	}
-
-	.sf-ctx-item {
-		display: flex;
-		align-items: center;
-		gap: 0.625rem;
-		width: 100%;
-		padding: 0.625rem 0.75rem;
-		font-size: 0.875rem;
-		color: var(--sf-foreground, var(--color-foreground, #e2e8f0));
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		text-align: left;
-		transition: background 0.15s;
-	}
-
-	.sf-ctx-item:hover,
-	.sf-ctx-item:focus-visible {
-		background: var(--sf-surface-hover, var(--color-surface-hover, #334155));
-		outline: none;
-	}
-
-	.sf-ctx-item-secondary {
-		color: var(--sf-foreground-secondary, var(--color-foreground-secondary, #94a3b8));
-	}
-
-	.sf-ctx-divider {
-		border-top: 1px solid var(--sf-border, var(--color-border, #334155));
-	}
-</style>
+<script lang="ts">
+	interface Props {
+		x: number;
+		y: number;
+		boardUrl?: string;
+		onReportBug: () => void;
+		onRequestFeature: () => void;
+		onViewBoard?: () => void;
+	}
+
+	import { onMount, onDestroy } from 'svelte';
+
+	let { x, y, boardUrl, onReportBug, onRequestFeature, onViewBoard }: Props = $props();
+
+	let popoverEl: HTMLDivElement | undefined = $state();
+	let originalParent: HTMLElement | null = null;
+	let portalTarget: HTMLElement | null = null;
+
+	let adjustedX = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 800) - 200));
+	let adjustedY = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 600) - 160));
+
+	/**
+	 * Find the topmost open modal dialog.
+	 * showModal() makes everything outside the dialog inert — including
+	 * top-layer popovers that aren't descendants of the dialog.
+	 * By portalling into the dialog, our menu becomes a descendant and
+	 * escapes the inertness.
+	 */
+	function findOpenModalDialog(): HTMLDialogElement | null {
+		const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog[open]');
+		// showModal() sets the `modal` property — filter for true modals
+		for (const d of dialogs) {
+			// A dialog opened with showModal() will have a non-null ::backdrop
+			// and will be in the top layer. We can detect this via the "open"
+			// attribute + checking if it has modal behavior (no direct API,
+			// but modal dialogs block interaction with the rest of the page).
+			// The simplest reliable check: modal dialogs have returnValue capability
+			// and are in the top layer. In practice, all open dialogs we care about
+			// are modal since our Modal component always uses showModal().
+			if (d.open) return d;
+		}
+		return null;
+	}
+
+	onMount(() => {
+		if (!popoverEl) return;
+
+		// If a modal dialog is open, portal into it to escape inertness
+		const modalDialog = findOpenModalDialog();
+		if (modalDialog) {
+			originalParent = popoverEl.parentElement;
+			portalTarget = modalDialog;
+			modalDialog.appendChild(popoverEl);
+		}
+
+		// Show the popover to promote it to the top layer
+		if (typeof popoverEl.showPopover === 'function') {
+			try {
+				popoverEl.showPopover();
+			} catch {
+				// Fallback: popover API not supported, z-index inline style still applies
+			}
+		}
+	});
+
+	onDestroy(() => {
+		// Move the element back before Svelte tries to clean up
+		if (popoverEl && portalTarget && originalParent) {
+			try {
+				if (typeof popoverEl.hidePopover === 'function') {
+					popoverEl.hidePopover();
+				}
+				originalParent.appendChild(popoverEl);
+			} catch {
+				// Element may already be removed
+			}
+		}
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		const menu = (e.currentTarget as HTMLElement);
+		const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
+		const currentIndex = Array.from(items).indexOf(e.target as HTMLElement);
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+			items[next]?.focus();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+			items[prev]?.focus();
+		}
+	}
+</script>
+
+<!-- popover="manual" promotes to browser top layer (above <dialog> modals) -->
+<div
+	bind:this={popoverEl}
+	role="presentation"
+	popover="manual"
+	class="sf-ctx-popover"
+	style="left: {adjustedX}px; top: {adjustedY}px;"
+	onmousedown={(e) => e.stopPropagation()}
+	onclick={(e) => e.stopPropagation()}
+	onkeydown={(e) => e.stopPropagation()}
+>
+	<div class="sf-ctx-menu" role="menu" tabindex="-1" aria-label="Feedback actions" onkeydown={handleKeydown}>
+		<button class="sf-ctx-item" role="menuitem" onclick={onReportBug}>
+			<i class="fa-solid fa-bug text-red-400" aria-hidden="true"></i>
+			Report Bug
+		</button>
+		<button class="sf-ctx-item" role="menuitem" onclick={onRequestFeature}>
+			<i class="fa-solid fa-lightbulb text-amber-400" aria-hidden="true"></i>
+			Request Feature
+		</button>
+		{#if boardUrl && onViewBoard}
+			<div class="sf-ctx-divider" role="separator">
+				<button class="sf-ctx-item sf-ctx-item-secondary" role="menuitem" onclick={onViewBoard}>
+					<i class="fa-solid fa-clipboard-list" aria-hidden="true"></i>
+					View Open Issues
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Override popover defaults — remove browser default styles */
+	.sf-ctx-popover {
+		position: fixed;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: transparent;
+		overflow: visible;
+		/* Fallback for browsers without popover support */
+		z-index: 99999;
+	}
+
+	.sf-ctx-menu {
+		background: var(--sf-surface, var(--color-surface, #1e293b));
+		border: 1px solid var(--sf-border, var(--color-border, #334155));
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+		overflow: hidden;
+		min-width: 180px;
+	}
+
+	.sf-ctx-item {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		font-size: 0.875rem;
+		color: var(--sf-foreground, var(--color-foreground, #e2e8f0));
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+	}
+
+	.sf-ctx-item:hover,
+	.sf-ctx-item:focus-visible {
+		background: var(--sf-surface-hover, var(--color-surface-hover, #334155));
+		outline: none;
+	}
+
+	.sf-ctx-item-secondary {
+		color: var(--sf-foreground-secondary, var(--color-foreground-secondary, #94a3b8));
+	}
+
+	.sf-ctx-divider {
+		border-top: 1px solid var(--sf-border, var(--color-border, #334155));
+	}
+</style>