valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Sebastian Krüger
2026-03-07 18:55:56 +01:00
parent 1c101406f6
commit 77ebccf6fa
1 changed files with 47 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/frontend/src/routes/me/+page.svelte
View File

@@ -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">