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

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

@@ -1,20 +1,88 @@
-import type {
-  FeedbackEntry as FeedbackEntryData,
-  RoadmapItem,
-} from "convex-feedback";
-import { useState } from "react";
-import { Pressable, ScrollView, Text, View } from "react-native";
+import type { RoadmapItem, RoadmapStatus } from "convex-feedback";
+import { useState, type PropsWithChildren } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import {
+  FeedbackBodyProvider,
+  useFeedbackBody,
+} from "../../../shared/context/FeedbackBodyProvider.js";
 import {
   FeedbackProvider,
   useFeedbackUi,
 } from "../../../shared/context/FeedbackProvider.js";
-import { allowAuthenticatedAction } from "../../../shared/helpers.js";
+import { kinds } from "../../../shared/helpers.js";
 import type { RoadmapScreenProps } from "../../../shared/types/index.js";
-import { useNativeAction } from "../helpers.js";
+import { collectNativeMetadata } from "../metadata.js";
 import { Button } from "./Button.js";
-import { FeedbackBoard, FeedbackEntry } from "./primitives.js";
+import { EntryCard } from "./EntryCard.js";
+import { EntryDetail } from "./EntryDetail.js";
+import { FeedbackBoard } from "./primitives.js";
+
+const stages: readonly { value: RoadmapStatus }[] = [
+  { value: "planned" },
+  { value: "in_progress" },
+  { value: "shipped" },
+];
+
+/**
+ * Keeps the roadmap and its attached entry details on the same UI context.
+ * Routed Expo layouts reuse this provider so every route sees the same hooks,
+ * theme, messages, and comment configuration.
+ */
+export function RoadmapProvider({
+  hooks,
+  messages,
+  theme,
+  unstyled,
+  commentSort = "top",
+  maxCommentDepth = 5,
+  transformComments,
+  renderActor,
+  onUnauthenticated,
+  children,
+}: PropsWithChildren<
+  Pick<
+    RoadmapScreenProps,
+    | "hooks"
+    | "messages"
+    | "theme"
+    | "unstyled"
+    | "commentSort"
+    | "maxCommentDepth"
+    | "transformComments"
+    | "renderActor"
+    | "onUnauthenticated"
+  >
+>) {
+  return (
+    <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
+      <FeedbackBodyProvider
+        hooks={hooks}
+        entrySort="top"
+        commentSort={commentSort}
+        enabledKinds={kinds}
+        maxCommentDepth={maxCommentDepth}
+        debounceDuration={300}
+        collectStandardMetadata={collectNativeMetadata}
+        transformComments={transformComments}
+        renderActor={renderActor}
+        onUnauthenticated={onUnauthenticated}
+      >
+        {children}
+      </FeedbackBodyProvider>
+    </FeedbackProvider>
+  );
+}
 
