feat: pinned tickets, at hand on the home page and in search

Each person pins up to 20 tickets from the ticket's page («Fijar»). They
show as a strip under the projects on the home page and in the search
palette before typing. Private and without history, like the views of
«my work» (Mongo `pinned_issues`); tickets in the trash or out of reach
are left out, and when the list is full the unreadable ones are dropped
first.

API: GET /api/me/pins, PUT/DELETE /api/issues/{issue}/pin; GraphQL
myPins, pinIssue, unpinIssue and Issue.pinned.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

libs/web/tracker/presenters/src/lib/ui/command-palette.ts

@@ -30,6 +30,15 @@ import {
   switchMap,
 } from 'rxjs';
 
+/** A ticket as a result of the palette. */
+const issueResult = (i: IssueSummary): Result => ({
+  id: `i:${i.id}`,
+  kind: 'issue',
+  label: `${i.key} · ${i.title}`,
+  detail: i.assignee?.name ?? '',
+  url: `/p/${i.key.slice(0, i.key.lastIndexOf('-'))}/issues/${i.key}`,
+});
+
 interface Result {
   id: string;
   kind: 'project' | 'issue';
@@ -102,7 +111,11 @@ interface Result {
                 (keydown.enter)="go(result)"
               >
                 <span class="ts-palette__kind">{{
-                  result.kind === 'project' ? 'Proyecto' : 'Ticket'
+                  result.kind === 'project'
+                    ? 'Proyecto'
+                    : text().trim().length < 2
+                      ? 'Fijado'
+                      : 'Ticket'
                 }}</span>
                 <span class="ts-palette__label">{{ result.label }}</span>
                 <span class="ts-palette__detail">{{ result.detail }}</span>
@@ -242,6 +255,7 @@ export class CommandPalette {
   private readonly router = inject(Router);
   private readonly projects = inject(ProjectsFacade);
   private readonly issues = inject(IssuesGateway);
+  private readonly destroyRef = inject(DestroyRef);
   private readonly searchInput =
     viewChild<ElementRef<HTMLInputElement>>('search');
 
@@ -254,9 +268,11 @@ export class CommandPalette {
   private goTimer: ReturnType<typeof setTimeout> | null = null;
 
   private readonly foundIssues = signal<IssueSummary[]>([]);
+  /** Mine, shown before typing; read again each time it opens. */
+  protected readonly pins = signal<IssueSummary[]>([]);
   protected readonly results = computed<Result[]>(() => {
     const query = this.text().trim().toLowerCase();
-    if (query.length < 2) return [];
+    if (query.length < 2) return this.pins().map(issueResult);
     const projects = this.projects
       .sorted()
       .filter(
@@ -272,14 +288,7 @@ export class CommandPalette {
         detail: p.key,
         url: `/p/${p.key}/board`,
       }));
-    const issues = this.foundIssues().map((i) => ({
-      id: `i:${i.id}`,
-      kind: 'issue' as const,
-      label: `${i.key} · ${i.title}`,
-      detail: i.assignee?.name ?? '',
-      url: `/p/${i.key.slice(0, i.key.lastIndexOf('-'))}/issues/${i.key}`,
-    }));
-    return [...projects, ...issues];
+    return [...projects, ...this.foundIssues().map(issueResult)];
   });
 
   constructor() {
@@ -296,7 +305,7 @@ export class CommandPalette {
                 catchError(() => of([])),
               ),
         ),
-        takeUntilDestroyed(inject(DestroyRef)),
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe((found) => this.foundIssues.set(found));
     effect(() => {
@@ -349,8 +358,16 @@ export class CommandPalette {
   }
 
   protected open(mode: 'search' | 'help'): void {
-    if (mode === 'search' && !this.projects.sorted().length)
-      this.projects.load();
+    if (mode === 'search') {
+      if (!this.projects.sorted().length) this.projects.load();
+      this.issues
+        .pins()
+        .pipe(
+          catchError(() => of([])),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe((pins) => this.pins.set(pins));
+    }
     this.mode.set(mode);
   }
 

libs/web/tracker/presenters/src/lib/ui/home/pinned.ts

@@ -0,0 +1,172 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  inject,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RouterLink } from '@angular/router';
+import { PiIconComponent } from '@pi/ui';
+import { ToastService } from '@task-stream/web/shared/ui';
+import {
+  IssuesGateway,
+  IssueSummary,
+  StatusCategory,
+} from '@task-stream/web/tracker/domain';
+
+/**
+ * The tickets I pinned, at hand on the home page: one strip, only when
+ * there are some (they are pinned from the ticket's page).
+ */
+@Component({
+  selector: 'ts-pinned',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, PiIconComponent],
+  template: `
+    @if (pins().length) {
+      <section class="ts-pinned" aria-labelledby="pinned-title">
+        <h2 id="pinned-title">
+          <pi-icon icon="pin" size="small" />
+          Fijados
+        </h2>
+        <ul role="list">
+          @for (pin of pins(); track pin.id) {
+            <li [class.is-done]="pin.statusCategory === done">
+              <a [routerLink]="['/p', projectOf(pin.key), 'issues', pin.key]">
+                <span class="ts-pinned__key">{{ pin.key }}</span>
+                <span class="ts-pinned__title">{{ pin.title }}</span>
+              </a>
+              <button
+                type="button"
+                class="ts-pinned__unpin"
+                [attr.aria-label]="'Quitar ' + pin.key + ' de fijados'"
+                title="Quitar de fijados"
+                (click)="unpin(pin)"
+              >
+                ×
+              </button>
+            </li>
+          }
+        </ul>
+      </section>
+    }
+  `,
+  host: { '[style.display]': "pins().length ? 'block' : 'none'" },
+  styles: `
+    .ts-pinned {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem 1rem;
+      flex-wrap: wrap;
+    }
+    h2 {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      margin: 0;
+      color: var(--ts-muted);
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    li {
+      display: inline-flex;
+      align-items: center;
+      max-width: min(100%, 22rem);
+      border: 1px solid var(--ts-line);
+      border-radius: 999px;
+      background: var(--ts-surface);
+      &:hover,
+      &:focus-within {
+        border-color: color-mix(in srgb, var(--ts-brand) 45%, var(--ts-line));
+      }
+      &.is-done .ts-pinned__title {
+        color: var(--ts-muted);
+        text-decoration: line-through;
+      }
+    }
+    a {
+      display: inline-flex;
+      align-items: baseline;
+      gap: 0.5rem;
+      min-width: 0;
+      padding: 0.375rem 0.25rem 0.375rem 0.875rem;
+      color: inherit;
+      font-size: 0.875rem;
+      text-decoration: none;
+    }
+    .ts-pinned__key {
+      flex: none;
+      color: var(--ts-muted);
+      font-family: var(--ts-font-mono);
+      font-size: 0.75rem;
+    }
+    .ts-pinned__title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    /* A plain glyph, not @pi/ui's sized button. */
+    .ts-pinned__unpin {
+      flex: none;
+      width: 1.75rem !important;
+      min-width: 0 !important;
+      height: 1.75rem !important;
+      margin-right: 0.25rem;
+      padding: 0 !important;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      color: var(--ts-muted);
+      font-size: 1.125rem;
+      line-height: 1;
+      cursor: pointer;
+      &:hover,
+      &:focus-visible {
+        background: var(--ts-sunken);
+        color: var(--ts-ink);
+      }
+    }
+  `,
+})
+export class PinnedComponent {
+  private readonly gateway = inject(IssuesGateway);
+  private readonly toast = inject(ToastService);
+  private readonly destroyRef = inject(DestroyRef);
+  protected readonly pins = signal<IssueSummary[]>([]);
+  protected readonly done = StatusCategory.DONE;
+
+  constructor() {
+    this.gateway
+      .pins()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({ next: (pins) => this.pins.set(pins), error: () => null });
+  }
+
+  protected projectOf(key: string): string {
+    return key.slice(0, key.lastIndexOf('-'));
+  }
+
+  protected unpin(pin: IssueSummary): void {
+    this.pins.update((list) => list.filter((p) => p.id !== pin.id));
+    this.gateway
+      .pin(pin.id, false)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        error: () => {
+          this.toast.error(`No se pudo quitar ${pin.key} de fijados`);
+          this.pins.update((list) => [pin, ...list]);
+        },
+      });
+  }
+}