convex-feedback-ui 0.1.3 → 0.1.5

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 },
   };

package/src/shared/metadata.ts

@@ -0,0 +1,84 @@
+import type {
+  EntryKind,
+  FeedbackMetadata,
+  FeedbackMetadataValue,
+} from "convex-feedback";
+
+import type {
+  CollectMetadata,
+  EnabledStandardMetadataSelection,
+  MetadataCollectionContext,
+  MetadataSource,
+  StandardMetadataKey,
+} from "./types/metadata.js";
+
+export type StandardMetadataCollector = (
+  selection: EnabledStandardMetadataSelection,
+) => Partial<Record<StandardMetadataKey, FeedbackMetadataValue>>;
+
+async function resolveAdditionalMetadata(
+  source: MetadataSource | undefined,
+  context: MetadataCollectionContext,
+): Promise<Record<string, FeedbackMetadataValue>> {
+  if (source === undefined) return {};
+
+  try {
+    return typeof source === "function" ? await source(context) : source;
+  } catch {
+    return {};
+  }
+}
+
+export async function collectEntryMetadata(
+  config: CollectMetadata | undefined,
+  kind: EntryKind,
+  collectStandard: StandardMetadataCollector,
+): Promise<FeedbackMetadata | undefined> {
+  if (config === undefined || config === false) return undefined;
+
+  const root = config === true ? { standard: true as const } : config;
+  const kindConfig = root.kinds?.[kind];
+  if (kindConfig === false) return undefined;
+
+  const kindOptions =
+    kindConfig === true ? { standard: true as const } : kindConfig;
+  const standardSelection = kindOptions?.standard ?? root.standard ?? false;
+  const context = { kind } satisfies MetadataCollectionContext;
+  const [globalAdditional, kindAdditional] = await Promise.all([
+    resolveAdditionalMetadata(root.additional, context),
+    resolveAdditionalMetadata(kindOptions?.additional, context),
+  ]);
+
+  let standard: FeedbackMetadata["standard"];
+  try {
+    standard =
+      standardSelection === false
+        ? undefined
+        : collectStandard(standardSelection);
+  } catch {
+    standard = undefined;
+  }
+
+  const additional = { ...globalAdditional, ...kindAdditional };
+  const hasStandard =
+    standard !== undefined && Object.keys(standard).length > 0;
+  const hasAdditional = Object.keys(additional).length > 0;
+
+  if (!hasStandard && !hasAdditional) return undefined;
+
+  return {
+    ...(hasStandard ? { standard } : {}),
+    ...(hasAdditional ? { additional } : {}),
+  };
+}
+
+export function formatMetadataKey(key: string): string {
+  const words = key
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .trim();
+
+  return words.length === 0
+    ? key
+    : words.charAt(0).toLocaleUpperCase("en-US") + words.slice(1);
+}

package/src/shared/types/index.ts

@@ -4,6 +4,7 @@ export type * from "./context.js";
 export type * from "./entry.js";
 export type * from "./form.js";
 export type * from "./messages.js";
+export type * from "./metadata.js";
 export type * from "./render.js";
 export type * from "./screen.js";
 export type * from "./theme.js";

package/src/shared/types/messages.ts

@@ -67,6 +67,27 @@ export interface FeedbackMessages {
     back: string;
   };
 
