@nextclaw/ui 0.18.4 → 0.19.1

package/src/features/panel-apps/components/__tests__/panel-app-main-sidebar-nav.test.tsx

@@ -0,0 +1,133 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  getMainSidebarPanelApps,
+  PanelAppMainSidebarNav,
+} from "@/features/panel-apps/components/panel-app-main-sidebar-nav";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+
+const mocks = vi.hoisted(() => ({
+  entries: [] as PanelAppEntryView[],
+  mutate: vi.fn(),
+}));
+
+vi.mock("@/features/panel-apps/hooks/use-panel-apps", () => ({
+  usePanelApps: () => ({ data: { entries: mocks.entries } }),
+  useUpdatePanelAppPreferences: () => ({
+    isPending: false,
+    mutate: mocks.mutate,
+  }),
+}));
+
+function createEntry(overrides: Partial<PanelAppEntryView> = {}): PanelAppEntryView {
+  return {
+    appId: "demo",
+    clientDeclared: false,
+    clientGranted: false,
+    contentPath: "/api/panel-apps/demo/content",
+    createdAt: "2026-08-19T00:00:00.000Z",
+    favorite: false,
+    fileName: "demo.panel.html",
+    id: "demo",
+    kind: "single-file",
+    mainSidebar: false,
+    openCount: 0,
+    sizeBytes: 10,
+    title: "Demo",
+    updatedAt: "2026-08-19T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+describe("PanelAppMainSidebarNav", () => {
+  beforeEach(() => {
+    mocks.entries = [];
+    mocks.mutate.mockReset();
+  });
+
+  it("projects only manually added apps in persisted order", () => {
+    const entries = [
+      createEntry({ appId: "hidden", title: "Hidden" }),
+      createEntry({ appId: "second", mainSidebar: true, mainSidebarOrder: 1, title: "Second" }),
+      createEntry({ appId: "first", mainSidebar: true, mainSidebarOrder: 0, title: "First" }),
+    ];
+
+    expect(getMainSidebarPanelApps(entries).map((entry) => entry.appId)).toEqual([
+      "first",
+      "second",
+    ]);
+  });
+
+  it("renders stable app routes and hides unbound apps", () => {
+    mocks.entries = [
+      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+      createEntry({ appId: "hidden", title: "Hidden" }),
+    ];
+
+    render(
+      <MemoryRouter initialEntries={["/apps/panel/publisher.todo"]}>
+        <PanelAppMainSidebarNav isCollapsed={false} />
+      </MemoryRouter>,
+    );
+
+    const link = screen.getByRole("link", { name: "Todo" });
+    expect(link.getAttribute("href")).toBe("/apps/panel/publisher.todo");
+    expect(link.getAttribute("aria-current")).toBe("page");
+    expect(screen.queryByText("Hidden")).toBeNull();
+  });
+
+  it("removes an expanded entry from its hover actions without nesting the button in the link", async () => {
+    const user = userEvent.setup();
+    mocks.entries = [
+      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+    ];
+
+    render(
+      <MemoryRouter initialEntries={["/apps/panel/publisher.todo"]}>
+        <PanelAppMainSidebarNav isCollapsed={false} />
+      </MemoryRouter>,
+    );
+
+    const link = screen.getByRole("link", { name: "Todo" });
+    const menuButton = screen.getByRole("button", {
+      name: "More panel app actions: Todo",
+    });
+    expect(link.contains(menuButton)).toBe(false);
+    expect(menuButton.className).toContain("group-hover/panel-app:opacity-100");
+
+    await user.click(menuButton);
+    await user.click(screen.getByRole("button", { name: "Remove from main sidebar" }));
+
+    expect(mocks.mutate).toHaveBeenCalledWith({
+      id: "demo",
+      preferences: { mainSidebar: false },
+    });
+    expect(link.getAttribute("aria-current")).toBe("page");
+  });
+
+  it("keeps the collapsed rail as one navigation target", () => {
+    mocks.entries = [
+      createEntry({ appId: "publisher.todo", mainSidebar: true, title: "Todo" }),
+    ];
+
+    render(
+      <MemoryRouter>
+        <PanelAppMainSidebarNav isCollapsed />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole("link", { name: "Todo" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "More panel app actions: Todo" })).toBeNull();
+  });
+
+  it("renders no section when no app was manually added", () => {
+    const { container } = render(
+      <MemoryRouter>
+        <PanelAppMainSidebarNav isCollapsed={false} />
+      </MemoryRouter>,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

package/src/features/panel-apps/components/__tests__/panel-app-toolbar.test.tsx

@@ -1,24 +1,85 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-import { PanelAppToolbar } from '../panel-app-toolbar';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { PanelAppToolbar } from '@/features/panel-apps/components/panel-app-toolbar';
+
+const mainSidebarMutation = vi.hoisted(() => ({
+  isPending: false,
+  mutate: vi.fn(),
+}));
+
+vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
+  usePanelApps: vi.fn(),
+  useUpdatePanelAppPreferences: () => mainSidebarMutation,
+}));
+
+const entry = {
+  appId: 'ink-assistant',
+  clientDeclared: false,
+  clientGranted: false,
+  contentPath: '/api/panel-apps/ink-assistant/content',
+  createdAt: '2026-08-19T00:00:00.000Z',
+  favorite: false,
+  fileName: 'ink-assistant.panel.html',
+  id: 'ink-assistant',
+  kind: 'single-file' as const,
+  mainSidebar: false,
+  openCount: 0,
+  sizeBytes: 10,
+  title: '墨爪助手',
+  updatedAt: '2026-08-19T00:00:00.000Z',
+};
 
 describe('PanelAppToolbar', () => {
-  it('shows the current panel app title in the detail header', async () => {
+  beforeEach(() => {
+    mainSidebarMutation.isPending = false;
+    mainSidebarMutation.mutate.mockReset();
+  });
+
+  it('keeps placement in the overflow menu without adding a second back action', async () => {
     const user = userEvent.setup();
-    const onOpenApps = vi.fn();
     render(
       <PanelAppToolbar
         appTitle="墨爪助手"
-        onOpenApps={onOpenApps}
+        entry={entry}
         onRefresh={vi.fn()}
       />,
     );
 
     expect(screen.getByText('墨爪助手')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Apps' })).toBeNull();
+
+    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    const addButton = screen.getByRole('button', { name: 'Add to main sidebar' });
+    expect(addButton.getAttribute('aria-pressed')).toBe('false');
+    await user.click(addButton);
+
+    expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
+      id: 'ink-assistant',
+      preferences: { mainSidebar: true },
+    });
+    expect(screen.queryByRole('button', { name: 'Add to main sidebar' })).toBeNull();
+  });
+
+  it('uses the same menu item to remove an app already in the main sidebar', async () => {
+    const user = userEvent.setup();
+    render(
+      <PanelAppToolbar
+        appTitle="墨爪助手"
+        entry={{ ...entry, mainSidebar: true }}
+        onRefresh={vi.fn()}
+      />,
+    );
 
-    await user.click(screen.getByRole('button', { name: 'Apps' }));
+    await user.click(screen.getByRole('button', { name: 'More panel app actions' }));
+    const removeButton = screen.getByRole('button', { name: 'Remove from main sidebar' });
+    expect(removeButton.getAttribute('aria-pressed')).toBe('true');
+    await user.click(removeButton);
 
-    expect(onOpenApps).toHaveBeenCalledTimes(1);
+    expect(mainSidebarMutation.mutate).toHaveBeenCalledWith({
+      id: 'ink-assistant',
+      preferences: { mainSidebar: false },
+    });
   });
 });

package/src/features/panel-apps/components/__tests__/panel-apps-list.test.tsx

@@ -22,6 +22,7 @@ const mocks = vi.hoisted(() => ({
   }>,
   grantPanelAppClient: vi.fn(),
   navigate: vi.fn(),
+  recordOpened: vi.fn(),
   refetchPanelApps: vi.fn(),
   requestAuthorization: vi.fn(async () => true),
   requestDraft: vi.fn(),
@@ -62,7 +63,7 @@ vi.mock('@/features/panel-apps/hooks/use-panel-apps', () => ({
     refetch: mocks.refetchPanelApps,
   }),
   useRecordPanelAppOpened: () => ({
-    mutateAsync: vi.fn(async (id: string) => mocks.entries.find((entry) => entry.id === id)),
+    mutate: mocks.recordOpened,
   }),
   useUpdatePanelAppPreferences: () => ({
     isPending: false,
@@ -96,6 +97,7 @@ describe('PanelAppsList', () => {
     mocks.grantPanelAppClient.mockReset();
     mocks.navigate.mockReset();
     mocks.refetchPanelApps.mockReset();
+    mocks.recordOpened.mockReset();
     mocks.requestAuthorization.mockReset();
     mocks.requestAuthorization.mockResolvedValue(true);
     mocks.requestDraft.mockReset();
@@ -163,5 +165,9 @@ describe('PanelAppsList', () => {
     }));
     expect(mocks.grantPanelAppClient).toHaveBeenCalledWith('demo-app');
     expect(onOpenPanelApp).toHaveBeenCalledWith(entry);
+    expect(mocks.recordOpened).toHaveBeenCalledWith(entry.id);
+    expect(onOpenPanelApp.mock.invocationCallOrder[0]).toBeLessThan(
+      mocks.recordOpened.mock.invocationCallOrder[0]!,
+    );
   });
 });

package/src/features/panel-apps/components/panel-app-icon.tsx

@@ -0,0 +1,48 @@
+import { AppWindow } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+
+export function PanelAppIcon({
+  className,
+  icon,
+  imageClassName,
+  title,
+}: {
+  className?: string;
+  icon?: string;
+  imageClassName?: string;
+  title: string;
+}) {
+  const normalizedIcon = icon?.trim();
+  if (!normalizedIcon) {
+    return <AppWindow className={cn("h-4 w-4", className)} />;
+  }
+  if (isPanelAppImageIcon(normalizedIcon)) {
+    return (
+      <img
+        src={normalizedIcon}
+        alt=""
+        aria-hidden="true"
+        className={cn("h-5 w-5 rounded-sm object-contain", imageClassName, className)}
+        title={title}
+      />
+    );
+  }
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("max-w-6 truncate text-center leading-none", className)}
+      title={title}
+    >
+      {normalizedIcon}
+    </span>
+  );
+}
+
+export function isPanelAppImageIcon(icon: string): boolean {
+  return (
+    icon.startsWith("data:image/") ||
+    icon.startsWith("http://") ||
+    icon.startsWith("https://") ||
+    icon.startsWith("/")
+  );
+}

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -1,6 +1,8 @@
 import { useState, type MouseEvent } from 'react';
-import { AppWindow, MoreVertical, Star, Trash2, type LucideIcon } from 'lucide-react';
+import { MoreVertical, Star, Trash2, type LucideIcon } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
+import { PanelAppIcon } from '@/features/panel-apps/components/panel-app-icon';
+import { PanelAppMainSidebarMenuItem } from '@/features/panel-apps/components/panel-app-main-sidebar-menu-item';
 import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { getLanguage, getLocale, t } from '@/shared/lib/i18n';
@@ -36,7 +38,6 @@ export function PanelAppListItem({
     setIsMenuOpen(false);
     setIsDeleteDialogOpen(true);
   };
-
   return (
     <div className="group w-full min-w-0 rounded-lg border border-border/60 bg-card px-2.5 py-2.5 transition-colors hover:bg-muted/40">
       <div className="flex min-w-0 items-start gap-2">
@@ -75,6 +76,10 @@ export function PanelAppListItem({
               </button>
             </PopoverTrigger>
             <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+              <PanelAppMainSidebarMenuItem
+                entry={entry}
+                onSelect={() => setIsMenuOpen(false)}
+              />
               <PanelAppMenuItem
                 destructive
                 disabled={deletePending}
@@ -144,30 +149,3 @@ function formatPanelAppTime(value: string): string {
   }
   return new Intl.DateTimeFormat(locale, { year: '2-digit', month: 'numeric', day: 'numeric' }).format(date);
 }
-
-function PanelAppIcon({ icon, title }: { icon?: string; title: string }) {
-  if (!icon) {
-    return <AppWindow className="h-4 w-4" />;
-  }
-  if (isImageIcon(icon)) {
-    return (
-      <img
-        src={icon}
-        alt=""
-        aria-hidden="true"
-        className="h-5 w-5 rounded-sm object-contain"
-        title={title}
-      />
-    );
-  }
-  return <span className="max-w-6 truncate text-center leading-none">{icon}</span>;
-}
-
-function isImageIcon(icon: string): boolean {
-  return (
-    icon.startsWith('data:image/') ||
-    icon.startsWith('http://') ||
-    icon.startsWith('https://') ||
-    icon.startsWith('/')
-  );
-}

package/src/features/panel-apps/components/panel-app-main-sidebar-menu-item.tsx

@@ -0,0 +1,37 @@
+import { PanelLeft, PanelLeftDashed } from 'lucide-react';
+import { useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
+import type { PanelAppEntryView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+
+export function PanelAppMainSidebarMenuItem({
+  entry,
+  onSelect,
+}: {
+  entry: PanelAppEntryView;
+  onSelect?: () => void;
+}) {
+  const updatePreferences = useUpdatePanelAppPreferences();
+  const label = entry.mainSidebar
+    ? t('panelAppsRemoveFromMainSidebar')
+    : t('panelAppsAddToMainSidebar');
+  const Icon = entry.mainSidebar ? PanelLeftDashed : PanelLeft;
+
+  return (
+    <button
+      type="button"
+      disabled={updatePreferences.isPending}
+      aria-pressed={entry.mainSidebar}
+      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 disabled:cursor-not-allowed disabled:opacity-50"
+      onClick={() => {
+        onSelect?.();
+        updatePreferences.mutate({
+          id: entry.id,
+          preferences: { mainSidebar: !entry.mainSidebar },
+        });
+      }}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
+  );
+}

package/src/features/panel-apps/components/panel-app-main-sidebar-nav.tsx

@@ -0,0 +1,123 @@
+import { useMemo, useState } from "react";
+import { MoreVertical } from "lucide-react";
+import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
+import { SIDEBAR_RAIL_STACK_CLASS } from "@/app/components/layout/sidebar-rail.styles";
+import { PanelAppIcon } from "@/features/panel-apps/components/panel-app-icon";
+import { PanelAppMainSidebarMenuItem } from "@/features/panel-apps/components/panel-app-main-sidebar-menu-item";
+import { usePanelApps } from "@/features/panel-apps/hooks/use-panel-apps";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+const MAIN_SIDEBAR_FALLBACK_ORDER = Number.MAX_SAFE_INTEGER;
+
+export function getMainSidebarPanelApps(
+  entries: readonly PanelAppEntryView[],
+): PanelAppEntryView[] {
+  return entries
+    .filter((entry) => entry.mainSidebar)
+    .sort((left, right) =>
+      (left.mainSidebarOrder ?? MAIN_SIDEBAR_FALLBACK_ORDER) -
+        (right.mainSidebarOrder ?? MAIN_SIDEBAR_FALLBACK_ORDER) ||
+      left.title.localeCompare(right.title)
+    );
+}
+
+export function PanelAppMainSidebarNav({
+  isCollapsed,
+}: {
+  isCollapsed: boolean;
+}) {
+  const panelApps = usePanelApps();
+  const entries = useMemo(
+    () => getMainSidebarPanelApps(panelApps.data?.entries ?? []),
+    [panelApps.data?.entries],
+  );
+
+  if (entries.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "mt-1 border-t border-border/50 pt-1",
+        isCollapsed ? "px-0" : "px-3",
+      )}
+      data-testid="panel-app-main-sidebar-nav"
+    >
+      <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
+        {entries.map((entry) => (
+          <PanelAppMainSidebarNavItem
+            key={entry.appId}
+            entry={entry}
+            isCollapsed={isCollapsed}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function PanelAppMainSidebarNavItem({
+  entry,
+  isCollapsed,
+}: {
+  entry: PanelAppEntryView;
+  isCollapsed: boolean;
+}) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const link = (
+    <SidebarNavLinkItem
+      to={`/apps/panel/${encodeURIComponent(entry.appId)}`}
+      label={entry.title}
+      iconNode={(
+        <PanelAppIcon
+          icon={entry.icon}
+          title={entry.title}
+          className="h-full w-full text-[13px]"
+          imageClassName="rounded-[3px]"
+        />
+      )}
+      density="compact"
+      collapsed={isCollapsed}
+      className={isCollapsed ? undefined : "rounded-lg py-1.5 pl-2.5 pr-9"}
+    />
+  );
+
+  if (isCollapsed) {
+    return <li className="flex justify-center">{link}</li>;
+  }
+
+  const menuLabel = `${t("panelAppsMoreActions")}: ${entry.title}`;
+  return (
+    <li>
+      <div className="group/panel-app relative">
+        {link}
+        <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              aria-label={menuLabel}
+              className={cn(
+                "absolute right-1 top-1/2 z-[1] -translate-y-1/2 rounded-md p-1 text-muted-foreground/70 transition-[color,background-color,opacity] hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                isMenuOpen
+                  ? "pointer-events-auto opacity-100"
+                  : "pointer-events-none opacity-0 group-hover/panel-app:pointer-events-auto group-hover/panel-app:opacity-100 group-focus-within/panel-app:pointer-events-auto group-focus-within/panel-app:opacity-100",
+              )}
+            >
+              <MoreVertical className="h-4 w-4" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+            <PanelAppMainSidebarMenuItem
+              entry={entry}
+              onSelect={() => setIsMenuOpen(false)}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </li>
+  );
+}

package/src/features/panel-apps/components/panel-app-toolbar.tsx

@@ -1,43 +1,84 @@
-import { ArrowLeft, RefreshCw } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { MoreVertical, RefreshCw } from 'lucide-react';
+import { PanelAppMainSidebarMenuItem } from '@/features/panel-apps/components/panel-app-main-sidebar-menu-item';
+import { usePanelApps } from '@/features/panel-apps/hooks/use-panel-apps';
+import { readPanelAppIdFromTab } from '@/features/right-panel-resources';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import type { PanelAppEntryView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
 
 type PanelAppToolbarProps = {
   appTitle: string;
-  onOpenApps: () => void;
+  entry?: PanelAppEntryView;
   onRefresh: () => void;
 };
 
 export function PanelAppToolbar({
   appTitle,
-  onOpenApps,
+  entry,
   onRefresh,
 }: PanelAppToolbarProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
     <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-card px-3.5 py-2 shrink-0">
-      <button
-        type="button"
-        onClick={onOpenApps}
-        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
-        title={t('appsTitle')}
-        aria-label={t('appsTitle')}
-      >
-        <ArrowLeft className="h-3.5 w-3.5" />
-      </button>
       <span
         className="min-w-0 flex-1 truncate text-xs font-medium text-muted-foreground"
         title={appTitle}
       >
         {appTitle}
       </span>
-      <button
-        type="button"
+      {entry ? (
+        <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+          <PopoverTrigger asChild>
+            <IconActionButton
+              icon={<MoreVertical className="h-3.5 w-3.5" />}
+              label={t('panelAppsMoreActions')}
+              size="sm"
+            />
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+            <PanelAppMainSidebarMenuItem
+              entry={entry}
+              onSelect={() => setIsMenuOpen(false)}
+            />
+          </PopoverContent>
+        </Popover>
+      ) : null}
+      <IconActionButton
+        icon={<RefreshCw className="h-3.5 w-3.5" />}
+        label={t('panelAppsRefreshCurrent')}
         onClick={onRefresh}
-        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
-        title={t('panelAppsRefreshCurrent')}
-        aria-label={t('panelAppsRefreshCurrent')}
-      >
-        <RefreshCw className="h-3.5 w-3.5" />
-      </button>
+        size="sm"
+      />
     </div>
   );
 }
+
+export function PanelAppDocBrowserToolbar({
+  appTitle,
+  currentUrl,
+  onRefresh,
+  resourceUri,
+}: {
+  appTitle: string;
+  currentUrl: string;
+  onRefresh: () => void;
+  resourceUri?: string;
+}) {
+  const panelApps = usePanelApps();
+  const appId = readPanelAppIdFromTab({ currentUrl, resourceUri });
+  const entry = useMemo(
+    () => panelApps.data?.entries.find((candidate) => candidate.appId === appId),
+    [appId, panelApps.data?.entries],
+  );
+
+  return (
+    <PanelAppToolbar
+      appTitle={entry?.title ?? appTitle}
+      entry={entry}
+      onRefresh={onRefresh}
+    />
+  );
+}

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -3,7 +3,8 @@ import { AppWindow, FileCode2, HelpCircle, MessageSquarePlus, RefreshCw } from '
 import { useNavigate } from 'react-router-dom';
 import { useAppPresenter } from '@/app/components/app-presenter-provider';
 import { PanelAppListItem } from '@/features/panel-apps/components/panel-app-list-item';
-import { useDeletePanelApp, useGrantPanelAppClient, usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
+import { usePanelAppClientGrant } from '@/features/panel-apps/hooks/use-panel-app-client-grant';
+import { useDeletePanelApp, usePanelApps, useRecordPanelAppOpened, useUpdatePanelAppPreferences } from '@/features/panel-apps/hooks/use-panel-apps';
 import { getPanelAppViewEntries } from '@/features/panel-apps/utils/panel-app-view.utils';
 import type { PanelAppViewMode } from '@/features/panel-apps/utils/panel-app-view.utils';
 import type { PanelAppEntryView } from '@/shared/lib/api';
@@ -22,7 +23,7 @@ export function PanelAppsList({
   const deletePanelApp = useDeletePanelApp();
   const updatePreferences = useUpdatePanelAppPreferences();
   const recordOpened = useRecordPanelAppOpened();
-  const grantClient = useGrantPanelAppClient();
+  const { ensurePanelAppClientGrant } = usePanelAppClientGrant();
   const presenter = useAppPresenter();
   const navigate = useNavigate();
   const [viewMode, setViewMode] = useState<PanelAppViewMode>('smart');
@@ -36,31 +37,8 @@ export function PanelAppsList({
     if (!(await ensurePanelAppClientGrant(entry))) {
       return;
     }
-    try {
-      onOpenPanelApp(await recordOpened.mutateAsync(entry.id));
-    } catch {
-      onOpenPanelApp(entry);
-    }
-  };
-
-  const ensurePanelAppClientGrant = async (entry: PanelAppEntryView): Promise<boolean> => {
-    if (!entry.clientDeclared || entry.clientGranted) {
-      return true;
-    }
-    const allowed = await presenter.serviceActionAuthorizationManager.requestAuthorization({
-      panelAppId: entry.appId,
-      actions: [{
-        actionId: 'nextclaw.client',
-        actionTitle: t('panelAppsClientGrantTitle'),
-        actionDescription: t('panelAppsClientGrantDescription'),
-        risk: 'dangerous',
-      }],
-    });
-    if (!allowed) {
-      return false;
-    }
-    await grantClient.mutateAsync(entry.appId);
-    return true;
+    onOpenPanelApp(entry);
+    recordOpened.mutate(entry.id);
   };
 
   const toggleFavorite = (entry: PanelAppEntryView) => {