Fix scroll position bugs and implement jump list navigation (#512)

* Fix bugs scroll position changing buffers

* Hide autocomplete panel on cursor navigation and buffer switch

* Implement jump list for Go to Definition navigation

Add navigation history tracking that records cursor positions when using
Go to Definition (Cmd+Click or F12), allowing users to navigate back and
forward through their code exploration history.

Features:
- Back/forward arrows in breadcrumb toolbar (left side)
- Keyboard shortcuts: Ctrl+- (back) and Ctrl+Shift+- (forward)
- Saves current position before navigating back for proper forward navigation
- Deduplicates entries within 5 lines threshold
- Reopens closed files when navigating to them
- Hides completions when navigating via jump list

New files:
- jump-list-store.ts: Zustand store for navigation history
- jump-navigation.ts: Utility for navigating to jump entries

Co-Authored-By: Claude Opus 4.5 <[email protected]>

---------

Co-authored-by: Claude Opus 4.5 <[email protected]>

Author: 0xDAEF0F

src/features/editor/components/editor.tsx

@@ -743,7 +743,13 @@ export function Editor({
             inputRef.current.selectionStart = safeOffset;
             inputRef.current.selectionEnd = safeOffset;
           }
-          inputRef.current.focus();
+          // Save scroll before focus (focus can scroll to show cursor)
+          const scrollTop = inputRef.current.scrollTop;
+          const scrollLeft = inputRef.current.scrollLeft;
+          inputRef.current.focus({ preventScroll: true });
+          // Restore scroll in case focus changed it
+          inputRef.current.scrollTop = scrollTop;
+          inputRef.current.scrollLeft = scrollLeft;
           // Clear the buffer switch flag after cursor is positioned
           isBufferSwitchRef.current = false;
         }

src/features/editor/components/layers/input-layer.tsx

@@ -4,7 +4,7 @@
  * Uses uncontrolled input for optimal typing performance
  */
 
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo, useCallback, useLayoutEffect, useRef } from "react";
 
 interface InputLayerProps {
   content: string;
@@ -53,8 +53,9 @@ const InputLayerComponent = ({
     [onInput],
   );
 
-  // Sync textarea value ONLY when buffer switches
-  useEffect(() => {
+  // Sync textarea value when buffer switches
+  // Uses useLayoutEffect to run before parent's scroll restoration
+  useLayoutEffect(() => {
     if (ref.current && ref.current.value !== content) {
       ref.current.value = content;
     }

src/features/editor/components/toolbar/breadcrumb.tsx

@@ -1,10 +1,12 @@
-import { ArrowLeft, ChevronRight, Eye, Search, Sparkles } from "lucide-react";
+import { ArrowLeft, ArrowRight, ChevronRight, Eye, Search, Sparkles } from "lucide-react";
 import { type RefObject, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useEventListener, useOnClickOutside } from "usehooks-ts";
 import { EDITOR_CONSTANTS } from "@/features/editor/config/constants";
 import { useBufferStore } from "@/features/editor/stores/buffer-store";
+import { useJumpListStore } from "@/features/editor/stores/jump-list-store";
 import { useEditorStateStore } from "@/features/editor/stores/state-store";
+import { navigateToJumpEntry } from "@/features/editor/utils/jump-navigation";
 import { logger } from "@/features/editor/utils/logger";
 import { FileIcon } from "@/features/file-explorer/components/file-icon";
 import { readDirectory } from "@/features/file-system/controllers/platform";
@@ -30,6 +32,42 @@ export default function Breadcrumb() {
   const { toggle: toggleInlineEditToolbar } = useInlineEditToolbarStore.use.actions();
   const selection = useEditorStateStore.use.selection?.();
 
+  const jumpListActions = useJumpListStore.use.actions();
+  const canGoBack = jumpListActions.canGoBack();
+  const canGoForward = jumpListActions.canGoForward();
+
+  const handleJumpBack = async () => {
+    const bufferStore = useBufferStore.getState();
+    const editorState = useEditorStateStore.getState();
+    const activeBufferId = bufferStore.activeBufferId;
+    const activeBuffer = bufferStore.buffers.find((b) => b.id === activeBufferId);
+
+    const currentPosition =
+      activeBufferId && activeBuffer?.path
+        ? {
+            bufferId: activeBufferId,
+            filePath: activeBuffer.path,
+            line: editorState.cursorPosition.line,
+            column: editorState.cursorPosition.column,
+            offset: editorState.cursorPosition.offset,
+            scrollTop: editorState.scrollTop,
+            scrollLeft: editorState.scrollLeft,
+          }
+        : undefined;
+
+    const entry = jumpListActions.goBack(currentPosition);
+    if (entry) {
+      await navigateToJumpEntry(entry);
+    }
+  };
+
+  const handleJumpForward = async () => {
+    const entry = jumpListActions.goForward();
+    if (entry) {
+      await navigateToJumpEntry(entry);
+    }
+  };
+
   const handleNavigate = async (path: string) => {
     try {
       await handleFileSelect(path, false);
@@ -249,6 +287,26 @@ export default function Breadcrumb() {
     <>
       <div className="flex min-h-7 select-none items-center justify-between border-border border-b bg-terniary-bg px-3 py-1">
         <div className="ui-font flex items-center gap-0.5 overflow-hidden text-text-lighter text-xs">
+          <div className="mr-1 flex items-center gap-0.5">
+            <button
+              onClick={handleJumpBack}
+              disabled={!canGoBack}
+              className="flex h-5 w-5 items-center justify-center rounded text-text-lighter transition-colors hover:bg-hover hover:text-text disabled:cursor-not-allowed disabled:opacity-50"
+              title="Go Back (Ctrl+-)"
+              aria-label="Go back to previous location"
+            >
+              <ArrowLeft size={12} />
+            </button>
+            <button
+              onClick={handleJumpForward}
+              disabled={!canGoForward}
+              className="flex h-5 w-5 items-center justify-center rounded text-text-lighter transition-colors hover:bg-hover hover:text-text disabled:cursor-not-allowed disabled:opacity-50"
+              title="Go Forward (Ctrl+Shift+-)"
+              aria-label="Go forward to next location"
+            >
+              <ArrowRight size={12} />
+            </button>
+          </div>
           {segments.map((segment, index) => (
             <div key={index} className="flex min-w-0 items-center gap-0.5">
               {index > 0 && (

src/features/editor/hooks/use-center-cursor.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { EDITOR_CONSTANTS } from "@/features/editor/config/constants";
+import { editorAPI } from "@/features/editor/extensions/api";
+import { useEditorSettingsStore } from "@/features/editor/stores/settings-store";
+
+export const useCenterCursor = () => {
+  const centerCursorInViewport = useCallback((line: number) => {
+    const textarea = editorAPI.getTextareaRef();
+    if (!textarea) return;
+
+    const fontSize = useEditorSettingsStore.getState().fontSize;
+    const lineHeight = Math.ceil(EDITOR_CONSTANTS.LINE_HEIGHT_MULTIPLIER * fontSize);
+    const viewportHeight = textarea.clientHeight;
+
+    const targetLineTop = line * lineHeight;
+    const centeredScrollTop = targetLineTop - viewportHeight / 2 + lineHeight / 2;
+
+    textarea.scrollTop = Math.max(0, centeredScrollTop);
+  }, []);
+
+  return { centerCursorInViewport };
+};

src/features/editor/hooks/use-lsp-integration.ts

@@ -69,6 +69,12 @@ export const useLspIntegration = ({
   // Use constant debounce for predictable completion behavior
   const completionTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
+  // Track cursor position where completions were triggered (to hide on cursor movement)
+  const completionTriggerOffsetRef = useRef<number | null>(null);
+
+  // Track which file the last input was for (to avoid triggering completions on buffer switch)
+  const lastInputFilePathRef = useRef<string | null>(null);
+
   // Track document versions per file path for LSP sync
   const documentVersionsRef = useRef<Map<string, number>>(new Map());
 
@@ -198,12 +204,22 @@ export const useLspIntegration = ({
       return;
     }
 
+    // Skip if this is a buffer switch (filePath changed but typing happened in a different file)
+    // This prevents completions from appearing when switching to a buffer where user didn't just type
+    if (lastInputFilePathRef.current !== null && lastInputFilePathRef.current !== filePath) {
+      return;
+    }
+
     // Debounce completion trigger with fixed delay for predictable behavior
     completionTimerRef.current = setTimeout(() => {
       // Get latest value at trigger time (not from effect deps)
       const buffer = useBufferStore.getState().buffers.find((b) => b.path === filePath);
       if (!buffer) return;
 
+      // Store the cursor offset and file path where completion was triggered
+      completionTriggerOffsetRef.current = cursorPosition.offset;
+      lastInputFilePathRef.current = filePath;
+
       lspActions.requestCompletion({
         filePath,
         cursorPos: cursorPosition.offset,
@@ -220,6 +236,32 @@ export const useLspIntegration = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- cursorPosition and isApplyingCompletion are read at render time, not as triggers
   }, [lastInputTimestamp, filePath, lspActions, isLspSupported, editorRef]);
 
+  // Hide completions when cursor moves via navigation (not typing)
+  // Navigation = cursor moves but lastInputTimestamp doesn't change
+  const prevInputTimestampRef = useRef<number>(0);
+
+  useEffect(() => {
+    const { isLspCompletionVisible } = useEditorUIStore.getState();
+
+    // Only check if completions are visible
+    if (!isLspCompletionVisible) {
+      prevInputTimestampRef.current = lastInputTimestamp;
+      return;
+    }
+
+    // If lastInputTimestamp changed, this cursor movement was caused by typing
+    // Don't hide completions in this case
+    if (lastInputTimestamp !== prevInputTimestampRef.current) {
+      prevInputTimestampRef.current = lastInputTimestamp;
+      return;
+    }
+
+    // lastInputTimestamp didn't change, so this is navigation (arrow keys, click, etc.)
+    // Hide completions
+    useEditorUIStore.getState().actions.setIsLspCompletionVisible(false);
+    completionTriggerOffsetRef.current = null;
+  }, [cursorPosition.offset, lastInputTimestamp]);
+
   return {
     lspClient,
     isLspSupported,

src/features/editor/lsp/use-go-to-definition.ts

@@ -1,7 +1,10 @@
 import { useCallback } from "react";
 import { EDITOR_CONSTANTS } from "@/features/editor/config/constants";
 import { editorAPI } from "@/features/editor/extensions/api";
+import { useCenterCursor } from "@/features/editor/hooks/use-center-cursor";
 import { useBufferStore } from "@/features/editor/stores/buffer-store";
+import { useJumpListStore } from "@/features/editor/stores/jump-list-store";
+import { useEditorStateStore } from "@/features/editor/stores/state-store";
 import { readFileContent } from "@/features/file-system/controllers/file-operations";
 import { logger } from "../utils/logger";
 
@@ -32,6 +35,8 @@ export const useGoToDefinition = ({
   fontSize,
   charWidth,
 }: UseGoToDefinitionProps) => {
+  const { centerCursorInViewport } = useCenterCursor();
+
   const handleClick = useCallback(
     async (e: React.MouseEvent<HTMLDivElement>) => {
       // Only handle Cmd+Click (Mac) or Ctrl+Click (Windows/Linux)
@@ -76,6 +81,21 @@ export const useGoToDefinition = ({
             const targetFilePath = target.uri.replace("file://", "");
 
             const bufferStore = useBufferStore.getState();
+
+            // Push current position to jump list before navigating
+            const activeBufferId = bufferStore.activeBufferId;
+            if (activeBufferId && filePath) {
+              const editorState = useEditorStateStore.getState();
+              useJumpListStore.getState().actions.pushEntry({
+                bufferId: activeBufferId,
+                filePath,
+                line: editorState.cursorPosition.line,
+                column: editorState.cursorPosition.column,
+                offset: editorState.cursorPosition.offset,
+                scrollTop: editorState.scrollTop,
+                scrollLeft: editorState.scrollLeft,
+              });
+            }
             const existingBuffer = bufferStore.buffers.find((b) => b.path === targetFilePath);
 
             if (existingBuffer) {
@@ -102,6 +122,10 @@ export const useGoToDefinition = ({
                 offset,
               });
 
+              requestAnimationFrame(() => {
+                centerCursorInViewport(target.range.start.line);
+              });
+
               logger.info(
                 "Editor",
                 `Jumped to ${targetFilePath}:${target.range.start.line}:${target.range.start.character}`,
@@ -115,7 +139,7 @@ export const useGoToDefinition = ({
         }
       }
     },
-    [getDefinition, isLanguageSupported, filePath, fontSize, charWidth],
+    [getDefinition, isLanguageSupported, filePath, fontSize, charWidth, centerCursorInViewport],
   );
 
   return {