feat: Add user statuses and cards

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

@@ -1,5 +1,10 @@
 import { NgOptimizedImage } from '@angular/common';
-import { Component, input } from '@angular/core';
+import {
+  Component,
+  computed,
+  input
+} from '@angular/core';
+import { UserStatus } from '../../../shared-kernel';
 
 @Component({
   selector: 'app-user-avatar',
@@ -13,8 +18,31 @@ import { Component, input } from '@angular/core';
 export class UserAvatarComponent {
   name = input.required<string>();
   avatarUrl = input<string | undefined | null>();
-  size = input<'xs' | 'sm' | 'md' | 'lg'>('sm');
+  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('sm');
   ringClass = input<string>('');
+  status = input<UserStatus | undefined>();
+  showStatusBadge = input(false);
+
+  statusBadgeColor = computed(() => {
+    switch (this.status()) {
+      case 'online': return 'bg-green-500';
+      case 'away': return 'bg-yellow-500';
+      case 'busy': return 'bg-red-500';
+      case 'offline': return 'bg-gray-500';
+      case 'disconnected': return 'bg-gray-500';
+      default: return 'bg-gray-500';
+    }
+  });
+
+  statusBadgeSizeClass = computed(() => {
+    switch (this.size()) {
+      case 'xs': return 'w-2 h-2';
+      case 'sm': return 'w-3 h-3';
+      case 'md': return 'w-3.5 h-3.5';
+      case 'lg': return 'w-4 h-4';
+      case 'xl': return 'w-4.5 h-4.5';
+    }
+  });
 
   initial(): string {
     return this.name()?.charAt(0)
@@ -27,6 +55,7 @@ export class UserAvatarComponent {
       case 'sm': return 'w-8 h-8';
       case 'md': return 'w-10 h-10';
       case 'lg': return 'w-12 h-12';
+      case 'xl': return 'w-16 h-16';
     }
   }
 
@@ -36,6 +65,7 @@ export class UserAvatarComponent {
       case 'sm': return 32;
       case 'md': return 40;
       case 'lg': return 48;
+      case 'xl': return 64;
     }
   }
 
@@ -45,6 +75,7 @@ export class UserAvatarComponent {
       case 'sm': return 'text-sm';
       case 'md': return 'text-base font-semibold';
       case 'lg': return 'text-lg font-semibold';
+      case 'xl': return 'text-xl font-semibold';
     }
   }
 }