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

app/components/SideBar/Left/Tab.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { LeftSidebarTab } from '~~/shared/types/leftsidebar';
-
 const props = defineProps<{
   tab: LeftSidebarTab;
 }>();

app/components/SideBar/Left/index.vue

@@ -1,15 +1,32 @@
 <script lang="ts" setup>
-import { SIDEBAR_TABS } from '~/constants/leftsidebar';
+const userStore = useUserStore();
 </script>
 <template>
   <div class="flex h-screen flex-col items-center xl:items-start">
-    <div class="hover:bg-accent my-2 w-min p-2 hover:rounded-full">
+    <div class="hover:bg-foreground/10 my-2 w-min p-2 hover:rounded-full">
       <NuxtLink to="/">
         <LogoRaven class="h-8 w-8" />
       </NuxtLink>
     </div>
     <div class="mt-2 flex flex-col items-center space-y-3 xl:items-start">
-      <SideBarLeftTab v-for="tab in SIDEBAR_TABS" :key="tab.label" :tab />
+      <SideBarLeftTab :tab="{ label: 'home', icon: 'home', route: '/home' }"></SideBarLeftTab>
+      <SideBarLeftTab
+        :tab="{ label: 'explore', icon: 'search', route: '/explore' }"
+      ></SideBarLeftTab>
+      <SideBarLeftTab
+        :tab="{ label: 'notifications', icon: 'notifications', route: '/notifications' }"
+      ></SideBarLeftTab>
+      <SideBarLeftTab
+        :tab="{ label: 'messages', icon: 'chat', route: '/messages' }"
+      ></SideBarLeftTab>
+      <SideBarLeftTab
+        :tab="{
+          label: 'profile',
+          icon: 'person',
+          route: `/profile/${userStore.user?.username || ''}`,
+        }"
+      ></SideBarLeftTab>
+      <SideBarLeftTab :tab="{ label: 'more', icon: 'more-horiz', route: '#' }"></SideBarLeftTab>
     </div>
   </div>
 </template>

app/components/SideBar/Right/PreviewCard/index.vue

