71 lines
3.4 KiB
Markdown
71 lines
3.4 KiB
Markdown
# Implementation Plan: [FEATURE]
|
|
|
|
**Branch**: `[###-feature-name]` | **Date**: [DATE] | **Spec**: [link]
|
|
**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
|
|
|
|
Unify frontend styling using a centralized Tailwind CSS configuration and a set of standardized Svelte wrapper components. Implement internationalization (i18n) with support for Russian (default) and English, persisting language preference in LocalStorage.
|
|
|
|
## Technical Context
|
|
|
|
**Language/Version**: Node.js 18+ (Frontend Build), Svelte 5.x
|
|
**Primary Dependencies**: SvelteKit, Tailwind CSS, `date-fns` (existing)
|
|
**Storage**: LocalStorage (for language preference)
|
|
**Testing**: Manual verification per User Scenarios (Visual Regression)
|
|
**Target Platform**: Web Browser (Responsive)
|
|
**Project Type**: Web application (Frontend)
|
|
**Performance Goals**: Instant language switching, zero layout shift
|
|
**Constraints**: Must support existing pages without breaking layout
|
|
**Scale/Scope**: ~10-15 core UI components, global CSS update
|
|
|
|
## Constitution Check
|
|
|
|
*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
|
|
|
|
- **Semantic Protocol Compliance**: PASS. New Svelte components must follow the Component Header standard.
|
|
- **Causal Validity**: PASS. Design System (Tokens) and Component Contracts will be defined before implementation.
|
|
- **Immutability of Architecture**: PASS. No changes to backend architecture; strictly frontend presentation layer.
|
|
- **Design by Contract**: PASS. Components will define strict props/interfaces.
|
|
- **Everything is a Plugin**: N/A. UI components are not backend plugins, but will be modular.
|
|
|
|
## Project Structure
|
|
|
|
### Documentation (this feature)
|
|
|
|
```text
|
|
specs/[###-feature]/
|
|
├── 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)
|
|
|
|
```text
|
|
frontend/
|
|
├── src/
|
|
│ ├── lib/
|
|
│ │ ├── i18n/ # [NEW] Translation dictionaries and stores
|
|
│ │ └── ui/ # [NEW] Standardized Svelte components
|
|
│ ├── components/ # [EXISTING] To be refactored to use lib/ui
|
|
│ ├── routes/ # [EXISTING] Pages
|
|
│ └── app.css # [EXISTING] Global styles (Tailwind directives)
|
|
```
|
|
|
|
**Structure Decision**: Adopting a standard SvelteKit structure where reusable UI components and logic (i18n) reside in `src/lib`, accessible via `$lib` alias. Existing `components` directory will be gradually refactored or moved to `lib/ui` if generic enough.
|
|
|
|
## 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] |
|