@xenide-io/the-old-ui-theme 0.4.4 → 0.4.8

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 };
+}

package/src/components/sections/AccordionShowcase.tsx

@@ -1,45 +0,0 @@
-import { Accordion, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function AccordionShowcase() {
-  const items = [
-    {
-      id: "1",
-      title: "What is The Old UI?",
-      content: "The Old UI is a comprehensive component library with swappable themes, bespoke icons, and dashboard-ready components built with Tailwind CSS.",
-    },
-    {
-      id: "2",
-      title: "How do I install it?",
-      content: "Simply copy the component files into your project. Each component is self-contained and uses Tailwind CSS utility classes.",
-    },
-    {
-      id: "3",
-      title: "Can I customize themes?",
-      content: "Yes! The Old UI supports multiple themes including TurtleTime, HedgeHog Light, Sheets, and more. Themes are CSS-variable based.",
-    },
-  ];
-
-  const code = `import { Accordion } from "the-old-ui";
-
-<Accordion items={items} allowMultiple defaultOpen={["1"]} />`;
-
-  return (
-    <ShowcaseWrapper
-      title="Accordion"
-      description="Disclosure list with controlled defaults for single or multiple open items."
-      code={code}
-      filename="AccordionExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "items", type: "{ id; title; content }[]", description: "Accordion panels to render." },
-            { name: "allowMultiple", type: "boolean", defaultValue: "false", description: "Allows more than one panel open." },
-            { name: "defaultOpen", type: "string[]", description: "Initial open item ids." },
-          ]}
-        />
-      }
-    >
-      <Accordion items={items} allowMultiple defaultOpen={["1"]} />
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/AlertShowcase.tsx

@@ -1,40 +0,0 @@
-import { Alert, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function AlertShowcase() {
-  const code = `import { Alert } from "@xenide-io/the-old-ui-theme";
-
-<div className="space-y-4">
-  <Alert status="info" title="Pipeline delay" description="Events are flowing; warehouse sync may lag by ~2 minutes." />
-  <Alert status="success" title="Flag shipped" description="The multivariate rollout finished for all environments." />
-  <Alert status="warning" title="Sample rate adjusted" description="Replay capture dropped to 20% until billing resets." />
-  <Alert status="danger" title="Exporter error" description="Snowflake credential rotation failed — check IAM role ARN." />
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Alerts"
-      description="Status messages with built-in icon, title, description, and optional dismiss action."
-      code={code}
-      filename="AlertExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "status", type: "info | success | warning | danger", defaultValue: "info", description: "Controls icon, border, and semantic colour." },
-            { name: "title", type: "string", description: "Short message title." },
-            { name: "description", type: "string", description: "Supporting message copy." },
-            { name: "onDismiss", type: "() => void", description: "Shows a close button when provided." },
-            { name: "icon", type: "ReactNode", description: "Optional custom icon override." },
-            { name: "live", type: "off | polite | assertive", description: "Opt into live-region announcements for content that appears dynamically." },
-          ]}
-        />
-      }
-    >
-      <div className="space-y-4">
-        <Alert status="info" title="Pipeline delay" description="Events are flowing; warehouse sync may lag by ~2 minutes." />
-        <Alert status="success" title="Flag shipped" description="The multivariate rollout finished for all environments." />
-        <Alert status="warning" title="Sample rate adjusted" description="Replay capture dropped to 20% until billing resets." />
-        <Alert status="danger" title="Exporter error" description="Snowflake credential rotation failed — check IAM role ARN." />
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/AvatarShowcase.tsx

@@ -1,80 +0,0 @@
-import { Avatar, AvatarGroup, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function AvatarShowcase() {
-  const code = `import { Avatar, AvatarGroup } from "the-old-ui";
-
-<div className="grid gap-8 lg:grid-cols-2">
-  <div className="ph-panel space-y-4">
-    <h3>Sizes</h3>
-    <Avatar label="XL" size="xl" color="bg-ph-brand text-white" />
-    <Avatar label="LG" size="lg" color="bg-ph-blue text-white" />
-    <Avatar label="MD" size="md" color="bg-ph-purple text-white" />
-    <Avatar label="SM" size="sm" color="bg-ph-toolbar text-ph-ink" />
-  </div>
-
-  <div className="ph-panel space-y-5">
-    <h3>Stacked collaborators</h3>
-    <AvatarGroup>
-      <Avatar label="MJ" color="bg-orange-400 text-orange-950" />
-      <Avatar label="AR" color="bg-sky-500 text-white" />
-      <Avatar label="CK" color="bg-violet-600 text-white" />
-    </AvatarGroup>
-
-    <div className="flex gap-4">
-      <Avatar label="ON" color="bg-emerald-200 text-emerald-950" status="online" />
-      <Avatar label="JD" color="bg-ph-muted text-ph-ink" status="offline" />
-      <Avatar label="CP" color="bg-amber-200 text-amber-950" badge="12" />
-    </div>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Avatars"
-      description="Reusable avatar component with sizes, status indicators, badges, and group stacking."
-      code={code}
-      filename="AvatarExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "label", type: "string", description: "Text initials or label." },
-            { name: "size", type: "xs | sm | md | lg | xl", defaultValue: "md", description: "Avatar size." },
-            { name: "color", type: "string", defaultValue: "bg-ph-brand text-white", description: "Tailwind colour classes." },
-            { name: "status", type: "online | offline | away | busy", description: "Status indicator dot." },
-            { name: "badge", type: "string", description: "Badge count/text." },
-            { name: "icon", type: "ReactNode", description: "Optional icon or image." },
-          ]}
-        />
-      }
-    >
-      <div className="grid gap-8 lg:grid-cols-2">
-        <div className="ph-panel space-y-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Sizes</h3>
-          <div className="flex flex-wrap items-end gap-5">
-            <Avatar label="XL" size="xl" color="bg-ph-brand text-white" />
-            <Avatar label="LG" size="lg" color="bg-ph-blue text-white" />
-            <Avatar label="MD" size="md" color="bg-ph-purple text-white" />
-            <Avatar label="SM" size="sm" color="bg-ph-toolbar text-ph-ink" />
-            <Avatar label="XS" size="xs" color="bg-ph-muted text-ph-ink" />
-          </div>
-        </div>
-
-        <div className="ph-panel space-y-5">
-          <h3 className="text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Stacked collaborators</h3>
-          <AvatarGroup max={3}>
-            <Avatar label="MJ" color="bg-orange-400 text-orange-950" />
-            <Avatar label="AR" color="bg-sky-500 text-white" />
-            <Avatar label="CK" color="bg-violet-600 text-white" />
-            <Avatar label="+9" color="bg-ph-toolbar text-ph-subtle" />
-          </AvatarGroup>
-
-          <div className="flex gap-4">
-            <Avatar label="ON" color="bg-emerald-200 text-emerald-950" status="online" />
-            <Avatar label="JD" color="bg-ph-muted text-ph-ink" status="offline" />
-            <Avatar label="CP" color="bg-amber-200 text-amber-950" badge="12" />
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/BadgeShowcase.tsx

