@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/file-explorer-panel.ts

@@ -9,29 +9,23 @@ import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
   buildSearchInputLine,
-  buildSelectablePanelLine,
+  buildTreeRow,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
-import {
-  getPanelSearchFocusTransition,
-  isPanelSearchBackspace,
-  isPanelSearchCancel,
-  isPanelSearchCommit,
-  isPanelSearchPrintable,
-} from './search-focus.ts';
+import { isPanelSearchBackspace, isPanelSearchPrintable } from './search-focus.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
+import { GitService } from '@pellux/goodvibes-sdk/platform/git';
 
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
 
-const MAX_DEPTH = 5;
-
 /** Directories / files to skip (gitignore-style). */
 const SKIP_NAMES = new Set([
   'node_modules', '.git', '.svn', '.hg',
@@ -84,15 +78,12 @@ interface TreeNode {
 // ---------------------------------------------------------------------------
 // Colour palette
 // ---------------------------------------------------------------------------
-const CLR_DIR      = '#00ffff'; // cyan — directories
-const CLR_FILE     = '#e0e0e0'; // near-white — files
-const CLR_SIZE     = '244';     // dim grey — sizes
-const CLR_CURSOR   = '#1a2a3a'; // cursor background
-const CLR_CURSOR_FG = '#ffffff';
-const CLR_SEARCH_BG = '#2a1a3a';
-const CLR_SEARCH_FG = '#ff79c6';
-const CLR_TOGGLE   = '244';     // ▶/▼ toggle arrows
-const CLR_ICON     = '244';     // file type icon
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  dirColor: '#00ffff',   // cyan — directories
+  fileColor: '#e0e0e0',  // near-white — files
+  sizeColor: '244',      // dim grey — sizes
+  cursorBg: '#1a2a3a',   // cursor background
+});
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -123,6 +114,12 @@ export class FileExplorerPanel extends BasePanel {
   private cacheValid: boolean = false;
   private readyPromise: Promise<void> | null = null;
 
+  // --- git status decorations ---
+  // Reuse one GitService instance across refreshes (I2 pattern, git-panel.ts).
+  private readonly git: GitService;
+  /** absolute file path -> single-char status code (git-panel.ts:146-151 classification). */
+  private gitStatus: Map<string, { code: string; tone: 'good' | 'warn' | 'bad' | 'dim' }> = new Map();
+
   // --- navigation ---
   private cursor: number = 0;
   private scrollTop: number = 0;
@@ -135,6 +132,7 @@ export class FileExplorerPanel extends BasePanel {
     super('explorer', 'Explorer', 'E', 'development');
     this.workingDirectory = workingDirectory;
     this.rootPath = rootPath ?? workingDirectory;
+    this.git = new GitService(this.workingDirectory);
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -172,14 +170,54 @@ export class FileExplorerPanel extends BasePanel {
 
   // ── Input ──────────────────────────────────────────────────────────────────
 
-  handleInput(key: string): boolean {
-    if (this.searchMode) return this._handleSearchInput(key);
-
-    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.cursor, itemCount: this.flat.length });
-    if (transition === 'focus-search') {
+  /**
+   * WO-153: converged modal '/' filter (mirrors ScrollableListPanel's
+   * _handleFilterKey). Returns `true`/`false` when consumed/ignored in
+   * filter context, or `null` to fall through to navigation/action keys.
+   */
+  private _handleFilterKey(key: string): boolean | null {
+    if (this.searchMode) {
+      if (key === 'escape') {
+        this.searchMode = false;
+        this.searchQuery = '';
+        this._rebuildFlat();
+        this.markDirty();
+        return true;
+      }
+      if (key === 'return' || key === 'enter') {
+        this.searchMode = false; // commit; keep the query applied
+        this.markDirty();
+        return true;
+      }
+      if (isPanelSearchBackspace(key)) {
+        this.searchQuery = this.searchQuery.slice(0, -1);
+        this._rebuildFlat();
+        this.markDirty();
+        return true;
+      }
+      // Arrow/paging keys navigate the filtered tree — fall through.
+      if (key === 'up' || key === 'down' || key === 'pageup' || key === 'pagedown' || key === 'home' || key === 'end') {
+        return null;
+      }
+      // Any printable character (including single-letter action keys like r/d) extends the query.
+      if (isPanelSearchPrintable(key)) {
+        this.searchQuery += key;
+        this._rebuildFlat();
+        this.markDirty();
+        return true;
+      }
+      return false;
+    }
+    if (key === '/') {
       this._enterSearch();
       return true;
     }
+    return null;
+  }
+
+  handleInput(key: string): boolean {
+    const filterResult = this._handleFilterKey(key);
+    if (filterResult !== null) return filterResult;
 
     switch (key) {
       case 'up':    case 'k': this._moveCursor(-1); return true;
@@ -191,8 +229,8 @@ export class FileExplorerPanel extends BasePanel {
       case 'return': case 'enter': this._activateNode(); return true;
       case 'right': this._expandNode(); return true;
       case 'left':  this._collapseNode(); return true;
-      case '/':     this._enterSearch(); return true;
       case 'r':     this.refresh(); return true;
+      case 'd':     return this.getFocusedFilePath() !== null;
       default:      return false;
     }
   }
@@ -209,11 +247,23 @@ export class FileExplorerPanel extends BasePanel {
 
   render(width: number, height: number): Line[] {
     this.needsRender = false;
-    const searchLine = this.searchMode
-      ? `/ ${this.searchQuery}_`
-      : this.searchQuery
-        ? `Filter: ${this.searchQuery}  (/ or up at top to edit)`
-        : `Root: ${relative(this.workingDirectory, this.rootPath) || '.'}  (/ or up at top to search)`;
+
+    // Context-aware hints: only surface keys that act in the current mode.
+    const hintsLine = this.searchMode
+      ? buildKeyboardHints(width, [
+          { keys: 'type', label: 'filter' },
+          { keys: '↑/↓', label: 'move' },
+          { keys: 'Enter', label: 'keep results' },
+          { keys: 'Esc', label: 'clear' },
+        ], C)
+      : buildKeyboardHints(width, [
+          { keys: '↑/↓', label: 'navigate' },
+          { keys: 'Enter/→', label: 'expand' },
+          { keys: '←', label: 'collapse' },
+          { keys: '/', label: 'filter' },
+          { keys: 'r', label: 'refresh' },
+          { keys: 'd', label: 'diff' },
+        ], C);
 
     if (this.flat.length === 0) {
       return buildPanelWorkspace(width, height, {
@@ -221,23 +271,12 @@ export class FileExplorerPanel extends BasePanel {
         intro: 'Browse the project tree, expand directories, and search for paths.',
         sections: [
           {
-            lines: buildEmptyState(
-              width,
-              ' No files found',
-              this.searchQuery
-                ? 'No files or directories match the current search.'
-                : 'This root did not produce any visible files after the explorer filters were applied.',
-              [],
-              DEFAULT_PANEL_PALETTE,
-            ),
+            lines: buildEmptyState(width, ' No files found', this.searchQuery ? 'No files or directories match the current search.' : 'This root did not produce any visible files after the explorer filters were applied.', this.searchQuery ? [{ command: 'Esc', summary: 'clear the filter to show the full tree again' }] : [{ command: 'r', summary: 'rescan this root from disk' }], C),
           },
         ],
         footerLines: [
-          buildSearchInputLine(width, '', searchLine, DEFAULT_PANEL_PALETTE, {
-            active: this.searchMode,
-            valueColor: this.searchMode ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim,
-          }),
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter/Right', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim], ['   Left', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   /', DEFAULT_PANEL_PALETTE.info], [' search', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+          this._buildFilterLine(width),
+          hintsLine,
         ],
         palette: DEFAULT_PANEL_PALETTE,
       });
@@ -247,7 +286,9 @@ export class FileExplorerPanel extends BasePanel {
       title: 'Summary',
       lines: [
         buildPanelLine(width, [
-          [' Visible ', DEFAULT_PANEL_PALETTE.label],
+          [' Root ', DEFAULT_PANEL_PALETTE.label],
+          [relative(this.workingDirectory, this.rootPath) || '.', DEFAULT_PANEL_PALETTE.value],
+          ['   Visible ', DEFAULT_PANEL_PALETTE.label],
           [String(this.flat.length), DEFAULT_PANEL_PALETTE.value],
           ['   Search ', DEFAULT_PANEL_PALETTE.label],
           [this.searchQuery || 'none', this.searchQuery ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim],
@@ -275,11 +316,8 @@ export class FileExplorerPanel extends BasePanel {
     const treeSection = resolveScrollablePanelSection(width, height, {
       intro: 'Browse the project tree, expand directories, and search for paths.',
       footerLines: [
-        buildSearchInputLine(width, '', searchLine, DEFAULT_PANEL_PALETTE, {
-          active: this.searchMode,
-          valueColor: this.searchMode ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim,
-        }),
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter/Right', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim], ['   Left', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   /', DEFAULT_PANEL_PALETTE.info], [' search', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+        this._buildFilterLine(width),
+        hintsLine,
       ],
       palette: DEFAULT_PANEL_PALETTE,
       beforeSections: [summarySection],
@@ -287,24 +325,15 @@ export class FileExplorerPanel extends BasePanel {
         title: 'Tree',
         scrollableLines: this.flat.map((node, absoluteIdx) => {
           const isCursor = absoluteIdx === this.cursor;
-          const baseBg = isCursor ? CLR_CURSOR : '';
-          const baseFg = isCursor ? CLR_CURSOR_FG : (node.isDir ? CLR_DIR : CLR_FILE);
-          const indent = '  '.repeat(node.depth);
-          const segments = [
-            { text: indent, fg: baseFg },
-            node.isDir
-              ? { text: node.expanded ? '▾ ' : '▸ ', fg: CLR_TOGGLE, bold: isCursor }
-              : { text: `${fileIcon(node.name)} `, fg: CLR_ICON, dim: !isCursor },
-            { text: node.name, fg: baseFg, bold: node.isDir || isCursor },
-          ];
-          if (!node.isDir && node.size > 0) {
-            const sizeStr = ` ${formatSize(node.size)}`;
-            const contentWidth = getDisplayWidth(indent) + 2 + getDisplayWidth(node.name);
-            const gap = Math.max(1, width - contentWidth - getDisplayWidth(sizeStr));
-            segments.push({ text: ' '.repeat(gap), fg: baseFg });
-            segments.push({ text: sizeStr, fg: CLR_SIZE, dim: true });
-          }
-          return buildSelectablePanelLine(width, segments, { selected: isCursor, selectedBg: baseBg, fillFg: baseFg });
+          return buildTreeRow(width, {
+            depth: node.depth,
+            label: node.name,
+            icon: node.isDir ? undefined : fileIcon(node.name),
+            expandable: node.isDir,
+            expanded: node.expanded,
+            labelColor: node.isDir ? C.dirColor : C.fileColor,
+            metadata: this._buildRowMetadata(node),
+          }, C, { selected: isCursor, selectedBg: C.cursorBg });
         }),
         selectedIndex: this.cursor,
         scrollOffset: this.scrollTop,
@@ -322,11 +351,8 @@ export class FileExplorerPanel extends BasePanel {
         selectedSection,
       ],
       footerLines: [
-        buildSearchInputLine(width, '', searchLine, DEFAULT_PANEL_PALETTE, {
-          active: this.searchMode,
-          valueColor: this.searchMode ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim,
-        }),
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter/Right', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim], ['   Left', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   /', DEFAULT_PANEL_PALETTE.info], [' search', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+        this._buildFilterLine(width),
+        hintsLine,
       ],
       palette: DEFAULT_PANEL_PALETTE,
     });
@@ -334,14 +360,35 @@ export class FileExplorerPanel extends BasePanel {
 
   // ── Private: tree building ─────────────────────────────────────────────────
 
+  /**
+   * Build (or rebuild) the tree root and load ONLY its immediate children.
+   * Deeper directories stay unloaded (`loaded: false`, empty `children`)
+   * until the user actually expands them via _expandNode()/_activateNode() \u2014
+   * this replaces the old eager depth-5 recursive scan, which walked (and
+   * silently truncated at a hardcoded depth cutoff) the entire visible tree
+   * up front and blocked opening the panel on large repos.
+   */
   private _buildTreeAsync(): Promise<void> {
     const p = (async () => {
       try {
         await this.withLoading('Scanning directory\u2026', async () => {
-          this.root = await this._scanDirAsync(this.rootPath, 0);
+          const root: TreeNode = {
+            path: this.rootPath,
+            name: basename(this.rootPath) || this.rootPath,
+            isDir: true,
+            depth: 0,
+            size: 0,
+            expanded: true,
+            children: [],
+            loaded: false,
+          };
+          await this._loadChildren(root);
+          this.root = root;
           this._rebuildFlat();
           this.cacheValid = true;
         });
+        // Best-effort \u2014 a missing/failed git status just means no decorations.
+        await this._loadGitStatus();
       } catch (err) {
         this.setError(summarizeError(err));
       }
@@ -356,36 +403,27 @@ export class FileExplorerPanel extends BasePanel {
     return this.readyPromise ?? Promise.resolve();
   }
 
-  private async _scanDirAsync(dirPath: string, depth: number): Promise<TreeNode> {
-    const name = basename(dirPath);
-    const node: TreeNode = {
-      path: dirPath,
-      name,
-      isDir: true,
-      depth,
-      size: 0,
-      expanded: depth === 0,
-      children: [],
-      loaded: false,
-    };
-
-    if (depth >= MAX_DEPTH) return node;
+  /**
+   * Read one directory's immediate entries and populate `node.children` with
+   * fully-resolved file nodes and unloaded directory stubs. Idempotent and
+   * safe to call on an already-loaded node (no-ops).
+   */
+  private async _loadChildren(node: TreeNode): Promise<void> {
+    if (node.loaded || !node.isDir) return;
 
     let entries: string[];
     try {
-      entries = await fsPromises.readdir(dirPath);
+      entries = await fsPromises.readdir(node.path);
     } catch {
-      return node;
+      node.loaded = true;
+      return;
     }
 
-    node.loaded = true;
-
-    // Sort: dirs first, then files, alphabetically within each group
     const filtered = entries.filter(e => !shouldSkip(e));
     const statResults = await Promise.all(
       filtered.map(async (e) => {
         try {
-          const s = await fsPromises.stat(join(dirPath, e));
+          const s = await fsPromises.stat(join(node.path, e));
           return { name: e, isDir: s.isDirectory(), size: s.size, stat: s };
         } catch {
           return { name: e, isDir: false, size: 0, stat: null };
@@ -398,26 +436,81 @@ export class FileExplorerPanel extends BasePanel {
       return a.name.localeCompare(b.name);
     });
 
+    const children: TreeNode[] = [];
     for (const entry of sorted) {
       if (entry.stat === null) continue;
-      const fullPath = join(dirPath, entry.name);
-      if (entry.isDir) {
-        node.children.push(await this._scanDirAsync(fullPath, depth + 1));
-      } else {
-        node.children.push({
-          path: fullPath,
-          name: entry.name,
-          isDir: false,
-          depth: depth + 1,
-          size: entry.size,
-          expanded: false,
-          children: [],
-          loaded: true,
-        });
+      const fullPath = join(node.path, entry.name);
+      children.push(entry.isDir
+        ? {
+            path: fullPath,
+            name: entry.name,
+            isDir: true,
+            depth: node.depth + 1,
+            size: 0,
+            expanded: false,
+            children: [],
+            loaded: false,
+          }
+        : {
+            path: fullPath,
+            name: entry.name,
+            isDir: false,
+            depth: node.depth + 1,
+            size: entry.size,
+            expanded: false,
+            children: [],
+            loaded: true,
+          });
+    }
+    node.children = children;
+    node.loaded = true;
+  }
+
+  /**
+   * Fetch git status for the working directory and index it by absolute
+   * path for O(1) lookup from the tree renderer. Classification mirrors
+   * git-panel's staged/unstaged split from the raw porcelain index/
+   * working_dir columns (git-panel.ts:146-151), collapsed to a single
+   * decoration badge per file: working-tree changes take priority over
+   * staged-only changes, since that's the state most relevant while
+   * browsing the tree.
+   */
+  private async _loadGitStatus(): Promise<void> {
+    try {
+      const status = await this.git.status();
+      const next = new Map<string, { code: string; tone: 'good' | 'warn' | 'bad' | 'dim' }>();
+      for (const f of status.files) {
+        const fullPath = join(this.workingDirectory, f.path);
+        if (f.index === '?' && f.working_dir === '?') {
+          next.set(fullPath, { code: '?', tone: 'dim' }); // untracked
+          continue;
+        }
+        const code = f.working_dir !== ' ' ? f.working_dir : f.index;
+        if (!code || code === ' ') continue;
+        const tone = code === 'D' ? 'bad' : code === 'A' ? 'good' : 'warn';
+        next.set(fullPath, { code, tone });
       }
+      this.gitStatus = next;
+    } catch {
+      // Not a git repo (or git unavailable) \u2014 decorations are optional.
+      this.gitStatus = new Map();
     }
+  }
 
-    return node;
+  /** Right-aligned row metadata: git status badge (files only) + file size. */
+  private _buildRowMetadata(node: TreeNode): Array<{ text: string; fg: string }> | undefined {
+    if (node.isDir) return undefined;
+    const meta: Array<{ text: string; fg: string }> = [];
+    const status = this.gitStatus.get(node.path);
+    if (status) {
+      const fg = status.tone === 'good' ? DEFAULT_PANEL_PALETTE.good
+        : status.tone === 'bad' ? DEFAULT_PANEL_PALETTE.bad
+        : status.tone === 'warn' ? DEFAULT_PANEL_PALETTE.warn
+        : DEFAULT_PANEL_PALETTE.dim;
+      meta.push({ text: status.code, fg });
+    }
+    if (node.size > 0) meta.push({ text: formatSize(node.size), fg: C.sizeColor });
+    return meta.length > 0 ? meta : undefined;
   }
 
   /**
@@ -474,15 +567,6 @@ export class FileExplorerPanel extends BasePanel {
     this.markDirty();
   }
 
-  private _clampScroll(viewHeight: number): void {
-    if (this.cursor < this.scrollTop) {
-      this.scrollTop = this.cursor;
-    } else if (this.cursor >= this.scrollTop + viewHeight) {
-      this.scrollTop = this.cursor - viewHeight + 1;
-    }
-    this.scrollTop = Math.max(0, this.scrollTop);
-  }
-
   private _activateNode(): void {
     const node = this.flat[this.cursor];
     if (!node) return;
@@ -490,6 +574,7 @@ export class FileExplorerPanel extends BasePanel {
       node.expanded = !node.expanded;
       this._rebuildFlat();
       this.markDirty();
+      if (node.expanded) this._loadNodeChildrenAndRefresh(node);
     }
     // For files: callers can read getFocusedNode() after the input returns true
   }
@@ -500,6 +585,20 @@ export class FileExplorerPanel extends BasePanel {
     node.expanded = true;
     this._rebuildFlat();
     this.markDirty();
+    this._loadNodeChildrenAndRefresh(node);
+  }
+
+  /**
+   * Lazily populate a directory's children (if not already loaded) and
+   * refresh the flattened view once they arrive, without blocking the
+   * expand keystroke itself.
+   */
+  private _loadNodeChildrenAndRefresh(node: TreeNode): void {
+    if (node.loaded) return;
+    void this._loadChildren(node).then(() => {
+      this._rebuildFlat();
+      this.markDirty();
+    });
   }
 
   private _collapseNode(): void {
@@ -536,50 +635,30 @@ export class FileExplorerPanel extends BasePanel {
   // ── Private: search ───────────────────────────────────────────────────────
 
   private _enterSearch(): void {
+    // Re-entering search (e.g. pressing '/' again) must EDIT the existing
+    // query, not silently clear it — the bug this fixes unconditionally
+    // reset searchQuery to '' on every entry, discarding whatever filter
+    // was already active.
     this.searchMode = true;
-    this.searchQuery = '';
     this._rebuildFlat();
     this.markDirty();
   }
 
-  private _handleSearchInput(key: string): boolean {
-    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.cursor, itemCount: this.flat.length });
-    if (transition === 'focus-list') {
-      this.searchMode = false;
-      this.cursor = 0;
-      this.scrollTop = 0;
-      this.markDirty();
-      return true;
-    }
-    if (isPanelSearchCancel(key)) {
-      this.searchMode = false;
-      this.searchQuery = '';
-      this._rebuildFlat();
-      this.markDirty();
-      return true;
-    }
-    if (isPanelSearchCommit(key)) {
-      // Confirm search, stay in results, exit search-input mode
-      this.searchMode = false;
-      this.markDirty();
-      return true;
-    }
-    if (isPanelSearchBackspace(key)) {
-      this.searchQuery = this.searchQuery.slice(0, -1);
-      this._rebuildFlat();
-      this.markDirty();
-      return true;
-    }
-    // Printable single characters
-    if (isPanelSearchPrintable(key)) {
-      this.searchQuery += key;
-      this._rebuildFlat();
-      this.markDirty();
-      return true;
-    }
-    // Navigation still works during search
-    if (key === 'up' || key === 'k') { this._moveCursor(-1); return true; }
-    if (key === 'down' || key === 'j') { this._moveCursor(1); return true; }
-    return false;
+  /**
+   * The filter input line — pinned rendering contract shared with
+   * ScrollableListPanel.buildFilterLine: 'Filter: ' unfocused / '[Filter] '
+   * focused, literal trailing '_' cursor while active (active:false is
+   * passed to buildSearchInputLine to suppress its block-glyph cursor
+   * substitution).
+   */
+  private _buildFilterLine(width: number): Line {
+    const label = this.searchMode ? '[Filter] ' : 'Filter: ';
+    const value = this.searchMode ? `${this.searchQuery}_` : this.searchQuery;
+    return buildSearchInputLine(width, label, value, DEFAULT_PANEL_PALETTE, {
+      active: false,
+      bg: this.searchMode ? DEFAULT_PANEL_PALETTE.inputBg : DEFAULT_PANEL_PALETTE.sectionBg,
+      emptyLabel: '(/ to filter)',
+      valueColor: this.searchMode ? DEFAULT_PANEL_PALETTE.info : (this.searchQuery ? DEFAULT_PANEL_PALETTE.value : DEFAULT_PANEL_PALETTE.dim),
+    });
   }
 }