feat: implement user profile page with info - [CU-869awe6gv]

[Hussein-Mohamed1]

No description provided.

[AhmedAmrNabil]

Task linked: CU-869awe6gv User Profile

[habibayman]

Thank you for your work!

1. The "posts" tab in the profile seems to break the navigation. Watch the video:

Screencast.from.2025-10-24.21-24-39.webm

2. It seems like the "likes" tab has also disappeared!

3. Please add a link to the mock user's data to preview the style of the link in the profile.

[github-actions]

Testers Checklist

General

• Validation for every input
• Persistent try/catch blocks
• No lack of documentation
• Localization

Frontend

• Caching (if applicable)
• Responsiveness for all screens
• Loading indicators & skeleton loaders
• Optimistic loading (if applicable)
• No warnings in console

[Hussein-Mohamed1]

Thanks again!

1. [BLOCKING] The tabs in the profile layout are completely broken: all 3 tabs lead to the posts view. and where is even **the fourth tab (likes)** ? 😭

broken-tabs.webm

2. [BLOCKING] I still can't find the preview of having links in the profile. Maybe this screenshot will make it clearer.

3. [BLOCKING] Please fix the tab highlighting for side bar buttons. for more info please check description & demo video in  [fix: use i18n routing prefix strategy - [CU-869b0233f] #45](https://github.com/AhmedAmrNabil/raven-frontend/pull/45)

4. [Blocking] Use the user store I created and that you can find in your branch by solving the merge conflicts above. I will try to leave explanatory comments in the code on how this change should look like. All in all, I'm for sure also available for extra consultation on Discord.

Thanks again!

1. [BLOCKING] The tabs in the profile layout are completely broken: all 3 tabs lead to the posts view. and where is even **the fourth tab (likes)** ? 😭

broken-tabs.webm

2. [BLOCKING] I still can't find the preview of having links in the profile. Maybe this screenshot will make it clearer.

3. [BLOCKING] Please fix the tab highlighting for side bar buttons. for more info please check description & demo video in  [fix: use i18n routing prefix strategy - [CU-869b0233f] #45](https://github.com/AhmedAmrNabil/raven-frontend/pull/45)

4. [Blocking] Use the user store I created and that you can find in your branch by solving the merge conflicts above. I will try to leave explanatory comments in the code on how this change should look like. All in all, I'm for sure also available for extra consultation on Discord.

thank you for your review.
i have resolved these issues, and i am now using the user store.

[habibayman]

Approved, thanks for the patience & work!

A follow up PR will be opened to integrate this part with other standalone user profile features.

[AmrSamy59]

profile cover must maintain aspect ratio and always show the same details on any screen, not revealing more details on smaller screen because of increasing the canvas width

Recording.2025-10-30.215621.mp4

a real refrence from X:

Recording.2025-10-30.215651.mp4

notice the entire section preserves aspect ratio resizing everything including the profile picture.

[AmrSamy59]

profile cover must maintain aspect ratio and always show the same details on any screen, not revealing more details on smaller screen because of increasing the canvas width

Recording.2025-10-30.215621.mp4
a real refrence from X:

Recording.2025-10-30.215651.mp4
notice the entire section preserves aspect ratio resizing everything including the profile picture.

Will be resolved in a later PR (Issue: CU-869b0h7nn)

[github-actions]

Unit Tests Coverage Report

Coverage after merging feat/profile-info into dev will be

63.51%

Coverage Report for Changed Files

File	Stmts	Branches	Funcs	Lines	Uncovered Lines
app/components/SideBar/Left
Tab.vue	89.47%	66.67%	100%	100%	11–12
index.vue	87.50%	50%	100%	100%	23
app/components/SideBar/Right
index.vue	100%	100%	100%	100%
app/components/SideBar/Right/PreviewCard
index.vue	100%	100%	100%	100%
item.vue	100%	100%	100%	100%
app/components/profile
ProfileAvatarSection.vue	100%	100%	100%	100%
ProfileCover.vue	100%	100%	100%	100%
ProfileDetails.vue	100%	100%	100%	100%
ProfileInfo.vue	100%	100%	100%	100%
app/composables
useUserProfile.ts	0%	100%	0%	0%	11, 3, 8
app/layouts
default.vue	100%	100%	100%	100%
profile.vue	94.12%	87.50%	100%	100%	28
app/pages/profile
index.vue	100%	100%	100%	100%
app/pages/profile/[username]
index.vue	100%	100%	100%	100%
app/stores
user.ts	40.74%	12.50%	33.33%	61.54%	45, 45, 45, 57, 59, 59, 59–60, 67, 67, 67, 71
app/utils
cleanUrl.ts	100%	100%	100%	100%
date.ts	100%	100%	100%	100%
index.ts	100%	100%	100%	100%
server/api/users/[username]/profile
index.get.ts	0%	0%	0%	0%	11–14, 16, 16, 16–19, 19–20, 20, 25, 8