convex-feedback-ui 0.1.6 → 0.1.8

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

@@ -9,6 +9,7 @@ export function FeedbackScreenContent({
   showHeader = true,
   hideBackButton = false,
   onEntryOpen,
+  onCreateEntry,
   ...colors
 }: FeedbackScreenContentProps) {
   const { showForm, setShowForm, setSelectedEntryId } = useFeedbackBody();
@@ -26,6 +27,7 @@ export function FeedbackScreenContent({
         <FeedbackScreenList
           hideBackButton={hideBackButton}
           onEntryOpen={handleEntryOpen}
+          onCreateEntry={onCreateEntry}
         />
       </FeedbackBoard.Root>
 

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

@@ -4,24 +4,33 @@ import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
 export function Button({
   label,
   onPress,
+  variant = "default",
 }: {
   label: string;
   onPress: () => void;
+  variant?: "default" | "primary";
 }) {
   const { theme } = useFeedbackUi();
+  const primary = variant === "primary";
   return (
     <Pressable
       onPress={onPress}
       style={{
-        alignSelf: "flex-start",
+        alignSelf: primary ? "center" : "flex-start",
         paddingVertical: 8,
         paddingHorizontal: 11,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: theme.colors.border,
+        borderColor: primary ? theme.colors.primary : theme.colors.border,
+        backgroundColor: primary ? theme.colors.primary : undefined,
       }}
     >
-      <Text style={{ color: theme.colors.text, fontWeight: "600" }}>
+      <Text
+        style={{
+          color: primary ? theme.colors.primaryForeground : theme.colors.text,
+          fontWeight: "600",
+        }}
+      >
         {label}
       </Text>
     </Pressable>

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

@@ -2,10 +2,19 @@ import { Pressable, Text } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
-import { FeedbackBoard } from "./primitives";
+import { createEntryLabel, entryStatusChoices } from "../../../shared/helpers";
+import { ChoiceChips, FeedbackBoard } from "./primitives";
 
 export function FeedbackScreenHeader() {
-  const { query, setShowForm, setQuery, enabledKinds } = useFeedbackBody();
+  const {
+    query,
+    setShowForm,
+    setQuery,
+    setIsSearching,
+    enabledKinds,
+    statusFilter,
+    setStatusFilter,
+  } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const { top } = useSafeAreaInsets();
 
@@ -20,6 +29,12 @@ export function FeedbackScreenHeader() {
       <Text style={{ color: theme.colors.mutedText }}>
         {messages.board.subtitle}
       </Text>
+      <ChoiceChips
+        accessibilityLabel={messages.board.statusFilter}
+        options={entryStatusChoices(messages)}
+        value={statusFilter}
+        onValueChange={setStatusFilter}
+      />
       <Pressable
         onPress={() => setShowForm(true)}
         style={{
@@ -33,10 +48,16 @@ export function FeedbackScreenHeader() {
         <Text
           style={{ color: theme.colors.primaryForeground, fontWeight: "700" }}
         >
-          {messages.board.createEntry}
+          {createEntryLabel(enabledKinds, messages)}
         </Text>
       </Pressable>
-      <FeedbackBoard.Search value={query} onValueChange={(q) => setQuery(q)} />
+      <FeedbackBoard.Search
+        value={query}
+        onValueChange={(q) => {
+          setQuery(q);
+          setIsSearching(q.trim().length > 0);
+        }}
+      />
     </FeedbackBoard.Header>
   );
 }

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

@@ -1,5 +1,8 @@
+import { ActivityIndicator, Text } from "react-native";
+
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
+import { createEntryLabel } from "../../../shared/helpers.js";
 import type { FeedbackScreenListProps } from "../../../shared/types/index.js";
 import { Button } from "./Button.js";
 import { EntryCard } from "./EntryCard.js";
@@ -10,46 +13,83 @@ export function FeedbackScreenList({
   hideBackButton = false,
   showSelectedEntry = true,
   onEntryOpen,
+  onCreateEntry,
 }: FeedbackScreenListProps) {
   const {
     hooks,
     entrySort,
     isSearching,
     enabledKinds,
+    statusFilter,
     selectedEntryId,
     debouncedQuery,
     setSelectedEntryId,
+    setShowForm,
+    emptyState,
+    loading: loadingIndicator,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
 
-  const list = hooks.useEntries({ sort: entrySort, kinds: enabledKinds });
+  const list = hooks.useEntries({
+    sort: entrySort,
+    kinds: enabledKinds,
+    statusFilter,
+  });
   const search = hooks.useSearchEntries({
     searchQuery: debouncedQuery,
     kinds: enabledKinds,
+    statusFilter,
   });
 
   const entries = isSearching ? search : list.results;
+  const createEntry = onCreateEntry ?? (() => setShowForm(true));
+
+  const loading = isSearching
+    ? search === undefined
+    : list.status === "LoadingFirstPage";
 
   return (
     <>
-      <FeedbackBoard.List style={{ padding: theme.spacing }}>
-        {showSelectedEntry && selectedEntryId ? (
+      {showSelectedEntry && selectedEntryId ? (
+        <FeedbackBoard.List style={{ padding: theme.spacing }}>
           <EntryDetail
             entryId={selectedEntryId}
             hideBackButton={hideBackButton}
             onBack={() => setSelectedEntryId(null)}
           />
-        ) : (
-          (entries ?? []).map((entry) => (
+        </FeedbackBoard.List>
+      ) : loading ? (
+        <FeedbackBoard.State>
+          {loadingIndicator ?? (
+            <ActivityIndicator size="large" color={theme.colors.primary} />
+          )}
+        </FeedbackBoard.State>
+      ) : entries !== undefined && entries.length === 0 ? (
+        <FeedbackBoard.State>
+          {emptyState}
+          <Text style={{ color: theme.colors.mutedText, textAlign: "center" }}>
+            {isSearching
+              ? messages.board.noSearchResults
+              : messages.board.noEntries}
+          </Text>
+          <Button
+            label={createEntryLabel(enabledKinds, messages)}
+            onPress={createEntry}
+            variant="primary"
+          />
+        </FeedbackBoard.State>
+      ) : (
+        <FeedbackBoard.List style={{ padding: theme.spacing }}>
+          {(entries ?? []).map((entry) => (
             <EntryCard
               key={entry.id}
               entry={entry}
               hooks={hooks}
               onOpen={() => onEntryOpen(entry.id)}
             />
-          ))
-        )}
-      </FeedbackBoard.List>
+          ))}
+        </FeedbackBoard.List>
+      )}
 
       {!isSearching && list.status === "CanLoadMore" && (
         <Button

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,8 @@ export function FeedbackScreen({
   renderActor,
   debounceDuration = 300,
   collectMetadata,
+  emptyState,
+  loading,
   ...props
 }: FeedbackScreenProps) {
   return (
@@ -64,6 +68,8 @@ export function FeedbackScreen({
         maxCommentDepth={maxCommentDepth}
         debounceDuration={debounceDuration}
         collectMetadata={collectMetadata}
+        emptyState={emptyState}
+        loading={loading}
         collectStandardMetadata={collectWebMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
@@ -90,16 +96,25 @@ function FeedbackScreenInner({
     setShowForm,
     setSelectedEntryId,
     selectedEntryId,
+    statusFilter,
+    setStatusFilter,
     query,
     setQuery,
     debouncedQuery,
+    emptyState,
+    loading: loadingIndicator,
   } = 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) {
@@ -115,7 +130,7 @@ function FeedbackScreenInner({
 
   const searching = query.trim().length > 0;
   const entries = searching ? searchResults : list.results;
-  const loading = searching
+  const isLoading = searching
     ? searchResults === undefined
     : list.status === "LoadingFirstPage";
 
@@ -125,13 +140,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 +169,41 @@ 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>
+      {isLoading ? (
+        <FeedbackBoard.State>
+          {loadingIndicator ?? (
+            <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 +311,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) {