fix: replace arrow symbol with icon css in author profile link

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

packages/backend/src/graphql/resolvers/articles.ts

@@ -13,6 +13,7 @@ async function enrichArticle(db: any, article: any) {
         artist_name: users.artist_name,
         slug: users.slug,
         avatar: users.avatar,
+        description: users.description,
       })
       .from(users)
       .where(eq(users.id, article.author))

packages/backend/src/graphql/types/index.ts

@@ -86,6 +86,7 @@ export const VideoModelType = builder.objectRef<VideoModel>("VideoModel").implem
     artist_name: t.exposeString("artist_name", { nullable: true }),
     slug: t.exposeString("slug", { nullable: true }),
     avatar: t.exposeString("avatar", { nullable: true }),
+    description: t.exposeString("description", { nullable: true }),
   }),
 });
 

packages/frontend/src/lib/services.ts

@@ -296,6 +296,7 @@ const ARTICLE_BY_SLUG_QUERY = gql`
         artist_name
         slug
         avatar
+        description
       }
     }
   }

packages/frontend/src/routes/magazine/[slug]/+page.svelte

@@ -151,10 +151,14 @@
                   class="w-16 h-16 rounded-full object-cover ring-2 ring-primary/20"
                 />
                 <div class="flex-1">
-                  <h3 class="font-semibold text-lg mb-2">About {author.artist_name}</h3>
+                  <h3 class="font-semibold text-lg mb-1">About {author.artist_name}</h3>
+                  {#if author.description}
+                    <p class="text-sm text-muted-foreground mb-3 leading-relaxed">{author.description}</p>
+                  {/if}
                   {#if author.slug}
-                    <a href="/models/{author.slug}" class="text-sm text-primary hover:underline">
+                    <a href="/models/{author.slug}" class="inline-flex items-center gap-1 text-sm text-primary hover:underline">
                       View profile
+                      <span class="icon-[ri--arrow-right-line] w-3.5 h-3.5"></span>
                     </a>
                   {/if}
                 </div>

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 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"
                           >
+                            <span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
                           </div>
-                      </div>
-                      <div class="gap-2">
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          onclick={handleAvatarRemove}
-                          class="cursor-pointer"
-                          ><span class="icon-[ri--delete-bin-line]"></span></Button
+                        {: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"
                           >
-                      </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">

packages/types/src/index.ts

@@ -40,6 +40,7 @@ export interface VideoModel {
   artist_name: string | null;
   slug: string | null;
   avatar: string | null;
+  description: string | null;
 }
 
 export interface VideoFile {