@workbench-kit/shell-react 0.0.2-prototype.0.2.6

package/src/explorer-reveal.ts

@@ -0,0 +1,112 @@
+import type { WorkspaceSelectionState } from '@workbench-kit/workspace';
+
+import {
+  BUILTIN_EXPLORER_FOCUS_COMMAND_ID,
+  BUILTIN_EXPLORER_REVEAL_COMMAND_ID,
+  BUILTIN_EXPLORER_VIEW_CONTAINER_ID,
+  resolveExplorerRevealPath,
+} from './explorer-view-data.js';
+
+export {
+  BUILTIN_EXPLORER_FOCUS_COMMAND_ID,
+  BUILTIN_EXPLORER_REVEAL_COMMAND_ID,
+  BUILTIN_EXPLORER_VIEW_CONTAINER_ID,
+  resolveExplorerRevealPath,
+};
+
+type ExplorerRevealListener = (path: string) => void;
+
+let pendingRevealPath: string | undefined;
+let revealListener: ExplorerRevealListener | undefined;
+
+export function publishExplorerRevealRequest(path: string): void {
+  const normalizedPath = path.trim();
+  if (!normalizedPath) {
+    return;
+  }
+
+  pendingRevealPath = normalizedPath;
+  revealListener?.(normalizedPath);
+}
+
+export function subscribeExplorerRevealRequest(listener: ExplorerRevealListener): () => void {
+  revealListener = listener;
+
+  if (pendingRevealPath) {
+    listener(pendingRevealPath);
+    pendingRevealPath = undefined;
+  }
+
+  return () => {
+    if (revealListener === listener) {
+      revealListener = undefined;
+    }
+  };
+}
+
+export function applyExplorerPathReveal(
+  path: string,
+  {
+    revealFolder,
+    setSelection,
+  }: {
+    revealFolder: (folderPath: string) => void;
+    setSelection: (selection: WorkspaceSelectionState) => void;
+  },
+): void {
+  const normalizedPath = path.trim();
+  if (!normalizedPath) {
+    return;
+  }
+
+  workspaceExplorerParentPaths(normalizedPath).forEach((folderPath) => {
+    revealFolder(folderPath);
+  });
+  setSelection({
+    anchorPath: normalizedPath,
+    focusedPath: normalizedPath,
+    paths: [normalizedPath],
+  });
+}
+
+function workspaceExplorerParentPaths(path: string): string[] {
+  const segments = path.split('/').filter(Boolean);
+  return segments.slice(0, -1).map((_, index) => segments.slice(0, index + 1).join('/'));
+}
+
+export function isExplorerHostCommand(commandId: string): boolean {
+  return (
+    commandId === BUILTIN_EXPLORER_REVEAL_COMMAND_ID ||
+    commandId === BUILTIN_EXPLORER_FOCUS_COMMAND_ID
+  );
+}
+
+export async function runExplorerHostCommandSideEffects(
+  commandId: string,
+  args: readonly unknown[],
+  result: unknown,
+  {
+    focusExplorerView,
+    revealPath,
+  }: {
+    focusExplorerView: () => void;
+    revealPath: (path: string) => void;
+  },
+): Promise<void> {
+  if (commandId === BUILTIN_EXPLORER_FOCUS_COMMAND_ID) {
+    focusExplorerView();
+    return;
+  }
+
+  if (commandId !== BUILTIN_EXPLORER_REVEAL_COMMAND_ID) {
+    return;
+  }
+
+  const path = resolveExplorerRevealPath(args[0], result);
+  if (!path) {
+    return;
+  }
+
+  focusExplorerView();
+  revealPath(path);
+}

package/src/explorer-view-data.ts

