feat: Add profile images

toju-app/src/app/shared/components/profile-card/profile-card.component.html

@@ -6,14 +6,40 @@
 
   <div class="relative px-4">
     <div class="-mt-9">
-      <app-user-avatar
-        [name]="user().displayName"
-        [avatarUrl]="user().avatarUrl"
-        size="xl"
-        [status]="user().status"
-        [showStatusBadge]="true"
-        ringClass="ring-4 ring-card"
-      />
+      @if (editable()) {
+        <button
+          #avatarInputButton
+          type="button"
+          class="group relative rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          (click)="pickAvatar(avatarInput)"
+        >
+          <app-user-avatar
+            [name]="user().displayName"
+            [avatarUrl]="user().avatarUrl"
+            size="xl"
+            [status]="user().status"
+            [showStatusBadge]="true"
+            ringClass="ring-4 ring-card"
+          />
+          <span class="pointer-events-none absolute inset-0 rounded-full bg-black/0 transition-colors group-hover:bg-black/15"></span>
+        </button>
+        <input
+          #avatarInput
+          type="file"
+          class="hidden"
+          [accept]="avatarAccept"
+          (change)="onAvatarSelected($event)"
+        />
+      } @else {
+        <app-user-avatar
+          [name]="user().displayName"
+          [avatarUrl]="user().avatarUrl"
+          size="xl"
+          [status]="user().status"
+          [showStatusBadge]="true"
+          ringClass="ring-4 ring-card"
+        />
+      }
     </div>
   </div>
 
@@ -21,6 +47,16 @@
     <p class="truncate text-base font-semibold text-foreground">{{ user().displayName }}</p>
     <p class="truncate text-sm text-muted-foreground">{{ user().username }}</p>
 
+    @if (editable()) {
+      <p class="mt-2 text-xs text-muted-foreground">Click avatar to upload and crop a profile picture.</p>
+    }
+
+    @if (avatarError()) {
+      <div class="mt-3 rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-xs text-red-200">
+        {{ avatarError() }}
+      </div>
+    }
+
     @if (editable()) {
       <div class="relative mt-3">
         <button