🎨 Palette: Micro-UX improvements for Search and Filters

src/components/filter.tsx

@@ -103,9 +103,11 @@ export const Selections = ({
 export const Filter = ({
   children,
   className,
+  activeCount = 0,
 }: {
   children: ReactNode;
   className?: string;
+  activeCount?: number;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -118,9 +120,14 @@ export const Filter = ({
           isIconOnly
           aria-label="Open filters"
           aria-haspopup="dialog"
-          className={className}
+          className={`relative ${className}`}
         >
           <AdjustmentsHorizontalIcon className="size-6" />
+          {activeCount > 0 && (
+            <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-white shadow-sm ring-2 ring-white dark:ring-slate-800">
+              {activeCount}
+            </span>
+          )}
         </Button>
       </Popover.Trigger>
       <Popover.Content

src/components/search.tsx

@@ -28,6 +28,15 @@ export const Searchbar = ({
     );
 
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && document.activeElement === inputRef.current) {
+        if (query) {
+          setQuery("");
+        } else {
+          inputRef.current?.blur();
+        }
+        return;
+      }
+
       const isSearchShortcut =
         (e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/";
 
@@ -47,7 +56,7 @@ export const Searchbar = ({
 
     globalThis.addEventListener("keydown", handleKeyDown);
     return () => globalThis.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [query, setQuery]);
 
   return (
     <div className="relative flex w-full">
@@ -88,7 +97,10 @@ export const Searchbar = ({
           variant="ghost"
           size="sm"
           aria-label="Clear search"
-          onPress={() => setQuery("")}
+          onPress={() => {
+            setQuery("");
+            inputRef.current?.focus();
+          }}
           className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 min-w-0 h-7 w-7"
         >
           <XMarkIcon className="size-4" />

src/components/unified-filter-bar.tsx

@@ -38,28 +38,38 @@ const FilterDropdown = memo(
   }: {
     selected: Record<string, string[]>;
     setSelected: (category: string, selected: string[]) => void;
-  }) => (
-    <Filter className="rounded-l-none rounded-r-2xl border-l-0 bg-white dark:bg-slate-800 h-[38px] min-w-[48px] hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border-zinc-200 dark:border-zinc-700">
-      <Selections
-        label="Areas"
-        values={AREA_OPTIONS}
-        selected={selected["areas"] || []}
-        setSelected={(vals) => setSelected("areas", vals)}
-      />
-      <Selections
-        label="Skills"
-        values={SKILL_OPTIONS}
-        selected={selected["skills"] || []}
-        setSelected={(vals) => setSelected("skills", vals)}
-      />
-      <Selections
-        label="Roles"
-        values={ROLE_OPTIONS}
-        selected={selected["roles"] || []}
-        setSelected={(vals) => setSelected("roles", vals)}
-      />
-    </Filter>
-  ),
+  }) => {
+    const activeCount = Object.values(selected).reduce(
+      (acc, curr) => acc + curr.length,
+      0,
+    );
+
+    return (
+      <Filter
+        activeCount={activeCount}
+        className="rounded-l-none rounded-r-2xl border-l-0 bg-white dark:bg-slate-800 h-[38px] min-w-[48px] hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border-zinc-200 dark:border-zinc-700"
+      >
+        <Selections
+          label="Areas"
+          values={AREA_OPTIONS}
+          selected={selected["areas"] || []}
+          setSelected={(vals) => setSelected("areas", vals)}
+        />
+        <Selections
+          label="Skills"
+          values={SKILL_OPTIONS}
+          selected={selected["skills"] || []}
+          setSelected={(vals) => setSelected("skills", vals)}
+        />
+        <Selections
+          label="Roles"
+          values={ROLE_OPTIONS}
+          selected={selected["roles"] || []}
+          setSelected={(vals) => setSelected("roles", vals)}
+        />
+      </Filter>
+    );
+  },
 );
 
 FilterDropdown.displayName = "FilterDropdown";