@@ -0,0 +1,58 @@
+export const BUILTIN_EXPLORER_VIEW_RENDER_KIND = 'workbench-kit.builtin.explorer.view' as const;
+export const BUILTIN_EXPLORER_VIEW_CONTAINER_ID = 'explorer' as const;
+export const BUILTIN_EXPLORER_MOVE_COMMAND_ID = 'workbench-kit.builtin.explorer.move' as const;
+export const BUILTIN_EXPLORER_REFRESH_COMMAND_ID =
+  'workbench-kit.builtin.explorer.refresh' as const;
+export const BUILTIN_EXPLORER_REVEAL_COMMAND_ID = 'workbench-kit.builtin.explorer.reveal' as const;
+export const BUILTIN_EXPLORER_FOCUS_COMMAND_ID = 'workbench-kit.builtin.explorer.focus' as const;
+
+interface ExplorerRevealCommandResult {
+  readonly path?: string | undefined;
+}
+
+export interface BuiltinExplorerViewRenderData {
+  readonly kind: typeof BUILTIN_EXPLORER_VIEW_RENDER_KIND;
+}
+
+export function isBuiltinExplorerViewRenderData(
+  value: unknown,
+): value is BuiltinExplorerViewRenderData {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as { kind?: unknown }).kind === BUILTIN_EXPLORER_VIEW_RENDER_KIND
+  );
+}
+
+export function resolveExplorerRevealPath(input: unknown, result: unknown): string | undefined {
+  const resultPath = readRevealPath(result);
+  if (resultPath) {
+    return resultPath;
+  }
+
+  return readRevealPath(input);
+}
+
+function readRevealPath(value: unknown): string | undefined {
+  if (typeof value === 'string') {
+    const normalizedPath = value.trim();
+    return normalizedPath.length > 0 ? normalizedPath : undefined;
+  }
+
+  if (typeof value !== 'object' || value === null) {
+    return undefined;
+  }
+
+  const record = value as ExplorerRevealCommandResult & {
+    paths?: readonly string[] | undefined;
+  };
+  const directPath = typeof record.path === 'string' ? record.path.trim() : '';
+  if (directPath) {
+    return directPath;
+  }
+
+  const firstPath = record.paths?.find(
+    (path) => typeof path === 'string' && path.trim().length > 0,
+  );
+  return firstPath?.trim();
+}

package/src/explorer-view.tsx

