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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.5",
+  "version": "0.16.0-next.6",
   "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/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";