feat: steadier live updates and notices for public proposals

- The web pings the live connection, reconnects when it goes quiet and
  reloads what each screen shows after reconnecting.
- Dropping a card on a column it cannot go to puts it back.
- Owners and admins get a notice when a proposal arrives.
- The proposal limit lives in Redis, so it holds across instances.
- REST tells whether I voted; pasted images leave the attachment list.
- Deleting a project removes its Git integration; no lint warnings left.
- Reactions and the blocked badge are components of their own.
- Docs: what is done and what is left (chapter 10), Word and PDF.

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

libs/web/tracker/presenters/src/lib/ui/blocked.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { PiIconComponent } from '@pi/ui';
+import { IssueParent } from '@task-stream/web/tracker/domain';
+
+/**
+ * 🔒 «Bloqueado»: the ticket waits for others still open. `compact` for
+ * cards and rows (the keys go in the tooltip); in full, they link.
+ */
+@Component({
+  selector: 'ts-blocked',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PiIconComponent, RouterLink],
+  host: { role: 'status', '[title]': 'tooltip()' },
+  template: `
+    <pi-icon icon="lock" size="x-small" aria-hidden="true" />
+    @if (compact()) {
+      Bloqueado
+    } @else {
+      Bloqueado por
+      @for (blocker of blockers(); track blocker.id) {
+        <a class="ts-key" [routerLink]="['..', blocker.key]">{{
+          blocker.key
+        }}</a>
+      }
+    }
+  `,
+  styles: `
+    :host {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: 0.25rem 0.375rem;
+      align-items: center;
+      padding: 0.0625rem 0.5rem;
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--ts-c-red, #d33) 12%, transparent);
+      color: var(--ts-c-red, var(--ts-ink));
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+    .ts-key {
+      color: inherit;
+    }
+  `,
+})
+export class BlockedComponent {
+  readonly blockers = input.required<IssueParent[]>();
+  readonly compact = input(false);
+  protected tooltip(): string {
+    return this.blockers()
+      .map((b) => `${b.key}: ${b.title}`)
+      .join('\n');
+  }
+}

libs/web/tracker/presenters/src/lib/ui/issue-card.ts

