pigui/task-stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: public projects, project deletion and sagas

Browse Source 
Public projects:
- Project.isPublic (create/update, owners and admins). Anyone can read a
  public project without a token: project, board, tickets, comments,
  history, releases, activity, tracking and statistics, over GraphQL and
  REST. Writes stay for members (401 anonymous, 403 outsiders).
- @OptionalAuth() / @ApiOptionalPireonAuth(): anonymous callers allowed,
  invalid tokens still rejected. ReadAccess lets anonymous viewers read
  public projects only; linked tickets are filtered by visibility.
- publicProjects (GraphQL) and GET /api/explore/projects (REST).
- Web: «Explorar» page, project pages open without a session (read-only
  notice, sign-in hints), public badge, visibility switch in settings,
  no realtime subscriptions without a session.

Project deletion:
- Owner only, confirming the key (deleteProject / DELETE
  /api/projects/{project}?confirm=KEY). The key is freed; the read model
  drops the project and members are notified (web goes home).

Sagas (run by the EventsBridge after projections, durable and ordered):
- ProjectDeletionSaga: project deleted → delete its tickets and releases;
  ticket deleted → purge its comments and drop links from other tickets.
- ReleaseArchivedSaga: unfinished tickets leave an archived release.
- UserDeactivatedSaga: the Pireon webhook records UserDeactivatedEvent in
  the event store (EventRecorder); the tracker unassigns that user's open
  tickets as the system actor.
- Internal idempotent commands; domain refusals are logged and skipped,
  concurrency conflicts retried. Affected streams come from the event store
  (TrackerStreamsRepository).

Tests: domain lifecycle specs, saga specs run like the bridge, facade
tests, e2e for public access, cascade deletion, archived releases and
deactivation webhook. Docs, READMEs, schema.gql/openapi.json and Word/PDF
updated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-10-07 07:04:20 +02:00
parent 0e301ad545
commit e656222b54
164 changed files with 3862 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
libs/web/tracker/presenters/README.md
View File

@@ -8,8 +8,9 @@ Pantallas del tracker con `@pi/ui`.
## Contenido
- Rutas `trackerRoutes`: inicio (proyectos + «Mi trabajo», `pages/my-work.ts`), tablero kanban (drag & drop), ticket,
releases, seguimiento, estadísticas, actividad, miembros y configuración.
- `ui/`: `IssueCardComponent`, `AvatarsComponent`, `GoToComponent` («Ir a… WEB-12»), `SeriesChartComponent` (gráficas
releases, seguimiento, estadísticas, actividad, miembros y configuración (con visibilidad y borrado), más
«Explorar» (`pages/explore.page.ts`). Solo la portada exige sesión.
- `ui/`: `IssueCardComponent`, `AvatarsComponent`, `GoToComponent` («Ir a… WEB-12»), `ProjectCardComponent`, `SeriesChartComponent` (gráficas
SVG de líneas y áreas apiladas) y `copy.ts` (textos y tonos; estados, tipos y áreas salen del `Workflow` del proyecto).
## Comandos

94
libs/web/tracker/presenters/src/lib/pages/explore.page.ts Normal file
View File

@@ -0,0 +1,94 @@
import {
ChangeDetectionStrategy,
Component,
inject,
OnInit,
} from '@angular/core';
import { RouterLink } from '@angular/router';
import {
PiEmptyStateComponent,
PiNoteComponent,
PiSkeletonComponent,
} from '@pi/ui';
import { AuthFacade } from '@task-stream/web/identity/application';
import { ExploreFacade } from '@task-stream/web/tracker/application';
import { ProjectCardComponent } from '../ui/project-card';
/** /explorar — public projects, for anyone (no sign-in needed). */
@Component({
selector: 'ts-explore-page',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
RouterLink,
PiEmptyStateComponent,
PiNoteComponent,
PiSkeletonComponent,
ProjectCardComponent,
],
template: `
<header class="ts-page-header">
<div>
<p class="ts-eyebrow">Pireon · TaskStream</p>
<h1>Proyectos <span class="ts-gradient-text">públicos</span></h1>
<p>
Su tablero, tickets, releases, actividad y estadísticas se pueden ver
sin iniciar sesión.
@if (!auth.isAuthenticated()) {
<a class="ts-plain-link ts-strong" routerLink="/login"
>Inicia sesión</a
>
para ver los de tu equipo.
}
</p>
</div>
</header>
@if (facade.error(); as error) {
<pi-note
gap="xs"
status="error"
appearance="fill"
type="status"
title="No se pudieron cargar los proyectos"
[text]="error"
/>
} @else if (!facade.loaded()) {
<div class="ts-projects">
@for (i of [1, 2, 3]; track i) {
<pi-skeleton shape="block" height="12rem" />
}
</div>
} @else if (!facade.projects().length) {
<pi-empty-state
icon="kanban"
title="Aún no hay proyectos públicos"
description="Un propietario o admin puede hacer público su proyecto en Configuración."
/>
} @else {
<div class="ts-projects">
@for (project of facade.projects(); track project.id) {
<ts-project-card [project]="project" />
}
</div>
}
`,
styles: `
.ts-strong {
font-weight: 600;
color: var(--ts-brand);
}
.ts-projects {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: 1.25rem;
}
`,
})
export class ExplorePage implements OnInit {
protected readonly facade = inject(ExploreFacade);
protected readonly auth = inject(AuthFacade);
ngOnInit(): void {
this.facade.load();
}
}

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

