convex-feedback-ui 0.1.9 → 0.2.0-beta.0

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

@@ -3,18 +3,26 @@ import { ActivityIndicator, Text, View } from "react-native";
 
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import { allowAuthenticatedAction } from "../../../shared/helpers.js";
 import type { FeedbackScreenEntryDetailProps } from "../../../shared/types";
 import { Button } from "./Button";
 import { CommentBranch } from "./CommentBranch";
 import { FeedbackEntry, FeedbackForm } from "./primitives";
 import { MetadataModal } from "./MetadataModal";
+import { useNativeAction } from "../helpers.js";
 
 export function EntryDetail({
   entryId,
   onBack,
   hideBackButton,
 }: FeedbackScreenEntryDetailProps) {
-  const { hooks, commentSort, transformComments } = useFeedbackBody();
+  const {
+    hooks,
+    commentSort,
+    transformComments,
+    isAuthenticated,
+    onUnauthenticated,
+  } = useFeedbackBody();
 
   const { messages, theme } = useFeedbackUi();
   const entry = hooks.useEntry(entryId);
@@ -23,6 +31,21 @@ export function EntryDetail({
   const createComment = hooks.useCreateComment();
   const [body, setBody] = useState("");
   const [showMetadata, setShowMetadata] = useState(false);
+  const upvoteAction = useNativeAction();
+  const commentAction = useNativeAction();
+
+  const toggleUpvote = (desiredState: boolean) => {
+    if (
+      !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+      upvoteAction.pending
+    ) {
+      return;
+    }
+    void upvoteAction.run(
+      () => setUpvote({ entryId, desiredState }),
+      "Could not update vote",
+    );
+  };
   const visible = useMemo(
     () => transformComments?.(comments.results) ?? comments.results,
     [comments.results, transformComments],
@@ -57,9 +80,8 @@ export function EntryDetail({
       )}
       <FeedbackEntry.Root entry={entry}>
         <FeedbackEntry.Upvote
-          onToggle={(active) =>
-            void setUpvote({ entryId, desiredState: active })
-          }
+          disabled={isAuthenticated === undefined || upvoteAction.pending}
+          onToggle={toggleUpvote}
         />
         <FeedbackEntry.Content style={{ gap: 5 }}>
           <FeedbackEntry.Status />
@@ -92,10 +114,20 @@ export function EntryDetail({
           placeholder={messages.comments.placeholder}
         />
         <FeedbackForm.Submit
-          onPress={async () => {
+          disabled={isAuthenticated === undefined || commentAction.pending}
+          submitting={commentAction.pending}
+          onPress={() => {
             if (body.trim().length === 0) return;
-            await createComment({ entryId, body });
-            setBody("");
+            if (
+              !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+              commentAction.pending
+            ) {
+              return;
+            }
+            void commentAction.run(async () => {
+              await createComment({ entryId, body });
+              setBody("");
+            }, "Could not add comment");
           }}
         >
           {messages.comments.submit}
@@ -106,9 +138,11 @@ export function EntryDetail({
           <CommentBranch key={comment.id} comment={comment} entryId={entryId} />
         ))}
       </View>
-      {comments.status === "CanLoadMore" && (
+      {(comments.status === "CanLoadMore" ||
+        comments.status === "LoadingMore") && (
         <Button
           label={messages.comments.loadMore}
+          disabled={comments.status === "LoadingMore"}
           onPress={() => comments.loadMore(hooks.pageSizes.comments)}
         />
       )}

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

@@ -3,6 +3,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
 import { createEntryLabel, entryStatusChoices } from "../../../shared/helpers";
+import { allowAuthenticatedAction } from "../../../shared/helpers";
 import { ChoiceChips, FeedbackBoard } from "./primitives";
 
 export function FeedbackScreenHeader() {
@@ -14,6 +15,8 @@ export function FeedbackScreenHeader() {
     enabledKinds,
     statusFilter,
     setStatusFilter,
+    isAuthenticated,
+    onUnauthenticated,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const { top } = useSafeAreaInsets();
@@ -36,7 +39,12 @@ export function FeedbackScreenHeader() {
         onValueChange={setStatusFilter}
       />
       <Pressable
-        onPress={() => setShowForm(true)}
+        disabled={isAuthenticated === undefined}
+        onPress={() => {
+          if (allowAuthenticatedAction(isAuthenticated, onUnauthenticated)) {
+            setShowForm(true);
+          }
+        }}
         style={{
           alignSelf: "flex-start",
           paddingVertical: 9,

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

@@ -2,7 +2,10 @@ 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 {
+  allowAuthenticatedAction,
+  createEntryLabel,
+} from "../../../shared/helpers.js";
 import type { FeedbackScreenListProps } from "../../../shared/types/index.js";
 import { Button } from "./Button.js";
 import { EntryCard } from "./EntryCard.js";
@@ -18,15 +21,17 @@ export function FeedbackScreenList({
   const {
     hooks,
     entrySort,
-    isSearching,
     enabledKinds,
     statusFilter,
     selectedEntryId,
+    query,
     debouncedQuery,
     setSelectedEntryId,
     setShowForm,
     emptyState,
     loading: loadingIndicator,
+    isAuthenticated,
+    onUnauthenticated,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
 
@@ -41,11 +46,18 @@ export function FeedbackScreenList({
     statusFilter,
   });
 
-  const entries = isSearching ? search : list.results;
-  const createEntry = onCreateEntry ?? (() => setShowForm(true));
+  const normalizedQuery = query.trim();
+  const normalizedDebouncedQuery = debouncedQuery.trim();
+  const searching = normalizedQuery.length > 0;
+  const entries = searching ? search : list.results;
+  const createEntry = () => {
+    if (allowAuthenticatedAction(isAuthenticated, onUnauthenticated)) {
+      (onCreateEntry ?? (() => setShowForm(true)))();
+    }
+  };
 
-  const loading = isSearching
-    ? search === undefined
+  const loading = searching
+    ? normalizedQuery !== normalizedDebouncedQuery || search === undefined
     : list.status === "LoadingFirstPage";
 
   return (
@@ -68,7 +80,7 @@ export function FeedbackScreenList({
         <FeedbackBoard.State>
           {emptyState}
           <Text style={{ color: theme.colors.mutedText, textAlign: "center" }}>
-            {isSearching
+            {searching
               ? messages.board.noSearchResults
               : messages.board.noEntries}
           </Text>
@@ -76,6 +88,7 @@ export function FeedbackScreenList({
             label={createEntryLabel(enabledKinds, messages)}
             onPress={createEntry}
             variant="primary"
+            disabled={isAuthenticated === undefined}
           />
         </FeedbackBoard.State>
       ) : (
@@ -91,12 +104,14 @@ export function FeedbackScreenList({
         </FeedbackBoard.List>
       )}
 
-      {!isSearching && list.status === "CanLoadMore" && (
-        <Button
-          label={messages.board.loadMore}
-          onPress={() => list.loadMore(hooks.pageSizes.entries)}
-        />
-      )}
+      {!searching &&
+        (list.status === "CanLoadMore" || list.status === "LoadingMore") && (
+          <Button
+            label={messages.board.loadMore}
+            disabled={list.status === "LoadingMore"}
+            onPress={() => list.loadMore(hooks.pageSizes.entries)}
+          />
+        )}
     </>
   );
 }

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

@@ -12,10 +12,12 @@ import {
 
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import { allowAuthenticatedAction } from "../../../shared/helpers.js";
 import type { FeedbackScreenEntryModalProps } from "../../../shared/types";
 import { collectEntryMetadata } from "../../../shared/metadata";
 import { EntryDetail } from "./EntryDetail";
 import { ChoiceChips, FeedbackForm } from "./primitives";
+import { useNativeAction } from "../helpers.js";
 
 export function CreateEntryModal({
   onRequestClose,
@@ -167,11 +169,17 @@ export function CreateEntryForm({
   onBodyChange: (body: string) => void;
   onOpenSuggestion: (id: string) => void;
 }) {
-  const { hooks, enabledKinds, collectMetadata, collectStandardMetadata } =
-    useFeedbackBody();
+  const {
+    hooks,
+    enabledKinds,
+    collectMetadata,
+    collectStandardMetadata,
+    isAuthenticated,
+    onUnauthenticated,
+  } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
-  const [submitting, setSubmitting] = useState(false);
   const create = hooks.useCreateEntry();
+  const action = useNativeAction();
   const similar = hooks.useSimilarEntries({ title, body, kind, limit: 3 });
 
   const suggestions = useMemo(() => {
@@ -180,13 +188,16 @@ export function CreateEntryForm({
   }, [similar]);
 
   const submit = async () => {
-    if (submitting || title.trim().length === 0 || body.trim().length === 0) {
+    if (
+      action.pending ||
+      title.trim().length === 0 ||
+      body.trim().length === 0
+    ) {
       return;
     }
+    if (!allowAuthenticatedAction(isAuthenticated, onUnauthenticated)) return;
 
-    setSubmitting(true);
-
-    try {
+    await action.run(async () => {
       const metadata = await collectEntryMetadata(
         collectMetadata,
         kind,
@@ -200,14 +211,12 @@ export function CreateEntryForm({
           ...(metadata === undefined ? {} : { metadata }),
         }),
       );
-    } finally {
-      setSubmitting(false);
-    }
+    }, "Could not submit feedback");
   };
 
   const requestSubmit = () => {
     if (
-      submitting ||
+      action.pending ||
       similar === undefined ||
       title.trim().length === 0 ||
       body.trim().length === 0
@@ -365,7 +374,11 @@ export function CreateEntryForm({
           ))}
         </View>
       ) : null}
-      <FeedbackForm.Submit submitting={submitting} onPress={requestSubmit} />
+      <FeedbackForm.Submit
+        submitting={action.pending}
+        disabled={isAuthenticated === undefined || action.pending}
+        onPress={requestSubmit}
+      />
     </FeedbackForm.Root>
   );
 }

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

@@ -0,0 +1,345 @@
+import type {
+  FeedbackEntry as FeedbackEntryData,
+  RoadmapItem,
+} from "convex-feedback";
+import { useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+
+import {
+  FeedbackProvider,
+  useFeedbackUi,
+} from "../../../shared/context/FeedbackProvider.js";
+import { allowAuthenticatedAction } from "../../../shared/helpers.js";
+import type { RoadmapScreenProps } from "../../../shared/types/index.js";
+import { useNativeAction } from "../helpers.js";
+import { Button } from "./Button.js";
+import { FeedbackBoard, FeedbackEntry } from "./primitives.js";
+
+export function RoadmapScreen({
+  hooks,
+  messages,
+  theme,
+  unstyled,
+  onEntryOpen,
+  onUnauthenticated,
+  pageSize,
+  entryPageSize,
+  ...colors
+}: RoadmapScreenProps) {
+  return (
+    <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
+      <RoadmapScreenInner
+        hooks={hooks}
+        onEntryOpen={onEntryOpen}
+        onUnauthenticated={onUnauthenticated}
+        pageSize={pageSize ?? hooks.pageSizes.roadmap}
+        entryPageSize={entryPageSize ?? hooks.pageSizes.entries}
+        {...colors}
+      />
+    </FeedbackProvider>
+  );
+}
+
+function RoadmapScreenInner({
+  hooks,
+  onEntryOpen,
+  onUnauthenticated,
+  pageSize,
+  entryPageSize,
+  ...colors
+}: RoadmapScreenProps & {
+  pageSize: number;
+  entryPageSize: number;
+}) {
+  const { messages, theme } = useFeedbackUi();
+  const [query, setQuery] = useState("");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const roadmap = hooks.useRoadmap();
+  const search = hooks.useSearchRoadmap(query);
+  const searching = query.trim().length > 0;
+  const items = searching ? (search ?? []) : roadmap.results;
+  const selected = items.find((item) => item.id === selectedId) ?? null;
+
+  if (selected !== null) {
+    return (
+      <FeedbackBoard.Root {...colors}>
+        <ScrollView
+          contentContainerStyle={{ gap: theme.spacing, padding: theme.spacing }}
+        >
+          <RoadmapDetail
+            item={selected}
+            hooks={hooks}
+            entryPageSize={entryPageSize}
+            onEntryOpen={onEntryOpen}
+            onUnauthenticated={onUnauthenticated}
+            onBack={() => setSelectedId(null)}
+          />
+        </ScrollView>
+      </FeedbackBoard.Root>
+    );
+  }
+
+  const loading = searching
+    ? search === undefined
+    : roadmap.status === "LoadingFirstPage";
+
+  return (
+    <FeedbackBoard.Root {...colors}>
+      <FeedbackBoard.Header
+        style={{ gap: theme.spacing, padding: theme.spacing }}
+      >
+        <FeedbackBoard.Title>Roadmap</FeedbackBoard.Title>
+        <Text style={{ color: theme.colors.mutedText }}>
+          See what is planned, in progress, and shipped.
+        </Text>
+        <FeedbackBoard.Search
+          value={query}
+          onValueChange={setQuery}
+          placeholder="Search roadmap"
+        />
+      </FeedbackBoard.Header>
+      {loading ? (
+        <FeedbackBoard.State>
+          <Text style={{ color: theme.colors.mutedText }}>
+            {messages.board.loading}
+          </Text>
+        </FeedbackBoard.State>
+      ) : items.length === 0 ? (
+        <FeedbackBoard.State>
+          <Text style={{ color: theme.colors.mutedText }}>
+            {searching ? "No roadmap items found." : "No roadmap items yet."}
+          </Text>
+        </FeedbackBoard.State>
+      ) : (
+        <FeedbackBoard.List contentContainerStyle={{ padding: theme.spacing }}>
+          {items.map((item) => (
+            <RoadmapCard
+              key={item.id}
+              item={item}
+              onOpen={() => setSelectedId(item.id)}
+            />
+          ))}
+        </FeedbackBoard.List>
+      )}
+      {!searching &&
+        (roadmap.status === "CanLoadMore" ||
+          roadmap.status === "LoadingMore") && (
+          <Button
+            label={messages.board.loadMore}
+            disabled={roadmap.status === "LoadingMore"}
+            onPress={() => roadmap.loadMore(pageSize)}
+          />
+        )}
+    </FeedbackBoard.Root>
+  );
+}
+
+function RoadmapCard({
+  item,
+  onOpen,
+}: {
+  item: RoadmapItem;
+  onOpen: () => void;
+}) {
+  const { theme } = useFeedbackUi();
+  return (
+    <Pressable onPress={onOpen} style={{ gap: 5, padding: 12 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          gap: 8,
+        }}
+      >
+        <Text
+          style={{
+            color: theme.colors.mutedText,
+            fontSize: 12,
+            fontWeight: "600",
+          }}
+        >
+          {item.status.replaceAll("_", " ")}
+        </Text>
+        <Text style={{ color: theme.colors.mutedText, fontSize: 12 }}>
+          {item.feedbackCount} linked
+        </Text>
+      </View>
+      <Text
+        style={{ color: theme.colors.text, fontSize: 16, fontWeight: "700" }}
+      >
+        {item.title}
+      </Text>
+      {item.description && (
+        <Text style={{ color: theme.colors.mutedText, lineHeight: 20 }}>
+          {item.description}
+        </Text>
+      )}
+    </Pressable>
+  );
+}
+
+function RoadmapDetail({
+  item,
+  hooks,
+  entryPageSize,
+  onEntryOpen,
+  onUnauthenticated,
+  onBack,
+}: {
+  item: RoadmapItem;
+  hooks: RoadmapScreenProps["hooks"];
+  entryPageSize: number;
+  onEntryOpen: RoadmapScreenProps["onEntryOpen"];
+  onUnauthenticated: RoadmapScreenProps["onUnauthenticated"];
+  onBack: () => void;
+}) {
+  const { messages, theme } = useFeedbackUi();
+  const feedback = hooks.useRoadmapFeedback(item.id);
+  return (
+    <View style={{ gap: theme.spacing }}>
+      <Button label={messages.entry.back} onPress={onBack} />
+      <View style={{ gap: 6 }}>
+        <Text
+          style={{
+            color: theme.colors.mutedText,
+            fontSize: 12,
+            fontWeight: "600",
+          }}
+        >
+          {item.status.replaceAll("_", " ")} · Position {item.position}
+        </Text>
+        <Text
+          style={{ color: theme.colors.text, fontSize: 23, fontWeight: "700" }}
+        >
+          {item.title}
+        </Text>
+        <Text style={{ color: theme.colors.mutedText, lineHeight: 21 }}>
+          {item.description ?? "No description."}
+        </Text>
+      </View>
+      <View style={{ gap: 4 }}>
+        <RoadmapField label="ID" value={item.id} />
+        <RoadmapField
+          label="Linked feedback"
+          value={String(item.feedbackCount)}
+        />
+        <RoadmapField
+          label="Created"
+          value={new Date(item.createdAt).toLocaleString()}
+        />
+        <RoadmapField
+          label="Updated"
+          value={new Date(item.updatedAt).toLocaleString()}
+        />
+        <RoadmapField
+          label="Document created"
+          value={new Date(item.creationTime).toLocaleString()}
+        />
+      </View>
+      <Text
+        style={{ color: theme.colors.text, fontSize: 18, fontWeight: "700" }}
+      >
+        Attached feedback
+      </Text>
+      {feedback.status === "LoadingFirstPage" ? (
+        <Text style={{ color: theme.colors.mutedText }}>
+          {messages.board.loading}
+        </Text>
+      ) : feedback.results.length === 0 ? (
+        <Text style={{ color: theme.colors.mutedText }}>
+          No feedback attached.
+        </Text>
+      ) : (
+        <View style={{ gap: 8 }}>
+          {feedback.results.map((entry) => (
+            <RoadmapEntry
+              key={entry.id}
+              entry={entry}
+              hooks={hooks}
+              onOpen={onEntryOpen}
+              onUnauthenticated={onUnauthenticated}
+            />
+          ))}
+        </View>
+      )}
+      {(feedback.status === "CanLoadMore" ||
+        feedback.status === "LoadingMore") && (
+        <Button
+          label={messages.comments.loadMore}
+          disabled={feedback.status === "LoadingMore"}
+          onPress={() => feedback.loadMore(entryPageSize)}
+        />
+      )}
+    </View>
+  );
+}
+
+function RoadmapField({ label, value }: { label: string; value: string }) {
+  const { theme } = useFeedbackUi();
+  return (
+    <View style={{ flexDirection: "row", gap: 8 }}>
+      <Text style={{ color: theme.colors.mutedText, fontWeight: "600" }}>
+        {label}:
+      </Text>
+      <Text style={{ flex: 1, color: theme.colors.text }}>{value}</Text>
+    </View>
+  );
+}
+
+function RoadmapEntry({
+  entry,
+  hooks,
+  onOpen,
+  onUnauthenticated,
+}: {
+  entry: FeedbackEntryData;
+  hooks: RoadmapScreenProps["hooks"];
+  onOpen: RoadmapScreenProps["onEntryOpen"];
+  onUnauthenticated: RoadmapScreenProps["onUnauthenticated"];
+}) {
+  const { isAuthenticated } = useFeedbackAuth(hooks);
+  const setUpvote = hooks.useSetEntryUpvote();
+  const action = useNativeAction();
+  const toggle = (desiredState: boolean) => {
+    if (
+      !allowAuthenticatedAction(isAuthenticated, onUnauthenticated) ||
+      action.pending
+    ) {
+      return;
+    }
+    void action.run(
+      () => setUpvote({ entryId: entry.id, desiredState }),
+      "Could not update vote",
+    );
+  };
+
+  return (
+    <FeedbackEntry.Root entry={entry}>
+      <FeedbackEntry.Upvote
+        disabled={isAuthenticated === undefined || action.pending}
+        onToggle={toggle}
+      />
+      <Pressable
+        onPress={onOpen === undefined ? undefined : () => onOpen(entry.id)}
+        accessibilityRole={onOpen === undefined ? undefined : "button"}
+        style={{ flex: 1, minWidth: 0 }}
+      >
+        <FeedbackEntry.Content>
+          <View style={{ gap: 5 }}>
+            <View style={{ flexDirection: "row", gap: 8 }}>
+              <FeedbackEntry.Kind />
+              <FeedbackEntry.Status />
+            </View>
+            <FeedbackEntry.Title />
+            <FeedbackEntry.Body />
+            <FeedbackEntry.CommentCount />
+          </View>
+        </FeedbackEntry.Content>
+      </Pressable>
+    </FeedbackEntry.Root>
+  );
+}
+
+function useFeedbackAuth(hooks: RoadmapScreenProps["hooks"]) {
+  return { isAuthenticated: hooks.useIsAuthenticated() };
+}

package/src/react/README.md

@@ -4,4 +4,4 @@ The web layer is CSS-framework agnostic. Import `convex-feedback-ui/styles.css`
 
 Default selectors are scoped beneath `.cf-board` and use low-specificity `:where(...)` selectors so host CSS, CSS Modules, Tailwind classes, or inline styles can override them without a specificity fight.
 
-Use compound primitives for custom layouts or `FeedbackScreen` for the prebuilt experience. Interactive leaf primitives accept render-function children to replace their visual implementation while retaining typed state and actions.
+Use compound primitives for custom layouts, `FeedbackScreen` for the feedback board, or `RoadmapScreen` for public roadmap browsing. Interactive leaf primitives accept render-function children to replace their visual implementation while retaining typed state and actions. Pass `onUnauthenticated` to let the host open its auth UI when an anonymous visitor selects an authenticated-only action.