fix

src/features/onboarding/components/db-settings/db-grid.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Check, Database } from "lucide-react";
+import { Check, ChevronRight, Database } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import type { OnboardingDatabase } from "@/features/onboarding/types";
@@ -50,6 +50,7 @@ export const DbGrid = ({
                 Configured
               </Badge>
             )}
+            <ChevronRight className="size-4 text-muted-foreground shrink-0" />
           </button>
         );
       })}

src/features/onboarding/steps/step-project-create.tsx

@@ -37,7 +37,7 @@ export const StepProjectCreate = () => {
     setDatabaseIds(newDbIds);
     mutation.mutate(
       { name: name || "My project", databaseIds: newDbIds },
-      { onSettled: () => setLoadingDbId(null) }
+      { onSettled: () => setLoadingDbId(null) },
     );
   };
 
@@ -62,7 +62,7 @@ export const StepProjectCreate = () => {
       </div>
       {databases.length > 0 && (
         <div className="flex flex-col gap-2">
-          <Label>Databases</Label>
+          <Label>Select databases</Label>
           <div className="flex flex-col gap-2 max-h-52 sm:max-h-64 md:max-h-80 overflow-y-auto scrollbar-hide">
             {databases.map((db) => {
               const isSelected = databaseIds.includes(db.id);
@@ -100,7 +100,9 @@ export const StepProjectCreate = () => {
                         strokeWidth={3}
                       />
                     </div>
-                  ) : null}
+                  ) : (
+                    <div className="size-5 rounded-full border-2 border-muted-foreground/30 ml-auto" />
+                  )}
                 </button>
               );
             })}

src/features/profile/actions/avatar.action.ts

@@ -5,17 +5,30 @@ import { eq } from "drizzle-orm";
 import { z } from "zod";
 import * as drizzleDb from "@/db";
 
+export const updateImageUserAction = userAction
+  .schema(z.string())
+  .action(async ({ parsedInput, ctx }) => {
+    console.log("parsedInput", parsedInput);
 
-export const updateImageUserAction = userAction.schema(z.string()).action(async ({ parsedInput, ctx }) => {
+    const [updatedUser] = await db
-    const [updatedUser] = await db.update(drizzleDb.schemas.user).set({ image: parsedInput }).where(eq(drizzleDb.schemas.user.id, ctx.user.id)).returning();
+      .update(drizzleDb.schemas.user)
+      .set({ image: parsedInput })
+      .where(eq(drizzleDb.schemas.user.id, ctx.user.id))
+      .returning();
 
     return {
       data: updatedUser,
     };
   });
 
-export const resetImageUserAction = userAction.schema(z.void()).action(async ({ ctx }) => {
+export const resetImageUserAction = userAction
-    const [updatedUser] = await db.update(drizzleDb.schemas.user).set({ image: null }).where(eq(drizzleDb.schemas.user.id, ctx.user.id)).returning();
+  .schema(z.void())
+  .action(async ({ ctx }) => {
+    const [updatedUser] = await db
+      .update(drizzleDb.schemas.user)
+      .set({ image: null })
+      .where(eq(drizzleDb.schemas.user.id, ctx.user.id))
+      .returning();
 
     return {
       data: updatedUser,

src/features/profile/components/avatar-with-upload.tsx

@@ -1,12 +1,19 @@
 "use client";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { Info, UploadIcon, X } from "lucide-react";
 import { toast } from "sonner";
 import { uploadUserImageAction } from "@/features/upload/actions/upload.action";
 import { useMutation } from "@tanstack/react-query";
-import { resetImageUserAction, updateImageUserAction } from "@/features/profile/actions/avatar.action";
+import {
+  resetImageUserAction,
+  updateImageUserAction,
+} from "@/features/profile/actions/avatar.action";
 import { useRouter } from "next/navigation";
 import { User } from "@/db/schema/02_user";
 import React, { ChangeEvent } from "react";
@@ -86,7 +93,11 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
         >
           {src && <AvatarImage className="object-cover" src={src} />}
           <AvatarFallback className="text-3xl">
-            {(user.name?.charAt(0) ?? user.email?.charAt(0) ?? "?").toUpperCase()}
+            {(
+              user.name?.charAt(0) ??
+              user.email?.charAt(0) ??
+              "?"
+            ).toUpperCase()}
           </AvatarFallback>
         </Avatar>
 
@@ -113,7 +124,9 @@ export const AvatarWithUpload = (props: AvatarWithUploadProps) => {
             </div>
           </TooltipTrigger>
           <TooltipContent side="right" className="max-w-52">
-            Upload a custom photo to override your Gravatar. Without one, your Gravatar is used automatically. If neither is set, your initials are shown.
+            Upload a custom photo to override your Gravatar. Without one, your
+            Gravatar is used automatically. If neither is set, your initials are
+            shown.
           </TooltipContent>
         </Tooltip>
       </div>