task-stream/libs/web/tracker/presenters/src/lib/pages/project-shell.page.ts

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  input,
} from '@angular/core';
import {
  Router,
  RouterLink,
  RouterLinkActive,
  RouterOutlet,
} from '@angular/router';
import { AuthFacade } from '@task-stream/web/identity/application';
import { PiNoteComponent, PiSpinnerComponent } from '@pi/ui';
import {
  ProjectFacade,
  provideProjectFacade,
} from '@task-stream/web/tracker/application';
import { AvatarsComponent } from '../ui/avatars';
import { projectTone, PUBLIC_TONE, ROLE } from '../ui/copy';

/** /p/:key — loads the project once for all its tabs (its store and facade are scoped here). */
@Component({
  selector: 'ts-project-shell',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
    AvatarsComponent,
    PiSpinnerComponent,
    PiNoteComponent,
  ],
  providers: [provideProjectFacade()],
  template: `
    @if (facade.project(); as project) {
      <header class="ts-project-header" [style.--tone]="tone(project.key)">
        <div class="ts-project-header__main">
          <p class="ts-eyebrow">
            @if (auth.isAuthenticated()) {
              <a class="ts-plain-link" routerLink="/">Proyectos</a> /
            } @else {
              <a class="ts-plain-link" routerLink="/explorar">Explorar</a> /
            }
            {{ project.key }}
            @if (facade.myRole(); as role) {
              · {{ roleLabel(role) }}
            }
            @if (project.isPublic) {
              <span class="ts-pill" [style.--tone]="publicTone">Público</span>
            }
          </p>
          <h1>
            <span class="ts-project-header__key">{{ project.key }}</span>
            {{ project.name }}
          </h1>
          @if (project.description) {
            <p class="ts-project-header__description">
              {{ project.description }}
            </p>
          }
        </div>
        <div class="ts-project-header__team">
          <ts-avatars [names]="memberNames()" [max]="6" />
          <a class="ts-project-header__people ts-mono" routerLink="members"
            >{{ project.members.length }} en el equipo</a
          >
        </div>
      </header>
      @if (!facade.myRole()) {
        <p class="ts-readonly" role="note">
          Proyecto público: lo estás viendo en modo lectura.
          @if (!auth.isAuthenticated()) {
            <a
              class="ts-plain-link"
              routerLink="/login"
              [queryParams]="{ returnUrl: url() }"
              >Inicia sesión</a
            >
            si eres del equipo.
          }
        </p>
      }
      <nav class="ts-tabs" aria-label="Secciones del proyecto">
        <a routerLink="board" routerLinkActive="is-active">Tablero</a>
        <a routerLink="epics" routerLinkActive="is-active">Épicas</a>
        <a routerLink="releases" routerLinkActive="is-active">Releases</a>
        <a routerLink="dashboard" routerLinkActive="is-active">Seguimiento</a>
        <a routerLink="analytics" routerLinkActive="is-active">Estadísticas</a>
        <a routerLink="activity" routerLinkActive="is-active">Actividad</a>
        <a routerLink="members" routerLinkActive="is-active">Miembros</a>
        @if (facade.canManage()) {
          <a routerLink="settings" routerLinkActive="is-active"
            >Configuración</a
          >
        }
      </nav>
      <router-outlet />
    } @else if (facade.error(); as error) {
      <pi-note
        gap="xs"
        status="error"
        appearance="fill"
        type="status"
        title="No se pudo abrir el proyecto"
        [text]="
          auth.isAuthenticated()
            ? error
            : 'No existe o no es público. Si es de tu equipo, inicia sesión.'
        "
      />
      @if (!auth.isAuthenticated()) {
        <p class="ts-center-actions">
          <a
            class="ts-plain-link"
            routerLink="/login"
            [queryParams]="{ returnUrl: url() }"
            >Iniciar sesión</a
          >
          ·
          <a class="ts-plain-link" routerLink="/explorar"
            >Ver proyectos públicos</a
          >
        </p>
      }
    } @else {
      <div class="ts-center">
        <pi-spinner [isLoading]="true" [diameter]="40" />
      </div>
    }
  `,
  styles: `
    .ts-eyebrow .ts-pill {
      margin-left: 0.5rem;
      letter-spacing: 0;
      text-transform: none;
      vertical-align: middle;
    }
    .ts-readonly {
      margin: 1rem 0 0;
      padding: 0.625rem 0.875rem;
      border-radius: 0.625rem;
      background: color-mix(in srgb, var(--ts-c-teal) 8%, var(--ts-surface));
      border: 1px solid color-mix(in srgb, var(--ts-c-teal) 25%, transparent);
      font-size: 0.875rem;
      color: var(--ts-ink-soft);
      a {
        font-weight: 600;
        color: var(--ts-brand);
      }
    }
    .ts-center-actions {
      margin: 1rem 0 0;
      font-size: 0.875rem;
      a {
        font-weight: 600;
        color: var(--ts-brand);
      }
    }
    .ts-project-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      h1 {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.25rem 0.875rem;
        margin: 0.5rem 0 0;
        font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
        font-weight: 700;
        line-height: 1.05;
      }
    }
    .ts-project-header__main {
      min-width: 0;
    }
    .ts-project-header__key {
      font-family: var(--ts-font-mono);
      font-size: 0.55em;
      font-weight: 600;
      letter-spacing: -0.03em;
      color: var(--tone);
    }
    .ts-project-header__description {
      max-width: 48rem;
      margin: 0.5rem 0 0;
      color: var(--ts-muted);
    }
    .ts-project-header__team {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .ts-project-header__people {
      font-size: 0.75rem;
      color: var(--ts-muted);
      text-decoration: none;
      &:hover {
        color: var(--ts-ink);
      }
    }
  `,
})
export class ProjectShellPage {
  /** Route param (`withComponentInputBinding`). */
  readonly key = input.required<string>();

  protected readonly facade = inject(ProjectFacade);
  protected readonly auth = inject(AuthFacade);
  private readonly router = inject(Router);
  protected readonly publicTone = PUBLIC_TONE;
  /** Where to come back after signing in. */
  protected readonly url = () => this.router.url;
  protected readonly roleLabel = (role: keyof typeof ROLE) => ROLE[role];
  protected readonly tone = projectTone;
  protected readonly memberNames = computed(() =>
    this.facade.members().map((m) => m.user.name),
  );

  constructor() {
    effect(() => this.facade.open(this.key()));
  }
}