bundle-analyzer: use <Select> and multiselect for top bar

The top bar is getting quite wide with all of its button toggle groups. This:

- Converts the Compressed/Uncompressed and Client/Server toggles to shadcn `<Select>`s
- Adds a custom `<MultiSelect>` implementation since this is missing in shadcn. This composes shadcn’s popovers and a series of checkboxes, along with accessibility attributes and keyboard shortcuts.
- Uses this `<MultiSelect>` for the type filter
- Removes the divider between these since there aren’t any groups left to divide

Author: wbinnssmith

apps/bundle-analyzer/app/page.tsx

@@ -13,11 +13,28 @@ import { TreemapVisualizer } from '@/components/treemap-visualizer'
 
 import { Badge } from '@/components/ui/badge'
 import { TreemapSkeleton } from '@/components/ui/skeleton'
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { MultiSelect } from '@/components/ui/multi-select'
 import { AnalyzeData, ModulesData } from '@/lib/analyze-data'
 import { computeActiveEntries, computeModuleDepthMap } from '@/lib/module-graph'
 import { fetchStrict } from '@/lib/utils'
 import { formatBytes } from '@/lib/utils'
+import {
+  File,
+  FileArchive,
+  Monitor,
+  Server,
+  FileCode,
+  FileJson,
+  Palette,
+  Package,
+} from 'lucide-react'
 
 enum Environment {
   Client = 'client',
@@ -153,78 +170,21 @@ export default function Home() {
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >
-      <div className="flex-none px-4 py-2 border-b border-border flex items-center gap-4">
-        <div className="basis-1/3 flex">
-          <RouteTypeahead
-            selectedRoute={selectedRoute}
-            onRouteSelected={(route) => {
-              setSelectedRoute(route)
-              setSelectedSourceIndex(null)
-              setFocusedSourceIndex(null)
-            }}
-          />
-        </div>
-
-        <div className="basis-2/3 flex justify-end items-center space-x-4">
-          {analyzeData && (
-            <>
-              <ToggleGroup
-                type="single"
-                value={sizeMode}
-                onValueChange={(value) => {
-                  if (value) setSizeMode(value as SizeMode)
-                }}
-                size="sm"
-              >
-                <ToggleGroupItem value={SizeMode.Uncompressed}>
-                  Uncompressed
-                </ToggleGroupItem>
-                <ToggleGroupItem value={SizeMode.Compressed}>
-                  Compressed
-                </ToggleGroupItem>
-              </ToggleGroup>
-
-              <ControlDivider />
-
-              <ToggleGroup
-                type="single"
-                value={environmentFilter}
-                onValueChange={(value) => {
-                  if (value) setEnvironmentFilter(value as Environment)
-                }}
-                size="sm"
-              >
-                <ToggleGroupItem value={Environment.Client}>
-                  Client
-                </ToggleGroupItem>
-                <ToggleGroupItem value={Environment.Server}>
-                  Server
-                </ToggleGroupItem>
-              </ToggleGroup>
-
-              <ControlDivider />
-
-              <ToggleGroup
-                type="multiple"
-                value={typeFilter}
-                onValueChange={(value) => {
-                  if (value.length > 0) setTypeFilter(value)
-                }}
-                size="sm"
-              >
-                <ToggleGroupItem value="js">JS</ToggleGroupItem>
-                <ToggleGroupItem value="css">CSS</ToggleGroupItem>
-                <ToggleGroupItem value="json">JSON</ToggleGroupItem>
-                <ToggleGroupItem value="asset">Asset</ToggleGroupItem>
-              </ToggleGroup>
-
-              <ControlDivider />
-
-              <FileSearch value={searchQuery} onChange={setSearchQuery} />
-            </>
-          )}
-        </div>
-      </div>
+      <TopBar
+        analyzeData={analyzeData}
+        selectedRoute={selectedRoute}
+        setSelectedRoute={setSelectedRoute}
+        sizeMode={sizeMode}
+        setSizeMode={setSizeMode}
+        environmentFilter={environmentFilter}
+        setEnvironmentFilter={setEnvironmentFilter}
+        setSelectedSourceIndex={setSelectedSourceIndex}
+        setFocusedSourceIndex={setFocusedSourceIndex}
+        typeFilter={typeFilter}
+        setTypeFilter={setTypeFilter}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+      />
 
       <div className="flex-1 flex min-h-0">
         {error && !analyzeData ? (
@@ -323,6 +283,138 @@ export default function Home() {
   )
 }
 
+const typeFilterOptions = [
+  {
+    value: 'js',
+    label: 'JavaScript',
+    icon: <FileCode className="h-3.5 w-3.5" />,
+  },
+  { value: 'css', label: 'CSS', icon: <Palette className="h-3.5 w-3.5" /> },
+  {
+    value: 'json',
+    label: 'JSON',
+    icon: <FileJson className="h-3.5 w-3.5" />,
+  },
+  {
+    value: 'asset',
+    label: 'Asset',
+    icon: <Package className="h-3.5 w-3.5" />,
+  },
+]
+
+function TopBar({
+  analyzeData,
+  selectedRoute,
+  setSelectedRoute,
+  sizeMode,
+  setSizeMode,
+  environmentFilter,
+  setEnvironmentFilter,
+  setSelectedSourceIndex,
+  setFocusedSourceIndex,
+  typeFilter,
+  setTypeFilter,
+  searchQuery,
+  setSearchQuery,
+}: {
+  analyzeData: AnalyzeData | undefined
+  selectedRoute: string | null
+  setSelectedRoute: (route: string | null) => void
+  sizeMode: SizeMode
+  setSizeMode: (mode: SizeMode) => void
+  environmentFilter: Environment
+  setEnvironmentFilter: (env: Environment) => void
+  setSelectedSourceIndex: (index: number | null) => void
+  setFocusedSourceIndex: (index: number | null) => void
+  typeFilter: string[]
+  setTypeFilter: (types: string[]) => void
+  searchQuery: string
+  setSearchQuery: (query: string) => void
+}) {
+  return (
+    <div className="flex-none px-4 py-2 border-b border-border flex items-center gap-3">
+      <div className="flex-1 flex">
+        <RouteTypeahead
+          selectedRoute={selectedRoute}
+          onRouteSelected={(route) => {
+            setSelectedRoute(route)
+            setSelectedSourceIndex(null)
+            setFocusedSourceIndex(null)
+          }}
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        {analyzeData && (
+          <>
+            <Select
+              value={sizeMode}
+              onValueChange={(value) => setSizeMode(value as SizeMode)}
+            >
+              <SelectTrigger className="w-fit min-w-[120px] h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={SizeMode.Uncompressed} className="text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <File className="h-3.5 w-3.5" />
+                    <span className="text-xs">Uncompressed</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value={SizeMode.Compressed} className="text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <FileArchive className="h-3.5 w-3.5" />
+                    <span className="text-xs">Compressed</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select
+              value={environmentFilter}
+              onValueChange={(value) =>
+                setEnvironmentFilter(value as Environment)
+              }
+            >
+              <SelectTrigger className="w-fit min-w-[100px] h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={Environment.Client} className="text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <Monitor className="h-3.5 w-3.5" />
+                    <span className="text-xs">Client</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value={Environment.Server} className="text-xs">
+                  <div className="flex items-center gap-1.5">
+                    <Server className="h-3.5 w-3.5" />
+                    <span className="text-xs">Server</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+
+            <MultiSelect
+              options={typeFilterOptions}
+              value={typeFilter}
+              onValueChange={setTypeFilter}
+              emptyMessage="All Types"
+              selectionName="type"
+              triggerIcon={<FileCode className="h-3.5 w-3.5" />}
+              aria-label="Filter by file type"
+            />
+
+            <ControlDivider />
+
+            <FileSearch value={searchQuery} onChange={setSearchQuery} />
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
 function ControlDivider() {
   return <span className="h-6 w-px bg-muted-foreground/30" />
 }