@for (a of announcements(); track a.id) {
  <div class="announcement" [class.read]="a.read">
    <button class="dismiss" title="Dismiss" (click)="dismiss(a)">✕</button>
    <div class="label">📣 Announcement</div>
    <div class="content" [innerHTML]="a.content"></div>
    <div class="reactions">
      @for (r of a.reactions; track r.name) {
        <button class="reaction" [class.on]="r.me" (click)="toggleReaction(a, r.name)">
          {{ r.name }} <span>{{ r.count }}</span>
        </button>
      }
      <span class="picker">
        @for (e of quickReactions; track e) {
          <button class="add-reaction" [title]="'React ' + e" (click)="toggleReaction(a, e)">{{ e }}</button>
        }
      </span>
    </div>
  </div>
}