@@ -1,3 +1,4 @@
+import { BlockedComponent } from './blocked';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,7 +19,7 @@ import { initials, PRIORITY, PRIORITY_LEVEL, typeLook } from './copy';
 @Component({
   selector: 'ts-issue-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterLink, PiIconComponent],
+  imports: [RouterLink, PiIconComponent, BlockedComponent],
   template: `
     <a
       class="ts-card"
@@ -32,15 +33,7 @@ import { initials, PRIORITY, PRIORITY_LEVEL, typeLook } from './copy';
         </span>
         <span class="ts-card__key">{{ issue().key }}</span>
         @if (issue().blockedBy.length) {
-          <span
-            class="ts-card__blocked"
-            [attr.title]="
-              'Bloqueado por ' + issue().blockedBy.map(blockerKey).join(', ')
-            "
-          >
-            <pi-icon icon="lock" size="x-small" />
-            Bloqueado
-          </span>
+          <ts-blocked [blockers]="issue().blockedBy" [compact]="true" />
         }
         @if (issue().area; as area) {
           <span class="ts-card__area">{{ areaLabel(area) }}</span>
@@ -191,17 +184,6 @@ import { initials, PRIORITY, PRIORITY_LEVEL, typeLook } from './copy';
       font-weight: 600;
       color: var(--ts-ink-soft);
     }
-    .ts-card__blocked {
-      display: inline-flex;
-      gap: 0.25rem;
-      align-items: center;
-      padding: 0 0.375rem;
-      border-radius: 999px;
-      background: color-mix(in srgb, var(--ts-c-red, #d33) 12%, transparent);
-      color: var(--ts-c-red, var(--ts-ink));
-      font-size: 0.6875rem;
-      font-weight: 600;
-    }
     .ts-card__area {
       margin-left: auto;
       font-family: var(--ts-font-mono);
@@ -281,8 +263,6 @@ import { initials, PRIORITY, PRIORITY_LEVEL, typeLook } from './copy';
   `,
 })
 export class IssueCardComponent {
-  protected readonly blockerKey = (blocker: { key: string }) => blocker.key;
-
   /** Late, due today or in the next two days. */
   protected readonly due = computed(() =>
     dueState(this.issue().dueDate, this.issue().statusCategory),

libs/web/tracker/presenters/src/lib/ui/notifications-bell.ts

@@ -28,6 +28,7 @@ const ICON: Record<NotificationKind, string> = {
   [NotificationKind.COMMENTED]: 'chat',
   [NotificationKind.MENTIONED]: 'chat',
   [NotificationKind.REPLIED]: 'chat',
+  [NotificationKind.PROPOSED]: 'light-bulb',
   [NotificationKind.WATCHED]: 'focus',
   [NotificationKind.ADDED_TO_PROJECT]: 'briefcase',
   [NotificationKind.REMINDER]: 'calendar',

libs/web/tracker/presenters/src/lib/ui/reactions.ts

@@ -0,0 +1,150 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+import { PiIconComponent } from '@pi/ui';
+import { REACTIONS, UserRef } from '@task-stream/web/tracker/domain';
+
+/**
+ * 👍 2 · 🎉 1 · (+) under a comment: a click adds or takes back one's own;
+ * the (+) offers the rest. Read-only for whoever cannot react.
+ */
+@Component({
+  selector: 'ts-reactions',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PiIconComponent],
+  template: `
+    @for (reaction of reactions(); track reaction.emoji) {
+      <button
+        type="button"
+        class="ts-reaction"
+        [class.is-mine]="mine(reaction)"
+        [attr.aria-pressed]="mine(reaction)"
+        [title]="title(reaction)"
+        [disabled]="!canReact()"
+        (click)="react.emit({ emoji: reaction.emoji, on: !mine(reaction) })"
+      >
+        {{ reaction.emoji }}
+        <span class="ts-mono">{{ reaction.users.length }}</span>
+      </button>
+    }
+    @if (canReact()) {
+      <details class="ts-reaction-picker">
+        <summary title="Reaccionar" aria-label="Reaccionar">
+          <pi-icon icon="add" size="x-small" />
+        </summary>
+        <div class="ts-reaction-picker__menu">
+          @for (emoji of offered; track emoji) {
+            <button type="button" (click)="pick(emoji, $event)">
+              {{ emoji }}
+            </button>
+          }
+        </div>
+      </details>
+    }
+  `,
+  styles: `
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.375rem;
+      align-items: center;
+      margin-top: 0.5rem;
+    }
+    /* @pi/ui styles every <button> too specifically to override without !important. */
+    .ts-reaction {
+      display: inline-flex;
+      gap: 0.25rem;
+      align-items: center;
+      min-width: 0 !important;
+      height: auto !important;
+      padding: 0.125rem 0.5rem !important;
+      border: 1px solid var(--ts-line) !important;
+      border-radius: 999px !important;
+      background: var(--ts-surface);
+      color: inherit;
+      font: inherit;
+      font-size: 0.875rem;
+      cursor: pointer;
+      .ts-mono {
+        font-size: 0.75rem;
+      }
+      &.is-mine {
+        border-color: var(--ts-brand) !important;
+        background: color-mix(in srgb, var(--ts-brand) 12%, var(--ts-surface));
+      }
+      &:disabled {
+        cursor: default;
+      }
+    }
+    .ts-reaction-picker {
+      position: relative;
+      summary {
+        display: inline-grid;
+        place-items: center;
+        width: 1.75rem;
+        height: 1.625rem;
+        border: 1px dashed var(--ts-line-strong, var(--ts-line));
+        border-radius: 999px;
+        color: var(--ts-muted);
+        cursor: pointer;
+        list-style: none;
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+    }
+    .ts-reaction-picker__menu {
+      position: absolute;
+      z-index: 5;
+      bottom: calc(100% + 0.375rem);
+      left: 0;
+      display: flex;
+      gap: 0.125rem;
+      padding: 0.25rem;
+      border: 1px solid var(--ts-line);
+      border-radius: 0.75rem;
+      background: var(--ts-surface);
+      box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
+      button {
+        width: 2rem;
+        min-width: 0 !important;
+        height: 2rem;
+        padding: 0 !important;
+        border: 0 !important;
+        border-radius: 0.5rem !important;
+        background: none;
+        font-size: 1.125rem;
+        cursor: pointer;
+        &:hover {
+          background: color-mix(in srgb, var(--ts-brand) 12%, transparent);
+        }
+      }
+    }
+  `,
+})
+export class ReactionsComponent {
+  readonly reactions = input.required<{ emoji: string; users: UserRef[] }[]>();
+  /** Signed-in user's id. */
+  readonly me = input<string | null>(null);
+  readonly canReact = input(false);
+  readonly react = output<{ emoji: string; on: boolean }>();
+  protected readonly offered = REACTIONS;
+
+  protected mine(reaction: { users: UserRef[] }): boolean {
+    return reaction.users.some((u) => u.id === this.me());
+  }
+
+  protected title(reaction: { emoji: string; users: UserRef[] }): string {
+    return `${reaction.users.map((u) => u.name).join(', ')} · ${reaction.emoji}`;
+  }
+
+  /** From the picker: adds it, or takes it back if it was already there. */
+  protected pick(emoji: string, event: Event): void {
+    const current = this.reactions().find((r) => r.emoji === emoji);
+    this.react.emit({ emoji, on: !(current && this.mine(current)) });
+    (event.target as HTMLElement).closest('details')?.removeAttribute('open');
+  }
+}