@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/editor/EditorSelectionMenu.tsx

@@ -0,0 +1,112 @@
+/**
+ * Floating action menu shown near text selection in the editor.
+ *
+ * Positioned absolutely relative to the editor content container.
+ * Uses onMouseDown preventDefault to avoid deselecting text in CM6.
+ */
+
+import { Button } from '@renderer/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { ListTodo, MessageSquare } from 'lucide-react';
+
+import type { EditorSelectionInfo } from '@shared/types/editor';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface EditorSelectionMenuProps {
+  info: EditorSelectionInfo;
+  /** Bounding rect of the editor content container (for viewport → container conversion) */
+  containerRect: DOMRect;
+  onSendMessage: () => void;
+  onCreateTask: () => void;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const MENU_GAP = 8; // px gap between selection end and menu
+const MENU_WIDTH = 68; // approximate menu width for clamping
+const MENU_HEIGHT = 32; // approximate menu height for clamping
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const EditorSelectionMenu = ({
+  info,
+  containerRect,
+  onSendMessage,
+  onCreateTask,
+}: EditorSelectionMenuProps): React.ReactElement | null => {
+  if (!info.text.trim()) return null;
+
+  // Convert viewport coords → container-relative
+  const rawTop = info.screenRect.top - containerRect.top;
+  const rawLeft = info.screenRect.right - containerRect.left + MENU_GAP;
+
+  // Check if selection is within visible container bounds
+  const selTopInContainer = info.screenRect.top - containerRect.top;
+  const selBottomInContainer = info.screenRect.bottom - containerRect.top;
+  if (selBottomInContainer < 0 || selTopInContainer > containerRect.height) {
+    return null; // selection is scrolled out of view
+  }
+
+  // Clamp to container bounds
+  const top = Math.max(0, Math.min(rawTop, containerRect.height - MENU_HEIGHT));
+  const left =
+    rawLeft + MENU_WIDTH > containerRect.width
+      ? info.screenRect.right - containerRect.left - MENU_WIDTH - MENU_GAP // flip to left side
+      : rawLeft;
+
+  return (
+    <div
+      className="pointer-events-auto absolute z-20 flex items-center gap-0.5 rounded-md border border-border-emphasis bg-surface-overlay p-0.5 shadow-lg animate-in fade-in-0 zoom-in-95"
+      style={{ top, left: Math.max(0, left) }}
+    >
+      <MenuButton
+        icon={<MessageSquare className="size-3.5" />}
+        label="Write Teammate"
+        onClick={onSendMessage}
+      />
+      <MenuButton
+        icon={<ListTodo className="size-3.5" />}
+        label="Create Task"
+        onClick={onCreateTask}
+      />
+    </div>
+  );
+};
+
+// =============================================================================
+// Menu button
+// =============================================================================
+
+interface MenuButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+const MenuButton = ({ icon, label, onClick }: MenuButtonProps): React.ReactElement => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button
+        variant="ghost"
+        size="icon"
+        tabIndex={-1}
+        aria-label={label}
+        onClick={onClick}
+        onMouseDown={(e) => e.preventDefault()} // prevent CM6 selection loss
+        className="size-7 p-1.5 text-text-secondary"
+      >
+        {icon}
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent side="top" sideOffset={6}>
+      {label}
+    </TooltipContent>
+  </Tooltip>
+);

package/src/renderer/components/team/editor/EditorShortcutsHelp.tsx

