convex-feedback-ui 0.2.0-beta.2 → 0.2.0-beta.3

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

@@ -54,6 +54,7 @@ export type BoardRootProps = PropsWithChildren<FeedbackColorProps>;
 
 function BoardRoot({
   primaryColor,
+  primaryForeground,
   backgroundColor,
   surfaceColor,
   textColor,
@@ -65,6 +66,7 @@ function BoardRoot({
   const colorOverrides = useMemo(
     () => ({
       ...(primaryColor === undefined ? {} : { primary: primaryColor }),
+      ...(primaryForeground === undefined ? {} : { primaryForeground }),
       ...(backgroundColor === undefined ? {} : { background: backgroundColor }),
       ...(surfaceColor === undefined ? {} : { surface: surfaceColor }),
       ...(textColor === undefined ? {} : { text: textColor }),
@@ -78,6 +80,7 @@ function BoardRoot({
       dangerColor,
       mutedColor,
       primaryColor,
+      primaryForeground,
       surfaceColor,
       textColor,
     ],

package/src/react/roadmap.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { RoadmapItem } from "convex-feedback";
+import type { RoadmapItem, RoadmapStatus } from "convex-feedback";
 import { useState } from "react";
 
 import {
@@ -12,6 +12,12 @@ import type { RoadmapScreenProps } from "../shared/types/index.js";
 import { FeedbackActionError, useFeedbackAction } from "./action.js";
 import { FeedbackBoard, FeedbackEntry } from "./primitives.js";
 
+const stages: readonly { value: RoadmapStatus }[] = [
+  { value: "planned" },
+  { value: "in_progress" },
+  { value: "shipped" },
+];
+
 export function RoadmapScreen({
   hooks,
   messages,
@@ -25,6 +31,7 @@ export function RoadmapScreen({
 }: RoadmapScreenProps) {
   const resolvedPageSize = pageSize ?? hooks.pageSizes.roadmap;
   const resolvedEntryPageSize = entryPageSize ?? hooks.pageSizes.entries;
+
   return (
     <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
       <RoadmapScreenInner
@@ -50,7 +57,6 @@ function RoadmapScreenInner({
   pageSize: number;
   entryPageSize: number;
 }) {
-  const { messages } = useFeedbackUi();
   const [query, setQuery] = useState("");
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const roadmap = hooks.useRoadmap();
@@ -59,9 +65,29 @@ function RoadmapScreenInner({
   const items = searching ? (search ?? []) : roadmap.results;
   const selected = items.find((item) => item.id === selectedId) ?? null;
 
-  if (selected !== null) {
-    return (
-      <FeedbackBoard.Root {...colors}>
+  return (
+    <FeedbackBoard.Root {...colors}>
+      {selected === null ? (
+        <RoadmapBoard
+          items={items}
+          loading={
+            searching
+              ? search === undefined
+              : roadmap.status === "LoadingFirstPage"
+          }
+          searching={searching}
+          query={query}
+          onQueryChange={setQuery}
+          onItemOpen={(item) => setSelectedId(item.id)}
+          canLoadMore={
+            !searching &&
+            (roadmap.status === "CanLoadMore" ||
+              roadmap.status === "LoadingMore")
+          }
+          loadingMore={roadmap.status === "LoadingMore"}
+          onLoadMore={() => roadmap.loadMore(pageSize)}
+        />
+      ) : (
         <RoadmapDetail
           item={selected}
           hooks={hooks}
@@ -70,59 +96,107 @@ function RoadmapScreenInner({
           onUnauthenticated={onUnauthenticated}
           onBack={() => setSelectedId(null)}
         />
-      </FeedbackBoard.Root>
-    );
-  }
+      )}
+    </FeedbackBoard.Root>
+  );
+}
 
-  const loading = searching
-    ? search === undefined
-    : roadmap.status === "LoadingFirstPage";
+function RoadmapBoard({
+  items,
+  loading,
+  searching,
+  query,
+  onQueryChange,
+  onItemOpen,
+  canLoadMore,
+  loadingMore,
+  onLoadMore,
+}: {
+  items: readonly RoadmapItem[];
+  loading: boolean;
+  searching: boolean;
+  query: string;
+  onQueryChange: (value: string) => void;
+  onItemOpen: (item: RoadmapItem) => void;
+  canLoadMore: boolean;
+  loadingMore: boolean;
+  onLoadMore: () => void;
+}) {
+  const { messages } = useFeedbackUi();
 
   return (
-    <FeedbackBoard.Root {...colors}>
+    <>
       <FeedbackBoard.Header>
         <div>
-          <FeedbackBoard.Title>Roadmap</FeedbackBoard.Title>
-          <p className="cf-board__subtitle">
-            See what is planned, in progress, and shipped.
-          </p>
+          <FeedbackBoard.Title>{messages.roadmap.title}</FeedbackBoard.Title>
+          <p className="cf-board__subtitle">{messages.roadmap.subtitle}</p>
         </div>
       </FeedbackBoard.Header>
       <FeedbackBoard.Search
         value={query}
-        onValueChange={setQuery}
-        placeholder="Search roadmap…"
+        onValueChange={onQueryChange}
+        placeholder={messages.roadmap.searchPlaceholder}
       />
       {loading ? (
         <FeedbackBoard.State>{messages.board.loading}</FeedbackBoard.State>
       ) : items.length === 0 ? (
         <FeedbackBoard.State>
-          {searching ? "No roadmap items found." : "No roadmap items yet."}
+          {searching
+            ? messages.roadmap.noSearchResults
+            : messages.roadmap.noItems}
         </FeedbackBoard.State>
       ) : (
-        <FeedbackBoard.List>
-          {items.map((item) => (
-            <RoadmapCard
-              key={item.id}
-              item={item}
-              onOpen={() => setSelectedId(item.id)}
-            />
-          ))}
-        </FeedbackBoard.List>
+        <div className="cf-roadmap-board">
+          {stages.map((stage) => {
+            const stageItems = items
+              .filter((item) => item.status === stage.value)
+              .sort((a, b) => a.position - b.position);
+
+            return (
+              <section className="cf-roadmap-column" key={stage.value}>
+                <header className="cf-roadmap-column__header">
+                  <div className="cf-roadmap-column__heading">
+                    <span
+                      className="cf-roadmap-status__dot"
+                      aria-hidden="true"
+                    />
+                    <h3>{messages.roadmap.statuses[stage.value]}</h3>
+                  </div>
+                  <span className="cf-roadmap-column__count">
+                    {stageItems.length}
+                  </span>
+                </header>
+                <div className="cf-roadmap-column__list">
+                  {stageItems.length === 0 ? (
+                    <p className="cf-roadmap-column__empty">
+                      {messages.roadmap.noItems}
+                    </p>
+                  ) : (
+                    stageItems.map((item) => (
+                      <RoadmapCard
+                        key={item.id}
+                        item={item}
+                        onOpen={() => onItemOpen(item)}
+                      />
+                    ))
+                  )}
+                </div>
+              </section>
+            );
+          })}
+        </div>
       )}
-      {!searching &&
-        (roadmap.status === "CanLoadMore" ||
-          roadmap.status === "LoadingMore") && (
-          <button
-            type="button"
-            className="cf-button"
-            disabled={roadmap.status === "LoadingMore"}
-            onClick={() => roadmap.loadMore(pageSize)}
-          >
-            {messages.board.loadMore}
-          </button>
-        )}
-    </FeedbackBoard.Root>
+      {canLoadMore && (
+        <button
+          type="button"
+          className="cf-button"
+          disabled={loadingMore}
+          onClick={onLoadMore}
+        >
+          {messages.board.loadMore}
+        </button>
+      )}
+    </>
   );
 }
 
@@ -133,19 +207,24 @@ function RoadmapCard({
   item: RoadmapItem;
   onOpen: () => void;
 }) {
+  const { messages } = useFeedbackUi();
+
   return (
-    <button type="button" className="cf-entry cf-roadmap-card" onClick={onOpen}>
-      <span className="cf-entry__content">
-        <span className="cf-entry__meta">
-          <span className="cf-entry__kind">
-            {item.status.replaceAll("_", " ")}
-          </span>
-          <span className="cf-status">{item.feedbackCount} linked</span>
+    <button type="button" className="cf-roadmap-card" onClick={onOpen}>
+      <span className="cf-roadmap-card__meta">
+        <span className="cf-roadmap-status">
+          {messages.roadmap.statuses[item.status]}
         </span>
-        <strong className="cf-entry__title">{item.title}</strong>
-        {item.description && (
-          <span className="cf-entry__body">{item.description}</span>
-        )}
+        <span className="cf-roadmap-card__count">
+          {messages.roadmap.linkedEntries(item.feedbackCount)}
+        </span>
+      </span>
+      <strong className="cf-roadmap-card__title">{item.title}</strong>
+      {item.description && (
+        <span className="cf-roadmap-card__body">{item.description}</span>
+      )}
+      <span className="cf-roadmap-card__link">
+        {messages.entry.open} <span aria-hidden="true">›</span>
       </span>
     </button>
   );
@@ -168,6 +247,7 @@ function RoadmapDetail({
 }) {
   const { messages } = useFeedbackUi();
   const feedback = hooks.useRoadmapFeedback(item.id);
+
   return (
     <div className="cf-detail">
       <button
@@ -177,46 +257,26 @@ function RoadmapDetail({
       >
         {messages.entry.back}
       </button>
-      <header>
-        <div className="cf-entry__meta">
-          <span className="cf-entry__kind">
-            {item.status.replaceAll("_", " ")}
+      <header className="cf-roadmap-detail__header">
+        <div className="cf-roadmap-card__meta">
+          <span className="cf-roadmap-status">
+            {messages.roadmap.statuses[item.status]}
+          </span>
+          <span className="cf-roadmap-card__count">
+            {messages.roadmap.linkedEntries(item.feedbackCount)}
           </span>
-          <span className="cf-status">Position {item.position}</span>
         </div>
         <h2 className="cf-board__title">{item.title}</h2>
-        <p className="cf-entry__body">
-          {item.description ?? "No description."}
-        </p>
+        {item.description && (
+          <p className="cf-entry__body">{item.description}</p>
+        )}
       </header>
-      <dl className="cf-roadmap-meta">
-        <div>
-          <dt>ID</dt>
-          <dd>{item.id}</dd>
-        </div>
-        <div>
-          <dt>Linked feedback</dt>
-          <dd>{item.feedbackCount}</dd>
-        </div>
-        <div>
-          <dt>Created</dt>
-          <dd>{new Date(item.createdAt).toLocaleString()}</dd>
-        </div>
-        <div>
-          <dt>Updated</dt>
-          <dd>{new Date(item.updatedAt).toLocaleString()}</dd>
-        </div>
-        <div>
-          <dt>Document created</dt>
-          <dd>{new Date(item.creationTime).toLocaleString()}</dd>
-        </div>
-      </dl>
       <section className="cf-discussion">
-        <h3>Attached feedback</h3>
+        <h3>{messages.roadmap.attachedFeedback}</h3>
         {feedback.status === "LoadingFirstPage" ? (
           <p className="cf-state">{messages.board.loading}</p>
         ) : feedback.results.length === 0 ? (
-          <p className="cf-state">No feedback attached.</p>
+          <p className="cf-state">{messages.roadmap.noAttachedFeedback}</p>
         ) : (
           <div className="cf-comments">
             {feedback.results.map((entry) => (
@@ -238,7 +298,7 @@ function RoadmapDetail({
             disabled={feedback.status === "LoadingMore"}
             onClick={() => feedback.loadMore(entryPageSize)}
           >
-            {messages.comments.loadMore}
+            {messages.board.loadMore}
           </button>
         )}
       </section>

package/src/react/styles.css

@@ -95,11 +95,130 @@
   background: var(--cf-surface);
 }
 :where(.cf-board) :where(.cf-roadmap-card) {
+  display: grid;
+  gap: 10px;
   width: 100%;
+  border: 1px solid var(--cf-border);
+  border-radius: calc(var(--cf-radius) * 0.9);
+  padding: 14px;
+  background: var(--cf-surface);
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
+  transition:
+    transform 140ms ease,
+    border-color 140ms ease,
+    box-shadow 140ms ease;
+}
+:where(.cf-board) :where(.cf-roadmap-card:hover) {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--cf-primary) 35%, var(--cf-border));
+  box-shadow: 0 8px 20px rgb(20 20 35 / 0.06);
+}
+:where(.cf-board) :where(.cf-roadmap-card:focus-visible) {
+  outline: 3px solid color-mix(in srgb, var(--cf-primary) 25%, transparent);
+  outline-offset: 2px;
+}
+:where(.cf-board) :where(.cf-roadmap-board) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  margin-bottom: var(--cf-space);
+  overflow: hidden;
+  border: 1px solid var(--cf-border);
+  border-radius: var(--cf-radius);
+  background: var(--cf-border);
+}
+:where(.cf-board) :where(.cf-roadmap-column) {
+  min-width: 0;
+  background: var(--cf-background);
+}
+:where(.cf-board) :where(.cf-roadmap-column__header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 58px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--cf-border);
+  background: color-mix(in srgb, var(--cf-background) 94%, var(--cf-surface));
+}
+:where(.cf-board) :where(.cf-roadmap-column__heading) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:where(.cf-board) :where(.cf-roadmap-column__heading h3) {
+  margin: 0;
+  font-size: 0.9rem;
+}
+:where(.cf-board) :where(.cf-roadmap-column__count),
+:where(.cf-board) :where(.cf-roadmap-card__count) {
+  color: var(--cf-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+:where(.cf-board) :where(.cf-roadmap-column__list) {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  min-height: 180px;
+  padding: 10px;
+}
+:where(.cf-board) :where(.cf-roadmap-column__empty) {
+  margin: 0;
+  padding: 28px 10px;
+  color: var(--cf-muted);
+  font-size: 0.85rem;
+  line-height: 1.45;
+  text-align: center;
+}
+:where(.cf-board) :where(.cf-roadmap-status__dot) {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--cf-primary);
+}
+:where(.cf-board) :where(.cf-roadmap-status) {
+  display: inline-flex;
+  width: fit-content;
+  border: 1px solid var(--cf-border);
+  border-radius: 999px;
+  padding: 4px 8px;
+  background: var(--cf-surface-muted);
+  color: var(--cf-muted);
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+:where(.cf-board) :where(.cf-roadmap-card__meta) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+:where(.cf-board) :where(.cf-roadmap-card__title) {
+  font-size: 1rem;
+  line-height: 1.35;
+}
+:where(.cf-board) :where(.cf-roadmap-card__body) {
+  overflow: hidden;
+  color: var(--cf-muted);
+  font-size: 0.88rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  display: -webkit-box;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+:where(.cf-board) :where(.cf-roadmap-card__link) {
+  color: var(--cf-primary);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+:where(.cf-board) :where(.cf-roadmap-detail__header) {
+  display: grid;
+  gap: 10px;
 }
 :where(.cf-board) :where(.cf-entry__content) {
   min-width: 0;
@@ -348,6 +467,10 @@
     width: 40px;
     min-height: 48px;
   }
+  :where(.cf-board) :where(.cf-roadmap-board) {
+    grid-template-columns: repeat(3, minmax(17rem, 1fr));
+    overflow-x: auto;
+  }
 }
 :where(.cf-board) :where(.cf-confirm-backdrop) {
   position: fixed;

package/src/shared/messages.ts

@@ -12,6 +12,22 @@ export const englishFeedbackMessages: FeedbackMessages = {
     loading: "Loading…",
     loadMore: "Load more",
   },
+  roadmap: {
+    title: "Roadmap",
+    subtitle: "See what is planned, in progress, and shipped.",
+    searchPlaceholder: "Search roadmap…",
+    statuses: {
+      planned: "Planned",
+      in_progress: "In progress",
+      shipped: "Shipped",
+    },
+    linkedEntries: (count) =>
+      `${count} linked ${count === 1 ? "entry" : "entries"}`,
+    noItems: "No roadmap items yet.",
+    noSearchResults: "No matching roadmap items found.",
+    attachedFeedback: "Feedback behind this item",
+    noAttachedFeedback: "No feedback attached yet.",
+  },
   kinds: {
     feedback: "Feedback",
     feature_request: "Feature request",
@@ -86,6 +102,14 @@ export function mergeFeedbackMessages(
 ): FeedbackMessages {
   return {
     board: { ...englishFeedbackMessages.board, ...overrides.board },
+    roadmap: {
+      ...englishFeedbackMessages.roadmap,
+      ...overrides.roadmap,
+      statuses: {
+        ...englishFeedbackMessages.roadmap.statuses,
+        ...overrides.roadmap?.statuses,
+      },
+    },
     kinds: {
       ...englishFeedbackMessages.kinds,
       ...overrides.kinds,

package/src/shared/types/messages.ts

@@ -1,4 +1,4 @@
-import type { EntryKind, EntryStatus } from "convex-feedback";
+import type { EntryKind, EntryStatus, RoadmapStatus } from "convex-feedback";
 
 /**
  * Localizable package-owned UI copy used by both React DOM and React Native.
@@ -40,6 +40,36 @@ export interface FeedbackMessages {
     loadMore: string;
   };
 
+  /** Public roadmap copy. */
+  roadmap: {
+    /** Main roadmap heading. */
+    title: string;
+
+    /** Supporting copy shown near the roadmap heading. */
+    subtitle: string;
+
+    /** Search input placeholder. */
+    searchPlaceholder: string;
+
+    /** Display labels for each roadmap stage. */
+    statuses: Record<RoadmapStatus, string>;
+
+    /** Formats the number of feedback entries attached to an item. */
+    linkedEntries: (count: number) => string;
+
+    /** Empty-state copy when the roadmap has no items. */
+    noItems: string;
+
+    /** Empty-state copy when a search produces no results. */
+    noSearchResults: string;
+
+    /** Heading for feedback attached to a roadmap item. */
+    attachedFeedback: string;
+
+    /** Empty-state copy when an item has no attached feedback. */
+    noAttachedFeedback: string;
+  };
+
   /** Localized display labels for each fixed entry kind. */
   kinds: Record<EntryKind, string>;
 
@@ -176,6 +206,13 @@ export interface FeedbackMessageOverrides {
   /** Board copy overrides. */
   board?: Partial<FeedbackMessages["board"]> | undefined;
 
+  /** Roadmap copy overrides. */
+  roadmap?:
+    | (Omit<Partial<FeedbackMessages["roadmap"]>, "statuses"> & {
+        statuses?: Partial<FeedbackMessages["roadmap"]["statuses"]>;
+      })
+    | undefined;
+
   /** Entry-kind label overrides. */
   kinds?: Partial<FeedbackMessages["kinds"]> | undefined;
 

package/src/shared/types/roadmap.ts

@@ -1,7 +1,12 @@
+import type { CommentSort } from "convex-feedback";
 import type { FeedbackHooks } from "convex-feedback/react";
 
 import type { FeedbackColorProps, FeedbackProviderProps } from "./context.js";
-import type { FeedbackUnauthenticatedHandler } from "./screen.js";
+import type {
+  FeedbackCommentTransform,
+  FeedbackActorRenderer,
+  FeedbackUnauthenticatedHandler,
+} from "./screen.js";
 
 /** Shared props for the public roadmap screen implementations. */
 export interface RoadmapScreenProps
@@ -17,6 +22,18 @@ export interface RoadmapScreenProps
   /** Called when a visitor tries an authenticated-only action anonymously. */
   onUnauthenticated?: FeedbackUnauthenticatedHandler;
 
+  /** Server-side ordering used when displaying comments on an attached entry. */
+  commentSort?: CommentSort;
+
+  /** Maximum depth exposed when an attached entry's discussion is opened. */
+  maxCommentDepth?: number;
+
+  /** Presentation-only transform applied to loaded comments. */
+  transformComments?: FeedbackCommentTransform;
+
+  /** Optional host renderer for actor information in comments. */
+  renderActor?: FeedbackActorRenderer;
+
   /** Number of roadmap items initially requested. */
   pageSize?: number;