feat: Basic general context menu

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

@@ -13,21 +13,19 @@
   </button>
 
   <!-- Saved servers icons -->
-  <div class="no-scrollbar mt-2 flex w-full flex-1 flex-col items-center gap-2 overflow-y-auto">
+  <div class="no-scrollbar mt-2 flex w-full flex-1 flex-col items-center gap-2 overflow-y-auto pt-0.5">
     @for (room of visibleSavedRooms(); track room.id) {
-      <div class="relative flex w-full justify-center">
-        @if (isSelectedRoom(room)) {
-          <span
-            aria-hidden="true"
-            class="pointer-events-none absolute left-0 top-1/2 h-10 w-1 -translate-y-1/2 rounded-l-full bg-primary"
-          ></span>
-        }
+      <div class="group/server relative flex w-full justify-center">
+        <span
+          aria-hidden="true"
+          class="pointer-events-none absolute left-0 top-1/2 w-[3px] -translate-y-1/2 rounded-r-full bg-primary transition-[height,opacity] duration-100"
+          [ngClass]="isSelectedRoom(room) ? 'h-5 opacity-100' : 'h-0 opacity-0 group-hover/server:h-2.5 group-hover/server:opacity-100'"
+        ></span>
 
         <button
           type="button"
-          class="relative z-10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md border border-transparent bg-card transition-colors hover:border-border hover:bg-card"
-          [class.border-primary/30]="isSelectedRoom(room)"
-          [class.bg-primary/10]="isSelectedRoom(room)"
+          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"
+          [ngClass]="isSelectedRoom(room) ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10' : 'rounded-xl bg-card'"
           [title]="room.name"
           [attr.aria-current]="isSelectedRoom(room) ? 'page' : null"
           (click)="joinSavedRoom(room)"