feat: basic selected server indicator

toju-app/src/app/features/servers/servers-rail.component.html

@@ -15,33 +15,52 @@
   <!-- Saved servers icons -->
   <div class="flex-1 w-full overflow-y-auto flex flex-col items-center gap-2 mt-2">
     @for (room of visibleSavedRooms(); track room.id) {
-      <button
-        type="button"
-        class="relative w-10 h-10 flex-shrink-0 rounded-2xl border border-border hover:border-primary/60 hover:shadow-sm transition-all"
-        [title]="room.name"
-        (click)="joinSavedRoom(room)"
-        (contextmenu)="openContextMenu($event, room)"
-      >
-        <div class="h-full w-full overflow-hidden rounded-[inherit]">
-          @if (room.icon) {
-            <img
-              [ngSrc]="room.icon"
-              [alt]="room.name"
-              class="w-full h-full object-cover"
-            />
-          } @else {
-            <div class="w-full h-full flex items-center justify-center bg-secondary">
-              <span class="text-sm font-semibold text-muted-foreground">{{ initial(room.name) }}</span>
-            </div>
-          }
-        </div>
-
-        @if (roomUnreadCount(room.id) > 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(roomUnreadCount(room.id)) }}
-          </span>
+      <div class="relative flex w-full justify-center pl-2">
+        @if (isSelectedRoom(room)) {
+          <span
+            aria-hidden="true"
+            class="absolute left-1 top-1/2 h-7 w-1 -translate-y-1/2 rounded-full bg-primary shadow-[0_0_10px_rgba(59,130,246,0.45)]"
+          ></span>
         }
-      </button>
+
+        <button
+          type="button"
+          class="relative w-10 h-10 flex-shrink-0 rounded-2xl border border-border hover:border-primary/60 hover:shadow-sm transition-all"
+          [class.border-primary]="isSelectedRoom(room)"
+          [class.shadow-[0_0_0_1px_rgba(59,130,246,0.45),0_10px_20px_rgba(15,23,42,0.25)]]="isSelectedRoom(room)"
+          [class.scale-105]="isSelectedRoom(room)"
+          [title]="room.name"
+          [attr.aria-current]="isSelectedRoom(room) ? 'page' : null"
+          (click)="joinSavedRoom(room)"
+          (contextmenu)="openContextMenu($event, room)"
+        >
+          <div class="h-full w-full overflow-hidden rounded-[inherit]">
+            @if (room.icon) {
+              <img
+                [ngSrc]="room.icon"
+                [alt]="room.name"
+                class="w-full h-full object-cover"
+              />
+            } @else {
+              <div
+                class="w-full h-full flex items-center justify-center bg-secondary transition-colors"
+                [class.bg-primary/15]="isSelectedRoom(room)"
+              >
+                <span
+                  class="text-sm font-semibold text-muted-foreground transition-colors"
+                  [class.text-foreground]="isSelectedRoom(room)"
+                >{{ initial(room.name) }}</span>
+              </div>
+            }
+          </div>
+
+          @if (roomUnreadCount(room.id) > 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(roomUnreadCount(room.id)) }}
+            </span>
+          }
+        </button>
+      </div>
     }
   </div>
 </nav>

toju-app/src/app/features/servers/servers-rail.component.ts

@@ -233,6 +233,10 @@ export class ServersRailComponent {
     return count > 99 ? '99+' : String(count);
   }
 
+  isSelectedRoom(room: Room): boolean {
+    return this.currentRoom()?.id === room.id;
+  }
+
   private async refreshBannedLookup(rooms: Room[], currentUser: User | null): Promise<void> {
     const requestVersion = ++this.banLookupRequestVersion;