@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/portal/portalNav.ts

@@ -0,0 +1,260 @@
+import {
+  Activity,
+  Bell,
+  BookOpen,
+  CalendarDays,
+  Clapperboard,
+  FileSignature,
+  Files,
+  FolderKanban,
+  MessageSquare,
+  Bookmark,
+  Home,
+  Hourglass,
+  Receipt,
+  Settings,
+  ShoppingBag,
+  Ticket,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+import { internalPath } from "../../../runtime/pages";
+import type { PortalAttentionItem, PortalSectionKey, PortalSummary } from "../../headless/portal/usePortal";
+
+/**
+ * The portal's navigation model, kept apart from how it is drawn so the rail,
+ * the bottom bar and the "More" sheet can never disagree about what exists.
+ *
+ * Every section is a page of its own under `/i/account/*`. A section is drawn
+ * only when the person has something in it (the summary's count), or when it is
+ * the page being shown, so a link from an email never lands on a page whose
+ * navigation disowns it.
+ */
+
+export type PortalSection =
+  | "home"
+  | "messages"
+  | "activity"
+  | "files"
+  | "projects"
+  | "bookings"
+  | "invoices"
+  | "documents"
+  | "memberships"
+  | "courses"
+  | "films"
+  | "orders"
+  | "tickets"
+  | "waitlist"
+  | "saved"
+  | "settings"
+  | "notifications";
+
+export type PortalGroup = "start" | "work" | "library" | "account";
+
+export interface PortalNavItem {
+  key: PortalSection;
+  group: PortalGroup;
+  /** Literal i18n key, so the translation spec can see every one of them. */
+  labelKey: string;
+  icon: LucideIcon;
+  href: string;
+  /** The summary count that decides whether it is drawn. Absent means always drawn. */
+  countKey?: PortalSectionKey;
+}
+
+export const PORTAL_ITEMS: readonly PortalNavItem[] = [
+  { key: "home", group: "start", labelKey: "forge.portal_shell.nav_home", icon: Home, href: internalPath("account") },
+  {
+    key: "messages",
+    group: "start",
+    labelKey: "forge.portal_shell.nav_messages",
+    icon: MessageSquare,
+    href: internalPath("account/messages"),
+    countKey: "messages",
+  },
+  {
+    key: "activity",
+    group: "start",
+    labelKey: "forge.portal_shell.nav_activity",
+    icon: Activity,
+    href: internalPath("account/activity"),
+  },
+  {
+    key: "projects",
+    group: "work",
+    labelKey: "forge.portal_shell.nav_projects",
+    icon: FolderKanban,
+    href: internalPath("account/projects"),
+    countKey: "projects",
+  },
+  {
+    key: "bookings",
+    group: "work",
+    labelKey: "forge.portal_shell.nav_bookings",
+    icon: CalendarDays,
+    href: internalPath("account/bookings"),
+    countKey: "bookings",
+  },
+  {
+    key: "invoices",
+    group: "work",
+    labelKey: "forge.portal_shell.nav_invoices",
+    icon: Receipt,
+    href: internalPath("account/invoices"),
+    countKey: "invoices",
+  },
+  {
+    key: "documents",
+    group: "work",
+    labelKey: "forge.portal_shell.nav_documents",
+    icon: FileSignature,
+    href: internalPath("account/documents"),
+    countKey: "documents",
+  },
+  {
+    key: "files",
+    group: "work",
+    labelKey: "forge.portal_shell.nav_files",
+    icon: Files,
+    href: internalPath("account/files"),
+    countKey: "files",
+  },
+  {
+    key: "memberships",
+    group: "library",
+    labelKey: "forge.portal_shell.nav_memberships",
+    icon: Users,
+    href: internalPath("account/memberships"),
+    countKey: "memberships",
+  },
+  {
+    key: "courses",
+    group: "library",
+    labelKey: "forge.portal_shell.nav_courses",
+    icon: BookOpen,
+    href: internalPath("account/courses"),
+    countKey: "courses",
+  },
+  {
+    key: "films",
+    group: "library",
+    labelKey: "forge.portal_shell.nav_films",
+    icon: Clapperboard,
+    href: internalPath("account/films"),
+    countKey: "films",
+  },
+  {
+    key: "orders",
+    group: "library",
+    labelKey: "forge.portal_shell.nav_orders",
+    icon: ShoppingBag,
+    href: internalPath("account/orders"),
+    countKey: "orders",
+  },
+  {
+    key: "tickets",
+    group: "library",
+    labelKey: "forge.portal_shell.nav_tickets",
+    icon: Ticket,
+    href: internalPath("account/tickets"),
+    countKey: "tickets",
+  },
+  {
+    key: "waitlist",
+    group: "library",
+    labelKey: "forge.portal_shell.nav_waitlist",
+    icon: Hourglass,
+    href: internalPath("account/waitlist"),
+    countKey: "waitlist",
+  },
+  {
+    key: "saved",
+    group: "library",
+    labelKey: "forge.portal_shell.nav_saved",
+    icon: Bookmark,
+    href: internalPath("account/saved"),
+    countKey: "saved",
+  },
+  {
+    key: "settings",
+    group: "account",
+    labelKey: "forge.portal_shell.nav_settings",
+    icon: Settings,
+    href: internalPath("account/settings"),
+  },
+  {
+    key: "notifications",
+    group: "account",
+    labelKey: "forge.portal_shell.nav_notifications",
+    icon: Bell,
+    href: internalPath("account/notifications"),
+  },
+];
+
+export const GROUP_LABEL_KEYS: Record<PortalGroup, string | null> = {
+  start: null,
+  work: "forge.portal_shell.group_work",
+  library: "forge.portal_shell.group_library",
+  account: "forge.portal_shell.group_account",
+};
+
+/** Which section an attention item belongs to, for the rail's "needs you" badges. */
+export function attentionSection(item: PortalAttentionItem): PortalSection {
+  switch (item.kind) {
+    case "invoice_due":
+    case "invoice_overdue":
+      return "invoices";
+    case "document_to_sign":
+      return "documents";
+    case "approval_requested":
+      return "projects";
+    case "membership_payment_failed":
+      return "memberships";
+    case "message_unread":
+      return "messages";
+  }
+}
+
+export interface PortalNavModel {
+  /** Groups in display order, each with its drawn items. Empty groups are left out. */
+  groups: Array<{ group: PortalGroup; items: PortalNavItem[] }>;
+  /** How many things in each section need the person. */
+  badges: Partial<Record<PortalSection, number>>;
+  /** The first section of whichever group leads: the bottom bar's second slot. */
+  primary: PortalNavItem | null;
+}
+
+/**
+ * Decide what is drawn and in what order.
+ *
+ * Until the summary arrives only the always-drawn items show, rather than every
+ * section flashing in and then vanishing. The group with the newer activity
+ * leads, so a client sees their work first and a fan their library.
+ */
+export function buildPortalNav(summary: PortalSummary | undefined, active: PortalSection): PortalNavModel {
+  const drawn = PORTAL_ITEMS.filter((item) => {
+    if (!item.countKey || item.key === active) return true;
+    return (summary?.sections[item.countKey] ?? 0) > 0;
+  });
+
+  const workAt = summary?.lastActivity.work ? Date.parse(summary.lastActivity.work) : 0;
+  const libraryAt = summary?.lastActivity.library ? Date.parse(summary.lastActivity.library) : 0;
+  const order: PortalGroup[] =
+    workAt >= libraryAt ? ["start", "work", "library", "account"] : ["start", "library", "work", "account"];
+
+  const groups = order
+    .map((group) => ({ group, items: drawn.filter((item) => item.group === group) }))
+    .filter((g) => g.items.length > 0);
+
+  const badges: Partial<Record<PortalSection, number>> = {};
+  for (const item of summary?.attention ?? []) {
+    const section = attentionSection(item);
+    // An unread conversation counts its messages; everything else counts once.
+    const weight = item.kind === "message_unread" ? Math.max(1, item.unreadCount) : 1;
+    badges[section] = (badges[section] ?? 0) + weight;
+  }
+
+  const lead = groups.find((g) => g.group === "work" || g.group === "library");
+  return { groups, badges, primary: lead?.items[0] ?? null };
+}

package/src/ui/styled/portal/shared.tsx

@@ -0,0 +1,206 @@
+import { useContext, type AnchorHTMLAttributes, type CSSProperties, type MouseEvent, type ReactNode } from "react";
+import { createSharedContext } from "../../../runtime/registry";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { formatWorkDate, formatWorkMoney } from "../../headless/work/useWorkPortal";
+
+/**
+ * What every portal screen shares: how to navigate, and how to print a date.
+ *
+ * The shell provides it once, so a section deep inside a project page can link
+ * to another section without each layer passing `navigate` down by hand.
+ */
+export interface PortalContextValue {
+  navigate: (href: string) => void;
+  formatDate: (value: string | number | Date) => string;
+}
+
+export const defaultPortalDate = (value: string | number | Date) =>
+  formatWorkDate(typeof value === "string" ? value : new Date(value).toISOString());
+
+export const PortalContext = createSharedContext<PortalContextValue>("portal", {
+  navigate: (href) => {
+    if (typeof window !== "undefined") window.location.assign(href);
+  },
+  formatDate: defaultPortalDate,
+});
+
+export const usePortal = () => useContext(PortalContext);
+
+/** Money in the record's OWN currency. An invoice is owed in what it says, never converted. */
+export const portalMoney = (amount: string | number, currency: string) => formatWorkMoney(Number(amount), currency);
+
+/**
+ * A link between portal screens.
+ *
+ * A real `<a href>`, so a new tab and the status bar behave. A plain left-click
+ * becomes an in-app navigation through the host's router instead of a reload.
+ */
+export function PortalLink({
+  href,
+  children,
+  onClick,
+  ...rest
+}: { href: string; children: ReactNode } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">) {
+  const { navigate } = usePortal();
+  return (
+    <a
+      href={href}
+      onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+        event.preventDefault();
+        navigate(href);
+      }}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+/** A screen's title, and the one sentence of state under it when there is one. */
+export function PortalHeading({ title, lead, actions }: { title: ReactNode; lead?: ReactNode; actions?: ReactNode }) {
+  const t = useThemeTokens();
+  return (
+    <header className="fg:mb-6 fg:flex fg:flex-wrap fg:items-end fg:justify-between fg:gap-3">
+      <div className="fg:min-w-0">
+        <h1
+          style={{
+            margin: 0,
+            fontFamily: t.headingFontFamily,
+            fontSize: "clamp(26px, 4vw, 32px)",
+            lineHeight: 1.15,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+            color: t.text,
+          }}
+        >
+          {title}
+        </h1>
+        {lead ? <p style={{ margin: "8px 0 0", color: t.muted, fontSize: 15, lineHeight: 1.5 }}>{lead}</p> : null}
+      </div>
+      {actions ? <div className="fg:flex fg:gap-2">{actions}</div> : null}
+    </header>
+  );
+}
+
+/** A titled block on a screen. The title is a real heading, so the page outline reads. */
+export function PortalBlock({
+  title,
+  aside,
+  children,
+  id,
+}: {
+  title: ReactNode;
+  aside?: ReactNode;
+  children: ReactNode;
+  id?: string;
+}) {
+  const t = useThemeTokens();
+  return (
+    <section id={id} className="fg:mt-10 fg:first:mt-0">
+      <div className="fg:mb-3 fg:flex fg:items-baseline fg:justify-between fg:gap-3">
+        <h2 style={{ margin: 0, fontFamily: t.headingFontFamily, fontSize: 18, fontWeight: 600, color: t.text }}>
+          {title}
+        </h2>
+        {aside ? <div style={{ fontSize: 14 }}>{aside}</div> : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/** Rows divided by hairlines, with no box around each one. */
+export function PortalList({ children, style }: { children: ReactNode; style?: CSSProperties }) {
+  const t = useThemeTokens();
+  return (
+    <ul
+      style={{
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        borderTop: `1px solid ${t.border}`,
+        ...style,
+      }}
+    >
+      {children}
+    </ul>
+  );
+}
+
+export function PortalRow({ children, testId }: { children: ReactNode; testId?: string }) {
+  const t = useThemeTokens();
+  return (
+    <li
+      data-testid={testId}
+      className="fg:flex fg:flex-wrap fg:items-center fg:gap-x-4 fg:gap-y-2 fg:py-4"
+      style={{ borderBottom: `1px solid ${t.border}` }}
+    >
+      {children}
+    </li>
+  );
+}
+
+/** An empty screen says what will appear here and, where there is one, what to do. */
+export function PortalEmpty({ title, body, action }: { title: string; body?: string; action?: ReactNode }) {
+  const t = useThemeTokens();
+  return (
+    <div
+      data-testid="portal-empty"
+      style={{
+        padding: "40px 24px",
+        border: `1px dashed ${t.border}`,
+        borderRadius: t.cornerRadius,
+        textAlign: "center",
+      }}
+    >
+      <p style={{ margin: 0, fontWeight: 600, color: t.text }}>{title}</p>
+      {body ? <p style={{ margin: "6px 0 0", color: t.muted, fontSize: 14 }}>{body}</p> : null}
+      {action ? <div style={{ marginTop: 16 }}>{action}</div> : null}
+    </div>
+  );
+}
+
+/** The one filled button style, in the theme's primary. */
+export function usePortalButtons() {
+  const t = useThemeTokens();
+  const base: CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    minHeight: 38,
+    padding: "8px 16px",
+    borderRadius: t.cornerRadius,
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+  };
+  return {
+    primary: { ...base, background: t.primary, color: t.textPrimary, border: `1px solid ${t.primary}` } as CSSProperties,
+    quiet: { ...base, background: "transparent", color: t.text, border: `1px solid ${t.border}` } as CSSProperties,
+    text: { ...base, minHeight: 0, padding: 0, background: "transparent", color: t.primary, border: "none" } as CSSProperties,
+  };
+}
+
+/** A thin progress line. Theme primary on the theme border. */
+export function PortalProgress({ done, total, label }: { done: number; total: number; label: string }) {
+  const t = useThemeTokens();
+  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+  return (
+    <div
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={pct}
+      style={{ height: 4, borderRadius: 2, background: t.border, overflow: "hidden" }}
+    >
+      <div style={{ width: `${pct}%`, height: "100%", background: t.primary }} />
+    </div>
+  );
+}