@gogitcms/design-system 0.16.0-next.4 → 0.16.0-next.6

package/src/components/ContentBrowser.tsx

@@ -6,7 +6,7 @@ import { Text } from "./Text";
 import { Icon } from "./Icon";
 import { Button, IconButton } from "./Button";
 import { Input } from "./Input";
-import { Avatar, Badge, DiffStat, Divider, SectionLabel } from "./primitives";
+import { Avatar, Badge, CheckBox, DiffStat, Divider, SectionLabel } from "./primitives";
 import { NavRow } from "./NavRow";
 import { AppShell, MobileScreen, Pane, TopBar, ThemeToggle } from "./layout";
 import { Segment, type SegmentItem } from "./Segment";
@@ -23,6 +23,7 @@ import {
   PresenceField,
   PresenceAvatars,
   useCollabRegister,
+  writeCollabValue,
   useCollabMirror,
   useCollabSynced,
   useCollabValue,
@@ -114,6 +115,12 @@ export type FieldSlotArgs = {
   // CRDT and publish presence.
   collab?: CollabApi;
   path?: string;
+  // Bumped when the host replaces this field's value outright rather than the
+  // user editing it — restoring it from a past version. A controlled control
+  // needs nothing from this (it already re-renders with the new value), but the
+  // body editor does: in a live session it ignores `value` and mirrors the
+  // shared fragment, so "the value changed" is not a thing it can observe.
+  resetNonce?: number;
 };
 export type RenderField = (args: FieldSlotArgs) => React.ReactNode;
 
@@ -767,6 +774,11 @@ type FieldControlProps = {
   // When this number changes, the field programmatically focuses itself (used to
   // jump to a peer's field from its presence avatar).
   focusSignal?: number;
+  // Bumped when this field's value was replaced by the host rather than typed —
+  // restored from a past version. Only the host-supplied body editor needs it
+  // (see FieldSlotArgs.resetNonce); every built-in control is controlled and
+  // re-renders from `value` on its own.
+  resetNonce?: number;
 };
 
 // The scalar type an array's `of` maps to when rendering item controls.
@@ -780,7 +792,7 @@ function ofToType(of?: string): string {
 }
 
 function FieldControl(props: FieldControlProps) {
-  const { field, value, onChange, renderField, readOnly = false, error, hideLabel, onOpenGroup, collab, path, focusSignal } = props;
+  const { field, value, onChange, renderField, readOnly = false, error, hideLabel, onOpenGroup, collab, path, focusSignal, resetNonce } = props;
   const t = useTheme();
   const label = hideLabel ? "" : field.label || field.name;
   // A text field participates in live collaboration when the document has a
@@ -793,7 +805,7 @@ function FieldControl(props: FieldControlProps) {
 
   // Host-supplied control (e.g. the markdown editor) takes precedence.
   if (renderField) {
-    const custom = renderField({ field, value, onChange, readOnly, collab: collabText, path });
+    const custom = renderField({ field, value, onChange, readOnly, collab: collabText, path, resetNonce });
     if (custom != null && custom !== false) {
       return (
         <View style={{ gap: t.space(2) }}>
@@ -2638,6 +2650,11 @@ function EntryDetail({
   const canRename = !readOnly && !!onRename;
   const canMove = !readOnly && !!onMove && glob.hierarchical;
   const [prompt, setPrompt] = useState<"rename" | "move" | null>(null);
+  // Per-field "your value was replaced" counters, bumped by a restore. Only the
+  // host-supplied body editor reads them (see FieldSlotArgs.resetNonce); every
+  // built-in control is controlled and needs no telling.
+  const [resetNonces, setResetNonces] = useState<Record<string, number>>({});
+
   // Whether this column is showing the version browser instead of the form.
   // Deliberately per-column and ephemeral: history is something you open, read
   // and close, so it lives and dies with the column rather than in the URL.
@@ -2832,6 +2849,112 @@ function EntryDetail({
     [commit],
   );
 
+  // Publish a value map the form did NOT arrive at by typing — a restore from a
+  // past version, or a discard back to the saved document.
+  //
+  // Both used to write local state and stop there, which is only half the job in
+  // a live session. The shared document is the source of truth there: every
+  // collab control prefers its binding to the value handed to it, so a replaced
+  // value was displayed for one frame and then overwritten by the room's
+  // unchanged one, and no peer ever saw it. Anything that replaces values
+  // wholesale has to come through here.
+  //
+  // `names` are the fields whose values were replaced; unchanged ones are left
+  // alone so a replacement never churns the room (or nudges a peer's cursor)
+  // over a value that did not move.
+  const publishReplacement = useCallback(
+    (previous: Record<string, unknown>, next: Record<string, unknown>, names: string[]) => {
+      const moved = names.filter((name) => !sameValue(previous[name], next[name]));
+      if (moved.length === 0) return;
+
+      if (entry.collab) {
+        for (const name of moved) {
+          // A body is a ProseMirror fragment rather than a field binding, so it
+          // is not written here — its editor is told instead, by the nonce below.
+          if (editFields.find((f) => f.name === name)?.source === "body") continue;
+          writeCollabValue(entry.collab, name, previous[name], next[name]);
+        }
+      }
+
+      // Tell the replaced fields their value came from outside. Keyed per field
+      // rather than one counter for the document: the body editor acts on this,
+      // and replacing some unrelated field must not make it rebuild a body a
+      // peer may be mid-sentence in.
+      setResetNonces((prev) => {
+        const bumped = { ...prev };
+        for (const name of moved) bumped[name] = (bumped[name] ?? 0) + 1;
+        return bumped;
+      });
+    },
+    // editFields is derived from entry, captured by id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [entry.id, entry.collab],
+  );
+
+  // Values taken from a past version and put back into the form.
+  //
+  // It is an edit like any other: the restored fields land in `values`, the
+  // document goes unsaved, and the author saves it (or discards it) themselves.
+  // Nothing is written to git here — history is a place you read, and rewriting
+  // the document from it should still pass through the same review a typed edit
+  // does.
+  const restoreValues = useCallback(
+    (restored: { fields: Record<string, unknown>; body?: string | null }) => {
+      const previous = valuesRef.current;
+      const next = { ...previous, ...restored.fields };
+      // The body is a field in the form like any other; which one it is comes
+      // from the schema (`source: "body"`), the same mapping buildChange uses in
+      // the other direction. A document whose model has no body field simply
+      // has no body to restore.
+      const bodyField = "body" in restored ? editFields.find((f) => f.source === "body") : undefined;
+      if (bodyField) next[bodyField.name] = restored.body ?? "";
+
+      const replaced = Object.keys(restored.fields);
+      if (bodyField) replaced.push(bodyField.name);
+
+      // Touched under the first restored name so a restore that leaves a
+      // required field empty shows its error immediately, rather than looking
+      // saveable until Save is pressed.
+      //
+      // Committed BEFORE publishing: a collab control observing the room echoes
+      // what it sees back through onChange, and that echo builds its next map by
+      // spreading the current one. Publishing first would have it spread the
+      // pre-restore map.
+      commit(next, replaced[0] ?? SYNTHETIC_BODY);
+      publishReplacement(previous, next, replaced);
+      // Drilled-into groups address the pre-restore shape; a restored group
+      // object can have different children entirely.
+      setGroupPath([]);
+    },
+    // editFields is derived from entry, which commit already captures by id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [commit, entry.id, publishReplacement],
+  );
+
+  // Throw away everything unsaved and go back to the document as stored.
+  //
+  // In a live session that is a change to the ROOM, not just to this screen: the
+  // unsaved work is the collective state every client is looking at, and a
+  // discard that only reverted the local form would leave the document it just
+  // claimed to restore sitting in the CRDT, ready to come straight back.
+  const discardEdits = useCallback(() => {
+    const previous = valuesRef.current;
+    const restored = seed();
+    valuesRef.current = restored;
+    setValues(restored);
+    setTouched({});
+    // The preview is rendering the draft being thrown away, and nothing else
+    // will tell it otherwise: it is fed from edits, and a discard is the one
+    // change to a document that produces no edit. Without this the preview
+    // keeps showing work the author just deleted, until they type again.
+    emitDraft(buildChange(entry.id, editFields, restored), entry);
+    discard();
+    publishReplacement(previous, restored, editFields.map((f) => f.name));
+    setGroupPath([]);
+    // seed/editFields derive from entry, captured by id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entry.id, discard, emitDraft, publishReplacement]);
+
   // A field edit within the active group-drill frame: write the value at the
   // frame's nested path, then commit the whole map (buildChange serializes it).
   const changeInFrame = useCallback(
@@ -2895,19 +3018,7 @@ function EntryDetail({
         {saveHandler && dirty ? (
           <Pressable
             testID="discard-changes"
-            onPress={() => {
-              const restored = seed();
-              valuesRef.current = restored;
-              setValues(restored);
-              setTouched({});
-              // The preview is rendering the draft that is being thrown away,
-              // and nothing else will tell it otherwise: it is fed from edits,
-              // and a discard is the one change to a document that produces no
-              // edit. Without this the preview keeps showing work the author
-              // just deleted, until they type again.
-              emitDraft(buildChange(entry.id, editFields, restored), entry);
-              discard();
-            }}
+            onPress={discardEdits}
             style={{ paddingHorizontal: t.space(2), paddingVertical: t.space(1) }}
           >
             <Text variant="monoSm" color="tertiary">Discard</Text>
@@ -2973,6 +3084,21 @@ function EntryDetail({
           documentPath={entry.path}
           history={history}
           onClose={() => setShowHistory(false)}
+          // Restoring needs somewhere for the values to go: a document that is
+          // read-only, or that this host never wired a save for, gets the
+          // history with no selection boxes at all rather than a form it can
+          // dirty and never save. (saveHandler is already undefined when
+          // readOnly, so this covers both.)
+          onRestore={
+            !saveHandler
+              ? undefined
+              : (restored) => {
+                  restoreValues(restored);
+                  // Back to the form, which is where the restored values now
+                  // are and where the decision to keep them is made.
+                  setShowHistory(false);
+                }
+          }
         />
       ) : /* Keyed by entry.id so controls (incl. the markdown editor) remount with
           fresh initial values (and the scroll resets to top) when the selected
@@ -3015,6 +3141,7 @@ function EntryDetail({
               collab={entry.collab}
               path={[...groupPath, f.name].join(".")}
               focusSignal={focusTarget && focusTarget.name === f.name ? focusTarget.nonce : undefined}
+              resetNonce={resetNonces[f.name]}
             />
           ))}
         </ScrollView>
@@ -3094,27 +3221,6 @@ function useMultiSelect(resetKey: string) {
   return { checked, toggle, clear, checkedIds, checkedFolders, toggleFolder, checkedFolderKeys };
 }
 
-// CheckBox is the row-selection control for multi-select.
-function CheckBox({ value, onToggle }: { value: boolean; onToggle: () => void }) {
-  const t = useTheme();
-  return (
-    <Pressable
-      // Stop the press from bubbling to the row's open handler (the checkbox
-      // sits inside the row Pressable) so toggling never also opens the entry.
-      onPress={(e?: { stopPropagation?: () => void }) => { e?.stopPropagation?.(); onToggle(); }}
-      testID="entry-checkbox"
-      style={{
-        width: 18, height: 18, borderRadius: t.radius.sm, borderWidth: 1,
-        borderColor: value ? t.color.borderStrong : t.color.borderDefault,
-        backgroundColor: value ? t.color.surfaceInverted : t.color.surfaceRaised,
-        alignItems: "center", justifyContent: "center",
-      }}
-    >
-      {value ? <Icon name="check" size={12} color={t.color.textInverted} /> : null}
-    </Pressable>
-  );
-}
-
 // SelectionBar appears above the entry list when rows are checked; it offers a
 // bulk move and/or delete plus a clear action (each shown only when wired).
 function SelectionBar({ count, onMove, onDelete, onClear }: { count: number; onMove?: () => void; onDelete?: () => void; onClear: () => void }) {
@@ -3257,7 +3363,7 @@ function EntriesList({
             <View style={{ flexDirection: "row", alignItems: "center" }}>
               {showChecks ? (
                 <View style={{ paddingLeft: t.space(4) }}>
-                  <CheckBox value={!!checked?.[e.id]} onToggle={() => onToggleEntry?.(e.id)} />
+                  <CheckBox value={!!checked?.[e.id]} onToggle={() => onToggleEntry?.(e.id)} testID="entry-checkbox" />
                 </View>
               ) : null}
               <View style={{ flex: 1 }}>

package/src/components/DocumentHistory.tsx

@@ -4,7 +4,8 @@ import { useTheme } from "../ThemeProvider";
 import { Text } from "./Text";
 import { Icon } from "./Icon";
 import { Badge } from "./primitives";
-import { ChangeDetail, type DocumentChange } from "./ChangeDetail";
+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. */
@@ -18,6 +19,22 @@ export type DocumentHistoryProps = {
   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;
 };
 
 /**
@@ -30,7 +47,7 @@ export type DocumentHistoryProps = {
  * 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 }: DocumentHistoryProps) {
+export function DocumentHistory({ documentId, documentPath, history, onClose, onRestore }: DocumentHistoryProps) {
   const t = useTheme();
 
   const [versions, setVersions] = useState<DocumentVersion[]>([]);
@@ -43,6 +60,14 @@ export function DocumentHistory({ documentId, documentPath, history, onClose }:
   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
@@ -66,6 +91,7 @@ export function DocumentHistory({ documentId, documentPath, history, onClose }:
     setExhausted(false);
     setSelected(null);
     setDetail(undefined);
+    setPicked([]);
     history
       .list({ documentId, limit: PAGE, offset: 0 })
       .then((page) => {
@@ -110,6 +136,10 @@ export function DocumentHistory({ documentId, documentPath, history, onClose }:
 
   // 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;
@@ -137,6 +167,29 @@ export function DocumentHistory({ documentId, documentPath, history, onClose }:
     };
   }, [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
@@ -153,8 +206,11 @@ export function DocumentHistory({ documentId, documentPath, history, onClose }:
             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. */}
@@ -237,6 +293,66 @@ export function DocumentHistory({ documentId, documentPath, history, onClose }:
   );
 }
 
+/**
+ * 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,

package/src/components/Notifications.tsx

@@ -4,10 +4,11 @@ import { useTheme, useThemeMode, ThemeScope } from "../ThemeProvider";
 import { lightTheme, darkTheme } from "../theme";
 import { Text } from "./Text";
 import { Icon } from "./Icon";
+import type { IconName } from "../icons";
 import { Spinner } from "./Spinner";
 
 // One notification, shaped for display. Transport-agnostic: the frontend/mobile
-// apps map GraphQL rows and the desktop maps REST rows into this.
+// apps map GraphQL rows and the desktop and dashboard map REST rows into this.
 export type NotificationItem = {
   id: string;
   title: string;
@@ -16,8 +17,39 @@ export type NotificationItem = {
   read: boolean;
   createdAt: string; // ISO 8601
   author?: string; // display name/email of who caused it, when known
+  // What produced it — picks the icon. Unknown kinds fall back to the bell.
+  kind?: NotificationKind | string;
+  // Where it happened, for a list that spans several repositories/projects.
+  // Omit whichever the list is already scoped to.
+  repository?: string;
+  project?: string;
 };
 
+export type NotificationKind = "import" | "export" | "merge" | "change_request" | "member" | "branch" | "project";
+
+// The icon for a notification kind. Exported so hosts that draw their own rows
+// (a scope picker's section headers, say) agree with the list.
+export function notificationKindIcon(kind?: string): IconName {
+  switch (kind) {
+    case "import":
+      return "download";
+    case "export":
+      return "upload";
+    case "merge":
+      return "gitMerge";
+    case "change_request":
+      return "gitPullRequest";
+    case "member":
+      return "user";
+    case "branch":
+      return "gitBranch";
+    case "project":
+      return "folder";
+    default:
+      return "bell";
+  }
+}
+
 // relativeTime renders a compact age ("just now", "5m", "3h", "2d").
 function relativeTime(iso: string): string {
   const then = Date.parse(iso);
@@ -32,7 +64,65 @@ function relativeTime(iso: string): string {
   return `${days}d`;
 }
 
-// A single notification row: an unread dot + level-tinted title, body, and age.
+// InlineCode renders a sentence whose backticked spans (`main`, `#12`'s
+// branch) are set in the mono face, so a title like "Created `zyx` branch"
+// reads as prose around a name rather than as punctuation. An unmatched
+// backtick is left as typed.
+export function InlineCode({
+  text,
+  variant = "sm",
+  weight,
+  color,
+  numberOfLines,
+  testID,
+}: {
+  text: string;
+  variant?: "sm" | "body" | "monoSm" | "xs";
+  weight?: "regular" | "medium" | "semibold";
+  color?: string;
+  numberOfLines?: number;
+  testID?: string;
+}) {
+  const t = useTheme();
+  const parts = text.split("`");
+  // An even number of parts means an odd number of backticks: not a pair, so
+  // render the text untouched.
+  if (parts.length % 2 === 0) {
+    return (
+      <Text variant={variant} weight={weight} color={color} numberOfLines={numberOfLines} testID={testID}>
+        {text}
+      </Text>
+    );
+  }
+  return (
+    <Text variant={variant} weight={weight} color={color} numberOfLines={numberOfLines} testID={testID}>
+      {parts.map((part, i) =>
+        i % 2 === 1 ? (
+          <Text
+            key={i}
+            variant={variant}
+            weight={weight}
+            color={color}
+            mono
+            style={{
+              backgroundColor: t.color.surfaceSunken,
+              borderRadius: t.radius.sm,
+              paddingHorizontal: 3,
+            }}
+          >
+            {part}
+          </Text>
+        ) : (
+          part
+        ),
+      )}
+    </Text>
+  );
+}
+
+// A single notification row: a kind icon, the title (unread rows in bold, error
+// rows tinted), the body, and a context line — where it happened and who did
+// it — with the age on the right.
 function NotificationRow({
   item,
   divided,
@@ -44,12 +134,16 @@ function NotificationRow({
 }) {
   const t = useTheme();
   const titleColor = item.level === "error" ? t.color.diffDelFg : t.color.textPrimary;
+  const context = [item.repository, item.project].filter(Boolean).join(" · ");
+  const meta = [context, item.author ? `by ${item.author}` : ""].filter(Boolean).join(" · ");
   return (
     <Pressable
       onPress={onPress}
+      disabled={!onPress}
+      testID={`notification-${item.id}`}
       style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
         flexDirection: "row",
-        gap: t.space(2.5),
+        gap: t.space(3),
         paddingHorizontal: t.space(4),
         paddingVertical: t.space(3),
         borderBottomWidth: divided ? 1 : 0,
@@ -57,33 +151,57 @@ function NotificationRow({
         backgroundColor: hovered || pressed ? t.color.surfaceHover : "transparent",
       })}
     >
-      <View
-        style={{
-          width: 8,
-          height: 8,
-          marginTop: 5,
-          borderRadius: t.radius.pill,
-          backgroundColor: item.read ? "transparent" : t.color.diffDelFg,
-        }}
-      />
-      <View style={{ flex: 1, gap: 2 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
-          <Text
-            variant="sm"
-            weight={item.read ? "medium" : "semibold"}
-            color={titleColor}
-            numberOfLines={2}
-            style={{ flex: 1 }}
-          >
-            {item.title}
-          </Text>
+      <View style={{ width: 28, height: 28, alignItems: "center", justifyContent: "center", position: "relative" }}>
+        <View
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: t.radius.pill,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: item.level === "error" ? t.color.diffDelBg : t.color.surfaceSunken,
+          }}
+        >
+          <Icon
+            name={notificationKindIcon(item.kind)}
+            size={14}
+            color={item.level === "error" ? t.color.diffDelFg : t.color.textSecondary}
+          />
+        </View>
+        {/* Unread dot, riding on the icon's corner. */}
+        {item.read ? null : (
+          <View
+            testID="notification-unread"
+            style={{
+              position: "absolute",
+              top: -1,
+              right: -1,
+              width: 8,
+              height: 8,
+              borderRadius: t.radius.pill,
+              backgroundColor: t.color.diffDelFg,
+              borderWidth: 1,
+              borderColor: t.color.surfaceRaised,
+            }}
+          />
+        )}
+      </View>
+      <View style={{ flex: 1, gap: 2, minWidth: 0 }}>
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: t.space(2) }}>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <InlineCode
+              text={item.title}
+              variant="sm"
+              weight={item.read ? "medium" : "semibold"}
+              color={titleColor}
+              numberOfLines={2}
+            />
+          </View>
           <Text variant="monoSm" color="tertiary">{relativeTime(item.createdAt)}</Text>
         </View>
-        {item.body ? (
-          <Text variant="monoSm" color="secondary" numberOfLines={2}>{item.body}</Text>
-        ) : null}
-        {item.author ? (
-          <Text variant="monoSm" color="tertiary" numberOfLines={1}>{`by ${item.author}`}</Text>
+        {item.body ? <InlineCode text={item.body} variant="monoSm" color={t.color.textSecondary} numberOfLines={2} /> : null}
+        {meta ? (
+          <Text variant="monoSm" color="tertiary" numberOfLines={1}>{meta}</Text>
         ) : null}
       </View>
     </Pressable>