@nextclaw/ui 0.26.0 → 0.26.2

package/src/features/system-status/components/desktop-update-config.tsx

@@ -16,7 +16,9 @@ import {
   type ReleaseNotesLocale,
   type ReleaseNotesSection
 } from '@/features/system-status/utils/update-release-notes.utils';
-import { RefreshCw, RotateCw } from 'lucide-react';
+import { Download, RefreshCw, RotateCw } from 'lucide-react';
+
+const PORTABLE_RELEASES_URL = 'https://github.com/Peiiii/nextclaw/releases';
 
 const STATUS_LABEL_KEYS: Record<string, string> = {
   checking: 'desktopUpdatesStatusChecking',
@@ -117,6 +119,12 @@ function getStatusTone(status: string): string {
   return 'bg-gray-100 text-gray-700 ring-gray-200';
 }
 
+function isPortableUpdateBlocked(snapshot: UpdateSnapshot): boolean {
+  return snapshot.status === 'blocked'
+    && snapshot.installationKind === 'desktop-bundle'
+    && snapshot.blockReason === 'unsupported-installation';
+}
+
 function getReleaseNotesLocale(): ReleaseNotesLocale {
   return getLanguage() === 'zh' ? 'zh-CN' : 'en-US';
 }
@@ -265,6 +273,16 @@ export function DesktopUpdateConfig() {
                 <p className='text-sm font-semibold text-red-800'>{t('desktopUpdatesBlockedTitle')}</p>
                 <p className='mt-1 text-sm text-red-700'>{snapshot.errorMessage ?? t('desktopUpdatesBlockedDescription')}</p>
                 {snapshot.recoveryCommand ? <code className='mt-3 block rounded-lg bg-white/70 px-3 py-2 text-xs text-red-800'>{snapshot.recoveryCommand}</code> : null}
+                {isPortableUpdateBlocked(snapshot) ? (
+                  <NavigationLink
+                    href={PORTABLE_RELEASES_URL}
+                    external
+                    icon={Download}
+                    className='mt-3 rounded-full border border-red-300 bg-white/70 px-3 py-2 text-red-800 no-underline hover:bg-white hover:text-red-900 hover:no-underline'
+                  >
+                    {t('desktopUpdatesManualPortableDownload')}
+                  </NavigationLink>
+                ) : null}
               </div>
             ) : null}
             {snapshot.errorMessage && snapshot.status !== 'blocked' ? <div className='rounded-2xl border border-red-200 bg-red-50/70 p-4 text-sm text-red-700'>{snapshot.errorMessage}</div> : null}

package/src/platforms/desktop/components/__tests__/desktop-app-shell.test.tsx

@@ -169,4 +169,3 @@ describe("DesktopAppShell", () => {
 });
 
 vi.mock("@/shared/components/doc-browser/doc-browser", () => ({ DocBrowser: () => null }));
-vi.mock("@/features/right-panel-resources/components/current-page-actions", () => ({ CurrentPageActions: () => null }));

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

