convex-feedback-ui 0.1.4 → 0.1.6

package/src/native/expo/types.ts

@@ -1,14 +1,21 @@
 import type { StackScreenProps } from "expo-router";
+import type { ImageSourcePropType } from "react-native";
 import type { SearchBarCommands } from "react-native-screens";
-import type { FeedbackScreenRootProps } from "../../shared/types";
+import type {
+  FeedbackColorProps,
+  FeedbackScreenRootProps,
+} from "../../shared/types";
 
 interface FeedbackScreenWithStack {
   useStack?: true;
   StackOptions?: StackScreenProps["options"];
+  /** Android image sources for toolbar actions. iOS continues to use SF Symbols. */
+  androidToolbarIcons?: FeedbackAndroidToolbarIcons;
 }
 interface FeedbackScreenWithoutStack {
   useStack?: false;
   StackOptions?: never;
+  androidToolbarIcons?: never;
 }
 export type FeedbackScreenStackProps =
   FeedbackScreenWithStack | FeedbackScreenWithoutStack;
@@ -19,5 +26,60 @@ export type ExpoFeedbackScreenProps = FeedbackScreenStackProps &
 export interface FeedbackStackProps {
   searchRef: React.RefObject<SearchBarCommands | null>;
   stackOptions?: StackScreenProps["options"];
+  androidToolbarIcons?: FeedbackAndroidToolbarIcons;
   children: React.ReactNode;
 }
+
+/** File names used by the routed feedback stack. */
+export interface FeedbackRouteNames {
+  /** Board route. @default "index" */
+  board: string;
+  /** Entry route. Must contain `[entryId]`. @default "[entryId]" */
+  entry: string;
+  /** Create-entry modal route. @default "new" */
+  create: string;
+}
+
+export type FeedbackStackScreenOptions = Exclude<
+  NonNullable<StackScreenProps["options"]>,
+  (...args: never[]) => unknown
+>;
+
+export interface FeedbackAndroidToolbarIcons {
+  /** Android image source for the create-entry action. */
+  create?: ImageSourcePropType;
+  /** Android image source for the back action. */
+  back?: ImageSourcePropType;
+  /** Android image source for modal close actions. */
+  close?: ImageSourcePropType;
+}
+
+export interface FeedbackStackLayoutProps extends FeedbackScreenRootProps {
+  /** Partial overrides for the prescribed route file names. */
+  routes?: Partial<FeedbackRouteNames>;
+  /** Options shared by every feedback screen. */
+  screenOptions?: FeedbackStackScreenOptions;
+  /** Board screen option overrides. */
+  boardOptions?: FeedbackStackScreenOptions;
+  /** Entry-detail screen option overrides. */
+  entryOptions?: FeedbackStackScreenOptions;
+  /** Create-entry modal option overrides. */
+  createOptions?: FeedbackStackScreenOptions;
+  /** Android image sources for toolbar actions. iOS continues to use SF Symbols. */
+  androidToolbarIcons?: FeedbackAndroidToolbarIcons;
+}
+
+export interface FeedbackCreateStackLayoutProps {
+  /** Options shared by the create form and suggested-entry screens. */
+  screenOptions?: FeedbackStackScreenOptions;
+  /** Create-form screen option overrides. */
+  createOptions?: FeedbackStackScreenOptions;
+  /** Suggested-entry screen option overrides. */
+  entryOptions?: FeedbackStackScreenOptions;
+}
+
+export interface RoutedFeedbackContextValue {
+  routes: FeedbackRouteNames;
+  colors: FeedbackColorProps;
+  androidToolbarIcons: FeedbackAndroidToolbarIcons;
+}

package/src/native/native/FeedbackScreen.tsx

@@ -3,6 +3,7 @@ import { FeedbackProvider } from "../../shared/context/FeedbackProvider";
 import { kinds } from "../../shared/helpers";
 import type { FeedbackScreenRootProps } from "../../shared/types";
 import { FeedbackScreenContent } from "../shared/ui/BodyContent";
