From ab8503d87cbfcda582058617beb72d0f9936fc56 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 17 Feb 2024 22:27:01 -0800
Subject: [PATCH] Even better dropdown filtering

---
 .../components/GrpcConnectionSetupPane.tsx    |  2 +-
 src-web/components/core/Dropdown.tsx          | 55 ++++++++-----------
 tailwind.config.cjs                           |  1 +
 3 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/src-web/components/GrpcConnectionSetupPane.tsx b/src-web/components/GrpcConnectionSetupPane.tsx
index bd7b6351..53709ae4 100644
--- a/src-web/components/GrpcConnectionSetupPane.tsx
+++ b/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' },
     ],
     [],
   );
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index 7482fb8a..36999c8e 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/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) => filter === '' || getNodeText(i.label).toLowerCase().includes(filter.toLowerCase()),
-      ),
+    () => items.filter((i) => 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
-                    .filter(
-                      (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;
-                      }
+                  {filteredItems.map((item, i) => {
+                    if (item.type === 'separator') {
                       return (
-                        <MenuItem
-                          focused={i === selectedIndex}
-                          onFocus={handleFocus}
-                          onSelect={handleSelect}
-                          key={item.key}
-                          item={item}
-                        />
+                        <Separator key={i} className={classNames('my-1.5', item.label && 'ml-2')}>
+                          {item.label}
+                        </Separator>
                       );
-                    })}
+                    }
+                    if (item.hidden) {
+                      return null;
+                    }
+                    return (
+                      <MenuItem
+                        focused={i === selectedIndex}
+                        onFocus={handleFocus}
+                        onSelect={handleSelect}
+                        key={item.key}
+                        item={item}
+                      />
+                    );
+                  })}
                 </VStack>
               )}
             </motion.div>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b180da0c..d30614ff 100644
--- a/tailwind.config.cjs
+++ b/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',