Refactor(UI): UI Rework for Trackify

[MoYuan-CN]

Important

Hi everyone, thanks for joining!
Feel free to keep sharing your thoughts on the UI design — we still need more discussion on this post.

Description of this Issue Ticket
The goal of this issue is to improve the Trackify UI by enhancing consistency, navigation, task management, dashboard readability, focus mode experience, and user settings. The improvements aim to increase usability and visual appeal while simplifying navigation and task tracking.

---

Tasks

• 1. Ensure Consistency in Design Elements

  • Ensure all buttons (e.g., "开始专注") have consistent styling across all pages.
  • Standardize form fields, input boxes, and dropdown menus.
  • Consistently apply color schemes and iconography for interactive elements.

• 2. Enhance Top Navigation Bar

  • Add subtle hover or active states (e.g., underlines or color changes) for better clarity.
  • Add tooltips or labels for icons to clarify less obvious functions (e.g., "专注模式", "任务管理").

• 3. Improve Task Management UI

  • Add icons or progress indicators for task states ("完成", "进行中", "待办").
  • Color-code tasks based on their state and include progress bars where relevant.
  • Ensure the task management panel is visually engaging and easy to scan.

• 4. Dashboard Optimization

  • Simplify the statistics panel by focusing on key metrics (e.g., task completion, focus time, pending tasks).
  • Consider providing more detailed stats in a drop-down or modal to avoid cluttering the main view.
  • Highlight important metrics prominently (e.g., task completion percentage).

• 5. Enhance Focus Mode UI

  • Improve visual feedback during focus mode by implementing a countdown timer with color transitions or animations.
  • Add sound notifications for intervals (e.g., 5-minute alert, or end of session).
  • Display motivational messages or progress trackers during focus sessions (e.g., "Keep going!" or "You're almost there!").

• 6. Refactor User Settings and Personalization

  • Use a card layout to organize different setting sections (e.g., notification settings, theme settings, user profile).
  • Provide preview options for theme changes so users can visualize the customization before applying.
  • Add an easy toggle for language preference and theme selection (e.g., "简体中文", "Dark Mode").

---

Expected Outcome

• A more intuitive and engaging UI with consistent design.
• Simplified navigation and task management.
• Enhanced user experience in focus mode and user settings.