@xenide-io/the-old-ui-theme 0.3.2 → 0.4.3

package/src/suite/components/suite-notification-bell.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Bell } from 'iconoir-react';
+
+import type { SuiteDropdownMenuComponent } from '../lib/injected';
+
+const POLL_MS = 60_000;
+
+/** Cross-app (suite) notification from `/api/notifications/` — shared across ShellStack apps. */
+export interface SuiteNotification {
+  id: string;
+  title: string;
+  body: string;
+  href: string;
+  kind: string;
+  source_app: string;
+  read_at: string | null;
+  created_at: string;
+  workspace: string | null;
+  organisation: string | null;
+}
+
+export interface SuiteNotificationsResponse {
+  notifications: SuiteNotification[];
+  unread_count: number;
+}
+
+function timeAgo(iso: string): string {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return '';
+  const secs = Math.max(0, Math.round((Date.now() - then) / 1000));
+  if (secs < 60) return 'just now';
+  const mins = Math.round(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.round(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.round(hrs / 24)}d ago`;
+}
+
+export function SuiteNotificationBell({
+  fetchNotifications,
+  markRead,
+  markAllRead,
+  dropdownMenu: DropdownMenu,
+  cacheKey = 'suite-notifications-cache',
+}: {
+  fetchNotifications: () => Promise<SuiteNotificationsResponse>;
+  markRead: (id: string) => Promise<unknown>;
+  markAllRead: () => Promise<unknown>;
+  dropdownMenu: SuiteDropdownMenuComponent;
+  /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
+  cacheKey?: string | null;
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState<SuiteNotification[]>([]);
+  const [unread, setUnread] = useState(0);
+
+  const load = useCallback(async () => {
+    try {
+      const data = await fetchNotifications();
+      setItems(data.notifications);
+      setUnread(data.unread_count);
+      // Stale-while-revalidate: keep last inbox for instant paint next visit.
+      if (cacheKey) {
+        try {
+          sessionStorage.setItem(
+            cacheKey,
+            JSON.stringify({
+              notifications: data.notifications,
+              unread_count: data.unread_count,
+            }),
+          );
+        } catch {
+          // ignore quota / private mode
+        }
+      }
+    } catch {
+      // Non-critical chrome — never surface bell errors to the user.
+    }
+  }, [fetchNotifications, cacheKey]);
+
+  useEffect(() => {
+    if (cacheKey) {
+      queueMicrotask(() => {
+        try {
+          const raw = sessionStorage.getItem(cacheKey);
+          if (raw) {
+            const cached = JSON.parse(raw) as {
+              notifications?: SuiteNotification[];
+              unread_count?: number;
+            };
+            if (Array.isArray(cached.notifications)) {
+              setItems(cached.notifications);
+              setUnread(cached.unread_count ?? 0);
+            }
+          }
+        } catch {
+          // ignore
+        }
+      });
+    }
+    const kick = window.setTimeout(() => void load(), 0);
+    const id = window.setInterval(() => void load(), POLL_MS);
+    return () => {
+      window.clearTimeout(kick);
+      window.clearInterval(id);
+    };
+  }, [load, cacheKey]);
+
+  const onOpenChange = useCallback(
+    (next: boolean) => {
+      setOpen(next);
+      if (next) void load();
+    },
+    [load],
+  );
+
+  const openItem = useCallback(
+    async (n: SuiteNotification) => {
+      setOpen(false);
+      if (!n.read_at) {
+        setItems((prev) =>
+          prev.map((i) =>
+            i.id === n.id ? { ...i, read_at: new Date().toISOString() } : i,
+          ),
+        );
+        setUnread((u) => Math.max(0, u - 1));
+        try {
+          await markRead(n.id);
+        } catch {
+          // ignore
+        }
+      }
+      if (!n.href) return;
+      if (/^https?:\/\//i.test(n.href)) window.location.assign(n.href);
+      else router.push(n.href);
+    },
+    [router, markRead],
+  );
+
+  const markAll = useCallback(async () => {
+    setItems((prev) =>
+      prev.map((i) => ({
+        ...i,
+        read_at: i.read_at ?? new Date().toISOString(),
+      })),
+    );
+    setUnread(0);
+    try {
+      await markAllRead();
+    } catch {
+      // ignore
+    }
+  }, [markAllRead]);
+
+  return (
+    <DropdownMenu
+      aria-label="Notifications"
+      align="end"
+      panelClassName="w-80 overflow-hidden p-0"
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger={
+        <span className="relative inline-flex h-9 w-9 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+          <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
+          {unread > 0 ? (
+            <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-ph-surface">
+              {unread > 9 ? '9+' : unread}
+            </span>
+          ) : null}
+        </span>
+      }
+    >
+      <div className="flex items-center justify-between border-b border-ph-border px-3 py-2">
+        <span className="text-sm font-semibold text-ph-ink">Notifications</span>
+        {unread > 0 ? (
+          <button
+            type="button"
+            onClick={markAll}
+            className="text-xs font-medium text-ph-brand hover:underline"
+          >
+            Mark all read
+          </button>
+        ) : null}
+      </div>
+      <div className="max-h-80 overflow-y-auto py-1">
+        {items.length === 0 ? (
+          <p className="px-3 py-6 text-center text-sm text-ph-mutedtext">
+            You&apos;re all caught up.
+          </p>
+        ) : (
+          items.map((n) => (
+            <button
+              key={n.id}
+              type="button"
+              onClick={() => void openItem(n)}
+              className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
+            >
+              <span className="flex items-center gap-2">
+                {!n.read_at ? (
+                  <span
+                    className="h-1.5 w-1.5 shrink-0 rounded-full bg-ph-brand"
+                    aria-hidden
+                  />
+                ) : null}
+                <span className="truncate text-sm font-medium text-ph-ink">
+                  {n.title}
+                </span>
+              </span>
+              {n.body ? (
+                <span className="line-clamp-2 text-xs text-ph-mutedtext">
+                  {n.body}
+                </span>
+              ) : null}
+              <span className="text-[11px] uppercase tracking-wide text-ph-subtle">
+                {n.source_app} · {timeAgo(n.created_at)}
+              </span>
+            </button>
+          ))
+        )}
+      </div>
+    </DropdownMenu>
+  );
+}

package/src/suite/components/suite-settings-mobile-nav.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { isValidElement, type ComponentType, type ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface SuiteSettingsNavItem {
+  label: string;
+  href: string;
+  icon: ComponentType<{ className?: string; 'aria-hidden'?: boolean }> | ReactNode;
+  testId?: string;
+}
+
+interface SuiteSettingsMobileNavProps {
+  items: SuiteSettingsNavItem[];
+  activeHref: string;
+  onSelect: (href: string) => void;
+  dataTest?: string;
+}
+
+/**
+ * Horizontal scrollable settings nav for mobile.
+ * Replaces a native <select> with icon+label pills that are easier to scan,
+ * meet 44px touch targets, and preserve visual hierarchy (Law of UX: Hick's Law,
+ * Recognition over Recall).
+ */
+export function SuiteSettingsMobileNav({
+  items,
+  activeHref,
+  onSelect,
+  dataTest,
+}: SuiteSettingsMobileNavProps) {
+  return (
+    <nav
+      data-test={dataTest}
+      aria-label="Settings sections"
+      className="-mx-4 px-4 lg:hidden"
+    >
+      <div className="flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {items.map((item) => {
+          const Icon = item.icon as ComponentType<{
+            className?: string;
+            'aria-hidden'?: boolean;
+          }>;
+          const active =
+            activeHref === item.href || activeHref.startsWith(`${item.href}/`);
+          const iconNode = isValidElement(item.icon) ? (
+            item.icon
+          ) : (
+            <Icon
+              className={cn(
+                'h-4 w-4 shrink-0 transition',
+                active ? 'text-ph-surface' : 'text-ph-mutedtext',
+              )}
+              aria-hidden
+            />
+          );
+          return (
+            <button
+              key={item.href}
+              type="button"
+              data-test={item.testId}
+              onClick={() => onSelect(item.href)}
+              aria-current={active ? 'page' : undefined}
+              className={cn(
+                'group relative flex shrink-0 snap-start items-center gap-2 rounded-full px-3.5 py-2.5 text-sm font-medium transition',
+                'min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand',
+                active
+                  ? 'bg-ph-ink text-ph-surface shadow-sm'
+                  : 'bg-ph-surface text-ph-subtle ring-1 ring-ph-border hover:bg-ph-muted hover:text-ph-ink',
+              )}
+            >
+              {iconNode}
+              <span className="whitespace-nowrap">{item.label}</span>
+              {active ? (
+                <span className="absolute inset-x-0 -bottom-3 h-0.5 rounded-full bg-ph-ink lg:hidden" />
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

package/src/suite/components/suite-sidebar.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import Link from 'next/link';
+import { type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Tooltip } from '../../components/ui/Tooltip';
+import type { SuiteNavIcon } from './suite-bottom-nav';
+
+type CollapsedNode = ReactNode | ((collapsed: boolean) => ReactNode);
+
+export interface SuiteSidebarNavItem {
+  href: string;
+  label: string;
+  icon: SuiteNavIcon;
+  active?: boolean;
+  onClick?: () => void;
+  badge?: ReactNode;
+  /** Optional colour class for the nav icon. */
+  iconClassName?: string;
+}
+
+export interface SuiteSidebarProps {
+  /** Optional custom app switcher node, or a function of collapsed state. */
+  appSwitcher?: CollapsedNode;
+  /** Workspace/org/project switcher rendered below the app switcher. */
+  contextSwitcher: CollapsedNode;
+  navItems: SuiteSidebarNavItem[];
+  /** Optional secondary nav / tree rendered below primary nav. */
+  secondaryNav?: ReactNode;
+  userMenu: CollapsedNode;
+  notificationBell?: CollapsedNode;
+  /** Optional extra footer content placed next to the user menu. */
+  footerExtras?: CollapsedNode;
+  collapsed?: boolean;
+  className?: string;
+  /** Use the richer surface background instead of canvas. */
+  surface?: boolean;
+}
+
+function renderNode(node: CollapsedNode | undefined, collapsed: boolean): ReactNode {
+  if (typeof node === 'function') return node(collapsed);
+  return node;
+}
+
+/**
+ * Standardised ShellStack sidebar. Matches the original TurtleTime layout
+ * so the chrome feels familiar across all apps:
+ * - app switcher + notification bell in a compact header
+ * - workspace switcher at the top of the nav body
+ * - primary nav items styled like the original NavLink
+ * - avatar + optional logout in the footer
+ */
+export function SuiteSidebar({
+  appSwitcher,
+  contextSwitcher,
+  navItems,
+  secondaryNav,
+  userMenu,
+  notificationBell,
+  footerExtras,
+  collapsed = false,
+  className,
+  surface = false,
+}: SuiteSidebarProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-full w-full min-w-0 flex-col text-ph-ink',
+        surface ? 'bg-ph-surface' : 'bg-ph-canvas',
+        className,
+      )}
+    >
+      {/* Header */}
+      <div
+        className={cn(
+          'flex shrink-0 border-b border-ph-border',
+          surface ? 'bg-ph-surface' : 'bg-ph-canvas',
+          collapsed
+            ? 'flex-col items-center gap-1 px-1 py-2'
+            : 'h-14 items-center justify-between gap-2 px-3',
+        )}
+      >
+        <div className={cn('min-w-0', collapsed ? 'shrink-0' : 'flex-1')}>
+          {renderNode(appSwitcher, collapsed)}
+        </div>
+        {collapsed ? null : (
+          <div className="shrink-0">{renderNode(notificationBell, collapsed)}</div>
+        )}
+      </div>
+
+      {/* Nav body */}
+      <div
+        className={cn(
+          'flex min-h-0 flex-1 flex-col overflow-y-auto',
+          surface ? 'bg-ph-surface' : 'bg-ph-canvas',
+          collapsed ? 'px-1.5 py-2' : 'p-2',
+        )}
+      >
+        <nav
+          aria-label="Pages"
+          className="shrink-0 space-y-0.5"
+        >
+          <div className={cn('mb-3', collapsed && 'flex justify-center')}>
+            {renderNode(contextSwitcher, collapsed)}
+          </div>
+
+          <div className="space-y-0.5">
+            {navItems.map((item) => {
+              const Icon = item.icon;
+              const active = Boolean(item.active);
+              const link = (
+                <Link
+                  key={item.label}
+                  href={item.href}
+                  data-test="nav-link"
+                  aria-current={active ? 'page' : undefined}
+                  onClick={item.onClick}
+                  className={cn(
+                    'group relative flex items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors',
+                    active
+                      ? 'bg-ph-muted'
+                      : 'text-ph-subtle hover:bg-ph-muted hover:text-ph-ink',
+                    collapsed
+                      ? 'mx-auto size-10 shrink-0 justify-center gap-0 px-0 py-0'
+                      : 'w-full px-2.5 py-2',
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'relative flex h-4 w-4 shrink-0 items-center justify-center',
+                      item.iconClassName,
+                    )}
+                    aria-hidden
+                  >
+                    <Icon
+                      className="h-full w-full"
+                      strokeWidth={active ? 2 : 1.75}
+                    />
+                  </span>
+                  <span
+                    className={cn(
+                      'relative truncate',
+                      active ? 'text-ph-ink' : 'text-ph-subtle group-hover:text-ph-ink',
+                      collapsed && 'sr-only',
+                    )}
+                  >
+                    {item.label}
+                  </span>
+                  {!collapsed && item.badge ? (
+                    <span className="relative ml-auto shrink-0">{item.badge}</span>
+                  ) : null}
+                </Link>
+              );
+              return collapsed ? (
+                <Tooltip key={item.label} content={item.label} side="right">
+                  {link}
+                </Tooltip>
+              ) : (
+                link
+              );
+            })}
+          </div>
+        </nav>
+
+        {secondaryNav ? (
+          <div
+            className="min-h-0 flex-1"
+            data-test="suite-sidebar-secondary-nav"
+          >
+            {secondaryNav}
+          </div>
+        ) : null}
+      </div>
+
+      {/* Footer */}
+      <div
+        className={cn(
+          'shrink-0 border-t border-ph-border',
+          surface ? 'bg-ph-surface' : 'bg-ph-canvas',
+          collapsed ? 'p-1.5' : 'p-3',
+        )}
+      >
+        <div
+          className={cn(
+            'flex items-center gap-2',
+            collapsed && 'justify-center',
+          )}
+        >
+          {renderNode(userMenu, collapsed)}
+          {!collapsed && footerExtras ? (
+            <div className="ml-auto shrink-0">{renderNode(footerExtras, collapsed)}</div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/suite/components/suite-skeleton.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+interface SuiteSkeletonProps {
+  className?: string;
+  lines?: number;
+  circle?: boolean;
+  width?: string;
+}
+
+/**
+ * Shared skeleton using the-old-ui-theme `ph-skeleton` shimmer class.
+ * The shimmer animation is defined in the theme, so this component is
+ * framework-agnostic and works in any app that imports the theme.
+ */
+export function SuiteSkeleton({
+  className,
+  lines = 1,
+  circle,
+  width,
+}: SuiteSkeletonProps) {
+  return (
+    <div
+      className={cn('space-y-2', circle ? 'flex flex-col items-center' : '')}
+      aria-hidden
+    >
+      {Array.from({ length: lines }).map((_, index) => (
+        <div
+          key={index}
+          className="animate-[skeleton-stagger_0.6s_ease-out_both]"
+          style={{ animationDelay: `${index * 80}ms` }}
+        >
+          <div
+            className={cn(
+              'ph-skeleton',
+              circle ? 'h-10 w-10 rounded-full' : 'h-3',
+              className,
+            )}
+            style={
+              !circle
+                ? {
+                    width:
+                      width ?? `${70 + (index % 3) * 15}%`,
+                  }
+                : undefined
+            }
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SuiteSkeletonCard({
+  className,
+  rows = 3,
+  header = true,
+}: {
+  className?: string;
+  rows?: number;
+  header?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        'ph-skeleton-card animate-[skeleton-stagger_0.5s_ease-out_both] rounded-2xl border border-ph-border/70 bg-ph-surface p-6 shadow-sm',
+        className,
+      )}
+      aria-hidden
+    >
+      {header ? (
+        <div
+          className="mb-5 flex items-center gap-3 animate-[skeleton-stagger_0.5s_ease-out_both]"
+          style={{ animationDelay: '100ms' }}
+        >
+          <div className="ph-skeleton h-10 w-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <div className="ph-skeleton h-4 w-1/3" />
+            <div className="ph-skeleton h-3 w-1/2" />
+          </div>
+        </div>
+      ) : null}
+      <div className="space-y-3">
+        {Array.from({ length: rows }).map((_, index) => (
+          <div
+            key={index}
+            className="animate-[skeleton-stagger_0.5s_ease-out_both]"
+            style={{ animationDelay: `${200 + index * 80}ms` }}
+          >
+            <div
+              className="ph-skeleton h-3"
+              style={{ width: `${70 + (index % 3) * 15}%` }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function SuiteSkeletonList({
+  className,
+  items = 4,
+}: {
+  className?: string;
+  items?: number;
+}) {
+  return (
+    <div className={cn('space-y-3', className)} aria-hidden>
+      {Array.from({ length: items }).map((_, index) => (
+        <div
+          key={index}
+          className="animate-[skeleton-stagger_0.6s_ease-out_both]"
+          style={{ animationDelay: `${index * 100}ms` }}
+        >
+          <div className="flex items-center gap-3 rounded-xl border border-ph-border/60 bg-ph-surface p-4">
+            <div className="ph-skeleton h-10 w-10 rounded-lg" />
+            <div className="min-w-0 flex-1 space-y-2">
+              <div className="ph-skeleton h-3.5 w-3/4" />
+              <div className="ph-skeleton h-3 w-1/2" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface SuiteEmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+  size?: 'sm' | 'md';
+}
+
+/**
+ * Branded empty state with a soft gradient orb and clear action affordance.
+ * Uses the app icon when available so empty states feel native to each app.
+ */
+export function SuiteEmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  size = 'md',
+}: SuiteEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden rounded-2xl border border-ph-border/80 bg-ph-surface text-center',
+        size === 'sm' ? 'px-5 py-8' : 'px-6 py-12 sm:px-10 sm:py-16',
+        className,
+      )}
+    >
+      <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-60" aria-hidden>
+        <div className="absolute -left-10 -top-10 h-40 w-40 rounded-full bg-ph-brand/10 blur-3xl" />
+        <div className="absolute -bottom-10 -right-10 h-40 w-40 rounded-full bg-ph-accent/10 blur-3xl" />
+      </div>
+      <div className="relative">
+        {icon ? (
+          <div className="mx-auto mb-4 inline-flex items-center justify-center rounded-2xl bg-ph-muted p-3 shadow-sm ring-1 ring-black/[0.06]">
+            {icon}
+          </div>
+        ) : null}
+        <h3
+          className={cn(
+            'font-semibold text-ph-ink',
+            size === 'sm' ? 'text-base' : 'text-lg',
+          )}
+        >
+          {title}
+        </h3>
+        {description ? (
+          <p className="mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ph-subtle">
+            {description}
+          </p>
+        ) : null}
+        {action ? (
+          <div className="mt-5 flex flex-wrap items-center justify-center gap-2">
+            {action}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}