fix scroll issues

Author: DanielFGray

src/commandPalette.tsx

@@ -3,22 +3,48 @@
  * Modal overlay with command search and execution
  */
 
-import { For, Show, createMemo } from "solid-js";
+import { For, Show, createMemo, createEffect } from "solid-js";
 import { useStore } from "./store";
 import { getCommands, filterCommands } from "./commands";
 import { useTerminalDimensions } from "@opentui/solid";
-import { RGBA } from "@opentui/core";
+import { RGBA, type ScrollBoxRenderable } from "@opentui/core";
 
 export function CommandPalette() {
   const { store, actions } = useStore();
   const dimensions = useTerminalDimensions();
+  let scrollBoxRef: ScrollBoxRenderable | undefined;
 
   // Get filtered commands
   const filteredCommands = createMemo(() => {
     const allCommands = getCommands(actions);
     return filterCommands(allCommands, store.ui.commandPaletteQuery);
   });
 
+  // Auto-scroll when selection changes
+  createEffect(() => {
+    const selectedIndex = store.ui.selectedCommandIndex;
+    if (!scrollBoxRef) return;
+
+    // Find the target box by ID
+    const target = scrollBoxRef.getChildren().find((child) => {
+      return child.id === `command-${selectedIndex}`;
+    });
+
+    if (!target) return;
+
+    // Calculate relative position
+    const y = target.y - scrollBoxRef.y;
+
+    // Scroll down if needed
+    if (y >= scrollBoxRef.height) {
+      scrollBoxRef.scrollBy(y - scrollBoxRef.height + 1);
+    }
+    // Scroll up if needed
+    if (y < 0) {
+      scrollBoxRef.scrollBy(y);
+    }
+  });
+
   return (
     <Show when={store.ui.showCommandPalette}>
       {/* Full-screen overlay - positioned absolutely */}
@@ -38,7 +64,7 @@ export function CommandPalette() {
           maxWidth={dimensions().width - 2}
           flexDirection="column"
           backgroundColor="#1a1b26"
-          border={["all"]}
+          border={["top", "bottom", "left", "right"]}
           borderColor="#414868"
           paddingTop={1}
         >
@@ -56,11 +82,13 @@ export function CommandPalette() {
 
           {/* Command list */}
           <scrollbox
+            ref={(r) => (scrollBoxRef = r)}
             flexDirection="column"
-            height={12}
+            height={5}
             flexShrink={0}
             paddingLeft={2}
             paddingRight={2}
+            scrollbarOptions={{ visible: false }}
           >
             <Show
               when={filteredCommands().length > 0}
@@ -75,6 +103,7 @@ export function CommandPalette() {
 
                   return (
                     <box
+                      id={`command-${index()}`}
                       flexDirection="row"
                       justifyContent="space-between"
                       backgroundColor={isSelected() ? "#414868" : undefined}

src/index.tsx

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
+console.log("[INDEX MODULE] Loading index.tsx");
 import { render, useKeyboard, useRenderer } from "@opentui/solid";
-import { Show, createMemo, onMount } from "solid-js";
+import { Show, createMemo, onMount, createEffect } from "solid-js";
 import * as Option from "effect/Option";
 import { PORT } from "./runtime";
 import { StoreProvider, useStore, type FocusedSection } from "./store";
@@ -95,6 +96,33 @@ function AppContent() {
     }
   });
 
+  // Auto-scroll to keep selected span in view
+  createEffect(() => {
+    const selectedSpanId = store.ui.selectedSpanId;
+    if (!selectedSpanId || !spansScrollBoxRef) return;
+
+    // The span tree is wrapped in a box, so we need to get the children of that box
+    const scrollBoxChildren = spansScrollBoxRef.getChildren();
+    if (scrollBoxChildren.length === 0) return;
+
+    // Get the actual span text elements (children of the first box)
+    const spanElements = scrollBoxChildren[0].getChildren();
+    const target = spanElements.find((child) => child.id === selectedSpanId);
+    if (!target) return;
+
+    // Calculate relative position
+    const y = target.y - spansScrollBoxRef.y;
+
+    // Scroll down if needed
+    if (y >= spansScrollBoxRef.height) {
+      spansScrollBoxRef.scrollBy(y - spansScrollBoxRef.height + 1);
+    }
+    // Scroll up if needed
+    if (y < 0) {
+      spansScrollBoxRef.scrollBy(y);
+    }
+  });
+
   // Setup keyboard handlers
   useKeyboard((key) => {
     // Quit handlers

src/store.tsx

@@ -18,6 +18,7 @@ import {
 } from "solid-js";
 import type * as Domain from "@effect/experimental/DevTools/Domain";
 import type { Client } from "./server";
+import { getCommands, filterCommands } from "./commands";
 
 // =============================================================================
 // Types
@@ -587,57 +588,48 @@ export function StoreProvider(props: ParentProps) {
     },
 
     navigateCommandUp: () => {
-      // Import commands to get the filtered list length
-      import("./commands").then(({ getCommands, filterCommands }) => {
-        const allCommands = getCommands(actions);
-        const filtered = filterCommands(
-          allCommands,
-          store.ui.commandPaletteQuery,
-        );
-        if (filtered.length === 0) return;
+      const allCommands = getCommands(actions);
+      const filtered = filterCommands(
+        allCommands,
+        store.ui.commandPaletteQuery,
+      );
+      if (filtered.length === 0) return;
 
-        setStore("ui", "selectedCommandIndex", (prev) => {
-          if (prev <= 0) return filtered.length - 1;
-          return prev - 1;
-        });
+      setStore("ui", "selectedCommandIndex", (prev) => {
+        if (prev <= 0) return filtered.length - 1;
+        return prev - 1;
       });
     },
 
     navigateCommandDown: () => {
-      // Import commands to get the filtered list length
-      import("./commands").then(({ getCommands, filterCommands }) => {
-        const allCommands = getCommands(actions);
-        const filtered = filterCommands(
-          allCommands,
-          store.ui.commandPaletteQuery,
-        );
-        if (filtered.length === 0) return;
+      const allCommands = getCommands(actions);
+      const filtered = filterCommands(
+        allCommands,
+        store.ui.commandPaletteQuery,
+      );
+      if (filtered.length === 0) return;
 
-        setStore("ui", "selectedCommandIndex", (prev) => {
-          if (prev >= filtered.length - 1) return 0;
-          return prev + 1;
-        });
+      setStore("ui", "selectedCommandIndex", (prev) => {
+        if (prev >= filtered.length - 1) return 0;
+        return prev + 1;
       });
     },
 
     executeSelectedCommand: () => {
-      // Import commands to get the selected command
-      import("./commands").then(({ getCommands, filterCommands }) => {
-        const allCommands = getCommands(actions);
-        const filtered = filterCommands(
-          allCommands,
-          store.ui.commandPaletteQuery,
-        );
-        const selected = filtered[store.ui.selectedCommandIndex];
-        if (selected) {
-          selected.execute();
-          batch(() => {
-            setStore("ui", "showCommandPalette", false);
-            setStore("ui", "commandPaletteQuery", "");
-            setStore("ui", "selectedCommandIndex", 0);
-          });
-        }
-      });
+      const allCommands = getCommands(actions);
+      const filtered = filterCommands(
+        allCommands,
+        store.ui.commandPaletteQuery,
+      );
+      const selected = filtered[store.ui.selectedCommandIndex];
+      if (selected) {
+        selected.execute();
+        batch(() => {
+          setStore("ui", "showCommandPalette", false);
+          setStore("ui", "commandPaletteQuery", "");
+          setStore("ui", "selectedCommandIndex", 0);
+        });
+      }
     },
 
     expandAllSpans: () => {