@@ -0,0 +1,224 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+} from 'react';
+import { ContextMenu, type ContextMenuItem } from '@workbench-kit/react/overlay';
+import { ViewEmptyState } from '@workbench-kit/react/primitives';
+import {
+  WORKBENCH_WORKSPACE_COPY_PATH_COMMAND_ID,
+  WORKBENCH_WORKSPACE_DELETE_COMMAND_ID,
+  WORKBENCH_WORKSPACE_OPEN_COMMAND_ID,
+} from '@workbench-kit/react/workbench/commands';
+import {
+  WorkspaceExplorerPanel,
+  buildWorkspaceExplorerNodes,
+  resolveWorkspaceExplorerSectionTitle,
+  useWorkspaceExplorerController,
+} from '@workbench-kit/react/workbench/workspace';
+import { type WorkspaceExplorerItemContextMenuMeta } from '@workbench-kit/react/workbench/workspace/explorer';
+import { resolveWorkspaceCreateParentPath, type WorkspaceTreeNode } from '@workbench-kit/workspace';
+import { createCommandWorkspaceExplorerPort } from './createCommandWorkspaceExplorerPort.js';
+import { createExplorerItemContextMenuItems } from './explorer-context-menu.js';
+import { applyExplorerPathReveal, subscribeExplorerRevealRequest } from './explorer-reveal.js';
+import {
+  BUILTIN_EXPLORER_REFRESH_COMMAND_ID,
+  type BuiltinExplorerViewRenderData,
+} from './explorer-view-data.js';
+import { useWorkbench } from './provider.js';
+import { useActiveWorkspacePath } from './use-active-workspace-path.js';
+import { useActiveEditorTab } from './use-editor.js';
+import { isWorkspaceResourceService, useWorkspaceResourceState } from './workspace-view-state.js';
+
+export type { BuiltinExplorerViewRenderData };
+export {
+  BUILTIN_EXPLORER_MOVE_COMMAND_ID,
+  BUILTIN_EXPLORER_REFRESH_COMMAND_ID,
+  BUILTIN_EXPLORER_VIEW_RENDER_KIND,
+  isBuiltinExplorerViewRenderData,
+} from './explorer-view-data.js';
+
+interface ExplorerContextMenuState {
+  readonly ariaLabel: string;
+  readonly items: ContextMenuItem[];
+  readonly x: number;
+  readonly y: number;
+}
+
+export function BuiltinExplorerView() {
+  const { executeCommand, extensionRegistry, workspaceHostPort } = useWorkbench();
+  const activeTab = useActiveEditorTab();
+  const workspaceService = isWorkspaceResourceService(workspaceHostPort?.service)
+    ? workspaceHostPort.service
+    : undefined;
+  const workspaceState = useWorkspaceResourceState(workspaceService);
+  const [contextMenu, setContextMenu] = useState<ExplorerContextMenuState | null>(null);
+  const [seededExpandedPaths, setSeededExpandedPaths] = useState(false);
+
+  const activePath = useActiveWorkspacePath(activeTab?.resourceUri);
+
+  const port = useMemo(
+    () =>
+      createCommandWorkspaceExplorerPort({
+        executeCommand,
+        workspaceState,
+      }),
+    [executeCommand, workspaceState],
+  );
+
+  const explorer = useWorkspaceExplorerController({
+    activePath,
+    initialExpandedPaths: workspaceState?.expandedPaths,
+    port,
+  });
+  const explorerRef = useRef(explorer);
+  explorerRef.current = explorer;
+
+  useEffect(() => {
+    if (!workspaceState || seededExpandedPaths) {
+      return;
+    }
+
+    workspaceState.expandedPaths.forEach((path) => {
+      explorer.revealFolder(path);
+    });
+    setSeededExpandedPaths(true);
+  }, [explorer, seededExpandedPaths, workspaceState]);
+
+  useEffect(
+    () =>
+      subscribeExplorerRevealRequest((path) => {
+        const currentExplorer = explorerRef.current;
+        applyExplorerPathReveal(path, {
+          revealFolder: currentExplorer.revealFolder,
+          setSelection: (selection) => {
+            currentExplorer.handleSelectionChange(selection, { mode: 'single', reason: 'click' });
+          },
+        });
+      }),
+    [],
+  );
+
+  const nodes = useMemo(
+    () =>
+      buildWorkspaceExplorerNodes({
+        files: workspaceState?.files ?? [],
+        folders: workspaceState?.folders ?? [],
+      }),
+    [workspaceState],
+  );
+
+  const sectionTitle = useMemo(
+    () => resolveWorkspaceExplorerSectionTitle(workspaceState?.files ?? []),
+    [workspaceState?.files],
+  );
+
+  const createParentPath = useMemo(
+    () =>
+      resolveWorkspaceCreateParentPath(
+        explorer.selection.focusedPath,
+        workspaceState?.folders ?? [],
+      ),
+    [explorer.selection.focusedPath, workspaceState?.folders],
+  );
+
+  const executeWorkspaceCommand = useCallback(
+    async (commandId: string, payload?: unknown) => {
+      await executeCommand(commandId, payload);
+    },
+    [executeCommand],
+  );
+
+  const handleItemContextMenu = useCallback(
+    (
+      event: ReactMouseEvent<HTMLButtonElement>,
+      node: WorkspaceTreeNode,
+      meta: WorkspaceExplorerItemContextMenuMeta,
+    ) => {
+      event.preventDefault();
+      setContextMenu({
+        ariaLabel: `${node.name} menu`,
+        items: createExplorerItemContextMenuItems({
+          actionPaths: meta.actionPaths,
+          copyPaths: (paths) => {
+            void executeWorkspaceCommand(WORKBENCH_WORKSPACE_COPY_PATH_COMMAND_ID, { paths });
+          },
+          createFile: (parentPath) => explorer.startCreate('create-file', parentPath),
+          createFolder: (parentPath) => explorer.startCreate('create-folder', parentPath),
+          deleteTargets: (paths) => {
+            void executeWorkspaceCommand(WORKBENCH_WORKSPACE_DELETE_COMMAND_ID, {
+              kind: node.type,
+              paths,
+            });
+          },
+          executeExtensionCommand: (commandId) => executeCommand(commandId),
+          extensionRegistry,
+          files: workspaceState?.files ?? [],
+          node,
+          openFiles: (paths) => {
+            void executeWorkspaceCommand(WORKBENCH_WORKSPACE_OPEN_COMMAND_ID, {
+              kind: 'file',
+              paths,
+            });
+          },
+          revealFolder: explorer.revealFolder,
+          renameTarget: () => explorer.startRename(node, meta.actionPaths),
+        }),
+        x: event.clientX,
+        y: event.clientY,
+      });
+    },
+    [executeWorkspaceCommand, explorer, workspaceState?.files],
+  );
+
+  if (!workspaceService || !workspaceState) {
+    return (
+      <ViewEmptyState className="workbench-explorer-view">
+        No virtual workspace is registered.
+      </ViewEmptyState>
+    );
+  }
+
+  return (
+    <>
+      <WorkspaceExplorerPanel
+        activePath={activePath}
+        aria-label="Workspace Explorer"
+        expandedPaths={explorer.expandedPaths}
+        focusedPath={explorer.selection.focusedPath}
+        inlineEdit={explorer.inlineEdit}
+        nodes={nodes}
+        onNewFile={() => explorer.startCreate('create-file', createParentPath)}
+        onNewFolder={() => explorer.startCreate('create-folder', createParentPath)}
+        onRefresh={() => {
+          void executeWorkspaceCommand(BUILTIN_EXPLORER_REFRESH_COMMAND_ID);
+        }}
+        sectionTitle={sectionTitle}
+        selectedPaths={explorer.selection.paths}
+        selectionAnchorPath={explorer.selection.anchorPath}
+        onActivateFile={explorer.handleActivateFile}
+        onItemContextMenu={handleItemContextMenu}
+        onInlineEditCancel={explorer.cancelInlineEdit}
+        onInlineEditCommit={explorer.handleInlineEditCommit}
+        onInlineEditValueChange={explorer.handleInlineEditValueChange}
+        onRequestDelete={explorer.handleRequestDelete}
+        onRequestMove={explorer.handleRequestMove}
+        onRequestRename={explorer.handleRequestRename}
+        onSelectionChange={explorer.handleSelectionChange}
+        onToggleFolder={explorer.handleToggleFolder}
+      />
+      {contextMenu ? (
+        <ContextMenu
+          ariaLabel={contextMenu.ariaLabel}
+          items={contextMenu.items}
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/extension-context-menu.ts

@@ -0,0 +1,52 @@
+import type { ContextMenuItem } from '@workbench-kit/react/overlay';
+import { commandMenuItemsToContextMenuItems } from '@workbench-kit/react/workbench/commands';
+import {
+  resolveWorkbenchMenuContributions,
+  type ExtensionRegistry,
+} from '@workbench-kit/workbench-core';
+
+export interface ExtensionContextMenuInput {
+  readonly contextKeys?: object | undefined;
+  readonly executeCommand?: ((commandId: string) => unknown) | undefined;
+  readonly extensionRegistry?: ExtensionRegistry | undefined;
+  readonly menu: string;
+}
+
+export function createExtensionContextMenuItems({
+  contextKeys,
+  executeCommand,
+  extensionRegistry,
+  menu,
+}: ExtensionContextMenuInput): ContextMenuItem[] {
+  if (!extensionRegistry || !executeCommand) {
+    return [];
+  }
+
+  const menuItems = resolveWorkbenchMenuContributions({
+    commandRegistry: extensionRegistry.commands,
+    context: undefined,
+    contextKeys,
+    menu,
+    menuItems: extensionRegistry.menus.getMenuItems(menu),
+  });
+
+  return commandMenuItemsToContextMenuItems([...menuItems], (commandId) => {
+    void executeCommand(commandId);
+  });
+}
+
+export function appendExtensionContextMenuItems(
+  baseItems: readonly ContextMenuItem[],
+  extensionItems: readonly ContextMenuItem[],
+  separatorId: string,
+): ContextMenuItem[] {
+  if (extensionItems.length === 0) {
+    return [...baseItems];
+  }
+
+  if (baseItems.length === 0) {
+    return [...extensionItems];
+  }
+
+  return [...baseItems, { id: separatorId, type: 'separator' }, ...extensionItems];
+}