Skip to content

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

Open

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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