feat: profile picture

apps/web/src/components/Dashboard.tsx

@@ -5,7 +5,7 @@ import FeedbackButton from "./FeedbackButton";
 import SideNavigation from "./SideNavigation";
 
 export default function Dashboard(props: { children: React.ReactNode }) {
-  const { data, isLoading } = api.auth.getUser.useQuery();
+  const { data, isLoading } = api.user.getUser.useQuery();
 
   return (
     <>
@@ -28,7 +28,10 @@ export default function Dashboard(props: { children: React.ReactNode }) {
         </div>
 
         <div className="flex h-full w-full">
-          <SideNavigation user={{ email: data?.email }} isLoading={isLoading} />
+          <SideNavigation
+            user={{ email: data?.email, image: data?.image }}
+            isLoading={isLoading}
+          />
           <div className="w-full overflow-hidden">{props.children}</div>
         </div>
       </div>

apps/web/src/components/SideNavigation.tsx

@@ -58,7 +58,7 @@ export default function SideNavigation({
               <li key={item.name}>
                 <ReactiveButton
                   href={item.href}
-                  current={pathname?.includes(item.href)}
+                  current={pathname.includes(item.href)}
                   name={item.name}
                   json={item.icon}
                 />
@@ -67,8 +67,8 @@ export default function SideNavigation({
           </ul>
         </div>
         <UserMenu
-          email={user?.email ?? ""}
-          imageUrl={user?.image ?? undefined}
+          email={user.email ?? ""}
+          imageUrl={user.image ?? undefined}
           isLoading={isLoading}
         />
       </nav>

apps/web/src/components/UserMenu.tsx

@@ -21,17 +21,20 @@ export default function UserMenu({
   email,
   isLoading,
 }: UserMenuProps) {
+  const db = createClient();
   const router = useRouter();
   const { themePreference, switchTheme } = useTheme();
 
   const handleLogout = async () => {
-    const db = createClient();
-
     await db.auth.signOut();
 
     router.push("/login");
   };
 
+  const avatarUrl = imageUrl
+    ? db.storage.from("avatars").getPublicUrl(imageUrl).data.publicUrl
+    : null;
+
   return (
     <Menu as="div" className="relative inline-block w-full text-left">
       <div>
@@ -42,9 +45,9 @@ export default function UserMenu({
           </div>
         ) : (
           <Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
-            {imageUrl ? (
+            {avatarUrl ? (
               <Image
-                src={imageUrl ?? ""}
+                src={avatarUrl}
                 className="h-8 w-8 rounded-full bg-gray-50"
                 width={30}
                 height={30}