Skip to content

Redesign & Functional Fix of Focus Mode #77

@Antarik06

Description

@Antarik06

The current Focus Mode UI and functionality are not meeting expected standards.

Issues include:

  • Poor and outdated UI layout
  • Only brown noise works (other sounds are broken)
  • Time and sound selectors placed in a single line (not scalable)
  • Manual time selector UI is weak and limited
  • Misleading UI text (“3 sites restricted”) despite no actual blocking
  • Limited usability and flexibility

This issue requires a complete redesign and functional improvement of Focus Mode.

Core Problems to Address

UI is Visually Weak & Not Modern

  • Layout feels cluttered and unstructured
  • Options are placed in a single horizontal row (not scalable)
  • Manual minute selector UI is poorly designed

This section must be redesigned from scratch with:

  • Clear layout hierarchy
  • Proper spacing
  • Better visual grouping
  • Modern minimal design

Sound System Issues

  • Only brown noise works
  • Other listed sounds do not function

Fix all sound options so that:

  • All sounds work reliably
  • Sounds loop properly
  • Switching sounds does not break timer
  • Audio system is stable

Time Selection Improvements

Preset Times

Keep the existing:

  • 25 minutes
  • 50 minutes
  • 90 minutes

But label them properly as:

  • 25 min → Pomodoro
  • 50 min → Extended Focus
  • 90 min → Deep Work

These should feel intentional, not random numbers.

Manual Time Selector Redesign

Current system:

  • Only minutes
  • Poor UI

New requirements:

  • Support Hours, Minutes, Seconds
  • Clean, intuitive input system
  • Proper validation
  • Visually consistent with app theme

Tags & Session Context

Current tags (Deep Work, Fatigue Zone, etc.) must:

  • Be clearly displayed
  • Update dynamically based on session duration
  • Not feel random

Add more tags intelligently based on:

  • Session length
  • Focus pattern

Early End Support

Currently:

  • User must wait for timer to finish to receive report

Required:

  • Allow users to manually end session early
  • Still generate meaningful study report
  • Calculate actual time spent

Remove Misleading UI

There is currently text saying:

"Guard Active : 3 sites restricted"

This must be removed immediately, since no real blocking is happening.

UI should not imply functionality that does not exist.

Design Expectations

The new Focus Mode should:

  • Feel immersive
  • Feel distraction-free
  • Have clear visual hierarchy
  • Separate timer, sound, and configuration sections
  • Be scalable for future additions
  • Be responsive and modern

Mandatory Miscellaneous Enhancements

You are encouraged to improve usability further by introducing:

  • Better animations
  • Circular progress visualization
  • Subtle background transitions
  • Clean stats display
  • Improved focus session summary
  • Micro-interactions

Metadata

Metadata

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions