redesign task detail panel layout #126

New issue

Closed

opened 2026-03-28 16:41:10 +00:00 by barrettruth · 1 comment

barrettruth commented

2026-03-28 16:41:10 +00:00

Problem

The current task panel layout has issues:

Empty fields (location, meeting) waste vertical space on simple tasks
label field has state wired up but no input rendered
All fields have equal visual weight regardless of importance
No progressive disclosure — a "buy groceries" task shows same chrome as a complex calendar event

Options to evaluate

Four layout approaches were proposed. Need to pick one or design a hybrid:

A — Current: all fields always visible, stacked vertically. Simple but wasteful.

B — Header-centric: chip row (status + category + label), collapsible details section for location/meeting. Auto-expands when fields are populated. More notes space.

C — Inline key-value table: left-aligned labels, right-aligned inputs. Maximum density, most terminal-like. All fields visible.

D — Two-zone sticky header: title + core metadata never scroll, everything else scrolls including notes (which grow without limit).

Key tradeoffs

Terminal aesthetic favors C (key-value pairs) or D (double border zone split)
Progressive disclosure (B) saves space but adds interaction cost
Sticky header (D) is powerful but eats 80-100px permanently
C is densest but gives empty fields equal weight to populated ones

Also

Surface the label field (currently has state but no UI)
Metadata footer already implemented: created mar 25, 2026 · updated 2h ago
Panel width is resizable (20-60%, default 50%)

## Problem The current task panel layout has issues: - Empty fields (location, meeting) waste vertical space on simple tasks - `label` field has state wired up but no input rendered - All fields have equal visual weight regardless of importance - No progressive disclosure — a "buy groceries" task shows same chrome as a complex calendar event ## Options to evaluate Four layout approaches were proposed. Need to pick one or design a hybrid: **A — Current**: all fields always visible, stacked vertically. Simple but wasteful. **B — Header-centric**: chip row (status + category + label), collapsible details section for location/meeting. Auto-expands when fields are populated. More notes space. **C — Inline key-value table**: left-aligned labels, right-aligned inputs. Maximum density, most terminal-like. All fields visible. **D — Two-zone sticky header**: title + core metadata never scroll, everything else scrolls including notes (which grow without limit). ## Key tradeoffs - Terminal aesthetic favors C (key-value pairs) or D (double border zone split) - Progressive disclosure (B) saves space but adds interaction cost - Sticky header (D) is powerful but eats 80-100px permanently - C is densest but gives empty fields equal weight to populated ones ## Also - Surface the `label` field (currently has state but no UI) - Metadata footer already implemented: `created mar 25, 2026 · updated 2h ago` - Panel width is resizable (20-60%, default 50%)

barrettruth commented

2026-03-29 05:08:59 +00:00

Detail panel redesigned: CSS grid property table layout, recurrence moved to modal dialog, metadata footer removed, consistent field alignment.