# Tasks for Redesign - Unisono Application **Feature Branch**: `003-redesign-you-find` **Date**: суббота, 11 октября 2025 г. **Spec**: spec.md **Plan**: plan.md ## Phase 1: Setup Tasks These tasks establish the foundational environment and global configurations for the UI redesign. - **T001**: Initialize a new Material-UI / MUI project within the `frontend` directory, ensuring compatibility with React and TypeScript. - *Rationale*: This is the foundational step for the UI redesign. - *File*: `frontend/` - **T002**: Configure the `frontend` project to use the existing primary button color. - *Rationale*: FR-005. This is a global style setting. - *File*: `frontend/src/theme.ts` (or similar styling file) - **T003**: Integrate Material 3 standard components for displaying error, empty, and loading states. - *Rationale*: FR-013. This is a cross-cutting concern. - *File*: `frontend/src/components/` (or similar common components directory) - **T004**: Implement basic accessibility best practices across the frontend application. - *Rationale*: FR-014. This is a cross-cutting concern. - *File*: `frontend/src/` (various files) ## Phase 2: Foundational Tasks These tasks are prerequisites that must be completed before any user story implementation can begin. - **T005**: Analyze existing `frontend` components and identify those requiring Material 3 migration. - *Rationale*: To understand the scope of work for each user story. - *File*: `frontend/src/components/`, `frontend/src/pages/` ## Phase 3: User Story 1 - Responsive and Consistent User Experience (P1) *Goal*: Ensure the application UI adapts seamlessly across different devices and input methods. *Independent Test*: A user can successfully complete a primary task (e.g., create a session, join a session) on a mobile device using touch input, and the UI adapts correctly to the screen size. - **T006 [US1]**: Write automated tests for responsive layout and touch functionality for `App.tsx`, `CreateSession.tsx`, `SessionPage.tsx`, `DesireForm.tsx`, and `ResultsDisplay.tsx`. - *Rationale*: Ensure TDD compliance and verify responsive and touch behavior. - *File*: `frontend/tests/` (various test files) - **T007 [US1]**: Refactor `frontend/src/App.tsx` to implement a responsive layout using Material 3 components. [P] - **T008 [US1]**: Update `frontend/src/pages/CreateSession.tsx` to be fully responsive and touch-friendly using Material 3 components. [P] - **T009 [US1]**: Update `frontend/src/pages/SessionPage.tsx` to be fully responsive and touch-friendly using Material 3 components. [P] - **T010 [US1]**: Update `frontend/src/components/DesireForm.tsx` to be fully responsive and touch-friendly using Material 3 components. [P] - **T011 [US1]**: Update `frontend/src/components/ResultsDisplay.tsx` to be fully responsive and touch-friendly using Material 3 components. [P] - **T012 [US1]**: Implement touch support for all interactive UI elements within the `frontend` application. - *Rationale*: FR-002. This is a cross-cutting concern for US1. - *File*: `frontend/src/` (various files) --- Checkpoint: User Story 1 Complete --- ## Phase 4: User Story 2 - Clear Branding and Professional Appearance (P1) *Goal*: Display consistent branding (app name, logo, favicon) throughout the application. *Independent Test*: A new user can identify the application by its name and logo on any page, and the favicon is visible in the browser tab. - **T013 [US2]**: Write automated tests for consistent app name, logo, and favicon display. - *Rationale*: Ensure TDD compliance and verify branding. - *File*: `frontend/tests/` (various test files) - **T014 [US2]**: Implement "Unisono" app name display consistently in all session states and relevant UI headers. - *Rationale*: FR-003. - *File*: `frontend/src/App.tsx`, `frontend/src/components/` (header components) - **T015 [US2]**: Integrate the specified logo into the UI and configure it as the favicon. - *Rationale*: FR-004. - *File*: `frontend/public/index.html`, `frontend/src/App.tsx` (or header component) --- Checkpoint: User Story 2 Complete --- ## Phase 5: User Story 3 - Improved Readability and User-Friendly Language (P2) *Goal*: Present clear, concise, and non-technical language, and format session topics appropriately. *Independent Test*: A user can read and understand the purpose of a session topic without encountering technical jargon or redundant prefixes. - **T016 [US3]**: Write automated tests for text formatting, placeholder removal, and validation rule display in input fields. - *Rationale*: Ensure TDD compliance and verify readability and input field behavior. - *File*: `frontend/tests/` (various test files) - **T017 [US3]**: Remove the prefix "Session: " from all displayed session topics. - *Rationale*: FR-006. - *File*: `frontend/src/components/ResultsDisplay.tsx`, `frontend/src/pages/SessionPage.tsx` (or wherever session topics are displayed) - **T018 [US3]**: Review and update all user-facing copywriting to avoid technical terms. - *Rationale*: FR-007. - *File*: `frontend/src/` (various UI text files) - **T019 [US3]**: Apply `ToTitleCase` formatting to appropriate text elements and avoid excessive capitalization. - *Rationale*: FR-009. - *File*: `frontend/src/` (various UI text files) - **T020 [US3]**: Ensure input fields do not use placeholders. - *Rationale*: FR-011. - *File*: `frontend/src/components/DesireForm.tsx`, `frontend/src/pages/CreateSession.tsx` (or any input fields) - **T021 [US3]**: For input fields with validation rules, display these rules as a field description directly under the field. - *Rationale*: FR-012. - *File*: `frontend/src/components/DesireForm.tsx`, `frontend/src/pages/CreateSession.tsx` (or any input fields) --- Checkpoint: User Story 3 Complete --- ## Phase 6: User Story 4 - Streamlined Interface (P3) *Goal*: Provide a clean and simple interface without unnecessary information. *Independent Test*: A user can navigate the application and confirm that the session status is not visible, leading to a cleaner interface. - **T022 [US4]**: Write automated tests for hiding the session status display. - *Rationale*: Ensure TDD compliance and verify streamlined interface. - *File*: `frontend/tests/` (various test files) - **T024 [US4]**: Hide the session status display from the user interface. - *Rationale*: FR-008. - *File*: `frontend/src/pages/SessionPage.tsx` (or wherever session status is displayed) --- Checkpoint: User Story 4 Complete --- ## Phase 7: Final Polish & Cross-Cutting Concerns - **T025**: Verify mobile page load times are consistently under 2 seconds on a 3G network. - *Rationale*: SC-006. - *File*: Performance testing tools/reports - **T026**: Conduct comprehensive UI testing across various devices and screen sizes to ensure responsiveness and touch support. - *Rationale*: US1 Acceptance Scenarios. - *File*: Test reports - **T027**: Conduct a final review of the application for adherence to Material Design 3 guidelines and overall UI/UX consistency. - *Rationale*: FR-001, FR-013, US1, US2. - *File*: UI/UX review reports - **T028**: Conduct end-to-end testing of all critical user flows to ensure existing business logic and functionality are maintained. - *Rationale*: FR-010. Addresses underspecification of FR-010. - *File*: End-to-end test reports - **T029**: Ensure all existing functional tests pass after the redesign. - *Rationale*: FR-010, SC-005. - *File*: `npm test` results for `backend/tests/`, `frontend/tests/` ## Task Dependencies - Setup Tasks (T001-T005) -> Foundational Tasks (T006) - Foundational Tasks (T006) -> User Story 1 (T007-T012) - User Story 1 (T007-T012) -> User Story 2 (T013-T015) - User Story 1 (T007-T012) -> User Story 3 (T016-T021) - User Story 1 (T007-T012) -> User Story 4 (T022-T024) - All User Stories -> Final Phase (T025-T029) ## Parallel Execution Examples - Within User Story 1, tasks T007-T011 can be parallelized as they involve refactoring different page/component files. - User Story 2 (T013-T015), 3 (T016-T021), and 4 (T022-T024) can be worked on in parallel once User Story 1 is complete, as they address distinct aspects of the UI. ## Implementation Strategy - **MVP First**: User Story 1 (Responsive and Consistent User Experience) will be prioritized as the Minimum Viable Product, ensuring core UI adaptability. - **Incremental Delivery**: Subsequent user stories will be delivered incrementally, building upon the responsive foundation.