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

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

@@ -0,0 +1,11 @@
+import type { BoardItem } from '../../api.js';
+import type { FeedbackBoardState } from './state.svelte.js';
+interface Props {
+    board: FeedbackBoardState;
+    item: BoardItem;
+    /** Eagerly load transitions on mount (detail view). The list leaves this off. */
+    loadOnMount?: boolean;
+}
+declare const StatusBadgeMenu: import("svelte").Component<Props, {}, "">;
+type StatusBadgeMenu = ReturnType<typeof StatusBadgeMenu>;
+export default StatusBadgeMenu;

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

@@ -1,13 +1,13 @@
 /**
- * Reactive state manager for FeedbackBoard composable components.
+ * Reactive state manager for the composable feedback board components.
  *
  * Usage:
  *   const board = createFeedbackBoard({ apiUrl, apiKey });
  *   <FeedbackSidebar {board} />
  *   <FeedbackList {board} />
  */
-import type { FeedbackResponse } from '../../types.js';
-import { type BoardItem, type BoardCategory, type StatusClient } from '../../api.js';
+import { type FeedbackResponse } from '../../types.js';
+import { type BoardItem, type BoardCategory, type BoardTransitions, type StatusClient } from '../../api.js';
 export interface CategoryConfig {
     label?: string;
     icon?: string;
@@ -19,6 +19,14 @@ export interface FeedbackBoardOptions {
     categoryConfig?: Record<string, CategoryConfig>;
     /** Authenticated user email. Required for submitting feedback and replies. */
     userEmail?: string;
+    /**
+     * Returns the current user's Alliance OIDC **access token** — whose audience
+     * covers `status-feedback-admin` (an id token is rejected by the backend) — or
+     * null if they aren't signed in / not privileged. When provided, privileged
+     * users (Admin / ProductOwner) can set feedback status from the board. Called
+     * on demand so the host controls token refresh.
+     */
+    getAuthToken?: () => string | Promise<string | null>;
     /** Items per page. Default: 50 */
     pageSize?: number;
 }
@@ -32,6 +40,8 @@ export interface FeedbackBoardState {
     readonly loading: boolean;
     readonly loadingMore: boolean;
     readonly error: string;
+    /** Error from the most recent `loadMore()`, or '' — cleared on the next attempt. */
+    readonly loadMoreError: string;
     readonly hasMore: boolean;
     activeCategory: string | null;
     statusFilter: string;
@@ -49,6 +59,17 @@ export interface FeedbackBoardState {
         pastedImage?: string | null;
     }): Promise<void>;
     submitResponse(itemId: string, message: string, pastedImage?: string | null): Promise<void>;
+    /** Whether a token provider was configured (status controls may be available). */
+    readonly canManageStatus: boolean;
+    /** Cached allowed transitions per item id, populated by loadTransitions. */
+    readonly transitions: Record<string, BoardTransitions>;
+    /**
+     * Fetch the status transitions the current user may make on an item. Returns
+     * null when there's no token or the user isn't privileged for this item.
+     */
+    loadTransitions(itemId: string): Promise<BoardTransitions | null>;
+    /** Apply a status change to an item (privileged). Throws on failure. */
+    setStatus(itemId: string, status: string, reason?: string): Promise<void>;
     getCategoryIcon(name: string): string;
     getCategoryLabel(name: string): string;
     getCategoryDescription(name: string): string;

package/dist/components/board/state.svelte.js

@@ -1,14 +1,15 @@
 /**
- * Reactive state manager for FeedbackBoard composable components.
+ * Reactive state manager for the composable feedback board components.
  *
  * Usage:
  *   const board = createFeedbackBoard({ apiUrl, apiKey });
  *   <FeedbackSidebar {board} />
  *   <FeedbackList {board} />
  */
-import { createStatusClient } from '../../api.js';
+import { FEEDBACK_CATEGORY_ICONS } from '../../types.js';
+import { createStatusClient, } from '../../api.js';
 export function createFeedbackBoard(options) {
-    const { apiUrl, apiKey, categoryConfig = {}, userEmail, pageSize = 50 } = options;
+    const { apiUrl, apiKey, categoryConfig = {}, userEmail, getAuthToken, pageSize = 50 } = options;
     const client = createStatusClient({ apiUrl, apiKey });
     const resolvedEmail = userEmail?.trim() || null;
     // Reactive state
@@ -23,9 +24,13 @@ export function createFeedbackBoard(options) {
     let sortBy = $state('votes');
     let votedItems = $state({});
     let voteErrors = $state({});
+    let loadMoreError = $state('');
+    let transitions = $state({});
     // Response cache
     const responseCache = {};
-    // Track in-flight votes to prevent duplicate requests
+    // Track in-flight votes to prevent duplicate requests. A plain Set is correct
+    // here — an internal dedup guard, not reactive UI state.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const pendingVotes = new Set();
     async function load() {
         loading = true;
@@ -53,6 +58,7 @@ export function createFeedbackBoard(options) {
         if (loadingMore || items.length >= total)
             return;
         loadingMore = true;
+        loadMoreError = '';
         try {
             const data = await client.getBoard({
                 category: activeCategory || undefined,
@@ -64,8 +70,8 @@ export function createFeedbackBoard(options) {
             items = [...items, ...data.items];
             total = data.total;
         }
-        catch {
-            // Silently fail — user can retry
+        catch (e) {
+            loadMoreError = e instanceof Error ? e.message : 'Failed to load more';
         }
         finally {
             loadingMore = false;
@@ -85,7 +91,8 @@ export function createFeedbackBoard(options) {
         const prev = votedItems[itemId];
         // Clear any prior error for this item
         if (voteErrors[itemId]) {
-            const { [itemId]: _, ...rest } = voteErrors;
+            const rest = { ...voteErrors };
+            delete rest[itemId];
             voteErrors = rest;
         }
         try {
@@ -105,8 +112,9 @@ export function createFeedbackBoard(options) {
             voteErrors = { ...voteErrors, [itemId]: 'Vote failed' };
             // Auto-dismiss after 3 seconds
             setTimeout(() => {
-                const { [itemId]: _, ...rest } = voteErrors;
-                voteErrors = rest;
+                const next = { ...voteErrors };
+                delete next[itemId];
+                voteErrors = next;
             }, 3000);
         }
         finally {
@@ -155,6 +163,43 @@ export function createFeedbackBoard(options) {
         if (item)
             item.responseCount += 1;
     }
+    async function resolveToken() {
+        if (!getAuthToken)
+            return null;
+        try {
+            return (await getAuthToken()) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    async function loadTransitions(itemId) {
+        const token = await resolveToken();
+        if (!token)
+            return null;
+        try {
+            const result = await client.getBoardTransitions(itemId, token);
+            transitions = { ...transitions, [itemId]: result };
+            return result;
+        }
+        catch {
+            // 401/403 → not signed in or not privileged for this item: no control.
+            return null;
+        }
+    }
+    async function setStatus(itemId, status, reason) {
+        const token = await resolveToken();
+        if (!token)
+            throw new Error('Authentication required to set status');
+        const result = await client.updateBoardStatus(itemId, { status, reason }, token);
+        const item = items.find((i) => i.id === itemId);
+        if (item) {
+            item.status = result.status;
+            item.publicStatus = result.publicStatus;
+        }
+        // Allowed targets depend on the new status — refresh the cache.
+        await loadTransitions(itemId);
+    }
     return {
         get client() { return client; },
         get categoryConfig() { return categoryConfig; },
@@ -165,6 +210,7 @@ export function createFeedbackBoard(options) {
         get loading() { return loading; },
         get loadingMore() { return loadingMore; },
         get error() { return error; },
+        get loadMoreError() { return loadMoreError; },
         get hasMore() { return items.length < total; },
         get activeCategory() { return activeCategory; },
         set activeCategory(v) { activeCategory = v; },
@@ -180,8 +226,14 @@ export function createFeedbackBoard(options) {
         getResponses,
         submitFeedback,
         submitResponse,
+        get canManageStatus() { return !!getAuthToken; },
+        get transitions() { return transitions; },
+        loadTransitions,
+        setStatus,
         getCategoryIcon(name) {
-            return categoryConfig[name]?.icon || 'fa-solid fa-circle';
+            return (categoryConfig[name]?.icon ||
+                FEEDBACK_CATEGORY_ICONS[name.toLowerCase()] ||
+                'fa-solid fa-circle');
         },
         getCategoryLabel(name) {
             return categoryConfig[name]?.label || name;

package/dist/index.d.ts

@@ -15,7 +15,6 @@ export { default as StatusPage } from './components/StatusPage.svelte';
 export { default as StatusBanner } from './components/StatusBanner.svelte';
 export { default as FeedbackForm } from './components/FeedbackForm.svelte';
 export { default as DevFeedback } from './components/DevFeedback.svelte';
-export { default as FeedbackBoard } from './components/FeedbackBoard.svelte';
 export { default as FeedbackButton } from './components/FeedbackButton.svelte';
 export { createFeedbackBoard, FeedbackSidebar, FeedbackList, FeedbackItem, FeedbackDetail, FeedbackSubmitForm, } from './components/board/index.js';
 export type { FeedbackBoardState, FeedbackBoardOptions, CategoryConfig } from './components/board/index.js';

package/dist/index.js

@@ -16,7 +16,6 @@ export { default as StatusPage } from './components/StatusPage.svelte';
 export { default as StatusBanner } from './components/StatusBanner.svelte';
 export { default as FeedbackForm } from './components/FeedbackForm.svelte';
 export { default as DevFeedback } from './components/DevFeedback.svelte';
-export { default as FeedbackBoard } from './components/FeedbackBoard.svelte';
 export { default as FeedbackButton } from './components/FeedbackButton.svelte';
 // ── Composable Board Components ──
 export { createFeedbackBoard, FeedbackSidebar, FeedbackList, FeedbackItem, FeedbackDetail, FeedbackSubmitForm, } from './components/board/index.js';

package/dist/types.d.ts

@@ -13,6 +13,18 @@ export type IncidentSeverity = 'minor' | 'major' | 'critical';
 export type FeedbackStatus = string;
 /** Coarse, consumer-facing status buckets the board API returns as `publicStatus`. */
 export type PublicStatus = 'open' | 'planned' | 'in_progress' | 'done' | 'declined';
+/**
+ * The categories a user can file feedback under. The feedback system owns this
+ * list — consumers don't supply their own.
+ */
+export declare const FEEDBACK_CATEGORIES: readonly ["Bug", "Feature Request"];
+export type FeedbackCategory = (typeof FEEDBACK_CATEGORIES)[number];
+/**
+ * Default Font Awesome icon per category, keyed by the lower-cased category
+ * name so it matches regardless of how the value was stored (e.g. "Bug" vs
+ * "bug"). A consumer's `categoryConfig` icon takes precedence over these.
+ */
+export declare const FEEDBACK_CATEGORY_ICONS: Record<string, string>;
 export interface Project {
     id: string;
     name: string;

package/dist/types.js

@@ -1,4 +1,17 @@
 /**
  * Shared types for the status-feedback-system package
  */
-export {};
+/**
+ * The categories a user can file feedback under. The feedback system owns this
+ * list — consumers don't supply their own.
+ */
+export const FEEDBACK_CATEGORIES = ['Bug', 'Feature Request'];
+/**
+ * Default Font Awesome icon per category, keyed by the lower-cased category
+ * name so it matches regardless of how the value was stored (e.g. "Bug" vs
+ * "bug"). A consumer's `categoryConfig` icon takes precedence over these.
+ */
+export const FEEDBACK_CATEGORY_ICONS = {
+    bug: 'fa-solid fa-bug',
+    'feature request': 'fa-solid fa-lightbulb',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alliance-droid/status-feedback-system",
-	"version": "3.1.0",
+	"version": "4.0.1",
 	"type": "module",
 	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
 	"svelte": "./dist/index.js",

package/dist/components/FeedbackBoard.svelte

@@ -1,110 +0,0 @@
-<script lang="ts">
-	/**
-	 * All-in-one feedback board component.
-	 * Composes the board sub-components (FeedbackSidebar, FeedbackList,
-	 * FeedbackSubmitForm) with a shared FeedbackBoardState.
-	 */
-	import { untrack } from 'svelte';
-	import { Button } from '@alliance-droid/svelte-component-library';
-	import type { BoardItem } from '../api.js';
-	import { createFeedbackBoard, type CategoryConfig, type FeedbackBoardState } from './board/index.js';
-	import FeedbackSidebar from './board/FeedbackSidebar.svelte';
-	import FeedbackList from './board/FeedbackList.svelte';
-	import FeedbackDetail from './board/FeedbackDetail.svelte';
-	import FeedbackSubmitForm from './board/FeedbackSubmitForm.svelte';
-
-	interface Props {
-		apiUrl: string;
-		apiKey: string;
-		/** Authenticated user email. Required for submitting feedback and replies. */
-		userEmail?: string;
-		/** Category labels and icons — order determines sidebar order */
-		categoryConfig?: Record<string, CategoryConfig>;
-		/** Title shown at the top */
-		title?: string;
-		/** Show the submit form inline */
-		showSubmit?: boolean;
-		/** Available categories for the submit form */
-		submitCategories?: string[];
-	}
-
-	let {
-		apiUrl,
-		apiKey,
-		userEmail,
-		categoryConfig = {},
-		title = 'Feedback Board',
-		showSubmit = true,
-		submitCategories = [],
-	}: Props = $props();
-
-	let board: FeedbackBoardState = $derived(
-		createFeedbackBoard({ apiUrl, apiKey, userEmail, categoryConfig })
-	);
-
-	let showForm = $state(false);
-	let selectedItem = $state<BoardItem | null>(null);
-
-	function selectItem(item: BoardItem) {
-		selectedItem = item;
-	}
-
-	function clearSelection() {
-		selectedItem = null;
-	}
-</script>
-
-<div class="flex gap-6 min-h-[400px]">
-	<!-- Sidebar -->
-	<aside class="w-56 flex-shrink-0">
-		<FeedbackSidebar {board} />
-	</aside>
-
-	<!-- Main -->
-	<main class="flex-1 min-w-0">
-		<div class="flex items-start justify-between mb-4">
-			<div>
-				{#if board.activeCategory}
-					<h2 class="text-xl font-bold flex items-center gap-2">
-						<i class={board.getCategoryIcon(board.activeCategory)}></i>
-						{board.getCategoryLabel(board.activeCategory)}
-					</h2>
-					{#if board.getCategoryDescription(board.activeCategory)}
-						<p class="text-sm text-foreground-secondary mt-1">{board.getCategoryDescription(board.activeCategory)}</p>
-					{/if}
-				{:else if title}
-					<h2 class="text-xl font-bold">{title}</h2>
-				{/if}
-			</div>
-			{#if showSubmit}
-				<Button variant="primary" onclick={() => (showForm = !showForm)}>
-					<i class="fa-solid fa-plus mr-1.5"></i> Submit
-				</Button>
-			{/if}
-		</div>
-
-		<!-- Submit form -->
-		{#if showForm}
-			<div class="mb-4">
-				<FeedbackSubmitForm {board} categories={submitCategories} />
-			</div>
-		{/if}
-
-		<!-- Items / Detail -->
-		{#if selectedItem}
-			<div class="mb-4">
-				<button
-					onclick={clearSelection}
-					class="text-sm text-foreground-secondary hover:text-foreground transition-colors mb-3"
-				>
-					<i class="fa-solid fa-arrow-left mr-1" aria-hidden="true"></i> Back to list
-				</button>
-				<div class="rounded-xl border border-border bg-surface p-5">
-					<FeedbackDetail {board} item={selectedItem} />
-				</div>
-			</div>
-		{:else}
-			<FeedbackList {board} onSelect={selectItem} />
-		{/if}
-	</main>
-</div>

package/dist/components/FeedbackBoard.svelte.d.ts

@@ -1,18 +0,0 @@
-import { type CategoryConfig } from './board/index.js';
-interface Props {
-    apiUrl: string;
-    apiKey: string;
-    /** Authenticated user email. Required for submitting feedback and replies. */
-    userEmail?: string;
-    /** Category labels and icons — order determines sidebar order */
-    categoryConfig?: Record<string, CategoryConfig>;
-    /** Title shown at the top */
-    title?: string;
-    /** Show the submit form inline */
-    showSubmit?: boolean;
-    /** Available categories for the submit form */
-    submitCategories?: string[];
-}
-declare const FeedbackBoard: import("svelte").Component<Props, {}, "">;
-type FeedbackBoard = ReturnType<typeof FeedbackBoard>;
-export default FeedbackBoard;