refactor: Clean lint errors and organise files

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

@@ -0,0 +1,70 @@
+<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"
+>
+  <div class="h-24 rounded-t-lg bg-gradient-to-r from-primary/30 to-primary/10"></div>
+
+  <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"
+      />
+    </div>
+  </div>
+
+  <div class="px-5 pb-4 pt-3">
+    <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()) {
+      <div class="relative mt-3">
+        <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]="currentStatusColor()"
+          ></span>
+          <span class="flex-1 text-left text-foreground">{{ currentStatusLabel() }}</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]="currentStatusColor()"
+        ></span>
+        <span>{{ currentStatusLabel() }}</span>
+      </div>
+    }
+  </div>
+</div>