feat: Add pm

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

@@ -2,7 +2,7 @@
   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 profileUser = displayedUser();
   @let isEditable = editable();
   @let activeField = editingField();
   @let statusColor = currentStatusColor();
@@ -125,13 +125,22 @@
               <button
                 type="button"
                 class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-secondary"
+                [class.bg-secondary]="isStatusOptionSelected(opt.value)"
+                [class.text-foreground]="isStatusOptionSelected(opt.value)"
+                [class.text-muted-foreground]="!isStatusOptionSelected(opt.value)"
                 (click)="setStatus(opt.value)"
               >
                 <span
                   class="h-2 w-2 rounded-full"
                   [class]="opt.color"
                 ></span>
-                <span>{{ opt.label }}</span>
+                <span class="flex-1">{{ opt.label }}</span>
+                @if (isStatusOptionSelected(opt.value)) {
+                  <ng-icon
+                    name="lucideCheck"
+                    class="h-3.5 w-3.5 text-primary"
+                  />
+                }
               </button>
             }
           </div>