Init 2

components/command-palette.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState, useRef, useCallback, useMemo } from "react"
+import { useEffect, useState, useRef, useMemo } from "react"
 import { useRouter, usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
 import {
@@ -113,7 +113,9 @@ export function CommandPalette() {
   }, [open])
 
   // ── Close on route change ─────────────────────────────────────────────────
-  useEffect(() => { setOpen(false) }, [pathname])
+  useEffect(() => {
+    queueMicrotask(() => setOpen(false))
+  }, [pathname])
 
   // ── Arrow key + Enter navigation ──────────────────────────────────────────
   function onInputKey(e: React.KeyboardEvent) {
@@ -142,7 +144,9 @@ export function CommandPalette() {
   }, [activeIdx])
 
   // ── Reset active idx when query changes ───────────────────────────────────
-  useEffect(() => { setActiveIdx(0) }, [query])
+  useEffect(() => {
+    queueMicrotask(() => setActiveIdx(0))
+  }, [query])
 
   // ── Grouped results for display ───────────────────────────────────────────
   const grouped = useMemo(() => {