convex-feedback-ui 0.1.6 → 0.1.8

package/src/shared/context/FeedbackBodyProvider.tsx

@@ -6,6 +6,7 @@ import {
   useMemo,
   useState,
 } from "react";
+import type { EntryStatusFilter } from "convex-feedback";
 import { debounce } from "../helpers";
 import type {
   FeedbackScreenBodyContextValue,
@@ -23,6 +24,8 @@ export function FeedbackBodyProvider({
   maxCommentDepth,
   debounceDuration,
   collectMetadata,
+  emptyState,
+  loading,
   collectStandardMetadata,
   transformComments,
   renderActor,
@@ -33,6 +36,7 @@ export function FeedbackBodyProvider({
   const [isSearching, setIsSearching] = useState(false);
   const [query, setQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<EntryStatusFilter>("open");
 
   const updateDebouncedQuery = useMemo(
     () => debounce(setDebouncedQuery, debounceDuration),
@@ -51,12 +55,14 @@ export function FeedbackBodyProvider({
     showForm,
     isSearching,
     selectedEntryId,
+    statusFilter,
 
     setQuery,
     setDebouncedQuery,
     setShowForm,
     setIsSearching,
     setSelectedEntryId,
+    setStatusFilter,
 
     hooks,
     entrySort,
@@ -65,6 +71,8 @@ export function FeedbackBodyProvider({
     maxCommentDepth,
     debounceDuration,
     collectMetadata,
+    emptyState,
+    loading,
     collectStandardMetadata,
     transformComments,
     renderActor,

package/src/shared/helpers.ts

@@ -1,4 +1,6 @@
-import type { EntryKind } from "convex-feedback";
+import type { EntryKind, EntryStatusFilter } from "convex-feedback";
+import type { FeedbackMessages } from "./types/messages.js";
+import type { ChoiceChipOption } from "./types/choice.js";
 
 export const kinds: readonly EntryKind[] = [
   "feedback",
@@ -6,6 +8,24 @@ export const kinds: readonly EntryKind[] = [
   "bug_report",
 ];
 
+export function createEntryLabel(
+  enabledKinds: readonly EntryKind[],
+  messages: FeedbackMessages,
+): string {
+  return enabledKinds.length === 1
+    ? messages.newFeedback[enabledKinds[0]!]
+    : messages.board.createEntry;
+}
+
+export function entryStatusChoices(
+  messages: FeedbackMessages,
+): readonly ChoiceChipOption<EntryStatusFilter>[] {
+  return [
+    { value: "open", label: messages.statuses.open },
+    { value: "closed", label: messages.statuses.closed },
+  ];
+}
+
 export function debounce<TArgs extends unknown[]>(
   callback: (...args: TArgs) => void,
   delay: number,

package/src/shared/messages.ts

@@ -5,6 +5,7 @@ export const englishFeedbackMessages: FeedbackMessages = {
     title: "Feedback",
     subtitle: "Share ideas, report problems, and help shape what comes next.",
     searchPlaceholder: "Search feedback…",
+    statusFilter: "Filter by status",
     createEntry: "Create feedback",
     noEntries: "No feedback yet.",
     noSearchResults: "No matching feedback found.",

package/src/shared/types/choice.ts

@@ -0,0 +1,10 @@
+export interface ChoiceChipOption<Value extends string = string> {
+  value: Value;
+  label: string;
+}
+
+export interface ChoiceChipsBaseProps<Value extends string = string> {
+  options: readonly ChoiceChipOption<Value>[];
+  value: Value;
+  onValueChange: (value: Value) => void;
+}

package/src/shared/types/index.ts

@@ -1,5 +1,6 @@
 export type * from "./board.js";
 export type * from "./comment.js";
+export type * from "./choice.js";
 export type * from "./context.js";
 export type * from "./entry.js";
 export type * from "./form.js";

package/src/shared/types/messages.ts

@@ -18,6 +18,9 @@ export interface FeedbackMessages {
     /** Search input placeholder. */
     searchPlaceholder: string;
 
+    /** Accessible label for the open/closed entry status filter. */
+    statusFilter: string;
+
     /** CTA for opening the create-entry flow.
      * This is shown when enabled kinds are two or more.
      * Use messages.newFeedback for a single-kind entry.

package/src/shared/types/screen.ts

@@ -2,6 +2,7 @@ import type {
   CommentSort,
   EntryKind,
   EntrySort,
+  EntryStatusFilter,
   FeedbackComment,
   FeedbackEntry,
 } from "convex-feedback";
@@ -95,6 +96,12 @@ export interface FeedbackScreenBaseProps {
    * entry kind. Disabled by default.
    */
   collectMetadata?: CollectMetadata;
+
+  /** Optional host-owned content rendered above the empty-state message. */
+  emptyState?: ReactNode;
+
+  /** Optional host-owned loading indicator rendered during board loading. */
+  loading?: ReactNode;
 }
 
 export interface FeedbackScreenRootProps
@@ -106,9 +113,16 @@ export interface FeedbackScreenRootProps
 
 export interface FeedbackScreenProviderProps
   extends
-    Required<Omit<FeedbackScreenBaseProps, "collectMetadata">>,
+    Required<
+      Omit<
+        FeedbackScreenBaseProps,
+        "collectMetadata" | "emptyState" | "loading"
+      >
+    >,
     FeedbackScreenTransformationProps {
   collectMetadata?: CollectMetadata;
+  emptyState?: ReactNode;
+  loading?: ReactNode;
   collectStandardMetadata: StandardMetadataCollector;
 }
 
@@ -119,11 +133,13 @@ export interface FeedbackScreenBodyContextValue
   showForm: boolean;
   isSearching: boolean;
   selectedEntryId: string | null;
+  statusFilter: EntryStatusFilter;
   setQuery: React.Dispatch<React.SetStateAction<string>>;
   setDebouncedQuery: React.Dispatch<React.SetStateAction<string>>;
   setShowForm: React.Dispatch<React.SetStateAction<boolean>>;
   setIsSearching: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedEntryId: React.Dispatch<React.SetStateAction<string | null>>;
+  setStatusFilter: React.Dispatch<React.SetStateAction<EntryStatusFilter>>;
 }
 
 export type FeedbackScreenBodyProps = FeedbackColorProps;
@@ -143,6 +159,9 @@ export interface FeedbackScreenListProps {
    * @default true
    */
   showSelectedEntry?: boolean;
+
+  /** Callback for the empty-state create-entry action. */
+  onCreateEntry?: () => void;
 }
 
 export interface FeedbackScreenContentProps