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/pages/board.page.ts

@@ -772,6 +772,9 @@ export class BoardPage {
     event: CdkDragDrop<BoardColumn, BoardColumn, IssueSummary>,
   ): void {
     if (event.previousContainer === event.container) return;
+    // Let go over a column it may not enter: the CDK leaves it in the last
+    // one it could, which is not where the person aimed. Back where it was.
+    if (!event.isPointerOverContainer) return;
     const to = event.container.data.status;
     const issueId = event.item.data.id;
     const target = this.board.columns().find((c) => c.status === to);

libs/web/tracker/presenters/src/lib/pages/issue.page.scss

@@ -562,102 +562,6 @@ a.ts-key {
   align-items: center;
 }
 
-// Waiting for other tickets: shown next to the key, with links to them.
-.ts-blocked {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  align-items: center;
-  padding: 0.125rem 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.8125rem;
-  font-weight: 600;
-  .ts-key {
-    color: inherit;
-  }
-}
-
-// 👍 2 · 🎉 1 · (+)
-.ts-reactions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  align-items: center;
-  margin-top: 0.5rem;
-}
-.ts-reaction {
-  display: inline-flex;
-  gap: 0.25rem;
-  align-items: center;
-  // @pi/ui styles every <button> too specifically to override otherwise.
-  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);
-    }
-  }
-}
-
 .ts-votes {
   padding: 0.25rem 0.625rem;
   border: 1px solid var(--ts-line);

libs/web/tracker/presenters/src/lib/pages/issue.page.ts

@@ -49,7 +49,6 @@ import {
   mentionQuery,
   POINT_SCALE,
   ReleaseStatus,
-  REACTIONS,
 } from '@task-stream/web/tracker/domain';
 import {
   clock,
@@ -63,6 +62,8 @@ import {
   typeLook,
 } from '../ui/copy';
 import { AttachmentItem } from '../ui/attachments';
+import { BlockedComponent } from '../ui/blocked';
+import { ReactionsComponent } from '../ui/reactions';
 import {
   AttachmentLoader,
   ImageUploader,
@@ -79,6 +80,8 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
   selector: 'ts-issue-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    BlockedComponent,
+    ReactionsComponent,
     MarkdownComponent,
     MarkdownHintComponent,
     PasteImagesDirective,
@@ -144,19 +147,7 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
                 </a>
               }
               @if (issue.blockedBy.length) {
-                <span
-                  class="ts-blocked"
-                  role="status"
-                  [title]="blockedTitle(issue.blockedBy)"
-                >
-                  <pi-icon icon="lock" size="x-small" aria-hidden="true" />
-                  Bloqueado por
-                  @for (blocker of issue.blockedBy; track blocker.id) {
-                    <a class="ts-key" [routerLink]="['..', blocker.key]">{{
-                      blocker.key
-                    }}</a>
-                  }
-                </span>
+                <ts-blocked [blockers]="issue.blockedBy" />
               }
             </div>
             <div class="ts-issue__title-row">
@@ -634,50 +625,14 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
                     !comment.deleted &&
                     (comment.reactions.length || project.myRole())
                   ) {
-                    <div class="ts-reactions">
-                      @for (
-                        reaction of comment.reactions;
-                        track reaction.emoji
-                      ) {
-                        <button
-                          type="button"
-                          class="ts-reaction"
-                          [class.is-mine]="reacted(reaction)"
-                          [attr.aria-pressed]="reacted(reaction)"
-                          [title]="reactionTitle(reaction)"
-                          [disabled]="!project.myRole()"
-                          (click)="
-                            facade.react(
-                              comment.id,
-                              reaction.emoji,
-                              !reacted(reaction)
-                            )
-                          "
-                        >
-                          {{ reaction.emoji }}
-                          <span class="ts-mono">{{
-                            reaction.users.length
-                          }}</span>
-                        </button>
-                      }
-                      @if (project.myRole()) {
-                        <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 reactions; track emoji) {
-                              <button
-                                type="button"
-                                (click)="pickReaction(comment, emoji, $event)"
-                              >
-                                {{ emoji }}
-                              </button>
-                            }
-                          </div>
-                        </details>
-                      }
-                    </div>
+                    <ts-reactions
+                      [reactions]="comment.reactions"
+                      [me]="facade.me()"
+                      [canReact]="!!project.myRole()"
+                      (react)="
+                        facade.react(comment.id, $event.emoji, $event.on)
+                      "
+                    />
                   }
                   @if (!comment.deleted && filesOf(comment).length) {
                     <div class="ts-attachments">
@@ -1194,30 +1149,6 @@ export class IssuePage {
     () => this.facade.comments().filter((c) => !c.deleted).length,
   );
   protected readonly commentFiles = signal<File[]>([]);
-  protected readonly reactions = REACTIONS;
-
-  protected reacted(reaction: { users: { id: string }[] }): boolean {
-    return reaction.users.some((u) => u.id === this.facade.me());
-  }
-
-  protected reactionTitle(reaction: {
-    emoji: string;
-    users: { name: string }[];
-  }): 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 pickReaction(comment: Comment, emoji: string, event: Event): void {
-    const mine = comment.reactions.find((r) => r.emoji === emoji);
-    this.facade.react(comment.id, emoji, !(mine && this.reacted(mine)));
-    (event.target as HTMLElement).closest('details')?.removeAttribute('open');
-  }
-
-  protected blockedTitle(blockers: { key: string; title: string }[]): string {
-    return blockers.map((b) => `${b.key}: ${b.title}`).join('\n');
-  }
-
   protected duplicate(): void {
     this.facade.duplicate().subscribe({
       next: (key) => {
@@ -1285,8 +1216,24 @@ export class IssuePage {
   protected readonly maxFileBytes = MAX_FILE_BYTES;
 
   /** Files on the ticket itself; those under a comment are shown there. */
+  /** Files shown inside the description or a comment (pasted images). */
+  private readonly inlineFiles = computed(() => {
+    const texts = [
+      this.facade.issue()?.description ?? '',
+      ...this.facade.comments().map((c) => c.body),
+    ].join('\n');
+    return new Set(
+      [...texts.matchAll(/\(attachment:([\w-]{1,64})\)/g)].map((m) => m[1]),
+    );
+  });
+  /** The ticket's own files, not the ones already shown inside a text. */
   protected readonly ticketFiles = computed(
-    () => this.facade.issue()?.attachments.filter((a) => !a.commentId) ?? [],
+    () =>
+      this.facade
+        .issue()
+        ?.attachments.filter(
+          (a) => !a.commentId && !this.inlineFiles().has(a.id),
+        ) ?? [],
   );
   protected filesOf = (comment: Comment): Attachment[] =>
     this.facade

libs/web/tracker/presenters/src/lib/pages/list.page.ts

@@ -29,6 +29,7 @@ import {
   IssueSummary,
   StatusCategory,
 } from '@task-stream/web/tracker/domain';
+import { BlockedComponent } from '../ui/blocked';
 import { BulkBarComponent } from '../ui/bulk-bar';
 import { VoteComponent } from '../ui/vote';
 import {
@@ -77,6 +78,7 @@ const numberOf = (key: string) => Number(key.split('-').pop());
   selector: 'ts-list-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    BlockedComponent,
     BulkBarComponent,
     VoteComponent,
     RouterLink,
@@ -183,12 +185,11 @@ const numberOf = (key: string) => Number(key.split('-').pop());
                     issue.title
                   }}</a>
                   @if (issue.blockedBy.length) {
-                    <span
+                    <ts-blocked
                       class="ts-list__blocked"
-                      [title]="'Bloqueado por ' + blockersOf(issue)"
-                    >
-                      <pi-icon icon="lock" size="x-small" /> Bloqueado
-                    </span>
+                      [blockers]="issue.blockedBy"
+                      [compact]="true"
+                    />
                   }
                   @if (issue.parent; as parent) {
                     <span class="ts-muted ts-mono" [title]="parent.title">
@@ -388,16 +389,7 @@ const numberOf = (key: string) => Number(key.split('-').pop());
       }
     }
     .ts-list__blocked {
-      display: inline-flex;
-      gap: 0.25rem;
-      align-items: center;
       margin-left: 0.5rem;
-      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.75rem;
-      font-weight: 600;
     }
     .ts-list__type-label {
       display: inline-flex;
@@ -644,10 +636,6 @@ export class ListPage {
       this.facade.assign(issue.id, assigneeId);
   }
 
-  protected blockersOf(issue: IssueSummary): string {
-    return issue.blockedBy.map((b) => b.key).join(', ');
-  }
-
   protected isLate(issue: IssueSummary): boolean {
     return (
       !!issue.dueDate &&

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');
+  }
+}