feat: redesign avatar upload as circular click-to-change UI

Replace generic file drop zone + tiny thumbnail with a 96px circular
avatar that shows a camera overlay on hover, upgrades preview to
thumbnail quality, and adds a compact remove button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/routes/me/+page.svelte

@@ -22,7 +22,7 @@
   import { Textarea } from "$lib/components/ui/textarea";
   import Meta from "$lib/components/meta/meta.svelte";
   import { TagsInput } from "$lib/components/ui/tags-input";
-  import { displaySize, FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
+  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
   import RecordingCard from "$lib/components/recording-card/recording-card.svelte";
 
   const { data } = $props();
@@ -152,7 +152,7 @@
     if (data.authStatus.user!.avatar) {
       avatar = {
         id: data.authStatus.user!.avatar,
-        url: getAssetUrl(data.authStatus.user!.avatar, "mini")!,
+        url: getAssetUrl(data.authStatus.user!.avatar, "thumbnail")!,
         name: data.authStatus.user!.artist_name ?? "",
         size: 0,
       };
@@ -254,7 +254,8 @@
             <CardContent class="space-y-4">
               <form onsubmit={handleProfileSubmit} class="space-y-4">
                 <div class="space-y-2">
-                  <Label for="avatar">{$_("me.settings.avatar")}</Label>
+                  <Label>{$_("me.settings.avatar")}</Label>
+                  <div class="flex items-center gap-5">
                     <FileDropZone
                       id="avatar"
                       fileCount={0}
@@ -262,36 +263,53 @@
                       maxFileSize={2 * MEGABYTE}
                       onUpload={handleFilesUpload}
                       accept="image/*"
-                  />
+                      class="h-auto w-auto shrink-0 border-none p-0 rounded-full hover:bg-transparent"
+                    >
+                      <div class="relative group cursor-pointer w-24 h-24">
                         {#if avatar}
-                    <div class="flex place-items-center justify-between gap-2">
-                      <div class="flex place-items-center gap-2">
-                        <div class="relative size-9 overflow-clip">
                           <img
                             src={avatar.url}
                             alt={avatar.name}
-                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 overflow-clip"
+                            class="w-24 h-24 rounded-full object-cover ring-4 ring-primary/20 group-hover:ring-primary/50 transition-all"
                           />
-                        </div>
+                          <div
-                        <div class="flex flex-col">
+                            class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                          <span>{avatar.name}</span>
-                          <span class="text-muted-foreground text-xs"
-                            >{displaySize(avatar.size)}</span
                           >
+                            <span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
                           </div>
-                      </div>
+                        {:else}
-                      <div class="gap-2">
+                          <div
-                        <Button
+                            class="w-24 h-24 rounded-full border-2 border-dashed border-primary/30 group-hover:border-primary/60 bg-primary/5 group-hover:bg-primary/10 transition-all flex flex-col items-center justify-center gap-1"
-                          variant="outline"
-                          size="icon"
-                          onclick={handleAvatarRemove}
-                          class="cursor-pointer"
-                          ><span class="icon-[ri--delete-bin-line]"></span></Button
                           >
-                      </div>
+                            <span
+                              class="icon-[ri--camera-line] w-7 h-7 text-primary/50 group-hover:text-primary/80 transition-colors"
+                            ></span>
+                            <span class="text-xs text-muted-foreground">Upload</span>
                           </div>
                         {/if}
                       </div>
+                    </FileDropZone>
+                    <div class="flex flex-col gap-1">
+                      <p class="text-sm text-muted-foreground">
+                        JPG, PNG · max 2 MB
+                      </p>
+                      <p class="text-xs text-muted-foreground/70">
+                        Click or drop to {avatar ? "change" : "upload"}
+                      </p>
+                      {#if avatar}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onclick={handleAvatarRemove}
+                          class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                        >
+                          <span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
+                          Remove
+                        </Button>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
                 <!-- Name Fields -->
                 <div class="grid grid-cols-2 gap-4">
                   <div class="space-y-2">