@@ -1,65 +0,0 @@
-import { Badge, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
-
-export default function BadgeShowcase() {
-  const code = `import { Badge } from "@xenide-io/the-old-ui-theme";
-
-<div className="ph-panel space-y-6">
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic</h3>
-    <div className="flex flex-wrap gap-2">
-      <Badge variant="brand">Beta</Badge>
-      <Badge variant="neutral">Archived</Badge>
-      <Badge variant="success">Live</Badge>
-      <Badge variant="warning">Queued</Badge>
-      <Badge variant="danger">Failed</Badge>
-      <Badge variant="info">Docs</Badge>
-    </div>
-  </div>
-  <div>
-    <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Outline</h3>
-    <div className="flex flex-wrap gap-2">
-      <Badge variant="outline">Feature flag</Badge>
-      <Badge variant="outline">Experiment</Badge>
-    </div>
-  </div>
-</div>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Badges"
-      description="Use badges for compact status, category, and product metadata. Defaults work without classes; use props for variants."
-      code={code}
-      filename="BadgeExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "variant", type: "brand | neutral | success | warning | danger | info | outline", defaultValue: "neutral", description: "Controls semantic colour and border treatment." },
-            { name: "size", type: "sm | md", defaultValue: "md", description: "Use sm for dense tables or compact nav." },
-            { name: "className", type: "string", description: "Optional escape hatch for layout-only overrides." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel space-y-6">
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Semantic</h3>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="brand">Beta</Badge>
-            <Badge variant="neutral">Archived</Badge>
-            <Badge variant="success">Live</Badge>
-            <Badge variant="warning">Queued</Badge>
-            <Badge variant="danger">Failed</Badge>
-            <Badge variant="info">Docs</Badge>
-          </div>
-        </div>
-        <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-ph-mutedtext">Outline</h3>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline">Feature flag</Badge>
-            <Badge variant="outline">Experiment</Badge>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}