fix(ui): fix minor ui bugs

src/components/AppSidebar.tsx

@@ -26,9 +26,12 @@ import {
 import { useState } from "react";
 import logo from "../assets/ed_logo1.png";
 import { NavLink } from "react-router-dom";
+import { useAuthStore } from "../stores/authStore";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 export function AppSidebar() {
   const [open, setOpen] = useState(true);
+  const user = useAuthStore((s) => s.user);
 
   return (
     <Sidebar className="border-r bg-black text-white">
@@ -195,13 +198,15 @@ export function AppSidebar() {
       {/* FOOTER */}
       <SidebarFooter>
         <div className="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-white/10 cursor-pointer">
-          <img
-            src="https://i.pravatar.cc/40"
-            className="w-8 h-8 rounded-full"
-          />
+          <Avatar>
+            <AvatarImage src={user?.avatar_url} />
+            <AvatarFallback className="font-satoshi-bold bg-linear-to-br from-purple-400 to-purple-500 uppercase">
+              {user?.name.slice(0, 1)}
+            </AvatarFallback>
+          </Avatar>
           <div className="flex flex-col text-sm">
-            <span className="font-medium text-black">shadcn</span>
-            <span className="text-xs text-gray-400">m@example.com</span>
+            <span className="font-medium text-black">{user?.name}</span>
+            <span className="text-xs text-gray-400">{user?.email}</span>
           </div>
           <ChevronDown size={16} className="ml-auto" />
         </div>