@gogitcms/design-system 0.16.0-next.5 → 0.16.0-next.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.5",
+  "version": "0.16.0-next.7",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/ApplyChangesModal.test.tsx

@@ -146,3 +146,51 @@ test("failure surfaces the error and a dismiss button", () => {
   expect(screen.getByTestId("merge-error")).toHaveTextContent("main moved while merging");
   expect(screen.getByTestId("apply-dismiss")).toBeInTheDocument();
 });
+
+test("with a review reason the confirmation step promises a review, not a merge commit", () => {
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        reviewReason="main is protected, so this opens a change request for review."
+        onConfirm={() => {}}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const confirm = screen.getByTestId("apply-confirm");
+  // The run will stop before the push, so the copy must not describe one.
+  expect(confirm).not.toHaveTextContent("pushes a merge commit");
+  expect(confirm).not.toHaveTextContent("is then deleted");
+  expect(screen.getByTestId("apply-confirm-review")).toHaveTextContent("opens a pull request for review");
+  expect(confirm).toHaveTextContent("Nothing is pushed to origin/main until it is approved");
+  expect(confirm).toHaveTextContent("main is protected");
+});
+
+test("needs_review without code conflicts explains the review instead of listing files", () => {
+  const onCreateChangeRequest = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        reviewReason="main is protected, so this opens a change request for review."
+        progress={{ ...base, status: "needs_review", step: "merging", escalationFiles: [] }}
+        onCreateChangeRequest={onCreateChangeRequest}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const panel = screen.getByTestId("merge-needs-review");
+  // No conflict: it is not called one, and no empty file list is drawn.
+  expect(panel).not.toHaveTextContent("Code conflicts need a developer");
+  expect(panel).toHaveTextContent("This merge needs a review");
+  expect(screen.getByTestId("merge-needs-review-reason")).toHaveTextContent("nothing was pushed to main");
+  expect(screen.getByTestId("merge-needs-review-reason")).toHaveTextContent("main is protected");
+
+  // The same escalation flow: an explanation, then a change request.
+  fireEvent.change(screen.getByTestId("change-request-explanation"), { target: { value: "Spring copy" } });
+  fireEvent.click(screen.getByTestId("create-change-request-submit"));
+  expect(onCreateChangeRequest).toHaveBeenCalledWith("Spring copy");
+});

package/src/components/ApplyChangesModal.tsx

