Fix/author details

[ghost]

Description of change

Fixed Author avatars, persists id in local storage

Issue Number

closes #217

Type of change

• Update (a change which updates existing functionality)
• Fix (a change which fixes an issue)

How the change has been tested

CI and Manual

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This update replaces the global ownerId store with local state managed via new utility functions that interact with localStorage. User profile data is now fetched dynamically in layouts and settings, with avatar URLs updated accordingly. Several components and routes are refactored to use the new profile and authentication ID retrieval methods.

Changes

File(s)	Change Summary
.../BottomNav/BottomNav.svelte .../SideBar/SideBar.svelte .../profile/[id]/+page.svelte	Replaced ownerId store import with local state and getAuthId() utility; updated navigation/profile logic.
.../Profile/Profile.svelte .../types.ts	Changed profile avatar property from avatar to avatarUrl throughout.
.../store/store.svelte.ts	Removed export of ownerId state variable.
.../utils/axios.ts	Added setAuthId, getAuthId, and removeAuthId for managing ownerId in localStorage.
.../routes/(auth)/auth/+page.svelte	Added call to setAuthId on authentication event.
.../routes/(protected)/+layout.svelte	Added dynamic user profile fetching and avatar integration; updated layout logic and state variables.
.../routes/(protected)/profile/+page.svelte	Changed script tag from TypeScript to plain JavaScript.
.../routes/(protected)/settings/+page.svelte	Replaced static user data with async profile fetching and state-driven rendering.
.../routes/(protected)/settings/account/username/+page.svelte	Wrapped profile update in try-catch; added navigation and error handling.
.../routes/+layout.svelte	Removed ownerId store import and assignment.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AuthPage
    participant Utils (axios.ts)
    participant Layout/Sidebar/BottomNav
    participant API

    User->>AuthPage: Login/Authenticate
    AuthPage->>Utils (axios.ts): setAuthId(user.id)
    AuthPage->>Utils (axios.ts): setToken(token)
    AuthPage->>Layout/Sidebar/BottomNav: Navigation
    Layout/Sidebar/BottomNav->>Utils (axios.ts): getAuthId()
    Layout/Sidebar/BottomNav->>API: Fetch user profile (using ownerId)
    API-->>Layout/Sidebar/BottomNav: userProfile (with avatarUrl)
    Layout/Sidebar/BottomNav->>User: Render UI with user data

Loading

Suggested reviewers

• coodos
• sosweetham
• ananyayaya129

Poem

A hop, a leap, a profile fetch,
No more static IDs to catch!
Avatars now shine anew,
With local state and storage too.
Settings, layouts, sidebars bright,
All updated—what a sight!
🐇✨

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 5

🔭 Outside diff range comments (1)

platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte (1)

38-40: Add null check for ownerId before navigation.

The profile navigation could result in "/profile/null" if getAuthId() returns null, which would create an invalid URL.

 if (newTab === 'profile') {
-    goto(`/profile/${ownerId}`);
+    if (ownerId) {
+        goto(`/profile/${ownerId}`);
+    } else {
+        console.warn('Cannot navigate to profile: ownerId is null');
+        // Consider redirecting to auth page or showing error
+    }
 }

🧹 Nitpick comments (8)

platforms/pictique/src/routes/(auth)/auth/+page.svelte (1)

24-25: Approve the authentication flow enhancement with a suggestion for error handling.

The extraction of the user object and storing of the user ID using setAuthId(user.id) properly integrates with the new local state management system. This ensures the authenticated user's ID is available for subsequent operations.

Consider adding error handling for cases where the user object might be missing or malformed:

 const data = JSON.parse(e.data);
-const {user} =  data
-setAuthId(user.id);
+const { user } = data;
+if (user?.id) {
+    setAuthId(user.id);
+} else {
+    console.error('User data missing from authentication response');
+    return;
+}

platforms/pictique/src/lib/utils/axios.ts (2)

38-38: Fix the comment - copy-paste error.

The comment says "remove auth token" but should say "remove auth id".

-// Utility function to remove auth token
+// Utility function to remove auth id

---

29-41: Consider using a constant for the localStorage key.

Similar to how TOKEN_KEY is used for the auth token, consider defining a constant for the "ownerId" key to improve maintainability and prevent typos.

