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

package/src/suite/components/suite-user-menu.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { LogOut, Settings } from 'iconoir-react';
+
+import { cn } from '../lib/cn';
+import { DropdownMenu, DropdownItem } from '../../components/ui/DropdownMenu';
+
+export interface SuiteUserMenuProps {
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+  /** Destination for the "Profile settings" item. */
+  settingsHref: string;
+  onSignOut: () => void;
+  /** Fallback letter(s) when there is no avatar image. */
+  fallbackInitials?: string;
+  dataTest?: string;
+  className?: string;
+}
+
+function computeInitials(name: string | null | undefined, email: string | null | undefined): string {
+  const source = (name || email || '?').trim();
+  return source
+    .split(/[\s@]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+}
+
+/**
+ * Suite account context menu — one tap on the avatar opens a small menu
+ * with profile settings and sign out. Used in the mobile app bar of every
+ * app so account actions behave identically across the suite (no dedicated
+ * logout icon cluttering the mobile chrome).
+ */
+export function SuiteUserMenu({
+  name,
+  email,
+  image,
+  settingsHref,
+  onSignOut,
+  fallbackInitials,
+  dataTest = 'suite-user-menu',
+  className,
+}: SuiteUserMenuProps) {
+  const router = useRouter();
+  const initials = fallbackInitials ?? computeInitials(name, email);
+
+  const avatar = (
+    <span className="inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted">
+      {image ? (
+        <Image
+          src={image}
+          alt=""
+          width={32}
+          height={32}
+          className="h-8 w-8 rounded-full object-cover"
+          unoptimized
+        />
+      ) : (
+        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand">
+          {initials}
+        </span>
+      )}
+    </span>
+  );
+
+  return (
+    <DropdownMenu
+      trigger={avatar}
+      aria-label="Account menu"
+      align="end"
+      side="bottom"
+      sideOffset={6}
+      collisionPadding={16}
+      modal={false}
+      className={className}
+      data-test={dataTest}
+    >
+      <div className="px-2 py-1.5">
+        <p className="truncate text-sm font-medium text-ph-ink">
+          {name || email || 'Account'}
+        </p>
+        {email ? (
+          <p className="truncate text-xs text-ph-mutedtext">{email}</p>
+        ) : null}
+      </div>
+      <div className="my-1 border-t border-ph-border" />
+      <DropdownItem
+        data-test={`${dataTest}-settings`}
+        onClick={() => router.push(settingsHref)}
+      >
+        <Settings className="h-4 w-4 text-ph-mutedtext" aria-hidden />
+        Profile settings
+      </DropdownItem>
+      <DropdownItem
+        data-test={`${dataTest}-sign-out`}
+        onClick={onSignOut}
+      >
+        <LogOut className="h-4 w-4 text-ph-mutedtext" aria-hidden />
+        Sign out
+      </DropdownItem>
+    </DropdownMenu>
+  );
+}

package/src/suite/components/theme-provider.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+export type SuiteTheme = 'system' | 'light' | 'dark';
+export type SuiteResolvedTheme = 'light' | 'dark';
+
+export interface SuiteThemeConfig {
+  /** localStorage key holding the stored preference. */
+  storageKey: string;
+  /** `data-theme` attribute value for the light theme. */
+  lightThemeId: string;
+  /** `data-theme` attribute value for the dark theme. */
+  darkThemeId: string;
+  /**
+   * Resolved theme to assume when `matchMedia` is unavailable
+   * (server render / pre-hydration).
+   */
+  fallbackTheme: SuiteResolvedTheme;
+  /**
+   * Optional `<meta id="theme-color-meta">` colours, synced whenever the
+   * theme is (re)applied after mount. Omit both to leave the meta tag
+   * untouched.
+   */
+  themeColorLight?: string;
+  themeColorDark?: string;
+}
+
+export interface SuiteThemeContextValue {
+  theme: SuiteTheme;
+  resolvedTheme: SuiteResolvedTheme;
+  setTheme: (theme: SuiteTheme) => void;
+  toggleTheme: () => void;
+}
+
+const SuiteThemeContext = createContext<SuiteThemeContextValue | null>(null);
+
+function systemTheme(fallback: SuiteResolvedTheme): SuiteResolvedTheme {
+  if (typeof window === 'undefined') return fallback;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+}
+
+function resolveTheme(
+  theme: SuiteTheme,
+  fallback: SuiteResolvedTheme,
+): SuiteResolvedTheme {
+  return theme === 'system' ? systemTheme(fallback) : theme;
+}
+
+function applyTheme(
+  theme: SuiteTheme,
+  config: SuiteThemeConfig,
+): SuiteResolvedTheme {
+  const resolved = resolveTheme(theme, config.fallbackTheme);
+  if (typeof document === 'undefined') return resolved;
+  document.documentElement.setAttribute(
+    'data-theme',
+    resolved === 'dark' ? config.darkThemeId : config.lightThemeId,
+  );
+  document.documentElement.classList.toggle('dark', resolved === 'dark');
+  if (config.themeColorLight && config.themeColorDark) {
+    const meta = document.getElementById(
+      'theme-color-meta',
+    ) as HTMLMetaElement | null;
+    if (meta) {
+      meta.content =
+        resolved === 'light' ? config.themeColorLight : config.themeColorDark;
+    }
+  }
+  return resolved;
+}
+
+function readStoredTheme(storageKey: string): SuiteTheme {
+  if (typeof window === 'undefined') return 'system';
+  const stored = localStorage.getItem(storageKey);
+  if (stored === 'light' || stored === 'dark' || stored === 'system')
+    return stored;
+  return 'system';
+}
+
+/**
+ * Theme provider shared by suite apps. Each app's root layout runs a small
+ * boot script that applies `data-theme` before hydration; this provider
+ * adopts that DOM state on mount and owns every post-hydration change (user
+ * picks a theme, or the OS preference flips while set to `system`).
+ *
+ * Apps wrap this with their own `ThemeProvider`/`useTheme` module that pins
+ * the storage key, theme ids and meta colours.
+ */
+export function SuiteThemeProvider({
+  config,
+  children,
+}: {
+  config: SuiteThemeConfig;
+  children: ReactNode;
+}) {
+  const [state, setState] = useState<{
+    theme: SuiteTheme;
+    resolvedTheme: SuiteResolvedTheme;
+  }>(() => {
+    const theme = readStoredTheme(config.storageKey);
+    if (typeof document === 'undefined') {
+      return { theme, resolvedTheme: config.fallbackTheme };
+    }
+    const domTheme = document.documentElement.getAttribute('data-theme');
+    const resolvedTheme =
+      domTheme === config.darkThemeId
+        ? 'dark'
+        : domTheme === config.lightThemeId
+          ? 'light'
+          : resolveTheme(theme, config.fallbackTheme);
+    return { theme, resolvedTheme };
+  });
+  const { theme, resolvedTheme } = state;
+
+  useEffect(() => {
+    if (theme !== 'system') return;
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const update = () => {
+      const resolved = applyTheme('system', config);
+      setState((current) => ({ ...current, resolvedTheme: resolved }));
+    };
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  }, [theme, config]);
+
+  const setTheme = useCallback(
+    (next: SuiteTheme) => {
+      const resolved = applyTheme(next, config);
+      setState({ theme: next, resolvedTheme: resolved });
+      localStorage.setItem(config.storageKey, next);
+    },
+    [config],
+  );
+
+  const toggleTheme = useCallback(() => {
+    setState((prev) => {
+      const next: SuiteTheme =
+        resolveTheme(prev.theme, config.fallbackTheme) === 'dark'
+          ? 'light'
+          : 'dark';
+      const resolved = applyTheme(next, config);
+      localStorage.setItem(config.storageKey, next);
+      return { theme: next, resolvedTheme: resolved };
+    });
+  }, [config]);
+
+  const value = useMemo(
+    () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
+    [theme, resolvedTheme, setTheme, toggleTheme],
+  );
+
+  return (
+    <SuiteThemeContext.Provider value={value}>
+      {children}
+    </SuiteThemeContext.Provider>
+  );
+}
+
+export function useSuiteTheme(): SuiteThemeContextValue {
+  const ctx = useContext(SuiteThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}

package/src/suite/components/today-calibrating.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { Refresh as RefreshCw, SunLight as Sun } from 'iconoir-react';
+
+import { cn } from '../lib/cn';
+import type { SuiteSpinnerComponent } from '../lib/injected';
+
+/**
+ * Today-page loading/empty calibrating state. Apps inject their branded
+ * AppSpinner; `variant` picks the ornamentation style:
+ * - `ring` — large spinner ring + ping behind the sun (TurtleTime/ShellStack)
+ * - `pulse` — pulsing sun only (Tides/Kraken)
+ */
+export function TodayCalibrating({
+  onRetry,
+  retrying = false,
+  className,
+  spinner: Spinner,
+  variant = 'ring',
+  retrySpinnerClassName = 'text-ph-brand',
+}: {
+  onRetry?: () => void;
+  retrying?: boolean;
+  className?: string;
+  spinner: SuiteSpinnerComponent;
+  variant?: 'ring' | 'pulse';
+  retrySpinnerClassName?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'relative flex min-h-[14rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-ph-border bg-ph-surface px-5 py-8 text-center shadow-sm',
+        className,
+      )}
+      data-test="today-calibrating"
+    >
+      <div
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(251,191,36,0.12),transparent_55%)]"
+        aria-hidden
+      />
+      <div className="relative mb-6 flex h-24 w-24 items-center justify-center">
+        {variant === 'ring' ? (
+          <>
+            <Spinner
+              size="lg"
+              className="absolute inset-0 m-auto opacity-40"
+              label="Loading today"
+            />
+            <span
+              className="bg-ph-muted/30 absolute inset-2 animate-ping rounded-full"
+              aria-hidden
+            />
+          </>
+        ) : null}
+        <span className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-ph-border bg-ph-surface text-ph-ink shadow-sm">
+          <Sun
+            className={cn('h-9 w-9', variant === 'pulse' && 'animate-pulse')}
+            strokeWidth={2}
+            aria-hidden
+          />
+        </span>
+      </div>
+      <h2 className="relative text-base font-semibold tracking-tight text-ph-ink sm:text-lg md:text-xl">
+        Calibrating your day
+      </h2>
+      <p className="relative mt-1.5 max-w-sm text-sm sm:text-[15px] leading-relaxed text-ph-subtle">
+        Pulling together tasks, time and updates from your workspace…
+      </p>
+      <div className="relative mt-5 flex gap-1.5" aria-hidden>
+        {[0, 1, 2, 3, 4].map((i) => (
+          <span
+            key={i}
+            className="h-1.5 w-5 animate-pulse rounded-full bg-ph-muted"
+            style={{ animationDelay: `${i * 120}ms` }}
+          />
+        ))}
+      </div>
+      {onRetry ? (
+        <button
+          type="button"
+          onClick={onRetry}
+          disabled={retrying}
+          className="relative mt-6 inline-flex items-center gap-2 rounded-xl border border-ph-border bg-ph-canvas px-4 py-2 text-sm font-medium text-ph-ink transition hover:bg-ph-muted disabled:opacity-60"
+        >
+          {retrying ? (
+            <Spinner size="sm" className={retrySpinnerClassName} />
+          ) : (
+            <RefreshCw className="h-4 w-4" aria-hidden />
+          )}
+          Try again
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/suite/components/today-page-frame.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+/** Full-bleed theme wash + soft clouds; uses ph-* tokens from each app's theme. */
+export function TodayPageFrame({ children }: { children: ReactNode }) {
+  return (
+    <div
+      data-test="today-page"
+      className="today-page-frame relative flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden"
+    >
+      <div
+        className="pointer-events-none absolute inset-x-0 top-0 h-[34rem] overflow-hidden"
+        aria-hidden
+      >
+        <div className="today-page-frame__glow absolute inset-0" />
+        <div className="today-page-frame__sun absolute -right-16 -top-16 h-72 w-72 rounded-full bg-gradient-to-br from-amber-300/30 via-rose-300/20 to-rose-400/10 blur-3xl opacity-60 motion-safe:animate-[pulse_8s_ease-in-out_infinite] motion-reduce:opacity-40" />
+        <div className="today-page-frame__top-fade absolute inset-x-0 top-0 h-64" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--1 absolute -left-24 top-28 h-80 w-[26rem] rounded-[45%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--2 absolute -right-20 top-40 h-72 w-80 rounded-[40%]" />
+        <div className="today-page-frame__cloud today-page-frame__cloud--3 absolute left-[28%] top-[58%] h-64 w-[22rem] rounded-[50%]" />
+      </div>
+      <div className="relative flex-1 px-4 pb-10 pt-5 sm:px-6 sm:pt-6 lg:px-8 [&_.list-row]:min-h-[52px] [&_.list-row]:sm:min-h-[44px]">
+        {children}
+      </div>
+    </div>
+  );
+}