@nextclaw/ui 0.13.4 → 0.13.6

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

@@ -5,15 +5,26 @@ import type {
   ServiceAppRecordView,
 } from '@nextclaw/client-sdk';
 import {
+  AlertTriangle,
+  CheckCircle2,
+  CircleDashed,
+  LoaderCircle,
+  MoreVertical,
+  PauseCircle,
+  Radar,
   RefreshCw,
-  RotateCw,
-  Search,
   Server,
   ShieldCheck,
   Trash2,
+  Unplug,
+  type LucideIcon,
   Wrench,
 } from 'lucide-react';
+import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/components/ui/tooltip';
 import {
+  useDeleteServiceApp,
   useDiscoverServiceAppActions,
   useRestartServiceApp,
   useRevokeServiceActionGrant,
@@ -22,8 +33,10 @@ import {
   useServiceApps,
 } from '@/features/service-apps/hooks/use-service-apps';
 import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 
 type ServiceActionView = ServiceActionListView['actions'][number];
+type ServiceAppStatus = ServiceAppRecordView['status'];
 
 export function ServiceAppsPanel({
   headerContent,
@@ -33,6 +46,7 @@ export function ServiceAppsPanel({
   const serviceApps = useServiceApps();
   const serviceActions = useServiceActions();
   const serviceActionGrants = useServiceActionGrants();
+  const deleteServiceApp = useDeleteServiceApp();
   const restartServiceApp = useRestartServiceApp();
   const discoverServiceAppActions = useDiscoverServiceAppActions();
   const revokeServiceActionGrant = useRevokeServiceActionGrant();
@@ -86,15 +100,13 @@ export function ServiceAppsPanel({
             </>
           )}
         </div>
-        <button
-          type="button"
-          onClick={refetch}
-          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
-          title={t('serviceAppsRefresh')}
-          aria-label={t('serviceAppsRefresh')}
-        >
-          <RefreshCw className="h-3.5 w-3.5" />
-        </button>
+        <TooltipProvider delayDuration={250}>
+          <ServiceAppIconButton
+            icon={RefreshCw}
+            label={t('serviceAppsRefresh')}
+            onClick={refetch}
+          />
+        </TooltipProvider>
       </div>
 
       {apps.length === 0 ? (
@@ -110,8 +122,10 @@ export function ServiceAppsPanel({
                 app={app}
                 actions={discoveredActionsByApp[app.id] ?? actions.filter((action) => action.appId === app.id)}
                 grants={grants}
+                deletePending={deleteServiceApp.isPending}
                 isDiscovering={discoverServiceAppActions.isPending}
                 onDiscover={discover}
+                onDelete={(appId) => void deleteServiceApp.mutate(appId)}
                 onRestart={(appId) => void restartServiceApp.mutate(appId)}
                 onRevoke={(grant) => void revokeServiceActionGrant.mutate({
                   actionId: grant.actionId,
@@ -130,68 +144,244 @@ function ServiceAppCard({
   app,
   actions,
   grants,
+  deletePending,
   isDiscovering,
   onDiscover,
+  onDelete,
   onRestart,
   onRevoke,
 }: {
   app: ServiceAppRecordView;
   actions: ServiceActionView[];
   grants: ServiceActionGrantView[];
+  deletePending: boolean;
   isDiscovering: boolean;
   onDiscover: (appId: string) => void;
+  onDelete: (appId: string) => void;
   onRestart: (appId: string) => void;
   onRevoke: (grant: ServiceActionGrantView) => void;
 }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const canConnectAndDiscover = app.status !== 'starting' && app.status !== 'stopped';
+  const canDisconnectRuntime = app.status === 'running' || app.status === 'failed';
+  const openDeleteDialog = () => {
+    setIsMenuOpen(false);
+    setIsDeleteDialogOpen(true);
+  };
+
   return (
-    <section className="rounded-lg border border-gray-200 bg-white p-3">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="flex items-center gap-2">
-            <div className="truncate text-sm font-semibold text-gray-900">{app.title}</div>
-            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-600">{app.status}</span>
+    <TooltipProvider delayDuration={250}>
+      <section className="rounded-lg border border-gray-200 bg-white p-3">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <div className="truncate text-sm font-semibold text-gray-900">{app.title}</div>
+              <ServiceAppStatusBadge status={app.status} />
+            </div>
+            {app.description ? (
+              <div className="mt-1 line-clamp-2 text-xs text-gray-500">{app.description}</div>
+            ) : null}
+            {app.lastError ? (
+              <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            <ServiceAppIconButton
+              disabled={isDiscovering || !canConnectAndDiscover}
+              icon={Radar}
+              label={t('serviceAppsDiscoverActions')}
+              tooltip={t('serviceAppsDiscoverActionsHint')}
+              onClick={() => onDiscover(app.id)}
+            />
+            <ServiceAppIconButton
+              disabled={!canDisconnectRuntime}
+              icon={Unplug}
+              label={t('serviceAppsDisconnectRuntime')}
+              tooltip={t('serviceAppsDisconnectRuntimeHint')}
+              onClick={() => onRestart(app.id)}
+            />
+            <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50"
+                      aria-label={t('serviceAppsMoreActions')}
+                      disabled={deletePending}
+                    >
+                      <MoreVertical className="h-3.5 w-3.5" />
+                    </button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="text-xs">{t('serviceAppsMoreActions')}</TooltipContent>
+              </Tooltip>
+              <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+                <ServiceAppMenuItem
+                  destructive
+                  disabled={deletePending}
+                  icon={Trash2}
+                  label={t('serviceAppsDelete')}
+                  onClick={openDeleteDialog}
+                />
+              </PopoverContent>
+            </Popover>
           </div>
-          {app.description ? (
-            <div className="mt-1 line-clamp-2 text-xs text-gray-500">{app.description}</div>
-          ) : null}
-          {app.lastError ? (
-            <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
-          ) : null}
         </div>
-        <div className="flex shrink-0 items-center gap-1">
-          <button
-            type="button"
-            onClick={() => onDiscover(app.id)}
-            disabled={isDiscovering}
-            className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50"
-            title={t('serviceAppsDiscoverActions')}
-            aria-label={t('serviceAppsDiscoverActions')}
-          >
-            <Search className="h-3.5 w-3.5" />
-          </button>
-          <button
-            type="button"
-            onClick={() => onRestart(app.id)}
-            className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800"
-            title={t('serviceAppsRestart')}
-            aria-label={t('serviceAppsRestart')}
-          >
-            <RotateCw className="h-3.5 w-3.5" />
-          </button>
+        <ServiceAppDiagnostics app={app} />
+        <div className="mt-3 space-y-1">
+          {actions.map((action) => (
+            <ServiceActionRow
+              key={action.id}
+              action={action}
+              grants={grants.filter((grant) => grant.actionId === action.id)}
+              onRevoke={onRevoke}
+            />
+          ))}
         </div>
-      </div>
-      <ServiceAppDiagnostics app={app} />
-      <div className="mt-3 space-y-1">
-        {actions.map((action) => (
-          <ServiceActionRow
-            key={action.id}
-            action={action}
-            grants={grants.filter((grant) => grant.actionId === action.id)}
-            onRevoke={onRevoke}
-          />
-        ))}
-      </div>
-    </section>
+        <ConfirmDialog
+          open={isDeleteDialogOpen}
+          onOpenChange={setIsDeleteDialogOpen}
+          title={t('serviceAppsDeleteConfirmTitle')}
+          description={`${t('serviceAppsDeleteConfirmDescription')} ${app.title}`}
+          confirmLabel={t('delete')}
+          variant="destructive"
+          onConfirm={() => onDelete(app.id)}
+          onCancel={() => undefined}
+        />
+      </section>
+    </TooltipProvider>
+  );
+}
+
+function ServiceAppStatusBadge({ status }: { status: ServiceAppStatus }) {
+  const view = getServiceAppStatusView(status);
+  const Icon = view.icon;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={cn(
+            'inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium',
+            view.className,
+          )}
+          aria-label={view.label}
+        >
+          <Icon className={cn('h-3 w-3', view.iconClassName)} />
+          <span>{view.label}</span>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="text-xs">{view.tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function getServiceAppStatusView(status: ServiceAppStatus): {
+  className: string;
+  icon: LucideIcon;
+  iconClassName?: string;
+  label: string;
+  tooltip: string;
+} {
+  switch (status) {
+    case 'running':
+      return {
+        className: 'bg-emerald-50 text-emerald-700',
+        icon: CheckCircle2,
+        label: t('serviceAppsStatus_running'),
+        tooltip: t('serviceAppsStatusHint_running'),
+      };
+    case 'starting':
+      return {
+        className: 'bg-blue-50 text-blue-700',
+        icon: LoaderCircle,
+        iconClassName: 'animate-spin',
+        label: t('serviceAppsStatus_starting'),
+        tooltip: t('serviceAppsStatusHint_starting'),
+      };
+    case 'failed':
+      return {
+        className: 'bg-rose-50 text-rose-700',
+        icon: AlertTriangle,
+        label: t('serviceAppsStatus_failed'),
+        tooltip: t('serviceAppsStatusHint_failed'),
+      };
+    case 'stopped':
+      return {
+        className: 'bg-gray-100 text-gray-600',
+        icon: PauseCircle,
+        label: t('serviceAppsStatus_stopped'),
+        tooltip: t('serviceAppsStatusHint_stopped'),
+      };
+    case 'idle':
+    default:
+      return {
+        className: 'bg-slate-100 text-slate-600',
+        icon: CircleDashed,
+        label: t('serviceAppsStatus_idle'),
+        tooltip: t('serviceAppsStatusHint_idle'),
+      };
+  }
+}
+
+function ServiceAppIconButton({
+  disabled = false,
+  icon: Icon,
+  label,
+  tooltip = label,
+  onClick,
+}: {
+  disabled?: boolean;
+  icon: LucideIcon;
+  label: string;
+  tooltip?: string;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onClick}
+          disabled={disabled}
+          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent"
+          aria-label={label}
+        >
+          <Icon className="h-3.5 w-3.5" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="max-w-56 text-xs">{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function ServiceAppMenuItem({
+  destructive = false,
+  disabled = false,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  destructive?: boolean;
+  disabled?: boolean;
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-gray-700 hover:bg-gray-100',
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
   );
 }
 

package/src/features/service-apps/hooks/use-service-apps.ts

@@ -39,6 +39,20 @@ export function useRestartServiceApp() {
   });
 }
 
+export function useDeleteServiceApp() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (appId: string) => nextclawClient.serviceApps.deleteServiceApp(appId),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: SERVICE_APPS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTIONS_QUERY_KEY }),
+        queryClient.invalidateQueries({ queryKey: SERVICE_ACTION_GRANTS_QUERY_KEY }),
+      ]);
+    },
+  });
+}
+
 export function useDiscoverServiceAppActions() {
   const queryClient = useQueryClient();
   return useMutation({

package/src/features/side-dock/components/side-dock.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { SIDE_DOCK_BUILT_IN_ITEMS } from '@/features/side-dock/configs/side-dock-built-in-items.config';
+import { getSideDockBuiltInItems } from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { SideDock } from '@/features/side-dock/components/side-dock';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
@@ -28,7 +28,8 @@ describe('SideDock', () => {
     );
 
     expect(screen.getByTestId('side-dock')).toBeTruthy();
-    SIDE_DOCK_BUILT_IN_ITEMS.forEach((item) => {
+    const builtInItems = getSideDockBuiltInItems();
+    builtInItems.forEach((item) => {
       expect(document.querySelector(`[data-side-dock-item-id="${item.id}"]`)).toBeTruthy();
     });
 
@@ -36,7 +37,7 @@ describe('SideDock', () => {
     expect(appsButton).toBeTruthy();
     fireEvent.click(appsButton as Element);
 
-    expect(openItem).toHaveBeenCalledWith(SIDE_DOCK_BUILT_IN_ITEMS[0]);
+    expect(openItem).toHaveBeenCalledWith(builtInItems[0]);
   });
 
   it('does not highlight the default docs tab while DocBrowser is closed', () => {
@@ -55,4 +56,58 @@ describe('SideDock', () => {
     expect(docsButton?.className).toContain('bg-transparent');
     expect(docsButton?.className).not.toContain('shadow-sm');
   });
+
+  it('renders removable pinned entries and calls manager unpin by item id', () => {
+    const manager = {
+      openItem: vi.fn(),
+      unpinItem: vi.fn(),
+    } as unknown as SideDockManager;
+    const docBrowserManager = new DocBrowserManager();
+    useSideDockStore.getState().setPinnedItems([
+      {
+        createdAt: '2026-06-02T00:00:00.000Z',
+        icon: { type: 'builtin', name: 'docs' },
+        id: 'pinned-docs-custom',
+        label: 'Custom Docs',
+        target: { type: 'right-panel-resource', uri: 'nextclaw://docs/custom' },
+      },
+    ]);
+
+    render(
+      <DocBrowserProvider manager={docBrowserManager}>
+        <SideDock manager={manager} />
+      </DocBrowserProvider>,
+    );
+
+    expect(document.querySelector('[data-side-dock-item-id="pinned-docs-custom"]')).toBeTruthy();
+
+    fireEvent.click(screen.getByTitle('Remove shortcut'));
+
+    expect(manager.unpinItem).toHaveBeenCalledWith('pinned-docs-custom');
+  });
+
+  it('renders text icons for pinned entries', () => {
+    const manager = {
+      openItem: vi.fn(),
+      unpinItem: vi.fn(),
+    } as unknown as SideDockManager;
+    const docBrowserManager = new DocBrowserManager();
+    useSideDockStore.getState().setPinnedItems([
+      {
+        createdAt: '2026-06-02T00:00:00.000Z',
+        icon: { type: 'text', value: 'D' },
+        id: 'pinned-panel-app-demo',
+        label: 'Demo App',
+        target: { type: 'right-panel-resource', uri: 'nextclaw://panel-app/demo' },
+      },
+    ]);
+
+    render(
+      <DocBrowserProvider manager={docBrowserManager}>
+        <SideDock manager={manager} />
+      </DocBrowserProvider>,
+    );
+
+    expect(screen.getByText('D')).toBeTruthy();
+  });
 });

package/src/features/side-dock/components/side-dock.tsx

@@ -1,7 +1,7 @@
-import { AppWindow, BookOpen, Boxes, Plus } from 'lucide-react';
+import { AppWindow, BookOpen, Boxes, Plus, X } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import type { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
-import { SIDE_DOCK_BUILT_IN_ITEMS } from '@/features/side-dock/configs/side-dock-built-in-items.config';
+import { getSideDockBuiltInItems } from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type {
   SideDockIconName,
@@ -30,6 +30,7 @@ const SIDE_DOCK_ICON_COMPONENTS: Record<SideDockIconName, LucideIcon> = {
   apps: Boxes,
   docs: BookOpen,
   'new-tab': Plus,
+  'panel-app': AppWindow,
   'service-apps': AppWindow,
 };
 
@@ -37,6 +38,13 @@ function SideDockItemIconView({ icon }: { icon: SideDockItemIcon }) {
   if (icon.type === 'url') {
     return <img src={icon.url} alt="" className="h-5 w-5 rounded object-cover" />;
   }
+  if (icon.type === 'text') {
+    return (
+      <span className="max-w-7 truncate text-center text-[13px] font-semibold leading-none" aria-hidden="true">
+        {icon.value}
+      </span>
+    );
+  }
 
   const Icon = SIDE_DOCK_ICON_COMPONENTS[icon.name];
   return <Icon className="h-5 w-5" aria-hidden="true" />;
@@ -46,56 +54,100 @@ function SideDockButton({
   active,
   item,
   onOpen,
+  onUnpin,
 }: {
   active: boolean;
   item: SideDockItem;
   onOpen: (item: SideDockItem) => void;
+  onUnpin: (item: SideDockItem) => void;
 }) {
-  const label = t(item.labelKey);
+  const { label } = item;
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          aria-label={label}
-          title={label}
-          data-side-dock-item-id={item.id}
-          onClick={() => onOpen(item)}
-          className={cn(
-            'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            active
-              ? 'bg-primary/10 text-primary'
-              : 'bg-transparent',
-          )}
-        >
-          <SideDockItemIconView icon={item.icon} />
-        </button>
-      </TooltipTrigger>
+      <div className="group relative">
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label={label}
+            title={label}
+            data-side-dock-item-id={item.id}
+            onClick={() => onOpen(item)}
+            className={cn(
+              'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
+              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              active
+                ? 'bg-primary/10 text-primary'
+                : 'bg-transparent',
+            )}
+          >
+            <SideDockItemIconView icon={item.icon} />
+          </button>
+        </TooltipTrigger>
+        {item.removable ? (
+          <button
+            type="button"
+            aria-label={t('sideDockUnpinItem')}
+            title={t('sideDockUnpinItem')}
+            onClick={(event) => {
+              event.stopPropagation();
+              onUnpin(item);
+            }}
+            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <X className="h-3 w-3" aria-hidden="true" />
+          </button>
+        ) : null}
+      </div>
       <TooltipContent side="left">{label}</TooltipContent>
     </Tooltip>
   );
 }
 
+function normalizeSideDockUri(uri?: string): string {
+  return uri?.trim() ?? '';
+}
+
 function isSideDockItemActive(
   item: SideDockItem,
   isDocBrowserOpen: boolean,
   currentTab?: DocBrowserTab,
+  hasExactActiveItem = false,
 ): boolean {
   if (!isDocBrowserOpen || !currentTab) {
     return false;
   }
-  if (currentTab.currentUrl === item.target.uri) {
+  const itemUri = normalizeSideDockUri(item.target.uri);
+  const currentResourceUri = normalizeSideDockUri(currentTab.resourceUri);
+  if (
+    (currentResourceUri && currentResourceUri === itemUri)
+    || normalizeSideDockUri(currentTab.currentUrl) === itemUri
+  ) {
     return true;
   }
+  if (hasExactActiveItem) {
+    return false;
+  }
   return item.id === 'docs' && currentTab.kind === 'docs';
 }
 
+function hasExactActiveSideDockItem(items: SideDockItem[], currentTab?: DocBrowserTab): boolean {
+  if (!currentTab) {
+    return false;
+  }
+  const currentResourceUri = normalizeSideDockUri(currentTab.resourceUri);
+  const currentUrl = normalizeSideDockUri(currentTab.currentUrl);
+  return items.some((item) => {
+    const itemUri = normalizeSideDockUri(item.target.uri);
+    return itemUri === currentResourceUri || itemUri === currentUrl;
+  });
+}
+
 export function SideDock({ manager }: SideDockProps) {
   const pinnedItems = useSideDockStore((state) => state.pinnedItems);
   const { currentTab, isOpen } = useDocBrowser();
-  const items = mergeSideDockItems(SIDE_DOCK_BUILT_IN_ITEMS, pinnedItems);
+  const items = mergeSideDockItems(getSideDockBuiltInItems(), pinnedItems);
+  const hasExactActiveItem = hasExactActiveSideDockItem(items, currentTab);
 
   return (
     <TooltipProvider delayDuration={250}>
@@ -106,9 +158,10 @@ export function SideDock({ manager }: SideDockProps) {
         {items.map((item) => (
           <SideDockButton
             key={item.id}
-            active={isSideDockItemActive(item, isOpen, currentTab)}
+            active={isSideDockItemActive(item, isOpen, currentTab, hasExactActiveItem)}
             item={item}
             onOpen={manager.openItem}
+            onUnpin={(dockItem) => manager.unpinItem(dockItem.id)}
           />
         ))}
       </aside>