Toju/src/app/features/shell/title-bar.component.html

<div
  class="fixed top-0 left-16 right-0 h-10 bg-card border-b border-border flex items-center justify-between px-4 z-50 select-none"
  style="-webkit-app-region: drag"
>
  <div
    class="flex items-center gap-2 min-w-0 relative"
    style="-webkit-app-region: no-drag"
  >
    @if (inRoom()) {
      <ng-icon
        name="lucideHash"
        class="w-5 h-5 text-muted-foreground"
      />
      <span class="text-sm font-semibold text-foreground truncate">{{ roomName() }}</span>

      @if (showRoomCompatibilityNotice()) {
        <span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
          {{ signalServerCompatibilityError() }}
        </span>
      }

      @if (showRoomReconnectNotice()) {
        <span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
          <ng-icon
            name="lucideRefreshCw"
            class="h-3.5 w-3.5 animate-spin"
          />
          Reconnecting to signal server…
        </span>
      }

      @if (roomDescription()) {
        <span class="hidden md:inline text-sm text-muted-foreground border-l border-border pl-2 truncate">
          {{ roomDescription() }}
        </span>
      }
    } @else {
      <div class="flex items-center gap-2 min-w-0">
        <span class="text-sm text-muted-foreground truncate">{{ username() }} | {{ serverName() }}</span>
        <span
          class="text-xs px-2 py-0.5 rounded bg-destructive/15 text-destructive"
          [class.hidden]="!isReconnecting()"
          >Reconnecting…</span
        >
      </div>
    }
  </div>
  <div
    class="flex items-center gap-2"
    style="-webkit-app-region: no-drag"
  >
    <button
      type="button"
      class="px-3 h-8 grid place-items-center hover:bg-secondary rounded text-sm text-foreground"
      [class.hidden]="isAuthed()"
      (click)="goLogin()"
      title="Login"
    >
      Login
    </button>

    <button
      type="button"
      (click)="toggleMenu()"
      class="ml-2 p-2 hover:bg-secondary rounded"
      title="Menu"
    >
      <ng-icon
        name="lucideMenu"
        class="w-5 h-5 text-muted-foreground"
      />
    </button>
    <!-- Anchored dropdown under the menu button -->
    @if (showMenu()) {
      <div class="absolute right-0 top-full mt-1 z-50 w-64 rounded-lg border border-border bg-card shadow-lg">
        @if (inRoom()) {
          <button
            type="button"
            (click)="createInviteLink()"
            [disabled]="creatingInvite()"
            class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground disabled:cursor-not-allowed disabled:opacity-60"
          >
            @if (creatingInvite()) {
              Creating Invite Link…
            } @else {
              Create Invite Link
            }
          </button>
          <button
            type="button"
            (click)="leaveServer()"
            class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground"
          >
            Leave Server
          </button>
        }
        <div
          class="border-t border-border px-3 py-2 text-xs leading-5 text-muted-foreground"
          [class.hidden]="!inviteStatus()"
        >
          {{ inviteStatus() }}
        </div>
        <div class="border-t border-border"></div>
        <button
          type="button"
          (click)="logout()"
          class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground"
        >
          Logout
        </button>
      </div>
    }
    @if (isElectron()) {
      <button
        type="button"
        class="w-8 h-8 grid place-items-center hover:bg-secondary rounded"
        title="Minimize"
        (click)="minimize()"
      >
        <ng-icon
          name="lucideMinus"
          class="w-4 h-4"
        />
      </button>
      <button
        type="button"
        class="w-8 h-8 grid place-items-center hover:bg-secondary rounded"
        title="Maximize"
        (click)="maximize()"
      >
        <ng-icon
          name="lucideSquare"
          class="w-4 h-4"
        />
      </button>
      <button
        type="button"
        class="w-8 h-8 grid place-items-center hover:bg-destructive/10 rounded"
        title="Close"
        (click)="close()"
      >
        <ng-icon
          name="lucideX"
          class="w-4 h-4 text-destructive"
        />
      </button>
    }
  </div>
</div>
<!-- Click-away overlay to close dropdown -->
@if (showMenu()) {
  <div
    class="fixed inset-0 z-40"
    (click)="closeMenu()"
    (keydown.enter)="closeMenu()"
    (keydown.space)="closeMenu()"
    tabindex="0"
    role="button"
    aria-label="Close menu overlay"
    style="-webkit-app-region: no-drag"
  ></div>
}

@if (showLeaveConfirm() && currentRoom()) {
  <app-leave-server-dialog
    [room]="currentRoom()!"
    [currentUser]="currentUser() ?? null"
    (confirmed)="confirmLeave($event)"
    (cancelled)="cancelLeave()"
  />
}