first commit

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

@@ -0,0 +1,144 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+} from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { PiNoteComponent, PiSpinnerComponent } from '@pi/ui';
+import {
+  ProjectFacade,
+  provideProjectFacade,
+} from '@task-stream/web/tracker/application';
+import { AvatarsComponent } from '../ui/avatars';
+import { projectTone, 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">
+            <a class="ts-plain-link" routerLink="/">Proyectos</a> /
+            {{ project.key }}
+            @if (facade.myRole(); as role) {
+              · {{ roleLabel(role) }}
+            }
+          </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>
+      <nav class="ts-tabs" aria-label="Secciones del proyecto">
+        <a routerLink="board" routerLinkActive="is-active">Tablero</a>
+        <a routerLink="releases" routerLinkActive="is-active">Releases</a>
+        <a routerLink="dashboard" routerLinkActive="is-active">Seguimiento</a>
+        <a routerLink="activity" routerLinkActive="is-active">Actividad</a>
+        <a routerLink="members" routerLinkActive="is-active">Miembros</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]="error"
+      />
+    } @else {
+      <div class="ts-center">
+        <pi-spinner [isLoading]="true" [diameter]="40" />
+      </div>
+    }
+  `,
+  styles: `
+    .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 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()));
+  }
+}