Merge pull request #348 from CortexLM/fix/editor-typescript-errors-batch2

fix(editor): resolve remaining TypeScript errors in editor components

Author: echobt

cortex-gui/src/components/editor/BookmarksGutter.tsx

@@ -152,15 +152,6 @@ export function BookmarksGutter(props: BookmarksGutterProps) {
     }
   };
 
-  /**
-   * Find if a line has a bookmark
-   */
-  const hasBookmarkAtLine = (line: number): boolean => {
-    if (!props.filePath) return false;
-    const fileBookmarks = getBookmarksForFile(props.filePath);
-    return fileBookmarks.some((b) => b.line === line);
-  };
-
   // Update decorations when bookmarks or file changes
   createEffect(() => {
     // Access bookmarks() to trigger reactivity

cortex-gui/src/components/editor/DiagnosticsPanel.tsx

@@ -536,7 +536,7 @@ items.push({
           style={{
             left: `${menuPosition().x}px`,
             top: `${menuPosition().y}px`,
-            background: tokens.colors.surface.raised,
+            background: tokens.colors.surface.elevated,
             border: `1px solid ${tokens.colors.border.default}`,
             "border-radius": tokens.radius.md,
             "box-shadow": "var(--jb-shadow-popup)",
@@ -845,7 +845,7 @@ function ExportMenu(props: ExportMenuProps) {
             right: "0",
             top: "100%",
             "margin-top": tokens.spacing.sm,
-            background: tokens.colors.surface.raised,
+            background: tokens.colors.surface.elevated,
             border: `1px solid ${tokens.colors.border.default}`,
             "border-radius": tokens.radius.md,
             "box-shadow": "var(--jb-shadow-popup)",
@@ -2025,7 +2025,7 @@ export function DiagnosticsPanel(props: DiagnosticsPanelProps) {
         <div
           class="absolute bottom-4 right-4 px-3 py-2 rounded shadow-lg"
           style={{
-            background: tokens.colors.surface.raised,
+            background: tokens.colors.surface.elevated,
             border: `1px solid ${tokens.colors.border.default}`,
             "border-radius": tokens.radius.md,
           }}

cortex-gui/src/components/editor/DiffNavigator.tsx

@@ -8,8 +8,8 @@
  * - Keyboard shortcuts support
  */
 
-import { createSignal, createEffect, onMount, onCleanup, Show, For, type JSX } from "solid-js";
-import { IconButton, Text, Badge } from "@/components/ui";
+import { createSignal, onMount, onCleanup, Show, For, type JSX } from "solid-js";
+import { IconButton, Text } from "@/components/ui";
 import { Icon } from "../ui/Icon";
 
 // ============================================================================
@@ -56,8 +56,6 @@ export function DiffNavigator(props: DiffNavigatorProps) {
   const hasPrevious = () => props.currentIndex > 0;
   const hasNext = () => props.currentIndex < props.changes.length - 1;
 
-  const currentChange = () => props.changes[props.currentIndex];
-  
   const goToPrevious = () => {
     if (hasPrevious() && !props.disabled) {
       props.onNavigate(props.currentIndex - 1);

cortex-gui/src/components/editor/EditorContextMenu.tsx

@@ -5,15 +5,12 @@
  * Polished Zed-like design with smooth animations and keyboard navigation.
  */
 
-import { Show, For, createSignal, createEffect, onCleanup, type JSX } from "solid-js";
+import { Show, For, createSignal, createEffect, onCleanup } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Icon } from "../ui/Icon";
 import { useGitHosting } from "@/context/GitHostingContext";
 import { useDebug } from "@/context/DebugContext";
-import { showReferencesPanel } from "../ReferencesPanel";
-import { showPeekReferences } from "./PeekReferences";
 import type { LineSelection } from "@/utils/git/types";
-import { ListItem, Text, Divider, EmptyState } from "@/components/ui";
 
 // IMenuStyles interface - VS Code's 12 color properties for menus
 interface IContextMenuStyles {

cortex-gui/src/components/editor/EditorSkeleton.tsx

@@ -6,7 +6,7 @@
  */
 
 import { For, Show, type JSX } from "solid-js";
-import { Card, Text, LoadingSpinner } from "@/components/ui";
+import { Text, LoadingSpinner } from "@/components/ui";
 
 interface EditorSkeletonProps {
   /** Number of skeleton lines to show (default: 20) */

cortex-gui/src/components/editor/LightBulbWidget.tsx

@@ -342,13 +342,13 @@ export function LightBulbWidget(props: LightBulbWidgetProps) {
     );
 
     // Add Ctrl+. keyboard shortcut
-    const commandId = editor.addCommand(
+    // addCommand returns a string (command ID) or null, not IDisposable
+    // We can't dispose of it directly, but it will be cleaned up when editor is disposed
+    editor.addCommand(
       monaco.KeyMod.CtrlCmd | monaco.KeyCode.Period,
       triggerCodeActions,
       "editorTextFocus"
     );
-    // addCommand returns a string (command ID) or null, not IDisposable
-    // We can't dispose of it directly, but it will be cleaned up when editor is disposed
 
     // Initial update
     updateLightBulb();

cortex-gui/src/components/editor/MinimapDecorations.tsx

@@ -15,7 +15,7 @@
  * - BookmarksContext for bookmark marks
  */
 
-import { createEffect, onCleanup, createSignal, createMemo } from "solid-js";
+import { createEffect, onCleanup, createSignal } from "solid-js";
 import { useDiagnostics } from "@/context/DiagnosticsContext";
 import type * as Monaco from "monaco-editor";
 
@@ -544,7 +544,7 @@ export function MinimapDecorations(props: MinimapDecorationsProps) {
  */
 export function useMinimapDecorations(
   editor: () => Monaco.editor.IStandaloneCodeEditor | null,
-  monaco: () => typeof Monaco | null
+  _monaco: () => typeof Monaco | null
 ) {
   const [decorationIds, setDecorationIds] = createSignal<string[]>([]);
 

cortex-gui/src/components/editor/MultiDiffEditor.tsx

@@ -28,7 +28,7 @@ import {
   onCleanup,
   For,
   Show,
-  type JSX,
+
   type Accessor,
 } from "solid-js";
 import { Icon } from "../ui/Icon";
@@ -562,15 +562,15 @@ function FileHeader(props: {
   readOnly?: boolean;
   onToggle: () => void;
   onOpenFile?: () => void;
-  onStageFile?: () => void;
-  onUnstageFile?: () => void;
-  onRevertFile?: () => void;
+  onStageFile?: () => void | Promise<void>;
+  onUnstageFile?: () => void | Promise<void>;
+  onRevertFile?: () => void | Promise<void>;
   focused?: boolean;
 }) {
   const [isHovered, setIsHovered] = createSignal(false);
   const [actionLoading, setActionLoading] = createSignal<string | null>(null);
 
-  const handleAction = async (action: () => Promise<void> | undefined, name: string) => {
+  const handleAction = async (action: () => void | Promise<void>, name: string) => {
     if (!action) return;
     setActionLoading(name);
     try {
@@ -595,7 +595,7 @@ function FileHeader(props: {
         cursor: "pointer",
         "user-select": "none",
         "border-bottom": `1px solid ${tokens.colors.border.divider}`,
-        transition: `background ${tokens.motion.duration.fast}`,
+        transition: `background ${tokens.transitions.fast}`,
       }}
       onClick={props.onToggle}
       onMouseEnter={() => setIsHovered(true)}
@@ -829,7 +829,8 @@ function InlineDiffEditor(props: {
 }) {
   let containerRef: HTMLDivElement | undefined;
   let diffEditorInstance: Monaco.editor.IStandaloneDiffEditor | null = null;
-  let diffNavigator: Monaco.editor.IDiffNavigator | null = null;
+  // Track current change index for navigation (since Monaco's DiffNavigator is deprecated)
+  let currentChangeIndex = 0;
   const monacoManager = MonacoManager.getInstance();
 
   onMount(async () => {
@@ -899,16 +900,40 @@ function InlineDiffEditor(props: {
         modified: modifiedModel,
       });
 
-      // Create diff navigator for change navigation
-      diffNavigator = monaco.editor.createDiffNavigator(diffEditorInstance, {
-        followsCaret: true,
-        ignoreCharChanges: true,
-      });
+      // Helper function to navigate to a specific change
+      const goToChange = (index: number) => {
+        if (!diffEditorInstance) return;
+        const changes = diffEditorInstance.getLineChanges();
+        if (!changes || changes.length === 0) return;
+        
+        // Clamp index to valid range
+        currentChangeIndex = Math.max(0, Math.min(index, changes.length - 1));
+        const change = changes[currentChangeIndex];
+        
+        // Reveal the change in the modified editor
+        const modifiedEditor = diffEditorInstance.getModifiedEditor();
+        if (modifiedEditor && change) {
+          modifiedEditor.revealLineInCenter(change.modifiedStartLineNumber);
+          modifiedEditor.setPosition({ lineNumber: change.modifiedStartLineNumber, column: 1 });
+        }
+      };
 
       // Expose navigation methods
       props.onEditorReady?.({
-        goToNextChange: () => diffNavigator?.next(),
-        goToPreviousChange: () => diffNavigator?.previous(),
+        goToNextChange: () => {
+          const changes = diffEditorInstance?.getLineChanges();
+          if (changes && changes.length > 0) {
+            currentChangeIndex = (currentChangeIndex + 1) % changes.length;
+            goToChange(currentChangeIndex);
+          }
+        },
+        goToPreviousChange: () => {
+          const changes = diffEditorInstance?.getLineChanges();
+          if (changes && changes.length > 0) {
+            currentChangeIndex = (currentChangeIndex - 1 + changes.length) % changes.length;
+            goToChange(currentChangeIndex);
+          }
+        },
         getChangesCount: () => {
           const changes = diffEditorInstance?.getLineChanges();
           return changes?.length ?? 0;
@@ -922,10 +947,6 @@ function InlineDiffEditor(props: {
   });
 
   onCleanup(() => {
-    if (diffNavigator) {
-      diffNavigator.dispose();
-      diffNavigator = null;
-    }
     if (diffEditorInstance) {
       const model = diffEditorInstance.getModel();
       if (model) {

cortex-gui/src/components/editor/OutlinePanel.tsx

@@ -254,7 +254,7 @@ function VirtualizedSymbolItem(props: VirtualizedSymbolItemProps) {
           size="xs"
           truncate
           style={{ "max-width": "80px" }}
-          title={symbol().detail}
+
         >
           {symbol().detail}
         </Text>
@@ -410,7 +410,6 @@ function SymbolTypeFilterDropdown(props: SymbolTypeFilterDropdownProps) {
             const config = symbolTypeFilterConfig[type];
             const isEnabled = () => outline.isSymbolTypeEnabled(type);
             const count = () => outline.state.symbolTypeCounts[type] || 0;
-            const Icon = symbolTypeIcons[type];
 
             return (
               <ListItem
@@ -870,7 +869,7 @@ const filteredSymbols = () => sortSymbols(outline.getFilteredSymbols(), sortOrde
             onClick={handleRefresh}
             tooltip="Refresh"
           >
-            <Icon name="rotate" size={14} spin={outline.state.loading} />
+            <Icon name="rotate" size={14} style={{ animation: outline.state.loading ? "spin 1s linear infinite" : "none" }} />
           </IconButton>
           <Show when={props.onClose}>
             <IconButton
@@ -922,9 +921,11 @@ const filteredSymbols = () => sortSymbols(outline.getFilteredSymbols(), sortOrde
           "flex-shrink": "0",
         }}
       >
-        <Text variant="muted" truncate title={activeFileName()}>
-          {activeFileName()}
-        </Text>
+        <span title={activeFileName()}>
+          <Text variant="muted" truncate>
+            {activeFileName()}
+          </Text>
+        </span>
         <QuickFilterButtons />
       </div>
 
@@ -951,7 +952,7 @@ const filteredSymbols = () => sortSymbols(outline.getFilteredSymbols(), sortOrde
         <Show when={outline.state.error && !outline.state.loading}>
           <EmptyState
             title="Error"
-            description={outline.state.error}
+            description={outline.state.error ?? undefined}
             style={{ padding: "16px" }}
           />
         </Show>

cortex-gui/src/components/editor/ParameterHintsWidget.tsx

@@ -13,8 +13,7 @@
  * - Consistent theming with Ayu Dark style
  */
 
-import { createSignal, createEffect, onMount, onCleanup, Show, For, createMemo } from "solid-js";
-import type { SignatureInformation, ParameterHintsState } from "@/types/editor";
+import { createSignal, createEffect, onMount, onCleanup, Show, createMemo } from "solid-js";
 import type { SignatureHelp, Position } from "@/context/LSPContext";
 import type * as Monaco from "monaco-editor";
 import { SafeHTML } from "../ui/SafeHTML";