fix: CI check passes #279
fix: CI check passes #279
Conversation
WalkthroughThis change set removes all references, configuration, and code related to "paraglide" from the control panel infrastructure. It deletes relevant source files, updates configuration files to eliminate paraglide-specific settings, and reverts language and localization logic to defaults. Minor related adjustments to HTML, CSS, and build scripts are also included. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant SvelteKitApp
Note over SvelteKitApp: Previous flow (with paraglide)
Browser->>SvelteKitApp: HTTP Request
SvelteKitApp->>paraglideMiddleware: Process request for localization
paraglideMiddleware->>SvelteKitApp: Modified event/request, locale
SvelteKitApp->>Browser: Response with localized HTML
Note over SvelteKitApp: New flow (after removal)
Browser->>SvelteKitApp: HTTP Request
SvelteKitApp->>Browser: Response with default HTML (lang="en")
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Assessment against linked issues
Suggested reviewers
Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
infrastructure/control-panel/.storybook/main.ts(1 hunks)infrastructure/control-panel/.storybook/preview.ts(1 hunks)infrastructure/control-panel/src/app.css(1 hunks)infrastructure/control-panel/vite.config.ts(1 hunks)platforms/blabsy/src/components/chat/chat-window.tsx(1 hunks)platforms/blabsy/src/lib/hooks/useRequireAuth.ts(1 hunks)platforms/pictique/src/lib/types.ts(1 hunks)platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte(10 hunks)platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte(3 hunks)platforms/pictique/src/routes/(protected)/messages/+page.svelte(1 hunks)
✅ Files skipped from review due to trivial changes (7)
- platforms/pictique/src/routes/(protected)/messages/+page.svelte
- platforms/pictique/src/lib/types.ts
- infrastructure/control-panel/.storybook/preview.ts
- platforms/blabsy/src/lib/hooks/useRequireAuth.ts
- platforms/pictique/src/routes/(protected)/group/[id]/members/+page.svelte
- infrastructure/control-panel/.storybook/main.ts
- platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
🚧 Files skipped from review as they are similar to previous changes (1)
- infrastructure/control-panel/vite.config.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: in tailwind css v4, the traditional directive system has been removed. the `@tailwind base` directiv...
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/app.css:1-1
Timestamp: 2025-05-08T08:47:11.295Z
Learning: In Tailwind CSS v4, the traditional directive system has been removed. The `tailwind base` directive should be replaced with `import "tailwindcss/preflight";` for just base styles, or `import "tailwindcss";` to include all layers (preflight, components, and utilities).
Applied to files:
infrastructure/control-panel/src/app.css
📚 Learning: in tailwind css v4, the traditional `@tailwind base` directive is no longer available and should be ...
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/app.css:1-1
Timestamp: 2025-05-08T08:47:11.295Z
Learning: In Tailwind CSS v4, the traditional `tailwind base` directive is no longer available and should be replaced with `import "tailwindcss/preflight"` instead. The directive system has been changed in v4 to use direct imports.
Applied to files:
infrastructure/control-panel/src/app.css
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
package.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/hooks.server.ts:2-2
Timestamp: 2025-05-08T08:50:11.515Z
Learning: For Paraglide v2.0.0, files must be generated by running the build process before importing from `$lib/paraglide/server`. Before generation, the direct import path is `inlang/paraglide-js/runtime/server`.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte (1)
56-58: Consider separating the statements for better readability.The comma operator works but separating the statements into distinct lines would be clearer and more maintainable.
Apply this diff to improve readability:
onclick={(e) => { - e.preventDefault(), openMenu(); + e.preventDefault(); + openMenu(); }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
platforms/blabsy/package.json(1 hunks)platforms/blabsy/src/components/chat/add-members.tsx(15 hunks)platforms/blabsy/src/components/chat/chat-list.tsx(1 hunks)platforms/blabsy/src/components/chat/chat-window.tsx(7 hunks)platforms/blabsy/src/components/chat/member-list.tsx(6 hunks)platforms/blabsy/src/components/sidebar/mobile-sidebar.tsx(1 hunks)platforms/blabsy/src/lib/context/auth-context.tsx(1 hunks)platforms/pictique/src/declaration.d.ts(1 hunks)platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte(1 hunks)platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte(1 hunks)
✅ Files skipped from review due to trivial changes (7)
- platforms/pictique/src/declaration.d.ts
- platforms/blabsy/src/components/sidebar/mobile-sidebar.tsx
- platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte
- platforms/blabsy/src/components/chat/chat-list.tsx
- platforms/blabsy/src/lib/context/auth-context.tsx
- platforms/blabsy/src/components/chat/add-members.tsx
- platforms/blabsy/src/components/chat/member-list.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- platforms/blabsy/src/components/chat/chat-window.tsx
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/hooks.server.ts:2-2
Timestamp: 2025-05-08T08:50:11.515Z
Learning: For Paraglide v2.0.0, files must be generated by running the build process before importing from `$lib/paraglide/server`. Before generation, the direct import path is `inlang/paraglide-js/runtime/server`.
📚 Learning: 2025-05-08T08:40:51.710Z
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/lib/ui/Button/Button.svelte:83-83
Timestamp: 2025-05-08T08:40:51.710Z
Learning: In Svelte 5, event handlers should use lowercase DOM-style attributes (e.g., `onclick={handler}`) rather than the Svelte 3/4 syntax with the `on:` prefix (e.g., `on:click={handler}`). The `on:` syntax is deprecated in Svelte 5 though still supported for backward compatibility.
Applied to files:
platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte
📚 Learning: 2025-05-08T08:40:51.710Z
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/lib/ui/Button/Button.svelte:83-83
Timestamp: 2025-05-08T08:40:51.710Z
Learning: In Svelte 5, event handlers can be written using the lowercase DOM-style attributes (e.g., `onclick`) rather than the Svelte 3/4 syntax with the `on:` prefix (e.g., `on:click`). Both syntaxes are supported, but `onclick` is the newer approach introduced in Svelte 5.
Applied to files:
platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte
🔇 Additional comments (1)
platforms/blabsy/package.json (1)
11-12: Clarify intent of switchingformatfrom “check” to “write”
prettier --writemutates source files; it exits with a 0 status even when it edits content.
If your CI pipeline previously relied onnpm run formatfailing when code was mis-formatted, this change will make the check ineffective and could let unformatted files merge.Suggested follow-up:
"start": "next start", - "format": "prettier --write .", + "format": "prettier --write .", + "format:check": "prettier --check .",Then have CI call
npm run format:check, while local contributors can still runnpm run formatfor auto-fixes.
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (2)
platforms/pictique-api/src/controllers/UserController.ts (2)
84-93: Bug:updateProfilecan proceed when user is not found, passingundefinedfields.If
findByIdreturnsnull/undefined, the current code usesuser?.…fallbacks, resulting inundefinedvalues sent toupdateProfile. Return 404 when the user does not exist, then build the payload from either incoming fields or the existing user.Apply this diff:
const user = await this.userService.findById(userId); - const updatedUser = await this.userService.updateProfile(userId, { - handle: handle ?? user?.handle, - avatarUrl: avatar ?? user?.avatarUrl, - name: name ?? user?.name, - }); + if (!user) { + return res.status(404).json({ error: "User not found" }); + } + const payload = { + handle: handle ?? user.handle, + avatarUrl: avatar ?? user.avatarUrl, + name: name ?? user.name, + }; + const updatedUser = await this.userService.updateProfile(userId, payload);
11-13: Ensure safe serialization ofreq.userbefore respondingThe
Requestinterface is correctly augmented inplatforms/pictique-api/src/types/express.d.tsto includeuser?: User. However, returningreq.userdirectly will serialize all of its properties—including any sensitive or internal fields (e.g. email, tokens, roles). We should explicitly select only the public-facing fields or apply a serialization layer/DTO.• File: platforms/pictique-api/src/controllers/UserController.ts
• Lines: 11–13Suggestion:
- res.json(req.user); + const user = req.user; + if (!user) { + return res.status(401).json({ error: 'Unauthorized' }); + } + // Only expose public profile fields + const publicProfile = { + id: user.id, + handle: user.handle, + avatarUrl: user.avatarUrl, + name: user.name, + }; + res.json(publicProfile);– Verify any new fields added to
Userare intentionally exposed.
– If you have a central serializer/service, consider using that instead of inlining the mapping.
🧹 Nitpick comments (8)
platforms/pictique-api/src/controllers/UserController.ts (2)
53-73: Optional: strengthen follow invariants (self-follow and idempotency).Consider blocking self-follow and making the operation idempotent (no-op if already following).
Example:
const followerId = req.user?.id; const { id: followingId } = req.params; if (!followerId || !followingId) { return res.status(400).json({ error: "Missing required fields" }); } + if (followerId === followingId) { + return res.status(400).json({ error: "Cannot follow yourself" }); + }
16-33: Minor: centralize async error handling to reduce repetitive try/catch blocks.You can wrap handlers with an
asyncHandlerto forward errors to Express’ error middleware, improving readability and consistency.Example (outside this range):
// utils/asyncHandler.ts export const asyncHandler = <P, ResBody, ReqBody, ReqQuery>( fn: (req: Request<P, ResBody, ReqBody, ReqQuery>, res: Response, next: NextFunction) => Promise<unknown>, ) => (req: Request, res: Response, next: NextFunction) => Promise.resolve(fn(req, res, next)).catch(next);Then:
getProfileById = asyncHandler(async (req, res) => { ... });Also applies to: 35-51, 53-73, 75-97
platforms/pictique/src/routes/(protected)/settings/+page.svelte (3)
39-41: Add status semantics and avoid layout shift for loading stateReserve height and announce loading politely to AT.
- <div class="flex h-12 items-center justify-center"> + <div class="flex min-h-12 items-center justify-center" role="status" aria-live="polite">
43-45: Use alert semantics for error state (and mirror min height)Ensures errors are announced assertively and height remains stable.
- <div class="flex h-12 items-center justify-center"> + <div class="flex min-h-12 items-center justify-center" role="alert" aria-live="assertive">
49-49: Standardize nullish fallback for avatar URLThe default asset
/images/user.pngexists understatic/images/user.png. Across the codebase only two instances still use|| '/images/user.png'(all others use??):• platforms/pictique/src/routes/(protected)/+layout.svelte (line 104)
• platforms/pictique/src/routes/(protected)/settings/+page.svelte (line 49)Please confirm how your backend represents “no avatar” (null/undefined vs. empty/whitespace string) and then pick one:
Option A — only nullish fallback (preferred if the API never returns empty strings):
- profileSrc={profile?.avatarUrl || '/images/user.png'} + profileSrc={profile?.avatarUrl ?? '/images/user.png'}Option B — treat blank/whitespace as missing too (if the API can return empty strings):
- profileSrc={profile?.avatarUrl || '/images/user.png'} + profileSrc={profile?.avatarUrl?.trim() ? profile.avatarUrl : '/images/user.png'}(Optional) You might also centralize the default avatar URL in a shared constant to avoid drift.
platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte (1)
3-3: Remove unused Textarea import to keep CI/lint green
Textareaisn’t used in this file; drop it or use it.- import { Button, Input, Label, Textarea } from '$lib/ui'; + import { Button, Input, Label } from '$lib/ui';platforms/pictique/src/lib/types.ts (2)
84-101: Inconsistent naming & missing reuse inChat– Top-level uses
avatarwhile nestedparticipantsuseavatarUrl.
–participantsstructure duplicated ad-hoc; consider extracting aParticipanttype for reuse across chat/message modules.
–latestMessageomits acreatedAttimestamp, which most timeline UIs require.Tighten the model now before it propagates.
103-111:MessageTypeoverlaps existing models
MessageTyperepeatsavatar,handle,name,usernamealready present inuserProfile/Participant. Prefer composition over duplication to keep future changes bounded.Example quick win:
-export type MessageType = { - id: string; - avatar: string; - handle: string; - … -}; +export interface Message extends Pick<Participant, 'id' | 'avatarUrl' | 'handle' | 'name'> { + unread: boolean; + text: string; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
infrastructure/control-panel/src/app.css(1 hunks)package.json(1 hunks)platforms/pictique-api/src/controllers/UserController.ts(1 hunks)platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte(1 hunks)platforms/pictique/src/lib/icons/index.ts(1 hunks)platforms/pictique/src/lib/stores/disclaimer.ts(1 hunks)platforms/pictique/src/lib/stores/posts.ts(1 hunks)platforms/pictique/src/lib/types.ts(2 hunks)platforms/pictique/src/routes/(protected)/+layout.svelte(3 hunks)platforms/pictique/src/routes/(protected)/home/+page.svelte(2 hunks)platforms/pictique/src/routes/(protected)/messages/+page.svelte(4 hunks)platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte(1 hunks)platforms/pictique/src/routes/(protected)/settings/+page.svelte(1 hunks)platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte(2 hunks)
✅ Files skipped from review due to trivial changes (6)
- platforms/pictique/src/lib/icons/index.ts
- infrastructure/control-panel/src/app.css
- platforms/pictique/src/lib/stores/posts.ts
- platforms/pictique/src/lib/stores/disclaimer.ts
- platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte
- platforms/pictique/src/routes/(protected)/+layout.svelte
🚧 Files skipped from review as they are similar to previous changes (3)
- package.json
- platforms/pictique/src/routes/(protected)/messages/+page.svelte
- platforms/pictique/src/routes/(protected)/home/+page.svelte
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/hooks.server.ts:2-2
Timestamp: 2025-05-08T08:50:11.515Z
Learning: For Paraglide v2.0.0, files must be generated by running the build process before importing from `$lib/paraglide/server`. Before generation, the direct import path is `inlang/paraglide-js/runtime/server`.
📚 Learning: 2025-05-08T09:02:43.311Z
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/stories/Button.svelte:0-0
Timestamp: 2025-05-08T09:02:43.311Z
Learning: The project uses Svelte 5, which uses the new "runes" API including $props() for handling component props instead of the export let syntax from Svelte 3/4.
Applied to files:
platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte
📚 Learning: 2025-05-08T09:02:43.311Z
Learnt from: pixel-punk-20
PR: MetaState-Prototype-Project/prototype#121
File: platforms/metagram/src/stories/Button.svelte:0-0
Timestamp: 2025-05-08T09:02:43.311Z
Learning: The project uses Svelte 5, which introduces the new "runes" API including $props() for handling component props instead of the export let syntax from Svelte 3/4.
Applied to files:
platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte
🔇 Additional comments (2)
platforms/pictique-api/src/controllers/UserController.ts (1)
1-1: Good change: type-only import for Express types.Using
import typeavoids emitting a runtime import and aligns with isolated modules/ESM builds. No functional impact here.platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte (1)
118-118: Styling reorder only – no functional impactRe-ordering the Tailwind classes is harmless. ✅
| export type userProfile = { | ||
| userId: string; | ||
| username: string; | ||
| id: string; | ||
| handle: string; | ||
| name: string; | ||
| description: string; | ||
| avatarUrl: string; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Duplicate identity fields create ambiguity
userProfile now exposes both handle and username. Unless you have a clear “old vs. new” migration story, keeping both almost guarantees accidental misuse and brittle mapping code.
• Pick one canonical field (ideally handle) and deprecate/remove the other, or
• Mark the legacy one with a JSDoc @deprecated tag and schedule removal.
Also applies to: 70-70
🏁 Script executed:
#!/bin/bash
# Check the current state of userProfile type definition to see all fields
cat platforms/pictique/src/lib/types.ts | grep -A 20 "export type userProfile"Length of output: 407
🏁 Script executed:
#!/usr/bin/env bash
# Search for .username usage across the codebase
rg "\.username\b" -n
# Search for .handle usage across the codebase
rg "\.handle\b" -nLength of output: 7490
Deprecate legacy username in favor of handle
The userProfile type and UI code currently expose both username and handle, leading to ambiguity and the risk of inconsistent usage:
• platforms/pictique/src/lib/types.ts – userProfile defines both handle and username
• platforms/pictique/src/lib/fragments/Profile/Profile.svelte – uses profileData.username (alt/text) and profileData.handle (heading)
• platforms/pictique/src/lib/fragments/PostModal/PostModal.svelte – uses comment.author.handle
• platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte – references both profile?.username and profile?.handle
• platforms/pictique/src/routes/(protected)/messages/+page.svelte – renders message.username and message.handle in different contexts
• platforms/pictique/src/routes/(protected)/home/+page.svelte & +layout.svelte – intermix post.author.handle and legacy post.author.username
Please pick one canonical identity field (preferably handle), annotate the legacy field with a JSDoc @deprecated tag, and schedule its removal once all usages have been updated.
🤖 Prompt for AI Agents
In platforms/pictique/src/lib/types.ts around lines 60 to 65, the userProfile
type defines both handle and username, causing ambiguity. Mark the username
field with a JSDoc @deprecated annotation to indicate it is legacy and should
not be used. Keep handle as the canonical identity field. Plan to remove
username after updating all code references to use handle exclusively.
| @@ -51,6 +51,7 @@ | |||
| const { data } = await apiClient.get('/api/users'); | |||
| handle = data.handle; | |||
| name = data.name; | |||
| profileImageDataUrl = data.avatarUrl; | |||
| }); | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Initialize avatar preview with a safe fallback and verify API contract
If data.avatarUrl can be null/empty, set a default to align with other pages. Also confirm PATCH uses expected field (avatar vs avatarUrl).
- profileImageDataUrl = data.avatarUrl;
+ profileImageDataUrl = data?.avatarUrl || '/images/user.png';Optional: only send avatar when changed to reduce payload/avoid unintended overwrites:
// Track initial value after onMount
let initialAvatar = $state('');
onMount(async () => {
const { data } = await apiClient.get('/api/users');
// ...
profileImageDataUrl = data?.avatarUrl || '/images/user.png';
initialAvatar = profileImageDataUrl;
});
// In saveProfileData()
const payload: Record<string, unknown> = { handle, name };
if (profileImageDataUrl !== initialAvatar) payload.avatar = profileImageDataUrl;
await apiClient.patch('/api/users/', payload);🏁 Script executed:
#!/usr/bin/env bash
# 1) Check for any usage of Textarea to decide whether to keep/remove import.
rg -n "Textarea" -S || true
echo
# 2) Confirm default avatar asset existence and path pattern consistency.
fd -i -a 'user.png'
rg -n --fixed-strings "/images/user.png" || true
echo
# 3) Sanity-check API field naming consistency across codebase.
rg -n "\bavatarUrl\b" || true
rg -n "\bavatar\b" || trueLength of output: 25820
🏁 Script executed:
#!/usr/bin/env bash
# Inspect how the PATCH payload is constructed in the username settings page
rg -n -C3 "apiClient\.patch" 'platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte' || trueLength of output: 275
🏁 Script executed:
#!/usr/bin/env bash
# Check if Textarea component is used in the username settings page
rg -n "<Textarea" 'platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte' || echo "no usage"Length of output: 129
Initialize avatar preview with safe default & remove unused Textarea import
- In
platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte:- Remove
Textareafrom the top‐level import (it isn’t used). - Change the on-mount avatar assignment from
- profileImageDataUrl = data.avatarUrl; + profileImageDataUrl = data?.avatarUrl || '/images/user.png';
- The PATCH payload already uses
avatar(notavatarUrl), which matches the backend controller:await apiClient.patch('/api/users/', { handle, - avatar: profileImageDataUrl, + avatar: profileImageDataUrl, name });
- Remove
- Optional optimization: track the initial avatar URL and only include
avatarin the payload if it has actually changed, to avoid redundant updates.let initialAvatar = ''; onMount(async () => { const { data } = await apiClient.get('/api/users'); profileImageDataUrl = data?.avatarUrl || '/images/user.png'; initialAvatar = profileImageDataUrl; }); async function saveProfileData() { const payload = { handle, name }; if (profileImageDataUrl !== initialAvatar) { payload.avatar = profileImageDataUrl; } await apiClient.patch('/api/users/', payload); }
🤖 Prompt for AI Agents
In
platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte
at line 55, remove the unused Textarea import at the top of the file. Initialize
the avatar preview with a safe default by setting profileImageDataUrl to
data.avatarUrl or a fallback image like '/images/user.png' on mount. Track the
initial avatar URL in a variable (e.g., initialAvatar) and modify the
saveProfileData function to include the avatar field in the PATCH payload only
if the avatar has changed, avoiding redundant updates.
Description of change
Ensures CI checks pass on the latest build
Issue Number
Closes #280
Type of change
How the change has been tested
Manually.
Change checklist
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores
Style
Documentation