+import { collectNativeMetadata } from "../shared/metadata";
 
 export function FeedbackScreen({
   hooks,
@@ -14,6 +15,7 @@ export function FeedbackScreen({
   enabledKinds = kinds,
   maxCommentDepth = 5,
   debounceDuration = 300,
+  collectMetadata,
   transformComments,
   renderActor,
   ...props
@@ -27,6 +29,8 @@ export function FeedbackScreen({
         enabledKinds={enabledKinds}
         maxCommentDepth={maxCommentDepth}
         debounceDuration={debounceDuration}
+        collectMetadata={collectMetadata}
+        collectStandardMetadata={collectNativeMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
       >

package/src/native/native/index.ts

@@ -1,7 +1,9 @@
 export * from "../../shared/context/FeedbackBodyProvider.js";
 export * from "../../shared/context/FeedbackProvider.js";
 export * from "../../shared/messages.js";
+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/metadata.js";
 export * from "./FeedbackScreen.js";

package/src/native/shared/metadata.ts

@@ -0,0 +1,39 @@
+import type { FeedbackMetadataValue } from "convex-feedback";
+import { Dimensions, PixelRatio, Platform } from "react-native";
+
+import type {
+  StandardMetadataKey,
+  EnabledStandardMetadataSelection,
+} from "../../shared/types/metadata.js";
+
+export const defaultNativeMetadataKeys: readonly StandardMetadataKey[] = [
+  "platform",
+  "osVersion",
+  "deviceModel",
+  "screenWidth",
+  "screenHeight",
+  "pixelRatio",
+  "fontScale",
+];
+
+export function collectNativeMetadata(
+  selection: EnabledStandardMetadataSelection,
+): Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> {
+  const keys = new Set(
+    selection === true ? defaultNativeMetadataKeys : selection,
+  );
+  const metadata: Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> =
+    {};
+  const screen = Dimensions.get("screen");
+
+  if (keys.has("platform")) metadata.platform = Platform.OS;
+  if (keys.has("osVersion")) metadata.osVersion = Platform.Version;
+  if (keys.has("deviceModel") && Platform.OS === "android")
+    metadata.deviceModel = Platform.constants.Model;
+  if (keys.has("screenWidth")) metadata.screenWidth = screen.width;
+  if (keys.has("screenHeight")) metadata.screenHeight = screen.height;
+  if (keys.has("pixelRatio")) metadata.pixelRatio = PixelRatio.get();
+  if (keys.has("fontScale")) metadata.fontScale = PixelRatio.getFontScale();
+
+  return metadata;
+}

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

@@ -7,6 +7,7 @@ import type { FeedbackScreenEntryDetailProps } from "../../../shared/types";
 import { Button } from "./Button";
 import { CommentBranch } from "./CommentBranch";
 import { FeedbackEntry, FeedbackForm } from "./primitives";
+import { MetadataModal } from "./MetadataModal";
 
 export function EntryDetail({
   entryId,
@@ -21,6 +22,7 @@ export function EntryDetail({
   const setUpvote = hooks.useSetEntryUpvote();
   const createComment = hooks.useCreateComment();
   const [body, setBody] = useState("");
+  const [showMetadata, setShowMetadata] = useState(false);
   const visible = useMemo(
     () => transformComments?.(comments.results) ?? comments.results,
     [comments.results, transformComments],
@@ -66,6 +68,18 @@ export function EntryDetail({
           <FeedbackEntry.CommentCount />
         </FeedbackEntry.Content>
       </FeedbackEntry.Root>
+      {entry.metadata !== undefined && (
+        <Button
+          label={messages.metadata.view}
+          onPress={() => setShowMetadata(true)}
+        />
+      )}
+      {showMetadata && entry.metadata !== undefined && (
+        <MetadataModal
+          metadata={entry.metadata}
+          onRequestClose={() => setShowMetadata(false)}
+        />
+      )}
       <Text
         style={{ color: theme.colors.text, fontSize: 18, fontWeight: "700" }}
       >

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

@@ -8,6 +8,7 @@ import { FeedbackBoard } from "./primitives.js";
 
 export function FeedbackScreenList({
   hideBackButton = false,
+  showSelectedEntry = true,
   onEntryOpen,
 }: FeedbackScreenListProps) {
   const {
@@ -32,7 +33,7 @@ export function FeedbackScreenList({
   return (
     <>
       <FeedbackBoard.List style={{ padding: theme.spacing }}>
-        {selectedEntryId ? (
+        {showSelectedEntry && selectedEntryId ? (
           <EntryDetail
             entryId={selectedEntryId}
             hideBackButton={hideBackButton}

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

@@ -0,0 +1,112 @@
+import type { FeedbackMetadata } from "convex-feedback";
+import { Modal, Pressable, ScrollView, Text, View } from "react-native";
+
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import { formatMetadataKey } from "../../../shared/metadata";
+import { Button } from "./Button";
+
+export function MetadataModal({
+  metadata,
+  onRequestClose,
+}: {
+  metadata: FeedbackMetadata;
+  onRequestClose: () => void;
+}) {
+  const { messages, theme } = useFeedbackUi();
+  const sections = [
+    [messages.metadata.standard, metadata.standard],
+    [messages.metadata.additional, metadata.additional],
+  ] as const;
+  const hasValues = sections.some(
+    ([, values]) => values !== undefined && Object.keys(values).length > 0,
+  );
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="fade"
+      onRequestClose={onRequestClose}
+      role="dialog"
+    >
+      <Pressable
+        accessible={false}
+        focusable={false}
+        onPress={onRequestClose}
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          padding: 20,
+          backgroundColor: "rgba(0, 0, 0, 0.4)",
+        }}
+      >
+        <Pressable
+          accessible={false}
+          focusable={false}
+          onPress={(event) => event.stopPropagation()}
+          style={{
+            maxHeight: "80%",
+            gap: 14,
+            padding: 18,
+            borderRadius: theme.radius,
+            backgroundColor: theme.colors.surface,
+          }}
+        >
+          <Text
+            style={{
+              color: theme.colors.text,
+              fontSize: 18,
+              fontWeight: "700",
+            }}
+          >
+            {messages.metadata.title}
+          </Text>
+          <ScrollView contentContainerStyle={{ gap: 16 }}>
+            {hasValues ? (
+              sections.map(([label, values]) =>
+                values === undefined ||
+                Object.keys(values).length === 0 ? null : (
+                  <View key={label} style={{ gap: 8 }}>
+                    <Text
+                      style={{ color: theme.colors.text, fontWeight: "700" }}
+                    >
+                      {label}
+                    </Text>
+                    {Object.entries(values).map(([key, value]) => (
+                      <View
+                        key={key}
+                        style={{
+                          gap: 3,
+                          paddingBottom: 8,
+                          borderBottomWidth: 1,
+                          borderBottomColor: theme.colors.border,
+                        }}
+                      >
+                        <Text
+                          style={{
+                            color: theme.colors.mutedText,
+                            fontWeight: "600",
+                          }}
+                        >
+                          {formatMetadataKey(key)}
+                        </Text>
+                        <Text selectable style={{ color: theme.colors.text }}>
+                          {String(value)}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                ),
+              )
+            ) : (
+              <Text style={{ color: theme.colors.mutedText }}>
+                {messages.metadata.empty}
+              </Text>
+            )}
+          </ScrollView>
+          <Button label={messages.metadata.close} onPress={onRequestClose} />
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}

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

@@ -13,6 +13,7 @@ import {
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
 import type { FeedbackScreenEntryModalProps } from "../../../shared/types";
+import { collectEntryMetadata } from "../../../shared/metadata";
 import { EntryDetail } from "./EntryDetail";
 import { FeedbackForm } from "./primitives";
 
@@ -130,7 +131,7 @@ export function CreateEntryModal({
                 onBack={() => setPreviewEntryId(null)}
               />
             ) : (
-              <CreateForm
+              <CreateEntryForm
                 kind={kind}
                 onKindChange={setKind}
                 title={title}
@@ -148,7 +149,7 @@ export function CreateEntryModal({
   );
 }
 
-function CreateForm({
+export function CreateEntryForm({
   kind,
   onKindChange,
   title,
@@ -166,7 +167,8 @@ function CreateForm({
   onBodyChange: (body: string) => void;
   onOpenSuggestion: (id: string) => void;
 }) {
-  const { hooks, enabledKinds } = useFeedbackBody();
+  const { hooks, enabledKinds, collectMetadata, collectStandardMetadata } =
+    useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const [submitting, setSubmitting] = useState(false);
   const create = hooks.useCreateEntry();
@@ -185,7 +187,19 @@ function CreateForm({
     setSubmitting(true);
 
     try {
-      onCreated(await create({ kind, title, body }));
+      const metadata = await collectEntryMetadata(
+        collectMetadata,
+        kind,
+        collectStandardMetadata,
+      );
+      onCreated(
+        await create({
+          kind,
+          title,
+          body,
+          ...(metadata === undefined ? {} : { metadata }),
+        }),
+      );
     } finally {
       setSubmitting(false);
     }

package/src/react/index.ts

@@ -1,6 +1,8 @@
 export * from "../shared/messages.js";
+export * from "../shared/metadata.js";
 export * from "../shared/theme.js";
 export type * from "../shared/types";
 export * from "./css.js";
+export * from "./metadata.js";
 export * from "./primitives.js";
 export * from "./screen.js";

package/src/react/metadata.ts

@@ -0,0 +1,51 @@
+import type { FeedbackMetadataValue } from "convex-feedback";
+
+import type {
+  StandardMetadataKey,
+  EnabledStandardMetadataSelection,
+} from "../shared/types/metadata.js";
+
+const defaultWebMetadataKeys: readonly StandardMetadataKey[] = [
+  "platform",
+  "userAgent",
+  "language",
+  "timezone",
+  "screenWidth",
+  "screenHeight",
+  "viewportWidth",
+  "viewportHeight",
+  "devicePixelRatio",
+];
+
+export function collectWebMetadata(
+  selection: EnabledStandardMetadataSelection,
+): Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> {
+  const keys = new Set(selection === true ? defaultWebMetadataKeys : selection);
+  const metadata: Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> =
+    {};
+  const browserNavigator =
+    typeof navigator === "undefined" ? undefined : navigator;
+  const browserWindow = typeof window === "undefined" ? undefined : window;
+
+  if (keys.has("platform")) metadata.platform = "web";
+  if (keys.has("userAgent") && browserNavigator?.userAgent)
+    metadata.userAgent = browserNavigator.userAgent;
+  if (keys.has("language") && browserNavigator?.language)
+    metadata.language = browserNavigator.language;
+  if (keys.has("timezone")) {
+    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (timezone) metadata.timezone = timezone;
+  }
+  if (keys.has("screenWidth") && browserWindow?.screen)
+    metadata.screenWidth = browserWindow.screen.width;
+  if (keys.has("screenHeight") && browserWindow?.screen)
+    metadata.screenHeight = browserWindow.screen.height;
+  if (keys.has("viewportWidth") && browserWindow)
+    metadata.viewportWidth = browserWindow.innerWidth;
+  if (keys.has("viewportHeight") && browserWindow)
+    metadata.viewportHeight = browserWindow.innerHeight;
+  if (keys.has("devicePixelRatio") && browserWindow)
+    metadata.devicePixelRatio = browserWindow.devicePixelRatio;
+
+  return metadata;
+}

package/src/react/screen.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { EntryKind } from "convex-feedback";
+import type { EntryKind, FeedbackMetadata } from "convex-feedback";
 import { useMemo, useState, type SyntheticEvent } from "react";
 
 import {
@@ -26,6 +26,8 @@ import {
   FeedbackEntry,
   FeedbackForm,
 } from "./primitives.js";
+import { collectWebMetadata } from "./metadata.js";
+import { collectEntryMetadata, formatMetadataKey } from "../shared/metadata.js";
 
 const entryKinds: readonly EntryKind[] = [
   "feedback",
@@ -49,6 +51,7 @@ export function FeedbackScreen({
   transformComments,
   renderActor,
   debounceDuration = 300,
+  collectMetadata,
   ...props
 }: FeedbackScreenProps) {
   return (
@@ -60,6 +63,8 @@ export function FeedbackScreen({
         enabledKinds={enabledKinds}
         maxCommentDepth={maxCommentDepth}
         debounceDuration={debounceDuration}
+        collectMetadata={collectMetadata}
+        collectStandardMetadata={collectWebMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
       >
@@ -207,7 +212,8 @@ function EntryCard({ entry, hooks, onOpen }: FeedbackScreenEntryCardProps) {
 }
 
 function CreateEntryForm({ onCreated }: FeedbackScreenEntryModalProps) {
-  const { hooks, enabledKinds } = useFeedbackBody();
+  const { hooks, enabledKinds, collectMetadata, collectStandardMetadata } =
+    useFeedbackBody();
   const { messages } = useFeedbackUi();
   const [kind, setKind] = useState<EntryKind>(enabledKinds[0] ?? "feedback");
   const [title, setTitle] = useState("");
@@ -242,10 +248,16 @@ function CreateEntryForm({ onCreated }: FeedbackScreenEntryModalProps) {
     setSubmitting(true);
 
     try {
+      const metadata = await collectEntryMetadata(
+        collectMetadata,
+        kind,
+        collectStandardMetadata,
+      );
       const entryId = await createEntry({
         kind,
         title,
         body,
+        ...(metadata === undefined ? {} : { metadata }),
       });
 
       onCreated(entryId);
@@ -382,6 +394,7 @@ function EntryDetail({ entryId, onBack }: FeedbackScreenEntryDetailProps) {
   const comments = hooks.useComments({ entryId, sort: commentSort });
   const createComment = hooks.useCreateComment();
   const [body, setBody] = useState("");
+  const [showMetadata, setShowMetadata] = useState(false);
 
   const visibleComments = useMemo(
     () => transformComments?.(comments.results) ?? comments.results,
@@ -422,6 +435,25 @@ function EntryDetail({ entryId, onBack }: FeedbackScreenEntryDetailProps) {
         </FeedbackEntry.Content>
       </FeedbackEntry.Root>
 
+      {entry.metadata !== undefined && (
+        <div>
+          <button
+            type="button"
+            className="cf-button"
+            onClick={() => setShowMetadata(true)}
+          >
+            {messages.metadata.view}
+          </button>
+        </div>
+      )}
+
+      {showMetadata && entry.metadata !== undefined && (
+        <MetadataDialog
+          metadata={entry.metadata}
+          onClose={() => setShowMetadata(false)}
+        />
+      )}
+
       <section className="cf-discussion">
         <h3>{messages.comments.title}</h3>
         <FeedbackForm.Root
@@ -473,6 +505,61 @@ function EntryDetail({ entryId, onBack }: FeedbackScreenEntryDetailProps) {
   );
 }
 
+function MetadataDialog({
+  metadata,
+  onClose,
+}: {
+  metadata: FeedbackMetadata;
+  onClose: () => void;
+}) {
+  const { messages } = useFeedbackUi();
+  const sections = [
+    [messages.metadata.standard, metadata.standard],
+    [messages.metadata.additional, metadata.additional],
+  ] as const;
+  const hasValues = sections.some(
+    ([, values]) => values !== undefined && Object.keys(values).length > 0,
+  );
+
+  return (
+    <div className="cf-confirm-backdrop" onMouseDown={onClose}>
+      <div
+        className="cf-confirm cf-metadata-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="cf-metadata-title"
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <h3 id="cf-metadata-title">{messages.metadata.title}</h3>
+        {hasValues ? (
+          sections.map(([label, values]) =>
+            values === undefined || Object.keys(values).length === 0 ? null : (
+              <section key={label} className="cf-metadata-section">
+                <h4>{label}</h4>
+                <dl>
+                  {Object.entries(values).map(([key, value]) => (
+                    <div key={key} className="cf-metadata-row">
+                      <dt>{formatMetadataKey(key)}</dt>
+                      <dd>{String(value)}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </section>
+            ),
+          )
+        ) : (
+          <p>{messages.metadata.empty}</p>
+        )}
+        <div className="cf-inline-actions">
+          <button type="button" className="cf-button" onClick={onClose}>
+            {messages.metadata.close}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function CommentBranch({ comment, entryId }: FeedbackScreenCommentBranchProps) {
   const { hooks, maxCommentDepth, renderActor } = useFeedbackBody();
   const { messages } = useFeedbackUi();

package/src/react/styles.css

@@ -297,3 +297,38 @@
   color: var(--cf-muted);
   line-height: 1.5;
 }
+
+:where(.cf-board) :where(.cf-metadata-dialog) {
+  width: min(100%, 560px);
+  max-height: min(80vh, 720px);
+  overflow: auto;
+}
+
+:where(.cf-board) :where(.cf-metadata-dialog h3),
+:where(.cf-board) :where(.cf-metadata-dialog h4),
+:where(.cf-board) :where(.cf-metadata-dialog dl) {
+  margin: 0;
+}
+
+:where(.cf-board) :where(.cf-metadata-section) {
+  display: grid;
+  gap: 8px;
+}
+
+:where(.cf-board) :where(.cf-metadata-row) {
+  display: grid;
+  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--cf-border);
+}
+
+:where(.cf-board) :where(.cf-metadata-row dt) {
+  color: var(--cf-muted);
+  font-weight: 600;
+}
+
+:where(.cf-board) :where(.cf-metadata-row dd) {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}

package/src/shared/context/FeedbackBodyProvider.tsx

@@ -22,6 +22,10 @@ export function FeedbackBodyProvider({
   enabledKinds,
   maxCommentDepth,
   debounceDuration,
+  collectMetadata,
+  collectStandardMetadata,
+  transformComments,
+  renderActor,
   children,
 }: PropsWithChildren<FeedbackScreenProviderProps>) {
   const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
@@ -60,6 +64,10 @@ export function FeedbackBodyProvider({
     enabledKinds,
     maxCommentDepth,
     debounceDuration,
+    collectMetadata,
+    collectStandardMetadata,
+    transformComments,
+    renderActor,
   } satisfies FeedbackScreenBodyContextValue;
 
   return (

package/src/shared/messages.ts

@@ -41,6 +41,14 @@ export const englishFeedbackMessages: FeedbackMessages = {
     open: "Open",
     back: "Go back",
   },
+  metadata: {
+    view: "View metadata",
+    title: "Diagnostic metadata",
+    standard: "Standard",
+    additional: "Additional",
+    empty: "No metadata values were collected.",
+    close: "Close",
+  },
   form: {
     kind: "Type",
     title: "Title",
@@ -94,6 +102,7 @@ export function mergeFeedbackMessages(
       ...overrides.statuses,
     },
     entry: { ...englishFeedbackMessages.entry, ...overrides.entry },
+    metadata: { ...englishFeedbackMessages.metadata, ...overrides.metadata },
     form: { ...englishFeedbackMessages.form, ...overrides.form },
     comments: { ...englishFeedbackMessages.comments, ...overrides.comments },
   };