esync

Directory watching and remote syncing
Log | Files | Refs | README | LICENSE

2026-03-03-cursor-expand-design.md (2203B)


      1 # Cursor Navigation & Inline Expand for TUI Dashboard
      2 
      3 ## Problem
      4 
      5 The dashboard shows grouped sync events (e.g. "cmd/ 2 files") but provides no
      6 way to inspect which files are inside a group. Users need to see individual
      7 file paths without leaving the dashboard.
      8 
      9 ## Design
     10 
     11 ### 1. Cursor navigation
     12 
     13 Add a `cursor int` field to `DashboardModel`. Up/down arrows move the cursor
     14 through the filtered event list. The focused row gets a subtle highlight — a
     15 `>` marker and brighter text. The viewport auto-scrolls to keep the cursor
     16 visible.
     17 
     18 ### 2. Individual files in SyncEvent
     19 
     20 Add `Files []string` to the `SyncEvent` struct. When `groupFilesByTopLevel()`
     21 in `cmd/sync.go` produces a group with `count > 1`, populate `Files` with the
     22 individual relative paths from that group.
     23 
     24 ### 3. Inline expand/collapse
     25 
     26 Add `expanded map[int]bool` to `DashboardModel` (keyed by event index in the
     27 unfiltered `events` slice). Press Enter on a focused event to toggle. When
     28 expanded, child files render below the parent, indented:
     29 
     30 ```
     31   14:32:05  ✓ cmd/                              2 files  1.2KB  0.3s
     32                └ cmd/sync.go
     33                └ cmd/root.go
     34   14:32:01  ✓ main.go                                    0.5KB  0.1s
     35 ```
     36 
     37 Single-file events (empty `Files`) ignore the expand action.
     38 
     39 ### 4. Column alignment
     40 
     41 The current layout uses a fixed 30-char name column. With the terminal width
     42 available, use more space:
     43 
     44 - Timestamp: fixed 8 chars
     45 - Status icon: 1 char + spacing
     46 - Name column: dynamic, scales with terminal width (min 30, up to width - 40)
     47 - Size + duration: right-aligned in remaining space
     48 - Expanded child lines: indented under the name column, same alignment
     49 
     50 Child file names use the full name column width minus 2 chars for the `└ `
     51 prefix.
     52 
     53 ### 5. Key bindings
     54 
     55 | Key        | Action                                    |
     56 |------------|-------------------------------------------|
     57 | j / ↓      | Move cursor down                          |
     58 | k / ↑      | Move cursor up                            |
     59 | Enter / →  | Toggle expand on focused event            |
     60 | Left / Esc | Collapse focused event (if expanded)      |
     61 
     62 The help line updates to show the new bindings.