Skip to content

Unified editing: merge color editing into Edit Lines via Tab mode #259

@hangie

Description

@hangie

Summary

Major TUI overhaul that unifies the editing experience with consistent navigation patterns throughout. What started as a proposal to merge color editing into Edit Lines grew into a comprehensive rethink of TUI navigation.

Problem (original)

Editing a widget's color required navigating: MainMenu → Edit Colors → LineSelector → ColorMenu → (edit) → ESC × 3 → MainMenu. The "Edit Lines" and "Edit Colors" top-level split put the same objects behind different doors.

Additionally, the Rules Editor was a full-screen overlay that removed all context of the widget list. Navigation was inconsistent across screens — some wrapped, some didn't; some used ← Back menu items, some used ESC only; keybinds were case-sensitive in some screens and case-insensitive in others.

What Was Built

1. Unified Color Editing (Tab mode)

  • Press Tab to switch between items mode and color mode on any widget
  • Inline color editing: ←→ cycle, hex, ANSI256, bold, fg/bg toggle
  • Removed separate "Edit Colors" menu entirely
  • Deleted ColorMenu.tsx and color-menu/mutations.ts

2. Accordion Rules Editor

  • Press on a widget to expand its rules inline below it
  • Rules use the same interaction patterns as widgets: ↑↓ navigate, Tab for color/property mode, Enter for focus mode
  • Deleted full-screen RulesEditor.tsx overlay — replaced by accordion
  • Empty rules show placeholder: (no rules — press 'a' to add)

3. Consistent Tree Navigation

  • → drills in, ← drills out at every level: LineSelector → ItemsEditor → Rules → ConditionEditor
  • Enter = focus/edit mode at every level: ↑↓ reorders, ←→ edits properties
  • ESC peels back one layer — never skips levels
  • ↑↓ wraps at top/bottom everywhere
  • Removed all "← Back" menu items — ← arrow handles back navigation

4. Polish

  • Exit confirmation when unsaved changes exist
  • Case-insensitive keybinds across all screens
  • "Enter to edit" replaces "Enter to move" for better discoverability
  • PowerlineSeparatorEditor refactored to same Enter/focus pattern

Navigation Model

Level ↑↓ Enter Tab
MainMenu Navigate Select Select
LineSelector Navigate Enter editor Back Move mode
Widget (items) Navigate Expand rules Back/collapse Focus (move + type) Color mode
Rule (property) Navigate Condition editor Collapse Focus (move) Color mode

Implementation

All work is on the feat/unified-editing branch. See PR #261 for the full diff.

Tags for rollback points:

  • unified-editing-phase1 — color mode added, legacy Edit Colors still present
  • unified-editing-phase2 — legacy Edit Colors removed
  • accordion-rules-editor — accordion replaces full-screen overlay

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions