free-coding-models 0.5.86 → 0.5.87

package/web/src/components/dashboard/FilterBar.jsx

@@ -1,338 +0,0 @@
-/**
- * @file web/src/components/dashboard/FilterBar.jsx
- * @description Filter controls for the model table — TUI parity chips.
- * 📖 M1 parity: tier (T) / status / provider (D) / verdict (V) / health (H) / visibility (E)
- * 📖 + custom text filter chip with "X" clear + reset view button (N).
- * 📖 Each chip is a cycling button matching the TUI single-key behavior.
- * 📖 The "Next ping in Xs" countdown still shows the live status.
- * 📖 Filter groups (Tier, Status, Verdict, Health) are collapsible by default
- *     — click the trigger to expand the chip row, click again or outside to close.
- */
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { IconRefresh, IconX, IconFilter, IconChevronDown, IconSearch } from '@tabler/icons-react'
-import { getToolMeta } from '../../../../src/core/tool-metadata.js'
-import ProviderDropdown from './ProviderDropdown.jsx'
-import styles from './FilterBar.module.css'
-
-// 📖 Chip sets match the TUI cycles 1:1 (see useFilter.js). Keep these in sync.
-const TIERS = [
-  { key: 'all', label: 'All' },
-  { key: 'S+', label: 'S+' },
-  { key: 'S', label: 'S' },
-  { key: 'A+', label: 'A+' },
-  { key: 'A', label: 'A' },
-  { key: 'A-', label: 'A-' },
-  { key: 'B+', label: 'B+' },
-  { key: 'B', label: 'B' },
-  { key: 'C', label: 'C' },
-]
-const STATUSES = [
-  { key: 'all', label: 'All' },
-  { key: 'up', label: 'Up' },
-  { key: 'down', label: 'Down' },
-  { key: 'pending', label: 'Pending' },
-]
-const VERDICTS = [
-  { key: 'all', label: 'All' },
-  { key: 'Perfect', label: 'Perfect' },
-  { key: 'Normal', label: 'Normal' },
-  { key: 'Spiky', label: 'Spiky' },
-  { key: 'Slow', label: 'Slow' },
-  { key: 'Overloaded', label: 'Overloaded' },
-  { key: 'Down', label: 'Down' },
-  { key: 'Unstable', label: 'Unstable' },
-  { key: 'Pending', label: 'Pending' },
-]
-const HEALTHS = [
-  { key: 'all', label: 'All' },
-  { key: 'up', label: 'Up' },
-  { key: 'timeout', label: 'Timeout' },
-  { key: 'down', label: 'Down' },
-  { key: 'pending', label: 'Pending' },
-  { key: 'noauth', label: 'No key' },
-  { key: 'auth_error', label: 'Auth err' },
-]
-// 📖 TUI's E key cycle. The Web mirrors the same 3-state machine.
-const VISIBILITY_MODES = [
-  { key: 'normal',     label: 'All models',       hint: 'Show everything' },
-  { key: 'configured', label: 'Configured only',  hint: 'Hide models with no key or auth errors' },
-  { key: 'usable',     label: 'Usable only',      hint: 'Only Health UP + good verdict' },
-]
-
-const PING_MODES = [
-  { key: 'speed',  label: '⚡ Speed', interval: '2s',  color: '#00ff88' },
-  { key: 'normal', label: '● Normal', interval: '10s', color: '#ffaa00' },
-  { key: 'slow',   label: '🐢 Slow',  interval: '30s', color: '#ff6644' },
-  { key: 'forced', label: '🔥 Forced', interval: '4s',  color: '#ff4466' },
-]
-
-function formatCountdown(ms) {
-  if (ms == null) return null
-  const totalSec = Math.max(0, ms / 1000)
-  if (totalSec < 60) return `${totalSec.toFixed(2)}s`
-  const m = Math.floor(totalSec / 60)
-  const s = totalSec % 60
-  return `${m}m ${s.toFixed(2)}s`
-}
-
-/**
- * 📖 FilterGroup — collapsible chip selector. Shows label + active value as a compact
- *     trigger. Click to expand a dropdown with all options grouped as a segmented control.
- *     Click outside or pick a value to collapse. Designed to keep the filter bar minimal
- *     by default while exposing the full chip set on demand.
- */
-function FilterGroup({ label, items, value, onChange, colorMap }) {
-  const [open, setOpen] = useState(false)
-  const ref = useRef(null)
-
-  const close = useCallback(() => setOpen(false), [])
-
-  useEffect(() => {
-    if (!open) return
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) close()
-    }
-    const keyHandler = (e) => { if (e.key === 'Escape') close() }
-    document.addEventListener('mousedown', handler)
-    document.addEventListener('keydown', keyHandler)
-    return () => {
-      document.removeEventListener('mousedown', handler)
-      document.removeEventListener('keydown', keyHandler)
-    }
-  }, [open, close])
-
-  const activeItem = items.find(i => i.key === value)
-  const activeLabel = activeItem?.label ?? value ?? 'All'
-  const isFiltered = value !== 'all'
-
-  return (
-    <div className={styles.filterGroup} ref={ref}>
-      <button
-        className={`${styles.filterTrigger} ${isFiltered ? styles.filterTriggerActive : ''} ${open ? styles.filterTriggerExpanded : ''}`}
-        onClick={() => setOpen(!open)}
-        title={`${label}: ${activeLabel}`}
-        aria-expanded={open}
-        aria-haspopup="listbox"
-      >
-        <span className={styles.filterTriggerLabel}>{label}</span>
-        <span className={styles.filterTriggerSep}>:</span>
-        <span className={styles.filterTriggerValue}>{activeLabel}</span>
-        <IconChevronDown
-          size={12}
-          stroke={2}
-          className={`${styles.filterTriggerChevron} ${open ? styles.chevronOpen : ''}`}
-        />
-      </button>
-      {open && (
-        <div className={styles.filterDropdown} role="listbox">
-          <div className={styles.filterChipRow}>
-            {items.map((item, i) => {
-              const active = value === item.key
-              const customColor = colorMap?.[item.key]
-              return (
-                <button
-                  key={item.key}
-                  role="option"
-                  aria-selected={active}
-                  className={`${styles.filterChip} ${active ? styles.filterChipActive : ''}`}
-                  style={active && customColor ? { '--chip-active-color': customColor } : {}}
-                  onClick={() => { onChange(item.key); close() }}
-                  title={item.hint || item.label}
-                >
-                  {item.label}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default function FilterBar({
-  filterTier, setFilterTier,
-  filterStatus, setFilterStatus,
-  filterProvider, setFilterProvider,
-  filterVerdict, setFilterVerdict,
-  filterHealth, setFilterHealth,
-  visibilityMode, setVisibilityMode,
-  customTextFilter, setCustomTextFilter,
-  searchQuery, onSearchChange,
-  onResetView,
-  providers,
-  pingMode, setPingMode,
-  nextPingAt,
-  isPinging,
-  globalBenchmarkRunning,
-  globalBenchmarkTotal,
-  globalBenchmarkCompleted,
-  toolMode = 'opencode',
-}) {
-  const [countdown, setCountdown] = useState(null)
-
-  useEffect(() => {
-    if (nextPingAt == null) return
-    const tick = () => {
-      const rem = nextPingAt - Date.now()
-      setCountdown(rem > 0 ? rem : 0)
-    }
-    tick()
-    const id = setInterval(tick, 100)
-    return () => clearInterval(id)
-  }, [nextPingAt])
-
-  const countdownDisplay = countdown !== null ? formatCountdown(countdown) : null
-  const activeTool = getToolMeta(toolMode)
-
-  // 📖 Custom text filter chip — sticks to the right of the search bar, with
-  // 📖 an "X" to clear (TUI's `X` key behavior).
-  const customFilterActive = Boolean(customTextFilter && customTextFilter.trim().length > 0)
-
-  const benchmarkPct = globalBenchmarkRunning && globalBenchmarkTotal > 0
-    ? Math.round((globalBenchmarkCompleted / globalBenchmarkTotal) * 100)
-    : 0
-
-  // 📖 Count of active non-default filters to show on the Reset button.
-  const activeFilterCount = useMemo(() => {
-    let n = 0
-    if (filterTier !== 'all') n++
-    if (filterStatus !== 'all') n++
-    if (filterProvider !== 'all') n++
-    if (filterVerdict !== 'all') n++
-    if (filterHealth !== 'all') n++
-    if (visibilityMode !== 'normal') n++
-    if (customFilterActive) n++
-    if (searchQuery && searchQuery.trim().length > 0) n++
-    return n
-  }, [filterTier, filterStatus, filterProvider, filterVerdict, filterHealth, visibilityMode, customFilterActive, searchQuery])
-
-  return (
-    <section className={styles.filters}>
-      {/* ── Global benchmark progress bar (Ctrl+U) ── */}
-      {globalBenchmarkRunning && (
-        <div className={styles.benchmarkBar}>
-          <div className={styles.benchmarkLabel}>
-            <span className={styles.benchmarkSpinner} />
-            <span>AI Speed Test</span>
-            <span className={styles.benchmarkCount}>{globalBenchmarkCompleted}/{globalBenchmarkTotal}</span>
-          </div>
-          <div className={styles.benchmarkTrack}>
-            <div className={styles.benchmarkFill} style={{ width: `${benchmarkPct}%` }} />
-          </div>
-          <span className={styles.benchmarkPct}>{benchmarkPct}%</span>
-        </div>
-      )}
-
-      <FilterGroup label="Tier" items={TIERS} value={filterTier} onChange={setFilterTier} />
-      <FilterGroup label="Status" items={STATUSES} value={filterStatus} onChange={setFilterStatus} />
-      <FilterGroup label="Verdict" items={VERDICTS} value={filterVerdict} onChange={setFilterVerdict} />
-      <FilterGroup label="Health" items={HEALTHS} value={filterHealth} onChange={setFilterHealth} />
-
-      <div className={styles.group}>
-        <label className={styles.filterLabel} htmlFor="visibility-select">Visibility</label>
-        <select
-          id="visibility-select"
-          className={styles.select}
-          value={visibilityMode}
-          onChange={(e) => setVisibilityMode(e.target.value)}
-          title={VISIBILITY_MODES.find((v) => v.key === visibilityMode)?.hint}
-          aria-label="Visibility mode"
-        >
-          {VISIBILITY_MODES.map((v) => (
-            <option key={v.key} value={v.key}>{v.label}</option>
-          ))}
-        </select>
-      </div>
-
-      <div className={styles.group}>
-        <label className={styles.filterLabel}>Provider</label>
-        <ProviderDropdown
-          providers={providers}
-          value={filterProvider}
-          onChange={setFilterProvider}
-        />
-      </div>
-
-      <div className={styles.group}>
-        <div className={styles.searchBar}>
-          <span className={styles.searchIcon}><IconSearch size={13} stroke={1.5} /></span>
-          <input
-            type="text"
-            className={styles.searchInput}
-            placeholder="Search models, providers..."
-            value={searchQuery || ''}
-            onChange={(e) => onSearchChange?.(e.target.value)}
-            autoComplete="off"
-            aria-label="Search models"
-          />
-        </div>
-      </div>
-
-      <div className={styles.group}>
-        <label className={styles.filterLabel}>Endpoint target</label>
-        <div className={styles.toolStatus} title="Active endpoint install target from the Header picker">
-          <span>{activeTool.emoji}</span>
-          <strong>{activeTool.label}</strong>
-        </div>
-      </div>
-
-      <div className={styles.spacer} />
-
-      {/* ── Custom text filter chip (TUI's Ctrl+P "Apply text filter") ── */}
-      {customFilterActive && (
-        <div className={styles.group}>
-          <label className={styles.filterLabel}>Text</label>
-          <div className={styles.customFilterChip} title="Click X to clear (TUI: X key)">
-            <span className={styles.customFilterIcon}><IconFilter size={12} stroke={1.5} /></span>
-            <span className={styles.customFilterLabel}>{customTextFilter}</span>
-            <button
-              className={styles.customFilterClear}
-              onClick={() => setCustomTextFilter(null)}
-              title="Clear custom text filter (TUI: X)"
-              aria-label="Clear custom text filter"
-            >
-              <IconX size={12} stroke={2} />
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* ── Reset view (TUI: N) — only visible when filters are active ── */}
-      {activeFilterCount > 0 && (
-        <button
-          className={styles.resetBtn}
-          onClick={onResetView}
-          title={`Reset ${activeFilterCount} active filter${activeFilterCount === 1 ? '' : 's'} (TUI: N)`}
-        >
-          <IconRefresh size={12} stroke={1.5} />
-          <span>Reset</span>
-          <span className={styles.resetBadge}>{activeFilterCount}</span>
-        </button>
-      )}
-
-      {/* ── Ping interval selector (collapsible group) ── */}
-      <FilterGroup
-        label="Ping"
-        items={PING_MODES}
-        value={pingMode}
-        onChange={setPingMode}
-        colorMap={Object.fromEntries(PING_MODES.map(m => [m.key, m.color]))}
-      />
-
-      {/* ── Next ping countdown (TUI parity: always show the delay) ──
-          📖 The TUI footer always renders `next : Xs` regardless of whether
-          📖 a ping is in flight — users care about the delay until the next
-          📖 cycle, not the "is pinging right now" boolean. We follow the same
-          📖 model: a single countdown line, with a small pulsing dot when
-          📖 `isPinging` is true so the LIVE state is still visible without
-          📖 resorting to the "Pinging…" text. */}
-      <div className={styles.group}>
-        <div className={styles.nextPing} title="Next ping countdown">
-          <span className={styles.nextPingLabel}>next ping in</span>
-          <span className={styles.nextPingTime}>{countdownDisplay ?? '—'}</span>
-        </div>
-      </div>
-    </section>
-  )
-}

package/web/src/components/dashboard/FilterBar.module.css

@@ -1,342 +0,0 @@
-/**
- * @file web/src/components/dashboard/FilterBar.module.css
- * @description Filter bar styles — M1 parity chips (tier, status, verdict, health,
- * visibility, provider, custom text filter, reset, ping mode).
- * 📖 The bar is a STATIC header above the model table (flex-shrink:0). It used
- * 📖 to be `position: sticky; top: 60px` for the old whole-page-scroll layout,
- * 📖 but the dashboard now scrolls the table INTERNALLY (main.dashboardView is
- * 📖 the bounded box, .scrollInner scrolls). With main as the scroll container,
- * 📖 `top: 60px` stuck the bar 60px DOWN inside main, dropping it over the
- * 📖 table's green <thead>. Since the bar lives OUTSIDE the internal scroller,
- * 📖 it is naturally always visible — no sticky needed. Keep z-index modest so
- * 📖 it never fights the sticky table header (z-index: 10) if they ever meet.
- */
-
-.filters {
-  position: relative; z-index: 5;
-  flex-shrink: 0;
-  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
-  padding: 10px 20px;
-  background: var(--color-bg-card);
-  border-bottom: 1px solid var(--color-border);
-  backdrop-filter: blur(20px) saturate(1.5);
-  -webkit-backdrop-filter: blur(20px) saturate(1.5);
-}
-
-.group { display: flex; align-items: center; gap: 6px; }
-
-.filterLabel {
-  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
-  text-transform: uppercase; letter-spacing: 0.5px;
-  white-space: nowrap;
-}
-
-/* ── Collapsible filter groups (Tier, Status, Verdict, Health) ── */
-.filterGroup {
-  position: relative;
-}
-
-.filterTrigger {
-  display: inline-flex; align-items: center; gap: 4px;
-  font-size: 13px; font-family: var(--font-mono);
-  padding: 4px 8px; border-radius: 5px;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  color: var(--color-text-muted);
-  cursor: pointer; transition: all 150ms;
-  white-space: nowrap;
-  user-select: none;
-}
-.filterTrigger:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text);
-  border-color: var(--color-text-muted);
-}
-.filterTriggerActive {
-  border-color: var(--color-accent);
-  color: var(--color-text);
-}
-.filterTriggerExpanded {
-  border-color: var(--color-accent);
-  background: var(--color-bg-hover);
-  color: var(--color-text);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  z-index: 101;
-}
-
-.filterTriggerLabel {
-  font-size: 11px; font-weight: 700;
-  text-transform: uppercase; letter-spacing: 0.5px;
-  color: var(--color-text-muted);
-}
-.filterTriggerSep {
-  color: var(--color-border);
-  margin: 0 -2px;
-}
-.filterTriggerValue {
-  font-weight: 700;
-  color: var(--color-text);
-}
-.filterTriggerActive .filterTriggerValue {
-  color: var(--color-accent);
-}
-
-.filterTriggerChevron {
-  flex-shrink: 0;
-  transition: transform 200ms ease;
-  opacity: 0.6;
-}
-.chevronOpen {
-  transform: rotate(180deg);
-  opacity: 1;
-}
-
-.filterDropdown {
-  position: absolute; top: 100%; left: 0;
-  z-index: 100;
-  padding: 6px 8px 7px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-accent);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
-  min-width: max-content;
-}
-
-.filterChipRow {
-  display: flex;
-  gap: 0;
-}
-
-.filterChip {
-  font-size: 13px; font-weight: 600; font-family: var(--font-mono);
-  padding: 4px 9px;
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-card);
-  color: var(--color-text-muted);
-  cursor: pointer; transition: all 120ms;
-  white-space: nowrap;
-  margin-left: -1px;
-}
-.filterChip:first-child {
-  border-radius: 4px 0 0 4px;
-  margin-left: 0;
-}
-.filterChip:last-child {
-  border-radius: 0 4px 4px 0;
-}
-.filterChip:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text);
-  z-index: 1;
-}
-.filterChipActive {
-  background: var(--chip-active-color, var(--color-accent)) !important;
-  color: #fff !important;
-  border-color: var(--chip-active-color, var(--color-accent)) !important;
-  z-index: 2;
-  font-weight: 700;
-}
-
-/* ── Select inputs (provider, visibility) ── */
-.select, .providerSelect {
-  background: var(--color-surface); color: var(--color-text);
-  border: 1px solid var(--color-border); border-radius: 5px;
-  padding: 4px 8px; font-size: 13px; font-family: var(--font-sans);
-  cursor: pointer; outline: none;
-  min-width: 130px;
-}
-.select:focus, .providerSelect:focus { border-color: var(--color-accent); }
-
-.toolStatus {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  background: var(--color-surface);
-  color: var(--color-text);
-  font-size: 13px;
-  white-space: nowrap;
-}
-.toolStatus strong {
-  font-size: 13px;
-  font-weight: 800;
-}
-
-/* ── Spacer + reset ── */
-.spacer { flex: 1; }
-
-.resetBtn {
-  display: inline-flex; align-items: center; gap: 5px;
-  font-size: 13px; font-weight: 700; font-family: var(--font-mono);
-  padding: 4px 9px; border-radius: 5px;
-  border: 1px solid var(--color-border-hover);
-  background: var(--color-accent-dim);
-  color: var(--color-text);
-  cursor: pointer; transition: all 150ms;
-}
-.resetBtn:hover {
-  background: var(--color-accent);
-  color: var(--color-bg);
-}
-.resetBadge {
-  display: inline-flex; align-items: center; justify-content: center;
-  min-width: 16px; height: 16px;
-  font-size: 11px; font-weight: 800;
-  background: var(--color-bg);
-  color: var(--color-accent);
-  border-radius: 999px;
-  padding: 0 4px;
-}
-
-/* ── Custom text filter chip (TUI Ctrl+P "Apply text filter") ── */
-.customFilterChip {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-size: 13px; font-weight: 600; font-family: var(--font-mono);
-  padding: 3px 4px 3px 8px;
-  border: 1px solid var(--color-accent);
-  background: var(--color-accent-dim);
-  color: var(--color-accent);
-  border-radius: 5px;
-  max-width: 240px;
-}
-.customFilterIcon { display: inline-flex; flex-shrink: 0; }
-.customFilterLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.customFilterClear {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 18px; height: 18px;
-  background: transparent;
-  border: none;
-  color: var(--color-accent);
-  border-radius: 3px;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.customFilterClear:hover { background: var(--color-accent); color: var(--color-bg); }
-
-/* ── Next ping countdown (TUI parity) ── */
-.nextPing {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 13px; font-family: var(--font-mono);
-  padding: 4px 8px;
-  border: 1px solid var(--color-border);
-  border-radius: 5px;
-  background: var(--color-surface);
-}
-.nextPingLabel {
-  font-size: 12px; font-weight: 500; color: var(--color-text-muted);
-  text-transform: uppercase; letter-spacing: 0.5px;
-}
-.nextPingTime {
-  font-size: 15px; font-weight: 700; color: var(--color-text);
-  min-width: 32px;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-@keyframes pulseDot {
-  0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-glow); }
-  50% { box-shadow: 0 0 0 6px transparent; }
-}
-
-.live {
-  display: flex; align-items: center; gap: 5px;
-  font-size: 12px; font-weight: 700; color: var(--color-accent);
-  text-transform: uppercase; letter-spacing: 1px;
-}
-.liveDot {
-  width: 7px; height: 7px; border-radius: 50%;
-  background: var(--color-accent); animation: pulseDot 2s ease-in-out infinite;
-}
-
-/* ── Global benchmark progress bar (Ctrl+U) ── */
-.benchmarkBar {
-  display: flex; align-items: center; gap: 10px;
-  background: rgba(180, 0, 255, 0.12);
-  border: 1px solid rgba(180, 0, 255, 0.4);
-  border-radius: 6px;
-  padding: 6px 12px;
-  flex-shrink: 0;
-  width: 100%;
-  margin-bottom: 4px;
-}
-.benchmarkLabel {
-  display: flex; align-items: center; gap: 5px;
-  font-size: 13px; font-weight: 700;
-  color: #b400ff; font-family: var(--font-mono);
-  white-space: nowrap;
-}
-.benchmarkSpinner {
-  display: inline-block;
-  animation: spinSp 0.8s linear infinite;
-  font-size: 14px; line-height: 1;
-}
-.benchmarkCount { font-size: 12px; opacity: 0.8; }
-.benchmarkTrack {
-  width: 120px; height: 5px;
-  background: rgba(255,255,255,0.1);
-  border-radius: 3px; overflow: hidden;
-  flex: 1;
-}
-.benchmarkFill {
-  height: 100%;
-  background: linear-gradient(90deg, #b400ff, #ff00ff);
-  border-radius: 3px;
-  transition: width 0.5s ease;
-}
-.benchmarkPct {
-  font-size: 13px; font-weight: 700;
-  color: #b400ff; font-family: var(--font-mono);
-  min-width: 32px; text-align: right;
-}
-
-@keyframes spinSp {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* ─── Search Bar ─── */
-.searchBar {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  padding: 0 6px;
-  height: 24px;
-  width: 125px;
-  transition: border-color 150ms, box-shadow 150ms, width 200ms var(--ease-out);
-}
-.searchBar:focus-within {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px var(--color-accent-glow);
-  width: 180px;
-}
-.searchIcon {
-  display: flex;
-  align-items: center;
-  color: var(--color-text-muted);
-  flex-shrink: 0;
-}
-.searchInput {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  color: var(--color-text);
-  font-size: 10.5px;
-  font-family: var(--font-sans);
-  min-width: 0;
-  padding: 0;
-}
-.searchInput::placeholder {
-  color: var(--color-text-dim);
-  font-size: 10px;
-}