feat: basic selected server indicator

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

@@ -15,10 +15,22 @@
   <!-- 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) {
+      <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
           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)"
         >
@@ -30,8 +42,14 @@
                 class="w-full h-full object-cover"
               />
             } @else {
-            <div class="w-full h-full flex items-center justify-center bg-secondary">
+              <div
-              <span class="text-sm font-semibold text-muted-foreground">{{ initial(room.name) }}</span>
+                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>
@@ -42,6 +60,7 @@
             </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;