Add comprehensive screen design documentation#530
Open
avpv wants to merge 5 commits into
Open
Conversation
JTBD-rooted design specs for the five surfaces in the core daily loop: backlog, today popover, task details, scenario picker, slot picker. Each follows a five-section template (JTBD · current state · target design · acceptance criteria · out of scope) so the next refactor PR opens with the spec rather than negotiating it. Mockups referenced from ui_kits/index2.html line ranges; current Swift file paths and line ranges noted in §2 of each doc.
Corrections to existing Tier 0 docs after reading the entire mockup catalogue: - backlog: per-row controls are hover-only (CSS :1107-1140, :1372-1402), segmented filter has three chips (All/Scheduled/Completed), task-sched toolbar replaces when-chip on hover, sel-complete master toggle with indeterminate state. - today: event-row variants (cancelled/declined/travel/reminder/all-day), platform chips with Zoom/Meet/Teams tints, attendee avatar stacks, RSVP chip, jumpTodayBtn opacity-as-state, smooth-scroll day-nav. - task-details: open question on row tap gesture — recommendation B (tap = open details, ⌘-click = select), pending decision before backlog AC for "push TaskDetailsView" can be marked done. New specs for surfaces that already exist in the codebase but need mockup-alignment refactors: - meeting-alert: countdown ring, platform-aware Join, stacked-reminder strip, agenda preview affordance. - join-ribbon: pulsing red dot, Mute/Agenda/Leave actions, lifecycle extends to event.endDate. - menubar-density: 5 states (Clear/Light/Full/Packed/Focus) with colour bucketing, owl+time capsule, event-count badge, Pomodoro ring replacement.
…lette Four new specs, one README index update. - quick-capture: existing QuickCaptureView refactor — parser-chip, hint-row, keycap topbar, window-position memory. - intent-composer: promote Power Mode out of the command palette into a standalone IntentComposerView with conflict-banner and DAG-compile ribbon; coexist with the palette's inline composer. - pomodoro: split 695-line TimerScreenView into PomodoroMiniView (during-focus) and PomodoroAdminView (session admin). - command-palette: collapse 5 sections into 3 flat groups (Suggested · Actions · Navigate); add foot-hint bar and explicit «Open intents…» row alongside ⌥ Power Mode. Each spec is grounded in current Swift file paths and ui_kits/index2.html mockup line ranges.
Two new specs, README marked complete across all three tiers. - event-editor: unify AddEventView (654 lines) · NewTaskView (582 lines) · EditTaskView (814 lines) into a single generic EntityEditorView<EditableKind>. Hero title, shared SettingsRow rendering, filled-accent Save in topbar, always-visible Notes. - settings: collapse 8-tab sidebar into 5 top-horizontal tabs; World Clock joins Calendars, Notifications joins Reminders, Optimizer folds into General. AI tab gets a hero rate-limit visualisation; Appearance keeps its 2-column skin grid.
User feedback: current NavigationSplitView sidebar feels right. Diverge from the mockup on this specific point: keep the sidebar layout, only consolidate entries from 8 to 5. Rationale documented under PRINCIPLES.md §11 (HIG vs mockup tension explained in §3). Other AC unchanged — AI hero rate-limit, skin grid, SettingsRow component, tab consolidation logic all stand.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a complete set of design documentation for all major screens in the Bubo application. These documents serve as normative specifications for UI/UX implementation, establishing a shared understanding of each surface's purpose, current state, and target design.
Changes
docs/design/screens/:README.md— Template and overview of the screen documentation systemsettings.md— Settings panel with 5-tab sidebar (Calendars, Reminders, AI, Appearance, General)task-details.md— Task detail view with hero title, subtasks, and schedulingtoday.md— Main menu-bar popover showing day overview and timelineevent-editor.md— Unified event/task creation and editing formintent-composer.md— Declarative scheduling rules interface for the optimizercommand-palette.md— ⌘K command launcher with fuzzy search and Power Modemeeting-alert.md— Fullscreen meeting countdown alertpomodoro.md— Pomodoro timer mini-windowslot-picker.md— Task-anchored time slot selectionscenario-picker.md— Optimizer output visualization (MAP-Elites archive)backlog.md— Unscheduled task list and triage surfacemenubar-density.md— Menu-bar owl icon with density indicatorjoin-ribbon.md— Floating pill showing active meeting statusquick-capture.md— Global hotkey (⌃⇧⌘␣) for rapid task captureDocumentation Structure
Each screen document follows a consistent five-section format:
Key Design Principles Applied
Notable Decisions Documented
These documents are pair-reviewed before implementation PRs and serve as the source of truth for UI/UX specifications.
https://claude.ai/code/session_013PnXRrP7bLqLBrkemsByh8