+const OWNER_ID_KEY = 'ownerId';
+
 // Utility function to store auth id
 export const setAuthId = (id: string): void => {
-    localStorage.setItem("ownerId", id);
+    localStorage.setItem(OWNER_ID_KEY, id);
 };

 export const getAuthId = () => {
-    return localStorage.getItem("ownerId");
+    return localStorage.getItem(OWNER_ID_KEY);
 };

 // Utility function to remove auth id
 export const removeAuthId = (): void => {
-    localStorage.removeItem("ownerId");
+    localStorage.removeItem(OWNER_ID_KEY);
 };

platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte (1)

49-51: Consider optimizing the effect dependency.

The effect runs on every cycle, but getAuthId() likely only needs to run when the component mounts or when the auth state changes. Consider adding a dependency or using a different approach.

 $effect(() => {
-    ownerId = getAuthId()
+    ownerId = getAuthId();
     activeTab = _activeTab.split('/').pop() ?? '';
     // ... rest of effect logic
 });

Alternatively, consider initializing ownerId directly:

-let ownerId: string | null = $state(null);
+let ownerId: string | null = $state(getAuthId());

platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte (1)

23-25: Consider optimizing the effect to run only when necessary.

The effect runs on every cycle, but getAuthId() likely only needs to run when the component mounts or when the auth state changes.

Consider initializing ownerId directly:

-let ownerId: string | null = $state(null);
+let ownerId: string | null = $state(getAuthId());

Or add proper dependencies to the effect to control when it runs.

platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte (1)

22-22: Remove debug console.log statement.

This debug statement should be removed before merging to production as it may expose sensitive user data and creates unnecessary console noise.

-			console.log(JSON.stringify(profile));

platforms/pictique/src/routes/(protected)/+layout.svelte (2)

88-88: Simplify complex grid layout logic.

The grid class logic is quite complex and hard to read. Consider extracting this into a computed value or function for better maintainability:

+	const gridClass = $derived(() => {
+		const isThreeColumn = route === '/home' || route === '/messages' || route === '/profile' || route.includes('settings') || route.includes('/profile');
+		return `block h-[100dvh] ${isThreeColumn ? 'grid-cols-[20vw_auto_30vw]' : 'grid-cols-[20vw_auto]'} md:grid`;
+	});
+
 <main
-	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && !route.includes('settings') && !route.includes('/profile') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+	class={gridClass}
 >

---

75-82: Consider exposing profile loading errors to the UI.

Currently, profile fetch errors are only logged to the console. Consider whether users should be notified of profile loading failures, especially since the avatar won't be displayed without the profile data.

 async function fetchProfile() {
 	try {
 		const response = await apiClient.get(`/api/users/${ownerId}`);
 		profile = response.data;
 	} catch (err) {
-		console.log(err instanceof Error ? err.message : 'Failed to load profile');
+		console.error('Failed to load profile:', err instanceof Error ? err.message : 'Unknown error');
+		// Consider: Should we show a toast notification or fallback avatar?
 	}
 }

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 35798e7 and 9010f78.

📒 Files selected for processing (13)

• platforms/pictique/src/lib/fragments/BottomNav/BottomNav.svelte (2 hunks)
• platforms/pictique/src/lib/fragments/Profile/Profile.svelte (1 hunks)
• platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte (4 hunks)
• platforms/pictique/src/lib/store/store.svelte.ts (1 hunks)
• platforms/pictique/src/lib/types.ts (1 hunks)
• platforms/pictique/src/lib/utils/axios.ts (1 hunks)
• platforms/pictique/src/routes/(auth)/auth/+page.svelte (2 hunks)
• platforms/pictique/src/routes/(protected)/+layout.svelte (5 hunks)
• platforms/pictique/src/routes/(protected)/profile/+page.svelte (1 hunks)
• platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte (4 hunks)
• platforms/pictique/src/routes/(protected)/settings/+page.svelte (1 hunks)
• platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte (2 hunks)
• platforms/pictique/src/routes/+layout.svelte (1 hunks)

🔇 Additional comments (12)

platforms/pictique/src/lib/types.ts (1)

37-37: ```shell
#!/bin/bash

Broad search across all source files for any .avatar property access not followed by Url

rg --pcre2 -A3 -B3 '.avatar\b(?!Url)' || echo "✔ No leftover .avatar accesses detected"

Fallback: list every .avatar usage and exclude those referencing avatarUrl

rg '.avatar\b' | grep -v 'avatarUrl' || echo "✔ No leftover .avatar occurrences"

Check for any avatar property declarations in types (excluding avatarUrl)

rg 'avatar:' | grep -v 'avatarUrl' || echo "✔ No remaining avatar property declarations"

</details>
<details>
<summary>platforms/pictique/src/routes/(protected)/profile/+page.svelte (1)</summary>

`1-2`: ```shell
#!/bin/bash
# Description: Accurately count and sample TypeScript vs vanilla JS usage in Svelte components

