feat: Add user statuses and cards

toju-app/src/app/shared/components/user-avatar/user-avatar.component.html

@@ -1,17 +1,25 @@
-@if (avatarUrl()) {
-  <img
-    [ngSrc]="avatarUrl()!"
-    [width]="sizePx()"
-    [height]="sizePx()"
-    alt=""
-    class="rounded-full object-cover"
-    [class]="sizeClasses() + ' ' + ringClass()"
-  />
-} @else {
-  <div
-    class="rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium"
-    [class]="sizeClasses() + ' ' + textClass() + ' ' + ringClass()"
-  >
-    {{ initial() }}
-  </div>
-}
+<div class="relative inline-block">
+  @if (avatarUrl()) {
+    <img
+      [ngSrc]="avatarUrl()!"
+      [width]="sizePx()"
+      [height]="sizePx()"
+      alt=""
+      class="rounded-full object-cover"
+      [class]="sizeClasses() + ' ' + ringClass()"
+    />
+  } @else {
+    <div
+      class="rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium"
+      [class]="sizeClasses() + ' ' + textClass() + ' ' + ringClass()"
+    >
+      {{ initial() }}
+    </div>
+  }
+  @if (showStatusBadge()) {
+    <span
+      class="absolute -bottom-0.5 -right-0.5 rounded-full border-2 border-card"
+      [class]="statusBadgeSizeClass() + ' ' + statusBadgeColor()"
+    ></span>
+  }
+</div>