+/** Self-contained public roadmap screen for native and non-routed Expo apps. */
 export function RoadmapScreen({
   hooks,
   messages,
@@ -22,250 +90,231 @@ export function RoadmapScreen({
   unstyled,
   onEntryOpen,
   onUnauthenticated,
-  pageSize,
-  entryPageSize,
+  commentSort,
+  maxCommentDepth,
+  transformComments,
+  renderActor,
+  pageSize = hooks.pageSizes.roadmap,
+  entryPageSize = hooks.pageSizes.entries,
   ...colors
 }: RoadmapScreenProps) {
   return (
-    <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
+    <RoadmapProvider
+      hooks={hooks}
+      messages={messages}
+      theme={theme}
+      unstyled={unstyled}
+      commentSort={commentSort}
+      maxCommentDepth={maxCommentDepth}
+      transformComments={transformComments}
+      renderActor={renderActor}
+      onUnauthenticated={onUnauthenticated}
+    >
       <RoadmapScreenInner
-        hooks={hooks}
+        pageSize={pageSize}
+        entryPageSize={entryPageSize}
         onEntryOpen={onEntryOpen}
-        onUnauthenticated={onUnauthenticated}
-        pageSize={pageSize ?? hooks.pageSizes.roadmap}
-        entryPageSize={entryPageSize ?? hooks.pageSizes.entries}
         {...colors}
       />
-    </FeedbackProvider>
+    </RoadmapProvider>
   );
 }
 
 function RoadmapScreenInner({
-  hooks,
-  onEntryOpen,
-  onUnauthenticated,
   pageSize,
   entryPageSize,
+  onEntryOpen,
   ...colors
-}: RoadmapScreenProps & {
+}: Omit<RoadmapScreenProps, "hooks" | "pageSize" | "entryPageSize"> & {
   pageSize: number;
   entryPageSize: number;
 }) {
+  const [selected, setSelected] = useState<RoadmapItem | null>(null);
+
+  return (
+    <FeedbackBoard.Root {...colors}>
+      {selected === null ? (
+        <RoadmapBoardContent pageSize={pageSize} onItemOpen={setSelected} />
+      ) : (
+        <RoadmapDetailPage
+          item={selected}
+          entryPageSize={entryPageSize}
+          onEntryOpen={onEntryOpen}
+          onBack={() => setSelected(null)}
+        />
+      )}
+    </FeedbackBoard.Root>
+  );
+}
+
+/** Board content used by both the self-contained and routed Expo screens. */
+export function RoadmapBoardContent({
+  pageSize,
+  onItemOpen,
+}: {
+  pageSize: number;
+  onItemOpen: (item: RoadmapItem) => void;
+}) {
+  const { hooks } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
+  const insets = useSafeAreaInsets();
   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}>
+    <View
+      style={[styles.boardScreen, { backgroundColor: theme.colors.background }]}
+    >
       <FeedbackBoard.Header
-        style={{ gap: theme.spacing, padding: theme.spacing }}
+        style={[
+          styles.boardHeader,
+          { paddingTop: Math.max(theme.spacing, insets.top + 12) },
+        ]}
       >
-        <FeedbackBoard.Title>Roadmap</FeedbackBoard.Title>
-        <Text style={{ color: theme.colors.mutedText }}>
-          See what is planned, in progress, and shipped.
+        <FeedbackBoard.Title>{messages.roadmap.title}</FeedbackBoard.Title>
+        <Text style={[styles.subtitle, { color: theme.colors.mutedText }]}>
+          {messages.roadmap.subtitle}
         </Text>
         <FeedbackBoard.Search
           value={query}
           onValueChange={setQuery}
-          placeholder="Search roadmap"
+          placeholder={messages.roadmap.searchPlaceholder}
+          accessibilityLabel={messages.roadmap.searchPlaceholder}
         />
       </FeedbackBoard.Header>
+
       {loading ? (
-        <FeedbackBoard.State>
-          <Text style={{ color: theme.colors.mutedText }}>
-            {messages.board.loading}
-          </Text>
-        </FeedbackBoard.State>
+        <RoadmapLoadingBoard />
       ) : items.length === 0 ? (
         <FeedbackBoard.State>
-          <Text style={{ color: theme.colors.mutedText }}>
-            {searching ? "No roadmap items found." : "No roadmap items yet."}
+          <Text style={[styles.stateText, { color: theme.colors.mutedText }]}>
+            {searching
+              ? messages.roadmap.noSearchResults
+              : messages.roadmap.noItems}
           </Text>
         </FeedbackBoard.State>
       ) : (
-        <FeedbackBoard.List contentContainerStyle={{ padding: theme.spacing }}>
-          {items.map((item) => (
-            <RoadmapCard
-              key={item.id}
-              item={item}
-              onOpen={() => setSelectedId(item.id)}
-            />
-          ))}
-        </FeedbackBoard.List>
+        <RoadmapColumns items={items} onItemOpen={onItemOpen} />
       )}
+
       {!searching &&
         (roadmap.status === "CanLoadMore" ||
           roadmap.status === "LoadingMore") && (
-          <Button
-            label={messages.board.loadMore}
-            disabled={roadmap.status === "LoadingMore"}
-            onPress={() => roadmap.loadMore(pageSize)}
-          />
+          <View
+            style={{
+              alignItems: "center",
+              paddingBottom: insets.bottom + theme.spacing,
+            }}
+          >
+            <Button
+              label={messages.board.loadMore}
+              disabled={roadmap.status === "LoadingMore"}
+              onPress={() => roadmap.loadMore(pageSize)}
+            />
+          </View>
         )}
-    </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>
+    </View>
   );
 }
 
