@gogitcms/editor 0.26.0 → 0.28.0

package/app/vendor/design-system/src/components/FormsBrowser.tsx

@@ -0,0 +1,543 @@
+import React from "react";
+import { FlatList, Pressable, TextInput, View } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Spinner } from "./Spinner";
+import {
+  type FormInfo,
+  type FormsApi,
+  type SubmissionInfo,
+  summaryLine,
+} from "../forms";
+
+// The Forms surface: a list of forms, a form's submissions, and one submission
+// rendered read-only (docs/forms.md §10.2).
+//
+// ── Why this does not reuse FieldControl ────────────────────────────────────
+//
+// The obvious move is to render a submission with the same controls the
+// document editor uses, in readOnly mode. Two reasons not to.
+//
+// FieldControl reaches ~18 sibling components inside ContentBrowser.tsx, most of
+// them collaboration-aware (CollabInput, CollabArrayField, GroupPresence…).
+// Extracting it into a shared module so a second consumer could import it is a
+// large refactor of a 5,000-line file, and a submission needs none of what it
+// would drag along: no CRDT session, no draft state, no onChange, no media
+// picker interaction.
+//
+// And it would be worse to read. A submission is a record of what somebody sent,
+// not a document with editing switched off, so a row of disabled inputs is the
+// wrong presentation for it — a label-and-value read view says "this is what
+// they wrote" in a way a greyed-out form never does.
+
+const PAGE_SIZE = 50;
+
+export type FormsBrowserProps = {
+  api: FormsApi;
+  /** The form being browsed, from the nav key. Null shows the forms list. */
+  form: string | null;
+  /** Open a form (null returns to the list). The host binds this to the URL. */
+  onSelectForm: (form: string | null) => void;
+  /** The selected submission's id, and the reporter for taps. */
+  selectedId?: string | null;
+  onSelectSubmission?: (id: string | null) => void;
+  variant?: "desktop" | "mobile";
+};
+
+export function FormsBrowser(props: FormsBrowserProps) {
+  const { api, form, onSelectForm, selectedId, onSelectSubmission, variant = "desktop" } = props;
+  const t = useTheme();
+  const isDesktop = variant === "desktop";
+
+  const active = form ? api.forms.find((f) => f.name === form) ?? null : null;
+
+  if (!form || !active) {
+    return <FormList forms={api.forms} onSelect={onSelectForm} />;
+  }
+  return (
+    <SubmissionsView
+      api={api}
+      form={active}
+      onBack={() => onSelectForm(null)}
+      selectedId={selectedId ?? null}
+      onSelect={onSelectSubmission}
+      isDesktop={isDesktop}
+    />
+  );
+}
+
+// ── The forms list ──────────────────────────────────────────────────────────
+
+// Each row reads like a folder in the hierarchical content models, because that
+// is what a form is here: a container you open to find what is inside it.
+function FormList({ forms, onSelect }: { forms: FormInfo[]; onSelect: (name: string) => void }) {
+  const t = useTheme();
+  if (forms.length === 0) {
+    return (
+      <View style={{ padding: t.space(6) }}>
+        <Text color="secondary">This branch declares no forms.</Text>
+      </View>
+    );
+  }
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(3) }}>
+        <Text variant="label" color="tertiary">
+          {forms.length} {forms.length === 1 ? "form" : "forms"}
+        </Text>
+      </View>
+      <FlatList
+        data={forms}
+        keyExtractor={(f) => f.name}
+        renderItem={({ item }) => <FormRow form={item} onPress={() => onSelect(item.name)} />}
+      />
+    </View>
+  );
+}
+
+function FormRow({ form, onPress }: { form: FormInfo; onPress: () => void }) {
+  const t = useTheme();
+  const [hover, setHover] = React.useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      onHoverIn={() => setHover(true)}
+      onHoverOut={() => setHover(false)}
+      testID={`form-row-${form.name}`}
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: t.space(3),
+        paddingHorizontal: t.space(4),
+        paddingVertical: t.space(3),
+        borderBottomWidth: 1,
+        borderBottomColor: t.color.borderSubtle,
+        backgroundColor: hover ? t.color.surfaceHover : "transparent",
+      }}
+    >
+      <Icon name="listTree" size={16} color={t.color.textTertiary} />
+      <View style={{ flex: 1, gap: 2 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+          <Text numberOfLines={1}>{form.label || form.name}</Text>
+          {form.versioned ? (
+            <Icon name="gitBranch" size={12} color={t.color.textTertiary} />
+          ) : null}
+        </View>
+        {form.description ? (
+          <Text variant="sm" color="tertiary" numberOfLines={1}>
+            {form.description}
+          </Text>
+        ) : null}
+      </View>
+      {/* How much has come in. The field count is deliberately not here: it
+          describes the form's shape rather than its inbox, and in a column this
+          narrow it competed with the number a reader actually scans for. */}
+      <Text variant="monoSm" color="secondary" style={{ minWidth: 48, textAlign: "right" }}>
+        {form.submissionCount}
+      </Text>
+      <Icon name="chevronRight" size={14} color={t.color.textTertiary} />
+    </Pressable>
+  );
+}
+
+// ── One form's submissions ──────────────────────────────────────────────────
+
+function SubmissionsView({
+  api,
+  form,
+  onBack,
+  selectedId,
+  onSelect,
+  isDesktop,
+}: {
+  api: FormsApi;
+  form: FormInfo;
+  onBack: () => void;
+  selectedId: string | null;
+  onSelect?: (id: string | null) => void;
+  isDesktop: boolean;
+}) {
+  const t = useTheme();
+  const [items, setItems] = React.useState<SubmissionInfo[]>([]);
+  const [total, setTotal] = React.useState<number | null>(null);
+  const [loading, setLoading] = React.useState(true);
+  // A form can legitimately fail to list: local mode answers
+  // NO_SUBMISSION_STORE for a form that keeps its submissions in a database it
+  // does not have. Without somewhere to put that, the promise rejected and the
+  // pane spun forever — which is a worse answer than the empty inbox this was
+  // written to avoid.
+  const [failure, setFailure] = React.useState<string | null>(null);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+  const [exhausted, setExhausted] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [status, setStatus] = React.useState<"received" | "spam">("received");
+
+  // Switching form, filter or search is a different result set: reset rather
+  // than paging one query's offsets into another's.
+  React.useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setExhausted(false);
+    setFailure(null);
+    Promise.all([
+      api.list({ form: form.name, status, search, limit: PAGE_SIZE, offset: 0 }),
+      api.count({ form: form.name, status, search }),
+    ])
+      .then(([rows, n]) => {
+        if (!alive) return;
+        setItems(rows);
+        setTotal(n);
+        setExhausted(rows.length >= n);
+      })
+      .catch((err: unknown) => {
+        if (!alive) return;
+        setItems([]);
+        setTotal(null);
+        // The server's own sentence, which for the case that actually happens
+        // says what to change in the config. A generic "couldn't load" would
+        // throw that away.
+        setFailure(messageOf(err));
+      })
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [api, form.name, status, search]);
+
+  const loadMore = React.useCallback(() => {
+    if (loadingMore || exhausted || loading) return;
+    setLoadingMore(true);
+    api
+      .list({ form: form.name, status, search, limit: PAGE_SIZE, offset: items.length })
+      .then((rows) => {
+        setItems((prev) => [...prev, ...rows]);
+        if (rows.length < PAGE_SIZE) setExhausted(true);
+      })
+      .finally(() => setLoadingMore(false));
+  }, [api, form.name, status, search, items.length, loading, loadingMore, exhausted]);
+
+  const selected = selectedId ? items.find((s) => s.id === selectedId) ?? null : null;
+
+  const list = (
+    <View style={{ flex: 1, minWidth: 0 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: t.space(2),
+          paddingHorizontal: t.space(3),
+          paddingVertical: t.space(2),
+          borderBottomWidth: 1,
+          borderBottomColor: t.color.borderSubtle,
+        }}
+      >
+        <Pressable onPress={onBack} testID="forms-back" style={{ padding: t.space(1) }}>
+          <Icon name="chevronLeft" size={16} color={t.color.textSecondary} />
+        </Pressable>
+        <Text numberOfLines={1} style={{ flex: 1 }}>
+          {form.label || form.name}
+        </Text>
+        <Text variant="monoSm" color="tertiary">
+          {total ?? "—"}
+        </Text>
+      </View>
+
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: t.space(2),
+          paddingHorizontal: t.space(3),
+          paddingVertical: t.space(2),
+        }}
+      >
+        <TextInput
+          value={search}
+          onChangeText={setSearch}
+          placeholder="Search submissions"
+          placeholderTextColor={t.color.textTertiary}
+          testID="forms-search"
+          style={{
+            flex: 1,
+            height: t.control.sm,
+            paddingHorizontal: t.space(2),
+            borderWidth: 1,
+            borderColor: t.color.borderDefault,
+            borderRadius: t.radius.sm,
+            color: t.color.textPrimary,
+          }}
+        />
+        {/* Spam is recorded rather than discarded (a honeypot also catches
+            browser autofill), so it needs somewhere to be seen. */}
+        <Pressable
+          onPress={() => setStatus(status === "received" ? "spam" : "received")}
+          testID="forms-status-toggle"
+          style={{
+            height: t.control.sm,
+            justifyContent: "center",
+            paddingHorizontal: t.space(2),
+            borderWidth: 1,
+            borderColor: status === "spam" ? t.color.borderStrong : t.color.borderDefault,
+            borderRadius: t.radius.sm,
+          }}
+        >
+          <Text variant="monoSm" color={status === "spam" ? "primary" : "tertiary"}>
+            Spam
+          </Text>
+        </Pressable>
+      </View>
+
+      {loading ? (
+        <View style={{ padding: t.space(6), alignItems: "center" }}>
+          <Spinner />
+        </View>
+      ) : failure ? (
+        <View style={{ padding: t.space(6) }} testID="forms-error">
+          <Text color="secondary">{failure}</Text>
+        </View>
+      ) : items.length === 0 ? (
+        <View style={{ padding: t.space(6) }}>
+          <Text color="secondary">
+            {status === "spam" ? "Nothing caught as spam." : "No submissions yet."}
+          </Text>
+        </View>
+      ) : (
+        <FlatList
+          data={items}
+          keyExtractor={(s) => s.id}
+          onEndReached={loadMore}
+          onEndReachedThreshold={0.4}
+          ListFooterComponent={
+            loadingMore ? (
+              <View style={{ padding: t.space(4), alignItems: "center" }}>
+                <Spinner />
+              </View>
+            ) : null
+          }
+          renderItem={({ item }) => (
+            <SubmissionRow
+              submission={item}
+              form={form}
+              selected={item.id === selectedId}
+              onPress={() => onSelect?.(item.id)}
+            />
+          )}
+        />
+      )}
+    </View>
+  );
+
+  if (!isDesktop) {
+    // Mobile pushes: the list, or the submission on top of it.
+    return selected ? (
+      <SubmissionDetail submission={selected} form={form} onBack={() => onSelect?.(null)} />
+    ) : (
+      list
+    );
+  }
+
+  return (
+    <View style={{ flex: 1, flexDirection: "row", minWidth: 0 }}>
+      <View
+        style={{
+          width: t.layout.column,
+          borderRightWidth: 1,
+          borderRightColor: t.color.borderSubtle,
+        }}
+      >
+        {list}
+      </View>
+      <View style={{ flex: 1, minWidth: 0 }}>
+        {selected ? (
+          <SubmissionDetail submission={selected} form={form} />
+        ) : (
+          <View style={{ padding: t.space(6) }}>
+            <Text color="secondary">Select a submission</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+function SubmissionRow({
+  submission,
+  form,
+  selected,
+  onPress,
+}: {
+  submission: SubmissionInfo;
+  form: FormInfo;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  const t = useTheme();
+  const [hover, setHover] = React.useState(false);
+  return (
+    <Pressable
+      onPress={onPress}
+      onHoverIn={() => setHover(true)}
+      onHoverOut={() => setHover(false)}
+      testID={`submission-row-${submission.id}`}
+      style={{
+        gap: 2,
+        paddingHorizontal: t.space(4),
+        paddingVertical: t.space(3),
+        borderBottomWidth: 1,
+        borderBottomColor: t.color.borderSubtle,
+        backgroundColor: selected
+          ? t.color.surfaceActive
+          : hover
+            ? t.color.surfaceHover
+            : "transparent",
+      }}
+    >
+      <Text numberOfLines={1}>{summaryLine(submission, form)}</Text>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        <Text variant="monoSm" color="tertiary">
+          {formatWhen(submission.submittedAt)}
+        </Text>
+        {submission.status === "spam" ? (
+          <Text variant="monoSm" color={t.color.diffDelFg}>
+            spam
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+// ── One submission, read-only ───────────────────────────────────────────────
+
+function SubmissionDetail({
+  submission,
+  form,
+  onBack,
+}: {
+  submission: SubmissionInfo;
+  form: FormInfo;
+  onBack?: () => void;
+}) {
+  const t = useTheme();
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: t.space(2),
+          paddingHorizontal: t.space(4),
+          paddingVertical: t.space(3),
+          borderBottomWidth: 1,
+          borderBottomColor: t.color.borderSubtle,
+        }}
+      >
+        {onBack ? (
+          <Pressable onPress={onBack} testID="submission-back" style={{ padding: t.space(1) }}>
+            <Icon name="chevronLeft" size={16} color={t.color.textSecondary} />
+          </Pressable>
+        ) : null}
+        <View style={{ flex: 1, gap: 2 }}>
+          <Text numberOfLines={1}>{summaryLine(submission, form)}</Text>
+          <Text variant="monoSm" color="tertiary">
+            {formatWhen(submission.submittedAt)}
+          </Text>
+        </View>
+      </View>
+
+      <View style={{ padding: t.space(4), gap: t.space(4) }}>
+        {form.fields.map((f) => {
+          const present = Object.prototype.hasOwnProperty.call(submission.fields, f.name);
+          return (
+            <View key={f.name} style={{ gap: t.space(1) }}>
+              <Text variant="label" color="tertiary">
+                {f.label || f.name}
+              </Text>
+              {present ? (
+                <FieldValue value={submission.fields[f.name]} />
+              ) : (
+                // The visible payoff of storing an inapplicable field as ABSENT
+                // rather than null: "we never asked" is a different fact from
+                // "they left it blank", and the record can say which.
+                <Text variant="sm" color="disabled" testID={`submission-not-asked-${f.name}`}>
+                  Not asked
+                </Text>
+              )}
+            </View>
+          );
+        })}
+
+        {submission.path ? (
+          <View style={{ gap: t.space(1), paddingTop: t.space(2) }}>
+            <Text variant="label" color="tertiary">
+              In the repository
+            </Text>
+            <Text variant="monoSm" color="secondary">
+              {submission.path}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+// FieldValue renders one stored value for reading. Deliberately small: the
+// shapes a submission can hold are the config's field types, and each has an
+// obvious read form.
+function FieldValue({ value }: { value: unknown }) {
+  const t = useTheme();
+  if (value === null || value === undefined || value === "") {
+    return (
+      <Text variant="sm" color="disabled">
+        —
+      </Text>
+    );
+  }
+  if (typeof value === "boolean") {
+    return <Text>{value ? "Yes" : "No"}</Text>;
+  }
+  if (Array.isArray(value)) {
+    return (
+      <View style={{ gap: t.space(1) }}>
+        {value.map((v, i) => (
+          <Text key={i}>• {typeof v === "object" ? JSON.stringify(v) : String(v)}</Text>
+        ))}
+      </View>
+    );
+  }
+  if (typeof value === "object") {
+    return (
+      <View style={{ gap: t.space(1) }}>
+        {Object.entries(value as Record<string, unknown>).map(([k, v]) => (
+          <View key={k} style={{ flexDirection: "row", gap: t.space(2) }}>
+            <Text variant="monoSm" color="tertiary">
+              {k}
+            </Text>
+            <Text style={{ flex: 1 }}>{typeof v === "object" ? JSON.stringify(v) : String(v)}</Text>
+          </View>
+        ))}
+      </View>
+    );
+  }
+  return <Text>{String(value)}</Text>;
+}
+
+// messageOf digs the human sentence out of whatever the host's api threw. An
+// Apollo error carries the server's message on graphQLErrors; everything else
+// is an Error, or something that is not.
+function messageOf(err: unknown): string {
+  const gql = (err as { graphQLErrors?: { message?: string }[] })?.graphQLErrors;
+  if (Array.isArray(gql) && gql[0]?.message) return gql[0].message!;
+  if (err instanceof Error && err.message) return err.message;
+  return "These submissions could not be loaded.";
+}
+
+// formatWhen renders a timestamp the way an inbox does. Falls back to the raw
+// string rather than showing "Invalid Date" for anything unparseable.
+export function formatWhen(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString();
+}

package/app/vendor/design-system/src/components/ProtectedBranchModal.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+import { View, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Input } from "./Input";
+import { Button } from "./Button";
+
+export type ProtectedBranchModalProps = {
+  /** The protected branch the save was refused on. */
+  branch: string;
+  /** The document that could not be saved, for naming what is at stake. */
+  documentLabel?: string;
+  /** Prefills the field — the host derives it from the document. */
+  suggestedName?: string;
+  /** True while the branch is being created and the save applied. */
+  busy?: boolean;
+  /** The server's message, when the attempt failed. */
+  error?: string | null;
+  /** Create `name` from `branch` and save the pending edit onto it. */
+  onCreate: (name: string) => void;
+  /** Dismiss. The edit stays as an unsaved draft on the protected branch. */
+  onCancel: () => void;
+};
+
+/**
+ * Shown when a save is refused because the branch is protected.
+ *
+ * It is a prompt rather than an error banner because the refusal has exactly one
+ * remedy and the editor knows what it is: the work is intact, it just needs
+ * somewhere it can land. Presenting that as "here is a message, now go find the
+ * branch menu" would make the author reconstruct a plan the product already has.
+ *
+ * The draft is deliberately NOT discarded on cancel — a protected branch is
+ * often noticed mid-thought, and the author may want to keep writing and pick a
+ * branch name later. It stays in storage exactly as any other unsaved work does.
+ */
+export function ProtectedBranchModal({
+  branch, documentLabel, suggestedName, busy, error, onCreate, onCancel,
+}: ProtectedBranchModalProps) {
+  const t = useTheme();
+  const [name, setName] = useState(suggestedName ?? "");
+  // The suggestion is derived from the document, which the host may resolve a
+  // render after the modal opens. Adopted only while the field is untouched.
+  const [touched, setTouched] = useState(false);
+  useEffect(() => {
+    if (!touched && suggestedName) setName(suggestedName);
+  }, [suggestedName, touched]);
+
+  const trimmed = name.trim();
+  const submit = () => {
+    if (!trimmed || busy) return;
+    onCreate(trimmed);
+  };
+
+  return (
+    <View
+      testID="protected-branch-modal"
+      style={{
+        position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 50,
+        alignItems: "center", justifyContent: "center", padding: t.space(4),
+        backgroundColor: "rgba(0,0,0,0.45)",
+      }}
+    >
+      <View
+        style={{
+          width: 460, maxWidth: "100%", gap: t.space(4), padding: t.space(5),
+          borderRadius: t.radius.lg, borderWidth: 1, borderColor: t.color.borderDefault,
+          backgroundColor: t.color.surfaceRaised,
+        }}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+            <Icon name="lock" size={16} color={t.color.textSecondary} />
+            <Text variant="h3" weight="semibold">This branch is protected</Text>
+          </View>
+          {busy ? null : (
+            <Pressable
+              testID="protected-branch-close"
+              accessibilityRole="button"
+              accessibilityLabel="Cancel"
+              onPress={onCancel}
+              style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
+            >
+              <Icon name="x" size={18} color={t.color.textSecondary} />
+            </Pressable>
+          )}
+        </View>
+
+        <Text variant="body" color="secondary">
+          {documentLabel
+            ? `${branch} doesn’t accept changes directly, so “${documentLabel}” can’t be saved to it. Name a branch to save it to instead — your edit lands there.`
+            : `${branch} doesn’t accept changes directly. Name a branch to save your edit to instead.`}
+        </Text>
+
+        <Input
+          label="New branch"
+          value={name}
+          onChangeText={(v) => { setTouched(true); setName(v); }}
+          onSubmitEditing={submit}
+          placeholder="feat/my-change"
+          autoCapitalize="none"
+          autoFocus
+          mono
+          editable={!busy}
+          error={!!error}
+          testID="protected-branch-name"
+        />
+        <Text variant="monoSm" color="tertiary">{`Branched from ${branch}`}</Text>
+
+        {error ? (
+          <Text testID="protected-branch-error" variant="monoSm" color={t.color.diffDelFg}>{error}</Text>
+        ) : null}
+
+        <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: t.space(2) }}>
+          <Button
+            title="Cancel"
+            variant="ghost"
+            size="md"
+            disabled={busy}
+            onPress={onCancel}
+            testID="protected-branch-cancel"
+          />
+          <Button
+            title={busy ? "Creating…" : "Create branch and save"}
+            variant="primary"
+            size="md"
+            disabled={busy || trimmed === ""}
+            onPress={submit}
+            testID="protected-branch-submit"
+          />
+        </View>
+      </View>
+    </View>
+  );
+}