Even better dropdown filtering

src-web/components/GrpcConnectionSetupPane.tsx

@@ -132,7 +132,6 @@ export function GrpcConnectionSetupPane({
   const tabs: TabItem[] = useMemo(
     () => [
       { value: 'message', label: 'Message' },
-      { value: 'metadata', label: 'Metadata' },
       {
         value: 'auth',
         label: 'Auth',
@@ -149,6 +148,7 @@ export function GrpcConnectionSetupPane({
           },
         },
       },
+      { value: 'metadata', label: 'Metadata' },
     ],
     [],
   );

src-web/components/core/Dropdown.tsx

@@ -236,7 +236,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     const isSpecial = e.ctrlKey || e.metaKey || e.altKey;
     if (isCharacter && !isSpecial) {
       e.preventDefault();
-      setFilter((f) => f + e.key);
+      setFilter((f) => (f + e.key).trim());
       setSelectedIndex(0);
     } else if (e.key === 'Backspace' && !isSpecial) {
       e.preventDefault();
@@ -356,10 +356,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
   }, [triggerShape, containerWidth]);
 
   const filteredItems = useMemo(
-    () =>
+    () => items.filter((i) => getNodeText(i.label).toLowerCase().includes(filter.toLowerCase())),
-      items.filter(
-        (i) => filter === '' || getNodeText(i.label).toLowerCase().includes(filter.toLowerCase()),
-      ),
     [items, filter],
   );
 
@@ -425,42 +422,36 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                     <HStack
                       space={2}
                       alignItems="center"
-                      className="py-0.5 px-1.5 mb-1 text-xs border border-highlight mx-2 rounded font-mono"
+                      className="pb-0.5 px-1.5 mb-2 text-xs border border-highlight mx-2 rounded font-mono h-2xs"
                     >
-                      <Icon icon="search" size="xs" className="text-gray-600" />
+                      <Icon icon="search" size="xs" className="text-gray-700" />
                       <div className="text-gray-800">{filter}</div>
                     </HStack>
                   )}
                   {filteredItems.length === 0 && (
                     <span className="text-gray-500 text-sm text-center px-2 py-1">No matches</span>
                   )}
-                  {items
+                  {filteredItems.map((item, i) => {
-                    .filter(
+                    if (item.type === 'separator') {
-                      (i) =>
-                        filter === '' ||
-                        getNodeText(i.label).toLowerCase().includes(filter.toLowerCase()),
-                    )
-                    .map((item, i) => {
-                      if (item.type === 'separator') {
-                        return (
-                          <Separator key={i} className={classNames('my-1.5', item.label && 'ml-2')}>
-                            {item.label}
-                          </Separator>
-                        );
-                      }
-                      if (item.hidden) {
-                        return null;
-                      }
                       return (
-                        <MenuItem
+                        <Separator key={i} className={classNames('my-1.5', item.label && 'ml-2')}>
-                          focused={i === selectedIndex}
+                          {item.label}
-                          onFocus={handleFocus}
+                        </Separator>
-                          onSelect={handleSelect}
-                          key={item.key}
-                          item={item}
-                        />
                       );
-                    })}
+                    }
+                    if (item.hidden) {
+                      return null;
+                    }
+                    return (
+                      <MenuItem
+                        focused={i === selectedIndex}
+                        onFocus={handleFocus}
+                        onSelect={handleSelect}
+                        key={item.key}
+                        item={item}
+                      />
+                    );
+                  })}
                 </VStack>
               )}
             </motion.div>

tailwind.config.cjs

@@ -1,6 +1,7 @@
 const plugin = require('tailwindcss/plugin');
 
 const height = {
+  '2xs': '1.5rem',
   xs: '1.75rem',
   sm: '2.0rem',
   md: '2.5rem',