@xenide-io/the-old-ui-theme 0.5.2 → 0.5.3

package/src/suite/components/suite-app-layout.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { type ReactNode, type PointerEvent } from 'react';
+import { type ReactNode, type PointerEvent } from "react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 
 export interface SuiteAppLayoutProps {
   sidebar: ReactNode;
@@ -20,6 +20,8 @@ export interface SuiteAppLayoutProps {
   lockMainScroll?: boolean;
   /** Drag this to resize the sidebar. */
   onStartResize?: (e: PointerEvent<HTMLDivElement>) => void;
+  /** Keyboard equivalent for the resize handle. */
+  onResizeBy?: (delta: number) => void;
   /** Double-click to reset sidebar width. */
   onResetWidth?: () => void;
   className?: string;
@@ -39,18 +41,22 @@ export function SuiteAppLayout({
   collapsed = false,
   lockMainScroll = false,
   onStartResize,
+  onResizeBy,
   onResetWidth,
   className,
 }: SuiteAppLayoutProps) {
   return (
     <div
       data-test="app-shell"
-      className={cn('flex min-h-dvh lg:h-screen lg:overflow-hidden', className)}
+      className={cn(
+        "suite-app-layout flex min-h-dvh lg:h-screen lg:overflow-hidden",
+        className,
+      )}
     >
       <aside
-        className="relative hidden shrink-0 flex-col overflow-hidden border-r border-ph-border transition-[width] duration-200 ease-out lg:flex"
+        className="relative hidden shrink-0 flex-col overflow-visible border-r border-ph-border ease-out lg:flex"
         style={{ width: `${sidebarWidth}px` }}
-        data-collapsed={collapsed ? 'true' : 'false'}
+        data-collapsed={collapsed ? "true" : "false"}
       >
         {sidebar}
         {onStartResize ? (
@@ -58,9 +64,23 @@ export function SuiteAppLayout({
             role="separator"
             aria-orientation="vertical"
             aria-label="Resize sidebar"
+            data-test="sidebar-resize-handle"
+            tabIndex={onResizeBy ? 0 : undefined}
             onPointerDown={onStartResize}
             onDoubleClick={onResetWidth}
-            className="absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+            onKeyDown={(event) => {
+              if (event.key === "Home") {
+                event.preventDefault();
+                onResetWidth?.();
+              } else if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                onResizeBy?.(-16);
+              } else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                onResizeBy?.(16);
+              }
+            }}
+            className="absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize touch-none transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
           />
         ) : null}
       </aside>
@@ -72,10 +92,11 @@ export function SuiteAppLayout({
         <main
           id="main-content"
           tabIndex={-1}
-          data-lock-scroll={lockMainScroll ? 'true' : undefined}
+          data-lock-scroll={lockMainScroll ? "true" : undefined}
           className={cn(
-            'flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none',
-            lockMainScroll ? 'overflow-hidden' : 'overflow-y-auto',
+            "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none",
+            "suite-app-layout__main",
+            lockMainScroll ? "overflow-hidden" : "overflow-y-auto",
           )}
         >
           {children}

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

@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import Link from 'next/link';
-import { type ReactNode } from 'react';
+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';
+import { cn } from "../lib/cn";
+import { Tooltip } from "../../components/ui/Tooltip";
+import type { SuiteNavIcon } from "./suite-bottom-nav";
 
 type CollapsedNode = ReactNode | ((collapsed: boolean) => ReactNode);
 
@@ -38,8 +38,11 @@ export interface SuiteSidebarProps {
   surface?: boolean;
 }
 
-function renderNode(node: CollapsedNode | undefined, collapsed: boolean): ReactNode {
-  if (typeof node === 'function') return node(collapsed);
+function renderNode(
+  node: CollapsedNode | undefined,
+  collapsed: boolean,
+): ReactNode {
+  if (typeof node === "function") return node(collapsed);
   return node;
 }
 
@@ -66,42 +69,41 @@ export function SuiteSidebar({
   return (
     <div
       className={cn(
-        'flex h-full w-full min-w-0 flex-col text-ph-ink',
-        surface ? 'bg-ph-surface' : 'bg-ph-canvas',
+        "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',
+          "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',
+            ? "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')}>
+        <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 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',
+          "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')}>
+        <nav aria-label="Pages" className="shrink-0 space-y-0.5">
+          <div className={cn("mb-3", collapsed && "flex justify-center")}>
             {renderNode(contextSwitcher, collapsed)}
           </div>
 
@@ -114,21 +116,21 @@ export function SuiteSidebar({
                   key={item.label}
                   href={item.href}
                   data-test="nav-link"
-                  aria-current={active ? 'page' : undefined}
+                  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',
+                    "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',
+                      ? "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',
+                      ? "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',
+                      "relative flex h-4 w-4 shrink-0 items-center justify-center",
                       item.iconClassName,
                     )}
                     aria-hidden
@@ -140,15 +142,19 @@ export function SuiteSidebar({
                   </span>
                   <span
                     className={cn(
-                      'relative truncate',
-                      active ? 'text-ph-ink' : 'text-ph-subtle group-hover:text-ph-ink',
-                      collapsed && 'sr-only',
+                      "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>
+                    <span className="relative ml-auto shrink-0">
+                      {item.badge}
+                    </span>
                   ) : null}
                 </Link>
               );
@@ -176,20 +182,22 @@ export function SuiteSidebar({
       {/* Footer */}
       <div
         className={cn(
-          'shrink-0 border-t border-ph-border',
-          surface ? 'bg-ph-surface' : 'bg-ph-canvas',
-          collapsed ? 'p-1.5' : 'p-3',
+          "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',
+            "flex items-center gap-2",
+            collapsed ? "flex-col justify-center" : "min-w-0",
           )}
         >
           {renderNode(userMenu, collapsed)}
-          {!collapsed && footerExtras ? (
-            <div className="ml-auto shrink-0">{renderNode(footerExtras, collapsed)}</div>
+          {footerExtras ? (
+            <div className={cn("shrink-0", collapsed ? "mt-2" : "ml-auto")}>
+              {renderNode(footerExtras, collapsed)}
+            </div>
           ) : null}
         </div>
       </div>

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

@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import { LogOut, Settings } from 'iconoir-react';
+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';
+import { cn } from "../lib/cn";
+import { DropdownMenu, DropdownItem } from "../../components/ui/DropdownMenu";
 
 export interface SuiteUserMenuProps {
   name?: string | null;
@@ -16,26 +16,30 @@ export interface SuiteUserMenuProps {
   onSignOut: () => void;
   /** Fallback letter(s) when there is no avatar image. */
   fallbackInitials?: string;
+  /** Show the old desktop sidebar sign-out action beside the avatar. */
+  showSignOutAction?: boolean;
   dataTest?: string;
   className?: string;
 }
 
-function computeInitials(name: string | null | undefined, email: string | null | undefined): string {
-  const source = (name || email || '?').trim();
+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('')
+    .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).
+ * Suite account context menu — one tap on the avatar opens a small menu with
+ * profile settings and sign out. Desktop sidebars can also expose the legacy
+ * adjacent sign-out action without adding it to mobile chrome.
  */
 export function SuiteUserMenu({
   name,
@@ -44,32 +48,33 @@ export function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
-  dataTest = 'suite-user-menu',
+  showSignOutAction = false,
+  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">
+    <span className="inline-flex h-11 w-11 items-center justify-center rounded-full ring-2 ring-ph-border ring-offset-1 ring-offset-ph-canvas transition-colors hover:bg-ph-muted">
       {image ? (
         <Image
           src={image}
           alt=""
-          width={32}
-          height={32}
-          className="h-8 w-8 rounded-full object-cover"
+          width={40}
+          height={40}
+          className="h-10 w-10 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">
+        <span className="flex h-10 w-10 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand">
           {initials}
         </span>
       )}
     </span>
   );
 
-  return (
+  const accountMenu = (
     <DropdownMenu
       trigger={avatar}
       aria-label="Account menu"
@@ -78,12 +83,12 @@ export function SuiteUserMenu({
       sideOffset={6}
       collisionPadding={16}
       modal={false}
-      className={className}
+      className={showSignOutAction ? undefined : className}
       data-test={dataTest}
     >
       <div className="px-2 py-1.5">
         <p className="truncate text-sm font-medium text-ph-ink">
-          {name || email || 'Account'}
+          {name || email || "Account"}
         </p>
         {email ? (
           <p className="truncate text-xs text-ph-mutedtext">{email}</p>
@@ -97,13 +102,30 @@ export function SuiteUserMenu({
         <Settings className="h-4 w-4 text-ph-mutedtext" aria-hidden />
         Profile settings
       </DropdownItem>
-      <DropdownItem
-        data-test={`${dataTest}-sign-out`}
-        onClick={onSignOut}
-      >
+      <DropdownItem data-test={`${dataTest}-sign-out`} onClick={onSignOut}>
         <LogOut className="h-4 w-4 text-ph-mutedtext" aria-hidden />
         Sign out
       </DropdownItem>
     </DropdownMenu>
   );
+
+  if (!showSignOutAction) {
+    return accountMenu;
+  }
+
+  return (
+    <div className={cn("flex min-w-0 items-center gap-2", className)}>
+      {accountMenu}
+      <button
+        type="button"
+        data-test={`${dataTest}-visible-sign-out`}
+        title="Sign out"
+        aria-label="Sign out"
+        className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring"
+        onClick={onSignOut}
+      >
+        <LogOut className="h-4 w-4" aria-hidden />
+      </button>
+    </div>
+  );
 }

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

@@ -3,7 +3,7 @@
 import type { ReactNode } from "react";
 
 /**
- * Today page content wrapper with soft atmosphere.
+ * Today page content wrapper with a soft themed visual treatment.
  * Does not own scrolling — `#main-content` is the scrollport so sticky headers work.
  * Glow/clouds are absolute and do not create a nested scrollport.
  */

package/src/suite/icons/app-accents.ts

@@ -1,4 +1,4 @@
-import type { SuiteIconName } from './glyphs';
+import type { SuiteIconName } from "./glyphs";
 
 /**
  * Per-app brand colours for the suite icon system — the single place hexes
@@ -8,12 +8,7 @@ import type { SuiteIconName } from './glyphs';
  */
 
 export type SuiteAccentSlug =
-  | 'turtletime'
-  | 'tides'
-  | 'kraken'
-  | 'shellstack'
-  | 'crew'
-  | 'nakama';
+  "turtletime" | "tides" | "kraken" | "shellstack" | "crew" | "nakama";
 
 export interface SuiteAppAccent {
   /** Display name (default aria label for app marks). */
@@ -30,55 +25,55 @@ export interface SuiteAppAccent {
 
 export const APP_ACCENTS: Record<SuiteAccentSlug, SuiteAppAccent> = {
   turtletime: {
-    label: 'TurtleTime',
-    accent: '#3f8f57',
-    tile: '#173521',
-    onTile: '#f7ead0',
-    onTileAccent: '#f3c24e',
+    label: "TurtleTime",
+    accent: "#3f8f57",
+    tile: "#173521",
+    onTile: "#f7ead0",
+    onTileAccent: "#f3c24e",
   },
   tides: {
-    label: 'Tides',
-    accent: '#a63bb5',
-    tile: '#8f2d96',
-    onTile: '#ffffff',
-    onTileAccent: '#bfe3ff',
+    label: "Tides",
+    accent: "#a63bb5",
+    tile: "#8f2d96",
+    onTile: "#ffffff",
+    onTileAccent: "#bfe3ff",
   },
   kraken: {
-    label: 'Kraken',
-    accent: '#737373',
-    tile: '#191919',
-    onTile: '#ffffff',
-    onTileAccent: '#d4d4d4',
+    label: "Kraken",
+    accent: "#737373",
+    tile: "#191919",
+    onTile: "#ffffff",
+    onTileAccent: "#d4d4d4",
   },
   shellstack: {
-    label: 'ShellStack',
-    accent: '#5e5893',
-    tile: '#5e5893',
-    onTile: '#ffffff',
-    onTileAccent: '#c4a7e7',
+    label: "ShellStack",
+    accent: "#5e5893",
+    tile: "#5e5893",
+    onTile: "#ffffff",
+    onTileAccent: "#c4a7e7",
   },
   crew: {
-    label: 'Crew',
-    accent: '#0891b2',
-    tile: '#155e75',
-    onTile: '#ffffff',
-    onTileAccent: '#a5f3fc',
+    label: "Crew",
+    accent: "#0891b2",
+    tile: "#155e75",
+    onTile: "#ffffff",
+    onTileAccent: "#a5f3fc",
   },
   nakama: {
-    label: 'Nakama',
-    accent: '#0891b2',
-    tile: '#155e75',
-    onTile: '#ffffff',
-    onTileAccent: '#a5f3fc',
+    label: "Nakama",
+    accent: "#b8eb44",
+    tile: "#17101f",
+    onTile: "#fff2e2",
+    onTileAccent: "#f54b87",
   },
 };
 
 /** Which glyph represents each app. */
 export const APP_GLYPHS: Record<SuiteAccentSlug, SuiteIconName> = {
-  turtletime: 'timer-shell',
-  tides: 'kanban-wave',
-  kraken: 'squid-doc',
-  shellstack: 'stack-hex',
-  crew: 'crew-bot',
-  nakama: 'crew-bot',
+  turtletime: "timer-shell",
+  tides: "kanban-wave",
+  kraken: "squid-doc",
+  shellstack: "stack-hex",
+  crew: "crew-bot",
+  nakama: "nakama-fist",
 };

package/src/suite/icons/glyph-parts.tsx

@@ -1,14 +1,21 @@
-'use client';
+"use client";
 
-import type { SuiteGlyphElement } from './glyphs';
+import type { SuiteGlyphElement } from "./glyphs";
 
 function GlyphElement({ element }: { element: SuiteGlyphElement }) {
-  const fill = element.filled ? 'currentColor' : 'none';
-  const stroke = element.filled ? 'none' : undefined;
+  const fill = element.filled ? "currentColor" : "none";
+  const stroke = element.filled ? "none" : undefined;
   switch (element.kind) {
-    case 'path':
-      return <path d={element.d} fill={fill} stroke={stroke} />;
-    case 'circle':
+    case "path":
+      return (
+        <path
+          d={element.d}
+          fill={fill}
+          stroke={stroke}
+          transform={element.transform}
+        />
+      );
+    case "circle":
       return (
         <circle
           cx={element.cx}
@@ -18,7 +25,7 @@ function GlyphElement({ element }: { element: SuiteGlyphElement }) {
           stroke={stroke}
         />
       );
-    case 'rect':
+    case "rect":
       return (
         <rect
           x={element.x}
@@ -55,7 +62,7 @@ export function GlyphParts({
       {accented.length > 0 ? (
         <g
           className={accentClassName}
-          style={{ color: 'var(--suite-icon-accent, currentColor)' }}
+          style={{ color: "var(--suite-icon-accent, currentColor)" }}
         >
           {accented.map((el, i) => (
             <GlyphElement key={i} element={el} />