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

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

@@ -6,7 +6,9 @@ import { cn } from '../lib/cn';
 import { SuiteAppIcon } from '../icons/suite-app-icon';
 import { SuiteIcon } from '../icons/suite-icon';
 import type { SuiteIconName } from '../icons/glyphs';
-type LucideIcon = import('react').ComponentType<import('react').SVGProps<SVGSVGElement>>;
+type LucideIcon = import('react').ComponentType<
+  import('react').SVGProps<SVGSVGElement>
+>;
 
 export type SuiteAppSlug = 'shellstack' | 'tides' | 'turtletime' | 'kraken';
 
@@ -117,16 +119,17 @@ export function AnimatedSun({ className }: { className?: string }) {
           <stop offset="1" stopColor="#fb923c" />
         </linearGradient>
       </defs>
-      <g className="origin-center motion-safe:animate-[spin_20s_linear_infinite] motion-reduce:animate-none">
+      {/* ponytail: static rays + soft opacity pulse; spin was too busy for a sticky header */}
+      <g className="origin-center opacity-80 motion-safe:animate-[pulse_8s_ease-in-out_infinite] motion-reduce:animate-none">
         {[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => (
           <line
             key={angle}
             x1="20"
-            y1="4"
+            y1="5"
             x2="20"
             y2="9"
             stroke="#fbbf24"
-            strokeWidth="2"
+            strokeWidth="1.75"
             strokeLinecap="round"
             transform={`rotate(${angle} 20 20)`}
           />
@@ -158,10 +161,9 @@ export function AnimatedMoon({ className }: { className?: string }) {
         d="M27.5 25.5A11 11 0 1 1 14.5 9.6a9 9 0 1 0 13 15.9Z"
         fill="url(#animatedMoonBody)"
       />
-      <g className="motion-safe:animate-[pulse_4s_ease-in-out_infinite] motion-reduce:animate-none">
-        <circle cx="29" cy="10" r="1.4" fill="#c7d2fe" />
-        <circle cx="34" cy="16" r="1" fill="#c7d2fe" />
-        <circle cx="25" cy="5.5" r="0.9" fill="#c7d2fe" />
+      <g className="opacity-70 motion-safe:animate-[pulse_10s_ease-in-out_infinite] motion-reduce:animate-none">
+        <circle cx="29" cy="10" r="1.2" fill="#c7d2fe" />
+        <circle cx="34" cy="16" r="0.9" fill="#c7d2fe" />
       </g>
     </svg>
   );
@@ -190,7 +192,9 @@ export function TodayTopBar({
   appIcon?: ReactNode;
   appName?: string;
 }) {
-  const icon = appIcon ?? <TodayTimeIcon className="h-6 w-6 sm:h-7 sm:w-7 text-amber-500" />;
+  const icon = appIcon ?? (
+    <TodayTimeIcon className="h-6 w-6 sm:h-7 sm:w-7 text-amber-500" />
+  );
   return (
     <header className="flex items-center justify-between gap-4">
       <div className="flex min-w-0 items-center gap-3">
@@ -252,33 +256,287 @@ export function getTodayGreeting(
   const hours = stats?.hours ?? 0;
 
   if (overdueCount > 0) {
-    return `${greeting}. You have ${taskCount} task${taskCount === 1 ? '' : 's'} due today, ${overdueCount} overdue.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? '' : 's'} due today, ${overdueCount} overdue.`;
   }
   if (taskCount > 0) {
-    return `${greeting}. You have ${taskCount} task${taskCount === 1 ? '' : 's'} due today.`;
+    return `${greeting}. ${taskCount} task${taskCount === 1 ? '' : 's'} due today.`;
   }
   if (hours > 0) {
-    return `${greeting}. You logged ${hours} hour${hours === 1 ? '' : 's'} today.`;
+    return `${greeting}. ${hours} hour${hours === 1 ? '' : 's'} logged today.`;
   }
   if (period === 'evening' || period === 'night') {
-    return `${greeting}. Time to wrap up.`;
+    return `${greeting}. Nice work — time to wrap up.`;
   }
-  return `${greeting}. Nothing overdue — take a nice, deep breath.`;
+  return `${greeting}. Clear queue — take a nice, deep breath.`;
 }
 
 export function TodayHero({
   message = 'Take a nice, deep breath.',
+  brief,
+  briefMeta,
 }: {
   message?: ReactNode;
+  /** AI / local focus brief under the greeting. */
+  brief?: ReactNode;
+  briefMeta?: ReactNode;
 }) {
   return (
-    <div className="mt-8 text-center sm:mt-10">
+    <div className="mt-4 sm:mt-6">
       <p
         key={typeof message === 'string' ? message : 'hero'}
-        className="today-hero font-display text-2xl font-bold tracking-tight text-ph-ink sm:text-[1.75rem] sm:leading-tight"
+        className="today-hero max-w-2xl font-display text-lg font-semibold tracking-tight text-ph-ink sm:text-xl sm:leading-snug"
       >
         {message}
       </p>
+      {brief ? (
+        <div className="mt-4 max-w-2xl" data-test="today-focus-brief">
+          <p className="text-[15px] leading-[1.65] text-ph-ink">{brief}</p>
+          {briefMeta ? (
+            <p className="mt-1.5 text-xs text-ph-mutedtext">{briefMeta}</p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export type TodayPrimaryAccent =
+  'tides' | 'turtletime' | 'kraken' | 'shellstack' | 'neutral';
+
+/**
+ * Compact primary CTA for Today — one action per app.
+ * Colours live in suite-skin (.today-primary-action); no idle animation.
+ */
+export function TodayPrimaryAction({
+  label,
+  description,
+  icon,
+  accent = 'neutral',
+  onClick,
+  href,
+  loading = false,
+  active = false,
+  className,
+  dataTest = 'today-primary-action',
+}: {
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  accent?: TodayPrimaryAccent;
+  onClick?: () => void;
+  href?: string;
+  loading?: boolean;
+  /** e.g. timer already running */
+  active?: boolean;
+  className?: string;
+  dataTest?: string;
+}) {
+  const classes = cn(
+    'today-primary-action group relative flex w-full max-w-md items-center gap-3 overflow-hidden rounded-xl px-3.5 py-2.5 text-left transition sm:px-4 sm:py-3',
+    `today-primary-action--${accent}`,
+    active && 'today-primary-action--active',
+    loading && 'pointer-events-none opacity-70',
+    className,
+  );
+
+  const body = (
+    <>
+      <span className="today-primary-action__icon inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10">
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-sm font-semibold tracking-tight sm:text-base">
+          {label}
+        </span>
+        {description ? (
+          <span className="mt-0.5 block text-xs opacity-80 sm:text-sm">
+            {description}
+          </span>
+        ) : null}
+      </span>
+      <span
+        className="today-primary-action__chevron shrink-0 text-base opacity-60 transition group-hover:translate-x-0.5 group-hover:opacity-100"
+        aria-hidden
+      >
+        →
+      </span>
+    </>
+  );
+
+  if (href && !onClick) {
+    return (
+      <a
+        href={href}
+        className={classes}
+        data-test={dataTest}
+        aria-busy={loading}
+      >
+        {body}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={loading}
+      className={classes}
+      data-test={dataTest}
+      aria-busy={loading}
+    >
+      {body}
+    </button>
+  );
+}
+
+export function TodayEmptyAction({
+  title,
+  description,
+  actionLabel,
+  href,
+  onClick,
+  dataTest,
+}: {
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  href?: string;
+  onClick?: () => void;
+  dataTest?: string;
+}) {
+  return (
+    <div
+      className="rounded-lg border border-dashed border-ph-border/80 bg-ph-muted/30 px-4 py-4 text-center"
+      data-test={dataTest}
+    >
+      <p className="text-sm font-semibold text-ph-ink">{title}</p>
+      {description ? (
+        <p className="mx-auto mt-1 max-w-sm text-xs leading-relaxed text-ph-subtle sm:text-sm">
+          {description}
+        </p>
+      ) : null}
+      {actionLabel && (href || onClick) ? (
+        href ? (
+          <a
+            href={href}
+            className="mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline"
+          >
+            {actionLabel}
+          </a>
+        ) : (
+          <button
+            type="button"
+            onClick={onClick}
+            className="mt-2.5 inline-flex text-sm font-semibold text-ph-brand hover:underline"
+          >
+            {actionLabel}
+          </button>
+        )
+      ) : null}
+    </div>
+  );
+}
+
+/** Desktop Today shell: main column + sticky Ask AI / brief aside. */
+export function TodayLayout({
+  primary,
+  main,
+  aside,
+  className,
+}: {
+  primary?: ReactNode;
+  main: ReactNode;
+  aside?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn('mt-5 space-y-6 sm:mt-6', className)}
+      data-test="today-layout"
+    >
+      {primary ? <div className="max-w-md">{primary}</div> : null}
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)] lg:items-start lg:gap-8">
+        <div className="min-w-0 space-y-8">{main}</div>
+        {aside ? (
+          <aside className="space-y-3 lg:sticky lg:top-6 lg:self-start">
+            {aside}
+          </aside>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Today Ask AI CTA — opens the suite assistant (not Kraken Deep Research).
+ * Prefer onClick → openSuiteAskAi(); href is a fallback only.
+ */
+export function TodayAskAiCard({
+  title = 'Ask AI',
+  description = 'Ask about your workspace, draft something, or look a fact up online.',
+  cta = 'Ask',
+  className,
+  onClick,
+  href,
+}: {
+  title?: string;
+  description?: string;
+  cta?: string;
+  className?: string;
+  onClick?: () => void;
+  href?: string;
+}) {
+  const classes = cn(
+    'group flex w-full items-start gap-3.5 rounded-2xl border border-ph-border/70 bg-ph-surface px-4 py-3.5 text-left shadow-[0_1px_12px_-8px_rgba(15,23,42,0.1)] transition hover:border-ph-brand/35 hover:bg-[color-mix(in_oklab,var(--ph-accent)_6%,var(--ph-surface))] sm:px-5',
+    className,
+  );
+
+  const body = (
+    <>
+      <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-ph-brand/15 text-ph-brand shadow-sm ring-1 ring-black/[0.06]">
+        <SuiteIcon name="stack-hex" accent="shellstack" className="h-5 w-5" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+          <span className="font-display text-sm font-bold tracking-tight text-ph-ink">
+            {title}
+          </span>
+          <span className="text-sm font-medium text-ph-brand transition group-hover:underline">
+            {cta}
+          </span>
+        </span>
+        <span className="mt-1 block text-sm leading-relaxed text-ph-subtle">
+          {description}
+        </span>
+      </span>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        className={classes}
+        data-test="today-ask-ai"
+      >
+        {body}
+      </button>
+    );
+  }
+
+  if (href) {
+    return (
+      <a href={href} className={classes} data-test="today-ask-ai">
+        {body}
+      </a>
+    );
+  }
+
+  return (
+    <div className={classes} data-test="today-ask-ai">
+      {body}
     </div>
   );
 }
@@ -301,7 +559,7 @@ export function TodaySection({
   children: ReactNode;
 }) {
   return (
-    <section data-test={testId} className="space-y-4">
+    <section data-test={testId} className="space-y-5">
       <div className="flex items-start justify-between gap-4">
         <div className="flex min-w-0 items-start gap-3.5">
           <span
@@ -340,8 +598,7 @@ export function TodayPanel({
   return (
     <div
       className={cn(
-        'border-ph-border/70 rounded-2xl border bg-ph-surface p-6 shadow-[0_2px_28px_-10px_rgba(15,23,42,0.14)] transition-all duration-200 ease-out sm:p-6',
-        'hover:shadow-[0_8px_32px_-12px_rgba(15,23,42,0.18)] hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:transform-none',
+        'border-ph-border/70 rounded-2xl border bg-ph-surface p-5 shadow-[0_1px_16px_-8px_rgba(15,23,42,0.12)] sm:p-5',
         className,
       )}
     >

package/src/suite/index.ts

@@ -1,5 +1,5 @@
-export { TodayPageFrame } from './components/today-page-frame';
-export * from './components/today-ui';
+export { TodayPageFrame } from "./components/today-page-frame";
+export * from "./components/today-ui";
 export {
   AppSwitcher,
   AppSwitcherChevron,
@@ -8,32 +8,37 @@ export {
   appSwitcherMenuItemClass,
   appSwitcherTriggerClass,
   type SuiteAppEntry,
-} from './components/app-switcher';
+} from "./components/app-switcher";
 export {
   SuiteNotificationBell,
   type SuiteNotification,
   type SuiteNotificationsResponse,
-} from './components/suite-notification-bell';
-export { CommandPaletteHost } from './components/command-palette-host';
-export { DeferredChrome } from './components/deferred-chrome';
-export { SuiteMobileDrawer } from './components/suite-mobile-drawer';
-export { SuiteMobileHeader } from './components/suite-mobile-header';
+} from "./components/suite-notification-bell";
+export { CommandPaletteHost } from "./components/command-palette-host";
+export { DeferredChrome } from "./components/deferred-chrome";
+export { SuiteMobileDrawer } from "./components/suite-mobile-drawer";
+export { SuiteMobileHeader } from "./components/suite-mobile-header";
+export {
+  SuiteSettingsLayout,
+  type SuiteSettingsLayoutProps,
+} from "./components/suite-settings-layout";
 export {
   SuiteUserMenu,
   type SuiteUserMenuProps,
-} from './components/suite-user-menu';
+} from "./components/suite-user-menu";
 export {
   SuiteBottomNav,
   type SuiteBottomNavItem,
-} from './components/suite-bottom-nav';
+} from "./components/suite-bottom-nav";
 export {
   SUITE_APPS,
   SUITE_APP_MAP,
   suiteAppBaseUrl,
+  resolveSuiteNotificationHref,
   type SuiteAppDefinition,
   type SuiteAppSlug,
-} from './lib/apps';
-export { TodayCalibrating } from './components/today-calibrating';
+} from "./lib/apps";
+export { TodayCalibrating } from "./components/today-calibrating";
 export {
   SuiteThemeProvider,
   useSuiteTheme,
@@ -41,11 +46,15 @@ export {
   type SuiteTheme,
   type SuiteThemeConfig,
   type SuiteThemeContextValue,
-} from './components/theme-provider';
+} from "./components/theme-provider";
 export {
   SuiteAiPanel,
+  openSuiteAskAi,
+  SUITE_OPEN_ASK_AI_EVENT,
   type SuiteAiPreset,
-} from './components/ai-panel';
+  type SuiteAiChatMessage,
+  type SuiteAskAiOpenDetail,
+} from "./components/ai-panel";
 export {
   APP_ACCENTS,
   APP_GLYPHS,
@@ -60,7 +69,7 @@ export {
   type SuiteGlyphElement,
   type SuiteIconName,
   type SuiteIconProps,
-} from './icons';
+} from "./icons";
 export type {
   SuiteCommandItem,
   SuiteCommandPaletteComponent,
@@ -68,15 +77,23 @@ export type {
   SuiteDropdownMenuComponent,
   SuiteDropdownMenuProps,
   SuiteSpinnerComponent,
-} from './lib/injected';
-export { useIdleMount } from './lib/use-idle-mount';
-export { cn } from './lib/cn';
+} from "./lib/injected";
+export { useIdleMount } from "./lib/use-idle-mount";
+export {
+  SIDEBAR_COLLAPSE_THRESHOLD,
+  SIDEBAR_DEFAULT_WIDTH,
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_EXPANDED_WIDTH,
+  SIDEBAR_RAIL_WIDTH,
+  useSidebarWidth,
+} from "./lib/use-sidebar-width";
+export { cn } from "./lib/cn";
 export {
   SuiteMotionProvider,
   m,
   SUITE_SPRINGS,
   type SuiteSpringName,
-} from './lib/motion';
+} from "./lib/motion";
 export {
   SuitePage,
   SuitePageHeader,
@@ -86,23 +103,22 @@ export {
   SuiteSectionHeader,
   type SuitePageWidth,
   type SuiteBreadcrumbsProps,
-} from './components/suite-layout';
+} from "./components/suite-layout";
 export {
   SuiteSkeleton,
   SuiteSkeletonCard,
   SuiteSkeletonList,
   SuiteEmptyState,
-} from './components/suite-skeleton';
+} from "./components/suite-skeleton";
 export {
   SuiteSettingsMobileNav,
   type SuiteSettingsNavItem,
-} from './components/suite-settings-mobile-nav';
+} from "./components/suite-settings-mobile-nav";
 export {
   SuiteSidebar,
   type SuiteSidebarNavItem,
-} from './components/suite-sidebar';
+} from "./components/suite-sidebar";
 export {
   SuiteAppLayout,
   type SuiteAppLayoutProps,
-} from './components/suite-app-layout';
-
+} from "./components/suite-app-layout";

package/src/suite/lib/apps.ts

@@ -5,7 +5,11 @@
  * suffixes (`switch-app-${slug}`, `suite-nav-${slug}`).
  */
 
-export type SuiteAppSlug = 'shellstack' | 'tides' | 'turtletime' | 'kraken';
+export type SuiteAppSlug =
+  | 'shellstack'
+  | 'tides'
+  | 'turtletime'
+  | 'kraken';
 
 export interface SuiteAppDefinition {
   slug: SuiteAppSlug;
@@ -45,7 +49,7 @@ export const SUITE_APPS: readonly SuiteAppDefinition[] = [
     name: 'TurtleTime',
     description: 'Time tracking',
     icon: '/turtletime-icon.svg',
-    landing: '/tracker',
+    landing: '/today',
     baseUrlEnv: 'NEXT_PUBLIC_TURTLETIME_URL',
     baseUrlFallback: 'http://localhost:3000',
   },
@@ -73,3 +77,29 @@ export function suiteAppBaseUrl(slug: SuiteAppSlug): string {
     typeof process !== 'undefined' ? process.env[def.baseUrlEnv] : undefined;
   return (fromEnv || def.baseUrlFallback).replace(/\/$/, '');
 }
+
+const SOURCE_APP_SLUG: Record<string, SuiteAppSlug> = {
+  turtletime: 'turtletime',
+  tides: 'tides',
+  kraken: 'kraken',
+  portal: 'shellstack',
+  shellstack: 'shellstack',
+};
+
+/**
+ * Suite notification links are often stored as `/dashboard/...` relative to the
+ * *source* app. Resolving them with the current product origin opens the wrong
+ * app — prefix with that app's base URL instead.
+ */
+export function resolveSuiteNotificationHref(
+  href: string | null | undefined,
+  sourceApp: string | null | undefined,
+): string {
+  const value = (href || '').trim();
+  if (!value) return '';
+  if (/^(https?:|mailto:|\/\/)/i.test(value)) return value;
+  const path = value.startsWith('/') ? value : `/${value}`;
+  const slug = SOURCE_APP_SLUG[(sourceApp || '').toLowerCase()];
+  if (!slug) return path;
+  return `${suiteAppBaseUrl(slug)}${path}`;
+}

package/src/suite/lib/use-sidebar-width.ts

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+
+export const SIDEBAR_RAIL_WIDTH = 56;
+export const SIDEBAR_COLLAPSE_THRESHOLD = 80;
+export const SIDEBAR_MIN_EXPANDED_WIDTH = 180;
+export const SIDEBAR_MAX_WIDTH = 320;
+export const SIDEBAR_DEFAULT_WIDTH = 320;
+
+function clampWidth(width: number): number {
+  return Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_RAIL_WIDTH, width));
+}
+
+function snapWidth(width: number): number {
+  if (width <= SIDEBAR_COLLAPSE_THRESHOLD) return SIDEBAR_RAIL_WIDTH;
+  if (width < SIDEBAR_MIN_EXPANDED_WIDTH) return SIDEBAR_MIN_EXPANDED_WIDTH;
+  return Math.min(SIDEBAR_MAX_WIDTH, width);
+}
+
+/**
+ * Shared suite sidebar resizing: drag below the threshold to collapse,
+ * drag the rail edge out to expand, and double-click to reset.
+ */
+export function useSidebarWidth(storageKey: string) {
+  const [width, setWidth] = useState(SIDEBAR_DEFAULT_WIDTH);
+  const [narrowViewport, setNarrowViewport] = useState(false);
+  const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
+
+  useEffect(() => {
+    let stored: string | null = null;
+    try {
+      stored = localStorage.getItem(storageKey);
+    } catch {
+      // Storage can be unavailable in private or restricted browser contexts.
+    }
+    if (!stored) return;
+    const parsed = Number.parseInt(stored, 10);
+    if (!Number.isNaN(parsed)) {
+      queueMicrotask(() => setWidth(snapWidth(clampWidth(parsed))));
+    }
+  }, [storageKey]);
+
+  useEffect(() => {
+    const media = window.matchMedia("(max-width: 639px)");
+    const sync = () => setNarrowViewport(media.matches);
+    sync();
+    media.addEventListener("change", sync);
+    return () => media.removeEventListener("change", sync);
+  }, []);
+
+  const persist = useCallback(
+    (value: number) => {
+      try {
+        localStorage.setItem(storageKey, String(value));
+      } catch {
+        // A persisted preference is optional; resizing should still work.
+      }
+    },
+    [storageKey],
+  );
+
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      setWidth((current) => {
+        const next = value
+          ? SIDEBAR_RAIL_WIDTH
+          : current <= SIDEBAR_COLLAPSE_THRESHOLD
+            ? SIDEBAR_DEFAULT_WIDTH
+            : snapWidth(current);
+        persist(next);
+        return next;
+      });
+    },
+    [persist],
+  );
+
+  const resetWidth = useCallback(() => {
+    setWidth(SIDEBAR_DEFAULT_WIDTH);
+    persist(SIDEBAR_DEFAULT_WIDTH);
+  }, [persist]);
+
+  const startResize = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const startX = event.clientX;
+      const startWidth = width;
+
+      const onMove = (moveEvent: PointerEvent) => {
+        setWidth(clampWidth(startWidth + moveEvent.clientX - startX));
+      };
+      const onUp = () => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        setWidth((current) => {
+          const snapped = snapWidth(current);
+          persist(snapped);
+          return snapped;
+        });
+      };
+
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    [persist, width],
+  );
+
+  return { width, collapsed, setCollapsed, resetWidth, startResize };
+}