feat: profile picture support

web/src/api/login.ts

@@ -9,6 +9,7 @@ export interface LoginResponse {
   id: string;
   email: string;
   full_name: string;
+  profile_picture: string;
   access: string;
   refresh: string;
 }

web/src/feature/AccountList/index.tsx

@@ -48,8 +48,18 @@ const AccountList: FC = () => {
           className="flex flex-row items-center p-4 border-gray-200 dark:border-gray-700/65 border-b border-r-0 border-l-0 select-none cursor-pointer hover:bg-gray-50/50 dark:hover:bg-gray-800/10 transition-colors mb-0"
         >
           <div>
-            <div className="rounded-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-200 mr-3 ring ring-gray-900 dark:ring dark:ring-gray-100">
+            <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">
-              <User />
+              {account.profilePicture ? (
+                <img
+                  src={account.profilePicture}
+                  className="w-full h-full flex-1"
+                  alt="profile"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                  <User />
+                </div>
+              )}
             </div>
           </div>
           <div className="flex flex-col">

web/src/pages/Login/index.tsx

@@ -49,6 +49,7 @@ export default function LoginPage() {
           accountId: response.id,
           label: response.full_name,
           email: response.email,
+          profilePicture: response.profile_picture,
           access: response.access,
           refresh: response.refresh,
         });

web/src/repository/account.ts

@@ -6,6 +6,7 @@ export interface RawLocalAccount {
   accountId: string;
   label: string;
   email: string;
+  profilePicture: string;
   access: { data: number[]; iv: number[] };
   refresh: { data: number[]; iv: number[] };
   updatedAt: string;
@@ -15,6 +16,7 @@ export interface LocalAccount {
   accountId: string;
   label: string;
   email: string;
+  profilePicture: string;
   access: string;
   refresh: string;
   updatedAt: string;
@@ -24,6 +26,7 @@ export interface CreateAccountRequest {
   accountId: string;
   label: string;
   email: string;
+  profilePicture: string;
   access: string;
   refresh: string;
 }
@@ -91,6 +94,7 @@ export const useAccountRepo = () => {
         accountId: req.accountId,
         label: req.label,
         email: req.email,
+        profilePicture: req.profilePicture,
         access,
         refresh,
         updatedAt: new Date().toISOString(),
@@ -117,6 +121,7 @@ export const useAccountRepo = () => {
               accountId: account.accountId,
               label: account.label,
               email: account.email,
+              profilePicture: account.profilePicture,
               access: accessToken,
               refresh: refreshToken,
               updatedAt: account.updatedAt,