@@ -0,0 +1,125 @@
+/**
+ * Keyboard shortcuts help modal for the project editor.
+ *
+ * Cross-platform: detects Mac vs Windows/Linux and shows
+ * the appropriate modifier symbols.
+ */
+
+import { useMemo } from 'react';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@renderer/components/ui/dialog';
+import { IS_MAC } from '@renderer/utils/platformKeys';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface EditorShortcutsHelpProps {
+  onClose: () => void;
+}
+
+interface ShortcutDef {
+  mac: string;
+  other: string;
+  description: string;
+}
+
+// =============================================================================
+// Shortcuts data
+// =============================================================================
+
+const SHORTCUT_GROUPS: { title: string; shortcuts: ShortcutDef[] }[] = [
+  {
+    title: '文件操作',
+    shortcuts: [
+      { mac: '⌘ P', other: 'Ctrl+P', description: '快速打开' },
+      { mac: '⌘ S', other: 'Ctrl+S', description: '保存' },
+      { mac: '⌘ ⇧ S', other: 'Ctrl+Shift+S', description: '全部保存' },
+      { mac: '⌘ W', other: 'Ctrl+W', description: '关闭标签页' },
+    ],
+  },
+  {
+    title: '搜索',
+    shortcuts: [
+      { mac: '⌘ F', other: 'Ctrl+F', description: '在文件中查找' },
+      { mac: '⌘ ⇧ F', other: 'Ctrl+Shift+F', description: '在文件中搜索' },
+      { mac: '⌘ G', other: 'Ctrl+G', description: '跳转到行' },
+    ],
+  },
+  {
+    title: '导航',
+    shortcuts: [
+      { mac: '⌘ ⇧ ]', other: 'Ctrl+Shift+]', description: '下一个标签页' },
+      { mac: '⌘ ⇧ [', other: 'Ctrl+Shift+[', description: '上一个标签页' },
+      { mac: '⌃ Tab', other: 'Ctrl+Tab', description: '循环切换标签页' },
+      { mac: '⌘ B', other: 'Ctrl+B', description: '切换侧边栏' },
+    ],
+  },
+  {
+    title: '编辑',
+    shortcuts: [
+      { mac: '⌘ Z', other: 'Ctrl+Z', description: '撤销' },
+      { mac: '⌘ ⇧ Z', other: 'Ctrl+Y', description: '重做' },
+      { mac: '⌘ D', other: 'Ctrl+D', description: '选择下一个匹配项' },
+      { mac: '⌘ /', other: 'Ctrl+/', description: '切换注释' },
+    ],
+  },
+  {
+    title: 'Markdown',
+    shortcuts: [
+      { mac: '⌘ ⇧ M', other: 'Ctrl+Shift+M', description: '拆分预览' },
+      { mac: '⌘ ⇧ V', other: 'Ctrl+Shift+V', description: '完整预览' },
+    ],
+  },
+  {
+    title: '通用',
+    shortcuts: [{ mac: 'Esc', other: 'Esc', description: '关闭编辑器' }],
+  },
+];
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const EditorShortcutsHelp = ({ onClose }: EditorShortcutsHelpProps): React.ReactElement => {
+  // Resolve platform-specific keys once
+  const resolvedGroups = useMemo(
+    () =>
+      SHORTCUT_GROUPS.map((group) => ({
+        ...group,
+        shortcuts: group.shortcuts.map((s) => ({
+          keys: IS_MAC ? s.mac : s.other,
+          description: s.description,
+        })),
+      })),
+    []
+  );
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="w-[480px] max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle className="text-sm">快捷键</DialogTitle>
+        </DialogHeader>
+
+        <div className="grid grid-cols-2 gap-x-6 gap-y-4">
+          {resolvedGroups.map((group) => (
+            <div key={group.title}>
+              <h3 className="mb-1.5 text-xs font-medium text-text-secondary">{group.title}</h3>
+              <div className="space-y-1">
+                {group.shortcuts.map((shortcut) => (
+                  <div key={shortcut.keys} className="flex items-center justify-between text-xs">
+                    <span className="text-text-muted">{shortcut.description}</span>
+                    <kbd className="rounded border border-border bg-surface-raised px-1.5 py-0.5 font-mono text-[10px] text-text-secondary">
+                      {shortcut.keys}
+                    </kbd>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/renderer/components/team/editor/EditorStatusBar.tsx

@@ -0,0 +1,72 @@
+/**
+ * Status bar: cursor position, language, encoding, indent style, git branch.
+ */
+
+import React from 'react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { useStore } from '@renderer/store';
+import { GitBranch } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+interface EditorStatusBarProps {
+  line: number;
+  col: number;
+  language: string;
+}
+
+export const EditorStatusBar = React.memo(function EditorStatusBar({
+  line,
+  col,
+  language,
+}: EditorStatusBarProps): React.ReactElement {
+  const { gitBranch, isGitRepo, watcherEnabled } = useStore(
+    useShallow((s) => ({
+      gitBranch: s.editorGitBranch,
+      isGitRepo: s.editorIsGitRepo,
+      watcherEnabled: s.editorWatcherEnabled,
+    }))
+  );
+  const toggleWatcher = useStore((s) => s.toggleWatcher);
+
+  return (
+    <div className="flex h-6 shrink-0 items-center justify-between border-t border-border bg-surface-sidebar px-3 text-[11px] text-text-muted">
+      <div className="flex items-center gap-4">
+        <span>
+          Ln {line}, Col {col}
+        </span>
+        {isGitRepo && gitBranch && (
+          <span className="flex items-center gap-1">
+            <GitBranch className="size-3" />
+            {gitBranch}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-4">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => void toggleWatcher(!watcherEnabled)}
+              className={`rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+                watcherEnabled
+                  ? 'bg-green-500/15 text-green-400 hover:bg-green-500/20'
+                  : 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
+              }`}
+              aria-label={watcherEnabled ? 'Disable file watcher' : 'Enable file watcher'}
+              aria-pressed={watcherEnabled}
+            >
+              {watcherEnabled ? 'watching' : 'watch'}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            {watcherEnabled ? 'Disable external change watcher' : 'Watch for external changes'}
+          </TooltipContent>
+        </Tooltip>
+        <span>{language}</span>
+        <span>UTF-8</span>
+        <span>Spaces: 2</span>
+      </div>
+    </div>
+  );
+});

package/src/renderer/components/team/editor/EditorTabBar.tsx

@@ -0,0 +1,265 @@
+/**
+ * Tab bar for the project editor.
+ * Shows open files as tabs with dirty indicator (dot), close button,
+ * right-click context menu (close others, close to left/right, close all),
+ * and drag-and-drop reordering via @dnd-kit.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { useStore } from '@renderer/store';
+import { X } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { EditorTabContextMenu } from './EditorTabContextMenu';
+import { FileIcon } from './FileIcon';
+
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import type { EditorFileTab } from '@shared/types/editor';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface EditorTabBarProps {
+  /** Called instead of direct closeTab — allows parent to intercept dirty tabs */
+  onRequestCloseTab: (tabId: string) => void;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const EditorTabBar = ({
+  onRequestCloseTab,
+}: EditorTabBarProps): React.ReactElement | null => {
+  const { tabs, activeTabId, modifiedFiles } = useStore(
+    useShallow((s) => ({
+      tabs: s.editorOpenTabs,
+      activeTabId: s.editorActiveTabId,
+      modifiedFiles: s.editorModifiedFiles,
+    }))
+  );
+  const setActiveEditorTab = useStore((s) => s.setActiveEditorTab);
+  const reorderEditorTabs = useStore((s) => s.reorderEditorTabs);
+  const closeOtherEditorTabs = useStore((s) => s.closeOtherEditorTabs);
+  const closeEditorTabsToLeft = useStore((s) => s.closeEditorTabsToLeft);
+  const closeEditorTabsToRight = useStore((s) => s.closeEditorTabsToRight);
+  const closeAllEditorTabs = useStore((s) => s.closeAllEditorTabs);
+
+  const [draggedTab, setDraggedTab] = useState<EditorFileTab | null>(null);
+
+  const tabIds = useMemo(() => tabs.map((t) => t.id), [tabs]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 },
+    })
+  );
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const tab = tabs.find((t) => t.id === event.active.id);
+      setDraggedTab(tab ?? null);
+    },
+    [tabs]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      setDraggedTab(null);
+      const { active, over } = event;
+      if (over && active.id !== over.id) {
+        reorderEditorTabs(String(active.id), String(over.id));
+      }
+    },
+    [reorderEditorTabs]
+  );
+
+  const handleDragCancel = useCallback(() => {
+    setDraggedTab(null);
+  }, []);
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      <div
+        className="flex h-8 shrink-0 items-center overflow-x-auto border-b border-border bg-surface-sidebar"
+        role="tablist"
+      >
+        <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
+          {tabs.map((tab, index) => (
+            <SortableEditorTab
+              key={tab.id}
+              tab={tab}
+              tabIndex={index}
+              totalTabs={tabs.length}
+              isActive={tab.id === activeTabId}
+              isModified={!!modifiedFiles[tab.filePath]}
+              onActivate={() => setActiveEditorTab(tab.id)}
+              onRequestClose={onRequestCloseTab}
+              onCloseOthers={closeOtherEditorTabs}
+              onCloseToLeft={closeEditorTabsToLeft}
+              onCloseToRight={closeEditorTabsToRight}
+              onCloseAll={closeAllEditorTabs}
+            />
+          ))}
+        </SortableContext>
+      </div>
+
+      <DragOverlay dropAnimation={null}>
+        {draggedTab && <EditorTabOverlay tab={draggedTab} />}
+      </DragOverlay>
+    </DndContext>
+  );
+};
+
+// =============================================================================
+// Sortable tab item
+// =============================================================================
+
+interface SortableEditorTabProps {
+  tab: EditorFileTab;
+  tabIndex: number;
+  totalTabs: number;
+  isActive: boolean;
+  isModified: boolean;
+  onActivate: () => void;
+  onRequestClose: (tabId: string) => void;
+  onCloseOthers: (tabId: string) => void;
+  onCloseToLeft: (tabId: string) => void;
+  onCloseToRight: (tabId: string) => void;
+  onCloseAll: () => void;
+}
+
+const SortableEditorTab = ({
+  tab,
+  tabIndex,
+  totalTabs,
+  isActive,
+  isModified,
+  onActivate,
+  onRequestClose,
+  onCloseOthers,
+  onCloseToLeft,
+  onCloseToRight,
+  onCloseAll,
+}: SortableEditorTabProps): React.ReactElement => {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: tab.id,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: isDragging ? 'none' : transition,
+    opacity: isDragging ? 0.3 : 1,
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onRequestClose(tab.id);
+  };
+
+  const handleAuxClick = (e: React.MouseEvent) => {
+    if (e.button === 1) {
+      e.preventDefault();
+      onRequestClose(tab.id);
+    }
+  };
+
+  return (
+    // Sortable wrapper — must be the outermost element so @dnd-kit controls its position.
+    // ContextMenu.Trigger inside EditorTabContextMenu adds an extra <div>,
+    // so the useSortable ref/transform CANNOT live on the inner <button>.
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex h-full shrink-0"
+      // eslint-disable-next-line react/jsx-props-no-spreading -- @dnd-kit useSortable requires prop spreading
+      {...attributes}
+      // eslint-disable-next-line react/jsx-props-no-spreading -- @dnd-kit useSortable requires prop spreading
+      {...listeners}
+    >
+      <EditorTabContextMenu
+        tabId={tab.id}
+        tabIndex={tabIndex}
+        totalTabs={totalTabs}
+        onClose={onRequestClose}
+        onCloseOthers={onCloseOthers}
+        onCloseToLeft={onCloseToLeft}
+        onCloseToRight={onCloseToRight}
+        onCloseAll={onCloseAll}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={onActivate}
+              onAuxClick={handleAuxClick}
+              role="tab"
+              aria-selected={isActive}
+              className={`group flex h-full shrink-0 cursor-grab items-center gap-1.5 border-r border-border px-3 text-xs transition-colors ${
+                isActive
+                  ? 'bg-surface text-text'
+                  : 'bg-surface-sidebar text-text-muted hover:bg-surface-raised hover:text-text-secondary'
+              }`}
+            >
+              {isModified && (
+                <span
+                  className="size-1.5 shrink-0 rounded-full bg-amber-400"
+                  aria-label="Unsaved changes"
+                />
+              )}
+              <FileIcon fileName={tab.fileName} className="size-3.5" />
+              <span className="max-w-40 truncate">
+                {tab.fileName}
+                {tab.disambiguatedLabel && (
+                  <span className="ml-1 text-text-muted">{tab.disambiguatedLabel}</span>
+                )}
+              </span>
+              <span
+                onClick={handleClose}
+                onPointerDown={(e) => e.stopPropagation()}
+                className="ml-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-surface-raised group-hover:opacity-100"
+                role="button"
+                aria-label={`Close ${tab.fileName}`}
+                tabIndex={-1}
+              >
+                <X className="size-3" />
+              </span>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{tab.filePath}</TooltipContent>
+        </Tooltip>
+      </EditorTabContextMenu>
+    </div>
+  );
+};
+
+// =============================================================================
+// Drag overlay (ghost shown while dragging)
+// =============================================================================
+
+const EditorTabOverlay = ({ tab }: { tab: EditorFileTab }): React.ReactElement => (
+  <div className="flex items-center gap-1.5 rounded border border-border-emphasis bg-surface-raised px-3 py-1 text-xs text-text shadow-lg">
+    <FileIcon fileName={tab.fileName} className="size-3.5" />
+    <span className="max-w-40 truncate">{tab.fileName}</span>
+  </div>
+);

package/src/renderer/components/team/editor/EditorTabContextMenu.tsx

@@ -0,0 +1,88 @@
+/**
+ * Context menu for editor tabs.
+ * Supports: close, close others, close to left/right, close all.
+ */
+
+import * as ContextMenu from '@radix-ui/react-context-menu';
+
+interface EditorTabContextMenuProps {
+  children: React.ReactNode;
+  tabId: string;
+  tabIndex: number;
+  totalTabs: number;
+  onClose: (tabId: string) => void;
+  onCloseOthers: (tabId: string) => void;
+  onCloseToLeft: (tabId: string) => void;
+  onCloseToRight: (tabId: string) => void;
+  onCloseAll: () => void;
+}
+
+export const EditorTabContextMenu = ({
+  children,
+  tabId,
+  tabIndex,
+  totalTabs,
+  onClose,
+  onCloseOthers,
+  onCloseToLeft,
+  onCloseToRight,
+  onCloseAll,
+}: EditorTabContextMenuProps): React.ReactElement => {
+  const hasLeft = tabIndex > 0;
+  const hasRight = tabIndex < totalTabs - 1;
+  const hasOthers = totalTabs > 1;
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger asChild>
+        <div className="flex h-full">{children}</div>
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="z-50 min-w-[180px] rounded-md border border-border-emphasis bg-surface-overlay p-1 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95">
+          <ContextMenu.Item
+            className="flex cursor-pointer items-center rounded px-2 py-1.5 text-xs text-text outline-none hover:bg-surface-raised focus:bg-surface-raised"
+            onSelect={() => onClose(tabId)}
+          >
+            Close
+          </ContextMenu.Item>
+
+          <ContextMenu.Item
+            className="flex cursor-pointer items-center rounded px-2 py-1.5 text-xs text-text outline-none hover:bg-surface-raised focus:bg-surface-raised disabled:cursor-not-allowed disabled:opacity-40"
+            disabled={!hasOthers}
+            onSelect={() => onCloseOthers(tabId)}
+          >
+            Close Others
+          </ContextMenu.Item>
+
+          <ContextMenu.Separator className="my-1 h-px bg-border" />
+
+          <ContextMenu.Item
+            className="flex cursor-pointer items-center rounded px-2 py-1.5 text-xs text-text outline-none hover:bg-surface-raised focus:bg-surface-raised disabled:cursor-not-allowed disabled:opacity-40"
+            disabled={!hasLeft}
+            onSelect={() => onCloseToLeft(tabId)}
+          >
+            Close Tabs to the Left
+          </ContextMenu.Item>
+
+          <ContextMenu.Item
+            className="flex cursor-pointer items-center rounded px-2 py-1.5 text-xs text-text outline-none hover:bg-surface-raised focus:bg-surface-raised disabled:cursor-not-allowed disabled:opacity-40"
+            disabled={!hasRight}
+            onSelect={() => onCloseToRight(tabId)}
+          >
+            Close Tabs to the Right
+          </ContextMenu.Item>
+
+          <ContextMenu.Separator className="my-1 h-px bg-border" />
+
+          <ContextMenu.Item
+            className="flex cursor-pointer items-center rounded px-2 py-1.5 text-xs text-text outline-none hover:bg-surface-raised focus:bg-surface-raised"
+            onSelect={onCloseAll}
+          >
+            Close All
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+};