@@ -13,7 +13,7 @@ const props = defineProps({
     </h1>
     <slot />
 
-    <div class="text-primary hover:bg-background cursor-pointer p-3 text-sm">
+    <div class="text-primary hover:bg-foreground/10 cursor-pointer p-3 text-sm">
       {{ $t('rightsidebar.show-more') }}
     </div>
   </div>

app/components/SideBar/Right/PreviewCard/item.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="border-border hover:bg-background cursor-pointer border-b p-3">
+  <div class="border-border hover:bg-foreground/10 cursor-pointer border-b p-3">
     <slot />
   </div>
 </template>

app/components/SideBar/Right/index.vue

@@ -44,7 +44,7 @@ const whoToFollowItems = [
 </script>
 
 <template>
-  <div>
+  <div class="ms-4">
     <!-- preview Card -->
     <SideBarRightPreviewCard :title="$t('rightsidebar.whats-happening.title')">
       <div>

app/components/profile/ProfileAvatarSection.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineProps<{
+  profileImg: string;
+}>();
+</script>
+<template>
+  <div class="mx-4 flex flex-wrap items-center justify-between gap-4">
+    <div>
+      <NuxtImg
+        :src="profileImg"
+        alt="Profile picture"
+        class="-mt-16 size-34 rounded-full border-4 object-contain"
+        loading="eager"
+      />
+    </div>
+    <UiButton variant="outline">{{ $t('profile-info.edit-profile') }}</UiButton>
+  </div>
+</template>

app/components/profile/ProfileCover.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+defineProps<{
+  coverImg: string;
+}>();
+</script>
+<template>
+  <NuxtImg :src="coverImg" alt="Profile Cover" class="h-48 w-full object-cover" loading="eager" />
+</template>

app/components/profile/ProfileDetails.vue

@@ -1,5 +1,14 @@
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+import type { UserProfile } from '~~/shared/types/user';
 
+defineProps<{
+  userProfile: UserProfile;
+}>();
+</script>
 <template>
-  <div class="bg-accent/10 h-[460px]"></div>
+  <div>
+    <ProfileCover :cover-img="userProfile.bannerUrl" />
+    <ProfileAvatarSection :profile-img="userProfile.avatarUrl" />
+    <ProfileInfo :user-profile="userProfile" />
+  </div>
 </template>

app/components/profile/ProfileInfo.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { UserProfile } from '~~/shared/types/user';
+import { formatMonthYear } from '~/utils/date';
+const props = defineProps<{
+  userProfile: UserProfile;
+}>();
+const displayUrl = computed(() => {
+  if (props.userProfile.websiteUrl) {
+    const cleanedUrl = cleanUrl(props.userProfile.websiteUrl);
+    return cleanedUrl.length > 30 ? cleanedUrl.slice(0, 29) + '...' : cleanedUrl;
+  }
+  return '';
+});
+</script>
+<template>
+  <div class="mt-2 flex flex-col">
+    <div class="px-4">
+      <h2 class="text-foreground text-2xl font-bold">{{ userProfile.displayName }}</h2>
+      <p class="text-muted-foreground">{{ userProfile.username }}</p>
+      <p class="mt-2">{{ userProfile.bio }}</p>
+      <div class="mt-2 flex flex-wrap">
+        <a
+          :href="userProfile.websiteUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-brand-blue me-2 flex items-center gap-1 hover:underline"
+        >
+          <Icon class="text-muted-foreground" name="ic:sharp-link" size="18" />
+          {{ displayUrl }}
+        </a>
+
+        <p class="text-muted-foreground flex items-center gap-1">
+          <Icon name="ic:sharp-calendar-month" />
+          {{ $t('profile-info.joined') }}
+          {{ formatMonthYear(userProfile.joinedAt) }}
+        </p>
+      </div>
+      <div class="mt-4 flex space-x-4">
+        <span
+          ><strong>{{ userProfile.followingCount }}</strong>
+          <span class="text-muted-foreground ms-1"> {{ $t('profile-info.following') }} </span>
+        </span>
+        <span
+          ><strong>{{ userProfile.followersCount }}</strong>
+          <span class="text-muted-foreground ms-1"> {{ $t('profile-info.followers') }} </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

app/composables/useUserProfile.ts

@@ -0,0 +1,16 @@
+import type { UserProfile } from '~~/shared/types/user';
+
+export const useUserProfile = (username: string) => {
+  const {
+    data: userProfile,
+    error,
+    pending,
+  } = useFetch<UserProfile>(`/api/users/${username}/profile`, {
+    key: `user-profile-${username}`,
+  });
+  return {
+    userProfile,
+    error,
+    loading: pending,
+  };
+};

app/layouts/default.vue

@@ -6,14 +6,14 @@
       <div class="flex min-h-screen justify-center">
         <div class="flex w-full max-w-7xl sm:justify-center">
           <!-- Left sidebar -->
-          <div class="w-16 flex-shrink-0 sm:w-20 md:w-24 xl:w-64">
+          <div class="w-16 flex-shrink-0 sm:w-16 md:w-24 xl:w-64">
             <div class="sticky top-0">
               <SideBarLeft />
             </div>
           </div>
 
           <!-- Main content -->
-          <main class="border-border flex-1 border-x sm:w-[590px] sm:flex-none md:w-[600px]">
+          <main class="border-border flex-1 border-x sm:w-[560px] sm:flex-none md:w-[600px]">
             <slot />
           </main>
 

app/layouts/profile.vue

@@ -2,36 +2,57 @@
 import ProfileDetails from '~/components/profile/ProfileDetails.vue';
 import Tabs from '@/components/ui/Tabs.vue';
 import Tab from '@/components/ui/Tab.vue';
+import Spinner from '~/components/ui/Spinner.vue';
+
+const route = useRoute();
+const username = computed(() => (route.params.username as string) || 'hussein');
+const profilePath = computed(() => `/profile/${username.value}`);
+const userStore = useUserStore();
+
+onMounted(() => {
+  userStore.fetchUserProfile(username.value);
+});
 </script>
 
 <template>
   <NuxtLayout name="default">
     <!-- Profile header and tabs (sticky across all profile pages) -->
-    <ProfileDetails />
-    <Tabs>
-      <Tab
-        :label="$t('profile.tabs.posts')"
-        route="/profile"
-        :is-active="$route.path === '/profile'"
-      />
-      <Tab
-        :label="$t('profile.tabs.replies')"
-        route="/profile/replies"
-        :is-active="$route.path === '/profile/replies'"
-      />
-      <Tab
-        :label="$t('profile.tabs.media')"
-        route="/profile/media"
-        :is-active="$route.path === '/profile/media'"
-      />
-      <Tab
-        :label="$t('profile.tabs.likes')"
-        route="/profile/likes"
-        :is-active="$route.path === '/profile/likes'"
-      />
-    </Tabs>
+    <div v-if="userStore.loading" class="flex justify-center p-4">
+      <Spinner />
+    </div>
+
+    <div v-else-if="userStore.error" class="text-destructive p-4">
+      {{ userStore.error }}
+    </div>
+
+    <div v-else-if="userStore.user">
+      <ProfileDetails :user-profile="userStore.user" />
+
+      <Tabs>
+        <Tab
+          :label="$t('profile.tabs.posts')"
+          :route="`${profilePath}`"
+          :is-active="$route.path === `${profilePath}`"
+        />
+        <Tab
+          :label="$t('profile.tabs.replies')"
+          :route="`${profilePath}/replies`"
+          :is-active="$route.path === `${profilePath}/replies`"
+        />
+        <Tab
+          :label="$t('profile.tabs.media')"
+          :route="`${profilePath}/media`"
+          :is-active="$route.path === `${profilePath}/media`"
+        />
+        <Tab
+          :label="$t('profile.tabs.likes')"
+          :route="`${profilePath}/likes`"
+          :is-active="$route.path === `${profilePath}/likes`"
+        />
+      </Tabs>
 
-    <!-- Dynamic content from child tab pages -->
-    <slot />
+      <!-- Dynamic content from child tab pages -->
+      <slot />
+    </div>
   </NuxtLayout>
 </template>

app/pages/profile/[username]/index.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Tweet } from '~~/shared/types/tweets';
+import TweetDefaultCard from '@/components/tweet/TweetDefaultCard.vue';
+definePageMeta({
+  layout: 'profile',
+});
+
+const tweets = ref<Tweet[]>([]);
+
+const { data: tweetsData, error } = await useFetch<{ data: Tweet[] }>('/api/tweets');
+tweets.value = tweetsData.value?.data || [];
+
+if (error.value) console.error(error.value);
+</script>
+
+<template>
+  <div class="p-2">
+    <div v-if="tweets.length > 0" class="mb-4">
+      <div class="mt-4 flex w-full max-w-[700px] flex-col gap-4">
+        <TweetDefaultCard v-for="tweet in tweets" :key="tweet.id" :tweet="tweet" />
+      </div>
+    </div>
+    <div v-else data-testid="empty-state" class="text-muted-foreground mt-10 text-center">
+      <h1 class="text-xl font-semibold">{{ $t('testing.tweets.tweet-not-found') }}</h1>
+    </div>
+  </div>
+</template>

app/pages/profile/index.vue

@@ -1,27 +1,29 @@
 <script setup lang="ts">
-import type { Tweet } from '~~/shared/types/tweets';
-import TweetDefaultCard from '../../components/tweet/TweetDefaultCard.vue';
+const { t } = useI18n();
+
 definePageMeta({
-  layout: 'profile',
+  layout: 'default',
 });
-
-const tweets = ref<Tweet[]>([]);
-
-const { data: tweetsData, error } = await useFetch<{ data: Tweet[] }>('/api/tweets');
-tweets.value = tweetsData.value?.data || [];
-
-if (error.value) console.error(error.value);
 </script>
 
 <template>
-  <div class="p-2">
-    <div v-if="tweets.length > 0" class="mb-4">
-      <div class="mt-4 flex w-full max-w-[700px] flex-col gap-4">
-        <TweetDefaultCard v-for="tweet in tweets" :key="tweet.id" :tweet="tweet" />
+  <div class="flex min-h-screen items-center justify-center p-6">
+    <div class="text-center">
+      <div class="mb-6">
+        <LogoRaven class="text-primary mx-auto h-16 w-16" />
+      </div>
+      <h1 class="mb-4 text-3xl font-bold">{{ t('profile.not-logged-in.title') }}</h1>
+      <p class="text-muted-foreground mb-8 text-lg">
+        {{ t('profile.not-logged-in.description') }}
+      </p>
+      <div class="space-y-3">
+        <NuxtLink
+          to="/"
+          class="bg-primary hover:bg-primary/90 inline-block rounded-full px-8 py-3 font-semibold text-white transition-colors"
+        >
+          {{ t('profile.not-logged-in.take-me-home') }}
+        </NuxtLink>
       </div>
-    </div>
-    <div v-else data-testid="empty-state" class="text-muted-foreground mt-10 text-center">
-      <h1 class="text-xl font-semibold">{{ $t('testing.tweets.tweet-not-found') }}</h1>
     </div>
   </div>
 </template>