@yancyyu/openhermit 1.5.8

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

@@ -0,0 +1,163 @@
+/**
+ * Toolbar with Save, Undo, Redo buttons.
+ */
+
+import React from 'react';
+
+import { redo, undo } from '@codemirror/commands';
+import { Button } from '@renderer/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { useStore } from '@renderer/store';
+import { editorBridge } from '@renderer/utils/editorBridge';
+import { shortcutLabel } from '@renderer/utils/platformKeys';
+import { Columns2, Eye, Redo2, Save, Undo2, WrapText } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type MdPreviewMode = 'off' | 'split' | 'preview';
+
+// =============================================================================
+// Component
+// =============================================================================
+
+interface EditorToolbarProps {
+  isMarkdown?: boolean;
+  mdPreviewMode?: MdPreviewMode;
+  onToggleSplit?: () => void;
+  onToggleFullPreview?: () => void;
+}
+
+export const EditorToolbar = ({
+  isMarkdown = false,
+  mdPreviewMode = 'off',
+  onToggleSplit,
+  onToggleFullPreview,
+}: EditorToolbarProps): React.ReactElement | null => {
+  const { activeTabId, modifiedFiles, saving, lineWrap } = useStore(
+    useShallow((s) => ({
+      activeTabId: s.editorActiveTabId,
+      modifiedFiles: s.editorModifiedFiles,
+      saving: s.editorSaving,
+      lineWrap: s.editorLineWrap,
+    }))
+  );
+  const saveFile = useStore((s) => s.saveFile);
+  const toggleLineWrap = useStore((s) => s.toggleLineWrap);
+
+  if (!activeTabId) return null;
+
+  const isDirty = !!modifiedFiles[activeTabId];
+  const isSaving = !!saving[activeTabId];
+
+  const handleSave = () => {
+    void saveFile(activeTabId);
+  };
+
+  const handleUndo = () => {
+    const view = editorBridge.getView();
+    if (view) undo(view);
+  };
+
+  const handleRedo = () => {
+    const view = editorBridge.getView();
+    if (view) redo(view);
+  };
+
+  return (
+    <div className="flex h-8 shrink-0 items-center gap-1 border-b border-border bg-surface px-2">
+      <ToolbarButton
+        icon={<Save className="size-3.5" />}
+        label="Save"
+        shortcut={shortcutLabel('⌘ S', 'Ctrl+S')}
+        onClick={handleSave}
+        disabled={!isDirty || isSaving}
+      />
+      <ToolbarButton
+        icon={<Undo2 className="size-3.5" />}
+        label="Undo"
+        shortcut={shortcutLabel('⌘ Z', 'Ctrl+Z')}
+        onClick={handleUndo}
+      />
+      <ToolbarButton
+        icon={<Redo2 className="size-3.5" />}
+        label="Redo"
+        shortcut={shortcutLabel('⌘ ⇧ Z', 'Ctrl+Y')}
+        onClick={handleRedo}
+      />
+      <div className="mx-1 h-4 w-px bg-border" />
+      <ToolbarButton
+        icon={<WrapText className="size-3.5" />}
+        label={lineWrap ? 'Disable word wrap' : 'Enable word wrap'}
+        shortcut={shortcutLabel('⌘ ⇧ W', 'Ctrl+Shift+W')}
+        onClick={toggleLineWrap}
+        active={lineWrap}
+      />
+      {isMarkdown && (
+        <>
+          <div className="mx-1 h-4 w-px bg-border" />
+          <ToolbarButton
+            icon={<Columns2 className="size-3.5" />}
+            label={mdPreviewMode === 'split' ? 'Close split preview' : 'Split preview'}
+            shortcut={shortcutLabel('⌘ ⇧ M', 'Ctrl+Shift+M')}
+            onClick={onToggleSplit ?? (() => {})}
+            active={mdPreviewMode === 'split'}
+          />
+          <ToolbarButton
+            icon={<Eye className="size-3.5" />}
+            label={mdPreviewMode === 'preview' ? 'Close preview' : 'Full preview'}
+            shortcut={shortcutLabel('⌘ ⇧ V', 'Ctrl+Shift+V')}
+            onClick={onToggleFullPreview ?? (() => {})}
+            active={mdPreviewMode === 'preview'}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+// =============================================================================
+// Toolbar button
+// =============================================================================
+
+interface ToolbarButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  shortcut: string;
+  onClick: () => void;
+  disabled?: boolean;
+  active?: boolean;
+}
+
+const ToolbarButton = React.memo(function ToolbarButton({
+  icon,
+  label,
+  shortcut,
+  onClick,
+  disabled = false,
+  active = false,
+}: ToolbarButtonProps): React.ReactElement {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          onClick={onClick}
+          disabled={disabled}
+          className={`h-auto gap-1 px-1.5 py-0.5 text-xs ${
+            active ? 'bg-surface-raised text-text' : 'text-text-muted'
+          }`}
+          aria-label={`${label} (${shortcut})`}
+          aria-pressed={active}
+        >
+          {icon}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        {label} ({shortcut})
+      </TooltipContent>
+    </Tooltip>
+  );
+});

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

@@ -0,0 +1,66 @@
+/**
+ * FileIcon — renders a file-type icon.
+ *
+ * For programming languages/frameworks: uses Devicon CDN SVG (real colorful logos).
+ * For generic types (images, fonts, configs): uses lucide-react icons with tinted color.
+ * Falls back to lucide if the Devicon image fails to load.
+ *
+ * Applies a subtle glow (drop-shadow) in dark mode so dark-colored icons
+ * remain visible against dark backgrounds (e.g. Go, Rust, C).
+ */
+
+import { memo, useCallback, useState } from 'react';
+
+import { cn } from '@renderer/lib/utils';
+
+import { getDeviconUrl, getFileIcon } from './fileIcons';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface FileIconProps {
+  /** File name (e.g. "index.ts", "Dockerfile", "logo.png") */
+  fileName: string;
+  /** Tailwind size class (e.g. "size-3.5", "size-4"). Defaults to "size-3.5" */
+  className?: string;
+}
+
+// Track slugs that failed to load so we don't retry them across mounts
+const failedSlugs = new Set<string>();
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const FileIcon = memo(({ fileName, className = 'size-3.5' }: FileIconProps) => {
+  const info = getFileIcon(fileName);
+  const slug = info.deviconSlug;
+  const canUseDevicon = slug != null && !failedSlugs.has(slug);
+
+  const [imgFailed, setImgFailed] = useState(false);
+
+  const handleError = useCallback(() => {
+    if (slug) failedSlugs.add(slug);
+    setImgFailed(true);
+  }, [slug]);
+
+  if (canUseDevicon && !imgFailed) {
+    return (
+      <img
+        src={getDeviconUrl(slug)}
+        className={cn('file-icon-glow shrink-0', className)}
+        onError={handleError}
+        alt=""
+        draggable={false}
+        loading="lazy"
+      />
+    );
+  }
+
+  // Fallback to lucide icon
+  const Icon = info.icon;
+  return <Icon className={cn('shrink-0', className)} style={{ color: info.color }} />;
+});
+
+FileIcon.displayName = 'FileIcon';

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

@@ -0,0 +1,47 @@
+/**
+ * Git status badge for file tree entries.
+ *
+ * Shows single-letter indicators:
+ * - M (modified) — orange
+ * - U (untracked) — green
+ * - A (staged/added) — green
+ * - D (deleted) — red
+ * - C (conflict) — red, bold
+ * - R (renamed) — cyan
+ */
+
+import React from 'react';
+
+import type { GitFileStatusType } from '@shared/types/editor';
+
+// =============================================================================
+// Badge config
+// =============================================================================
+
+const STATUS_CONFIG: Record<GitFileStatusType, { letter: string; color: string }> = {
+  modified: { letter: 'M', color: 'text-orange-400' },
+  untracked: { letter: 'U', color: 'text-green-400' },
+  staged: { letter: 'A', color: 'text-green-400' },
+  deleted: { letter: 'D', color: 'text-red-400' },
+  conflict: { letter: 'C', color: 'text-red-400 font-bold' },
+  renamed: { letter: 'R', color: 'text-cyan-400' },
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+interface GitStatusBadgeProps {
+  status: GitFileStatusType;
+}
+
+export const GitStatusBadge = React.memo(function GitStatusBadge({
+  status,
+}: GitStatusBadgeProps): React.ReactElement {
+  const config = STATUS_CONFIG[status];
+  return (
+    <span className={`ml-auto shrink-0 text-[10px] leading-none ${config.color}`} title={status}>
+      {config.letter}
+    </span>
+  );
+});

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

@@ -0,0 +1,186 @@
+/**
+ * Go to Line dialog (Cmd+G) — custom replacement for CodeMirror's built-in gotoLine.
+ *
+ * Supports: line numbers, relative offsets (+5, -3), percentages (50%),
+ * and optional column positions (42:10).
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { EditorView } from '@codemirror/view';
+import { Button } from '@renderer/components/ui/button';
+import { Input } from '@renderer/components/ui/input';
+import { editorBridge } from '@renderer/utils/editorBridge';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface GoToLineDialogProps {
+  onClose: () => void;
+}
+
+// =============================================================================
+// Line parsing
+// =============================================================================
+
+interface ParsedTarget {
+  line: number;
+  col?: number;
+}
+
+function parseLineInput(input: string, view: EditorView): ParsedTarget | null {
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+
+  // Split line:col
+  const [linePart, colPart] = trimmed.split(':');
+  const col = colPart ? parseInt(colPart, 10) : undefined;
+  if (col !== undefined && (isNaN(col) || col < 1)) return null;
+
+  const lineStr = linePart.trim();
+  if (!lineStr) return null;
+
+  const totalLines = view.state.doc.lines;
+
+  // Percentage: "50%"
+  if (lineStr.endsWith('%')) {
+    const pct = parseFloat(lineStr.slice(0, -1));
+    if (isNaN(pct)) return null;
+    const line = Math.max(1, Math.min(totalLines, Math.round((pct / 100) * totalLines)));
+    return { line, col };
+  }
+
+  // Relative: "+5" or "-3"
+  if (lineStr.startsWith('+') || lineStr.startsWith('-')) {
+    const offset = parseInt(lineStr, 10);
+    if (isNaN(offset)) return null;
+    const currentPos = view.state.selection.main.head;
+    const currentLine = view.state.doc.lineAt(currentPos).number;
+    const line = Math.max(1, Math.min(totalLines, currentLine + offset));
+    return { line, col };
+  }
+
+  // Absolute: "42"
+  const lineNum = parseInt(lineStr, 10);
+  if (isNaN(lineNum)) return null;
+  const line = Math.max(1, Math.min(totalLines, lineNum));
+  return { line, col };
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const GoToLineDialog = ({ onClose }: GoToLineDialogProps): React.ReactElement => {
+  const [value, setValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Escape to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => window.removeEventListener('keydown', handleKeyDown, true);
+  }, [onClose]);
+
+  const handleGo = useCallback(() => {
+    const view = editorBridge.getView();
+    if (!view) return;
+
+    const target = parseLineInput(value, view);
+    if (!target) return;
+
+    const lineInfo = view.state.doc.line(target.line);
+    const colOffset = target.col ? Math.min(target.col - 1, lineInfo.length) : 0;
+    const pos = lineInfo.from + colOffset;
+
+    view.dispatch({
+      selection: { anchor: pos },
+      effects: EditorView.scrollIntoView(pos, { y: 'center' }),
+    });
+
+    view.focus();
+    onClose();
+  }, [value, onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleGo();
+      }
+    },
+    [handleGo]
+  );
+
+  // Current line info for placeholder
+  const view = editorBridge.getView();
+  const totalLines = view?.state.doc.lines ?? 0;
+  const currentLine = view ? view.state.doc.lineAt(view.state.selection.main.head).number : 0;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-start justify-center pt-[15vh]">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/40"
+        onClick={onClose}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') onClose();
+        }}
+        role="presentation"
+      />
+
+      {/* Dialog */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="跳转到行"
+        className="relative z-10 w-[360px] overflow-hidden rounded-lg border border-border-emphasis bg-surface shadow-2xl"
+      >
+        <div className="flex flex-col gap-2 p-3">
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-text-secondary">
+              跳转到行{' '}
+              <span className="text-text-muted">
+                （当前：{currentLine}，总行数：{totalLines}）
+              </span>
+            </span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Input
+              ref={inputRef}
+              className="h-8 flex-1 bg-transparent text-sm"
+              placeholder="行号、+偏移、-偏移或百分比"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              spellCheck={false}
+              autoComplete="off"
+            />
+            <Button
+              variant="secondary"
+              size="sm"
+              className="h-8 px-4"
+              onClick={handleGo}
+              disabled={!value.trim()}
+            >
+              跳转
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,57 @@
+/**
+ * Scrollable markdown preview pane for the editor split view.
+ *
+ * Wraps MarkdownViewer in a scrollable container with ref access
+ * for external scroll synchronization (code ↔ preview).
+ */
+
+import React from 'react';
+
+import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface MarkdownPreviewPaneProps {
+  content: string;
+  className?: string;
+  scrollRef?: React.RefObject<HTMLDivElement | null>;
+  onScroll?: () => void;
+  /** Base directory for resolving relative image/link URLs */
+  baseDir?: string;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const MarkdownPreviewPane = React.memo(function MarkdownPreviewPane({
+  content,
+  className = '',
+  scrollRef,
+  onScroll,
+  baseDir,
+}: MarkdownPreviewPaneProps): React.ReactElement {
+  // Callback ref to wire scrollRef (RefObject<T | null>) to the div
+  const internalRef = React.useRef<HTMLDivElement | null>(null);
+  const setRef = React.useCallback(
+    (el: HTMLDivElement | null) => {
+      internalRef.current = el;
+      if (scrollRef && 'current' in scrollRef) {
+        // Forward ref — the mutable cast is the standard pattern for forwarding refs
+        const mutableRef = scrollRef as React.MutableRefObject<HTMLDivElement | null>;
+        mutableRef.current = el;
+      }
+    },
+    [scrollRef]
+  );
+
+  return (
+    <div ref={setRef} className={`h-full overflow-y-auto ${className}`} onScroll={onScroll}>
+      <div className="p-4">
+        <MarkdownViewer content={content} bare maxHeight="" baseDir={baseDir} />
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,127 @@
+/**
+ * Right-side panel for markdown split/preview mode.
+ *
+ * In split mode: renders a drag-resizable handle + MarkdownPreviewPane.
+ * In preview mode: renders MarkdownPreviewPane at full width (no handle).
+ *
+ * CodeMirrorEditor is NOT rendered here — it stays in ProjectEditorOverlay
+ * and is controlled via CSS display/width.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useMarkdownScrollSync } from '@renderer/hooks/useMarkdownScrollSync';
+
+import { MarkdownPreviewPane } from './MarkdownPreviewPane';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface MarkdownSplitViewProps {
+  content: string;
+  mode: 'split' | 'preview';
+  splitRatio: number;
+  onSplitRatioChange: (ratio: number) => void;
+  /** Key that changes when the EditorView changes (e.g. activeTabId) — triggers scroll re-attach */
+  viewKey?: string | null;
+  /** Base directory for resolving relative image/link URLs */
+  baseDir?: string;
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const MIN_RATIO = 0.2;
+const MAX_RATIO = 0.8;
+const HANDLE_WIDTH = 4; // px
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const MarkdownSplitView = React.memo(function MarkdownSplitView({
+  content,
+  mode,
+  splitRatio,
+  onSplitRatioChange,
+  viewKey,
+  baseDir,
+}: MarkdownSplitViewProps): React.ReactElement {
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Scroll sync auto-manages its own listener lifecycle via viewKey
+  const scrollSync = useMarkdownScrollSync(mode === 'split', viewKey);
+
+  // --- Resize drag logic ---
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const parent = containerRef.current?.parentElement;
+      if (!parent) return;
+
+      const parentRect = parent.getBoundingClientRect();
+      const relativeX = e.clientX - parentRect.left;
+      const newRatio = Math.min(MAX_RATIO, Math.max(MIN_RATIO, relativeX / parentRect.width));
+      onSplitRatioChange(newRatio);
+    },
+    [onSplitRatioChange]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+  }, [isResizing, handleMouseMove, handleMouseUp]);
+
+  const handleMouseDown = (e: React.MouseEvent): void => {
+    e.preventDefault();
+    setIsResizing(true);
+  };
+
+  // --- Preview width ---
+
+  const previewWidth =
+    mode === 'preview' ? '100%' : `calc(${(1 - splitRatio) * 100}% - ${HANDLE_WIDTH}px)`;
+
+  return (
+    <div ref={containerRef} className="flex h-full" style={{ width: previewWidth }}>
+      {/* Resize handle — only in split mode */}
+      {mode === 'split' && (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- resize handle
+        <div
+          className={`shrink-0 cursor-col-resize border-x border-border transition-colors ${
+            isResizing ? 'bg-blue-500/50' : 'hover:bg-blue-500/30'
+          }`}
+          style={{ width: HANDLE_WIDTH }}
+          onMouseDown={handleMouseDown}
+        />
+      )}
+      {/* Preview pane */}
+      <div className="flex-1 overflow-hidden bg-surface">
+        <MarkdownPreviewPane
+          content={content}
+          scrollRef={scrollSync.previewScrollRef}
+          onScroll={scrollSync.handlePreviewScroll}
+          baseDir={baseDir}
+        />
+      </div>
+    </div>
+  );
+});