@workbench-kit/react 0.0.1-prototype.0

package/src/workbench/workspace/WorkspaceEditor.tsx

@@ -0,0 +1,226 @@
+import Editor, { loader, type OnMount } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import { Panel, PanelBody, PanelHeader } from '../../layout/Panel';
+import { Badge } from '../../primitives/Badge';
+import { IconButton } from '../../primitives/IconButton';
+import { Toolbar } from '../../primitives/Toolbar';
+import { extensionOfPath } from './path';
+import { WorkspaceFileIcon } from './WorkspaceFileIcon';
+import type { WorkspaceFile } from './types';
+
+loader.config({ monaco });
+
+export type WorkspaceEditorTheme = 'dark' | 'light';
+
+const MONACO_DARK_THEME_ID = 'newchobo-workbench-dark';
+const MONACO_LIGHT_THEME_ID = 'newchobo-workbench-light';
+let monacoThemeDefined = false;
+
+function defineMonacoWorkbenchTheme(monacoInstance: typeof monaco) {
+  if (monacoThemeDefined) return;
+
+  monacoInstance.editor.defineTheme(MONACO_DARK_THEME_ID, {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': '#0d1117',
+      'editor.foreground': '#e6edf3',
+      'editorGutter.background': '#0d1117',
+      'editorLineNumber.foreground': '#484f58',
+      'editorLineNumber.activeForeground': '#7d8590',
+      'editorCursor.foreground': '#e6edf3',
+      'editor.lineHighlightBackground': '#161b22',
+      'editor.selectionBackground': '#264f78',
+      'editor.inactiveSelectionBackground': '#1f3a53',
+      'editorWidget.background': '#161b22',
+      'editorWidget.border': '#30363d',
+      'editorHoverWidget.background': '#161b22',
+      'editorHoverWidget.border': '#30363d',
+      'editorSuggestWidget.background': '#161b22',
+      'editorSuggestWidget.border': '#30363d',
+      focusBorder: '#2f81f7',
+      'input.background': '#0d1117',
+      'input.border': '#30363d',
+      'minimap.background': '#0d1117',
+      'scrollbarSlider.background': '#30363d66',
+      'scrollbarSlider.hoverBackground': '#484f5888',
+      'scrollbarSlider.activeBackground': '#7d8590aa',
+      'editorIndentGuide.background1': '#30363d',
+      'editorIndentGuide.activeBackground1': '#7d8590',
+      'editorWhitespace.foreground': '#30363d',
+      'editorBracketMatch.background': '#21262d',
+      'editorBracketMatch.border': '#7d8590',
+      'editorOverviewRuler.border': '#0d1117',
+    },
+  });
+
+  monacoInstance.editor.defineTheme(MONACO_LIGHT_THEME_ID, {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': '#ffffff',
+      'editor.foreground': '#1f2328',
+      'editorGutter.background': '#ffffff',
+      'editorLineNumber.foreground': '#9198a1',
+      'editorLineNumber.activeForeground': '#656d76',
+      'editorCursor.foreground': '#1f2328',
+      'editor.lineHighlightBackground': '#f6f8fa',
+      'editor.selectionBackground': '#bfdbfe',
+      'editor.inactiveSelectionBackground': '#dbeafe',
+      'editorWidget.background': '#f6f8fa',
+      'editorWidget.border': '#d0d7de',
+      'editorHoverWidget.background': '#f6f8fa',
+      'editorHoverWidget.border': '#d0d7de',
+      'editorSuggestWidget.background': '#f6f8fa',
+      'editorSuggestWidget.border': '#d0d7de',
+      focusBorder: '#0969da',
+      'input.background': '#ffffff',
+      'input.border': '#d0d7de',
+      'minimap.background': '#ffffff',
+      'scrollbarSlider.background': '#d0d7de66',
+      'scrollbarSlider.hoverBackground': '#9198a188',
+      'scrollbarSlider.activeBackground': '#656d76aa',
+      'editorIndentGuide.background1': '#d0d7de',
+      'editorIndentGuide.activeBackground1': '#656d76',
+      'editorWhitespace.foreground': '#d0d7de',
+      'editorBracketMatch.background': '#eaeef2',
+      'editorBracketMatch.border': '#656d76',
+      'editorOverviewRuler.border': '#ffffff',
+    },
+  });
+  monacoThemeDefined = true;
+}
+
+export function monacoThemeForWorkspaceTheme(theme: WorkspaceEditorTheme) {
+  return theme === 'light' ? MONACO_LIGHT_THEME_ID : MONACO_DARK_THEME_ID;
+}
+
+export function languageForFile(path: string, mimeType?: string) {
+  const extension = extensionOfPath(path);
+  if (mimeType === 'application/json') return 'json';
+  if (mimeType === 'text/css') return 'css';
+  if (mimeType === 'text/html') return 'html';
+  if (mimeType === 'text/markdown') return 'markdown';
+
+  switch (extension) {
+    case 'css':
+      return 'css';
+    case 'html':
+      return 'html';
+    case 'cjs':
+    case 'js':
+    case 'jsx':
+    case 'mjs':
+      return 'javascript';
+    case 'json':
+      return 'json';
+    case 'md':
+    case 'mdx':
+      return 'markdown';
+    case 'ts':
+    case 'tsx':
+      return 'typescript';
+    case 'xml':
+      return 'xml';
+    case 'yaml':
+    case 'yml':
+      return 'yaml';
+    default:
+      return 'plaintext';
+  }
+}
+
+export interface WorkspaceEditorProps {
+  compact?: boolean;
+  file: WorkspaceFile;
+  onChange?: (content: string) => void;
+  onSave?: (content: string) => void;
+  readOnly?: boolean;
+  showHeader?: boolean;
+  theme?: WorkspaceEditorTheme;
+  value?: string;
+}
+
+export function WorkspaceEditor({
+  compact,
+  file,
+  onChange,
+  onSave,
+  readOnly = !onChange,
+  showHeader = true,
+  theme = 'dark',
+  value = file.content,
+}: WorkspaceEditorProps) {
+  const language = languageForFile(file.path, file.mimeType);
+  const handleMount: OnMount = (editor, monacoInstance) => {
+    if (!onSave) return;
+
+    editor.addCommand(monacoInstance.KeyMod.CtrlCmd | monacoInstance.KeyCode.KeyS, () => {
+      onSave(editor.getValue());
+    });
+  };
+
+  return (
+    <Panel className="workbench-monaco-panel" style={{ minWidth: 0, minHeight: compact ? 260 : 0 }}>
+      {showHeader ? (
+        <PanelHeader
+          actions={
+            <Toolbar>
+              <Badge variant="muted">{language}</Badge>
+              {file.source ? <Badge variant="muted">{file.source}</Badge> : null}
+              <IconButton icon="codicon-split" label="Split editor" />
+            </Toolbar>
+          }
+        >
+          <span className="workbench-editor-title">
+            <WorkspaceFileIcon mimeType={file.mimeType} path={file.path} />
+            {file.path}
+          </span>
+        </PanelHeader>
+      ) : (
+        <div className="workspace-editor__file-bar" title={file.path}>
+          <WorkspaceFileIcon mimeType={file.mimeType} path={file.path} />
+          <span className="workspace-editor__file-path">{file.path}</span>
+          <span className="workspace-editor__file-meta">{file.mimeType ?? language}</span>
+        </div>
+      )}
+      <PanelBody className="workbench-monaco-panel__body">
+        <div className="workspace-editor__monaco">
+          <Editor
+            beforeMount={defineMonacoWorkbenchTheme}
+            height="100%"
+            language={language}
+            loading={<div className="workspace-editor__loading">Loading editor...</div>}
+            options={{
+              automaticLayout: true,
+              contextmenu: true,
+              fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
+              fontSize: 13,
+              lineHeight: 20,
+              minimap: { enabled: false },
+              overviewRulerBorder: false,
+              padding: { bottom: 12, top: 12 },
+              readOnly,
+              renderLineHighlight: 'line',
+              scrollBeyondLastLine: false,
+              scrollbar: {
+                alwaysConsumeMouseWheel: false,
+                horizontalScrollbarSize: 10,
+                verticalScrollbarSize: 10,
+              },
+              tabSize: 2,
+              wordWrap: 'on',
+            }}
+            path={file.path}
+            theme={monacoThemeForWorkspaceTheme(theme)}
+            value={value}
+            onChange={(nextValue) => onChange?.(nextValue ?? '')}
+            onMount={handleMount}
+          />
+        </div>
+      </PanelBody>
+    </Panel>
+  );
+}