+  /** Moderator-only diagnostic metadata copy. */
+  metadata: {
+    /** Action that opens the metadata viewer. */
+    view: string;
+
+    /** Metadata viewer heading. */
+    title: string;
+
+    /** Heading for automatically collected values. */
+    standard: string;
+
+    /** Heading for host-provided values. */
+    additional: string;
+
+    /** Empty state for a metadata object without values. */
+    empty: string;
+
+    /** Closes the metadata viewer. */
+    close: string;
+  };
+
   /** Create-entry form copy. */
   form: {
     /** Entry-kind field label. */
@@ -167,6 +188,9 @@ export interface FeedbackMessageOverrides {
   /** Entry action/counter copy overrides. */
   entry?: Partial<FeedbackMessages["entry"]> | undefined;
 
+  /** Diagnostic metadata copy overrides. */
+  metadata?: Partial<FeedbackMessages["metadata"]> | undefined;
+
   /** Create-entry form copy overrides. */
   form?: Partial<FeedbackMessages["form"]> | undefined;
 

package/src/shared/types/metadata.ts

@@ -0,0 +1,55 @@
+import type { EntryKind, FeedbackMetadataValue } from "convex-feedback";
+
+export type StandardMetadataKey =
+  | "platform"
+  | "userAgent"
+  | "language"
+  | "timezone"
+  | "screenWidth"
+  | "screenHeight"
+  | "viewportWidth"
+  | "viewportHeight"
+  | "devicePixelRatio"
+  | "osVersion"
+  | "deviceModel"
+  | "pixelRatio"
+  | "fontScale"
+  | "appVersion"
+  | "buildNumber"
+  | "applicationId"
+  | "expoRuntimeVersion"
+  | "executionEnvironment";
+
+export type EnabledStandardMetadataSelection =
+  true | readonly StandardMetadataKey[];
+
+export type StandardMetadataSelection =
+  false | EnabledStandardMetadataSelection;
+
+export interface MetadataCollectionContext {
+  kind: EntryKind;
+}
+
+export type AdditionalMetadata = Record<string, FeedbackMetadataValue>;
+
+export type MetadataSource =
+  | AdditionalMetadata
+  | ((
+      context: MetadataCollectionContext,
+    ) => AdditionalMetadata | Promise<AdditionalMetadata>);
+
+export interface MetadataCollectionOptions {
+  /** Standard platform fields to collect. `true` selects platform defaults. */
+  standard?: StandardMetadataSelection;
+
+  /** Static or submission-time host metadata. */
+  additional?: MetadataSource;
+}
+
+export interface MetadataCollectionConfig extends MetadataCollectionOptions {
+  /** Per-entry-kind overrides. `false` disables all collection for that kind. */
+  kinds?: Partial<Record<EntryKind, boolean | MetadataCollectionOptions>>;
+}
+
+/** Metadata collection configuration accepted by prebuilt feedback screens. */
+export type CollectMetadata = boolean | MetadataCollectionConfig;

package/src/shared/types/screen.ts

@@ -9,6 +9,8 @@ import type { FeedbackHooks } from "convex-feedback/react";
 import type { ReactNode } from "react";
 
 import type { FeedbackColorProps, FeedbackProviderProps } from "./context.js";
+import type { CollectMetadata } from "./metadata.js";
+import type { StandardMetadataCollector } from "../metadata.js";
 
 /**
  * Presentation-only transform applied to one currently loaded comment page.
@@ -87,6 +89,12 @@ export interface FeedbackScreenBaseProps {
    * @default 300
    */
   debounceDuration?: number;
+
+  /**
+   * Enables creation-time diagnostic metadata collection globally and/or by
+   * entry kind. Disabled by default.
+   */
+  collectMetadata?: CollectMetadata;
 }
 
 export interface FeedbackScreenRootProps
@@ -98,8 +106,11 @@ export interface FeedbackScreenRootProps
 
 export interface FeedbackScreenProviderProps
   extends
-    Required<FeedbackScreenBaseProps>,
-    FeedbackScreenTransformationProps {}
+    Required<Omit<FeedbackScreenBaseProps, "collectMetadata">>,
+    FeedbackScreenTransformationProps {
+  collectMetadata?: CollectMetadata;
+  collectStandardMetadata: StandardMetadataCollector;
+}
 
 export interface FeedbackScreenBodyContextValue
   extends FeedbackScreenTransformationProps, FeedbackScreenProviderProps {

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

@@ -1,41 +0,0 @@
-import { useMemo } from "react";
-
-import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
-import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
-import type { FeedbackScreenReplyListProps } from "../../../shared/types";
-import { Button } from "./Button";
-import { CommentBranch } from "./CommentBranch";
-import { Comment } from "./primitives";
-
-export function ReplyList({
-  entryId,
-  parentCommentId,
-}: FeedbackScreenReplyListProps) {
-  const { hooks, commentSort, transformComments } = useFeedbackBody();
-  const { messages } = useFeedbackUi();
-
-  const replies = hooks.useComments({
-    entryId,
-    parentCommentId,
-    sort: commentSort,
-  });
-
-  const visible = useMemo(
-    () => transformComments?.(replies.results) ?? replies.results,
-    [replies.results, transformComments],
-  );
-
-  return (
-    <Comment.Children>
-      {visible.map((reply) => (
-        <CommentBranch key={reply.id} comment={reply} entryId={entryId} />
-      ))}
-      {replies.status === "CanLoadMore" && (
-        <Button
-          label={messages.comments.loadMore}
-          onPress={() => replies.loadMore(hooks.pageSizes.replies)}
-        />
-      )}
-    </Comment.Children>
-  );
-}