NowChess-Frontend/src/app/pages/games/games.component.html

<div class="games-shell">
  <div class="page">

    <!-- Breadcrumb -->
    <nav class="crumb" aria-label="Breadcrumb">
      <a routerLink="/" class="crumb-link">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
          stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6" />
        </svg>
        Back to lobby
      </a>
      <span class="crumb-sep">/</span>
      <span class="crumb-current">Games</span>
    </nav>

    <!-- Header -->
    <header class="page-header">
      <h1 class="page-title">Games</h1>

      <!-- Tabs -->
      <div class="tabs" role="tablist">
        <button type="button" class="tab-btn" [class.active]="tab === 'active'" role="tab"
          (click)="setTab('active')">
          Active
          @if (activeGames.length > 0) {
            <span class="tab-badge">{{ activeGames.length }}</span>
          }
        </button>
        <button type="button" class="tab-btn" [class.active]="tab === 'history'" role="tab"
          (click)="setTab('history')">
          History
        </button>
      </div>
    </header>

    <!-- Content -->
    @if (loading) {
      <div class="state-msg">
        <span class="pulse"></span>
        Loading games…
      </div>
    } @else if (tab === 'active') {

      @if (activeGames.length === 0) {
        <div class="empty-state">
          <div class="empty-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"
              stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="2" width="20" height="20" rx="2"/>
              <path d="M8 12h8M12 8v8"/>
            </svg>
          </div>
          <p class="empty-title">No active games</p>
          <p class="empty-sub">Start a new game from the lobby to see it here.</p>
          <a routerLink="/" class="btn-primary">Go to lobby</a>
        </div>
      } @else {
        <div class="game-list">
          @for (game of activeGames; track game.gameId) {
            <div class="game-row">
              <div class="game-row-main">
                <div class="game-players">
                  <span class="player white-player">{{ game.white.displayName }}</span>
                  <span class="vs-sep">vs</span>
                  <span class="player black-player">{{ game.black.displayName }}</span>
                </div>
                <div class="game-meta">
                  <span class="status-dot active-dot"></span>
                  <span class="status-text">{{ statusLabel(game.state.status) }}</span>
                  <span class="meta-sep">·</span>
                  <span class="meta-item">{{ game.state.moves.length }} moves</span>
                  <span class="meta-sep">·</span>
                  <span class="game-id-label">{{ game.gameId.slice(0, 8) }}</span>
                </div>
              </div>
              <div class="game-row-actions">
                <button type="button" class="btn-resume" (click)="resumeGame(game.gameId)">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="5 3 19 12 5 21 5 3"/>
                  </svg>
                  Resume
                </button>
                <button type="button" class="btn-remove" title="Remove from list" (click)="removeGame(game.gameId)">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                  </svg>
                </button>
              </div>
            </div>
          }
        </div>
      }

    } @else {

      @if (finishedGames.length === 0) {
        <div class="empty-state">
          <div class="empty-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M14.5 17.5L3 6"/>
              <path d="M13 19l6-6"/><path d="M16 16l4 4"/>
              <path d="M19 21l2-2"/><path d="M15 5l4 4"/>
              <path d="M21 3l-3 1-4 4"/>
            </svg>
          </div>
          <p class="empty-title">No game history yet</p>
          <p class="empty-sub">Completed games will appear here.</p>
        </div>
      } @else {
        <div class="game-list">
          @for (game of finishedGames; track game.gameId) {
            <div class="game-row">
              <div class="game-row-main">
                <div class="game-players">
                  <span class="player white-player">{{ game.white.displayName }}</span>
                  <span class="vs-sep">vs</span>
                  <span class="player black-player">{{ game.black.displayName }}</span>
                </div>
                <div class="game-meta">
                  <span class="status-dot finished-dot"></span>
                  <span class="status-text">{{ statusLabel(game.state.status) }}</span>
                  <span class="meta-sep">·</span>
                  <span class="meta-item">{{ game.state.moves.length }} moves</span>
                  <span class="meta-sep">·</span>
                  <span class="game-id-label">{{ game.gameId.slice(0, 8) }}</span>
                </div>
              </div>
              <div class="game-row-actions">
                <button type="button" class="btn-view" (click)="resumeGame(game.gameId)">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                  </svg>
                  View
                </button>
                <button type="button" class="btn-remove" title="Remove from list" (click)="removeGame(game.gameId)">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                  </svg>
                </button>
              </div>
            </div>
          }
        </div>
      }

    }

  </div>
</div>