@pi-unipi/footer 0.1.2 → 0.1.4

package/src/tui/settings-tui.ts

@@ -1,37 +1,74 @@
 /**
  * @pi-unipi/footer — Settings TUI
  *
- * Interactive settings overlay for toggling groups and individual segments.
- * Follows the info-screen SettingsOverlay pattern.
+ * Unified settings overlay with 3 categories:
+ * - Appearance: preset, separator, icon style, full labels
+ * - Segments: group → segment drill-down
+ * - Labels & Help: label mode, zone headers
+ *
+ * Uses pi-tui SettingsList for vim/arrow keybinding support.
  */
 
 import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
-import { loadFooterSettings, saveFooterSettings, getGroupSettings } from "../config.js";
-import type { FooterGroup, FooterSettings } from "../types.js";
-
-/** ANSI escape codes */
-const ansi = {
-  reset: "\x1b[0m",
-  bold: "\x1b[1m",
-  dim: "\x1b[2m",
-  cyan: "\x1b[36m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-  gray: "\x1b[90m",
+import { SettingsList, type SettingItem, type SettingsListTheme } from "@mariozechner/pi-tui";
+import { loadFooterSettings, saveFooterSettings } from "../config.js";
+import { PRESET_NAMES } from "../presets.js";
+import { setIconStyle } from "../rendering/icons.js";
+import type { FooterGroup, FooterSettings, SeparatorStyle, IconStyle } from "../types.js";
+
+// ─── Section types ─────────────────────────────────────────────────────
+
+type Section = "appearance" | "segments" | "labels";
+const SECTIONS: Section[] = ["appearance", "segments", "labels"];
+const SECTION_LABELS: Record<Section, string> = {
+  appearance: "Appearance",
+  segments: "Segments",
+  labels: "Labels & Help",
 };
 
-const TOGGLE_ON = `${ansi.green}●${ansi.reset}`;
-const TOGGLE_OFF = `${ansi.dim}○${ansi.reset}`;
+// ─── Valid option values ───────────────────────────────────────────────
 
-/**
- * Show the footer settings overlay.
- */
-export function showFooterSettings(ctx: any, groups: FooterGroup[]): void {
+const SEPARATOR_STYLES: SeparatorStyle[] = ["powerline", "powerline-thin", "slash", "pipe", "dot", "ascii"];
+const ICON_STYLES: IconStyle[] = ["nerd", "emoji", "text"];
+
+// ─── Theme for SettingsList ────────────────────────────────────────────
+
+const THEME: SettingsListTheme = {
+  label: (text, selected) => selected ? `\x1b[1m${text}\x1b[0m` : `\x1b[2m${text}\x1b[0m`,
+  value: (text, selected) => selected ? `\x1b[35m${text}\x1b[0m` : `\x1b[35m${text}\x1b[0m`,
+  description: (text) => `\x1b[90m${text}\x1b[0m`,
+  cursor: `\x1b[36m▸\x1b[0m`,
+  hint: (text) => `\x1b[2m${text}\x1b[0m`,
+};
+
+// ─── Helper: frame a line inside box drawing ───────────────────────────
+
+function frameLine(content: string, innerWidth: number): string {
+  const visLen = visibleWidth(content);
+  const pad = Math.max(0, innerWidth - visLen);
+  return `\x1b[90m│\x1b[0m${content}${" ".repeat(pad)}\x1b[90m│\x1b[0m`;
+}
+
+function ruleLine(innerWidth: number): string {
+  return `\x1b[90m├${"─".repeat(innerWidth)}┤\x1b[0m`;
+}
+
+function borderLine(innerWidth: number, edge: "top" | "bottom"): string {
+  const left = edge === "top" ? "┌" : "└";
+  const right = edge === "top" ? "┐" : "┘";
+  return `\x1b[90m${left}${"─".repeat(innerWidth)}${right}\x1b[0m`;
+}
+
+function visibleWidth(text: string): number {
+  return text.replace(/\x1b\[[0-9;]*m/g, "").length;
+}
+
+// ─── Show the footer settings overlay ──────────────────────────────────
+
+export function showFooterSettings(ctx: any, groups: FooterGroup[], onSettingsChanged?: () => void): void {
   ctx.ui.custom(
     (tui: any, _theme: any, _keybindings: any, done: (result: void) => void) => {
-      const overlay = new FooterSettingsOverlay(groups);
-
+      const overlay = new FooterSettingsOverlay(groups, onSettingsChanged);
       overlay.onClose = () => done();
 
       return {
@@ -52,200 +89,395 @@ export function showFooterSettings(ctx: any, groups: FooterGroup[]): void {
         horizontalAlign: "center",
       }),
     },
-  ).catch((err: unknown) => {
-    console.error("[footer] Settings overlay error:", err);
+  ).catch(() => {
+    // Silently ignore — overlay errors are non-blocking.
   });
 }
 
-/**
- * Footer settings overlay component.
- */
+// ─── Footer settings overlay component ─────────────────────────────────
+
 class FooterSettingsOverlay {
   private settings: FooterSettings;
   private groups: FooterGroup[];
-  private selectedIndex = 0;
-  private savedGroupIndex = 0;
-  private mode: "groups" | "segments" = "groups";
+  private section: Section = "appearance";
   private selectedGroupId: string | null = null;
   onClose?: () => void;
+  private onSettingsChanged?: () => void;
 
-  constructor(groups: FooterGroup[]) {
+  // Per-section SettingsList instances
+  private appearanceList!: SettingsList;
+  private groupList!: SettingsList;
+  private segmentList: SettingsList | null = null;
+  private labelsList!: SettingsList;
+
+  constructor(groups: FooterGroup[], onSettingsChanged?: () => void) {
     this.settings = loadFooterSettings();
     this.groups = groups;
+    this.onSettingsChanged = onSettingsChanged;
+    this.buildAppearanceList();
+    this.buildGroupList();
+    this.buildLabelsList();
   }
 
   invalidate(): void {
-    // No cached state
+    this.appearanceList?.invalidate();
+    this.groupList?.invalidate();
+    this.segmentList?.invalidate();
+    this.labelsList?.invalidate();
   }
 
   handleInput(data: string): void {
-    if (this.mode === "groups") {
-      this.handleGroupsInput(data);
-    } else {
-      this.handleSegmentsInput(data);
+    // Tab cycles sections
+    if (data === "\t" || data === "\x1b[Z") {
+      const idx = SECTIONS.indexOf(this.section);
+      if (data === "\t") {
+        this.section = SECTIONS[(idx + 1) % SECTIONS.length];
+      } else {
+        this.section = SECTIONS[(idx - 1 + SECTIONS.length) % SECTIONS.length];
+      }
+      // If leaving segments drill-down, go back to groups
+      if (this.section !== "segments") {
+        this.selectedGroupId = null;
+        this.segmentList = null;
+      }
+      return;
     }
-  }
 
-  private handleGroupsInput(data: string): void {
-    switch (data) {
-      case "\x1b[A": case "k":
-        this.selectedIndex = (this.selectedIndex - 1 + this.groups.length) % this.groups.length;
-        break;
-      case "\x1b[B": case "j":
-        this.selectedIndex = (this.selectedIndex + 1) % this.groups.length;
-        break;
-      case " ":
-        this.toggleGroup(this.groups[this.selectedIndex].id);
-        break;
-      case "\r": case "\x1b[C": case "l":
-        this.enterSegmentsMode(this.groups[this.selectedIndex].id);
-        break;
-      case "q": case "\x1b":
+    // q — always close
+    if (data === "q") {
+      this.onClose?.();
+      return;
+    }
+
+    // Escape — back from drill-down, or close at root
+    if (data === "\x1b") {
+      if (this.section === "segments" && this.selectedGroupId) {
+        this.backToGroups();
+      } else {
         this.onClose?.();
-        break;
+      }
+      return;
+    }
+
+    // j — navigate down (same as down arrow)
+    if (data === "j") {
+      this.currentList?.handleInput("\x1b[B");
+      return;
+    }
+
+    // k — navigate up (same as up arrow)
+    if (data === "k") {
+      this.currentList?.handleInput("\x1b[A");
+      return;
+    }
+
+    // l — drill into group from segments section (same as Enter)
+    if (data === "l" && this.section === "segments" && !this.selectedGroupId) {
+      const focusedId = this.getFocusedGroupId();
+      if (focusedId) {
+        this.enterSegmentsMode(focusedId);
+      }
+      return;
+    }
+
+    // Space — toggle on/off
+    if (data === " ") {
+      this.currentList?.handleInput("\r");
+      return;
+    }
+
+    // h — back from segment drill-down
+    if (data === "h" && this.section === "segments" && this.selectedGroupId) {
+      this.backToGroups();
+      return;
+    }
+
+    // / — focus search in segments section
+    if (data === "/") {
+      this.currentList?.handleInput("/");
+      return;
+    }
+
+    // Enter in segments/groups mode — enter segments for the focused group
+    if (data === "\r" && this.section === "segments" && !this.selectedGroupId) {
+      const focusedId = this.getFocusedGroupId();
+      if (focusedId) {
+        this.enterSegmentsMode(focusedId);
+      }
+      return;
+    }
+
+    // Left arrow / backspace in segment drill-down — back to groups
+    if (this.section === "segments" && this.selectedGroupId && (data === "\x1b[D" || data === "\x7f")) {
+      this.backToGroups();
+      return;
     }
+
+    // Delegate to current SettingsList
+    this.currentList?.handleInput(data);
   }
 
-  private handleSegmentsInput(data: string): void {
-    if (!this.selectedGroupId) return;
-    const group = this.groups.find(g => g.id === this.selectedGroupId);
-    if (!group) return;
+  private get currentList(): SettingsList | null {
+    switch (this.section) {
+      case "appearance": return this.appearanceList;
+      case "segments":
+        return this.segmentList ?? this.groupList;
+      case "labels": return this.labelsList;
+    }
+  }
 
-    switch (data) {
-      case "\x1b[A": case "k":
-        this.selectedIndex = (this.selectedIndex - 1 + group.segments.length) % group.segments.length;
-        break;
-      case "\x1b[B": case "j":
-        this.selectedIndex = (this.selectedIndex + 1) % group.segments.length;
+  // ─── Build SettingsList instances ──────────────────────────────────
+
+  private buildAppearanceList(): void {
+    const items: SettingItem[] = [
+      {
+        id: "preset",
+        label: "Preset",
+        description: "Footer layout preset",
+        currentValue: this.settings.preset,
+        values: PRESET_NAMES,
+      },
+      {
+        id: "separator",
+        label: "Separator",
+        description: "Segment divider style",
+        currentValue: this.settings.separator,
+        values: SEPARATOR_STYLES,
+      },
+      {
+        id: "iconStyle",
+        label: "Icon Style",
+        description: "Icon glyph set (nerd requires Nerd Font)",
+        currentValue: this.settings.iconStyle,
+        values: ICON_STYLES,
+      },
+      {
+        id: "showFullLabels",
+        label: "Full Labels",
+        description: "Show descriptive labels instead of abbreviations",
+        currentValue: this.settings.showFullLabels ? "on" : "off",
+        values: ["on", "off"],
+      },
+    ];
+
+    this.appearanceList = new SettingsList(
+      items,
+      Math.min(items.length + 2, 12),
+      THEME,
+      (id, newValue) => this.onAppearanceChange(id, newValue),
+      () => this.onClose?.(),
+      { enableSearch: false },
+    );
+  }
+
+  private buildGroupList(): void {
+    const items: SettingItem[] = this.groups.map((group) => {
+      const groupSettings = this.settings.groups[group.id] ?? { show: group.defaultShow, segments: {} };
+      const isEnabled = groupSettings.show;
+      const segCount = group.segments.length;
+      const enabledCount = group.segments.filter(s => {
+        const segOverride = groupSettings.segments?.[s.id];
+        return segOverride !== undefined ? segOverride : s.defaultShow;
+      }).length;
+
+      return {
+        id: group.id,
+        label: group.name,
+        description: `${enabledCount}/${segCount} segments · Enter to drill down`,
+        currentValue: isEnabled ? "on" : "off",
+        values: ["on", "off"],
+      };
+    });
+
+    this.groupList = new SettingsList(
+      items,
+      Math.min(items.length + 2, 15),
+      THEME,
+      (id, newValue) => this.onGroupChange(id, newValue),
+      () => this.onClose?.(),
+      { enableSearch: true },
+    );
+  }
+
+  private buildSegmentList(groupId: string): void {
+    const group = this.groups.find(g => g.id === groupId);
+    if (!group) {
+      this.segmentList = null;
+      return;
+    }
+
+    const groupSettings = this.settings.groups[group.id] ?? { show: group.defaultShow, segments: {} };
+
+    const items: SettingItem[] = group.segments.map((seg) => {
+      const isEnabled = groupSettings.segments?.[seg.id] ?? seg.defaultShow;
+      return {
+        id: seg.id,
+        label: `${seg.shortLabel}  ${seg.label}`,
+        description: seg.description,
+        currentValue: isEnabled ? "on" : "off",
+        values: ["on", "off"],
+      };
+    });
+
+    this.segmentList = new SettingsList(
+      items,
+      Math.min(items.length + 2, 15),
+      THEME,
+      (id, newValue) => this.onSegmentChange(groupId, id, newValue),
+      () => this.backToGroups(),
+      { enableSearch: true },
+    );
+  }
+
+  private buildLabelsList(): void {
+    const items: SettingItem[] = [
+      {
+        id: "showFullLabelsAlways",
+        label: "Full Labels",
+        description: "Always show descriptive labels instead of abbreviations",
+        currentValue: this.settings.showFullLabels ? "on" : "off",
+        values: ["on", "off"],
+      },
+      {
+        id: "showZoneHeaders",
+        label: "Zone Headers",
+        description: "Show zone labels (Identity / Metrics / Time)",
+        currentValue: "off", // TODO: implement zone headers
+        values: ["on", "off"],
+      },
+    ];
+
+    this.labelsList = new SettingsList(
+      items,
+      Math.min(items.length + 2, 12),
+      THEME,
+      (id, newValue) => this.onLabelsChange(id, newValue),
+      () => this.onClose?.(),
+      { enableSearch: false },
+    );
+  }
+
+  // ─── Change handlers ───────────────────────────────────────────────
+
+  private onAppearanceChange(id: string, newValue: string): void {
+    switch (id) {
+      case "preset":
+        this.settings.preset = newValue;
         break;
-      case " ":
-        this.toggleSegment(this.selectedGroupId, group.segments[this.selectedIndex].id);
+      case "separator":
+        this.settings.separator = newValue as SeparatorStyle;
         break;
-      case "\x1b[D": case "h": case "\r":
-        this.backToGroups();
+      case "iconStyle":
+        this.settings.iconStyle = newValue as IconStyle;
+        setIconStyle(newValue as IconStyle);
         break;
-      case "q": case "\x1b":
-        this.onClose?.();
+      case "showFullLabels":
+        this.settings.showFullLabels = newValue === "on";
+        // Sync with labels section
+        this.labelsList.updateValue("showFullLabelsAlways", newValue);
         break;
     }
+    saveFooterSettings(this.settings);
+    this.appearanceList.updateValue(id, newValue);
+    this.onSettingsChanged?.();
   }
 
-  private toggleGroup(groupId: string): void {
+  private onGroupChange(groupId: string, newValue: string): void {
     const groupSettings = this.settings.groups[groupId] ?? { show: true, segments: {} };
-    groupSettings.show = !groupSettings.show;
+    groupSettings.show = newValue === "on";
     this.settings.groups[groupId] = groupSettings;
     saveFooterSettings(this.settings);
+    this.groupList.updateValue(groupId, newValue);
+    this.onSettingsChanged?.();
   }
 
-  private toggleSegment(groupId: string, segmentId: string): void {
+  private onSegmentChange(groupId: string, segmentId: string, newValue: string): void {
     const groupSettings = this.settings.groups[groupId] ?? { show: true, segments: {} };
     if (!groupSettings.segments) groupSettings.segments = {};
-    groupSettings.segments[segmentId] = !(groupSettings.segments[segmentId] ?? true);
+    groupSettings.segments[segmentId] = newValue === "on";
     this.settings.groups[groupId] = groupSettings;
     saveFooterSettings(this.settings);
+    this.segmentList?.updateValue(segmentId, newValue);
+    this.onSettingsChanged?.();
   }
 
-  private enterSegmentsMode(groupId: string): void {
-    this.savedGroupIndex = this.selectedIndex;
-    this.mode = "segments";
-    this.selectedGroupId = groupId;
-    this.selectedIndex = 0;
+  private onLabelsChange(id: string, newValue: string): void {
+    switch (id) {
+      case "showFullLabelsAlways":
+        this.settings.showFullLabels = newValue === "on";
+        // Sync with appearance section
+        this.appearanceList.updateValue("showFullLabels", newValue);
+        break;
+      case "showZoneHeaders":
+        // TODO: implement zone headers setting
+        break;
+    }
+    saveFooterSettings(this.settings);
+    this.labelsList.updateValue(id, newValue);
+    this.onSettingsChanged?.();
   }
 
-  private backToGroups(): void {
-    this.mode = "groups";
-    this.selectedIndex = this.savedGroupIndex;
-    this.selectedGroupId = null;
-  }
+  // ─── Section navigation ────────────────────────────────────────────
 
-  render(width: number): string[] {
-    if (this.mode === "groups") {
-      return this.renderGroupsMode(width);
-    } else {
-      return this.renderSegmentsMode(width);
-    }
+  private getFocusedGroupId(): string | null {
+    return this.selectedGroupId ?? this.groups[0]?.id ?? null;
   }
 
-  private padToWidth(line: string, targetWidth: number): string {
-    const visLen = visibleWidth(line);
-    const pad = Math.max(0, targetWidth - visLen);
-    return line + " ".repeat(pad);
+  private enterSegmentsMode(groupId: string): void {
+    this.selectedGroupId = groupId;
+    this.buildSegmentList(groupId);
   }
 
-  private renderCentered(text: string, width: number): string {
-    const visLen = visibleWidth(text);
-    if (visLen >= width) return text;
-    const leftPad = Math.floor((width - visLen) / 2);
-    return " ".repeat(leftPad) + text;
+  private backToGroups(): void {
+    this.selectedGroupId = null;
+    this.segmentList = null;
+    // Rebuild group list to reflect segment changes
+    this.buildGroupList();
   }
 
-  private renderGroupsMode(width: number): string[] {
-    const lines: string[] = [];
-    const innerWidth = width - 2;
+  // ─── Render ────────────────────────────────────────────────────────
 
-    lines.push(`${ansi.dim}╭${"─".repeat(innerWidth)}╮${ansi.reset}`);
-    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.bold}⚙  Footer Settings${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
-    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
-
-    for (let i = 0; i < this.groups.length; i++) {
-      const group = this.groups[i];
-      const isSelected = i === this.selectedIndex;
-      const groupSettings = this.settings.groups[group.id] ?? { show: group.defaultShow, segments: {} };
-      const isEnabled = groupSettings.show;
+  render(width: number): string[] {
+    const innerWidth = Math.max(22, width - 2);
+    const lines: string[] = [];
 
-      const toggle = isEnabled ? TOGGLE_ON : TOGGLE_OFF;
-      const indicator = isSelected ? `${ansi.cyan}▸${ansi.reset}` : " ";
-      let line = `  ${indicator} ${toggle} ${group.name}`;
+    // Header
+    lines.push(borderLine(innerWidth, "top"));
+    lines.push(frameLine(`\x1b[1m\x1b[36m⚙  Footer Settings\x1b[0m`, innerWidth));
 
-      if (isSelected) {
-        line += `  ${ansi.dim}→ segments${ansi.reset}`;
+    // Section tabs
+    const tabParts = SECTIONS.map((s) => {
+      const label = SECTION_LABELS[s];
+      if (s === this.section) {
+        return `\x1b[1m\x1b[36m[${label}]\x1b[0m`;
       }
-
-      if (visibleWidth(line) > innerWidth - 2) {
-        line = truncateToWidth(line, innerWidth - 2);
+      return `\x1b[2m${label}\x1b[0m`;
+    });
+    lines.push(frameLine(`  ${tabParts.join("  ")}`, innerWidth));
+    lines.push(ruleLine(innerWidth));
+
+    // Section content
+    const activeList = this.currentList;
+    if (activeList) {
+      const contentLines = activeList.render(innerWidth - 2);
+      for (const line of contentLines) {
+        lines.push(frameLine(` ${line}`, innerWidth));
       }
-
-      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth)}${ansi.dim}│${ansi.reset}`);
     }
 
-    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
-    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  Enter/→ segments  q close${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
-    lines.push(`${ansi.dim}╰${"─".repeat(innerWidth)}╯${ansi.reset}`);
+    // Footer hints
+    lines.push(ruleLine(innerWidth));
 
-    return lines;
-  }
-
-  private renderSegmentsMode(width: number): string[] {
-    const lines: string[] = [];
-    const group = this.groups.find(g => g.id === this.selectedGroupId);
-    if (!group) return lines;
-
-    const groupSettings = this.settings.groups[group.id] ?? { show: group.defaultShow, segments: {} };
-    const innerWidth = width - 2;
-
-    lines.push(`${ansi.dim}╭${"─".repeat(innerWidth)}╮${ansi.reset}`);
-    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${group.name} Segments`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
-    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
-
-    for (let i = 0; i < group.segments.length; i++) {
-      const seg = group.segments[i];
-      const isSelected = i === this.selectedIndex;
-      const isEnabled = groupSettings.segments?.[seg.id] ?? seg.defaultShow;
-
-      const toggle = isEnabled ? TOGGLE_ON : TOGGLE_OFF;
-      const indicator = isSelected ? `${ansi.cyan}▸${ansi.reset}` : " ";
-      let line = `  ${indicator} ${toggle} ${seg.label}`;
-
-      if (visibleWidth(line) > innerWidth - 2) {
-        line = truncateToWidth(line, innerWidth - 2);
-      }
-
-      lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(line, innerWidth)}${ansi.dim}│${ansi.reset}`);
+    let hints: string;
+    if (this.section === "segments" && this.selectedGroupId) {
+      hints = "j/k navigate · Space toggle · h/Esc back · / search · q close";
+    } else if (this.section === "segments") {
+      hints = "j/k navigate · Space toggle · l/Enter segments · / search · q close";
+    } else {
+      hints = "j/k navigate · Space/Enter change · Tab section · q close";
     }
-
-    lines.push(`${ansi.dim}├${"─".repeat(innerWidth)}┤${ansi.reset}`);
-    lines.push(`${ansi.dim}│${ansi.reset}${this.padToWidth(this.renderCentered(`${ansi.dim}↑↓ select  Space toggle  ←/Enter back  q close${ansi.reset}`, innerWidth), innerWidth)}${ansi.dim}│${ansi.reset}`);
-    lines.push(`${ansi.dim}╰${"─".repeat(innerWidth)}╯${ansi.reset}`);
+    lines.push(frameLine(`\x1b[2m${hints}\x1b[0m`, innerWidth));
+    lines.push(borderLine(innerWidth, "bottom"));
 
     return lines;
   }