@@ -1,4 +1,3 @@
-import { CurrentPageActions } from '@/features/right-panel-resources';
 import { lazy, Suspense } from "react";
 import type { CSSProperties } from "react";
 import {
@@ -136,7 +135,6 @@ export function DesktopAppShell({
         {!isMainRoute && <Sidebar />}
         <div className="flex-1 flex min-w-0 overflow-hidden relative">
           <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-            {!isMainRoute ? <CurrentPageActions /> : null}
             {isMainRoute ? (
               <div className="flex-1 h-full overflow-hidden">{children}</div>
             ) : (

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

@@ -1,4 +1,3 @@
-import { CurrentPageActions } from '@/features/right-panel-resources';
 import { lazy, Suspense } from "react";
 import {
   isChatSessionDetailRoute,
@@ -39,7 +38,6 @@ export function MobileAppShell({
   return (
     <div className="flex h-[100svh] flex-col bg-background font-sans text-foreground supports-[height:100dvh]:h-[100dvh]">
       {showTopbar ? <MobileTopbar leadingInset={topbarLeadingInset} /> : null}
-      {!isMainRoute ? <CurrentPageActions /> : null}
       <div className="relative flex-1 min-h-0 overflow-hidden">
         {isMainRoute ? (
           <div className="h-full min-h-0 overflow-hidden">{children}</div>

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

@@ -1,12 +1,12 @@
 import { NavLink } from "react-router-dom";
-import { getSettingsNavItems } from "@/app/configs/app-navigation.config";
+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";
 
 export function MobileSettingsShell() {
   const desktopCapabilityAvailable = useDesktopCapabilityAvailability();
-  const settingsNavItems = getSettingsNavItems(t, {
+  const settingsNavSections = getSettingsNavSections(t, {
     includeKeyboardShortcuts: false,
     includeDesktopCapabilities: desktopCapabilityAvailable,
   });
@@ -16,7 +16,10 @@ export function MobileSettingsShell() {
       data-testid="mobile-settings-shell"
       className="space-y-3 pb-4"
     >
-      {settingsNavItems.map((item) => (
+      {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}
@@ -38,6 +41,8 @@ export function MobileSettingsShell() {
             </p>
           </div>
         </NavLink>
+          ))}
+        </section>
       ))}
     </div>
   );

package/src/shared/components/ui/context-menu/__tests__/context-menu.test.tsx

@@ -1,9 +1,91 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { ContextMenu, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
+import { ContextMenu, ContextMenuItems, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/shared/components/ui/dialog';
 
 describe('ContextMenu', () => {
+  it('returns from an embedded submenu before dismissing its Radix popover', async () => {
+    render(<Popover><PopoverTrigger>Actions</PopoverTrigger><PopoverContent>
+      <ContextMenuItems onClose={vi.fn()} groups={[{ key: 'layout', items: [
+        { key: 'layout', label: 'Layout', children: [{ key: 'placement', items: [
+          { key: 'dock', label: 'Dock', onSelect: vi.fn() },
+        ] }] },
+      ] }]} />
+    </PopoverContent></Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Layout' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('menuitem', { name: 'Dock' })).toBeNull();
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Layout' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('menuitem')).toBeNull();
+  });
+
+  it('dismisses a resource menu before its enclosing Radix dialog', async () => {
+    const onOpenChange = vi.fn();
+    render(<Dialog open onOpenChange={onOpenChange}><DialogContent>
+      <DialogTitle>Details</DialogTitle><DialogDescription>Resource details</DialogDescription>
+      <ContextMenu label="Resource actions" groups={[{ key: 'main', items: [{ key: 'copy', label: 'Copy', onSelect: vi.fn() }] }]}>
+        <div><ContextMenuTrigger><button>Actions</button></ContextMenuTrigger></div>
+      </ContextMenu>
+    </DialogContent></Dialog>);
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(onOpenChange).not.toHaveBeenCalled();
+    await userEvent.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('keeps layout actions collapsed and returns focus from the submenu', async () => {
+    const onSelect = vi.fn();
+    render(<ContextMenu label="Actions" groups={[{ key: 'main', items: [
+      { key: 'copy', label: 'Copy', onSelect: vi.fn() },
+      { key: 'layout', label: 'Layout', children: [{ key: 'placement', items: [
+        { key: 'dock', label: 'Dock', onSelect },
+      ] }] },
+    ] }]}><div><ContextMenuTrigger><button>More</button></ContextMenuTrigger></div></ContextMenu>);
+    await userEvent.click(screen.getByRole('button', { name: 'More' }));
+    expect(screen.queryByRole('menuitem', { name: 'Dock' })).toBeNull();
+    await userEvent.keyboard('{ArrowDown}{ArrowRight}');
+    expect(screen.getByRole('menuitem', { name: 'Copy' })).toBeTruthy();
+    expect(screen.getAllByRole('menu')).toHaveLength(2);
+    expect(screen.getByRole('menuitem', { name: 'Layout' }).getAttribute('aria-expanded')).toBe('true');
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Dock' }));
+    await userEvent.keyboard('{Escape}');
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Layout' }));
+    expect(screen.getByRole('menu')).toBeTruthy();
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Layout' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Dock' }));
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('opens beside the parent on hover, preserves both levels, and closes when another parent item is entered', async () => {
+    render(<ContextMenu label="Actions" groups={[{ key: 'main', items: [
+      { key: 'copy', label: 'Copy', onSelect: vi.fn() },
+      { key: 'layout', label: 'Layout', children: [{ key: 'placement', items: [
+        { key: 'dock', label: 'Dock', onSelect: vi.fn() },
+      ] }] },
+    ] }]}><div><ContextMenuTrigger><button>More</button></ContextMenuTrigger></div></ContextMenu>);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'More' }));
+    await user.hover(screen.getByRole('menuitem', { name: 'Layout' }));
+    const dock = await screen.findByRole('menuitem', { name: 'Dock' });
+    expect(screen.getByRole('menuitem', { name: 'Copy' })).toBeTruthy();
+    expect(['left', 'right']).toContain(screen.getByRole('menu', { name: 'Layout' }).getAttribute('data-side'));
+    await user.hover(dock);
+    expect(screen.getAllByRole('menu')).toHaveLength(2);
+    await user.click(screen.getByRole('menuitem', { name: 'Layout' }));
+    expect(screen.getByRole('menuitem', { name: 'Dock' })).toBeTruthy();
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Dock' }));
+    await user.hover(screen.getByRole('menuitem', { name: 'Copy' }));
+    await waitFor(() => expect(screen.queryByRole('menuitem', { name: 'Dock' })).toBeNull());
+    expect(screen.getByRole('menu', { name: 'Actions' })).toBeTruthy();
+  });
+
   it('keeps modal actions inside the dialog focus boundary and consumes Escape', async () => {
     const onSelect = vi.fn();
     const onDialogKeyDown = vi.fn();

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

@@ -0,0 +1,173 @@
+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 type { ContextMenuGroup, ContextMenuItem } from "./context-menu";
+
+export const CONTEXT_MENU_SURFACE_CLASS =
+  "w-max min-w-52 max-w-[min(18rem,calc(100vw-16px))] overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[0_18px_48px_-20px_rgba(15,23,42,0.42)] outline-none";
+
+function MenuItemContent({ item }: { item: ContextMenuItem }) {
+  return <>
+    {item.icon ? <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">{item.icon}</span> : null}
+    <span className="min-w-0 flex-1 truncate">{item.label}</span>
+    {item.children ? <ChevronRight className="h-4 w-4 shrink-0" /> : null}
+  </>;
+}
+
+function ContextSubmenu({ item, open, onOpenChange, onClose, className, children }: {
+  item: ContextMenuItem & { children: readonly ContextMenuGroup[] };
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onClose: (restoreFocus: boolean) => void;
+  className: string;
+  children: ReactNode;
+}) {
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [portalHost, setPortalHost] = useState<HTMLElement>();
+  const setTrigger = useCallback((node: HTMLButtonElement | null) => {
+    triggerRef.current = node;
+    setPortalHost(node?.closest<HTMLElement>("[data-context-menu-layer]") ?? undefined);
+  }, []);
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const keyboardOpen = useRef(false);
+  const cancelPending = () => clearTimeout(timer.current);
+  const schedule = (next: boolean) => {
+    cancelPending();
+    timer.current = setTimeout(() => onOpenChange(next), next ? 100 : 250);
+  };
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const closeLevel = () => {
+    cancelPending();
+    onOpenChange(false);
+    triggerRef.current?.focus();
+  };
+  const openFromControl = () => {
+    cancelPending();
+    keyboardOpen.current = true;
+    onOpenChange(true);
+    contentRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)')?.focus();
+  };
+  return <Popover.Root open={open} onOpenChange={onOpenChange}>
+    <Popover.Trigger asChild>
+      <button
+        ref={setTrigger}
+        type="button"
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        disabled={item.disabled}
+        data-menu-key={item.key}
+        className={cn(className, open && "bg-muted")}
+        onPointerEnter={(event) => {
+          if (event.pointerType === "touch") return;
+          keyboardOpen.current = false;
+          schedule(true);
+        }}
+        onPointerLeave={() => schedule(false)}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          openFromControl();
+        }}
+        onKeyDown={(event) => {
+          if (event.key !== "ArrowRight") return;
+          event.preventDefault();
+          event.stopPropagation();
+          openFromControl();
+        }}
+      >{children}</button>
+    </Popover.Trigger>
+    <Popover.Portal container={portalHost}>
+      <Popover.Content
+        ref={contentRef}
+        role="menu"
+        aria-label={item.label}
+        data-menu-escape-owner=""
+        data-theme-overlay="menu"
+        side="right"
+        align="start"
+        sideOffset={2}
+        collisionPadding={8}
+        className={cn(CONTEXT_MENU_SURFACE_CLASS, "z-[var(--z-tooltip)]")}
+        style={{
+          minWidth: "min(13rem, var(--radix-popover-content-available-width))",
+          maxWidth: "min(18rem, var(--radix-popover-content-available-width))",
+          maxHeight: "var(--radix-popover-content-available-height)",
+        }}
+        onPointerEnter={cancelPending}
+        onPointerLeave={() => schedule(false)}
+        onPointerDown={(event) => event.stopPropagation()}
+        onOpenAutoFocus={(event) => {
+          if (!keyboardOpen.current) event.preventDefault();
+        }}
+        onCloseAutoFocus={(event) => event.preventDefault()}
+        onEscapeKeyDown={(event) => { event.preventDefault(); closeLevel(); }}
+        onKeyDown={(event) => {
+          if (event.key === "ArrowLeft" || event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            closeLevel();
+          }
+        }}
+      >
+        <ContextMenuItems groups={item.children} onClose={onClose} />
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>;
+}
+
+/** The single item/group renderer for standalone and embedded action menus. */
+export function ContextMenuItems({ groups, onClose }: {
+  groups: readonly ContextMenuGroup[];
+  onClose: (restoreFocus: boolean) => void;
+}) {
+  const [openKey, setOpenKey] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  return <div
+    ref={containerRef}
+    data-menu-level=""
+    data-menu-escape-owner={openKey ? "" : undefined}
+    onKeyDown={(event) => {
+      // Portalled descendants retain React ancestry; each level owns its keys.
+      if ((event.target as Element).closest('[data-menu-level]') !== containerRef.current) return;
+      if (event.key === "Escape" && openKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        containerRef.current?.querySelector<HTMLElement>('[aria-expanded="true"]')?.focus();
+        setOpenKey(null);
+      } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const items = Array.from(containerRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]:not(:disabled)') ?? [])
+          .filter((item) => item.closest('[data-menu-level]') === containerRef.current);
+        const index = items.indexOf(document.activeElement as HTMLElement);
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
+          : (index + (event.key === "ArrowUp" ? -1 : 1) + items.length) % items.length;
+        setOpenKey(null);
+        items[next]?.focus();
+      }
+    }}
+  >
+    {groups.filter((group) => group.items.length).map((group, index) => <div key={group.key} role="group">
+      {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",
+        );
+        const content = <MenuItemContent item={item} />;
+        if (item.children) return <ContextSubmenu key={item.key} item={item} open={openKey === item.key}
+          onOpenChange={(open) => setOpenKey((current) => open ? item.key : current === item.key ? null : current)}
+          onClose={onClose} className={className}>{content}</ContextSubmenu>;
+        const select = () => { item.onSelect?.(); onClose(item.href ? false : item.restoreFocus !== false); };
+        return item.href ? <a key={item.key} role="menuitem" className={className} href={item.href} download={item.download}
+          onPointerEnter={() => setOpenKey(null)} onClick={(event) => { event.stopPropagation(); select(); }}>{content}</a>
+          : <button key={item.key} type="button" role="menuitem" disabled={item.disabled} aria-pressed={item.pressed}
+            data-menu-key={item.key} className={className} onPointerEnter={() => setOpenKey(null)}
+            onClick={(event) => { event.stopPropagation(); select(); }}>{content}</button>;
+      })}
+    </div>)}
+  </div>;
+}