@nextclaw/ui 0.14.4 → 0.15.0

package/src/features/side-dock/managers/__tests__/side-dock.manager.test.ts

@@ -1,9 +1,24 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  getSideDockBuiltInItems,
+  SIDE_DOCK_GITHUB_PROJECT_ITEM_ID,
+  SIDE_DOCK_GITHUB_PROJECT_URL,
+} from '@/features/side-dock/configs/side-dock-built-in-items.config';
 import { SideDockManager } from '@/features/side-dock/managers/side-dock.manager';
 import { useSideDockStore } from '@/features/side-dock/stores/side-dock.store';
 import type { SideDockItem } from '@/features/side-dock/types/side-dock.types';
 import type { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 
+const mocks = vi.hoisted(() => ({
+  openExternalUrl: vi.fn(),
+}));
+
+vi.mock('@/shared/lib/host-capabilities', () => ({
+  hostCapabilityManager: {
+    openExternalUrl: mocks.openExternalUrl,
+  },
+}));
+
 const customItem: SideDockItem = {
   builtIn: false,
   icon: { type: 'builtin', name: 'docs' },
@@ -16,14 +31,17 @@ const customItem: SideDockItem = {
 describe('SideDockManager', () => {
   beforeEach(() => {
     window.localStorage.clear();
+    mocks.openExternalUrl.mockReset();
+    mocks.openExternalUrl.mockResolvedValue({ opened: true });
+    useSideDockStore.getState().setVisible(true);
     useSideDockStore.getState().setPinnedItems([]);
   });
 
-  it('opens right panel resource items through DocBrowserManager', () => {
+  it('opens right panel resource items through DocBrowserManager', async () => {
     const open = vi.fn();
     const manager = new SideDockManager({ open } as unknown as DocBrowserManager);
 
-    manager.openItem(customItem);
+    await manager.openItem(customItem);
 
     expect(open).toHaveBeenCalledWith('nextclaw://docs/custom', {
       dockIcon: { type: 'builtin', name: 'docs' },
@@ -31,6 +49,18 @@ describe('SideDockManager', () => {
     });
   });
 
+  it('opens the GitHub project shortcut through host capabilities', async () => {
+    const open = vi.fn();
+    const manager = new SideDockManager({ open } as unknown as DocBrowserManager);
+    const githubItem = getSideDockBuiltInItems().find((item) => item.id === SIDE_DOCK_GITHUB_PROJECT_ITEM_ID);
+
+    expect(githubItem).toBeTruthy();
+    await manager.openItem(githubItem as SideDockItem);
+
+    expect(open).not.toHaveBeenCalled();
+    expect(mocks.openExternalUrl).toHaveBeenCalledWith(SIDE_DOCK_GITHUB_PROJECT_URL);
+  });
+
   it('pins removable items and keeps built-in items immutable', () => {
     const manager = new SideDockManager({ open: vi.fn() } as unknown as DocBrowserManager);
 

package/src/features/side-dock/managers/side-dock.manager.ts

@@ -10,6 +10,7 @@ import {
   createPinnedSideDockItem,
   mergeSideDockItems,
 } from '@/features/side-dock/utils/side-dock-item.utils';
+import { hostCapabilityManager } from '@/shared/lib/host-capabilities';
 import type { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import type {
   DocBrowserDockIcon,
@@ -20,6 +21,7 @@ const SIDE_DOCK_PINNED_ITEM_ID_PREFIX = 'pinned';
 const SIDE_DOCK_ICON_NAMES = new Set<SideDockIconName>([
   'apps',
   'docs',
+  'github',
   'new-tab',
   'panel-app',
   'service-apps',
@@ -78,12 +80,16 @@ export class SideDockManager {
     useSideDockStore.getState().pinnedItems,
   );
 
-  openItem = (item: Pick<SideDockItem, 'icon' | 'label' | 'target'>): void => {
+  openItem = async (item: Pick<SideDockItem, 'icon' | 'label' | 'target'>): Promise<void> => {
     if (item.target.type === 'right-panel-resource') {
       this.docBrowserManager.open(item.target.uri, {
         dockIcon: item.icon,
         title: item.label,
       });
+      return;
+    }
+    if (item.target.type === 'external-url') {
+      await hostCapabilityManager.openExternalUrl(item.target.url);
     }
   };
 
@@ -130,18 +136,19 @@ export class SideDockManager {
   };
 
   pinItem = (item: SideDockItem, createdAt: string = new Date().toISOString()): void => {
-    if (!item.removable) {
+    if (!item.removable || item.target.type !== 'right-panel-resource') {
       return;
     }
     const uri = normalizeSideDockResourceUri(item.target.uri);
+    const resourceItem = {
+      ...item,
+      target: { type: 'right-panel-resource' as const, uri },
+    };
     this.setPinnedItems((items) => {
       if (items.some((pinnedItem) => pinnedItem.id === item.id || normalizeSideDockResourceUri(pinnedItem.target.uri) === uri)) {
         return items;
       }
-      return [...items, createPinnedSideDockItem({
-        ...item,
-        target: { ...item.target, uri },
-      }, createdAt)];
+      return [...items, createPinnedSideDockItem(resourceItem, createdAt)];
     });
   };
 
@@ -176,6 +183,9 @@ export class SideDockManager {
 
   private findItemByUri = (uri: string): SideDockItem | undefined => {
     const normalized = normalizeSideDockResourceUri(uri);
-    return this.getItems().find((item) => normalizeSideDockResourceUri(item.target.uri) === normalized);
+    return this.getItems().find((item) => (
+      item.target.type === 'right-panel-resource'
+      && normalizeSideDockResourceUri(item.target.uri) === normalized
+    ));
   };
 }

package/src/features/side-dock/stores/side-dock.store.ts

@@ -7,7 +7,9 @@ const SIDE_DOCK_STORAGE_KEY = 'nextclaw.side-dock.state';
 const SIDE_DOCK_STORAGE_VERSION = 1;
 
 type SideDockStore = {
+  isVisible: boolean;
   pinnedItems: SideDockPinnedItem[];
+  setVisible: (isVisible: boolean) => void;
   setPinnedItems: (items: SideDockPinnedItem[]) => void;
 };
 
@@ -18,7 +20,9 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 export const useSideDockStore = create<SideDockStore>()(
   persist(
     (set) => ({
+      isVisible: true,
       pinnedItems: [],
+      setVisible: (isVisible) => set({ isVisible }),
       setPinnedItems: (items) => set({ pinnedItems: normalizeSideDockPinnedItems(items) }),
     }),
     {
@@ -26,14 +30,19 @@ export const useSideDockStore = create<SideDockStore>()(
       version: SIDE_DOCK_STORAGE_VERSION,
       storage: createJSONStorage(() => window.localStorage),
       partialize: (state) => ({
+        isVisible: state.isVisible,
         pinnedItems: state.pinnedItems,
       }),
       merge: (persistedState, currentState) => {
         const pinnedItems = isRecord(persistedState)
           ? normalizeSideDockPinnedItems(persistedState.pinnedItems)
           : [];
+        const isVisible = isRecord(persistedState) && typeof persistedState.isVisible === 'boolean'
+          ? persistedState.isVisible
+          : true;
         return {
           ...currentState,
+          isVisible,
           pinnedItems,
         };
       },

package/src/features/side-dock/types/side-dock.types.ts

@@ -1,11 +1,18 @@
 export type SideDockItemId = string;
 
-export type SideDockItemTarget = {
+export type SideDockResourceItemTarget = {
   type: 'right-panel-resource';
   uri: string;
 };
 
-export type SideDockIconName = 'apps' | 'docs' | 'new-tab' | 'panel-app' | 'service-apps';
+export type SideDockExternalUrlTarget = {
+  type: 'external-url';
+  url: string;
+};
+
+export type SideDockItemTarget = SideDockResourceItemTarget | SideDockExternalUrlTarget;
+
+export type SideDockIconName = 'apps' | 'docs' | 'github' | 'new-tab' | 'panel-app' | 'service-apps';
 
 export type SideDockItemIcon =
   | { type: 'builtin'; name: SideDockIconName }
@@ -26,7 +33,7 @@ export type SideDockPinnedItem = {
   icon: SideDockItemIcon;
   id: SideDockItemId;
   label: string;
-  target: SideDockItemTarget;
+  target: SideDockResourceItemTarget;
 };
 
 export type SideDockResourceDockState = {

package/src/features/side-dock/utils/side-dock-item.utils.ts

@@ -3,11 +3,13 @@ import type {
   SideDockItem,
   SideDockItemIcon,
   SideDockPinnedItem,
+  SideDockResourceItemTarget,
 } from '@/features/side-dock/types/side-dock.types';
 
 const SIDE_DOCK_BUILTIN_ICON_NAMES: SideDockIconName[] = [
   'apps',
   'docs',
+  'github',
   'new-tab',
   'panel-app',
   'service-apps',
@@ -99,7 +101,10 @@ export function normalizeSideDockPinnedItems(value: unknown): SideDockPinnedItem
   return Array.from(itemsById.values());
 }
 
-export function createPinnedSideDockItem(item: SideDockItem, createdAt: string): SideDockPinnedItem {
+export function createPinnedSideDockItem(
+  item: SideDockItem & { target: SideDockResourceItemTarget },
+  createdAt: string,
+): SideDockPinnedItem {
   return {
     createdAt,
     icon: item.icon,
@@ -109,6 +114,10 @@ export function createPinnedSideDockItem(item: SideDockItem, createdAt: string):
   };
 }
 
+function getSideDockResourceUri(item: SideDockItem | SideDockPinnedItem): string | null {
+  return item.target.type === 'right-panel-resource' ? item.target.uri : null;
+}
+
 export function createSideDockItemFromPinnedItem(item: SideDockPinnedItem): SideDockItem {
   return {
     builtIn: false,
@@ -125,7 +134,11 @@ export function mergeSideDockItems(
   pinnedItems: SideDockPinnedItem[],
 ): SideDockItem[] {
   const seenIds = new Set(builtInItems.map((item) => item.id));
-  const seenUris = new Set(builtInItems.map((item) => item.target.uri));
+  const seenUris = new Set(
+    builtInItems
+      .map(getSideDockResourceUri)
+      .filter((uri): uri is string => uri !== null),
+  );
   const customItems = pinnedItems
     .filter((item) => !seenIds.has(item.id) && !seenUris.has(item.target.uri))
     .map(createSideDockItemFromPinnedItem);