refactor: commands from menu

islands/KMenu.tsx

@@ -37,6 +37,7 @@ export const KMenu = (
   const loadingText = useSignal("");
   const activeIndex = useSignal(-1);
 
+  const containerRef = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null);
   const commandInput = useSignal("");
 
@@ -83,6 +84,23 @@ export const KMenu = (
     }, context);
   }
 
+  const container = containerRef.current;
+  if (container) {
+    const selectedItem = container.children[activeIndex.value];
+    if (selectedItem) {
+      const itemPosition = selectedItem.getBoundingClientRect();
+      const containerPosition = container.getBoundingClientRect();
+
+      // Check if the selected item is above the visible area
+      if (itemPosition.top < containerPosition.top) {
+        container.scrollTop -= containerPosition.top - itemPosition.top;
+      } // Check if the selected item is below the visible area
+      else if (itemPosition.bottom > containerPosition.bottom) {
+        container.scrollTop += itemPosition.bottom - containerPosition.bottom;
+      }
+    }
+  }
+
   useEventListener("keydown", (ev: KeyboardEvent) => {
     if (ev.key === "/" && ev.ctrlKey) {
       visible.value = !visible.value;
@@ -140,7 +158,7 @@ export const KMenu = (
           } border-gray-500 `}
           style={{
             gridTemplateColumns: activeState.value !== "loading"
-              ? "4em 1fr"
+              ? "auto 1fr"
               : "1fr",
           }}
         >
@@ -148,7 +166,7 @@ export const KMenu = (
             (
               <>
                 <div class="grid place-items-center border-r border-gray-500">
-                  <span class="text-white">
+                  <span class="text-white mx-4">
                     {activeMenu.title}
                   </span>
                 </div>
@@ -172,7 +190,11 @@ export const KMenu = (
         </div>
         {activeState.value === "normal" &&
           (
-            <div class="" style={{ maxHeight: "12rem", overflowY: "auto" }}>
+            <div
+              class=""
+              style={{ maxHeight: "12rem", overflowY: "auto" }}
+              ref={containerRef}
+            >
               {entries?.length === 0 && (
                 <div class="text-gray-400 px-4 py-2">
                   No Entries