@nextclaw/ui 0.26.1 → 0.26.3

package/src/features/marketplace/components/marketplace-page-parts.tsx

@@ -7,6 +7,7 @@ import {
   SelectValue,
 } from "@/shared/components/ui/select";
 import { Skeleton } from "@/shared/components/ui/skeleton";
+import { Input } from "@/shared/components/ui/input";
 import { t } from "@/shared/lib/i18n";
 import { Loader2, PackageSearch } from "lucide-react";
 import type { Ref } from "react";
@@ -30,10 +31,10 @@ export function FilterPanel({
 }) {
   return (
     <div className="mb-4">
-      <div className="flex items-center gap-3">
+      <div className="flex flex-wrap items-center gap-3">
         <div className="relative min-w-0 flex-1">
           <PackageSearch className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-          <input
+          <Input
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
@@ -52,7 +53,7 @@ export function FilterPanel({
             value={sort}
             onValueChange={(value) => onSortChange(value as MarketplaceSort)}
           >
-            <SelectTrigger className="h-9 w-[150px] shrink-0 rounded-lg">
+            <SelectTrigger className="h-9 w-[110px] sm:w-[150px] shrink-0 rounded-lg">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/src/features/marketplace/components/marketplace-page.tsx

@@ -142,12 +142,12 @@ export function MarketplacePage({
     <PageLayout className="flex h-full min-h-0 flex-col pb-0">
       {!curatedSceneRoute.isSceneRoute && (
         <>
-          <div className="mb-3 flex items-start justify-between gap-3 border-b border-gray-200/60">
+          <div className="mb-3 flex flex-wrap items-start justify-between gap-3 border-b border-border/60">
             <Tabs
               value={scope}
               onValueChange={(value) => setScope(value as ScopeType)}
             >
-              <TabsList className="mb-0 h-auto flex-1 justify-start gap-6 rounded-none border-b-0 bg-transparent p-0 text-gray-500">
+              <TabsList className="mb-0 h-auto flex-1 justify-start gap-4 sm:gap-6 rounded-none border-b-0 bg-transparent p-0 text-muted-foreground">
                 <TabsTrigger
                   value="all"
                   className="rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"

package/src/features/panel-apps/components/panel-app-open-standalone-menu-item.tsx

@@ -1,4 +1,6 @@
 import { ExternalLink } from "lucide-react";
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
+import { cn } from '@/shared/lib/utils';
 import type { PanelAppEntryView } from "@/shared/lib/api";
 import { t } from "@/shared/lib/i18n";
 
@@ -22,7 +24,7 @@ export function PanelAppOpenStandaloneMenuItem({
       // `opener` keeps this trusted same-origin target auxiliary, so the current browser owns the new tab.
       rel="opener"
       referrerPolicy="no-referrer"
-      className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
+      className={cn(ACTION_MENU_ITEM_CLASS, ACTION_FEEDBACK.item)}
       onClick={onSelect}
     >
       <ExternalLink className="h-4 w-4 shrink-0" />

package/src/features/projects/components/project-overview.tsx

@@ -32,7 +32,7 @@ export function ProjectOverview({
   return (
     <div className="space-y-5">
       <section
-        className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"
+        className="grid grid-cols-2 gap-3 lg:grid-cols-4"
         aria-label={t("projectsWorkSummary")}
       >
         {summary.data ? (

package/src/features/projects/pages/project-home-page.tsx

@@ -81,8 +81,17 @@ export function ProjectsPage() {
     );
   if (!selectedProject || !tab)
     return (
-      <main className="p-6 text-sm text-muted-foreground">
-        {t("projectsChoose")}
+      <main className="space-y-3 p-4 text-sm text-muted-foreground sm:p-6">
+        <label htmlFor="project-home-selection" className="block font-medium text-foreground">{t("projectsChoose")}</label>
+        <select
+          id="project-home-selection"
+          value=""
+          onChange={(event) => navigate(`/projects/${encodeURIComponent(event.target.value)}/overview`)}
+          className="min-h-11 w-full rounded-xl border border-border bg-card px-3 text-base text-foreground"
+        >
+          <option value="" disabled>{t("projectsChoose")}</option>
+          {registered.map((project) => <option key={project.id} value={project.id}>{project.name}</option>)}
+        </select>
       </main>
     );
 

package/src/features/projects/pages/projects-page.test.tsx

@@ -135,11 +135,13 @@ describe("ProjectsPage", () => {
     ).toBeTruthy();
   });
 
-  it("asks the user to choose from the sidebar when no project route is selected", () => {
+  it("lets users enter a project without a desktop sidebar", () => {
     renderPage("/projects");
     expect(mocks.useProjectAgreement).toHaveBeenCalledWith(null);
     expect(mocks.useProjectSkills).toHaveBeenCalledWith(null);
-    expect(screen.getByText(/Choose a project|选择项目/)).toBeTruthy();
+    const picker = screen.getByRole("combobox", { name: /Choose a project|选择项目/ });
+    fireEvent.change(picker, { target: { value: "project-1" } });
+    expect(screen.getByRole("tab", { name: /Overview|概览/ }).getAttribute("aria-selected")).toBe("true");
   });
 
   it("loads each fixed project material only on its own tab", () => {

package/src/platforms/mobile/components/mobile-app-shell.tsx

@@ -42,7 +42,7 @@ export function MobileAppShell({
         {isMainRoute ? (
           <div className="h-full min-h-0 overflow-hidden">{children}</div>
         ) : (
-          <main className="h-full overflow-auto px-4 py-4 custom-scrollbar">
+          <main className="h-full overflow-auto overscroll-contain px-4 py-4 custom-scrollbar">
             <div className="mx-auto max-w-3xl animate-fade-in">{children}</div>
           </main>
         )}

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -19,13 +19,13 @@ export function MobileBottomNav() {
   return (
     <nav
       data-testid="mobile-bottom-nav"
-      aria-label={t("settings")}
+      aria-label={t("mobileNavigation")}
       className="shrink-0 border-t border-border/60 bg-background text-foreground"
       style={{
         paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 0.25rem)",
       }}
     >
-      <ul className="grid grid-cols-6 gap-1 px-2 pt-1">
+      <ul className="grid grid-cols-6 gap-0.5 px-1 pt-1">
         {getMobileBottomNavItems(t).map((item) => {
           const active = item.target === "/settings"
             ? isSettingsRoute(pathname)
@@ -34,10 +34,11 @@ export function MobileBottomNav() {
             <li key={item.target}>
               <Link
                 to={item.target}
+                aria-label={item.label}
                 aria-current={active ? "page" : undefined}
                 data-testid={active ? "mobile-nav-active-indicator" : undefined}
                 className={cn(
-                  "group flex min-h-[2.875rem] flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                  "group flex min-h-12 flex-col items-center justify-center gap-1 rounded-xl px-0.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   active
                     ? "bg-muted text-foreground"
                     : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -46,7 +47,7 @@ export function MobileBottomNav() {
                 <span className="relative">
                   <item.icon
                     className={cn(
-                      "h-3.5 w-3.5",
+                      "h-5 w-5",
                       active ? "text-foreground" : "text-muted-foreground",
                     )}
                   />
@@ -54,7 +55,7 @@ export function MobileBottomNav() {
                     <span className="absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-background" />
                   ) : null}
                 </span>
-                <span className="max-w-full truncate">{item.label}</span>
+                <span className="max-w-full truncate">{item.target === "/agents" ? t("mobileAgents") : item.label}</span>
               </Link>
             </li>
           );
@@ -63,9 +64,9 @@ export function MobileBottomNav() {
           <button
             type="button"
             onClick={() => openApps(docBrowser)}
-            className="group flex min-h-[2.875rem] w-full flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="group flex min-h-12 w-full flex-col items-center justify-center gap-1 rounded-xl px-0.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
-            <Boxes className="h-3.5 w-3.5 text-muted-foreground" />
+            <Boxes className="h-5 w-5 text-muted-foreground" />
             <span className="max-w-full truncate">{t("appsTitle")}</span>
           </button>
         </li>

package/src/platforms/mobile/components/mobile-settings-shell.tsx

@@ -1,8 +1,10 @@
 import { NavLink } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
 import { getSettingsNavSections } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 import { useDesktopCapabilityAvailability } from "@/features/desktop-capabilities";
+import { SettingsGroup } from "@/shared/components/settings/setting-row";
 
 export function MobileSettingsShell() {
   const desktopCapabilityAvailable = useDesktopCapabilityAvailability();
@@ -19,29 +21,28 @@ export function MobileSettingsShell() {
       {settingsNavSections.map((section) => (
         <section key={section.label} className="space-y-2">
           <h2 className="px-1 pt-2 text-xs font-medium text-muted-foreground">{section.label}</h2>
-          {section.items.map((item) => (
-        <NavLink
-          key={item.target}
-          to={item.target}
-          className={({ isActive }) =>
-            cn(
-              "flex items-center gap-3 rounded-2xl border border-gray-200/80 bg-white px-4 py-4 shadow-card transition-colors",
-              isActive
-                ? "border-gray-300 bg-gray-50"
-                : "hover:border-gray-300 hover:bg-gray-50/70",
-            )
-          }
-        >
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gray-100 text-gray-600">
-            <item.icon className="h-4 w-4" />
-          </div>
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold text-gray-900">
-              {item.label}
-            </p>
-          </div>
-        </NavLink>
-          ))}
+          <SettingsGroup>
+            {section.items.map((item) => (
+              <NavLink
+                key={item.target}
+                to={item.target}
+                className={({ isActive }) => cn(
+                  "flex min-h-14 items-center gap-3 px-4 py-3 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border",
+                  isActive
+                    ? "bg-[var(--interaction-selection)]"
+                    : "hover:bg-[var(--interaction-hover)] active:bg-[var(--interaction-hover)]",
+                )}
+              >
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground">
+                  <item.icon className="h-5 w-5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="text-[15px] font-medium text-foreground">{item.label}</p>
+                </div>
+                <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground/60" aria-hidden="true" />
+              </NavLink>
+            ))}
+          </SettingsGroup>
         </section>
       ))}
     </div>

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -2,6 +2,7 @@ import { ArrowLeft } from "lucide-react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { resolveMobileRouteMeta } from "@/app/configs/app-navigation.config";
 import { t } from "@/shared/lib/i18n";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 
 export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   const navigate = useNavigate();
@@ -11,31 +12,29 @@ export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   return (
     <header
       data-testid="mobile-topbar"
-      className="shrink-0 border-b border-border/60 bg-secondary text-foreground"
+      className="shrink-0 border-b border-border/60 bg-background text-foreground"
       style={{
-        paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.25rem)",
+        paddingTop: "env(safe-area-inset-top, 0px)",
       }}
     >
       <div
-        className="flex min-h-[2.75rem] items-center gap-2 py-1.5 pl-3 pr-3"
+        className="flex h-[var(--mobile-header-height)] items-center gap-2 pl-3 pr-3"
         style={{ paddingLeft: leadingInset ? `calc(${leadingInset} + 0.75rem)` : undefined }}
       >
         {routeMeta.backTarget ? (
-          <button
-            type="button"
+          <IconActionButton
+            size="lg"
             onClick={() => navigate(routeMeta.backTarget as string)}
-            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            aria-label={routeMeta.backLabel ?? t("backToMain")}
-          >
-            <ArrowLeft className="h-4 w-4" />
-          </button>
+            label={routeMeta.backLabel ?? t("backToMain")}
+            icon={<ArrowLeft className="h-4 w-4" />}
+          />
         ) : null}
         <div className="min-w-0 flex-1">
           <h1 className="truncate text-center text-[17px] font-semibold text-foreground">
             {routeMeta.title}
           </h1>
         </div>
-        {routeMeta.backTarget ? <div className="h-11 w-11 shrink-0" aria-hidden="true" /> : null}
+        {routeMeta.backTarget ? <div className="w-[var(--icon-control-size)] shrink-0" aria-hidden="true" /> : null}
       </div>
     </header>
   );

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -545,7 +545,8 @@ describe("DocBrowser panel app navigation", () => {
 
     expect(screen.queryByRole("button", { name: "Pin to left sidebar" })).toBeNull();
     await user.click(screen.getByRole("button", { name: "More panel app actions" }));
-    await user.click(screen.getByRole("button", { name: "Pin to left sidebar" }));
+    await user.click(screen.getByRole("menuitem", { name: "Layout and position" }));
+    await user.click(screen.getByRole("menuitem", { name: "Pin to left sidebar" }));
     expect(panelAppHooks.mutate).toHaveBeenCalledWith({
       id: "piano",
       preferences: { mainSidebar: true },
@@ -571,7 +572,8 @@ describe("DocBrowser panel app navigation", () => {
     render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
 
     await user.click(screen.getByRole("button", { name: "More panel app actions" }));
-    await user.click(screen.getByRole("button", { name: "Pin to left sidebar" }));
+    await user.click(screen.getByRole("menuitem", { name: "Layout and position" }));
+    await user.click(screen.getByRole("menuitem", { name: "Pin to left sidebar" }));
     expect(panelAppHooks.mutate).toHaveBeenCalledWith({
       id: "piano",
       preferences: { mainSidebar: true },
@@ -651,6 +653,36 @@ describe("DocBrowser floating interactions", () => {
     installDocBrowserPointerTestEnvironment();
   });
 
+  it("keeps compact navigation, tab selection, resource and app actions reachable", () => {
+    const onBack = vi.fn();
+    const onSelect = vi.fn();
+    const onClose = vi.fn();
+    const onAdd = vi.fn();
+    const onRefresh = vi.fn();
+    render(<DocBrowserTabStrip compact tabs={docBrowserState.tabs} activeTabId="docs"
+      canGoBack canGoForward={false} onGoBack={onBack} onGoForward={vi.fn()}
+      onOpenNewTab={vi.fn()} onSetActiveTab={onSelect} onCloseTab={onClose}
+      mobileToolbar={<button onClick={onRefresh}>Refresh app</button>}
+      getTabMenuGroups={() => [{ key: 'chat', items: [{ key: 'add', label: 'Add to Chat', onSelect: onAdd }] }]}
+    />);
+    const open = () => fireEvent.click(screen.getByRole('button', { name: 'More tab actions' }));
+    expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
+    open();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Back' }));
+    expect(onBack).toHaveBeenCalledOnce();
+    open();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Docs' }));
+    expect(onSelect).toHaveBeenCalledWith('docs');
+    open();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Add to Chat' }));
+    expect(onAdd).toHaveBeenCalledOnce();
+    open();
+    fireEvent.click(screen.getByRole('button', { name: 'Refresh app' }));
+    expect(onRefresh).toHaveBeenCalledOnce();
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Close tab' }));
+    expect(onClose).toHaveBeenCalledWith('docs');
+  });
+
   it("drags the shared header without stealing tab actions", () => {
     new WorkbenchSurfaceManager().place('global-resources', 'floating');
     render(<DocBrowser />);

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -1,4 +1,8 @@
 import { PageResourceIcon } from '@/features/right-panel-resources';
+import { useState, type ReactNode } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { ContextMenuItems } from '@/shared/components/ui/context-menu/context-menu';
 import {
   ArrowLeft,
   ArrowRight,
@@ -16,6 +20,8 @@ import {
 import { t } from "@/shared/lib/i18n";
 
 type DocBrowserTabStripProps = {
+  compact?: boolean;
+  mobileToolbar?: ReactNode;
   tabs: DocBrowserTab[];
   activeTabId: string;
   canGoBack: boolean;
@@ -47,7 +53,10 @@ export function DocBrowserTabStrip({
   onSetActiveTab,
   onCloseTab,
   getTabMenuGroups,
+  mobileToolbar,
+  compact = false,
 }: DocBrowserTabStripProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const backLabel = t("docBrowserBack");
   const closeTabLabel = t("workbenchCloseTab");
   const dockLabel = dockState?.isDocked
@@ -87,18 +96,40 @@ export function DocBrowserTabStrip({
       : []),
   ];
 
+  const current = tabs.find(tab => tab.id === activeTabId);
+  const mobileGroups: ContextMenuGroup[] = [
+    { key: 'tabs', items: compactTabs.map(tab => ({ key: tab.key, label: tab.label, icon: tab.leadingIcon, pressed: tab.active, onSelect: tab.onSelect })) },
+    { key: 'navigation', items: actions.map(action => ({ key: action.key, label: action.label, icon: action.icon, disabled: action.disabled, onSelect: action.onClick })) },
+    ...(current ? getTabMenuGroups?.(current) ?? [] : []),
+    ...(current ? [{ key: 'close-tab', items: [{ key: 'close-tab', label: closeTabLabel, onSelect: () => onCloseTab(current.id) }] }] : []),
+  ];
+  if (compact) return (
+    <div className="flex h-12 min-w-0 flex-1 items-center">
+      <Popover open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+        <PopoverTrigger asChild>
+          <button type="button" className="flex h-8 min-w-0 items-center gap-2 rounded-lg px-2 text-sm font-medium hover:bg-[var(--interaction-hover)]" aria-label={t('docBrowserTabMoreActions')}>
+            {current ? <DocBrowserTabIcon tab={current} /> : null}
+            <span className="truncate">{current?.title || t('docBrowserTabUntitled')}</span><ChevronDown className="h-4 w-4 shrink-0" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="max-h-[70dvh] w-72 overflow-y-auto p-1">
+          <ContextMenuItems groups={mobileGroups} onClose={() => setMobileMenuOpen(false)} />
+          {mobileToolbar}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
   return (
     <CompactTabStrip
       testId="doc-browser-tab-strip"
       actionsTestId="doc-browser-tab-actions"
       tabs={compactTabs}
       actions={actions}
-      className="h-10 min-w-0 flex-1 gap-1 border-0 bg-transparent px-0 select-none"
-      scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-0.5"
+      className="flex h-10 min-w-0 flex-1 gap-1 border-0 bg-transparent px-0 select-none"
+      scrollClassName="doc-browser-tab-scrollbar flex h-full max-md:h-11 max-md:basis-full items-center gap-0.5"
       tabsClassName="items-center gap-0.5"
-      actionsClassName="h-full items-center gap-0.5"
-      actionButtonClassName="rounded-md p-1.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground disabled:opacity-50"
-      tabBaseClassName="inline-flex cursor-pointer items-center gap-0.5 h-7 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
+      actionsClassName="h-full max-md:h-11 max-md:w-full items-center gap-0.5"
+      tabBaseClassName="inline-flex cursor-pointer items-center gap-0.5 h-7 max-md:min-h-11 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
       activeTabClassName="bg-muted/80 text-foreground"
       inactiveTabClassName="text-muted-foreground hover:bg-muted/45 hover:text-foreground"
       labelClassName="px-0.5 text-xs font-normal"

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import {
   DOC_BROWSER_HOME_TAB_KIND,
   getDefaultDocsUrl,
@@ -258,6 +259,7 @@ export function DocBrowser({
 
 
   const isFullscreen = displayMode === 'fullscreen';
+  const { isMobile } = useViewportLayout();
   const customRenderParams = currentTab ? {
     currentUrl,
     open,
@@ -284,7 +286,7 @@ export function DocBrowser({
         urlInput={urlInput}
       />
 
-      {customToolbar}
+      {!isMobile ? customToolbar : null}
 
       <DocBrowserFrameContent
         currentTab={currentTab}
@@ -310,6 +312,8 @@ export function DocBrowser({
       onWidthCommit={setDockedWidth} onClose={close} closeLabel={t('workbenchHideGroup')}
       hidden={!isOpen} fullscreen={isFullscreen} navigation={
       <DocBrowserTabStrip
+        mobileToolbar={customToolbar}
+        compact={isMobile}
         tabs={tabs}
         activeTabId={activeTabId}
         canGoBack={canGoBack}

package/src/shared/components/settings/settings-page.tsx

@@ -27,7 +27,7 @@ export function SettingsPage({
         className
       )}
     >
-      <PageHeader title={title} description={description} actions={actions} />
+      <PageHeader title={title} description={description} actions={actions} mobileTitleInShell />
       {children}
     </PageLayout>
   );

package/src/shared/components/ui/actions/__tests__/icon-action-button.test.tsx

@@ -17,7 +17,7 @@ describe('IconActionButton', () => {
     expect(button.className).toContain('h-6');
     expect(button.className).toContain('w-6');
     expect(button.className).toContain('p-1');
-    expect(button.className).toContain('hover:bg-black/10');
+    expect(button.className).toContain('hover:before:bg-[var(--interaction-hover)]');
   });
 
   it('defaults to medium size and soft accent hover', () => {
@@ -31,7 +31,7 @@ describe('IconActionButton', () => {
     const button = screen.getByRole('button', { name: 'More' });
     expect(button.className).toContain('h-7');
     expect(button.className).toContain('w-7');
-    expect(button.className).toContain('hover:bg-[var(--interaction-hover)]');
+    expect(button.className).toContain('hover:before:bg-[var(--interaction-hover)]');
   });
 
   it('uses surface-relative feedback without introducing a new surface', () => {
@@ -44,9 +44,9 @@ describe('IconActionButton', () => {
     );
 
     const button = screen.getByRole('button', { name: 'Add project' });
-    expect(button.className).toContain('hover:bg-gray-200/60');
-    expect(button.className).toContain('hover:text-gray-900');
-    expect(button.className).toContain('active:bg-gray-200/80');
+    expect(button.className).toContain('hover:before:bg-[var(--interaction-hover)]');
+    expect(button.className).toContain('hover:text-accent-foreground');
+    expect(button.className).toContain('active:before:bg-[var(--interaction-hover)]');
   });
 
   it('ignores restored pointer focus while preserving keyboard tooltip focus', () => {

package/src/shared/components/ui/actions/action-feedback.ts

@@ -0,0 +1,8 @@
+/** Neutral actions share one theme color across icon and menu surfaces. */
+export const ACTION_MENU_ITEM_CLASS = 'flex min-h-8 w-full items-center gap-2 rounded-lg px-2.5 py-1 text-left text-[13px] leading-5 font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-45';
+
+export const ACTION_FEEDBACK = {
+  icon: 'hover:before:bg-[var(--interaction-hover)] active:before:bg-[var(--interaction-hover)] disabled:hover:before:bg-transparent disabled:active:before:bg-transparent',
+  item: 'hover:bg-[var(--interaction-hover)] focus-visible:bg-[var(--interaction-hover)] active:bg-[var(--interaction-hover)] disabled:hover:bg-transparent disabled:active:bg-transparent',
+  destructive: 'text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10 disabled:hover:bg-transparent',
+} as const;

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -6,6 +6,7 @@ import {
   TooltipTrigger,
 } from '@/shared/components/ui/tooltip';
 import { cn } from '@/shared/lib/utils';
+import { ACTION_FEEDBACK } from './action-feedback';
 
 type IconActionButtonSize = 'sm' | 'md' | 'lg';
 type IconActionButtonTone = 'default' | 'surface' | 'strong';
@@ -17,7 +18,7 @@ type IconActionButtonProps = Omit<
   icon: React.ReactNode;
   label: string;
   size?: IconActionButtonSize;
-  /** default: global interaction hover. surface: relative feedback on the current surface. strong: denser feedback for nested hover surfaces. */
+  /** @deprecated All neutral icon actions now share the theme feedback color. */
   tone?: IconActionButtonTone;
   tooltip?: string | false | null;
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
@@ -29,14 +30,9 @@ const SIZE_CLASS: Record<IconActionButtonSize, string> = {
   lg: 'h-8 w-8 rounded-lg p-1.5',
 };
 
-const TONE_CLASS: Record<IconActionButtonTone, string> = {
-  default:
-    'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
-  surface:
-    'text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
-  strong:
-    'text-muted-foreground hover:bg-black/10 hover:text-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
-};
+export function IconActionGroup({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={cn('flex shrink-0 items-center gap-1 max-md:gap-0', className)}>{children}</div>;
+}
 
 const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonProps>(
   (
@@ -60,14 +56,19 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
         type="button"
         disabled={disabled}
         aria-label={label}
+        data-tone={tone}
         className={cn(
-          'inline-flex shrink-0 items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed',
+          'relative inline-flex shrink-0 items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed',
           SIZE_CLASS[size],
-          TONE_CLASS[tone],
+          'text-muted-foreground hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:text-muted-foreground/45',
+          ACTION_FEEDBACK.icon,
+          size === 'sm' ? 'max-md:h-8 max-md:w-8' : 'max-md:h-[var(--icon-control-size)] max-md:w-[var(--icon-control-size)]',
+          "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:transition-colors before:content-[''] max-md:before:inset-auto max-md:before:h-[var(--icon-feedback-size)] max-md:before:w-[var(--icon-feedback-size)]",
+          size === 'sm' && 'max-md:before:h-7 max-md:before:w-7',
           className
         )}
       >
-        {icon}
+        <span className="relative inline-flex items-center justify-center">{icon}</span>
       </button>
     );
     const content = tooltip === false ? null : tooltip ?? label;

package/src/shared/components/ui/button.tsx

@@ -42,7 +42,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, ...props }, ref) => {
     return (
       <button
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, className }), size !== 'icon' && 'max-md:min-h-[var(--control-touch-size)]')}
         ref={ref}
         {...props}
       />

package/src/shared/components/ui/context-menu/context-menu-items.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"
 import * as Popover from "@radix-ui/react-popover";
 import { ChevronRight } from "lucide-react";
 import { cn } from "@/shared/lib/utils";
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '../actions/action-feedback';
 import type { ContextMenuGroup, ContextMenuItem } from "./context-menu";
 
 export const CONTEXT_MENU_SURFACE_CLASS =
@@ -59,7 +60,7 @@ function ContextSubmenu({ item, open, onOpenChange, onClose, className, children
         aria-expanded={open}
         disabled={item.disabled}
         data-menu-key={item.key}
-        className={cn(className, open && "bg-muted")}
+        className={cn(className, open && "bg-[var(--interaction-hover)]")}
         onPointerEnter={(event) => {
           if (event.pointerType === "touch") return;
           keyboardOpen.current = false;
@@ -154,8 +155,8 @@ export function ContextMenuItems({ groups, onClose }: {
       {index > 0 ? <div className="my-1 h-px bg-border" /> : null}
       {group.items.map((item) => {
         const className = cn(
-          "flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-45",
-          item.destructive ? "text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10" : "text-foreground hover:bg-muted focus-visible:bg-muted",
+          ACTION_MENU_ITEM_CLASS,
+          item.destructive ? ACTION_FEEDBACK.destructive : `text-foreground ${ACTION_FEEDBACK.item}`,
         );
         const content = <MenuItemContent item={item} />;
         if (item.children) return <ContextSubmenu key={item.key} item={item} open={openKey === item.key}