feat: add avatar

frontend/src/components/Sidebar.tsx

@@ -885,8 +885,12 @@ function SidebarBody() {
               }
             }}
           >
-            <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 border border-indigo-200 shadow-sm">
-              <User className="h-4.5 w-4.5" />
+            <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 border border-indigo-200 shadow-sm overflow-hidden">
+              {user?.avatar ? (
+                <img src={user.avatar} alt="avatar" className="w-full h-full object-cover" />
+              ) : (
+                <User className="h-4.5 w-4.5" />
+              )}
             </div>
             <div className="text-sm font-medium truncate max-w-[100px] text-left">
               {user?.username || t('defaultUser')}

frontend/src/pages/Settings.tsx

@@ -4,14 +4,30 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
-import { Save, Loader2 } from "lucide-react";
+import { Save, Loader2, Check } from "lucide-react";
 import { api } from "@/lib/api";
 import { useAuthStore } from "@/store/authStore";
 
+const BUILTIN_AVATARS = [
+  "https://api.dicebear.com/7.x/bottts/svg?seed=Felix",
+  "https://api.dicebear.com/7.x/bottts/svg?seed=Aneka",
+  "https://api.dicebear.com/7.x/bottts/svg?seed=Tinkerbell",
+  "https://api.dicebear.com/7.x/bottts/svg?seed=Bella",
+  "https://api.dicebear.com/7.x/bottts/svg?seed=Buster",
+  "https://api.dicebear.com/7.x/bottts/svg?seed=Max",
+  "https://api.dicebear.com/7.x/adventurer/svg?seed=Leo",
+  "https://api.dicebear.com/7.x/adventurer/svg?seed=Oliver",
+  "https://api.dicebear.com/7.x/adventurer/svg?seed=Mia",
+  "https://api.dicebear.com/7.x/adventurer/svg?seed=Lily",
+  "https://api.dicebear.com/7.x/adventurer/svg?seed=Chloe",
+  "https://api.dicebear.com/7.x/adventurer/svg?seed=Simba"
+];
+
 export function Settings() {
   const { t } = useTranslation();
   const { user, updateUser } = useAuthStore();
   const [email, setEmail] = useState('');
+  const [avatar, setAvatar] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [isSaving, setIsSaving] = useState(false);
@@ -21,6 +37,7 @@ export function Settings() {
   useEffect(() => {
     if (user) {
       setEmail(user.email || '');
+      setAvatar(user.avatar || '');
     }
   }, [user]);
 
@@ -38,7 +55,8 @@ export function Settings() {
     setIsSaving(true);
     try {
         const updateData: any = {
-          email: email
+          email: email,
+          avatar: avatar || null
         };
         
         if (password) {
@@ -55,8 +73,8 @@ export function Settings() {
             setPassword('');
             setConfirmPassword('');
             
-            // Update global state with new email
-            updateUser({ email: response.email });
+            // Update global state with new email and avatar
+            updateUser({ email: response.email, avatar: response.avatar });
         }
     } catch (error: any) {
         console.error("Failed to save settings", error);
@@ -87,6 +105,28 @@ export function Settings() {
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
+                <Label>{t('avatar', 'Avatar')}</Label>
+                <div className="grid grid-cols-6 sm:grid-cols-8 md:grid-cols-12 gap-2 mt-2">
+                  {BUILTIN_AVATARS.map((url) => (
+                    <div 
+                      key={url} 
+                      className={`relative cursor-pointer rounded-full overflow-hidden border-2 transition-all ${
+                        avatar === url ? 'border-indigo-500 scale-110 shadow-md' : 'border-transparent hover:border-indigo-200'
+                      }`}
+                      onClick={() => setAvatar(url)}
+                    >
+                      <img src={url} alt="avatar" className="w-full h-auto bg-muted/30" />
+                      {avatar === url && (
+                        <div className="absolute inset-0 bg-black/10 flex items-center justify-center">
+                          <Check className="h-4 w-4 text-indigo-600 drop-shadow-sm" />
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-2 pt-2 border-t border-border">
                 <Label htmlFor="username">{t('username')}</Label>
                 <Input 
                   id="username" 

frontend/src/store/authStore.ts

@@ -4,6 +4,7 @@ export interface User {
   id: number;
   username: string;
   email: string;
+  avatar?: string | null;
   is_admin: boolean;
 }