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

package/src/native/expo/RoadmapRoutes.tsx

@@ -1,5 +1,7 @@
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
+import { useRef, useState } from "react";
 import { ActivityIndicator } from "react-native";
+import type { SearchBarCommands } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { useFeedbackBody } from "../../shared/context/FeedbackBodyProvider.js";
@@ -20,21 +22,50 @@ export function RoadmapBoardScreen() {
   const { messages, theme } = useFeedbackUi();
   const { routes, colors, androidToolbarIcons, pageSize } = useRoutedRoadmap();
   const router = useRouter();
+  const [query, setQuery] = useState("");
+  const searchRef = useRef<SearchBarCommands>(null);
 
   return (
     <>
+      <Stack.Screen
+        options={{
+          headerTitle: messages.roadmap.title,
+          headerBackVisible: false,
+        }}
+      />
       <FeedbackBoard.Root {...colors}>
         <RoadmapBoardContent
           pageSize={pageSize}
-          onItemOpen={(item) =>
+          query={query}
+          onQueryChange={setQuery}
+          showHeader={false}
+          onItemOpen={(item) => {
+            searchRef.current?.blur();
             router.push(
               roadmapRouteHref(routes.item, roadmapRouteParams(item)),
               { relativeToDirectory: true },
-            )
-          }
+            );
+          }}
         />
       </FeedbackBoard.Root>
 
+      <Stack.SearchBar
+        ref={searchRef}
+        placeholder={messages.roadmap.searchPlaceholder}
+        onChangeText={(event) =>
+          setQuery(
+            (event as unknown as { nativeEvent: { text: string } }).nativeEvent
+              .text,
+          )
+        }
+        obscureBackground={false}
+        allowToolbarIntegration
+        hideNavigationBar={false}
+        textColor={theme.colors.text}
+      />
+      <Stack.Toolbar placement="bottom">
+        <Stack.Toolbar.SearchBarSlot />
+      </Stack.Toolbar>
       <Stack.Toolbar placement="left">
         <Stack.Toolbar.Button
           hidden={!router.canGoBack()}
@@ -61,7 +92,7 @@ export function RoadmapItemScreen() {
   }>();
   const { hooks } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
-  const { colors, androidToolbarIcons, entryPageSize, onEntryOpen } =
+  const { routes, colors, androidToolbarIcons, entryPageSize, onEntryOpen } =
     useRoutedRoadmap();
   const router = useRouter();
   const insets = useSafeAreaInsets();
@@ -84,7 +115,9 @@ export function RoadmapItemScreen() {
     <>
       {item ? (
         <>
-          <Stack.Screen options={{ headerTitle: item.title }} />
+          <Stack.Screen
+            options={{ headerTitle: item.title, headerBackVisible: false }}
+          />
           <FeedbackBoard.Root {...colors}>
             <FeedbackBoard.List
               style={{
@@ -115,14 +148,19 @@ export function RoadmapItemScreen() {
 
       <Stack.Toolbar placement="left">
         <Stack.Toolbar.Button
-          hidden={!router.canGoBack()}
           icon={
             process.env.EXPO_OS === "ios"
               ? "chevron.backward"
               : androidToolbarIcons.back
           }
           accessibilityLabel={messages.entry.back}
-          onPress={() => router.back()}
+          onPress={() => {
+            if (router.canGoBack()) {
+              router.back();
+            } else {
+              router.replace(roadmapRouteHref(routes.board));
+            }
+          }}
           tintColor={theme.colors.text}
         >
           {messages.entry.back}

package/src/native/expo/RoadmapScreen.tsx

@@ -1,9 +1,16 @@
 import { Stack, useRouter } from "expo-router";
+import { useRef, useState } from "react";
+import type { SearchBarCommands } from "react-native-screens";
 
-import { mergeFeedbackMessages } from "../../shared/messages.js";
-import { mergeFeedbackTheme } from "../../shared/theme.js";
-import { RoadmapScreen as NativeRoadmapScreen } from "../shared/ui/RoadmapScreen.js";
+import { useFeedbackUi } from "../../shared/context/FeedbackProvider.js";
+import type { mergeFeedbackMessages } from "../../shared/messages.js";
+import type { mergeFeedbackTheme } from "../../shared/theme.js";
 import type { RoadmapScreenProps } from "../../shared/types/index.js";
+import {
+  RoadmapProvider,
+  RoadmapScreen as NativeRoadmapScreen,
+  RoadmapScreenContent,
+} from "../shared/ui/RoadmapScreen.js";
 import type {
   RoadmapAndroidToolbarIcons,
   RoadmapStackScreenOptions,
@@ -32,16 +39,52 @@ export type ExpoRoadmapScreenProps = RoadmapScreenProps &
  * `RoadmapStackLayout` when the board and item detail should be separate
  * discovered Expo Router pages.
  */
-export function RoadmapScreen({
-  useStack = true,
-  StackOptions,
-  androidToolbarIcons = {},
-  ...props
-}: ExpoRoadmapScreenProps) {
-  if (!useStack) return <NativeRoadmapScreen {...props} />;
+export function RoadmapScreen(props: ExpoRoadmapScreenProps) {
+  if (props.useStack === false) {
+    return <NativeRoadmapScreen {...props} />;
+  }
 
-  const messages = mergeFeedbackMessages(props.messages);
-  const theme = mergeFeedbackTheme(props.theme);
+  return (
+    <RoadmapProvider
+      hooks={props.hooks}
+      messages={props.messages}
+      theme={props.theme}
+      unstyled={props.unstyled}
+      commentSort={props.commentSort}
+      maxCommentDepth={props.maxCommentDepth}
+      transformComments={props.transformComments}
+      renderActor={props.renderActor}
+      onUnauthenticated={props.onUnauthenticated}
+    >
+      <StackedRoadmapScreen props={props} />
+    </RoadmapProvider>
+  );
+}
+
+function StackedRoadmapScreen({
+  props,
+}: {
+  props: RoadmapScreenWithStack & RoadmapScreenProps;
+}) {
+  const {
+    androidToolbarIcons = {},
+    hooks,
+    pageSize,
+    entryPageSize,
+    onEntryOpen,
+    onUnauthenticated,
+    primaryColor,
+    primaryForeground,
+    backgroundColor,
+    surfaceColor,
+    textColor,
+    mutedColor,
+    borderColor,
+    dangerColor,
+  } = props;
+  const { messages, theme } = useFeedbackUi();
+  const [query, setQuery] = useState("");
+  const searchRef = useRef<SearchBarCommands>(null);
 
   return (
     <>
@@ -49,23 +92,56 @@ export function RoadmapScreen({
         options={{
           headerTitle: messages.roadmap.title,
           headerShown: true,
-          headerTransparent: true,
+          headerTransparent: false,
           headerShadowVisible: true,
           headerBackButtonDisplayMode: "minimal",
           headerBackVisible: false,
-          headerTintColor: props.textColor ?? theme.colors.text,
+          headerTintColor: textColor ?? theme.colors.text,
           contentStyle: {
-            backgroundColor: props.backgroundColor ?? theme.colors.background,
+            backgroundColor: backgroundColor ?? theme.colors.background,
           },
-          ...StackOptions,
+          ...props.StackOptions,
         }}
       />
+      <Stack.SearchBar
+        ref={searchRef}
+        placeholder={messages.roadmap.searchPlaceholder}
+        onChangeText={(event) =>
+          setQuery(
+            (event as unknown as { nativeEvent: { text: string } }).nativeEvent
+              .text,
+          )
+        }
+        obscureBackground={false}
+        allowToolbarIntegration
+        hideNavigationBar={false}
+        textColor={theme.colors.text}
+      />
+      <Stack.Toolbar placement="bottom">
+        <Stack.Toolbar.SearchBarSlot />
+      </Stack.Toolbar>
       <RoadmapToolbar
         androidToolbarIcons={androidToolbarIcons}
         messages={messages}
         theme={theme}
       />
-      <NativeRoadmapScreen {...props} />
+      <RoadmapScreenContent
+        pageSize={pageSize ?? hooks.pageSizes.roadmap}
+        entryPageSize={entryPageSize ?? hooks.pageSizes.entries}
+        query={query}
+        onQueryChange={setQuery}
+        showBoardHeader={false}
+        onEntryOpen={onEntryOpen}
+        onUnauthenticated={onUnauthenticated}
+        primaryColor={primaryColor}
+        primaryForeground={primaryForeground}
+        backgroundColor={backgroundColor}
+        surfaceColor={surfaceColor}
+        textColor={textColor}
+        mutedColor={mutedColor}
+        borderColor={borderColor}
+        dangerColor={dangerColor}
+      />
     </>
   );
 }

package/src/native/expo/RoadmapStackLayout.tsx

@@ -54,7 +54,6 @@ export function RoadmapStackLayout({
   };
   const defaults: NativeStackNavigationOptions = {
     headerShown: true,
-    headerTransparent: true,
     headerShadowVisible: true,
     headerBackButtonDisplayMode: "minimal",
     headerTintColor: textColor ?? resolvedTheme.colors.text,

package/src/native/expo/index.ts

@@ -5,10 +5,12 @@ export * from "../../shared/metadata.js";
 export * from "../../shared/theme.js";
 export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
+export * from "../shared/ui/RoadmapBoard.js";
 export {
   RoadmapBoardContent,
   RoadmapItemContent,
   RoadmapProvider,
+  RoadmapScreenContent,
 } from "../shared/ui/RoadmapScreen.js";
 export * from "./metadata.js";
 export * from "./FeedbackScreen.js";

package/src/native/native/README.md

@@ -20,3 +20,8 @@ Containers such as `FeedbackEntry.Content`, `FeedbackForm.Root`, and `Comment.Ch
 and renders attached entries with the existing `EntryCard` and `EntryDetail`
 views. Pass `onUnauthenticated` to handle auth when an anonymous visitor votes
 or comments.
+
+The exported `RoadmapBoard` is the reusable admin-style horizontal board
+layout. Supply ordered stages, colors, and a `renderItem` callback to share the
+same column scrolling behavior while customizing cards for an admin or public
+surface.

package/src/native/native/index.ts

@@ -5,6 +5,7 @@ export * from "../../shared/metadata.js";
 export * from "../../shared/theme.js";
 export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
+export * from "../shared/ui/RoadmapBoard.js";
 export * from "../shared/metadata.js";
 export * from "./FeedbackScreen.js";
 export * from "../shared/ui/RoadmapScreen.js";

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

@@ -10,6 +10,7 @@ export function EntryCard({
   entry,
   hooks,
   onOpen,
+  titleNumberOfLines,
 }: FeedbackScreenEntryCardProps) {
   const { isAuthenticated, onUnauthenticated } = useFeedbackBody();
   const setUpvote = hooks.useSetEntryUpvote();
@@ -46,7 +47,7 @@ export function EntryCard({
           <FeedbackEntry.Kind />
           <FeedbackEntry.Status />
         </View>
-        <FeedbackEntry.Title />
+        <FeedbackEntry.Title numberOfLines={titleNumberOfLines} />
         <FeedbackEntry.Body numberOfLines={3} />
         <FeedbackEntry.CommentCount />
       </Pressable>

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

@@ -0,0 +1,225 @@
+import type { RoadmapItem, RoadmapStatus } from "convex-feedback";
+import type { ReactElement, ReactNode } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export interface RoadmapBoardStage {
+  value: RoadmapStatus;
+  label: string;
+}
+
+export interface RoadmapBoardColors {
+  background: string;
+  surface: string;
+  text: string;
+  muted: string;
+  border: string;
+  primary: string;
+}
+
+export interface RoadmapBoardItemRenderArgs {
+  item: RoadmapItem;
+  stage: RoadmapBoardStage;
+  stageIndex: number;
+  onOpen: () => void;
+}
+
+export interface RoadmapBoardProps {
+  /** Items are grouped into columns using their current status. */
+  items: readonly RoadmapItem[];
+  /** Ordered columns rendered from left to right. */
+  stages: readonly RoadmapBoardStage[];
+  /** Colors used by the shared board frame and its loading/empty states. */
+  colors: RoadmapBoardColors;
+  /** Shows the same full-board loading state as the admin roadmap. */
+  loading?: boolean;
+  /** Copy shown when a column does not contain any items. */
+  emptyLabel: string;
+  /** Opens a roadmap item from any rendered card. */
+  onItemOpen: (item: RoadmapItem) => void;
+  /** Supplies the card UI so admin and user-facing cards can differ. */
+  renderItem: (args: RoadmapBoardItemRenderArgs) => ReactElement | null;
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export interface RoadmapBoardCardProps extends Pick<
+  ViewProps,
+  "accessibilityLabel"
+> {
+  colors: Pick<RoadmapBoardColors, "border" | "surface">;
+  onPress: () => void;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Shared admin-style pressable card shell with configurable contents. */
+export function RoadmapBoardCard({
+  colors,
+  onPress,
+  accessibilityLabel,
+  children,
+  style,
+}: RoadmapBoardCardProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.card,
+        {
+          borderColor: colors.border,
+          backgroundColor: colors.surface,
+        },
+        style,
+        pressed && styles.pressed,
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+/**
+ * Shared stage-board layout used by the public roadmap and admin app.
+ *
+ * The outer list scrolls horizontally while each stage owns its vertical
+ * `FlatList`, matching the admin board's bounded nested-scroll structure.
+ */
+export function RoadmapBoard({
+  items,
+  stages,
+  colors,
+  loading = false,
+  emptyLabel,
+  onItemOpen,
+  renderItem,
+  style,
+  contentContainerStyle,
+}: RoadmapBoardProps) {
+  const insets = useSafeAreaInsets();
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        style={[styles.loader, { backgroundColor: colors.background }, style]}
+        color={colors.primary}
+      />
+    );
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      style={[
+        styles.boardScroll,
+        { backgroundColor: colors.background },
+        style,
+      ]}
+      contentInsetAdjustmentBehavior="automatic"
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.board,
+        {
+          paddingLeft: 12 + insets.left,
+          paddingRight: 12 + insets.right,
+          paddingBottom: 24 + insets.bottom,
+        },
+        contentContainerStyle,
+      ]}
+    >
+      {stages.map((stage, stageIndex) => {
+        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: colors.border,
+                backgroundColor: colors.surface,
+              },
+            ]}
+          >
+            <View style={[styles.columnHeader, { borderColor: colors.border }]}>
+              <Text style={[styles.columnTitle, { color: colors.text }]}>
+                {stage.label}
+              </Text>
+              <Text style={[styles.count, { color: colors.muted }]}>
+                {stageItems.length}
+              </Text>
+            </View>
+            <FlatList
+              data={stageItems}
+              nestedScrollEnabled
+              contentInsetAdjustmentBehavior="never"
+              keyExtractor={(item) => item.id}
+              contentContainerStyle={[
+                styles.cards,
+                { paddingBottom: 16 + insets.bottom },
+              ]}
+              ListEmptyComponent={
+                <Text style={[styles.empty, { color: colors.muted }]}>
+                  {emptyLabel}
+                </Text>
+              }
+              renderItem={({ item }) =>
+                renderItem({
+                  item,
+                  stage,
+                  stageIndex,
+                  onOpen: () => onItemOpen(item),
+                })
+              }
+            />
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  boardScroll: { flex: 1 },
+  loader: { flex: 1 },
+  board: { gap: 12, paddingTop: 12 },
+  column: {
+    width: 310,
+    borderWidth: 1,
+    borderRadius: 16,
+    overflow: "hidden",
+  },
+  columnHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderBottomWidth: 1,
+    padding: 14,
+  },
+  columnTitle: { fontSize: 14, fontWeight: "700" },
+  count: { fontSize: 12 },
+  cards: { gap: 10, padding: 10 },
+  empty: { padding: 18, textAlign: "center" },
+  card: {
+    gap: 8,
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 13,
+  },
+  pressed: { opacity: 0.7 },
+});