From 77ebccf6fa5c0254987068c58d058be835ceb5c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 7 Mar 2026 18:55:56 +0100
Subject: [PATCH] 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 | 76 ++++++++++++--------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/packages/frontend/src/routes/me/+page.svelte b/packages/frontend/src/routes/me/+page.svelte
index 193195f..20a0f40 100644
--- a/packages/frontend/src/routes/me/+page.svelte
+++ b/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,43 +254,61 @@
             <CardContent class="space-y-4">
               <form onsubmit={handleProfileSubmit} class="space-y-4">
                 <div class="space-y-2">
-                  <Label for="avatar">{$_("me.settings.avatar")}</Label>
-                  <FileDropZone
-                    id="avatar"
-                    fileCount={0}
-                    maxFiles={1}
-                    maxFileSize={2 * MEGABYTE}
-                    onUpload={handleFilesUpload}
-                    accept="image/*"
-                  />
-                  {#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">
+                  <Label>{$_("me.settings.avatar")}</Label>
+                  <div class="flex items-center gap-5">
+                    <FileDropZone
+                      id="avatar"
+                      fileCount={0}
+                      maxFiles={1}
+                      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}
                           <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 class="flex flex-col">
-                          <span>{avatar.name}</span>
-                          <span class="text-muted-foreground text-xs"
-                            >{displaySize(avatar.size)}</span
+                          <div
+                            class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                           >
-                        </div>
+                            <span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
+                          </div>
+                        {:else}
+                          <div
+                            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"
+                          >
+                            <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>
-                      <div class="gap-2">
+                    </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="outline"
-                          size="icon"
+                          variant="ghost"
+                          size="sm"
                           onclick={handleAvatarRemove}
-                          class="cursor-pointer"
-                          ><span class="icon-[ri--delete-bin-line]"></span></Button
+                          class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                         >
-                      </div>
+                          <span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
+                          Remove
+                        </Button>
+                      {/if}
                     </div>
-                  {/if}
+                  </div>
                 </div>
                 <!-- Name Fields -->
                 <div class="grid grid-cols-2 gap-4">