POC: Remove detail view

[sotte]

This is a follow up to #42
and it got messy quickly :) Partially due to me not dully understanding bubbletea, partially also just getting the flow right-ish. Still not quite happy.

@hmans please try it out. If we move forward with this, we have to clean this up quite a bit.

Everything from c4f6332 on is relevant.

[sotte]

By Claude, in collab with Stefan.

TUI Design

Layout

Two-column layout with responsive behavior:

┌─────────────────────────────┐┌─────────────────────────────┐
│ Beans                       ││ Bean Title                  │
│                             ││ beans-xxxx  ● in-progress   │
│ ▸ beans-1234  ● todo  task  │├─────────────────────────────┤
│   beans-5678  ● done  bug   ││ Linked Beans                │
│   └─ beans-9abc ...         ││ ▸ Parent:     beans-parent  │
│                             ││   Blocked by: beans-other   │
│                             │├─────────────────────────────┤
│                             ││ ## Description              │
│                             ││                             │
│                             ││ Markdown body rendered here │
│                             ││                             │
└─────────────────────────────┘└─────────────────────────────┘
 space select · enter view · c create · / filter · ? help · q quit

Wide terminal (≥120 cols): Both panes visible, focus determines which receives input.

Narrow terminal (<120 cols): Single pane visible. List by default, detail when focused.

Navigation Workflow

Entering and Exiting Detail View

LIST ──enter──► DETAIL ──backspace──► LIST

• From list: enter focuses detail (links section if present, otherwise body)
• From detail: backspace returns to list

Switching Within Detail View

LINKS ◄──tab──► BODY

• tab toggles between links and body sections

Following Linked Beans

DETAIL ──enter on link──► LIST (cursor on linked bean)

• In links section, enter jumps to the linked bean
• Pushes current bean to history stack
• Focus returns to list for continued navigation

History Navigation

DETAIL ──esc──► previous bean (or LIST if history empty)

• esc pops from history and navigates back
• When history is empty, returns to list
• backspace always returns to list immediately (clears history)

View States

viewListFocused        // List pane has focus
viewDetailLinksFocused // Detail pane, links section has focus
viewDetailBodyFocused  // Detail pane, body section has focus
viewTagPicker          // Tag filter picker (full screen)
viewParentPicker       // Parent picker modal
viewStatusPicker       // Status picker modal
viewTypePicker         // Type picker modal
viewBlockingPicker     // Blocking picker modal
viewPriorityPicker     // Priority picker modal
viewCreateModal        // Create bean modal
viewHelpOverlay        // Help overlay

Key Bindings

Key	List	Links	Body
enter	Focus detail	Follow link	-
backspace	-	Return to list	Return to list
esc	Clear selection/filter	History back, then list	History back, then list
tab	-	Switch to body	Switch to links
j/k	Navigate	Navigate	Scroll
/	Filter	Filter	-
space	Toggle select	-	-
c	Create bean	-	-
p	Set parent	Set parent	Set parent
s	Set status	Set status	Set status
t	Set type	Set type	Set type
P	Set priority	Set priority	Set priority
b	Set blocking	Set blocking	Set blocking
e	Open editor	Open editor	Open editor
y	Copy ID	Copy ID	Copy ID
g t	Filter by tag	-	-
?	Help	Help	Help
q	Quit	Quit	Quit

Focus Indication

Border color indicates focus:

• Cyan (primary): Focused section receives keyboard input
• Gray (muted): Visible but not focused

Applied to: list pane, links section, body section.

History Navigation

When following a linked bean (Enter in links section):

1. Push current bean ID to history stack
2. Move list cursor to target bean
3. Detail pane updates automatically
4. Switch to list focus

When pressing Escape in detail:

1. If history not empty → pop and navigate to previous bean
2. If history empty → return to list focus

When pressing Backspace in detail:

• Always return to list immediately, clear history

Detail Pane Structure

┌─────────────────────────────┐
│ Title                       │  ← Header (always visible)
│ ID  Status  Tags            │
├─────────────────────────────┤
│ Linked Beans                │  ← Links section (if any links exist)
│ ▸ Parent:     beans-xxxx    │     Filterable list
│   Blocking:   beans-yyyy    │     Max 5 visible, scrollable
│   Blocked by: beans-zzzz    │
├─────────────────────────────┤
│                             │  ← Body section (scrollable viewport)
│ Markdown content            │     Rendered with glamour
│                             │
└─────────────────────────────┘

List Pane Structure

┌─────────────────────────────┐
│ Beans [tag: filter]         │  ← Title (shows active filter)
│                             │
│ ▸ beans-1234  ● todo  task  │  ← Tree view with hierarchy
│   beans-5678  ✓ done  bug   │     Status/type colored
│   └─ beans-9abc  ...        │     Priority indicator if set
│                             │
└─────────────────────────────┘

Features:

• Tree view showing parent/child hierarchy
• Filterable (/ key)
• Multi-select (space to toggle, batch operations)
• Tag filtering (g t chord)

Picker/Modal Behavior

When opening a picker:

1. Save current viewState to previousState
2. Show picker as modal over current view
3. On close, restore previousState

This preserves exact focus location - returning from a picker opened in viewDetailLinksFocused returns to viewDetailLinksFocused.

Message Flow

Cross-component messages in tui.go:

• cursorChangedMsg - List cursor moved, update detail pane
• selectBeanMsg - Navigate to a bean (from link following)
• beansChangedMsg - File watcher detected changes, refresh
• copyBeanIDMsg - Copy ID(s) to clipboard

Component messages stay in their files:

• beansLoadedMsg in list.go
• backToListMsg in detail.go
• *SelectedMsg, open*Msg, close*Msg in picker files

File Structure

internal/tui/
├── tui.go              # App model, routing, view composition
├── list.go             # List pane model
├── detail.go           # Detail pane model
├── styles.go           # Shared styles
├── keys.go             # Key binding definitions
├── help.go             # Help overlay
├── modal.go            # Modal rendering utilities
├── createmodal.go      # Create bean modal
├── tagpicker.go        # Tag filter picker
├── parentpicker.go     # Parent picker
├── statuspicker.go     # Status picker
├── typepicker.go       # Type picker
├── prioritypicker.go   # Priority picker
└── blockingpicker.go   # Blocking relationship picker

Constants

TwoColumnMinWidth = 120  // Threshold for two-column mode
RightPaneMaxWidth = 80   // Max detail pane width
borderSize = 2           // Width/height added by borders

[hmans]

Just a quick heads-up that I've seen these PRs -- been busy with New Year's stuff and will continue to do so today. I'll take a look at these this weekend.