-function RoadmapDetail({
+/** Detail content used by routed roadmap item pages and in-screen navigation. */
+export function RoadmapItemContent({
   item,
-  hooks,
   entryPageSize,
   onEntryOpen,
-  onUnauthenticated,
-  onBack,
 }: {
   item: RoadmapItem;
-  hooks: RoadmapScreenProps["hooks"];
   entryPageSize: number;
-  onEntryOpen: RoadmapScreenProps["onEntryOpen"];
-  onUnauthenticated: RoadmapScreenProps["onUnauthenticated"];
-  onBack: () => void;
+  onEntryOpen?: (entryId: string) => void;
 }) {
+  const { hooks } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const feedback = hooks.useRoadmapFeedback(item.id);
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
+
+  if (selectedEntryId !== null) {
+    return (
+      <View style={styles.entryDetail}>
+        <Button
+          label={messages.entry.back}
+          onPress={() => setSelectedEntryId(null)}
+        />
+        <EntryDetail
+          entryId={selectedEntryId}
+          hideBackButton
+          onBack={() => setSelectedEntryId(null)}
+        />
+      </View>
+    );
+  }
+
+  const openEntry = (entryId: string) => {
+    if (onEntryOpen === undefined) {
+      setSelectedEntryId(entryId);
+    } else {
+      onEntryOpen(entryId);
+    }
+  };
+
   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" }}
-        >
+    <View style={styles.detailContent}>
+      <View style={styles.detailIntro}>
+        <View style={styles.detailMetaRow}>
+          <RoadmapStatusBadge status={item.status} />
+          <Text style={[styles.detailCount, { color: theme.colors.mutedText }]}>
+            {messages.roadmap.linkedEntries(item.feedbackCount)}
+          </Text>
+        </View>
+        <Text style={[styles.detailTitle, { color: theme.colors.text }]}>
           {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()}
-        />
+        {item.description ? (
+          <Text
+            style={[
+              styles.detailDescription,
+              { color: theme.colors.mutedText },
+            ]}
+          >
+            {item.description}
+          </Text>
+        ) : null}
       </View>
-      <Text
-        style={{ color: theme.colors.text, fontSize: 18, fontWeight: "700" }}
-      >
-        Attached feedback
+
+      <Text style={[styles.sectionTitle, { color: theme.colors.text }]}>
+        {messages.roadmap.attachedFeedback}
       </Text>
+
       {feedback.status === "LoadingFirstPage" ? (
-        <Text style={{ color: theme.colors.mutedText }}>
-          {messages.board.loading}
-        </Text>
+        <View style={styles.loadingInline}>
+          <ActivityIndicator color={theme.colors.primary} />
+        </View>
       ) : feedback.results.length === 0 ? (
-        <Text style={{ color: theme.colors.mutedText }}>
-          No feedback attached.
+        <Text style={[styles.emptyText, { color: theme.colors.mutedText }]}>
+          {messages.roadmap.noAttachedFeedback}
         </Text>
       ) : (
-        <View style={{ gap: 8 }}>
+        <View style={styles.entryList}>
           {feedback.results.map((entry) => (
-            <RoadmapEntry
+            <EntryCard
               key={entry.id}
               entry={entry}
               hooks={hooks}
-              onOpen={onEntryOpen}
-              onUnauthenticated={onUnauthenticated}
+              onOpen={() => openEntry(entry.id)}
             />
           ))}
         </View>
       )}
+
       {(feedback.status === "CanLoadMore" ||
         feedback.status === "LoadingMore") && (
         <Button
-          label={messages.comments.loadMore}
+          label={messages.board.loadMore}
           disabled={feedback.status === "LoadingMore"}
           onPress={() => feedback.loadMore(entryPageSize)}
         />
@@ -274,72 +323,345 @@ function RoadmapDetail({
   );
 }
 
-function RoadmapField({ label, value }: { label: string; value: string }) {
-  const { theme } = useFeedbackUi();
+function RoadmapDetailPage({
+  item,
+  entryPageSize,
+  onEntryOpen,
+  onBack,
+}: {
+  item: RoadmapItem;
+  entryPageSize: number;
+  onEntryOpen?: (entryId: string) => void;
+  onBack: () => void;
+}) {
+  const { theme, messages } = useFeedbackUi();
+  const insets = useSafeAreaInsets();
+
   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
+      style={[
+        styles.detailScreen,
+        { backgroundColor: theme.colors.background },
+      ]}
+    >
+      <View
+        style={[
+          styles.detailToolbar,
+          { paddingTop: Math.max(theme.spacing, insets.top + 8) },
+        ]}
+      >
+        <Button label={messages.entry.back} onPress={onBack} />
+      </View>
+      <FeedbackBoard.List
+        style={{
+          paddingHorizontal: theme.spacing,
+          paddingBottom: insets.bottom + theme.spacing * 2,
+        }}
+      >
+        <RoadmapItemContent
+          item={item}
+          entryPageSize={entryPageSize}
+          onEntryOpen={onEntryOpen}
+        />
+      </FeedbackBoard.List>
     </View>
   );
 }
 
-function RoadmapEntry({
-  entry,
-  hooks,
-  onOpen,
-  onUnauthenticated,
+function RoadmapColumns({
+  items,
+  onItemOpen,
 }: {
-  entry: FeedbackEntryData;
-  hooks: RoadmapScreenProps["hooks"];
-  onOpen: RoadmapScreenProps["onEntryOpen"];
-  onUnauthenticated: RoadmapScreenProps["onUnauthenticated"];
+  items: readonly RoadmapItem[];
+  onItemOpen: (item: RoadmapItem) => void;
 }) {
-  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",
-    );
-  };
+  const { messages, theme } = useFeedbackUi();
+  const insets = useSafeAreaInsets();
 
   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 />
+    <ScrollView
+      horizontal
+      style={styles.columnsScroll}
+      contentInsetAdjustmentBehavior="automatic"
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.columnsContent,
+        {
+          paddingLeft: theme.spacing + insets.left,
+          paddingRight: theme.spacing + insets.right,
+          paddingBottom: insets.bottom + theme.spacing * 2,
+        },
+      ]}
+    >
+      {stages.map((stage) => {
+        const stageItems = items
+          .filter((item) => item.status === stage.value)
+          .sort((a, b) => a.position - b.position);
+
+        return (
+          <View
+            key={stage.value}
+            style={[
+              styles.column,
+              {
+                borderColor: theme.colors.border,
+                backgroundColor: theme.colors.surfaceMuted,
+              },
+            ]}
+          >
+            <View
+              style={[
+                styles.columnHeader,
+                { borderColor: theme.colors.border },
+              ]}
+            >
+              <View style={styles.columnHeading}>
+                <RoadmapStatusBadge status={stage.value} />
+                <Text
+                  style={[styles.columnTitle, { color: theme.colors.text }]}
+                >
+                  {messages.roadmap.statuses[stage.value]}
+                </Text>
+              </View>
+              <Text
+                style={[styles.columnCount, { color: theme.colors.mutedText }]}
+              >
+                {stageItems.length}
+              </Text>
             </View>
-            <FeedbackEntry.Title />
-            <FeedbackEntry.Body />
-            <FeedbackEntry.CommentCount />
+            <ScrollView
+              style={styles.columnList}
+              nestedScrollEnabled
+              contentInsetAdjustmentBehavior="never"
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={styles.columnItems}
+            >
+              {stageItems.length === 0 ? (
+                <Text
+                  style={[
+                    styles.emptyColumn,
+                    { color: theme.colors.mutedText },
+                  ]}
+                >
+                  {messages.roadmap.noItems}
+                </Text>
+              ) : (
+                stageItems.map((item) => (
+                  <RoadmapCard
+                    key={item.id}
+                    item={item}
+                    onOpen={() => onItemOpen(item)}
+                  />
+                ))
+              )}
+            </ScrollView>
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+function RoadmapLoadingBoard() {
+  const { messages, theme } = useFeedbackUi();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      horizontal
+      style={styles.columnsScroll}
+      contentInsetAdjustmentBehavior="automatic"
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.columnsContent,
+        {
+          paddingLeft: theme.spacing + insets.left,
+          paddingRight: theme.spacing + insets.right,
+          paddingBottom: insets.bottom + theme.spacing * 2,
+        },
+      ]}
+    >
+      {stages.map((stage) => (
+        <View
+          key={stage.value}
+          style={[
+            styles.column,
+            {
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.surfaceMuted,
+            },
+          ]}
+        >
+          <View
+            style={[styles.columnHeader, { borderColor: theme.colors.border }]}
+          >
+            <Text style={[styles.columnTitle, { color: theme.colors.text }]}>
+              {messages.roadmap.statuses[stage.value]}
+            </Text>
+          </View>
+          <View style={styles.loadingColumn}>
+            <ActivityIndicator color={theme.colors.primary} />
           </View>
-        </FeedbackEntry.Content>
-      </Pressable>
-    </FeedbackEntry.Root>
+        </View>
+      ))}
+    </ScrollView>
+  );
+}
+
+function RoadmapCard({
+  item,
+  onOpen,
+}: {
+  item: RoadmapItem;
+  onOpen: () => void;
+}) {
+  const { messages, theme } = useFeedbackUi();
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={item.title}
+      onPress={onOpen}
+      style={({ pressed }) => [
+        styles.card,
+        {
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.surface,
+        },
+        pressed && styles.pressed,
+      ]}
+    >
+      <View style={styles.cardMeta}>
+        <RoadmapStatusBadge status={item.status} />
+        <Text style={[styles.cardCount, { color: theme.colors.mutedText }]}>
+          {messages.roadmap.linkedEntries(item.feedbackCount)}
+        </Text>
+      </View>
+      <Text style={[styles.cardTitle, { color: theme.colors.text }]}>
+        {item.title}
+      </Text>
+      {item.description ? (
+        <Text
+          style={[styles.cardDescription, { color: theme.colors.mutedText }]}
+          numberOfLines={3}
+        >
+          {item.description}
+        </Text>
+      ) : null}
+      <Text style={[styles.cardLink, { color: theme.colors.primary }]}>
+        {messages.entry.open} ›
+      </Text>
+    </Pressable>
   );
 }
 
-function useFeedbackAuth(hooks: RoadmapScreenProps["hooks"]) {
-  return { isAuthenticated: hooks.useIsAuthenticated() };
+function RoadmapStatusBadge({ status }: { status: RoadmapStatus }) {
+  const { messages, theme } = useFeedbackUi();
+
+  return (
+    <View
+      style={[
+        styles.statusBadge,
+        {
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.surfaceMuted,
+        },
+      ]}
+    >
+      <View
+        style={[styles.statusDot, { backgroundColor: theme.colors.primary }]}
+      />
+      <Text style={[styles.statusText, { color: theme.colors.mutedText }]}>
+        {messages.roadmap.statuses[status]}
+      </Text>
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  boardScreen: { flex: 1, minHeight: 0 },
+  boardHeader: {
+    gap: 10,
+    paddingHorizontal: 18,
+    paddingBottom: 16,
+  },
+  subtitle: { fontSize: 14, lineHeight: 20 },
+  stateText: { textAlign: "center" },
+  columnsScroll: { flex: 1 },
+  columnsContent: { gap: 12, alignItems: "stretch", paddingTop: 4 },
+  column: {
+    width: 306,
+    minHeight: 400,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 18,
+    overflow: "hidden",
+  },
+  columnHeader: {
+    minHeight: 58,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 14,
+  },
+  columnHeading: { flexDirection: "row", alignItems: "center", gap: 8 },
+  columnTitle: { fontSize: 14, fontWeight: "700" },
+  columnCount: { fontSize: 12, fontWeight: "700" },
+  columnItems: { gap: 10, padding: 10 },
+  columnList: { flex: 1 },
+  emptyColumn: {
+    fontSize: 13,
+    lineHeight: 20,
+    paddingHorizontal: 8,
+    paddingVertical: 26,
+    textAlign: "center",
+  },
+  loadingColumn: { flex: 1, alignItems: "center", justifyContent: "center" },
+  card: {
+    gap: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 14,
+    padding: 14,
+  },
+  pressed: { opacity: 0.7 },
+  cardMeta: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+  },
+  cardCount: { fontSize: 11, fontWeight: "600" },
+  cardTitle: { fontSize: 16, fontWeight: "700", lineHeight: 21 },
+  cardDescription: { fontSize: 13, lineHeight: 19 },
+  cardLink: { fontSize: 13, fontWeight: "700" },
+  statusBadge: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 999,
+    paddingHorizontal: 7,
+    paddingVertical: 4,
+  },
+  statusDot: { width: 6, height: 6, borderRadius: 3 },
+  statusText: { fontSize: 11, fontWeight: "700" },
+  detailScreen: { flex: 1, minHeight: 0 },
+  detailToolbar: { paddingHorizontal: 18, paddingBottom: 10 },
+  detailContent: { gap: 18 },
+  detailIntro: { gap: 10 },
+  detailMetaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 10,
+  },
+  detailCount: { fontSize: 12, fontWeight: "600" },
+  detailTitle: { fontSize: 26, fontWeight: "800", lineHeight: 31 },
+  detailDescription: { fontSize: 15, lineHeight: 23 },
+  sectionTitle: { fontSize: 18, fontWeight: "800" },
+  loadingInline: { paddingVertical: 22 },
+  emptyText: { lineHeight: 20 },
+  entryList: { gap: 10 },
+  entryDetail: { gap: 16 },
+});