Nt 34 profile page

.cursor/rules/project-standards.mdc

@@ -0,0 +1,17 @@
+---
+description: Standards for Notes & Todos React/Firebase codebase
+alwaysApply: true
+---
+
+# Notes & Todos Engineering Rules
+
+- Keep components small and focused; extract logic into hooks before components become large.
+- Use named exports by default; use default export only when framework/API requires it.
+- Use kebab-case for file names.
+- Do not add new UI or data libraries without checking the existing stack first.
+- Avoid manual memoization unless required by external libraries.
+- Fix type errors immediately; do not bypass with `any` or unsafe casts.
+- Validate form and data boundaries with Zod where applicable.
+- Keep Firebase access in dedicated data/query layers (`src/rq`, hooks), not inline in presentation components.
+- Prefer optimistic updates with rollback for write operations affecting lists.
+- Add or update tests for behavior changes (unit/integration first; e2e for critical flows).

.vscode/settings.json

@@ -1,22 +1,31 @@
 {
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#6699af",
-    "activityBar.background": "#6699af",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#e9d5e3",
-    "activityBarBadge.foreground": "#15202b",
-    "commandCenter.border": "#e7e7e799",
-    "sash.hoverBorder": "#6699af",
-    "statusBar.background": "#4e7f94",
-    "statusBar.foreground": "#e7e7e7",
-    "statusBarItem.hoverBackground": "#6699af",
-    "statusBarItem.remoteBackground": "#4e7f94",
-    "statusBarItem.remoteForeground": "#e7e7e7",
-    "titleBar.activeBackground": "#4e7f94",
-    "titleBar.activeForeground": "#e7e7e7",
-    "titleBar.inactiveBackground": "#4e7f9499",
-    "titleBar.inactiveForeground": "#e7e7e799"
-  },
-  "peacock.color": "#4e7f94"
+	"workbench.colorCustomizations": {
+		"activityBar.activeBackground": "#6699af",
+		"activityBar.background": "#6699af",
+		"activityBar.foreground": "#15202b",
+		"activityBar.inactiveForeground": "#15202b99",
+		"activityBarBadge.background": "#e9d5e3",
+		"activityBarBadge.foreground": "#15202b",
+		"commandCenter.border": "#e7e7e799",
+		"sash.hoverBorder": "#6699af",
+		"statusBar.background": "#4e7f94",
+		"statusBar.foreground": "#e7e7e7",
+		"statusBarItem.hoverBackground": "#6699af",
+		"statusBarItem.remoteBackground": "#4e7f94",
+		"statusBarItem.remoteForeground": "#e7e7e7",
+		"titleBar.activeBackground": "#4e7f94",
+		"titleBar.activeForeground": "#e7e7e7",
+		"titleBar.inactiveBackground": "#4e7f9499",
+		"titleBar.inactiveForeground": "#e7e7e799"
+	},
+	"peacock.color": "#4e7f94",
+	"editor.fontFamily": "'JetBrainsMono Nerd Font','CaskaydiaCove Nerd Font','Iosevka Nerd Font','FiraCode2iScript', 'Monaco for Powerline',Consolas, monospace",
+	"editor.fontLigatures": "'calt', 'liga', 'dlig', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08', 'ss09', 'ss10', 'ss11', 'ss12', 'ss13', 'ss14', 'ss15', 'ss16', 'ss17', 'ss18', 'ss19', 'zero'",
+	"editor.fontSize": 14,
+	"editor.lineHeight": 1.65,
+	"editor.fontWeight": "400",
+	"terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font Mono'",
+	"editor.allowVariableFonts": true,
+	"editor.letterSpacing": 0,
+	"editor.defaultFoldingRangeProvider": "biomejs.biome"
 }

README.md

@@ -1,15 +1,83 @@
-This site provides you with place to keep your notes and todos lost in a convenient way. 
-Try it at:  https://notesandtodos.netlify.app
+# Notes & Todos
 
-This project is a web application for managing notes and todos. It is built using React and TypeScript, with Vite as the build tool. The application leverages several libraries and frameworks, including:
+Personal productivity app for managing notes and todos with authentication, profile settings, and fast UI interactions.
 