package/src/workbench/workspace/WorkspaceEditorPanel.tsx

@@ -0,0 +1,353 @@
+import { useMemo, useState, type MouseEvent } from 'react';
+import {
+  canExecuteCommand,
+  createCommandRegistry,
+  executeCommand,
+  resolveCommandMenuItems,
+} from '@workbench-kit/core';
+import { isSaveSuccess, type SaveResult } from '@workbench-kit/contracts';
+import {
+  discardWorkspaceFileDraft,
+  resolveWorkspaceFileDraft,
+  saveWorkspaceFileDraft,
+  updateWorkspaceFileDraft,
+  type WorkspaceFileDraftMap,
+} from '@workbench-kit/workspace';
+import { ConfirmDialog } from '../../modal/ConfirmDialog';
+import { ContextMenu, type ContextMenuItem } from '../../overlay/ContextMenu';
+import { EmptyState } from '../../primitives/EmptyState';
+import { IconButton } from '../../primitives/IconButton';
+import { Toolbar } from '../../primitives/Toolbar';
+import { Panel, PanelBody } from '../../layout/Panel';
+import {
+  WORKBENCH_EDITOR_DISCARD_CHANGES_COMMAND_ID,
+  WORKBENCH_EDITOR_SAVE_COMMAND_ID,
+  WORKBENCH_COMMAND_SURFACE_EDITOR,
+  commandMenuItemsToContextMenuItems,
+  createWorkbenchEditorCommands,
+  createWorkbenchEditorTabListMenuEntries,
+  createWorkbenchEditorTabMenuEntries,
+  type WorkbenchEditorCommandContext,
+} from '../commands';
+import { fileNameOfPath } from './path';
+import { WorkspaceEditor, type WorkspaceEditorTheme } from './WorkspaceEditor';
+import { WorkspaceFileIcon } from './WorkspaceFileIcon';
+import type { WorkspaceFile } from './types';
+
+const editorCommandRegistry = createCommandRegistry(createWorkbenchEditorCommands());
+const editorTabListMenuEntries = createWorkbenchEditorTabListMenuEntries();
+const editorTabMenuEntries = createWorkbenchEditorTabMenuEntries();
+
+export interface WorkspaceEditorPanelProps {
+  emptyLabel?: string;
+  files: WorkspaceFile[];
+  onCloseAll?: () => void;
+  onCloseOthers?: (path: string) => void;
+  onClosePath?: (path: string) => void;
+  onCopyPath?: (path: string) => void;
+  onDeletePath?: (path: string) => void;
+  onSaveFile?: (
+    path: string,
+    content: string,
+    previousUpdatedAt?: string,
+  ) => SaveResult | Promise<SaveResult | undefined> | undefined;
+  onSelectedPathChange: (path: string) => void;
+  openPaths: string[];
+  selectedPath?: string;
+  theme?: WorkspaceEditorTheme;
+}
+
+export function WorkspaceEditorPanel({
+  emptyLabel = 'Open a file from Explorer or Search.',
+  files,
+  onCloseAll,
+  onCloseOthers,
+  onClosePath,
+  onCopyPath,
+  onDeletePath,
+  onSaveFile,
+  onSelectedPathChange,
+  openPaths,
+  selectedPath,
+  theme,
+}: WorkspaceEditorPanelProps) {
+  const filesByPath = useMemo(() => new Map(files.map((file) => [file.path, file])), [files]);
+  const openFiles = openPaths
+    .map((path) => filesByPath.get(path))
+    .filter((file): file is WorkspaceFile => Boolean(file));
+  const selectedFile = selectedPath ? filesByPath.get(selectedPath) : openFiles[0];
+  const [deletePath, setDeletePath] = useState<string | null>(null);
+  const [draftsByPath, setDraftsByPath] = useState<WorkspaceFileDraftMap>({});
+  const [tabContextMenu, setTabContextMenu] = useState<{
+    path: string | null;
+    x: number;
+    y: number;
+  } | null>(null);
+  const selectedDraft = selectedFile
+    ? resolveWorkspaceFileDraft({
+        draft: draftsByPath[selectedFile.path],
+        file: selectedFile,
+      })
+    : null;
+  const selectedContent = selectedDraft?.content ?? '';
+
+  const updateDraft = (path: string, content: string) => {
+    setDraftsByPath((currentDrafts) =>
+      updateWorkspaceFileDraft({
+        content,
+        drafts: currentDrafts,
+        fileContent: filesByPath.get(path)?.content ?? '',
+        path,
+      }),
+    );
+  };
+
+  const saveFile = (path: string, content: string) => {
+    Promise.resolve(onSaveFile?.(path, content, filesByPath.get(path)?.updatedAt))
+      .then((result) => {
+        if (!result || isSaveSuccess(result)) {
+          setDraftsByPath((currentDrafts) =>
+            saveWorkspaceFileDraft({
+              content,
+              drafts: currentDrafts,
+              path,
+            }),
+          );
+        }
+      })
+      .catch(() => {
+        // keep draft intact when persistence fails
+      });
+  };
+
+  const discardFile = (file: WorkspaceFile) => {
+    setDraftsByPath((currentDrafts) =>
+      discardWorkspaceFileDraft({
+        drafts: currentDrafts,
+        file,
+      }),
+    );
+  };
+
+  const handleTabContextMenu = (event: MouseEvent<HTMLElement>, path: string | null) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setTabContextMenu({ path, x: event.clientX, y: event.clientY });
+  };
+
+  const createEditorCommandContext = (
+    file: WorkspaceFile | undefined,
+  ): WorkbenchEditorCommandContext => {
+    const filePath = file?.path;
+    const draft = file
+      ? resolveWorkspaceFileDraft({
+          draft: draftsByPath[file.path],
+          file,
+        })
+      : undefined;
+    const content = draft?.content ?? '';
+
+    return {
+      canCloseAll: Boolean(onCloseAll),
+      canCloseOthers: Boolean(onCloseOthers),
+      canClosePath: Boolean(onClosePath),
+      canCopyPath: Boolean(onCopyPath),
+      canDeletePath: Boolean(onDeletePath),
+      canDiscardFile: Boolean(filePath),
+      canSaveFile: Boolean(filePath),
+      closeAll: () => onCloseAll?.(),
+      closeOthers: () => {
+        if (filePath) onCloseOthers?.(filePath);
+      },
+      closePath: () => {
+        if (filePath) onClosePath?.(filePath);
+      },
+      copyPath: () => {
+        if (filePath) onCopyPath?.(filePath);
+      },
+      deletePath: () => {
+        if (filePath) setDeletePath(filePath);
+      },
+      discardFile: () => {
+        if (file) discardFile(file);
+      },
+      filePath,
+      hasMultipleOpenFiles: openFiles.length > 1,
+      hasOpenFiles: openFiles.length > 0,
+      hasUnsavedChanges: Boolean(file && content !== file.content),
+      saveFile: () => {
+        if (filePath) saveFile(filePath, content);
+      },
+    };
+  };
+
+  const createTabContextItems = (path: string | null): ContextMenuItem[] => {
+    const file = path ? filesByPath.get(path) : undefined;
+    const context = createEditorCommandContext(file);
+
+    return commandMenuItemsToContextMenuItems(
+      resolveCommandMenuItems({
+        context,
+        surface: WORKBENCH_COMMAND_SURFACE_EDITOR,
+        entries: file ? editorTabMenuEntries : editorTabListMenuEntries,
+        registry: editorCommandRegistry,
+      }),
+      (commandId) => executeCommand(editorCommandRegistry, commandId, context),
+    );
+  };
+
+  const handleConfirmDelete = () => {
+    if (deletePath) {
+      onDeletePath?.(deletePath);
+    }
+    setDeletePath(null);
+  };
+  const selectedCommandContext = createEditorCommandContext(selectedFile);
+
+  return (
+    <Panel className="workspace-panel">
+      <PanelBody className="workspace-panel__body">
+        {openFiles.length > 0 ? (
+          <div className="workspace-editor">
+            <div className="workspace-editor__tabbar">
+              <div
+                aria-label="Open workspace files"
+                className="workspace-editor__tabs"
+                role="tablist"
+                onContextMenu={(event) => handleTabContextMenu(event, null)}
+              >
+                {openFiles.map((file) => {
+                  const isActive = file.path === selectedFile?.path;
+                  const draft = resolveWorkspaceFileDraft({
+                    draft: draftsByPath[file.path],
+                    file,
+                  });
+                  const isDirty = draft.content !== file.content;
+
+                  return (
+                    <div
+                      key={file.path}
+                      className={`workspace-editor__tab${isActive ? ' workspace-editor__tab--active' : ''}`}
+                      title={file.path}
+                      onContextMenu={(event) => handleTabContextMenu(event, file.path)}
+                    >
+                      <button
+                        aria-selected={isActive}
+                        className="workspace-editor__tab-button"
+                        role="tab"
+                        type="button"
+                        onClick={() => onSelectedPathChange(file.path)}
+                      >
+                        <WorkspaceFileIcon mimeType={file.mimeType} path={file.path} />
+                        <span className="workspace-editor__path">{fileNameOfPath(file.path)}</span>
+                        {isDirty ? (
+                          <span className="workspace-editor__dirty" aria-label="Unsaved changes" />
+                        ) : null}
+                      </button>
+                      <IconButton
+                        className="workspace-editor__tab-close"
+                        icon="codicon-close"
+                        label={`Close ${fileNameOfPath(file.path)}`}
+                        onClick={() => onClosePath?.(file.path)}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+
+              {selectedFile ? (
+                <Toolbar className="workspace-editor__actions">
+                  <IconButton
+                    disabled={
+                      !canExecuteCommand(
+                        editorCommandRegistry,
+                        WORKBENCH_EDITOR_SAVE_COMMAND_ID,
+                        selectedCommandContext,
+                      )
+                    }
+                    icon="codicon-save"
+                    label="Save"
+                    onClick={() =>
+                      executeCommand(
+                        editorCommandRegistry,
+                        WORKBENCH_EDITOR_SAVE_COMMAND_ID,
+                        selectedCommandContext,
+                      )
+                    }
+                  />
+                  <IconButton
+                    disabled={
+                      !canExecuteCommand(
+                        editorCommandRegistry,
+                        WORKBENCH_EDITOR_DISCARD_CHANGES_COMMAND_ID,
+                        selectedCommandContext,
+                      )
+                    }
+                    icon="codicon-discard"
+                    label="Discard changes"
+                    onClick={() =>
+                      executeCommand(
+                        editorCommandRegistry,
+                        WORKBENCH_EDITOR_DISCARD_CHANGES_COMMAND_ID,
+                        selectedCommandContext,
+                      )
+                    }
+                  />
+                  <IconButton
+                    disabled={!onDeletePath}
+                    icon="codicon-trash"
+                    label="Delete"
+                    variant="danger"
+                    onClick={() => setDeletePath(selectedFile.path)}
+                  />
+                </Toolbar>
+              ) : null}
+            </div>
+
+            {selectedFile ? (
+              <WorkspaceEditor
+                key={selectedFile.path}
+                file={selectedFile}
+                readOnly={false}
+                showHeader={false}
+                theme={theme}
+                value={selectedContent}
+                onChange={(content) => updateDraft(selectedFile.path, content)}
+                onSave={(content) => saveFile(selectedFile.path, content)}
+              />
+            ) : (
+              <EmptyState icon="codicon-open-preview">{emptyLabel}</EmptyState>
+            )}
+          </div>
+        ) : files.length === 0 ? (
+          <EmptyState icon="codicon-folder">No workspace files</EmptyState>
+        ) : (
+          <EmptyState icon="codicon-open-preview">{emptyLabel}</EmptyState>
+        )}
+      </PanelBody>
+
+      {deletePath ? (
+        <ConfirmDialog
+          closeLabel="Close confirmation"
+          confirmLabel="Delete"
+          detail={<code>{deletePath}</code>}
+          message="Delete this workspace file?"
+          title="Delete File"
+          variant="danger"
+          onCancel={() => setDeletePath(null)}
+          onConfirm={handleConfirmDelete}
+        />
+      ) : null}
+
+      {tabContextMenu ? (
+        <ContextMenu
+          ariaLabel="Editor tab menu"
+          items={createTabContextItems(tabContextMenu.path)}
+          x={tabContextMenu.x}
+          y={tabContextMenu.y}
+          onClose={() => setTabContextMenu(null)}
+        />
+      ) : null}
+    </Panel>
+  );
+}