convex-feedback-ui 0.2.0-beta.8 → 0.2.0

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

@@ -54,6 +54,8 @@ export interface RoadmapBoardProps {
   bottomInset?: number;
   style?: StyleProp<ViewStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
+  /** Additional styles for each stage column. */
+  stageStyle?: StyleProp<ViewStyle>;
 }
 
 export interface RoadmapBoardCardProps extends Pick<
@@ -117,6 +119,7 @@ export function RoadmapBoard({
   bottomInset,
   style,
   contentContainerStyle,
+  stageStyle,
 }: RoadmapBoardProps) {
   const insets = useSafeAreaInsets();
   const resolvedBottomInset = bottomInset ?? insets.bottom;
@@ -173,6 +176,7 @@ export function RoadmapBoard({
                 borderColor: resolvedColors.border,
                 backgroundColor: resolvedColors.surfaceMuted,
               },
+              stageStyle,
             ]}
           >
             <View

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

@@ -167,10 +167,14 @@ export function RoadmapScreenContent({
   ...colors
 }: RoadmapScreenContentProps) {
   const [selected, setSelected] = useState<RoadmapItem | null>(null);
+  const { hooks } = useFeedbackBody();
+  const selectedQuery = hooks.useRoadmapItem(selected?.id);
+  const authoritativeSelected =
+    selectedQuery === undefined ? selected : selectedQuery;
 
   return (
     <FeedbackBoard.Root {...colors}>
-      {selected === null ? (
+      {authoritativeSelected === null ? (
         <RoadmapBoardContent
           pageSize={pageSize}
           onItemOpen={setSelected}
@@ -182,7 +186,7 @@ export function RoadmapScreenContent({
         />
       ) : (
         <RoadmapDetailPage
-          item={selected}
+          item={authoritativeSelected}
           entryPageSize={entryPageSize}
           onEntryOpen={onEntryOpen}
           onBack={() => setSelected(null)}

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

@@ -535,21 +535,20 @@ function CommentRoot({ comment, style, ...props }: CommentRootProps) {
 }
 function CommentBody({ style, children, ...props }: TextProps) {
   const comment = useCommentContext();
-  const { messages, theme, unstyled } = useFeedbackUi();
+  const { theme, unstyled } = useFeedbackUi();
   return (
     <Text
       {...props}
       style={combineStyle<TextStyle>(
         !unstyled,
         {
-          color:
-            comment.body === null ? theme.colors.mutedText : theme.colors.text,
+          color: theme.colors.text,
           lineHeight: 20,
         },
         style,
       )}
     >
-      {children ?? comment.body ?? messages.comments.deleted}
+      {children ?? comment.body}
     </Text>
   );
 }

package/src/react/README.md

@@ -5,3 +5,7 @@ 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, `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.
+
+The UI consumes hooks created from the host's generated API. Configure
+authentication, lifecycle callbacks, and callback rejection behavior in the
+headless `exposeFeedbackApi` wrapper; see the [canonical callback reference](../../../convex-feedback/README.md#lifecycle-callbacks).

package/src/react/primitives.tsx

@@ -409,13 +409,13 @@ function CommentRoot({ comment, className, ...props }: CommentRootProps) {
 
 function CommentBody(props: HTMLAttributes<HTMLParagraphElement>) {
   const comment = useCommentContext();
-  const { messages, unstyled } = useFeedbackUi();
+  const { unstyled } = useFeedbackUi();
   return (
     <p
       {...props}
       className={classes(unstyled, "cf-comment__body", props.className)}
     >
-      {props.children ?? comment.body ?? messages.comments.deleted}
+      {props.children ?? comment.body}
     </p>
   );
 }

package/src/react/roadmap.tsx

@@ -61,9 +61,13 @@ function RoadmapScreenInner({
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const roadmap = hooks.useRoadmap();
   const search = hooks.useSearchRoadmap(query);
+  const selectedQuery = hooks.useRoadmapItem(selectedId);
   const searching = query.trim().length > 0;
   const items = searching ? (search ?? []) : roadmap.results;
-  const selected = items.find((item) => item.id === selectedId) ?? null;
+  const optimisticSelected =
+    items.find((item) => item.id === selectedId) ?? null;
+  const selected =
+    selectedQuery === undefined ? optimisticSelected : selectedQuery;
 
   return (
     <FeedbackBoard.Root {...colors}>

package/src/react/screen.tsx

@@ -857,7 +857,7 @@ function CommentBranch({ comment, entryId }: FeedbackScreenCommentBranchProps) {
           disabled={isAuthenticated === undefined || likeAction.pending}
           onToggle={toggleLike}
         />
-        {comment.body !== null && comment.depth < maxCommentDepth && (
+        {comment.depth < maxCommentDepth && (
           <Comment.Reply
             disabled={isAuthenticated === undefined || replyAction.pending}
             onActivate={() => {

package/src/shared/messages.ts

@@ -99,7 +99,6 @@ export const englishFeedbackMessages: FeedbackMessages = {
     viewReplies: (count) =>
       `View ${count} ${count === 1 ? "reply" : "replies"}`,
     hideReplies: "Hide replies",
-    deleted: "Comment deleted",
     noComments: "No comments yet.",
     loadMore: "Load more comments",
   },

package/src/shared/types/messages.ts

@@ -210,9 +210,6 @@ export interface FeedbackMessages {
     /** Collapses an expanded reply branch. */
     hideReplies: string;
 
-    /** Placeholder copy for a soft-deleted comment. */
-    deleted: string;
-
     /** Empty-state copy when no comments exist. */
     noComments: string;