convex-feedback-ui 0.1.7 → 0.1.8

package/src/native/expo/FeedbackRoutes.tsx

@@ -85,6 +85,7 @@ export function FeedbackBoardScreen() {
           }
           accessibilityLabel={messages.entry.back}
           onPress={() => router.back()}
+          tintColor={theme.colors.text}
         >
           {messages.entry.back}
         </Stack.Toolbar.Button>
@@ -102,6 +103,7 @@ export function FeedbackBoardScreen() {
       />
       <Stack.Toolbar placement="bottom">
         <Stack.Toolbar.SearchBarSlot />
+        <Stack.Toolbar.Spacer />
         <Stack.Toolbar.Menu
           icon={
             process.env.EXPO_OS === "ios"
@@ -110,7 +112,7 @@ export function FeedbackBoardScreen() {
           }
           title={messages.board.statusFilter}
           accessibilityLabel={messages.board.statusFilter}
-          tintColor={theme.colors.primary}
+          tintColor={theme.colors.text}
         >
           {entryStatusChoices(messages).map(({ value, label }) => (
             <Stack.Toolbar.MenuAction
@@ -174,6 +176,7 @@ function FeedbackEntryRouteContent({ entryId }: { entryId: string }) {
             }
             accessibilityLabel={messages.form.cancel}
             onPress={modal.dismiss}
+            tintColor={theme.colors.text}
           >
             {messages.form.cancel}
           </Stack.Toolbar.Button>
@@ -229,6 +232,7 @@ export function CreateFeedbackScreen() {
           }
           accessibilityLabel={messages.form.cancel}
           onPress={() => (modal ? modal.dismiss() : router.dismiss())}
+          tintColor={theme.colors.text}
         >
           {messages.form.cancel}
         </Stack.Toolbar.Button>

package/src/native/expo/FeedbackScreen.tsx

@@ -17,6 +17,7 @@ export function FeedbackScreen({
   debounceDuration = 300,
   collectMetadata,
   emptyState,
+  loading,
   transformComments,
   renderActor,
   ...props
@@ -32,6 +33,7 @@ export function FeedbackScreen({
         debounceDuration={debounceDuration}
         collectMetadata={collectMetadata}
         emptyState={emptyState}
+        loading={loading}
         collectStandardMetadata={collectExpoMetadata}
         transformComments={transformComments}
         renderActor={renderActor}

package/src/native/expo/FeedbackStack.tsx

@@ -52,6 +52,7 @@ export function FeedbackStack({
           headerTransparent: true,
           headerShadowVisible: true,
           headerBackVisible: false,
+          headerTintColor: theme.colors.text,
           contentStyle: { backgroundColor: theme.colors.background },
           ...stackOptions,
         }}
@@ -79,6 +80,7 @@ export function FeedbackStack({
           }
           accessibilityLabel={messages.entry.back}
           onPress={handleBackPress}
+          tintColor={theme.colors.text}
         >
           {messages.entry.back}
         </Stack.Toolbar.Button>
@@ -91,10 +93,6 @@ export function FeedbackStack({
           if (selectedEntryId) setSelectedEntryId(null);
           setQuery(q.nativeEvent.text);
         }}
-        onOpen={() => console.log("opened")}
-        onClose={() => console.log("closed")}
-        onSearchButtonPress={() => console.log("search button pressed")}
-        onCancelButtonPress={() => console.log("cancel button pressed")}
         onFocus={() => {
           if (selectedEntryId) setSelectedEntryId(null);
           setIsSearching(true);
@@ -108,6 +106,7 @@ export function FeedbackStack({
       />
       <Stack.Toolbar placement="bottom">
         <Stack.Toolbar.SearchBarSlot />
+        <Stack.Toolbar.Spacer />
         <Stack.Toolbar.Menu
           icon={
             process.env.EXPO_OS === "ios"
@@ -116,7 +115,7 @@ export function FeedbackStack({
           }
           title={messages.board.statusFilter}
           accessibilityLabel={messages.board.statusFilter}
-          tintColor={theme.colors.primary}
+          tintColor={theme.colors.text}
         >
           {entryStatusChoices(messages).map(({ value, label }) => (
             <Stack.Toolbar.MenuAction

package/src/native/expo/FeedbackStackLayout.tsx

@@ -22,6 +22,7 @@ export function FeedbackStackLayout({
   debounceDuration = 300,
   collectMetadata,
   emptyState,
+  loading,
   transformComments,
   renderActor,
   routes: routeOverrides,
@@ -60,6 +61,7 @@ export function FeedbackStackLayout({
   const defaults: NativeStackNavigationOptions = {
     headerShown: true,
     headerBackButtonDisplayMode: "minimal",
+    headerTintColor: textColor ?? resolvedTheme.colors.text,
     contentStyle: { backgroundColor: background },
   };
 
@@ -74,6 +76,7 @@ export function FeedbackStackLayout({
         debounceDuration={debounceDuration}
         collectMetadata={collectMetadata}
         emptyState={emptyState}
+        loading={loading}
         collectStandardMetadata={collectExpoMetadata}
         transformComments={transformComments}
         renderActor={renderActor}

package/src/native/native/FeedbackScreen.tsx

@@ -17,6 +17,7 @@ export function FeedbackScreen({
   debounceDuration = 300,
   collectMetadata,
   emptyState,
+  loading,
   transformComments,
   renderActor,
   ...props
@@ -32,6 +33,7 @@ export function FeedbackScreen({
         debounceDuration={debounceDuration}
         collectMetadata={collectMetadata}
         emptyState={emptyState}
+        loading={loading}
         collectStandardMetadata={collectNativeMetadata}
         transformComments={transformComments}
         renderActor={renderActor}

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

@@ -1,4 +1,4 @@
-import { Text } from "react-native";
+import { ActivityIndicator, Text } from "react-native";
 
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
@@ -26,6 +26,7 @@ export function FeedbackScreenList({
     setSelectedEntryId,
     setShowForm,
     emptyState,
+    loading: loadingIndicator,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
 
@@ -59,9 +60,9 @@ export function FeedbackScreenList({
         </FeedbackBoard.List>
       ) : loading ? (
         <FeedbackBoard.State>
-          <Text style={{ color: theme.colors.mutedText }}>
-            {messages.board.loading}
-          </Text>
+          {loadingIndicator ?? (
+            <ActivityIndicator size="large" color={theme.colors.primary} />
+          )}
         </FeedbackBoard.State>
       ) : entries !== undefined && entries.length === 0 ? (
         <FeedbackBoard.State>

package/src/react/screen.tsx

@@ -55,6 +55,7 @@ export function FeedbackScreen({
   debounceDuration = 300,
   collectMetadata,
   emptyState,
+  loading,
   ...props
 }: FeedbackScreenProps) {
   return (
@@ -68,6 +69,7 @@ export function FeedbackScreen({
         debounceDuration={debounceDuration}
         collectMetadata={collectMetadata}
         emptyState={emptyState}
+        loading={loading}
         collectStandardMetadata={collectWebMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
@@ -100,6 +102,7 @@ function FeedbackScreenInner({
     setQuery,
     debouncedQuery,
     emptyState,
+    loading: loadingIndicator,
   } = useFeedbackBody();
   const { messages } = useFeedbackUi();
 
@@ -127,7 +130,7 @@ function FeedbackScreenInner({
 
   const searching = query.trim().length > 0;
   const entries = searching ? searchResults : list.results;
-  const loading = searching
+  const isLoading = searching
     ? searchResults === undefined
     : list.status === "LoadingFirstPage";
 
@@ -166,9 +169,11 @@ function FeedbackScreenInner({
 
       <FeedbackBoard.Search value={query} onValueChange={setQuery} />
 
-      {loading ? (
+      {isLoading ? (
         <FeedbackBoard.State>
-          <span className="cf-state__message">{messages.board.loading}</span>
+          {loadingIndicator ?? (
+            <span className="cf-state__message">{messages.board.loading}</span>
+          )}
         </FeedbackBoard.State>
       ) : entries !== undefined && entries.length === 0 ? (
         <FeedbackBoard.State>

package/src/shared/context/FeedbackBodyProvider.tsx

@@ -25,6 +25,7 @@ export function FeedbackBodyProvider({
   debounceDuration,
   collectMetadata,
   emptyState,
+  loading,
   collectStandardMetadata,
   transformComments,
   renderActor,
@@ -71,6 +72,7 @@ export function FeedbackBodyProvider({
     debounceDuration,
     collectMetadata,
     emptyState,
+    loading,
     collectStandardMetadata,
     transformComments,
     renderActor,

package/src/shared/types/screen.ts

@@ -99,6 +99,9 @@ export interface FeedbackScreenBaseProps {
 
   /** Optional host-owned content rendered above the empty-state message. */
   emptyState?: ReactNode;
+
+  /** Optional host-owned loading indicator rendered during board loading. */
+  loading?: ReactNode;
 }
 
 export interface FeedbackScreenRootProps
@@ -110,10 +113,16 @@ export interface FeedbackScreenRootProps
 
 export interface FeedbackScreenProviderProps
   extends
-    Required<Omit<FeedbackScreenBaseProps, "collectMetadata" | "emptyState">>,
+    Required<
+      Omit<
+        FeedbackScreenBaseProps,
+        "collectMetadata" | "emptyState" | "loading"
+      >
+    >,
     FeedbackScreenTransformationProps {
   collectMetadata?: CollectMetadata;
   emptyState?: ReactNode;
+  loading?: ReactNode;
   collectStandardMetadata: StandardMetadataCollector;
 }