feat: Add pm

toju-app/src/app/domains/direct-message/feature/dm-rail/dm-rail.component.html

@@ -0,0 +1,74 @@
+<!-- eslint-disable @angular-eslint/template/prefer-ngsrc -->
+<div class="mt-2 flex w-full flex-col items-center gap-2 border-b border-border/70 pb-2">
+  <div class="group/server relative flex w-full justify-center">
+    <button
+      type="button"
+      class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent text-muted-foreground transition-[border-radius,box-shadow,background-color,color] duration-100 hover:rounded-lg hover:bg-card hover:text-foreground"
+      title="Direct Messages"
+      aria-label="Direct Messages"
+      [ngClass]="isOnDirectMessages() ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10 text-foreground' : 'rounded-xl bg-card'"
+      [attr.aria-current]="isOnDirectMessages() ? 'page' : null"
+      (click)="openDirectMessages()"
+    >
+      <ng-icon
+        name="lucideMessageCircle"
+        class="h-4 w-4"
+      />
+      @if (directMessages.totalUnreadCount() > 0) {
+        <span class="dm-rail-slide-in absolute -right-1 -top-1 h-3 w-3 rounded-full bg-amber-400 ring-2 ring-card"></span>
+      }
+    </button>
+  </div>
+
+  @for (item of railItems(); track item.id) {
+    <div class="group/server relative flex w-full justify-center">
+      <button
+        type="button"
+        class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card"
+        [class.dm-rail-slide-in]="!item.isExiting"
+        [class.dm-rail-slide-out]="item.isExiting"
+        [class.pointer-events-none]="item.isExiting"
+        [ngClass]="isSelectedItem(item) ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10' : 'rounded-xl bg-card'"
+        [title]="item.label"
+        [attr.aria-current]="isSelectedItem(item) ? 'page' : null"
+        (click)="openItem(item)"
+      >
+        <div class="h-full w-full overflow-hidden rounded-[inherit]">
+          @if (item.avatarUrl) {
+            <img
+              [src]="item.avatarUrl"
+              [alt]="item.label"
+              class="h-full w-full object-cover"
+            />
+          } @else {
+            <div
+              class="flex h-full w-full items-center justify-center bg-secondary transition-colors"
+              [class.bg-primary/15]="isSelectedItem(item)"
+            >
+              <span
+                class="text-sm font-semibold text-muted-foreground transition-colors"
+                [class.text-foreground]="isSelectedItem(item)"
+                >{{ initial(item.label) }}</span
+              >
+            </div>
+          }
+        </div>
+
+        <span
+          class="absolute -bottom-1 -right-1 grid h-4 w-4 place-items-center rounded-full bg-secondary text-muted-foreground shadow-sm ring-2 ring-card"
+        >
+          <ng-icon
+            name="lucideUser"
+            class="h-2.5 w-2.5"
+          />
+        </span>
+
+        @if (!item.isExiting && item.unreadCount > 0) {
+          <span class="absolute -right-1 -top-1 min-w-5 rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-black shadow-sm">
+            {{ formatUnreadCount(item.unreadCount) }}
+          </span>
+        }
+      </button>
+    </div>
+  }
+</div>