@gogitcms/design-system 0.15.0-next.3

package/src/components/MediaPreview.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { View, Image, Linking, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { MediaAsset, formatBytes, kindIcon } from "../media";
+
+// Native previews. (Web renders through MediaPreview.web.tsx via platform
+// resolution, and gets real <video>/<audio>/<object> playback.)
+//
+// Native deliberately stops at images: video, audio and PDF playback would each
+// pull in a separate native dependency, and the editor's job on a phone is to
+// let you see *which* asset a field points at, not to be a media player. Those
+// kinds render the same chip as any other file, which opens the asset in the
+// system browser on tap.
+
+export type MediaPreviewProps = {
+  media: MediaAsset;
+  maxHeight?: number;
+  compact?: boolean;
+};
+
+export function MediaPreview({ media, maxHeight = 240, compact }: MediaPreviewProps) {
+  const t = useTheme();
+
+  // SVG needs react-native-svg's SvgUri, an optional peer dependency. Rendering
+  // 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} />;
+
+  return (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: t.color.borderDefault,
+        borderRadius: t.radius.md,
+        backgroundColor: t.color.surfaceSunken,
+        overflow: "hidden",
+      }}
+    >
+      <Image
+        source={{ uri: media.url }}
+        accessibilityLabel={media.repoPath}
+        resizeMode="contain"
+        style={{ width: "100%", height: maxHeight }}
+      />
+    </View>
+  );
+}
+
+// MediaChip is the fallback representation: an icon, the file name, its size,
+// and a tap target that opens the asset externally.
+export function MediaChip({ media }: { media: MediaAsset }) {
+  const t = useTheme();
+  return (
+    <Pressable
+      onPress={() => Linking.openURL(media.url)}
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: t.space(3),
+        padding: t.space(3),
+        borderWidth: 1,
+        borderColor: t.color.borderDefault,
+        borderRadius: t.radius.md,
+        backgroundColor: t.color.surfaceRaised,
+      }}
+    >
+      <Icon name={kindIcon(media.kind)} size={20} color={t.color.textSecondary} />
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <Text variant="body" numberOfLines={1}>
+          {fileName(media.repoPath)}
+        </Text>
+        <Text variant="xs" color="tertiary">
+          {[media.mimeType, formatBytes(media.size), dimensions(media)].filter(Boolean).join(" · ")}
+        </Text>
+      </View>
+      <Icon name="download" size={16} color={t.color.textSecondary} />
+    </Pressable>
+  );
+}
+
+export function fileName(repoPath: string): string {
+  const i = repoPath.lastIndexOf("/");
+  return i >= 0 ? repoPath.slice(i + 1) : repoPath;
+}
+
+export function dimensions(media: MediaAsset): string {
+  return media.width && media.height ? `${media.width}×${media.height}` : "";
+}

