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

<div
  class="w-72 rounded-lg border border-border bg-card shadow-xl"
  style="animation: profile-card-in 120ms cubic-bezier(0.2, 0, 0, 1) both"
>
  @let profileUser = user();
  @let isEditable = editable();
  @let activeField = editingField();
  @let statusColor = currentStatusColor();
  @let statusLabel = currentStatusLabel();

  <div class="h-20 rounded-t-lg bg-gradient-to-r from-primary/30 to-primary/10"></div>

  <div class="relative px-4">
    <div class="-mt-8">
      <button
        type="button"
        class="rounded-full"
        (click)="pickAvatar(avatarInput)"
      >
        <app-user-avatar
          [name]="profileUser.displayName"
          [avatarUrl]="profileUser.avatarUrl"
          size="xl"
          [status]="profileUser.status"
          [showStatusBadge]="true"
          ringClass="ring-4 ring-card"
        />
      </button>
      <input
        #avatarInput
        type="file"
        class="hidden"
        [accept]="avatarAccept"
        (change)="onAvatarSelected($event)"
      />
    </div>
  </div>

  <div class="px-4 pb-3 pt-2.5">
    @if (isEditable) {
      <div class="space-y-2">
        <div>
          @if (activeField === 'displayName') {
            <input
              type="text"
              class="w-full rounded-md border border-border bg-background/70 px-2 py-1.5 text-base font-semibold text-foreground outline-none focus:border-primary/70"
              [value]="displayNameDraft()"
              (input)="onDisplayNameInput($event)"
              (blur)="finishEdit('displayName')"
            />
          } @else {
            <button
              type="button"
              class="block w-full py-0.5 text-left text-base font-semibold text-foreground"
              (click)="startEdit('displayName')"
            >
              {{ profileUser.displayName }}
            </button>
          }

          <p class="truncate text-sm text-muted-foreground">{{ profileUser.username }}</p>
        </div>

        <div>
          @if (activeField === 'description') {
            <textarea
              rows="3"
              class="w-full resize-none rounded-md border border-border bg-background/70 px-2 py-2 text-sm leading-5 text-foreground outline-none focus:border-primary/70"
              [value]="descriptionDraft()"
              placeholder="Add a description"
              (input)="onDescriptionInput($event)"
              (blur)="finishEdit('description')"
            ></textarea>
          } @else {
            <button
              type="button"
              class="block w-full py-1 text-left text-sm leading-5"
              (click)="startEdit('description')"
            >
              @if (profileUser.description) {
                <span class="whitespace-pre-line text-muted-foreground">{{ profileUser.description }}</span>
              } @else {
                <span class="text-muted-foreground/70">Add a description</span>
              }
            </button>
          }
        </div>
      </div>
    } @else {
      <p class="truncate text-base font-semibold text-foreground">{{ profileUser.displayName }}</p>
      <p class="truncate text-sm text-muted-foreground">{{ profileUser.username }}</p>

      @if (profileUser.description) {
        <p class="mt-2 whitespace-pre-line text-sm leading-5 text-muted-foreground">{{ profileUser.description }}</p>
      }
    }

    @if (avatarError()) {
      <div class="mt-2.5 rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-xs text-red-200">
        {{ avatarError() }}
      </div>
    }

    @if (isEditable) {
      <div class="relative mt-2.5">
        <button
          type="button"
          class="flex w-full items-center gap-2 rounded-md border border-border px-2.5 py-1.5 text-xs transition-colors hover:bg-secondary/60"
          (click)="toggleStatusMenu()"
        >
          <span
            class="h-2 w-2 rounded-full"
            [class]="statusColor"
          ></span>
          <span class="flex-1 text-left text-foreground">{{ statusLabel }}</span>
          <ng-icon
            name="lucideChevronDown"
            class="h-3 w-3 text-muted-foreground"
          />
        </button>

        @if (showStatusMenu()) {
          <div class="absolute bottom-full left-0 z-10 mb-1 w-full rounded-md border border-border bg-card py-1 shadow-lg">
            @for (opt of statusOptions; track opt.label) {
              <button
                type="button"
                class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-secondary"
                (click)="setStatus(opt.value)"
              >
                <span
                  class="h-2 w-2 rounded-full"
                  [class]="opt.color"
                ></span>
                <span>{{ opt.label }}</span>
              </button>
            }
          </div>
        }
      </div>
    } @else {
      <div class="mt-2 flex items-center gap-1.5 text-xs text-muted-foreground">
        <span
          class="h-2 w-2 rounded-full"
          [class]="statusColor"
        ></span>
        <span>{{ statusLabel }}</span>
      </div>
    }
  </div>
</div>