@@ -6,14 +6,20 @@ import {
inject,
input,
} from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
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, ROLE } from '../ui/copy';
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({
@@ -33,11 +39,18 @@ import { projectTone, ROLE } from '../ui/copy';
<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> /
@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>
@@ -56,6 +69,20 @@ import { projectTone, ROLE } from '../ui/copy';
>
</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="releases" routerLinkActive="is-active">Releases</a>
@@ -77,8 +104,26 @@ import { projectTone, ROLE } from '../ui/copy';
appearance="fill"
type="status"
title="No se pudo abrir el proyecto"
[text]="error"
[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" />
@@ -86,6 +131,33 @@ import { projectTone, ROLE } from '../ui/copy';
}
`,
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;
@@ -138,6 +210,11 @@ export class ProjectShellPage {
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(() =>

143
libs/web/tracker/presenters/src/lib/pages/projects.page.ts
View File

@@ -15,7 +15,6 @@ import {
pattern,
required,
} from '@angular/forms/signals';
import { RouterLink } from '@angular/router';
import {
PiActionButtonComponent,
PiEmptyStateComponent,
@@ -27,19 +26,17 @@ import {
import { DrawerService } from '@task-stream/web/shared/ui';
import { ProjectsFacade } from '@task-stream/web/tracker/application';
import { AuthFacade } from '@task-stream/web/identity/application';
import { AvatarsComponent } from '../ui/avatars';
import { GoToComponent } from '../ui/go-to';
import { ProjectCardComponent } from '../ui/project-card';
import { MyWorkComponent } from './my-work';
import { projectTone, timeAgo } from '../ui/copy';
@Component({
selector: 'ts-projects-page',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
RouterLink,
FormField,
AvatarsComponent,
GoToComponent,
ProjectCardComponent,
MyWorkComponent,
PiActionButtonComponent,
PiEmptyStateComponent,
@@ -101,32 +98,7 @@ import { projectTone, timeAgo } from '../ui/copy';
} @else {
<div class="ts-projects">
@for (project of facade.sorted(); track project.id) {
<a
class="ts-project ts-card-link"
[routerLink]="['/p', project.key]"
[style.--tone]="tone(project.key)"
>
<div class="ts-project__top">
<span class="ts-project__key">{{ project.key }}</span>
<span class="ts-project__updated ts-mono">{{
ago(project.updatedAt)
}}</span>
</div>
<h2 class="ts-project__name">{{ project.name }}</h2>
@if (project.description) {
<p class="ts-project__description">{{ project.description }}</p>
}
<div class="ts-project__bottom">
<ts-avatars [names]="memberNames(project.members)" />
<span class="ts-project__count ts-mono"
>{{ project.members.length }}
{{
project.members.length === 1 ? 'persona' : 'personas'
}}</span
>
<span class="ts-project__go" aria-hidden="true">→</span>
</div>
</a>
<ts-project-card [project]="project" />
}
</div>
}
@@ -151,6 +123,14 @@ import { projectTone, timeAgo } from '../ui/copy';
>
<pi-label>Descripción</pi-label>
</pi-textarea>
<label class="ts-public-check">
<input type="checkbox" [formField]="f.isPublic" />
<span>
<strong>Proyecto público</strong>
Cualquiera, también sin iniciar sesión, podrá verlo (solo lectura).
Se puede cambiar después en Configuración.
</span>
</label>
<pi-action-button
size="w100"
color="primary"
@@ -183,77 +163,30 @@ import { projectTone, timeAgo } from '../ui/copy';
font-weight: 400;
}
}
.ts-public-check {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.8125rem;
color: var(--ts-muted);
cursor: pointer;
input {
width: 1rem;
height: 1rem;
margin-top: 0.125rem;
accent-color: var(--ts-brand);
}
strong {
display: block;
color: var(--ts-ink);
font-size: 0.875rem;
}
}
.ts-projects {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: 1.25rem;
}
.ts-project {
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 0.375rem;
min-height: 12rem;
padding: 1.5rem 1.5rem 1.25rem;
&:hover .ts-project__go {
opacity: 1;
transform: none;
}
}
.ts-project__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.ts-project__key {
font-family: var(--ts-font-mono);
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--tone);
}
.ts-project__updated {
font-size: 0.75rem;
color: var(--ts-muted);
}
.ts-project__name {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.15;
}
.ts-project__description {
margin: 0;
color: var(--ts-muted);
font-size: 0.9rem;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ts-project__bottom {
display: flex;
align-items: center;
gap: 0.625rem;
margin-top: 0.75rem;
padding-top: 0.875rem;
border-top: 1px dashed var(--ts-line);
}
.ts-project__count {
font-size: 0.75rem;
color: var(--ts-muted);
}
.ts-project__go {
margin-left: auto;
font-size: 1.125rem;
color: var(--tone);
opacity: 0;
transform: translateX(-4px);
transition:
opacity 0.18s ease,
transform 0.18s ease;
}
`,
})
export class ProjectsPage implements OnInit {
@@ -266,7 +199,12 @@ export class ProjectsPage implements OnInit {
private readonly createForm =
viewChild.required<TemplateRef<unknown>>('createForm');
private readonly model = signal({ key: '', name: '', description: '' });
private readonly model = signal({
key: '',
name: '',
description: '',
isPublic: false,
});
protected readonly f = form(this.model, (p) => {
required(p.key);
pattern(p.key, /^[A-Za-z][A-Za-z0-9]{1,9}$/, {
@@ -276,28 +214,25 @@ export class ProjectsPage implements OnInit {
maxLength(p.name, 120);
});
protected readonly ago = timeAgo;
protected readonly tone = projectTone;
protected readonly pad = (n: number) => String(n).padStart(2, '0');
protected readonly memberNames = (members: { user: { name: string } }[]) =>
members.map((m) => m.user.name);
ngOnInit(): void {
this.facade.load();
}
protected openCreate(): void {
this.model.set({ key: '', name: '', description: '' });
this.model.set({ key: '', name: '', description: '', isPublic: false });
this.drawer.open('Nuevo proyecto', this.createForm());
}
protected create(): void {
if (this.f().invalid()) return;
const { key, name, description } = this.model();
const { key, name, description, isPublic } = this.model();
this.facade.create({
key: key.toUpperCase(),
name,
description: description || null,
isPublic,
});
this.drawer.closeAll();
}

187
libs/web/tracker/presenters/src/lib/pages/settings.page.ts
View File

@@ -80,6 +80,38 @@ function idFrom(name: string): string {
/>
}
@if (facade.project(); as project) {
<section
class="ts-panel ts-block ts-visibility"
aria-labelledby="vis-title"
>
<div>
<h3 id="vis-title">Visibilidad</h3>
<p class="ts-muted">
@if (project.isPublic) {
Público: cualquiera, también sin iniciar sesión, ve el tablero,
los tickets, los comentarios, las releases, la actividad y las
estadísticas (en la web, por GraphQL y por REST). Solo los
miembros pueden cambiar algo.
} @else {
Privado: solo los miembros del proyecto lo ven.
}
</p>
</div>
<label class="ts-switch">
<input
type="checkbox"
role="switch"
[checked]="project.isPublic"
[disabled]="!facade.canManage()"
(change)="facade.setPublic($any($event.target).checked)"
/>
<span class="ts-switch__track" aria-hidden="true"></span>
<span>{{ project.isPublic ? 'Público' : 'Privado' }}</span>
</label>
</section>
}
@if (draft(); as d) {
<form
class="ts-settings"
@@ -412,6 +444,47 @@ function idFrom(name: string): string {
</footer>
}
</form>
@if (facade.isOwner() && facade.project(); as project) {
<section
class="ts-panel ts-block ts-danger"
aria-labelledby="danger-title"
>
<div>
<h3 id="danger-title">Eliminar el proyecto</h3>
<p class="ts-muted">
Se borran sus tickets, comentarios y releases, y los enlaces que
tickets de otros proyectos tengan hacia los suyos. La clave
{{ project.key }} queda libre. No se puede deshacer.
</p>
</div>
<div class="ts-danger__confirm">
<label class="ts-danger__label">
<span
>Escribe <code>{{ project.key }}</code> para confirmar</span
>
<input
class="ts-input"
autocomplete="off"
spellcheck="false"
[value]="confirmKey()"
(input)="confirmKey.set($any($event.target).value)"
/>
</label>
<button
type="button"
class="ts-delete"
[disabled]="
confirmKey().trim().toUpperCase() !== project.key ||
facade.deleting()
"
(click)="facade.deleteProject(confirmKey())"
>
{{ facade.deleting() ? 'Eliminando…' : 'Eliminar proyecto' }}
</button>
</div>
</section>
}
}
<ng-template
@@ -452,10 +525,120 @@ function idFrom(name: string): string {
</ng-template>
`,
styles: `
:host {
display: grid;
gap: 1rem;
}
.ts-block.ts-visibility,
.ts-block.ts-danger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
> div {
flex: 1 1 26rem;
}
p {
max-width: 46rem;
margin: 0.25rem 0 0;
font-size: 0.8125rem;
}
}
.ts-switch {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
input:focus-visible + .ts-switch__track {
outline: 2px solid var(--ts-brand);
outline-offset: 2px;
}
input:disabled ~ * {
opacity: 0.6;
cursor: default;
}
}
.ts-switch__track {
position: relative;
width: 2.5rem;
height: 1.375rem;
border-radius: 999px;
background: var(--ts-line-strong);
transition: background-color 0.15s ease;
&::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--ts-surface);
box-shadow: var(--ts-shadow);
transition: transform 0.15s ease;
}
}
.ts-switch input:checked + .ts-switch__track {
background: var(--ts-brand);
&::after {
transform: translateX(1.125rem);
}
}
.ts-danger {
border: 1px solid color-mix(in srgb, var(--ts-c-red) 45%, transparent);
h3 {
color: var(--ts-c-red);
}
}
.ts-danger__confirm {
display: flex;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.ts-danger__label {
display: grid;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--ts-ink-soft);
code {
font-family: var(--ts-font-mono);
font-weight: 600;
}
.ts-input {
width: 12rem;
}
}
.ts-delete {
min-width: 0 !important;
height: 2.125rem;
padding: 0 1rem !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--ts-c-red) !important;
color: #fff !important;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
&:disabled {
opacity: 0.45;
cursor: default;
}
}
.ts-settings {
display: grid;
gap: 1rem;
padding-bottom: 5rem;
padding-bottom: 0;
}
fieldset {
display: grid;
@@ -745,6 +928,8 @@ export class SettingsPage {
() => this.facade.project()?.settings ?? null,
);
protected readonly draft = signal<ProjectSettings | null>(null);
/** The key, typed to confirm deleting the project. */
protected readonly confirmKey = signal('');
protected readonly dirty = computed(
() =>

14
libs/web/tracker/presenters/src/lib/tracker.routes.ts
View File

@@ -1,13 +1,25 @@
import { Routes } from '@angular/router';
import { authGuard } from '@task-stream/web/identity/presenters';
/** Everything behind authentication. */
/**
* The tracker. Home needs a session; project pages and «Explorar» don't:
* public projects can be read by anyone (the API decides what each visitor
* sees, and pages hide what they cannot change).
*/
export const trackerRoutes: Routes = [
{
path: '',
canActivate: [authGuard],
title: 'Proyectos · TaskStream',
loadComponent: () =>
import('./pages/projects.page').then((m) => m.ProjectsPage),
},
{
path: 'explorar',
title: 'Proyectos públicos · TaskStream',
loadComponent: () =>
import('./pages/explore.page').then((m) => m.ExplorePage),
},
{
path: 'p/:key',
loadComponent: () =>

3
libs/web/tracker/presenters/src/lib/ui/copy.ts
View File

@@ -22,6 +22,9 @@ type ChipColor =
/** CSS colour of a settings colour token (`--ts-c-*` in styles.scss). */
export const tone = (color: string) => `var(--ts-c-${color}, var(--ts-muted))`;
/** Badge of public projects (readable without signing in). */
export const PUBLIC_TONE = tone('teal');
/** A status as the UI shows it: the project's name and colour. */
export function statusLook(workflow: Workflow, id: string) {
const status = workflow.status(id);

126
libs/web/tracker/presenters/src/lib/ui/project-card.ts Normal file
View File

@@ -0,0 +1,126 @@
import {
ChangeDetectionStrategy,
Component,
computed,
input,
} from '@angular/core';
import { RouterLink } from '@angular/router';
import { Project } from '@task-stream/web/tracker/domain';
import { AvatarsComponent } from './avatars';
import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
/** A project in a list (my projects, public projects): key, name, team. */
@Component({
selector: 'ts-project-card',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [RouterLink, AvatarsComponent],
template: `
<a
class="ts-project ts-card-link"
[routerLink]="['/p', project().key]"
[style.--tone]="tone()"
>
<div class="ts-project__top">
<span class="ts-project__key">{{ project().key }}</span>
@if (project().isPublic) {
<span class="ts-pill" [style.--tone]="publicTone">Público</span>
}
<span class="ts-project__updated ts-mono">{{
ago(project().updatedAt)
}}</span>
</div>
<h2 class="ts-project__name">{{ project().name }}</h2>
@if (project().description) {
<p class="ts-project__description">{{ project().description }}</p>
}
<div class="ts-project__bottom">
<ts-avatars [names]="memberNames()" />
<span class="ts-project__count ts-mono"
>{{ project().members.length }}
{{ project().members.length === 1 ? 'persona' : 'personas' }}</span
>
<span class="ts-project__go" aria-hidden="true">→</span>
</div>
</a>
`,
styles: `
:host {
display: block;
}
.ts-project {
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 0.375rem;
min-height: 12rem;
padding: 1.5rem 1.5rem 1.25rem;
&:hover .ts-project__go {
opacity: 1;
transform: none;
}
}
.ts-project__top {
display: flex;
align-items: center;
gap: 0.625rem;
}
.ts-project__key {
font-family: var(--ts-font-mono);
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--tone);
}
.ts-project__updated {
margin-left: auto;
font-size: 0.75rem;
color: var(--ts-muted);
}
.ts-project__name {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.15;
}
.ts-project__description {
margin: 0;
color: var(--ts-muted);
font-size: 0.9rem;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ts-project__bottom {
display: flex;
align-items: center;
gap: 0.625rem;
margin-top: 0.75rem;
padding-top: 0.875rem;
border-top: 1px dashed var(--ts-line);
}
.ts-project__count {
font-size: 0.75rem;
color: var(--ts-muted);
}
.ts-project__go {
margin-left: auto;
font-size: 1.125rem;
color: var(--tone);
opacity: 0;
transform: translateX(-4px);
transition:
opacity 0.18s ease,
transform 0.18s ease;
}
`,
})
export class ProjectCardComponent {
readonly project = input.required<Project>();
protected readonly tone = computed(() => projectTone(this.project().key));
protected readonly memberNames = computed(() =>
this.project().members.map((m) => m.user.name),
);
protected readonly ago = timeAgo;
protected readonly publicTone = PUBLIC_TONE;
}