package/src/components/MediaPreview.web.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { View } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { MediaAsset, formatBytes, kindIcon } from "../media";
+
+// Web previews. Native renders through MediaPreview.tsx, which falls back to a
+// file chip for the kinds that need DOM media elements.
+
+export type MediaPreviewProps = {
+  media: MediaAsset;
+  // 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?: boolean;
+};
+
+export function MediaPreview({ media, maxHeight = 240, compact }: MediaPreviewProps) {
+  const t = useTheme();
+
+  if (compact) return <MediaChip media={media} />;
+
+  const frame = {
+    borderWidth: 1,
+    borderColor: t.color.borderDefault,
+    borderRadius: t.radius.md,
+    backgroundColor: t.color.surfaceSunken,
+    overflow: "hidden" as const,
+  };
+
+  switch (media.kind) {
+    case "image":
+    case "svg":
+      // Both render through <img>. SVG is loaded as an image rather than inlined
+      // so the document's scripts and styles cannot escape into this page.
+      return (
+        <View style={frame}>
+          <img
+            src={media.url}
+            alt={media.repoPath}
+            style={{
+              display: "block",
+              width: "100%",
+              maxHeight,
+              objectFit: "contain",
+              // A transparent PNG over a light surface should still read as
+              // transparent rather than as white.
+              background: "transparent",
+            }}
+          />
+        </View>
+      );
+
+    case "video":
+      return (
+        <View style={frame}>
+          <video
+            src={media.url}
+            controls
+            // Metadata only: an editor with several video fields should not pull
+            // megabytes for previews the author may never play.
+            preload="metadata"
+            style={{ display: "block", width: "100%", maxHeight }}
+          />
+        </View>
+      );
+
+    case "audio":
+      return (
+        <View style={{ gap: t.space(2) }}>
+          <MediaChip media={media} />
+          <audio src={media.url} controls preload="metadata" style={{ width: "100%" }} />
+        </View>
+      );
+
+    case "pdf":
+      return (
+        <View style={{ gap: t.space(2) }}>
+          <View style={{ ...frame, height: maxHeight }}>
+            {/* <object> degrades to its children when the browser has no PDF
+                viewer, which <iframe> does not. */}
+            <object
+              data={media.url}
+              type="application/pdf"
+              style={{ display: "block", width: "100%", height: "100%" }}
+            >
+              <View style={{ padding: t.space(4), gap: t.space(2), alignItems: "center" }}>
+                <Text variant="xs" color="tertiary">This browser can't display PDFs inline.</Text>
+                <MediaDownloadLink media={media} label="Open PDF" />
+              </View>
+            </object>
+          </View>
+          <MediaDownloadLink media={media} label="Open in new tab" />
+        </View>
+      );
+
+    default:
+      return <MediaChip media={media} />;
+  }
+}
+
+// MediaChip is the fallback representation: an icon, the file name, its size,
+// and a download affordance. It is what every non-previewable kind gets, and
+// what the picker grid uses for anything that is not an image.
+export function MediaChip({ media }: { media: MediaAsset }) {
+  const t = useTheme();
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: t.space(3),
+        padding: t.space(3),
+        borderWidth: 1,
+        borderColor: t.color.borderDefault,
+        borderRadius: t.radius.md,
+        backgroundColor: t.color.surfaceRaised,
+      }}
+    >
+      <Icon name={kindIcon(media.kind)} size={20} color={t.color.textSecondary} />
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <Text variant="body" numberOfLines={1}>
+          {fileName(media.repoPath)}
+        </Text>
+        <Text variant="xs" color="tertiary">
+          {[media.mimeType, formatBytes(media.size), dimensions(media)].filter(Boolean).join(" · ")}
+        </Text>
+      </View>
+      <MediaDownloadLink media={media} />
+    </View>
+  );
+}
+
+function MediaDownloadLink({ media, label }: { media: MediaAsset; label?: string }) {
+  const t = useTheme();
+  return (
+    <a
+      href={media.url}
+      target="_blank"
+      rel="noreferrer"
+      // download hints the filename for kinds a browser would otherwise navigate
+      // to; for previewable kinds the new tab is the more useful behaviour.
+      download={media.kind === "file" ? fileName(media.repoPath) : undefined}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        color: t.color.textSecondary,
+        textDecoration: "none",
+        fontSize: 12,
+      }}
+    >
+      <Icon name="download" size={16} color={t.color.textSecondary} />
+      {label}
+    </a>
+  );
+}
+
+export function fileName(repoPath: string): string {
+  const i = repoPath.lastIndexOf("/");
+  return i >= 0 ? repoPath.slice(i + 1) : repoPath;
+}
+
+export function dimensions(media: MediaAsset): string {
+  return media.width && media.height ? `${media.width}×${media.height}` : "";
+}

package/src/components/NavRow.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import type { IconName } from "../icons";
+
+export type NavRowProps = {
+  label: string;
+  icon?: IconName;
+  count?: number | string;
+  /** Unresolved merge conflicts in this item, shown as a red pill. */
+  conflicts?: number;
+  meta?: string;
+  active?: boolean;
+  onPress?: () => void;
+  showChevron?: boolean;
+  divided?: boolean;
+  /** "compact" for the desktop sidebar, "large" for the mobile list. */
+  size?: "compact" | "large";
+  testID?: string;
+};
+
+export function NavRow({
+  label,
+  icon,
+  count,
+  conflicts,
+  meta,
+  active,
+  onPress,
+  showChevron,
+  divided,
+  size = "compact",
+  testID,
+}: NavRowProps) {
+  const t = useTheme();
+  const large = size === "large";
+  const height = large ? 56 : t.control.lg;
+  const iconSize = large ? 20 : 16;
+
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      // The active row was signalled only by a background colour, which conveys
+      // nothing to a screen reader — and left the current section unannounced.
+      aria-current={active ? "page" : undefined}
+      onPress={onPress}
+      style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
+        height,
+        // Content is inset, but the border sits on the full-width row so the
+        // divider still spans the whole screen on mobile.
+        paddingHorizontal: t.space(large ? 4 : 3),
+        flexDirection: "row",
+        alignItems: "center",
+        gap: t.space(3),
+        borderRadius: large ? 0 : t.radius.md,
+        backgroundColor:
+          active ? t.color.surfaceActive : hovered || pressed ? t.color.surfaceHover : "transparent",
+        borderBottomWidth: divided ? 1 : 0,
+        borderBottomColor: t.color.borderSubtle,
+      })}
+    >
+      {icon ? (
+        <Icon name={icon} size={iconSize} color={active ? t.color.textPrimary : t.color.textSecondary} />
+      ) : null}
+      <Text
+        variant={large ? "bodyLg" : "body"}
+        weight={active ? "medium" : "regular"}
+        color={active ? "primary" : "primary"}
+        style={{ flex: 1 }}
+        numberOfLines={1}
+      >
+        {label}
+      </Text>
+      {meta ? (
+        <Text variant="monoSm" color="tertiary">{meta}</Text>
+      ) : null}
+      {/* A red conflict pill takes the count's place while there are conflicts to
+          resolve — a collection with conflicts is the one that needs attention. */}
+      {conflicts && conflicts > 0 ? (
+        <View
+          testID={testID ? `${testID}-conflicts` : undefined}
+          style={{
+            minWidth: 18, height: 18, paddingHorizontal: t.space(1.5),
+            alignItems: "center", justifyContent: "center",
+            borderRadius: t.radius.pill, backgroundColor: t.color.diffDelBg,
+            borderWidth: 1, borderColor: t.color.diffDelFg,
+          }}
+        >
+          <Text variant="monoSm" weight="semibold" color={t.color.diffDelFg}>{String(conflicts)}</Text>
+        </View>
+      ) : count != null ? (
+        <Text variant={large ? "mono" : "monoSm"} color="tertiary">
+          {String(count)}
+        </Text>
+      ) : null}
+      {showChevron ? (
+        <Icon name="chevronRight" size={large ? 20 : 16} color={t.color.textTertiary} />
+      ) : null}
+    </Pressable>
+  );
+}

