convex-feedback-ui 0.1.5 → 0.1.7

package/src/react/screen.tsx

@@ -11,6 +11,7 @@ import {
   FeedbackProvider,
   useFeedbackUi,
 } from "../shared/context/FeedbackProvider";
+import { createEntryLabel, entryStatusChoices } from "../shared/helpers.js";
 import type {
   FeedbackScreenCommentBranchProps,
   FeedbackScreenContentProps,
@@ -22,6 +23,7 @@ import type {
 } from "../shared/types/";
 import {
   Comment,
+  ChoiceChips,
   FeedbackBoard,
   FeedbackEntry,
   FeedbackForm,
@@ -52,6 +54,7 @@ export function FeedbackScreen({
   renderActor,
   debounceDuration = 300,
   collectMetadata,
+  emptyState,
   ...props
 }: FeedbackScreenProps) {
   return (
@@ -64,6 +67,7 @@ export function FeedbackScreen({
         maxCommentDepth={maxCommentDepth}
         debounceDuration={debounceDuration}
         collectMetadata={collectMetadata}
+        emptyState={emptyState}
         collectStandardMetadata={collectWebMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
@@ -90,16 +94,24 @@ function FeedbackScreenInner({
     setShowForm,
     setSelectedEntryId,
     selectedEntryId,
+    statusFilter,
+    setStatusFilter,
     query,
     setQuery,
     debouncedQuery,
+    emptyState,
   } = useFeedbackBody();
   const { messages } = useFeedbackUi();
 
-  const list = hooks.useEntries({ sort: entrySort, kinds: enabledKinds });
+  const list = hooks.useEntries({
+    sort: entrySort,
+    kinds: enabledKinds,
+    statusFilter,
+  });
   const searchResults = hooks.useSearchEntries({
     searchQuery: debouncedQuery,
     kinds: enabledKinds,
+    statusFilter,
   });
 
   if (selectedEntryId !== null) {
@@ -125,13 +137,21 @@ function FeedbackScreenInner({
         <div>
           <FeedbackBoard.Title />
           <p className="cf-board__subtitle">{messages.board.subtitle}</p>
+          <ChoiceChips
+            aria-label={messages.board.statusFilter}
+            options={entryStatusChoices(messages)}
+            value={statusFilter}
+            onValueChange={setStatusFilter}
+          />
         </div>
         <button
           type="button"
           className="cf-button cf-button--primary"
           onClick={() => setShowForm((current) => !current)}
         >
-          {showForm ? messages.form.cancel : messages.board.createEntry}
+          {showForm
+            ? messages.form.cancel
+            : createEntryLabel(enabledKinds, messages)}
         </button>
       </FeedbackBoard.Header>
 
@@ -146,26 +166,39 @@ function FeedbackScreenInner({
 
       <FeedbackBoard.Search value={query} onValueChange={setQuery} />
 
-      {loading && <p className="cf-state">{messages.board.loading}</p>}
-      {!loading && entries !== undefined && entries.length === 0 && (
-        <p className="cf-state">
-          {searching
-            ? messages.board.noSearchResults
-            : messages.board.noEntries}
-        </p>
+      {loading ? (
+        <FeedbackBoard.State>
+          <span className="cf-state__message">{messages.board.loading}</span>
+        </FeedbackBoard.State>
+      ) : entries !== undefined && entries.length === 0 ? (
+        <FeedbackBoard.State>
+          {emptyState}
+          <span className="cf-state__message">
+            {searching
+              ? messages.board.noSearchResults
+              : messages.board.noEntries}
+          </span>
+          <button
+            type="button"
+            className="cf-button cf-button--primary"
+            onClick={() => setShowForm(true)}
+          >
+            {createEntryLabel(enabledKinds, messages)}
+          </button>
+        </FeedbackBoard.State>
+      ) : (
+        <FeedbackBoard.List>
+          {(entries ?? []).map((entry) => (
+            <EntryCard
+              key={entry.id}
+              entry={entry}
+              hooks={hooks}
+              onOpen={() => setSelectedEntryId(entry.id)}
+            />
+          ))}
+        </FeedbackBoard.List>
       )}
 
-      <FeedbackBoard.List>
-        {(entries ?? []).map((entry) => (
-          <EntryCard
-            key={entry.id}
-            entry={entry}
-            hooks={hooks}
-            onOpen={() => setSelectedEntryId(entry.id)}
-          />
-        ))}
-      </FeedbackBoard.List>
-
       {!searching && list.status === "CanLoadMore" && (
         <button
           type="button"
@@ -273,19 +306,20 @@ function CreateEntryForm({ onCreated }: FeedbackScreenEntryModalProps) {
 
   return (
     <FeedbackForm.Root onSubmit={submit}>
-      <label className="cf-field">
-        <span>{messages.form.kind}</span>
-        <FeedbackForm.Select
-          value={kind}
-          onChange={(event) => setKind(event.currentTarget.value as EntryKind)}
-        >
-          {enabledKinds.map((value) => (
-            <option key={value} value={value}>
-              {messages.kinds[value]}
-            </option>
-          ))}
-        </FeedbackForm.Select>
-      </label>
+      {enabledKinds.length > 1 && (
+        <label className="cf-field">
+          <span>{messages.form.kind}</span>
+          <ChoiceChips
+            aria-label={messages.form.kind}
+            options={enabledKinds.map((value) => ({
+              value,
+              label: messages.kinds[value],
+            }))}
+            value={kind}
+            onValueChange={setKind}
+          />
+        </label>
+      )}
       <label className="cf-field">
         <span>{messages.form.title}</span>
         <FeedbackForm.Input

package/src/react/styles.css

@@ -30,6 +30,33 @@
   margin: 0.4rem 0 0;
   color: var(--cf-muted);
 }
+:where(.cf-board) :where(.cf-choice-chips) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+  margin-top: 0.75rem;
+}
+:where(.cf-board) :where(.cf-choice-chip) {
+  border: 1px solid var(--cf-border);
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: var(--cf-surface);
+  color: var(--cf-muted);
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+:where(.cf-board) :where(.cf-choice-chip[data-selected="true"]) {
+  border-color: var(--cf-primary);
+  background: color-mix(in srgb, var(--cf-primary) 10%, var(--cf-surface));
+  color: var(--cf-primary);
+}
+:where(.cf-board) :where(.cf-choice-chip:focus-visible) {
+  outline: 3px solid color-mix(in srgb, var(--cf-primary) 25%, transparent);
+  outline-offset: 2px;
+}
 :where(.cf-board) :where(.cf-board__list),
 :where(.cf-board) :where(.cf-comments) {
   display: grid;
@@ -198,8 +225,18 @@
   -webkit-box-orient: vertical;
 }
 :where(.cf-board) :where(.cf-state) {
+  display: flex;
+  min-height: 180px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cf-space);
+  padding: calc(var(--cf-space) * 1.5);
   color: var(--cf-muted);
-  padding: 12px 2px;
+  text-align: center;
+}
+:where(.cf-board) :where(.cf-state__message) {
+  margin: 0;
 }
 :where(.cf-board) :where(.cf-detail),
 :where(.cf-board) :where(.cf-discussion) {

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,7 @@ export function FeedbackBodyProvider({
   maxCommentDepth,
   debounceDuration,
   collectMetadata,
+  emptyState,
   collectStandardMetadata,
   transformComments,
   renderActor,
@@ -33,6 +35,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 +54,14 @@ export function FeedbackBodyProvider({
     showForm,
     isSearching,
     selectedEntryId,
+    statusFilter,
 
     setQuery,
     setDebouncedQuery,
     setShowForm,
     setIsSearching,
     setSelectedEntryId,
+    setStatusFilter,
 
     hooks,
     entrySort,
@@ -65,6 +70,7 @@ export function FeedbackBodyProvider({
     maxCommentDepth,
     debounceDuration,
     collectMetadata,
+    emptyState,
     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,9 @@ export interface FeedbackScreenBaseProps {
    * entry kind. Disabled by default.
    */
   collectMetadata?: CollectMetadata;
+
+  /** Optional host-owned content rendered above the empty-state message. */
+  emptyState?: ReactNode;
 }
 
 export interface FeedbackScreenRootProps
@@ -106,9 +110,10 @@ export interface FeedbackScreenRootProps
 
 export interface FeedbackScreenProviderProps
   extends
-    Required<Omit<FeedbackScreenBaseProps, "collectMetadata">>,
+    Required<Omit<FeedbackScreenBaseProps, "collectMetadata" | "emptyState">>,
     FeedbackScreenTransformationProps {
   collectMetadata?: CollectMetadata;
+  emptyState?: ReactNode;
   collectStandardMetadata: StandardMetadataCollector;
 }
 
@@ -119,11 +124,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;
@@ -139,6 +146,13 @@ export interface FeedbackScreenListProps {
   hideBackButton?: boolean;
   /** Callback when the EntryCard is opened. */
   onEntryOpen: (entryId: string) => void;
+  /** Whether provider-selected entries are rendered in place of the list.
+   * @default true
+   */
+  showSelectedEntry?: boolean;
+
+  /** Callback for the empty-state create-entry action. */
+  onCreateEntry?: () => void;
 }
 
 export interface FeedbackScreenContentProps