@gogitcms/design-system 0.16.0-next.0 → 0.16.0-next.10

package/src/components/DocumentHistory.tsx

@@ -0,0 +1,408 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { View, FlatList, Pressable, ActivityIndicator } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Badge } from "./primitives";
+import { Button } from "./Button";
+import { BODY_FIELD, ChangeDetail, type DocumentChange } from "./ChangeDetail";
+import { firstLine, relativeTime, type DocumentVersion, type HistoryApi } from "../history";
+
+/** How many versions a page holds. One page is one provider request. */
+const PAGE = 20;
+
+export type DocumentHistoryProps = {
+  /** The document whose past is being read. */
+  documentId: string;
+  /** Shown above the list, so a narrow column still says what it is looking at. */
+  documentPath: string;
+  history: HistoryApi;
+  /** Leaves history and returns the column to the editor. */
+  onClose: () => void;
+  /**
+   * Put a past version's values for the chosen fields back into the editor.
+   *
+   * It restores into the FORM, not into git and not straight to a save: the
+   * document becomes unsaved with those fields rolled back, and the author
+   * reviews and saves it like any other edit. Reading history and rewriting the
+   * document are two different acts, and only one of them should be one click
+   * from a list you are still browsing.
+   *
+   * `body` is present only when the body was among the chosen fields — null is
+   * a real restorable value (a document that had no body), so its absence has
+   * to be expressed by the key being missing rather than by null.
+   *
+   * Omitted (a read-only document) → no boxes and no restore bar, only reading.
+   */
+  onRestore?: (restored: { fields: Record<string, unknown>; body?: string | null }) => void;
+};
+
+/**
+ * DocumentHistory is the version browser that takes over a document's column:
+ * the versions on the right, and on the left the document as it was at the
+ * selected one, diffed against what it is now.
+ *
+ * It owns its own state — which version is selected, the pages loaded so far —
+ * because that state is ephemeral by design: history is a thing you open, read
+ * and close, not a place the editor navigates to. Nothing here survives closing
+ * the pane, and nothing about it is in the URL.
+ */
+export function DocumentHistory({ documentId, documentPath, history, onClose, onRestore }: DocumentHistoryProps) {
+  const t = useTheme();
+
+  const [versions, setVersions] = useState<DocumentVersion[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [exhausted, setExhausted] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [selected, setSelected] = useState<string | null>(null);
+  const [detail, setDetail] = useState<DocumentChange | undefined>(undefined);
+  const [loadingDetail, setLoadingDetail] = useState(false);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  // Which fields the reader has picked to take from this version. Cleared on
+  // every version change below: a tick means "restore THIS value", so carrying
+  // it to another version would silently repoint it at a different one.
+  const [picked, setPicked] = useState<readonly string[]>([]);
+  const togglePick = useCallback(
+    (name: string) => setPicked((p) => (p.includes(name) ? p.filter((n) => n !== name) : [...p, name])),
+    [],
+  );
+
+  // Guards every async result against a document switch or an unmount: the pane
+  // is inside a column whose document can change under it, and a page that
+  // arrives after that would otherwise be listed as this document's history.
+  const liveFor = useRef(documentId);
+  useEffect(() => {
+    liveFor.current = documentId;
+    return () => {
+      liveFor.current = "";
+    };
+  }, [documentId]);
+
+  // First page. Selecting its newest version immediately is what makes the pane
+  // useful on open — an empty diff beside a full list is a second click for
+  // nothing.
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setVersions([]);
+    setExhausted(false);
+    setSelected(null);
+    setDetail(undefined);
+    setPicked([]);
+    history
+      .list({ documentId, limit: PAGE, offset: 0 })
+      .then((page) => {
+        if (cancelled || liveFor.current !== documentId) return;
+        setVersions(page);
+        setExhausted(page.length < PAGE);
+        if (page.length > 0) setSelected(page[0].sha);
+      })
+      .catch((e: unknown) => {
+        if (cancelled || liveFor.current !== documentId) return;
+        setError(messageOf(e));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [documentId, history]);
+
+  const loadMore = useCallback(() => {
+    if (loading || loadingMore || exhausted) return;
+    setLoadingMore(true);
+    const offset = versions.length;
+    history
+      .list({ documentId, limit: PAGE, offset })
+      .then((page) => {
+        if (liveFor.current !== documentId) return;
+        // Offsets can overlap when the branch moves under a paging read, so
+        // fold by sha rather than appending blindly — a repeated version would
+        // otherwise be a duplicate React key and a second identical row.
+        setVersions((prev) => mergeBySha(prev, page));
+        setExhausted(page.length < PAGE);
+      })
+      .catch(() => {
+        // A failed page is not a failed history: what is already listed stays
+        // readable, and the end-of-list footer stops offering more.
+        setExhausted(true);
+      })
+      .finally(() => setLoadingMore(false));
+  }, [documentId, history, loading, loadingMore, exhausted, versions.length]);
+
+  // The selected version's document + diff.
+  useEffect(() => {
+    // A tick names a value, not a field: it means "take THIS version's title".
+    // Carrying the selection to the next version would keep the ticks while
+    // silently repointing them at different values.
+    setPicked([]);
+    if (!selected) {
+      setDetail(undefined);
+      return;
+    }
+    let cancelled = false;
+    setLoadingDetail(true);
+    setDetailError(null);
+    history
+      .get({ documentId, sha: selected })
+      .then((d) => {
+        if (cancelled || liveFor.current !== documentId) return;
+        setDetail(d ?? undefined);
+        if (!d) setDetailError("This version could not be read.");
+      })
+      .catch((e: unknown) => {
+        if (cancelled || liveFor.current !== documentId) return;
+        setDetail(undefined);
+        setDetailError(messageOf(e));
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingDetail(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [documentId, history, selected]);
+
+  // Restore is offered only for a document the caller can write AND a version
+  // that differs from it: a version identical to the current document has no
+  // field whose old value is anything but the value already there.
+  const canRestore = !!onRestore && !!detail && detail.status !== "U";
+
+  const restore = useCallback(() => {
+    if (!onRestore || !detail) return;
+    const chosen = new Set(picked);
+    const fields: Record<string, unknown> = {};
+    for (const f of detail.fields) {
+      if (!chosen.has(f.name)) continue;
+      // `before` is this version's value, which is the whole point — and it is
+      // undefined for a field the version did not have. Restoring that has to
+      // mean "clear it", so it is written as undefined rather than skipped.
+      fields[f.name] = f.before;
+    }
+    const restored: { fields: Record<string, unknown>; body?: string | null } = { fields };
+    // The key is present only when the body was picked: null is a real value to
+    // restore (a document that had no body), so absence cannot be spelled null.
+    if (chosen.has(BODY_FIELD)) restored.body = detail.bodyBefore ?? null;
+    onRestore(restored);
+  }, [onRestore, detail, picked]);
+
+  return (
+    <View testID="document-history" style={{ flex: 1, minHeight: 0, flexDirection: "row" }}>
+      {/* Left: the document at the selected version, annotated with what has
+          changed since. ChangeDetail is the changes surface's pane, used
+          unchanged — a version diff and a branch diff are the same question
+          asked of different pairs. */}
+      <View style={{ flex: 1, minWidth: 0 }}>
+        {detailError && !loadingDetail ? (
+          <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
+            <Text variant="body" color="tertiary" testID="history-detail-error">{detailError}</Text>
+          </View>
+        ) : (
+          <ChangeDetail
+            change={detail}
+            loading={loadingDetail}
+            emptyMessage={loading ? "Loading history…" : "Select a version"}
+            selectedFields={picked}
+            onToggleField={canRestore ? togglePick : undefined}
+          />
+        )}
+        {canRestore ? <RestoreBar count={picked.length} onRestore={restore} onClear={() => setPicked([])} /> : null}
+      </View>
+
+      {/* Right: the versions. */}
+      <View
+        style={{
+          width: 264,
+          borderLeftWidth: 1,
+          borderLeftColor: t.color.borderSubtle,
+          backgroundColor: t.color.surfaceSunken,
+          minHeight: 0,
+        }}
+      >
+        <View
+          style={{
+            height: t.layout.topbar,
+            paddingHorizontal: t.space(3),
+            flexDirection: "row",
+            alignItems: "center",
+            gap: t.space(2),
+            borderBottomWidth: 1,
+            borderBottomColor: t.color.borderSubtle,
+          }}
+        >
+          <Icon name="history" size={15} color={t.color.textSecondary} />
+          <Text variant="monoSm" numberOfLines={1} style={{ flex: 1 }}>History</Text>
+          <Pressable onPress={onClose} testID="history-close" hitSlop={8} style={{ padding: t.space(1) }}>
+            <Icon name="x" size={15} color={t.color.textTertiary} />
+          </Pressable>
+        </View>
+
+        {loading ? (
+          <View style={{ padding: t.space(4), alignItems: "center" }}>
+            <ActivityIndicator testID="history-loading" />
+          </View>
+        ) : error ? (
+          <View style={{ padding: t.space(4), gap: t.space(2) }}>
+            <Text variant="monoSm" color={t.color.diffDelFg} testID="history-error">{error}</Text>
+          </View>
+        ) : versions.length === 0 ? (
+          <View style={{ padding: t.space(4) }}>
+            <Text variant="monoSm" color="tertiary" testID="history-empty">
+              No commits yet for {documentPath}. A document saved in the CMS appears here once it has been pushed to git.
+            </Text>
+          </View>
+        ) : (
+          <FlatList
+            testID="history-list"
+            data={versions}
+            keyExtractor={(v) => v.sha}
+            style={{ flex: 1, minHeight: 0 }}
+            onEndReached={loadMore}
+            onEndReachedThreshold={0.4}
+            renderItem={({ item }) => (
+              <VersionRow
+                version={item}
+                selected={item.sha === selected}
+                onPress={() => setSelected(item.sha)}
+              />
+            )}
+            ListFooterComponent={
+              loadingMore ? (
+                <View style={{ padding: t.space(3), alignItems: "center" }}>
+                  <ActivityIndicator testID="history-loading-more" />
+                </View>
+              ) : exhausted ? (
+                // Why the list ends matters here: GitHub's commits API cannot
+                // follow a rename, so "that's all" can mean "that is where this
+                // path began" rather than "that is where the document began".
+                <View style={{ padding: t.space(3) }}>
+                  <Text variant="monoSm" color="tertiary" testID="history-end">
+                    End of history for this path. Commits from before a rename are not listed.
+                  </Text>
+                </View>
+              ) : null
+            }
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+/**
+ * The restore action, docked under the diff.
+ *
+ * Always mounted while a writable version is selected, rather than appearing
+ * once something is ticked: a bar that materialises on the first tick shifts
+ * the diff under the hand that just ticked it, and the disabled button is what
+ * tells you the boxes are for something in the first place.
+ */
+function RestoreBar({
+  count,
+  onRestore,
+  onClear,
+}: {
+  count: number;
+  onRestore: () => void;
+  onClear: () => void;
+}) {
+  const t = useTheme();
+  return (
+    <View
+      testID="restore-bar"
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: t.space(2),
+        paddingHorizontal: t.space(4),
+        paddingVertical: t.space(2),
+        borderTopWidth: 1,
+        borderTopColor: t.color.borderSubtle,
+        backgroundColor: t.color.surfaceSunken,
+      }}
+    >
+      <Text variant="monoSm" color="tertiary" style={{ flex: 1 }}>
+        {count === 0
+          ? "Tick a field to take its earlier value"
+          : count === 1
+            ? "1 field selected"
+            : `${count} fields selected`}
+      </Text>
+      {count > 0 ? (
+        <Pressable onPress={onClear} testID="restore-clear" style={{ paddingHorizontal: t.space(2), paddingVertical: t.space(1) }}>
+          <Text variant="monoSm" color="tertiary">Clear</Text>
+        </Pressable>
+      ) : null}
+      <Button
+        testID="restore-apply"
+        // Named for what it does to the thing in front of you. It does not write
+        // to git and does not save — it puts the values back in the form, and
+        // the author still has to save them.
+        title={count > 1 ? `Restore ${count} fields` : "Restore field"}
+        size="sm"
+        variant={count > 0 ? "primary" : "default"}
+        disabled={count === 0}
+        onPress={onRestore}
+        style={{ alignSelf: "center" }}
+      />
+    </View>
+  );
+}
+
+function VersionRow({
+  version,
+  selected,
+  onPress,
+}: {
+  version: DocumentVersion;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  const t = useTheme();
+  return (
+    <Pressable
+      testID={`version-${version.shortSha}`}
+      onPress={onPress}
+      style={{
+        paddingHorizontal: t.space(3),
+        paddingVertical: t.space(3),
+        gap: t.space(1),
+        borderBottomWidth: 1,
+        borderBottomColor: t.color.borderSubtle,
+        backgroundColor: selected ? t.color.surfaceRaised : "transparent",
+        borderLeftWidth: 2,
+        borderLeftColor: selected ? t.color.borderActive : "transparent",
+      }}
+    >
+      <Text variant="sm" numberOfLines={2} weight={selected ? "medium" : undefined}>
+        {firstLine(version.message)}
+      </Text>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        <Text variant="monoSm" color="tertiary" numberOfLines={1} style={{ flex: 1 }}>
+          {version.authorName} · {relativeTime(version.authoredAt)}
+        </Text>
+      </View>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        <Badge label={version.shortSha} tone="neutral" />
+        <Text variant="monoSm" color="tertiary">
+          {version.filesChanged === 1 ? "1 file" : `${version.filesChanged} files`}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}
+
+/** mergeBySha appends a page, dropping versions already listed. */
+function mergeBySha(prev: DocumentVersion[], page: DocumentVersion[]): DocumentVersion[] {
+  const seen = new Set(prev.map((v) => v.sha));
+  return [...prev, ...page.filter((v) => !seen.has(v.sha))];
+}
+
+function messageOf(e: unknown): string {
+  const err = e as { graphQLErrors?: { message?: string }[]; message?: string } | undefined;
+  return err?.graphQLErrors?.[0]?.message || err?.message || "Couldn’t load this document’s history.";
+}

package/src/components/FormsBrowser.tsx

@@ -130,11 +130,9 @@ function FormRow({ form, onPress }: { form: FormInfo; onPress: () => void }) {
           </Text>
         ) : null}
       </View>
-      {/* The two numbers the request asks for: how much has come in, and how
-          much the form asks for. */}
-      <Text variant="monoSm" color="tertiary">
-        {form.fieldCount} {form.fieldCount === 1 ? "field" : "fields"}
-      </Text>
+      {/* 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>

package/src/components/MediaField.tsx

@@ -6,6 +6,7 @@ import { Icon } from "./Icon";
 import { Button } from "./Button";
 import { MediaPreview, MediaChip, fileName } from "./MediaPreview";
 import {
+  FieldMediaApi,
   MediaApi,
   MediaAsset,
   MediaKind,
@@ -377,6 +378,67 @@ function AmbiguousNotice({
   );
 }
 
+// useFieldMedia builds the FieldMediaApi a host-supplied control receives
+// through the renderField slot, plus the picker element the caller must mount
+// next to that control (the picker is a modal, so it has to live in the tree).
+//
+// The picker is promise-driven: `pick()` opens it and settles when the author
+// chooses or dismisses. That shape is what lets the markdown editor — which on
+// native runs inside a WebView and only sees async, serializable props — ask
+// for an image without knowing anything about the picker UI.
+//
+// `set` defaults to the first configured set when the field names none (a body
+// field has no display.media), and the picker's own switcher covers the rest.
+export function useFieldMedia(opts: { set?: string; storeAs?: string }): {
+  media: FieldMediaApi | undefined;
+  picker: React.ReactNode;
+} {
+  const api = useMediaApi();
+  const contextPath = React.useContext(DocumentPathContext);
+  const [request, setRequest] = React.useState<{
+    kinds?: MediaKind[];
+    resolve: (r: { asset: MediaAsset; path: string } | null) => void;
+  } | null>(null);
+  const requestRef = React.useRef(request);
+  requestRef.current = request;
+
+  const { set, storeAs } = opts;
+  const media = React.useMemo<FieldMediaApi | undefined>(() => {
+    if (!api) return undefined;
+    const form = (storeAs as StoreAs) || "public";
+    return {
+      pick: (pickOpts) =>
+        new Promise((resolve) => {
+          // A second pick while one is open supersedes it: the first caller
+          // gets null rather than waiting forever.
+          requestRef.current?.resolve(null);
+          setRequest({ kinds: pickOpts?.kinds, resolve });
+        }),
+      resolve: (paths) => api.resolve(paths, contextPath),
+    };
+    // The pick callback reads the current request through a ref, so only the
+    // inputs that change what a pick *means* rebuild the api.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [api, contextPath, storeAs]);
+
+  const settle = (result: { asset: MediaAsset; path: string } | null) => {
+    request?.resolve(result);
+    setRequest(null);
+  };
+
+  const picker = api ? (
+    <MediaPicker
+      visible={!!request}
+      onClose={() => settle(null)}
+      onSelect={(asset) => settle({ asset, path: pathForStoreAs(asset, (storeAs as StoreAs) || "public") })}
+      set={set ?? api.sets[0]?.name}
+      kinds={request?.kinds}
+    />
+  ) : null;
+
+  return { media, picker };
+}
+
 // ---- picker ----------------------------------------------------------------
 
 const PAGE_SIZE = 40;

package/src/components/MediaPreview.tsx

@@ -27,7 +27,20 @@ export function MediaPreview({ media, maxHeight = 240, compact }: MediaPreviewPr
   // it through <Image> would silently show nothing on Android, so it takes the
   // chip path instead — visible and honest.
   const renderable = media.kind === "image";
-  if (compact || !renderable) return <MediaChip media={media} />;
+  if (!renderable) return <MediaChip media={media} />;
+
+  // Compact is the picker-row form: the image fills the box it is given.
+  if (compact) {
+    return (
+      <Image
+        source={{ uri: media.url }}
+        accessibilityLabel={media.repoPath}
+        resizeMode="cover"
+        testID={`media-thumb-${media.id}`}
+        style={{ width: "100%", height: "100%" }}
+      />
+    );
+  }
 
   return (
     <View

package/src/components/MediaPreview.web.tsx

@@ -13,15 +13,30 @@ export type MediaPreviewProps = {
   // Cap on the rendered height. The preview never exceeds it; images letterbox
   // inside it rather than pushing the rest of the form off-screen.
   maxHeight?: number;
-  // Compact renders the chip form regardless of kind — used in the picker grid
-  // and anywhere a full preview would be too heavy.
+  // Compact is the picker-row form: an image fills whatever box it is given
+  // (cover-fit, no frame), and every other kind renders the chip. It used to
+  // render the chip for images too, which is why the picker showed a filename
+  // squeezed into a 48px square instead of a thumbnail.
   compact?: boolean;
 };
 
 export function MediaPreview({ media, maxHeight = 240, compact }: MediaPreviewProps) {
   const t = useTheme();
 
-  if (compact) return <MediaChip media={media} />;
+  if (compact) {
+    if (media.kind === "image" || media.kind === "svg") {
+      return (
+        <img
+          src={media.url}
+          alt={media.repoPath}
+          loading="lazy"
+          data-testid={`media-thumb-${media.id}`}
+          style={{ display: "block", width: "100%", height: "100%", objectFit: "cover" }}
+        />
+      );
+    }
+    return <MediaChip media={media} />;
+  }
 
   const frame = {
     borderWidth: 1,