-Mantine: For UI components and styling. TanStack Router: For routing. TanStack Query: For data fetching and state management. The project structure includes components, hooks, and routes organized in a modular fashion. The main features include:
+## Tech Stack
 
-Notes and Todos Management: Users can add, update, and remove notes and todos. 
-Prefetching Data: Data for notes and todos is prefetched to improve performance. 
-Routing: The application uses a nested routing structure to manage different views and layouts. 
+- React 18 + TypeScript
+- Vite
+- Mantine UI
+- TanStack Router (file-based routing)
+- TanStack Query (server/cache state)
+- TanStack Form + Zod
+- Firebase:
+  - Authentication
+  - Firestore
+  - Storage
 
-Components: Contains reusable UI components. 
-Hooks: Contains custom hooks for data fetching and state management. 
-Routes: Contains route definitions and components for different views.
-The application is designed to be responsive and user-friendly, providing a seamless experience for managing personal notes and todos.
+## Core Features
+
+- Sign up / sign in / reset password / email verification
+- Protected routes for authenticated users
+- CRUD for notes and todos
+- Optimistic updates for smoother UX
+- Prefetching notes/todos for faster navigation
+- User settings (display name, avatar upload)
+- Notifications for async operation feedback
+
+## Project Structure
+
+- `src/routes` - route definitions and page-level UI
+- `src/components` - UI components (atoms/molecules/organizms/templates)
+- `src/hooks` - app logic (auth, CRUD mutations, prefetching, context hooks)
+- `src/rq` - query options + collection management functions
+- `src/context` - auth/view providers
+- `src/database` - Firebase initialization
+- `src/types` - Zod schemas and TypeScript types
+
+## Environment Variables
+
+Create `.env` with Firebase values (used in `src/database/database.ts`):
+
+- `VITE_APP_API_KEY`
+- `VITE_APP_AUTH_DOMAIN`
+- `VITE_APP_DATABASE_URL`
+- `VITE_APP_PROJECT_ID`
+- `VITE_APP_STORAGE_BUCKET`
+- `VITE_APP_MESSAGING_SENDER_ID`
+- `VITE_APP_APP_ID`
+- `VITE_APP_MEASUREMENT_ID`
+
+## Scripts
+
+- `npm run start` - start dev server
+- `npm run build` - type-check + production build
+- `npm run serve` - preview production build
+- `npm run test` - run tests (Vitest)
+- `npm run test:coverage` - coverage run
+
+## Getting Started
+
+1. Install dependencies:
+   - `npm install`
+2. Add `.env` variables.
+3. Start the app:
+   - `npm run start`
+
+## Routing Model
+
+- Public/auth onboarding routes: `/login`, `/signin`, `/signup`, `/reset-password`, `/verify-email`
+- Protected routes under `/_auth` require a verified user
+- Main application views include notes, todos, profile/settings
+
+## Data Model (high level)
+
+- Firestore path per user: `users/{uid}/notes` and `users/{uid}/todos`
+- `Note`: `id`, `title`, `content`, `createdOn`
+- `Todo`: `id`, `title`, `content`, `createdOn`, `completed`, `deadline`
+
+## Current Status / Known Gaps
+
+- No test suite implemented yet (despite test tooling being configured)
+- Some TODO markers remain in app code
+- Build/dependency config can be streamlined in the next refactor phase

cors.json

@@ -0,0 +1,8 @@
+[
+  {
+    "origin": ["*"],
+    "method": ["GET", "POST", "PUT", "DELETE"],
+    "maxAgeSeconds": 3600,
+    "responseHeader": ["Content-Type", "Authorization"]
+  }
+]

docs/rebuild-upgrade-plan.md

