feat: add List component for accessible item navigation

- Introduced a new List component with keyboard navigation support.
- Implemented focus management and active item tracking.
- Added CSS styles for list and item focus states.

refactor: update NestedPopoverMenu to use DropdownSurface

- Replaced custom popover handling with DropdownSurface for better management.
- Removed unused CSS properties and effects related to popover visibility.

feat: enhance CopyConfigDialog and MoveConfigDialog with DropdownSelect

- Replaced select elements with DropdownSelect for conflict handling options.
- Improved user experience with memoized options for dropdowns.

fix: OverlayDialog focus handling improvements

- Updated focus management to respect inert elements.
- Ensured proper handling of Escape key for dismissible dialogs.

style: update dialog styles for consistency

- Adjusted border styles for dialog buttons and input fields.
- Ensured consistent padding and background colors across dialog components.

fix: register additional keybindings for autocomplete

- Added Tab key support for accepting autocomplete suggestions.

style: improve ExtensionsPanel layout and dropdowns

- Refactored extension source and filter selection to use DropdownSelect.
- Enhanced layout with consistent spacing and alignment for better usability.

Author: aesopov

packages/ui/lib/components/AutocompleteInput/AutocompleteInput.module.css

@@ -4,6 +4,7 @@
 
 .autocomplete-input {
   width: 100%;
+  background: var(--bg);
 }
 
 .autocomplete-dropdown {

packages/ui/lib/components/AutocompleteInput/AutocompleteInput.tsx

@@ -10,7 +10,8 @@ import {
 } from "@/features/commands/commandIds";
 import { useCommandRegistry } from "@/features/commands/commands";
 import { useFocusContext, useManagedFocusLayer } from "@/focusContext";
-import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { DropdownSurface } from "@/components/DropdownSurface/DropdownSurface";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import styles from "./AutocompleteInput.module.css";
 
 export interface AutocompleteOption {
@@ -65,7 +66,6 @@ export function AutocompleteInput({
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const pointerDownRef = useRef(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties | null>(null);
   const generatedId = useId();
   const anchorId = id ?? `autocomplete-${generatedId.replace(/:/g, "")}`;
 
@@ -104,6 +104,7 @@ export function AutocompleteInput({
       allowCommandRouting(event) {
         if (!dropdownOpenRef.current) return false;
         switch (event.key) {
+          case "Tab":
           case "ArrowUp":
           case "ArrowDown":
           case "PageUp":
@@ -208,23 +209,6 @@ export function AutocompleteInput({
     };
   }, [commandRegistry, dropdownOpen]);
 
-  useEffect(() => {
-    const dropdown = dropdownRef.current;
-    if (!dropdown) return;
-    if (!("showPopover" in dropdown)) return;
-    const popoverDropdown = dropdown as HTMLDivElement & {
-      showPopover: () => void;
-      hidePopover: () => void;
-      matches: (selector: string) => boolean;
-    };
-    const isOpen = popoverDropdown.matches(":popover-open");
-    if (dropdownOpen) {
-      if (!isOpen) popoverDropdown.showPopover();
-      return;
-    }
-    if (isOpen) popoverDropdown.hidePopover();
-  }, [anchorId, dropdownOpen]);
-
   useEffect(() => {
     if (!dropdownOpen || selectedIndex === null) return;
     const dropdown = dropdownRef.current;
@@ -233,30 +217,6 @@ export function AutocompleteInput({
     selectedEl?.scrollIntoView({ block: "nearest" });
   }, [dropdownOpen, selectedIndex]);
 
-  useLayoutEffect(() => {
-    if (!dropdownOpen) return;
-
-    const updatePosition = () => {
-      const input = mergedInputRef.current;
-      if (!input) return;
-      const rect = input.getBoundingClientRect();
-      setDropdownStyle({
-        position: "fixed",
-        top: rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
-      });
-    };
-
-    updatePosition();
-    window.addEventListener("resize", updatePosition);
-    window.addEventListener("scroll", updatePosition, true);
-    return () => {
-      window.removeEventListener("resize", updatePosition);
-      window.removeEventListener("scroll", updatePosition, true);
-    };
-  }, [dropdownOpen, mergedInputRef]);
-
   return (
     <div className={className ? `${styles["autocomplete"]} ${className}` : styles["autocomplete"]}>
       <input
@@ -273,18 +233,29 @@ export function AutocompleteInput({
           setOpen(true);
           setSelectedIndex(null);
         }}
+        onKeyDownCapture={(event) => {
+          if (event.key !== "Escape") return;
+          if (!dropdownOpenRef.current) return;
+          event.preventDefault();
+          event.stopPropagation();
+          setOpen(false);
+          setSelectedIndex(null);
+        }}
         onBlur={() => {
           if (pointerDownRef.current) return;
           setOpen(false);
           setSelectedIndex(null);
         }}
       />
       {flattened.length > 0 && (
-        <div
-          ref={dropdownRef}
-          popover="manual"
+        <DropdownSurface
+          open={dropdownOpen}
+          anchor={{ type: "element", ref: mergedInputRef }}
+          placement="bottom-start"
+          offset={4}
+          matchAnchorWidth
           className={styles["autocomplete-dropdown"]}
-          style={dropdownStyle ?? undefined}
+          surfaceRef={dropdownRef}
         >
           {groups.map((group) => {
             if (group.options.length === 0) return null;
@@ -325,7 +296,7 @@ export function AutocompleteInput({
               </div>
             );
           })}
-        </div>
+        </DropdownSurface>
       )}
     </div>
   );

packages/ui/lib/components/DropdownSelect/DropdownSelect.module.css

@@ -0,0 +1,82 @@
+.trigger {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+  padding: 6px 8px;
+  border: 1px solid var(--input-border, var(--border));
+  border-radius: 3px;
+  background: var(--bg);
+  background-image: none;
+  color: var(--fg);
+  font: inherit;
+  text-align: left;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.trigger:hover {
+  background: var(--bg);
+  border-color: var(--border-active, var(--input-border, var(--border)));
+}
+
+.trigger:active {
+  background: var(--bg);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--border-active, var(--border));
+  outline-offset: 0;
+  border-color: var(--border-active, var(--border));
+}
+
+.chevron {
+  flex: 0 0 auto;
+  opacity: 0.8;
+}
+
+.menu {
+  min-width: 180px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(320px, calc(100vh - 16px));
+  overflow: auto;
+  border: 1px solid var(--border-active, var(--border));
+  border-radius: 2px;
+  background: var(--bg);
+  color: var(--fg);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
+  padding: 4px;
+  z-index: 20;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  width: 100%;
+  display: block;
+  border: none;
+  background: transparent;
+  color: var(--fg-secondary);
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 2px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.item:hover,
+.item:focus,
+.itemActive,
+.itemSelected {
+  background: var(--entry-hover);
+  color: var(--fg);
+  outline: none;
+}