Redesign planned out

2025-10-11 18:46:40 +03:00
parent 6f0d03703b
commit 9bbd690f40
9 changed files with 487 additions and 0 deletions
--- a/specs/003-redesign-you-find/plan.md
+++ b/specs/003-redesign-you-find/plan.md
@@ -0,0 +1,111 @@
+# Implementation Plan: Redesign - Unisono Application
+
+**Branch**: `003-redesign-you-find` | **Date**: суббота, 11 октября 2025 г. | **Spec**: spec.md
+**Input**: Feature specification from `/specs/[###-feature-name]/spec.md`
+
+**Note**: This template is filled in by the `/speckit.plan` command. See `.specify/templates/commands/plan.md` for the execution workflow.
+
+## Summary
+
+Redesign the Unisono application UI to be responsive across devices, adhere to Material Design 3 guidelines, incorporate consistent branding ("Unisono" app name, logo, favicon), improve readability by removing "Session: " prefixes and avoiding technical jargon, streamline the interface by hiding session status, and ensure basic accessibility. The redesign will preserve existing user flows and business logic, with a performance goal of mobile page load under 2 seconds on 3G.
+
+## Technical Context
+
+**Language/Version**: Node.js (LTS), TypeScript 5.x  
+**Primary Dependencies**: React, Material-UI / MUI  
+**Storage**: Browser Local Storage (for session state, backend is stateless)  
+**Testing**: npm test  
+**Target Platform**: Web (responsive design for desktop, tablet, mobile)
+**Project Type**: Web application  
+**Performance Goals**: Mobile page load under 2 seconds on 3G  
+**Constraints**: Preserve existing user flow and logic, Material Design 3 guidelines, specific color preservation, copywriting rules, hiding session status, text formatting.  
+**Scale/Scope**: Redesign of existing application UI for responsiveness, branding, readability, and streamlined interface.
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+### I. Defined Technology Stack
+-   **Backend**: Node.js - Consistent.
+-   **Frontend**: React - Consistent.
+-   **UI Framework**: Material Design 3 (Material-UI / MUI) - Consistent (FR-001, FR-013).
+-   **Containerization**: Docker - Consistent (implied by project structure).
+    *Status: Pass*
+
+### II. UI/UX Consistency
+All user interfaces MUST adhere to Material Design 3 principles and components. - Consistent (FR-001, FR-013).
+    *Status: Pass*
+
+### III. Container-First Development
+All application services and development environments MUST run within Docker containers. - Consistent (implied by project structure).
+    *Status: Pass*
+
+### IV. Test-Driven Development (TDD)
+New features and bug fixes MUST follow a Test-Driven Development approach. - Consistent (implied by project structure and general best practices).
+    *Status: Pass*
+
+### V. API-First Design
+The backend and frontend are decoupled and communicate via a well-defined API contract. The API contract SHOULD be defined and reviewed before implementation begins. - Consistent (implied by project structure).
+    *Status: Pass*
+
+## Project Structure
+
+### Documentation (this feature)
+
+```
+specs/003-redesign-you-find/
+├── plan.md              # This file (/speckit.plan command output)
+├── research.md          # Phase 0 output (/speckit.plan command)
+├── data-model.md        # Phase 1 output (/speckit.plan command)
+├── quickstart.md        # Phase 1 output (/speckit.plan command)
+├── contracts/           # Phase 1 output (/speckit.plan command)
+└── tasks.md             # Phase 2 output (/speckit.tasks command - NOT created by /speckit.plan)
+```
+
+### Source Code (repository root)
+
+```
+backend/
+├── src/
+│   ├── index.ts
+│   ├── routes/
+│   │   └── sessions.ts
+│   ├── services/
+│   │   └── LLMService.ts
+│   └── ws/
+│       └── index.ts
+└── tests/
+    ├── LLMService.refactor.test.ts
+    └── sessions.test.ts
+
+frontend/
+├── src/
+│   ├── App.tsx
+│   ├── index.tsx
+│   ├── theme.ts
+│   ├── components/
+│   │   ├── DesireForm.test.tsx
+│   │   ├── DesireForm.tsx
+│   │   ├── ResultsDisplay.refactor.test.tsx
+│   │   └── ResultsDisplay.tsx
+│   ├── hooks/
+│   │   └── useSession.ts
+│   ├── pages/
+│   │   ├── CreateSession.test.tsx
+│   │   ├── CreateSession.tsx
+│   │   └── SessionPage.tsx
+│   └── services/
+│       └── websocket.ts
+└── tests/
+```
+
+**Structure Decision**: The project utilizes a web application structure with separate `backend` and `frontend` directories. The redesign primarily impacts the `frontend` directory.
+
+## Complexity Tracking
+
+*Fill ONLY if Constitution Check has violations that must be justified*
+
+| Violation | Why Needed | Simpler Alternative Rejected Because |
+|-----------|------------|-------------------------------------|
+| [e.g., 4th project] | [current need] | [why 3 projects insufficient] |
+| [e.g., Repository pattern] | [specific problem] | [why direct DB access insufficient] |