Skip to content

Focus Mode UI & Ambient Design #28

Description

@orbitronhd

Details and Assumptions

* FocusModePage is the dedicated focus mode interface accessible from the bottom navigation and via a floating action button on the home dashboard.
* The page centers a large FocusTimerRing widget — a circular countdown ring drawn with CustomPainter that drains smoothly as time elapses, with a subtle glow effect on the leading edge.
* FocusAmbientBackground renders a slow-moving gradient animation behind the timer to create a calming atmosphere during focus sessions. The gradient shifts between analogous colors derived from the dynamic color scheme.
* FocusProfileSelector displays available profiles as horizontally scrollable MD3 cards showing profile name, duration, and number of blocked apps.
* BlockedAppsList shows the apps blocked in the selected profile with app icons and names, plus a toggle to add or remove apps.
* FocusCompletionCard is a modal card shown on session completion with the session summary: total time, distractions, completion score, and an encouraging message.
* A breathing animation (focus_breathing.riv) can optionally be displayed during the session for mindfulness.
* The FAB on the home dashboard uses a custom animated icon that transitions from a target icon to a stop icon when a session is active.
* During an active session, the bottom navigation shows a subtle indicator on the Focus tab.    

Acceptance Criteria

gherkin 
Given the focus mode page loads in idle state
When the profile selector renders
Then available focus profiles are shown as horizontal cards and the first profile is preselected

Given the user selects the Deep Work profile
When the blocked apps list renders below the profile selector
Then it shows all apps included in the Deep Work profile with their icons and names

Given a focus session is active with 60% of time remaining
When the timer ring renders
Then the ring is 60% filled with a smooth arc and the remaining time is displayed in the center in large typography

Given a focus session is active
When the ambient background renders
Then a slow-moving gradient animation cycles through calming colors behind the timer ring at approximately one full cycle per 30 seconds

Given a focus session completes
When the completion card renders
Then it slides up as a modal showing the total focus time, number of distractions, completion score, and a motivational message

Given the user is on the home dashboard with no active focus session
When the focus FAB is displayed
Then it shows a target icon with the label "Focus"

Given a focus session is currently active
When the user navigates to the home dashboard
Then the focus FAB icon transitions to a stop icon and the Focus tab in the bottom navigation shows an active indicator dot

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions