feat: profile picture fetching through guard service

web/src/feature/AccountList/index.tsx

@@ -1,8 +1,9 @@
 import { type LocalAccount } from "@/repository/account";
 import { useAuth } from "@/store/auth";
-import { CirclePlus, User } from "lucide-react";
+import { CirclePlus } from "lucide-react";
 import { useCallback, type FC } from "react";
 import { Link, useLocation } from "react-router";
+import Avatar from "../Avatar";
 
 const AccountList: FC = () => {
   const accounts = useAuth((state) => state.accounts);
@@ -27,17 +28,7 @@ const AccountList: FC = () => {
         >
           <div>
             <div className="rounded-full w-10 h-10 overflow-hidden bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-200 mr-3 ring ring-gray-400 dark:ring dark:ring-gray-500">
-              {account.profilePicture ? (
-                <img
-                  src={account.profilePicture}
-                  className="w-full h-full flex-1 object-cover"
-                  alt="profile"
-                />
-              ) : (
-                <div className="w-full h-full flex items-center justify-center">
-                  <User />
-                </div>
-              )}
+              <Avatar iconSize={8} avatarId={account.profilePicture ?? null} />
             </div>
           </div>
           <div className="flex flex-col">

web/src/feature/Avatar/index.tsx

@@ -1,22 +1,28 @@
 import { useAuth } from "@/store/auth";
 import { User } from "lucide-react";
-import type { FC } from "react";
+import { useMemo, type FC } from "react";
 
 export interface AvatarProps {
   iconSize?: number;
   className?: string;
+  avatarId?: string;
 }
 
-const Avatar: FC<AvatarProps> = ({ iconSize = 32, className }) => {
+const Avatar: FC<AvatarProps> = ({ iconSize = 32, className, avatarId }) => {
   const profile = useAuth((state) => state.profile);
 
+  const avatar = useMemo(
+    () => (avatarId !== undefined ? avatarId : profile?.profile_picture),
+    [avatarId, profile?.profile_picture],
+  );
+
   return (
     <div
       className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
     >
-      {profile?.profile_picture ? (
+      {avatar ? (
         <img
-          src={profile?.profile_picture?.toString()}
+          src={`/api/v1/avatar/${avatar?.toString()}`}
           className="w-full h-full flex-1 object-cover"
           alt="profile"
         />