# Count Svelte files using TypeScript
ts_count=$(find . -type f -name '*.svelte' -exec grep -l '<script lang="ts">' {} \; | sort -u | wc -l)
# Count Svelte files using plain <script> without lang attribute
js_count=$(find . -type f -name '*.svelte' -exec grep -H '<script>' {} \; | grep -v 'lang=' | cut -d: -f1 | sort -u | wc -l)

echo "TypeScript Svelte components: $ts_count"
echo "Vanilla JS Svelte components: $js_count"

echo -e "\nExamples of TypeScript usage:"
find . -type f -name '*.svelte' -exec grep -l '<script lang="ts">' {} \; | sort -u | head -5

echo -e "\nExamples of vanilla JavaScript usage:"
find . -type f -name '*.svelte' -exec grep -H '<script>' {} \; | grep -v 'lang=' | cut -d: -f1 | sort -u | head -5

platforms/pictique/src/lib/fragments/Profile/Profile.svelte (1)

16-16: LGTM! Property usage correctly updated.

The change from profileData.avatar to profileData.avatarUrl is consistent with the type definition update and maintains proper null-safety with the fallback URL.

platforms/pictique/src/routes/+layout.svelte (1)

3-3: ```shell
#!/bin/bash

Description: Re–verify removal of global ownerId and usage of new getAuthId utility

Search for any remaining global ownerId store references

rg 'ownerId.' -g '.svelte' -g '.ts' -g '*.js'

Search for getAuthId usage in components

rg 'getAuthId(' -g '.svelte' -g '.ts' -g '*.js' -A 2

</details>
<details>
<summary>platforms/pictique/src/routes/(auth)/auth/+page.svelte (1)</summary>

`4-4`: **LGTM! Import updated to include new utility function.**

The addition of `setAuthId` to the imports properly supports the new authentication ID management approach.

</details>
<details>
<summary>platforms/pictique/src/lib/store/store.svelte.ts (1)</summary>

`21-21`: **LGTM! Formatting improvement.**

The removal of the trailing newline improves code consistency.


Note: The AI summary mentions removal of `ownerId` export, but this is not visible in the annotated code (which only shows the final state).


> Likely an incorrect or invalid review comment.

</details>
<details>
<summary>platforms/pictique/src/routes/(protected)/settings/account/username/+page.svelte (1)</summary>

`31-31`: ```shell
#!/bin/bash
# Search for avatarUrl references across all TS, JS, and Svelte files
rg -Hn "avatarUrl" --glob '*.ts' --glob '*.js' --glob '*.svelte'

# Search for avatar field usage in object literals across all TS, JS, and Svelte files
rg -Hn "avatar:" --glob '*.ts' --glob '*.js' --glob '*.svelte'

platforms/pictique/src/lib/fragments/SideBar/SideBar.svelte (1)

164-164: LGTM! Good improvement to use dynamic profile source.

Using the profileSrc prop instead of a hardcoded placeholder URL is a good improvement that allows for dynamic profile images.

platforms/pictique/src/routes/(protected)/settings/+page.svelte (2)

22-33: Good error handling and loading state management.

The fetchProfile function properly handles loading states, error conditions, and success scenarios. The error handling gracefully converts unknown errors to strings and provides meaningful feedback to users.

---

41-58: Excellent conditional rendering with proper fallbacks.

The template correctly handles all three states (loading, error, success) with appropriate user feedback. The use of optional chaining (profile?.avatarUrl, profile?.handle, profile?.description) prevents runtime errors if profile data is incomplete.

platforms/pictique/src/routes/(protected)/profile/[id]/+page.svelte (1)

42-42: Good defensive programming with optional chaining.

The addition of optional chaining (profile?.username) prevents potential runtime errors when the profile data is not yet loaded or is incomplete.

platforms/pictique/src/routes/(protected)/+layout.svelte (1)

91-91: Excellent dynamic avatar integration.

The dynamic passing of profile?.avatarUrl to both SideBar and BottomNav components properly replaces static placeholders with live user data. The optional chaining and nullish coalescing provide good fallbacks.

Also applies to: 167-167