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',
@@ -266,6 +283,25 @@ 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,
@@ -296,8 +332,8 @@ function TopBar({
   setSearchQuery: (query: string) => void
 }) {
   return (
-    <div className="flex-none px-4 py-2 border-b border-border flex items-center gap-4">
-      <div className="basis-1/3 flex">
+    <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) => {
@@ -308,58 +344,66 @@ function TopBar({
         />
       </div>
 
-      <div className="basis-2/3 flex justify-end items-center space-x-4">
+      <div className="flex items-center gap-2">
         {analyzeData && (
           <>
-            <ToggleGroup
-              type="single"
+            <Select
               value={sizeMode}
-              onValueChange={(value) => {
-                if (value) setSizeMode(value as SizeMode)
-              }}
-              size="sm"
+              onValueChange={(value) => setSizeMode(value as SizeMode)}
             >
-              <ToggleGroupItem value={SizeMode.Uncompressed}>
-                Uncompressed
-              </ToggleGroupItem>
-              <ToggleGroupItem value={SizeMode.Compressed}>
-                Compressed
-              </ToggleGroupItem>
-            </ToggleGroup>
-
-            <ControlDivider />
-
-            <ToggleGroup
-              type="single"
+              <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) => {
-                if (value) setEnvironmentFilter(value as Environment)
-              }}
-              size="sm"
+              onValueChange={(value) =>
+                setEnvironmentFilter(value as Environment)
+              }
             >
-              <ToggleGroupItem value={Environment.Client}>
-                Client
-              </ToggleGroupItem>
-              <ToggleGroupItem value={Environment.Server}>
-                Server
-              </ToggleGroupItem>
-            </ToggleGroup>
-
-            <ControlDivider />
-
-            <ToggleGroup
-              type="multiple"
+              <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={(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>
+              onValueChange={setTypeFilter}
+              emptyMessage="All Types"
+              selectionName="type"
+              triggerIcon={<FileCode className="h-3.5 w-3.5" />}
+              aria-label="Filter by file type"
+            />
 
             <ControlDivider />
 

apps/bundle-analyzer/components/ui/multi-select.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export interface MultiSelectPropOption {
+  value: string
+  label: string
+  icon?: React.ReactNode
+}
+
+interface MultiSelectProps {
+  options: MultiSelectPropOption[]
+  value: string[]
+  onValueChange: (value: string[]) => void
+  placeholder?: string
+  emptyMessage?: string
+  selectionName?: string
+  className?: string
+  triggerClassName?: string
+  triggerIcon?: React.ReactNode
+  'aria-label'?: string
+}
+
+export function MultiSelect({
+  options,
+  value,
+  onValueChange,
+  placeholder = 'Select items...',
+  emptyMessage = 'All items',
+  selectionName,
+  className,
+  triggerClassName,
+  triggerIcon,
+  'aria-label': ariaLabel,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const handleToggle = (optionValue: string, checked: boolean) => {
+    const newValue = checked
+      ? [...value, optionValue]
+      : value.filter((v) => v !== optionValue)
+    if (newValue.length > 0) {
+      onValueChange(newValue)
+    }
+  }
+
+  const displayText =
+    value.length === options.length
+      ? emptyMessage
+      : value.length === 0
+        ? placeholder
+        : selectionName
+          ? `${value.length} ${selectionName}${value.length === 1 ? '' : 's'}`
+          : `${value.length} selected`
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            'h-8 w-[120px] justify-between text-xs px-3 focus-visible:ring-[3px] focus-visible:ring-ring/50',
+            triggerClassName
+          )}
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="dialog"
+          aria-label={ariaLabel}
+          onKeyDown={(e) => {
+            if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {
+              e.preventDefault()
+              setOpen(true)
+            }
+          }}
+        >
+          <div className="flex items-center gap-1">
+            {triggerIcon && (
+              <span className="shrink-0" aria-hidden="true">
+                {triggerIcon}
+              </span>
+            )}
+            <span>{displayText}</span>
+          </div>
+          <ChevronDown className="h-3.5 w-3.5 opacity-50" aria-hidden="true" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn('w-48 p-2', className)}
+        align="end"
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            setOpen(false)
+            return
+          }
+
+          const checkboxes = Array.from(
+            e.currentTarget.querySelectorAll('input[type="checkbox"]')
+          ) as HTMLInputElement[]
+          const currentIndex = checkboxes.indexOf(
+            document.activeElement as HTMLInputElement
+          )
+
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault()
+            if (currentIndex === -1) {
+              checkboxes[0]?.focus()
+            } else {
+              const nextIndex =
+                e.key === 'ArrowDown'
+                  ? (currentIndex + 1) % checkboxes.length
+                  : (currentIndex - 1 + checkboxes.length) % checkboxes.length
+              checkboxes[nextIndex]?.focus()
+            }
+          }
+        }}
+      >
+        <fieldset className="space-y-2">
+          <legend className="sr-only">{ariaLabel || placeholder}</legend>
+          {options.map((option) => (
+            <MultiSelectOption
+              key={option.value}
+              label={option.label}
+              icon={option.icon}
+              checked={value.includes(option.value)}
+              onChange={(checked) => handleToggle(option.value, checked)}
+            />
+          ))}
+        </fieldset>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function MultiSelectOption({
+  label,
+  icon,
+  checked,
+  onChange,
+}: {
+  label: string
+  icon?: React.ReactNode
+  checked: boolean
+  onChange: (checked: boolean) => void
+}) {
+  return (
+    <label
+      className="flex items-center gap-2 cursor-pointer hover:bg-accent focus-within:bg-accent rounded px-2 py-1.5 transition-colors"
+      onClick={(e) => {
+        e.preventDefault()
+        onChange(!checked)
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onChange(!checked)
+        }
+      }}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="h-3.5 w-3.5 rounded border-input focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+        aria-label={label}
+      />
+      {icon && (
+        <span className="shrink-0" aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      <span className="text-xs">{label}</span>
+    </label>
+  )
+}