feat: enhance profile page with additional user information and improved article loading states

- Expanded user profile data retrieval to include bio, designation, website URL, education, location, social links, skills, and verification status.
- Updated ProfilePageAside component to display user skills.
- Improved article loading experience in UserArticleFeed with error handling and empty state messaging.
- Added Bengali translations for new article-related messages to enhance localization.

Author: kingRayhan

src/app/[username]/(profile-page)/_components/ProfilePageAside.tsx

@@ -43,6 +43,13 @@ const ProfilePageAside: React.FC<ProfilePageAsideProps> = ({ profile }) => {
         <p className="my-2 text-sm text-muted-foreground">{profile?.bio}</p>
       )}
 
+      {profile?.skills && (
+        <p className="my-2 text-sm">
+          <span className="font-medium text-foreground">Skills: </span>
+          <span className="text-muted-foreground">{profile.skills}</span>
+        </p>
+      )}
+
       {/* User infos start */}
       <div className="flex flex-col mt-4 gap-2 md:gap-4">
         {profile?.website_url && (

src/app/[username]/(profile-page)/articles/UserArticleFeed.tsx

@@ -1,18 +1,22 @@
 "use client";
 
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import * as articleActions from "@/backend/services/article.actions";
 import React, { useMemo } from "react";
 import ArticleCard from "@/components/ArticleCard";
 import { readingTime } from "@/lib/utils";
 import VisibilitySensor from "@/components/VisibilitySensor";
 import getFileUrl from "@/utils/getFileUrl";
+import { useTranslation } from "@/i18n/use-translation";
+import Image from "next/image";
 
 interface UserArticleFeedProps {
   userId: string;
 }
 
 const UserArticleFeed: React.FC<UserArticleFeedProps> = ({ userId }) => {
+  const { _t } = useTranslation();
+
   const feedInfiniteQuery = useInfiniteQuery({
     queryKey: ["user-article-feed", userId],
     queryFn: ({ pageParam }) =>
@@ -42,22 +46,49 @@ const UserArticleFeed: React.FC<UserArticleFeedProps> = ({ userId }) => {
   });
 
   const feedArticles = useMemo(() => {
-    return feedInfiniteQuery.data?.pages.flatMap((page) => page?.nodes);
+    return feedInfiniteQuery.data?.pages.flatMap((page) => page?.nodes) ?? [];
   }, [feedInfiniteQuery.data]);
 
+  const showEmpty =
+    !feedInfiniteQuery.isPending &&
+    !feedInfiniteQuery.isError &&
+    feedArticles.length === 0;
+
   return (
     <>
-      {feedInfiniteQuery.isFetching && (
+      {feedInfiniteQuery.isPending && (
         <div className="flex flex-col gap-10 pt-4">
           {Array.from({ length: 6 }).map((_, index) => (
             <div key={index} className="h-56 bg-muted animate-pulse mx-4" />
           ))}
         </div>
       )}
 
-      {/* <pre>{JSON.stringify(feedArticles, null, 2)}</pre> */}
+      {feedInfiniteQuery.isError && (
+        <div className="py-10 px-4 text-center text-sm text-muted-foreground">
+          {_t("Could not load articles.")}
+        </div>
+      )}
+
+      {showEmpty && (
+        <div className="py-10 flex flex-col items-center justify-center gap-4 px-4">
+          <Image
+            src="/images/robots-drones-artificial-intelligence-1.png"
+            alt=""
+            width={220}
+            height={220}
+            className="mx-auto opacity-90"
+          />
+          <h2 className="text-xl font-semibold text-center">
+            {_t("No articles published yet")}
+          </h2>
+          <p className="text-sm text-muted-foreground text-center max-w-md">
+            {_t("When this user publishes articles, they will show up here.")}
+          </p>
+        </div>
+      )}
 
-      {feedArticles?.map((article) => (
+      {feedArticles.map((article) => (
         <ArticleCard
           key={article?.id}
           id={article?.id ?? ""}

src/app/[username]/(profile-page)/articles/page.tsx

@@ -11,10 +11,13 @@ const Page: React.FC<PageProps> = async ({ params }) => {
   const username = sanitizedUsername(_params?.username);
   const profile = await getUserByUsername(username, ["id", "username"]);
 
+  if (!profile?.id) {
+    return null;
+  }
+
   return (
     <main className="border rounded-bl-2xl rounded-br-2xl md:col-span-9 col-span-full mt-3">
-      {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}
-      <UserArticleFeed userId={profile?.id!} />
+      <UserArticleFeed userId={profile.id} />
     </main>
   );
 };

src/app/[username]/(profile-page)/layout.tsx

@@ -47,15 +47,21 @@ const layout: React.FC<ProfilePageLayoutProps> = async ({
   const _params = await params;
   const username = sanitizedUsername(_params?.username);
   const profile = await getUserByUsername(username, [
-    // all fields
     "id",
     "name",
     "username",
     "email",
     "profile_photo",
+    "bio",
+    "designation",
+    "website_url",
+    "education",
+    "location",
+    "social_links",
+    "skills",
+    "is_verified",
     "created_at",
     "updated_at",
-    "social_links",
   ]);
 
   if (!profile) {

src/i18n/bn.json

@@ -110,6 +110,9 @@
   "Profile not found": "প্রোফাইল খুঁজে পাওয়া যায়নি",
   "The user you are looking for does not exist": "আপনি সেই ব্যবহারকারীর জন্য খুঁজে পাওয়া যায়নি",
   "No profile readme found": "কোনো প্রোফাইল readme পাওয়া যায়নি",
+  "No articles published yet": "এখনো কোনো প্রকাশিত লেখা নেই",
+  "When this user publishes articles, they will show up here.": "এই ব্যবহারকারী লেখা প্রকাশ করলে সেগুলো এখানে দেখা যাবে।",
+  "Could not load articles.": "লেখাগুলো লোড করা যায়নি।",
   "Login Sessions": "লগইন সেশন সমূহ",
   "These are the login sessions of your account. You can use this to revoke access to your account": "এটি আপনার একাউন্ট এর লগইন সেশন তালিকা। আপনি অন্য ডিভাইস থেকে লগাউট করে দিতে পারবেন",
   "You are not logged in": "আপনি লগইন করেননি",