feat(client): profile improvements

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/sidebar/nav-user.tsx

@@ -1,11 +1,13 @@
+import { identicon } from '@dicebear/collection';
+
+import { createAvatar } from '@dicebear/core';
 import {
   IconDotsVertical,
   IconLogout,
 } from '@tabler/icons-react';
-
+import { useMemo } from 'react';
 import {
   Avatar,
-  AvatarFallback,
   AvatarImage,
 } from '@/components/ui/avatar';
 import {
@@ -33,6 +35,14 @@ function NavUser_() {
   const user = data.data!;
   const { logout } = useLogout();
 
+  const IdentIcon = useMemo(() => {
+    const avatar = createAvatar(identicon, {
+      size: 128,
+      seed: user.user_id,
+    }).toDataUri();
+    return <img src={avatar} alt="Avatar" />;
+  }, [user.user_id]);
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
@@ -43,8 +53,7 @@ function NavUser_() {
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
               <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarImage src={user.avatar} alt={user.nickname} />
-                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                {user.avatar ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{user.nickname}</span>
@@ -64,8 +73,7 @@ function NavUser_() {
             <DropdownMenuLabel className="p-0 font-normal">
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.avatar} alt={user.nickname} />
-                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                  {user.avatar ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.nickname}</span>