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

package/dist/suite.mjs

@@ -1,3 +1,8 @@
+import {
+  DropdownItem,
+  DropdownMenu,
+  Tooltip
+} from "./chunk-G53YLHVE.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -755,12 +760,12 @@ function AppSwitcher({
   mark,
   title,
   collapsed = false,
-  dropdownMenu: DropdownMenu,
-  dropdownItem: DropdownItem
+  dropdownMenu: DropdownMenu2,
+  dropdownItem: DropdownItem2
 }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx6(
-    DropdownMenu,
+    DropdownMenu2,
     {
       "aria-label": "Switch application",
       className: collapsed ? "w-11 shrink-0" : "min-w-0 flex-1",
@@ -787,7 +792,7 @@ function AppSwitcher({
       children: /* @__PURE__ */ jsxs6("div", { className: "p-1", "data-test": "app-switcher-menu", children: [
         /* @__PURE__ */ jsx6("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
         apps.map((app) => /* @__PURE__ */ jsx6(
-          DropdownItem,
+          DropdownItem2,
           {
             "data-test": `switch-app-${app.slug}`,
             onMouseDown: (e) => e.preventDefault(),
@@ -848,7 +853,7 @@ function SuiteNotificationBell({
   fetchNotifications,
   markRead,
   markAllRead,
-  dropdownMenu: DropdownMenu,
+  dropdownMenu: DropdownMenu2,
   cacheKey = "suite-notifications-cache"
 }) {
   const router = useRouter();
@@ -943,7 +948,7 @@ function SuiteNotificationBell({
     }
   }, [markAllRead]);
   return /* @__PURE__ */ jsxs7(
-    DropdownMenu,
+    DropdownMenu2,
     {
       "aria-label": "Notifications",
       align: "end",
@@ -1228,10 +1233,9 @@ function SuiteMobileHeader({
 
 // src/suite/components/suite-user-menu.tsx
 import Image2 from "next/image";
-import Link from "next/link";
-import { useState as useState6 } from "react";
+import { useRouter as useRouter2 } from "next/navigation";
 import { LogOut, Settings } from "iconoir-react";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function computeInitials(name, email) {
   const source = (name || email || "?").trim();
   return source.split(/[\s@]+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
@@ -1246,94 +1250,67 @@ function SuiteUserMenu({
   dataTest = "suite-user-menu",
   className
 }) {
-  const [open, setOpen] = useState6(false);
+  const router = useRouter2();
   const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
-  return /* @__PURE__ */ jsxs10("div", { className: cn("relative", className), "data-test": dataTest, children: [
-    /* @__PURE__ */ jsx12(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Account menu",
-        "aria-expanded": open,
-        "aria-haspopup": "menu",
-        title: "Account",
-        onClick: () => setOpen((value) => !value),
-        className: "suite-press inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
-        children: image ? /* @__PURE__ */ jsx12(
-          Image2,
+  const avatar = /* @__PURE__ */ jsx12("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted", children: image ? /* @__PURE__ */ jsx12(
+    Image2,
+    {
+      src: image,
+      alt: "",
+      width: 32,
+      height: 32,
+      className: "h-8 w-8 rounded-full object-cover",
+      unoptimized: true
+    }
+  ) : /* @__PURE__ */ jsx12("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand", children: initials }) });
+  return /* @__PURE__ */ jsxs10(
+    DropdownMenu,
+    {
+      trigger: avatar,
+      "aria-label": "Account menu",
+      align: "end",
+      side: "bottom",
+      sideOffset: 6,
+      collisionPadding: 16,
+      modal: false,
+      className,
+      "data-test": dataTest,
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "px-2 py-1.5", children: [
+          /* @__PURE__ */ jsx12("p", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
+          email ? /* @__PURE__ */ jsx12("p", { className: "truncate text-xs text-ph-mutedtext", children: email }) : null
+        ] }),
+        /* @__PURE__ */ jsx12("div", { className: "my-1 border-t border-ph-border" }),
+        /* @__PURE__ */ jsxs10(
+          DropdownItem,
           {
-            src: image,
-            alt: "",
-            width: 32,
-            height: 32,
-            className: "h-8 w-8 rounded-full object-cover",
-            unoptimized: true
+            "data-test": `${dataTest}-settings`,
+            onClick: () => router.push(settingsHref),
+            children: [
+              /* @__PURE__ */ jsx12(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+              "Profile settings"
+            ]
           }
-        ) : /* @__PURE__ */ jsx12("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand", children: initials })
-      }
-    ),
-    open ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx12(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Close account menu",
-          className: "fixed inset-0 z-40 cursor-default",
-          onClick: () => setOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsxs10(
-        "div",
-        {
-          role: "menu",
-          className: "absolute right-0 top-full z-50 mt-1 w-56 rounded-xl border border-ph-border bg-ph-surface p-1 shadow-xl",
-          children: [
-            /* @__PURE__ */ jsxs10("div", { className: "px-2 py-1.5", children: [
-              /* @__PURE__ */ jsx12("p", { className: "truncate text-sm font-medium text-ph-ink", children: name || email || "Account" }),
-              email ? /* @__PURE__ */ jsx12("p", { className: "truncate text-xs text-ph-mutedtext", children: email }) : null
-            ] }),
-            /* @__PURE__ */ jsx12("div", { className: "my-1 border-t border-ph-border" }),
-            /* @__PURE__ */ jsxs10(
-              Link,
-              {
-                role: "menuitem",
-                href: settingsHref,
-                "data-test": `${dataTest}-settings`,
-                className: "flex min-h-11 items-center gap-2 rounded-lg px-2 text-sm text-ph-ink transition-colors hover:bg-ph-muted",
-                onClick: () => setOpen(false),
-                children: [
-                  /* @__PURE__ */ jsx12(Settings, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
-                  "Profile settings"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs10(
-              "button",
-              {
-                role: "menuitem",
-                type: "button",
-                "data-test": `${dataTest}-sign-out`,
-                className: "flex min-h-11 w-full items-center gap-2 rounded-lg px-2 text-left text-sm text-ph-ink transition-colors hover:bg-ph-muted",
-                onClick: () => {
-                  setOpen(false);
-                  onSignOut();
-                },
-                children: [
-                  /* @__PURE__ */ jsx12(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
-                  "Sign out"
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] }) : null
-  ] });
+        ),
+        /* @__PURE__ */ jsxs10(
+          DropdownItem,
+          {
+            "data-test": `${dataTest}-sign-out`,
+            onClick: onSignOut,
+            children: [
+              /* @__PURE__ */ jsx12(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+              "Sign out"
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/suite/components/suite-bottom-nav.tsx
-import Link2 from "next/link";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import Link from "next/link";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function SuiteBottomNav({
   items,
   ariaLabel = "Primary navigation",
@@ -1346,7 +1323,7 @@ function SuiteBottomNav({
     );
   }
   const activeIndex = items.findIndex((item) => item.active);
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
     /* @__PURE__ */ jsx13(
       "div",
       {
@@ -1376,7 +1353,7 @@ function SuiteBottomNav({
             const Icon = item.icon;
             const active = Boolean(item.active);
             return /* @__PURE__ */ jsxs11(
-              Link2,
+              Link,
               {
                 href: item.href,
                 "data-test": (_a = item.dataTest) != null ? _a : `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`,
@@ -1421,7 +1398,7 @@ var SUITE_APPS2 = [
     slug: "shellstack",
     name: "ShellStack",
     description: "Organisation and billing",
-    icon: "/logo-shellstack-static.svg",
+    icon: "/icon-shellstack.svg",
     landing: "/home",
     baseUrlEnv: "NEXT_PUBLIC_SHELLSTACK_URL",
     baseUrlFallback: "http://localhost:3002"
@@ -1463,7 +1440,7 @@ function suiteAppBaseUrl(slug) {
 
 // src/suite/components/today-calibrating.tsx
 import { Refresh as RefreshCw2, SunLight as Sun } from "iconoir-react";
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function TodayCalibrating({
   onRetry,
   retrying = false,
@@ -1489,7 +1466,7 @@ function TodayCalibrating({
           }
         ),
         /* @__PURE__ */ jsxs12("div", { className: "relative mb-6 flex h-24 w-24 items-center justify-center", children: [
-          variant === "ring" ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+          variant === "ring" ? /* @__PURE__ */ jsxs12(Fragment4, { children: [
             /* @__PURE__ */ jsx14(
               Spinner,
               {
@@ -1550,7 +1527,7 @@ import {
   useContext,
   useEffect as useEffect5,
   useMemo,
-  useState as useState7
+  useState as useState6
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var SuiteThemeContext = createContext(null);
@@ -1590,7 +1567,7 @@ function SuiteThemeProvider({
   config,
   children
 }) {
-  const [state, setState] = useState7(() => {
+  const [state, setState] = useState6(() => {
     const theme2 = readStoredTheme(config.storageKey);
     if (typeof document === "undefined") {
       return { theme: theme2, resolvedTheme: config.fallbackTheme };
@@ -1639,9 +1616,9 @@ function useSuiteTheme() {
 }
 
 // src/suite/components/ai-panel.tsx
-import { useState as useState8 } from "react";
+import { useState as useState7 } from "react";
 import { Check as Check2, Copy, Xmark as X2 } from "iconoir-react";
-import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function SuiteAiPanel({
   presets,
   emptyState,
@@ -1650,12 +1627,12 @@ function SuiteAiPanel({
   brandIcon: BrandIcon,
   spinner: Spinner
 }) {
-  const [open, setOpen] = useState8(false);
-  const [prompt, setPrompt] = useState8("");
-  const [loading, setLoading] = useState8(false);
-  const [answer, setAnswer] = useState8("");
-  const [error, setError] = useState8("");
-  const [copied, setCopied] = useState8(false);
+  const [open, setOpen] = useState7(false);
+  const [prompt, setPrompt] = useState7("");
+  const [loading, setLoading] = useState7(false);
+  const [answer, setAnswer] = useState7("");
+  const [error, setError] = useState7("");
+  const [copied, setCopied] = useState7(false);
   async function ask(text) {
     const trimmed = text.trim();
     if (!trimmed || loading) return;
@@ -1688,7 +1665,7 @@ function SuiteAiPanel({
     } catch (e) {
     }
   }
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
     /* @__PURE__ */ jsxs13(
       "button",
       {
@@ -1871,9 +1848,8 @@ function SuitePage({
       className: cn(
         "mx-auto flex w-full min-w-0 flex-col",
         WIDTHS[width],
-        // Same inset as TodayPageFrame so every page title sits at the
-        // same baseline regardless of app.
-        inset && "px-4 pb-10 pt-5 sm:px-6 sm:pt-6 lg:px-8",
+        // Tight inset keeps page titles aligned without excessive whitespace.
+        inset && "px-4 pb-6 pt-4 sm:px-6 sm:pb-7 sm:pt-5 lg:px-8",
         className
       ),
       children
@@ -1912,7 +1888,7 @@ function SuitePageHeader({
     {
       "data-test": dataTest,
       className: cn(
-        "flex items-start justify-between gap-4 pb-6 sm:pb-7",
+        "flex items-start justify-between gap-4 pb-4 sm:pb-5",
         className
       ),
       children: [
@@ -2208,7 +2184,7 @@ function SuiteSettingsMobileNav({
 }
 
 // src/suite/components/suite-sidebar.tsx
-import Link3 from "next/link";
+import Link2 from "next/link";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function renderNode(node, collapsed) {
   if (typeof node === "function") return node(collapsed);
@@ -2253,7 +2229,7 @@ function SuiteSidebar({
           "div",
           {
             className: cn(
-              "flex min-h-0 flex-1 flex-col",
+              "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"
             ),
@@ -2268,12 +2244,11 @@ function SuiteSidebar({
                     /* @__PURE__ */ jsx21("div", { className: "space-y-0.5", children: navItems.map((item) => {
                       const Icon = item.icon;
                       const active = Boolean(item.active);
-                      return /* @__PURE__ */ jsxs17(
-                        Link3,
+                      const link = /* @__PURE__ */ jsxs17(
+                        Link2,
                         {
                           href: item.href,
                           "data-test": "nav-link",
-                          title: collapsed ? item.label : void 0,
                           "aria-current": active ? "page" : void 0,
                           onClick: item.onClick,
                           className: cn(
@@ -2315,6 +2290,7 @@ function SuiteSidebar({
                         },
                         item.label
                       );
+                      return collapsed ? /* @__PURE__ */ jsx21(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
                     }) })
                   ]
                 }
@@ -2322,7 +2298,7 @@ function SuiteSidebar({
               secondaryNav ? /* @__PURE__ */ jsx21(
                 "div",
                 {
-                  className: "min-h-0 flex-1 overflow-y-auto",
+                  className: "min-h-0 flex-1",
                   "data-test": "suite-sidebar-secondary-nav",
                   children: secondaryNav
                 }

package/dist/ui.mjs

@@ -14,7 +14,6 @@ import {
   Banner,
   Breadcrumbs,
   Button,
-  ButtonChrome,
   ButtonGroup,
   Calendar,
   Caption,
@@ -36,11 +35,6 @@ import {
   Divider,
   Dot,
   Drawer,
-  DropdownButton,
-  DropdownItem,
-  DropdownMenu,
-  DropdownRadioGroup,
-  DropdownRadioItem,
   EmptyState,
   FileUpload,
   FilterBar,
@@ -54,8 +48,6 @@ import {
   H4,
   H5,
   HoverCard,
-  IconBase,
-  IconByName,
   Indicator,
   Input,
   InputGroup,
@@ -115,10 +107,20 @@ import {
   Toggle,
   ToggleButton,
   ToggleGroup,
-  Tooltip,
-  TooltipProvider,
   Widget
-} from "./chunk-KORWJCIO.mjs";
+} from "./chunk-54ZR4VL5.mjs";
+import {
+  ButtonChrome,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+  DropdownRadioGroup,
+  DropdownRadioItem,
+  IconBase,
+  IconByName,
+  Tooltip,
+  TooltipProvider
+} from "./chunk-G53YLHVE.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

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

@@ -90,10 +90,8 @@ export function SuitePage({
       className={cn(
         'mx-auto flex w-full min-w-0 flex-col',
         WIDTHS[width],
-        // Same inset as TodayPageFrame so every page title sits at the
-        // same baseline regardless of app.
-        inset &&
-          'px-4 pb-10 pt-5 sm:px-6 sm:pt-6 lg:px-8',
+        // Tight inset keeps page titles aligned without excessive whitespace.
+        inset && 'px-4 pb-6 pt-4 sm:px-6 sm:pb-7 sm:pt-5 lg:px-8',
         className,
       )}
     >
@@ -148,7 +146,7 @@ export function SuitePageHeader({
     <header
       data-test={dataTest}
       className={cn(
-        'flex items-start justify-between gap-4 pb-6 sm:pb-7',
+        'flex items-start justify-between gap-4 pb-4 sm:pb-5',
         className,
       )}
     >

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

@@ -4,6 +4,7 @@ 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);
@@ -91,7 +92,7 @@ export function SuiteSidebar({
       {/* Nav body */}
       <div
         className={cn(
-          'flex min-h-0 flex-1 flex-col',
+          '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',
         )}
@@ -108,12 +109,11 @@ export function SuiteSidebar({
             {navItems.map((item) => {
               const Icon = item.icon;
               const active = Boolean(item.active);
-              return (
+              const link = (
                 <Link
                   key={item.label}
                   href={item.href}
                   data-test="nav-link"
-                  title={collapsed ? item.label : undefined}
                   aria-current={active ? 'page' : undefined}
                   onClick={item.onClick}
                   className={cn(
@@ -152,13 +152,20 @@ export function SuiteSidebar({
                   ) : 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 overflow-y-auto"
+            className="min-h-0 flex-1"
             data-test="suite-sidebar-secondary-nav"
           >
             {secondaryNav}

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

@@ -1,11 +1,11 @@
 'use client';
 
 import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
+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;
@@ -47,82 +47,63 @@ export function SuiteUserMenu({
   dataTest = 'suite-user-menu',
   className,
 }: SuiteUserMenuProps) {
-  const [open, setOpen] = useState(false);
+  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 (
-    <div className={cn('relative', className)} data-test={dataTest}>
-      <button
-        type="button"
-        aria-label="Account menu"
-        aria-expanded={open}
-        aria-haspopup="menu"
-        title="Account"
-        onClick={() => setOpen((value) => !value)}
-        className="suite-press inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+    <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}
       >
-        {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>
-        )}
-      </button>
-      {open ? (
-        <>
-          <button
-            type="button"
-            aria-label="Close account menu"
-            className="fixed inset-0 z-40 cursor-default"
-            onClick={() => setOpen(false)}
-          />
-          <div
-            role="menu"
-            className="absolute right-0 top-full z-50 mt-1 w-56 rounded-xl border border-ph-border bg-ph-surface p-1 shadow-xl"
-          >
-            <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" />
-            <Link
-              role="menuitem"
-              href={settingsHref}
-              data-test={`${dataTest}-settings`}
-              className="flex min-h-11 items-center gap-2 rounded-lg px-2 text-sm text-ph-ink transition-colors hover:bg-ph-muted"
-              onClick={() => setOpen(false)}
-            >
-              <Settings className="h-4 w-4 text-ph-mutedtext" aria-hidden />
-              Profile settings
-            </Link>
-            <button
-              role="menuitem"
-              type="button"
-              data-test={`${dataTest}-sign-out`}
-              className="flex min-h-11 w-full items-center gap-2 rounded-lg px-2 text-left text-sm text-ph-ink transition-colors hover:bg-ph-muted"
-              onClick={() => {
-                setOpen(false);
-                onSignOut();
-              }}
-            >
-              <LogOut className="h-4 w-4 text-ph-mutedtext" aria-hidden />
-              Sign out
-            </button>
-          </div>
-        </>
-      ) : null}
-    </div>
+        <LogOut className="h-4 w-4 text-ph-mutedtext" aria-hidden />
+        Sign out
+      </DropdownItem>
+    </DropdownMenu>
   );
 }