feat(avatar): implement avatar upload in settings

[Peolite001]

fix(avatar): address PR review — build, auth, multipart, nav surface

Closes #13

Summary

Addresses all review feedback from @ogazboiz on the avatar upload implementation:

1. Build fixes — removes duplicate imports, undefined references, and missing module imports
2. Real authentication — wires authToken from useUserStore instead of undefined getToken() placeholder
3. Correct multipart handling — lets the browser set Content-Type with proper boundary instead of clobbering it
4. Real upload progress — replaces simulated progress with XMLHttpRequest upload.progress events
5. Avatar surfacing — renders avatar in Header and Sidebar, not just Settings

Changes

Fixed Files

File	Fix
src/app/stores/useUserStore.ts	Removed duplicate import { create } (lines 16, 19); made name and avatarUrl optional
src/app/hooks/useApi.ts	Replaced undefined getToken() with useUserStore.getState().authToken; added useUploadAvatar and useRemoveAvatar hooks with real XHR progress
src/app/components/AvatarUpload.tsx	Replaced cn import from @/lib/utils with inline clsx + tailwind-merge; removed manual Content-Type header; replaced simulated progress with real XHR progress
src/app/stores/stores.test.ts	Added tests for name and avatarUrl optional fields; verified updateUser patches and clears avatar correctly
src/app/components/global_ui/Header.tsx	Added avatar rendering in profile button; navigates to settings on click
src/app/components/global_ui/Sidebar.tsx	Added avatar rendering in user card section

New Files

File	Purpose
src/app/components/Settings.tsx	Settings page composing AvatarUpload with name editing

Review Feedback Addressed

#	Original Issue	Resolution
1	useUserStore.ts:16,19 — duplicate import { create }	Single import at top
2	useApi.ts:1239 — upload calls undefined getToken()	Uses useUserStore.getState().authToken
3	AvatarUpload.tsx:5 — cn from @/lib/utils doesn't exist	Inline cn using clsx + tailwind-merge
4	name/avatarUrl required breaks stores.test.ts:52,67,76	Made both optional
5	Prettier fails on all 5 changed files	All files formatted
6	Progress bar simulated	Real XMLHttpRequest progress events
7	Manual Content-Type: multipart/form-data clobbers boundary	Removed — browser sets boundary
8	Avatar only renders in settings	Added to Header and Sidebar

Validation

npm run lint          # ✅
npx tsc --noEmit      # ✅
npm run test:coverage # ✅
npm run build         # ✅
npm run format        # ✅

[ogazboiz]

solid start, the validation, preview, progress/error ui, remove action and store persistence are all there. but it does not build yet:

1. src/app/stores/useUserStore.ts:16 and :19 - duplicate import { create } from "zustand" (TS2300).
2. src/app/hooks/useApi.ts:1239 - upload calls an undefined getToken() (TS2304, placeholder auth), so the upload would not authenticate.
3. src/app/components/AvatarUpload.tsx:5 - imports cn from @/lib/utils, which does not exist here (TS2307).
4. making name/avatarUrl required on User breaks src/app/stores/stores.test.ts:52,67,76.
5. prettier fails on all 5 changed files.

beyond the build: the progress bar is simulated rather than real upload progress; the hook passes Content-Type: multipart/form-data which clobbers the fetch boundary and will break the multipart body; and the avatar only renders in settings (issue #13 asks for it wherever the user is represented, e.g. header/nav). please fix the build, wire real auth and the remove/upload endpoints, drop the manual multipart content-type, surface the avatar in the nav, and run npm run format.

if you want to keep contributing, join us on Telegram: https://t.me/+DOylgFv1jyJlNzM0