support tab navigation on ActionIcons in command palette

src/renderer/features/search/components/command-item-selectable.tsx

@@ -0,0 +1,37 @@
+import { Command } from 'cmdk';
+import { ComponentPropsWithoutRef, ReactNode, useEffect, useRef, useState } from 'react';
+
+interface CommandItemSelectableProps
+    extends Omit<ComponentPropsWithoutRef<typeof Command.Item>, 'children'> {
+    children: (args: { isHighlighted: boolean }) => ReactNode;
+}
+
+export function CommandItemSelectable({ children, ...itemProps }: CommandItemSelectableProps) {
+    const ref = useRef<HTMLDivElement>(null);
+    const [isHighlighted, setIsHighlighted] = useState(false);
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+
+        setIsHighlighted(el.getAttribute('aria-selected') === 'true');
+
+        const observer = new MutationObserver(() => {
+            const selected = el.getAttribute('aria-selected') === 'true';
+            setIsHighlighted(selected);
+        });
+
+        observer.observe(el, {
+            attributeFilter: ['aria-selected'],
+            attributes: true,
+        });
+
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <Command.Item {...itemProps} ref={ref}>
+            {children({ isHighlighted })}
+        </Command.Item>
+    );
+}