@@ -0,0 +1,145 @@
+# Rebuild and Upgrade Plan
+
+This document defines a phased, low-risk strategy to improve code quality, delivery confidence, and maintainability without blocking feature work.
+
+## Goals
+
+- Stabilize build and dependency hygiene.
+- Standardize architecture patterns across routes, hooks, and data access.
+- Introduce reliable automated testing.
+- Improve UX resilience (error, loading, and async edge cases).
+- Enable predictable, incremental upgrades.
+
+## Guiding Principles
+
+- Prefer small, independently releasable pull requests.
+- Keep refactors separate from feature changes.
+- Maintain behavior parity unless a change is explicitly approved.
+- Add tests for each critical user flow touched.
+
+## Phase 0 - Baseline and Safety (1-2 days)
+
+### Phase 0 Deliverables
+
+- Reproducible local setup instructions and env variable checklist.
+- Baseline runbook for:
+  - `npm run build`
+  - `npm run test`
+  - `npm run test:coverage`
+- Single package manager decision (`npm` or `pnpm`) with one lockfile as source of truth.
+
+### Phase 0 Exit Criteria
+
+- The app builds locally from a clean clone.
+- Team can run core commands without local guesswork.
+
+## Phase 1 - Tooling and Config Hygiene (2-4 days)
+
+### Phase 1 Deliverables
+
+- Remove duplicated/unused bundler plugin imports and config drift.
+- Keep runtime dependencies and dev dependencies clearly separated.
+- Add CI checks for typecheck, lint, and tests on every pull request.
+- Document contribution workflow and local quality gates.
+
+### Phase 1 Exit Criteria
+
+- CI fails fast on regressions in typing, lint, or tests.
+- Config is minimal and unambiguous.
+
+## Phase 2 - Architecture Stabilization (4-7 days)
+
+### Phase 2 Deliverables
+
+- Formalize data access conventions for Firebase operations.
+- Consolidate error mapping and notification behavior in async workflows.
+- Standardize form handling pattern (TanStack Form + Zod).
+- Keep route files focused on composition, move logic into hooks/services.
+
+### Phase 2 Exit Criteria
+
+- New code follows one predictable shape for auth, data fetching, and mutations.
+- Reduced duplication in form and mutation logic.
+
+## Phase 3 - Test Foundation (4-6 days)
+
+### Phase 3 Deliverables
+
+- Unit tests for critical hooks:
+  - auth
+  - collection mutations
+  - query option factories
+- Integration tests for core flows:
+  - sign in
+  - create/edit/delete note
+  - create/edit/delete todo
+- One e2e smoke test for login-to-action path.
+
+### Phase 3 Exit Criteria
+
+- Core user journeys are covered by automated tests.
+- Regressions are caught before merge.
+
+## Phase 4 - UX and Reliability Hardening (3-5 days)
+
+### Phase 4 Deliverables
+
+- Improve error boundaries and fallback UI consistency.
+- Strengthen loading state behavior for route transitions and mutations.
+- Add validation/guardrails for profile update and avatar upload edge cases.
+- Review optimistic update rollback correctness in failure scenarios.
+
+### Phase 4 Exit Criteria
+
+- Fewer ambiguous failure states for users.
+- More consistent feedback during async operations.
+
+## Phase 5 - Incremental Dependency Upgrade Track (ongoing)
+
+### Phase 5 Upgrade Order
+
+1. Tooling and lint ecosystem
+2. TanStack libraries
+3. Mantine libraries
+4. Firebase SDK
+
+### Phase 5 Process Per Upgrade Batch
+
+- Upgrade a narrow slice only.
+- Run full verification:
+  - build
+  - tests
+  - manual smoke checks for auth + notes/todos CRUD
+- Record breaking changes and migration notes in this document.
+
+### Phase 5 Exit Criteria
+
+- Upgrades happen continuously with low risk and no long-lived upgrade branch debt.
+
+## Suggested Work Breakdown
+
+- Week 1: Phase 0 + Phase 1
+- Week 2: Phase 2
+- Week 3: Phase 3
+- Week 4: Phase 4
+- Ongoing: Phase 5 in small recurring batches
+
+## Tracking Template
+
+Use this checklist for execution:
+
+- [ ] Phase 0 complete
+- [ ] Phase 1 complete
+- [ ] Phase 2 complete
+- [ ] Phase 3 complete
+- [ ] Phase 4 complete
+- [ ] Phase 5 started
+
+For each phase, track:
+
+- Owner
+- Start date
+- End date
+- Risks
+- Decisions taken
+- Follow-up actions