package/src/components/Notifications.tsx

@@ -0,0 +1,301 @@
+import React, { useState } from "react";
+import { View, Pressable, ScrollView } from "react-native";
+import { useTheme, useThemeMode, ThemeScope } from "../ThemeProvider";
+import { lightTheme, darkTheme } from "../theme";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+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.
+export type NotificationItem = {
+  id: string;
+  title: string;
+  body?: string;
+  level: "info" | "error";
+  read: boolean;
+  createdAt: string; // ISO 8601
+  author?: string; // display name/email of who caused it, when known
+};
+
+// relativeTime renders a compact age ("just now", "5m", "3h", "2d").
+function relativeTime(iso: string): string {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return "";
+  const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
+  if (secs < 45) return "just now";
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  return `${days}d`;
+}
+
+// A single notification row: an unread dot + level-tinted title, body, and age.
+function NotificationRow({
+  item,
+  divided,
+  onPress,
+}: {
+  item: NotificationItem;
+  divided?: boolean;
+  onPress?: () => void;
+}) {
+  const t = useTheme();
+  const titleColor = item.level === "error" ? t.color.diffDelFg : t.color.textPrimary;
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
+        flexDirection: "row",
+        gap: t.space(2.5),
+        paddingHorizontal: t.space(4),
+        paddingVertical: t.space(3),
+        borderBottomWidth: divided ? 1 : 0,
+        borderBottomColor: t.color.borderSubtle,
+        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>
+          <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>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+export type NotificationBellProps = {
+  notifications: NotificationItem[];
+  unreadCount: number;
+  // Called when the menu opens — the host marks the shown notifications read
+  // and/or refreshes the list.
+  onOpen?: () => void;
+  // Called when "Read more" is pressed — the host navigates to the full screen.
+  onViewAll?: () => void;
+  // Work is running in the background for whatever this bell is scoped to — an
+  // import over the open branch, today. The bell becomes a spinner for as long
+  // as it lasts: the outcome arrives as a notification, so the icon that will
+  // announce it is the honest place to say one is coming. The menu keeps
+  // working throughout; only the glyph changes.
+  busy?: boolean;
+  // What the spinner is waiting on, for the accessibility label. Ignored unless
+  // `busy`.
+  busyLabel?: string;
+  size?: "sm" | "md" | "lg";
+  testID?: string;
+};
+
+// NotificationBell is the bell button with an unread dot and a popup menu
+// showing up to the last 5 notifications plus a "Read more" footer. It renders
+// identically on web (react-native-web) and native.
+export function NotificationBell({
+  notifications,
+  unreadCount,
+  onOpen,
+  onViewAll,
+  busy,
+  busyLabel = "Working",
+  size = "sm",
+  testID,
+}: NotificationBellProps) {
+  const t = useTheme();
+  // The bell button sits in the dark top-bar chrome, but its dropdown should
+  // match the page, not the bar — so the menu renders under the app theme.
+  const { mode } = useThemeMode();
+  const pageTheme = mode === "dark" ? darkTheme : lightTheme;
+  const [open, setOpen] = useState(false);
+  const box = t.control[size];
+  const recent = notifications.slice(0, 5);
+
+  function toggle() {
+    const next = !open;
+    setOpen(next);
+    if (next) onOpen?.();
+  }
+
+  return (
+    <View style={{ position: "relative" }}>
+      <Pressable
+        testID={testID ?? "notification-bell"}
+        accessibilityRole="button"
+        accessibilityLabel={
+          busy
+            ? `${busyLabel}. Notifications`
+            : unreadCount > 0
+              ? `Notifications, ${unreadCount} unread`
+              : "Notifications"
+        }
+        onPress={toggle}
+        style={({ pressed }) => ({
+          width: box,
+          height: box,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: t.radius.md,
+          borderWidth: 1,
+          borderColor: open ? t.color.borderDefault : "transparent",
+          backgroundColor: open || pressed ? t.color.surfaceHover : "transparent",
+        })}
+      >
+        {busy ? (
+          <Spinner testID="notification-busy" size={size === "sm" ? 16 : 18} color={t.color.textSecondary} />
+        ) : (
+          <Icon name="bell" size={size === "sm" ? 16 : 18} color={t.color.textSecondary} />
+        )}
+        {/* The unread dot rides on the spinner too. Unread notifications don't
+            stop being unread because something else is running. */}
+        {unreadCount > 0 ? (
+          <View
+            testID="notification-unread-dot"
+            style={{
+              position: "absolute",
+              top: 5,
+              right: 5,
+              width: 8,
+              height: 8,
+              borderRadius: t.radius.pill,
+              backgroundColor: t.color.diffDelFg,
+              borderWidth: 1,
+              borderColor: t.color.surfacePage,
+            }}
+          />
+        ) : null}
+      </Pressable>
+
+      {open ? (
+        <ThemeScope theme={pageTheme}>
+          {/* Outside-press backdrop. `position: fixed` (web) covers the viewport;
+              on native the bell toggles the menu closed instead. */}
+          <Pressable
+            onPress={() => setOpen(false)}
+            // @ts-expect-error react-native-web accepts position: fixed
+            style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0, zIndex: 40 }}
+          />
+          <View
+            testID="notification-menu"
+            style={{
+              position: "absolute",
+              top: box + t.space(1),
+              right: 0,
+              width: 320,
+              maxWidth: 320,
+              zIndex: 50,
+              backgroundColor: pageTheme.color.surfaceRaised,
+              borderWidth: 1,
+              borderColor: pageTheme.color.borderDefault,
+              borderRadius: t.radius.lg,
+              overflow: "hidden",
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                paddingHorizontal: t.space(4),
+                paddingVertical: t.space(3),
+                borderBottomWidth: 1,
+                borderBottomColor: pageTheme.color.borderSubtle,
+              }}
+            >
+              <Text variant="sm" weight="semibold">Notifications</Text>
+              {unreadCount > 0 ? (
+                <Text variant="monoSm" color="tertiary">{`${unreadCount} unread`}</Text>
+              ) : null}
+            </View>
+
+            {recent.length === 0 ? (
+              <View style={{ padding: t.space(5), alignItems: "center" }}>
+                <Text variant="sm" color="tertiary" testID="notification-empty">You're all caught up</Text>
+              </View>
+            ) : (
+              <ScrollView style={{ maxHeight: 360 }}>
+                {recent.map((n, i) => (
+                  <NotificationRow key={n.id} item={n} divided={i < recent.length - 1} />
+                ))}
+              </ScrollView>
+            )}
+
+            <Pressable
+              testID="notification-read-more"
+              onPress={() => {
+                setOpen(false);
+                onViewAll?.();
+              }}
+              style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
+                paddingVertical: t.space(3),
+                alignItems: "center",
+                borderTopWidth: 1,
+                borderTopColor: pageTheme.color.borderSubtle,
+                backgroundColor: hovered || pressed ? pageTheme.color.surfaceHover : "transparent",
+              })}
+            >
+              <Text variant="sm" weight="medium">Read more</Text>
+            </Pressable>
+          </View>
+        </ThemeScope>
+      ) : null}
+    </View>
+  );
+}
+
+export type NotificationListProps = {
+  notifications: NotificationItem[];
+  emptyMessage?: string;
+  onPressItem?: (item: NotificationItem) => void;
+};
+
+// NotificationList is the full-screen list for a context (workspace/repository),
+// rendered by the app when the user chooses "Read more".
+export function NotificationList({
+  notifications,
+  emptyMessage = "No notifications yet",
+  onPressItem,
+}: NotificationListProps) {
+  const t = useTheme();
+  if (notifications.length === 0) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
+        <Text variant="body" color="tertiary" testID="notification-list-empty">{emptyMessage}</Text>
+      </View>
+    );
+  }
+  return (
+    <ScrollView style={{ flex: 1 }} testID="notification-list">
+      {notifications.map((n, i) => (
+        <NotificationRow
+          key={n.id}
+          item={n}
+          divided={i < notifications.length - 1}
+          onPress={onPressItem ? () => onPressItem(n) : undefined}
+        />
+      ))}
+    </ScrollView>
+  );
+}