@@ -35,6 +35,15 @@ export type ApplyChangesModalProps = {
   progress?: MergeProgress;
   /** A short summary of what will be merged, shown on the confirmation step. */
   summary?: string;
+  /**
+   * Why this apply cannot push to the target directly and opens a change
+   * request instead — the target is protected, or the caller cannot publish
+   * every project on the branch. When set, the confirmation step describes the
+   * review that will happen rather than a merge commit that will not, and the
+   * needs_review panel gives this reason when there are no code conflicts to
+   * list. Absent for an ordinary direct merge.
+   */
+  reviewReason?: string;
   /** Number of unresolved conflicts, shown on the conflicted state. */
   conflictCount?: number;
   /**
@@ -99,7 +108,7 @@ function StepRow({ label, state }: { label: string; state: "done" | "active" | "
  * (spinner → green check), then shows a success panel with the commit + stats,
  * or an error. Read-only: it reflects a run the host drives via a subscription.
  */
-export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summary, conflictCount, changeRequestOpen, changeRequestUrl, creatingChangeRequest, onConfirm, onReviewConflicts, onCreateChangeRequest, onViewChangeRequest, onClose, onDone }: ApplyChangesModalProps) {
+export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summary, reviewReason, conflictCount, changeRequestOpen, changeRequestUrl, creatingChangeRequest, onConfirm, onReviewConflicts, onCreateChangeRequest, onViewChangeRequest, onClose, onDone }: ApplyChangesModalProps) {
   const t = useTheme();
   const done = onDone ?? onClose;
   const [explanation, setExplanation] = useState("");
@@ -121,6 +130,13 @@ export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summar
   const status = progress?.status;
   const conflicted = status === "conflicted";
   const needsReview = status === "needs_review";
+  // A needs_review run either lists code files a developer must resolve, or
+  // lists nothing because the merge was clean and simply may not be pushed by
+  // this run (a protected target, or partial project access). The two need
+  // different words: the second is not a conflict and naming it one would send
+  // the editor looking for files that are not there.
+  const escalationFiles = progress?.escalationFiles ?? [];
+  const codeConflicts = escalationFiles.length > 0;
   const terminal = status === "succeeded" || status === "failed" || conflicted || needsReview;
   const current = progress ? stepOrder[progress.step] : 0;
 
@@ -201,30 +217,63 @@ export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summar
           // Confirmation step: spell out the irreversible, outward-facing effects
           // before anything is pushed to the remote.
           <View testID="apply-confirm" style={{ gap: t.space(3) }}>
-            <Text variant="body" color="secondary">
-              {`This merges ${sourceBranch} into ${targetBranch}, commits the result, and pushes a merge commit to origin/${targetBranch}.`}
-            </Text>
-            <Text variant="body" color="secondary">
-              {`${sourceBranch} is then deleted. This can’t be undone.`}
-            </Text>
+            {reviewReason ? (
+              // The run will stop before the push, so promising a merge commit
+              // on origin here would be describing something that will not
+              // happen. Say what will: a review, and nothing on the target
+              // until it is approved.
+              <>
+                <Text variant="body" color="secondary" testID="apply-confirm-review">
+                  {`This merges ${sourceBranch} into ${targetBranch} in the CMS and opens a pull request for review. Nothing is pushed to origin/${targetBranch} until it is approved.`}
+                </Text>
+                <Text variant="body" color="secondary">{reviewReason}</Text>
+              </>
+            ) : (
+              <>
+                <Text variant="body" color="secondary">
+                  {`This merges ${sourceBranch} into ${targetBranch}, commits the result, and pushes a merge commit to origin/${targetBranch}.`}
+                </Text>
+                <Text variant="body" color="secondary">
+                  {`${sourceBranch} is then deleted. This can’t be undone.`}
+                </Text>
+              </>
+            )}
             {summary ? <Text variant="monoSm" color="tertiary">{summary}</Text> : null}
           </View>
         ) : needsReview ? (
-          // Content merged, but code/config files conflict. A content editor can't
-          // resolve these — collect an explanation and escalate to a developer.
+          // Content merged, but the run may not push it. Either code/config
+          // files conflict — a content editor can't resolve these — or the
+          // target can't take a direct push from this run. Both collect an
+          // explanation and escalate through a pull request.
           <View testID="merge-needs-review" style={{ gap: t.space(3) }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
-              <Icon name="gitPullRequest" size={16} color={t.color.diffDelFg} />
-              <Text variant="body" weight="medium">Code conflicts need a developer</Text>
-            </View>
-            <Text variant="body" color="secondary">
-              {`The content merged cleanly, but these files changed on both ${sourceBranch} and ${targetBranch} and need a developer to resolve:`}
-            </Text>
-            <View style={{ gap: 2, padding: t.space(2), borderRadius: t.radius.md, backgroundColor: t.color.diffDelBg }}>
-              {(progress?.escalationFiles ?? []).map((f) => (
-                <Text key={f} variant="monoSm" color={t.color.diffDelFg} testID={`escalation-file-${f}`}>{f}</Text>
-              ))}
-            </View>
+            {codeConflicts ? (
+              <>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+                  <Icon name="gitPullRequest" size={16} color={t.color.diffDelFg} />
+                  <Text variant="body" weight="medium">Code conflicts need a developer</Text>
+                </View>
+                <Text variant="body" color="secondary">
+                  {`The content merged cleanly, but these files changed on both ${sourceBranch} and ${targetBranch} and need a developer to resolve:`}
+                </Text>
+                <View style={{ gap: 2, padding: t.space(2), borderRadius: t.radius.md, backgroundColor: t.color.diffDelBg }}>
+                  {escalationFiles.map((f) => (
+                    <Text key={f} variant="monoSm" color={t.color.diffDelFg} testID={`escalation-file-${f}`}>{f}</Text>
+                  ))}
+                </View>
+              </>
+            ) : (
+              <>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+                  <Icon name="gitPullRequest" size={16} color={t.color.textSecondary} />
+                  <Text variant="body" weight="medium">This merge needs a review</Text>
+                </View>
+                <Text variant="body" color="secondary" testID="merge-needs-review-reason">
+                  {`The content merged cleanly and nothing was pushed to ${targetBranch}. ` +
+                    (reviewReason ?? `Someone with the authority to publish it has to approve it.`) +
+                    ` Opening a change request creates a pull request for that review.`}
+                </Text>
+              </>
+            )}
             <Input
               value={explanation}
               onChangeText={setExplanation}

package/src/components/ContentBrowser.tsx

@@ -483,6 +483,9 @@ export type ContentBrowserProps = {
   canApplyChanges?: boolean;
   applyOpen?: boolean;
   applySummary?: string;
+  // Why applying opens a change request instead of merging (see
+  // ApplyChangesModal.reviewReason). Absent for a direct merge.
+  applyReviewReason?: string;
   applyProgress?: MergeProgress;
   applyConflictCount?: number;
   onConfirmApply?: () => void;
@@ -3767,6 +3770,7 @@ function ApplyModalOverlay(props: ContentBrowserProps) {
       sourceBranch={props.workspace.branch}
       targetBranch={props.targetBranch ?? props.defaultBranch ?? ""}
       summary={props.applySummary}
+      reviewReason={props.applyReviewReason}
       progress={props.applyProgress}
       conflictCount={props.applyConflictCount}
       changeRequestOpen={props.changeRequestOpen}

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>

package/src/icons.ts

@@ -28,6 +28,7 @@ export const icons = {
   chevronDown: ["m6 9 6 6 6-6"],
   chevronUp: ["m18 15-6-6-6 6"],
   folder: ["M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"],
+  user: ["M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"],
   building: ["M3 21h18", "M6 21V7l7-4v18", "M18 21V11l-5-3"],
   menu: ["M3 6h18", "M3 12h18", "M3 18h18"],
   plus: ["M5 12h14", "M12 5v14"],

package/src/index.ts

@@ -115,9 +115,10 @@ export { Spinner } from "./components/Spinner";
 export type { SpinnerProps } from "./components/Spinner";
 
 // Notifications
-export { NotificationBell, NotificationList } from "./components/Notifications";
+export { NotificationBell, NotificationList, InlineCode, notificationKindIcon } from "./components/Notifications";
 export type {
   NotificationItem,
+  NotificationKind,
   NotificationBellProps,
   NotificationListProps,
 } from "./components/Notifications";