feat: add is_verified field to article and user components for enhanced user verification display

Author: kingRayhan

src/app/(home)/_components/ArticleFeed.tsx

@@ -87,6 +87,7 @@ const ArticleFeed = () => {
                     ? getFileUrl(article?.user?.profile_photo!)
                     : "",
                   username: article?.user?.username ?? "",
+                  is_verified: Boolean(article?.user?.is_verified),
                 }}
                 publishedAt={article?.created_at.toDateString() ?? ""}
                 readingTime={readingTime(article?.body ?? "")}

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

@@ -71,6 +71,7 @@ const UserArticleFeed: React.FC<UserArticleFeedProps> = ({ userId }) => {
             name: article?.user?.name ?? "",
             avatar: getFileUrl(article?.user?.profile_photo) ?? "",
             username: article?.user?.username ?? "",
+            is_verified: Boolean(article?.user?.is_verified),
           }}
           publishedAt={article?.created_at?.toDateString() ?? ""}
           readingTime={readingTime(article?.body ?? "")}

src/app/tags/[tag_name]/_components/TagArticleFeed.tsx

@@ -128,6 +128,7 @@ const TagArticleFeed: React.FC<TagArticleFeedProps> = ({ tag }) => {
                 ? getFileUrl(article.user.profile_photo)
                 : "",
               username: article?.user?.username ?? "",
+              is_verified: Boolean(article?.user.is_verified),
             }}
             publishedAt={article?.created_at?.toDateString() ?? ""}
             readingTime={readingTime(article?.body ?? "")}

src/backend/services/article.actions.ts

@@ -340,7 +340,7 @@ export async function articleFeed(
             foreignField: "id",
             localField: "author_id",
           },
-          columns: ["id", "name", "username", "profile_photo"],
+          columns: ["id", "name", "username", "profile_photo", "is_verified"],
         } as sk.Join<Article, User>,
       ],
     });
@@ -385,7 +385,7 @@ export async function userArticleFeed(
             foreignField: "id",
             localField: "author_id",
           },
-          columns: ["id", "name", "username", "profile_photo"],
+          columns: ["id", "name", "username", "profile_photo", "is_verified"],
         } as sk.Join<Article, User>,
       ],
     });
@@ -432,6 +432,7 @@ export async function articlesByTag(
         u.name as user_name,
         u.username as user_username,
         u.profile_photo as user_profile_photo,
+        u.is_verified as user_is_verified,
         t.name as tag_name,
         COUNT(*) OVER() as total_count
       FROM articles a
@@ -469,6 +470,7 @@ export async function articlesByTag(
         name: row.user_name,
         username: row.user_username,
         profile_photo: row.user_profile_photo,
+        is_verified: row.user_is_verified,
       },
     }));
 

src/components/ArticleCard.tsx

@@ -11,6 +11,7 @@ import ResourceBookmark from "./ResourceBookmark";
 import ResourceReaction from "./ResourceReaction";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import UserInformationCard from "./UserInformationCard";
+import { VerifiedIcon } from "lucide-react";
 
 interface ArticleCardProps {
   id: string;
@@ -23,6 +24,7 @@ interface ArticleCardProps {
     name: string;
     avatar: string;
     username: string;
+    is_verified: boolean;
   };
   publishedAt: string;
   readingTime: number;
@@ -39,8 +41,6 @@ const ArticleCard = ({
   readingTime,
 }: ArticleCardProps) => {
   const { lang } = useTranslation();
-  const session = useSession();
-  const loginPopup = useLoginPopup();
 
   const articleUrl = useMemo(() => {
     return `/@${author.username}/${handle}`;
@@ -67,12 +67,17 @@ const ArticleCard = ({
           </HoverCardContent>
         </HoverCard>
         <div className="ml-2.5">
-          <Link
-            href={`/@${author.username}`}
-            className="text-sm font-medium text-foreground"
-          >
-            {author.name}
-          </Link>
+          <div className="flex flex-wrap items-center gap-2">
+            <Link
+              href={`/@${author.username}`}
+              className="text-sm font-medium text-foreground"
+            >
+              {author.name}
+            </Link>
+            {author?.is_verified && (
+              <VerifiedIcon className="size-4 fill-primary" />
+            )}
+          </div>
           <div className="flex items-center text-xs text-muted-foreground">
             <time dateTime={publishedAt.toString()}>
               {formattedTime(new Date(publishedAt), lang)}

src/components/UserInformationCard.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import { useTranslation } from "@/i18n/use-translation";
-import { Button } from "./ui/button";
 import * as userActions from "@/backend/services/user.action";
-import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "@/i18n/use-translation";
 import { useSession } from "@/store/session.atom";
-import Link from "next/link";
-import Image from "next/image";
 import getFileUrl from "@/utils/getFileUrl";
+import { useQuery } from "@tanstack/react-query";
+import { VerifiedIcon } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "./ui/button";
 
 interface Props {
   userId: string;
@@ -58,7 +59,12 @@ const UserInformationCard: React.FC<Props> = ({ userId }) => {
 
         {/* Name */}
         <div>
-          <h2 className="text-xl font-bold">{query.data?.name}</h2>
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="text-xl font-bold">{query.data?.name}</h2>
+            {query.data?.is_verified && (
+              <VerifiedIcon className="size-5 fill-primary" />
+            )}
+          </div>
           <p className="text-sm text-muted-foreground">
             {query.data?.username}
           </p>