convex-feedback-ui 0.1.6 → 0.1.7

package/src/native/shared/ui/NewEntry.tsx

@@ -15,7 +15,7 @@ import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
 import type { FeedbackScreenEntryModalProps } from "../../../shared/types";
 import { collectEntryMetadata } from "../../../shared/metadata";
 import { EntryDetail } from "./EntryDetail";
-import { FeedbackForm } from "./primitives";
+import { ChoiceChips, FeedbackForm } from "./primitives";
 
 export function CreateEntryModal({
   onRequestClose,
@@ -247,33 +247,15 @@ export function CreateEntryForm({
           <Text style={{ color: theme.colors.text, fontWeight: "600" }}>
             {messages.form.kind}
           </Text>
-          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 7 }}>
-            {enabledKinds.map((value) => (
-              <Pressable
-                key={value}
-                onPress={() => onKindChange(value)}
-                style={{
-                  paddingVertical: 6,
-                  paddingHorizontal: 9,
-                  borderRadius: 999,
-                  borderWidth: 1,
-                  borderColor:
-                    value === kind ? theme.colors.primary : theme.colors.border,
-                }}
-              >
-                <Text
-                  style={{
-                    color:
-                      value === kind
-                        ? theme.colors.primary
-                        : theme.colors.mutedText,
-                  }}
-                >
-                  {messages.kinds[value]}
-                </Text>
-              </Pressable>
-            ))}
-          </View>
+          <ChoiceChips
+            accessibilityLabel={messages.form.kind}
+            options={enabledKinds.map((value) => ({
+              value,
+              label: messages.kinds[value],
+            }))}
+            value={kind}
+            onValueChange={onKindChange}
+          />
         </>
       )}
       <FeedbackForm.Input

package/src/native/shared/ui/primitives.tsx

@@ -32,6 +32,7 @@ import {
 import type {
   BoardSearchBaseProps,
   BoardSearchState,
+  ChoiceChipsBaseProps,
   CommentActionBaseProps,
   CommentLikeBaseProps,
   CommentLikeState,
@@ -182,14 +183,103 @@ const BoardList = forwardRef<ScrollView, ScrollViewProps>(
   },
 );
 
+function BoardState({ style, ...props }: ViewProps) {
+  const { theme, unstyled } = useFeedbackUi();
+  return (
+    <View
+      {...props}
+      style={combineStyle<ViewStyle>(
+        !unstyled,
+        {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          gap: theme.spacing,
+          padding: theme.spacing,
+        },
+        style,
+      )}
+    />
+  );
+}
+
 export const FeedbackBoard = {
   Root: BoardRoot,
   Header: BoardHeader,
   Title: BoardTitle,
   Search: BoardSearch,
   List: BoardList,
+  State: BoardState,
 };
 
+/** Props for the reusable native `ChoiceChips` primitive. */
+export interface ChoiceChipsProps<Value extends string = string>
+  extends Omit<ViewProps, "children">, ChoiceChipsBaseProps<Value> {}
+
+export function ChoiceChips<Value extends string>({
+  options,
+  value,
+  onValueChange,
+  style,
+  ...props
+}: ChoiceChipsProps<Value>) {
+  const { theme, unstyled } = useFeedbackUi();
+
+  return (
+    <View
+      {...props}
+      style={combineStyle<ViewStyle>(
+        !unstyled,
+        { flexDirection: "row", flexWrap: "wrap", gap: 7 },
+        style,
+      )}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <Pressable
+            key={option.value}
+            accessibilityRole="radio"
+            accessibilityState={{ selected }}
+            onPress={() => onValueChange(option.value)}
+            style={
+              unstyled
+                ? undefined
+                : {
+                    paddingVertical: 6,
+                    paddingHorizontal: 9,
+                    borderRadius: 999,
+                    borderWidth: 1,
+                    borderColor: selected
+                      ? theme.colors.primary
+                      : theme.colors.border,
+                    backgroundColor: selected
+                      ? theme.colors.primary
+                      : "transparent",
+                  }
+            }
+          >
+            <Text
+              style={
+                unstyled
+                  ? undefined
+                  : {
+                      color: selected
+                        ? theme.colors.primaryForeground
+                        : theme.colors.mutedText,
+                      fontWeight: "600",
+                    }
+              }
+            >
+              {option.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
 const EntryContext = createContext<FeedbackEntryData | null>(null);
 function useEntryContext(): FeedbackEntryData {
   const value = useContext(EntryContext);

package/src/react/primitives.tsx

@@ -25,6 +25,7 @@ import type {
   CommentLikeBaseProps,
   CommentLikeState,
   CommentRootBaseProps,
+  ChoiceChipsBaseProps,
   EntryRootBaseProps,
   EntryUpvoteBaseProps,
   EntryUpvoteState,
@@ -147,14 +148,68 @@ function BoardList(props: HTMLAttributes<HTMLDivElement>) {
   );
 }
 
+function BoardState(props: HTMLAttributes<HTMLDivElement>) {
+  const { unstyled } = useFeedbackUi();
+  return (
+    <div
+      {...props}
+      className={classes(unstyled, "cf-state", props.className)}
+    />
+  );
+}
+
 export const FeedbackBoard = {
   Root: BoardRoot,
   Header: BoardHeader,
   Title: BoardTitle,
   Search: BoardSearch,
   List: BoardList,
+  State: BoardState,
 };
 
+/**
+ * Props for the reusable web `ChoiceChips` primitive.
+ */
+export interface ChoiceChipsProps<Value extends string = string>
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "children">,
+    ChoiceChipsBaseProps<Value> {}
+
+export function ChoiceChips<Value extends string>({
+  options,
+  value,
+  onValueChange,
+  className,
+  role,
+  ...props
+}: ChoiceChipsProps<Value>) {
+  const { unstyled } = useFeedbackUi();
+
+  return (
+    <div
+      {...props}
+      role={role ?? "group"}
+      className={classes(unstyled, "cf-choice-chips", className)}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            className={classes(unstyled, "cf-choice-chip")}
+            data-selected={selected ? "true" : "false"}
+            aria-pressed={selected}
+            onClick={() => onValueChange(option.value)}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 const EntryContext = createContext<FeedbackEntryData | null>(null);
 
 function useEntryContext(): FeedbackEntryData {

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;
@@ -143,6 +150,9 @@ export interface FeedbackScreenListProps {
    * @default true
    */
   showSelectedEntry?: boolean;
+
+  /** Callback for the empty-state create-entry action. */
+  onCreateEntry?: () => void;
 }
 
 export interface FeedbackScreenContentProps