update user-button,

002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx

@@ -9,9 +9,12 @@ import type { User } from '@/types/user';
 import { usePopover } from '@/hooks/use-popover';
 
 import { UserPopover } from '../../user-popover/user-popover';
+import { useUser } from '@/hooks/use-user';
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 // import { NotificationsButton } from './notifications-button';
 
-const user = {
+// TODO:remove me
+const user1 = {
   id: 'USR-000',
   name: 'Sofia Rivers',
   avatar: '/assets/avatar.png',
@@ -20,6 +23,9 @@ const user = {
 
 export function UserButton(): React.JSX.Element {
   const popover = usePopover<HTMLButtonElement>();
+  const { user, error, isLoading } = useUser();
+
+  if (!user) return <>loading</>;
 
   return (
     <React.Fragment>
@@ -44,7 +50,7 @@ export function UserButton(): React.JSX.Element {
           }}
           variant="dot"
         >
-          <Avatar src={user.avatar} />
+          <Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)} />
         </Badge>
       </Box>
       <UserPopover