@chisquare-tech/origine-ngx-apps-design 0.1.0 → 0.2.0

package/fesm2022/chisquare-tech-origine-ngx-apps-design.mjs

@@ -5,6 +5,7 @@ import { map, forkJoin, concat, last } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { RouterLink, Router, ActivatedRoute } from '@angular/router';
+import { NgTemplateOutlet } from '@angular/common';
 import { marked } from 'marked';
 
 /**
@@ -123,6 +124,34 @@ class DesignApi {
     deleteView(project, id) {
         return this.api.delete(`${D}/project/${enc(project)}/view/${enc(id)}`);
     }
+    react(commentId, reaction, on) {
+        const url = `${D}/comment/${enc(commentId)}/reaction/${reaction}`;
+        return (on ? this.api.put(url, {}) : this.api.delete(url)).pipe(map((r) => data(r) ?? []));
+    }
+    attachments(key) {
+        return this.api.get(`${D}/issue/${enc(key)}/attachment`).pipe(map((r) => data(r) ?? []));
+    }
+    /** Uploads a file as the raw request body (at most 25 MB). */
+    attach(key, file) {
+        return this.api
+            .post(`${D}/issue/${enc(key)}/attachment?filename=${encodeURIComponent(file.name)}`, null, {
+            body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' },
+        })
+            .pipe(map((r) => data(r)));
+    }
+    /** A file's bytes (the content endpoint needs the session, so no plain link works). */
+    attachmentBlob(id) {
+        return this.api.get(`${D}/attachment/${enc(id)}/content`, null, { responseType: 'blob' }).pipe(map((b) => b));
+    }
+    deleteAttachment(id) {
+        return this.api.delete(`${D}/attachment/${enc(id)}`);
+    }
+    watchState(key) {
+        return this.api.get('v1/links/watch', { kind: 'issue', ref: key }).pipe(map((r) => data(r) ?? { watching: false, watchers: [] }));
+    }
+    watch(key, on) {
+        return on ? this.api.put('v1/links/watch', { kind: 'issue', ref: key }) : this.api.delete(`v1/links/watch?kind=issue&ref=${enc(key)}`);
+    }
     development(key) {
         return this.api.get(`v1/links/issue/${enc(key)}/development`).pipe(map((r) => data(r) ?? { branches: [], commits: [], pulls: [] }));
     }
@@ -277,6 +306,10 @@ function historyLine(h, people) {
             return `${who} removed the link to ${shown(h.old, people)}`;
         case 'closed_by':
             return `${who} closed it by merging ${shown(h.new, people)}`;
+        case 'attached':
+            return `${who} attached ${typeof h.new === 'string' ? h.new : 'a file'}`;
+        case 'attachment_deleted':
+            return `${who} deleted the attachment ${typeof h.old === 'string' ? h.old : ''}`.trim();
         default:
             return `${who} ${h.kind.replace(/_/g, ' ')}`;
     }
@@ -1858,6 +1891,15 @@ const REL_LABEL = {
     blocks: 'blocks', blocked_by: 'is blocked by', relates: 'relates to', duplicates: 'duplicates', duplicated_by: 'is duplicated by',
 };
 const SEVERITIES = ['critical', 'major', 'minor', 'trivial'];
+const REACTIONS = [
+    { name: '+1', emoji: '👍', label: 'thumbs up' }, { name: '-1', emoji: '👎', label: 'thumbs down' }, { name: 'laugh', emoji: '😄', label: 'laugh' },
+    { name: 'hooray', emoji: '🎉', label: 'hooray' }, { name: 'confused', emoji: '😕', label: 'confused' }, { name: 'heart', emoji: '❤️', label: 'heart' },
+    { name: 'rocket', emoji: '🚀', label: 'rocket' }, { name: 'eyes', emoji: '👀', label: 'eyes' },
+];
+const MAX_FILE = 25 * 1024 * 1024;
+const MENTION = /\[@([^\]\n]{1,120})\]\(mention:([A-Za-z0-9_-]{1,64})\)/g;
+const esc = (s) => s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const size = (n) => (n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`);
 // /{org}/{project}/issues/PAY-142 (prototype "design_issue"): the issue's description (Markdown),
 // sub-tasks, what code names it, linked issues, comments and history; its fields on the right, each
 // editable in place by those who edit issues. Every change names the version it read, so a change
@@ -1888,6 +1930,18 @@ class IssuePage {
         this.copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
         this.confirmDelete = signal(false, ...(ngDevMode ? [{ debugName: "confirmDelete" }] : /* istanbul ignore next */ []));
         this.deleteKey = signal('', ...(ngDevMode ? [{ debugName: "deleteKey" }] : /* istanbul ignore next */ []));
+        this.attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
+        this.thumbs = signal({}, ...(ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []));
+        this.uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+        this.watching = signal(false, ...(ngDevMode ? [{ debugName: "watching" }] : /* istanbul ignore next */ []));
+        this.watchers = signal([], ...(ngDevMode ? [{ debugName: "watchers" }] : /* istanbul ignore next */ []));
+        this.picker = signal(null, ...(ngDevMode ? [{ debugName: "picker" }] : /* istanbul ignore next */ []));
+        this.mentionFor = signal(null, ...(ngDevMode ? [{ debugName: "mentionFor" }] : /* istanbul ignore next */ []));
+        this.mentionQuery = signal('', ...(ngDevMode ? [{ debugName: "mentionQuery" }] : /* istanbul ignore next */ []));
+        this.mentionIndex = signal(0, ...(ngDevMode ? [{ debugName: "mentionIndex" }] : /* istanbul ignore next */ []));
+        this.mentionStart = 0;
+        this.reactionList = REACTIONS;
+        this.size = size;
         this.titleDraft = '';
         this.descDraft = '';
         this.linkKind = 'relates';
@@ -1917,6 +1971,22 @@ class IssuePage {
             return id ? this.sprints().find((s) => s.id === id && s.state === 'completed') ?? null : null;
         }, ...(ngDevMode ? [{ debugName: "completedSprint" }] : /* istanbul ignore next */ []));
         this.html = computed(() => this.md(this.issue()?.description ?? ''), ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+        this.watcherNames = computed(() => {
+            const me = this.host.meId();
+            const ids = this.watchers();
+            if (!ids.length)
+                return 'nobody yet';
+            const names = ids.map((id) => (id === me ? 'you' : this.people().name(id)));
+            names.sort((a, b) => (a === 'you' ? -1 : b === 'you' ? 1 : 0));
+            return names.join(', ');
+        }, ...(ngDevMode ? [{ debugName: "watcherNames" }] : /* istanbul ignore next */ []));
+        this.suggestions = computed(() => {
+            const q = this.mentionQuery().toLowerCase();
+            const me = this.host.meId();
+            return this.host.people()
+                .filter((p) => p.id !== me && (!q || (p.name ?? '').toLowerCase().split(/\s+/).some((w) => w.startsWith(q)) || (p.name ?? '').toLowerCase().startsWith(q) || (p.email ?? '').toLowerCase().startsWith(q)))
+                .slice(0, 6);
+        }, ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
         this.route.paramMap.subscribe((m) => this.key.set((m.get('key') ?? '').toUpperCase()));
         effect(() => {
             const key = this.key();
@@ -1925,8 +1995,148 @@ class IssuePage {
                 untracked(() => this.loadAll(key, p.id));
         });
     }
+    /** Markdown to HTML; a mention shows the person's current name, not the label typed with it. */
     md(src) {
-        return marked.parse(src || '', { async: false, gfm: true, breaks: true });
+        const people = this.people();
+        const withMentions = (src || '').replace(MENTION, (_m, label, id) => {
+            const name = people.name(id);
+            return `<span class="mention">@${esc(name && name !== id ? name : label)}</span>`;
+        });
+        return marked.parse(withMentions, { async: false, gfm: true, breaks: true });
+    }
+    // ---- mentions ----
+    typed(el, which) {
+        const before = el.value.slice(0, el.selectionStart ?? el.value.length);
+        const m = /(^|\s)@([\p{L}\w.-]{0,30})$/u.exec(before);
+        if (!m) {
+            this.mentionFor.set(null);
+            return;
+        }
+        this.mentionStart = before.length - m[2].length - 1;
+        this.mentionQuery.set(m[2]);
+        this.mentionIndex.set(0);
+        this.mentionFor.set(which);
+    }
+    mentionKey(ev, el) {
+        if (!this.mentionFor() || !this.suggestions().length)
+            return;
+        const n = this.suggestions().length;
+        if (ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            this.mentionIndex.set((this.mentionIndex() + 1) % n);
+        }
+        else if (ev.key === 'ArrowUp') {
+            ev.preventDefault();
+            this.mentionIndex.set((this.mentionIndex() + n - 1) % n);
+        }
+        else if (ev.key === 'Enter' || ev.key === 'Tab') {
+            ev.preventDefault();
+            this.pick(this.suggestions()[this.mentionIndex()], el);
+        }
+        else if (ev.key === 'Escape') {
+            ev.preventDefault();
+            this.mentionFor.set(null);
+        }
+    }
+    closeMentionSoon() {
+        setTimeout(() => this.mentionFor.set(null), 150);
+    }
+    pick(p, el) {
+        const caret = el.selectionStart ?? el.value.length;
+        const token = `[@${(p.name || p.email || 'someone').replace(/[\[\]]/g, '')}](mention:${p.id}) `;
+        const next = el.value.slice(0, this.mentionStart) + token + el.value.slice(caret);
+        if (this.mentionFor() === 'desc')
+            this.descDraft = next;
+        else
+            this.draft.set(next);
+        el.value = next;
+        const at = this.mentionStart + token.length;
+        this.mentionFor.set(null);
+        setTimeout(() => { el.focus(); el.setSelectionRange(at, at); });
+    }
+    // ---- reactions ----
+    emoji(r) { return REACTIONS.find((x) => x.name === r)?.emoji ?? r; }
+    emojiLabel(r) { return REACTIONS.find((x) => x.name === r)?.label ?? r; }
+    reactors(ids) {
+        const me = this.host.meId();
+        return ids.map((id) => (id === me ? 'You' : this.people().name(id))).join(', ');
+    }
+    react(c, r, on) {
+        this.picker.set(null);
+        this.api.react(c.id, r, on).subscribe({
+            next: (rs) => this.comments.set(this.comments().map((x) => (x.id === c.id ? { ...x, reactions: rs } : x))),
+            error: (e) => this.fail(e, 'Could not react.'),
+        });
+    }
+    // ---- watching ----
+    toggleWatch() {
+        const is = this.issue();
+        if (!is)
+            return;
+        const on = !this.watching();
+        this.api.watch(is.key, on).subscribe({ next: () => this.loadWatch(is.key), error: (e) => this.fail(e, 'Could not change watching.') });
+    }
+    loadWatch(key) {
+        this.api.watchState(key).subscribe({ next: (w) => { this.watching.set(w.watching); this.watchers.set(w.watchers); }, error: () => undefined });
+    }
+    // ---- attachments ----
+    ext(name) {
+        const i = name.lastIndexOf('.');
+        return i > 0 && name.length - i <= 5 ? name.slice(i + 1) : 'file';
+    }
+    upload(input) {
+        const is = this.issue();
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        if (!is || !files.length)
+            return;
+        const big = files.find((f) => f.size > MAX_FILE);
+        if (big) {
+            this.error.set(`${big.name} is larger than 25 MB.`);
+            return;
+        }
+        this.uploading.set(true);
+        this.error.set('');
+        forkJoin(files.map((f) => this.api.attach(is.key, f))).subscribe({
+            next: () => { this.uploading.set(false); this.loadAttachments(is.key); this.reloadSide(is.key); },
+            error: (e) => { this.uploading.set(false); this.loadAttachments(is.key); this.fail(e, 'Could not attach the file.'); },
+        });
+    }
+    download(a) {
+        this.api.attachmentBlob(a.id).subscribe({
+            next: (b) => {
+                const url = URL.createObjectURL(b);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = a.filename;
+                link.click();
+                setTimeout(() => URL.revokeObjectURL(url), 10_000);
+            },
+            error: (e) => this.fail(e, 'Could not download the file.'),
+        });
+    }
+    removeAttachment(a) {
+        const is = this.issue();
+        if (!is)
+            return;
+        this.api.deleteAttachment(a.id).subscribe({
+            next: () => { this.loadAttachments(is.key); this.reloadSide(is.key); },
+            error: (e) => this.fail(e, 'Could not delete the file.'),
+        });
+    }
+    loadAttachments(key) {
+        this.api.attachments(key).subscribe({
+            next: (list) => {
+                this.attachments.set(list);
+                const have = this.thumbs();
+                for (const a of list) {
+                    if (a.inline && !have[a.id] && a.size <= 5 * 1024 * 1024) {
+                        this.api.attachmentBlob(a.id).subscribe({ next: (b) => this.thumbs.set({ ...this.thumbs(), [a.id]: URL.createObjectURL(b) }), error: () => undefined });
+                    }
+                }
+            },
+            error: () => undefined,
+        });
     }
     line(h) {
         return historyLine(h, this.people());
@@ -2042,7 +2252,7 @@ class IssuePage {
             return;
         this.busy.set(true);
         this.api.comment(is.key, body).subscribe({
-            next: (c) => { this.busy.set(false); this.draft.set(''); this.comments.set([...this.comments(), c]); this.reloadSide(is.key); },
+            next: (c) => { this.busy.set(false); this.draft.set(''); this.comments.set([...this.comments(), { ...c, reactions: [] }]); this.reloadSide(is.key); setTimeout(() => this.loadWatch(is.key), 800); },
             error: (e) => this.fail(e, 'Could not add the comment.'),
         });
     }
@@ -2089,6 +2299,11 @@ class IssuePage {
         this.editingTitle.set(false);
         this.editingDesc.set(false);
         this.confirmDelete.set(false);
+        this.attachments.set([]);
+        this.watchers.set([]);
+        this.watching.set(false);
+        this.loadAttachments(key);
+        this.loadWatch(key);
         forkJoin({ is: this.api.get(key), c: this.api.comments(key), h: this.api.history(key) }).subscribe({
             next: ({ is, c, h }) => { this.issue.set(is); this.comments.set(c); this.history.set([...h].reverse()); },
             error: (e) => this.error.set(e?.status === 404 ? `There is no issue ${key} you can see in this project.` : apiMessage(e, `Could not open ${key}.`)),
@@ -2112,6 +2327,7 @@ class IssuePage {
           <span class="o-mono" aria-current="page">{{ is.key }}</span>
           </nav>
           <span class="o-r o-flex">
+            <button type="button" class="o-btn o-sm" [attr.aria-pressed]="watching()" (click)="toggleWatch()" data-testid="watch">{{ watching() ? 'Watching' : 'Watch' }}</button>
             <button type="button" class="o-btn o-sm" (click)="copyLink()">{{ copied() ? 'Copied' : 'Copy link' }}</button>
             <a class="o-btn o-sm" [routerLink]="host.link('board')">Board</a>
           </span>
@@ -2136,9 +2352,11 @@ class IssuePage {
             </div>
 
             @if (editingDesc()) {
-              <div class="o-card">
+              <div class="o-card mn">
                 <label class="o-sr-only" for="is-desc">Description</label>
-                <textarea id="is-desc" class="o-in" style="border:none;box-shadow:none" [(ngModel)]="descDraft" placeholder="Write with Markdown: checklists, code blocks, images and @mentions." data-testid="desc-input"></textarea>
+                <textarea #descEl id="is-desc" class="o-in" style="border:none;box-shadow:none" [(ngModel)]="descDraft" placeholder="Write with Markdown: checklists, code blocks, images and @mentions." data-testid="desc-input"
+                  (input)="typed(descEl, 'desc')" (keydown)="mentionKey($event, descEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'desc'" aria-autocomplete="list"></textarea>
+                @if (mentionFor() === 'desc' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: descEl }" />}
                 <div class="o-cf"><span>Markdown</span><button type="button" class="o-btn o-sm o-r" (click)="editingDesc.set(false)">Cancel</button><button type="button" class="o-btn o-sm o-dark" (click)="saveDesc()" [disabled]="busy()" data-testid="desc-save">Save</button></div>
               </div>
             } @else {
@@ -2229,6 +2447,24 @@ class IssuePage {
               }
             </div>
 
+            @if (attachments().length) {
+              <div class="o-card" data-testid="attachments">
+                <div class="o-ch"><b>Attachments</b><span class="o-faint o-sm">{{ attachments().length }}</span>
+                  @if (canEdit()) {<label class="o-lnk o-r" for="att-in-2">+ Attach</label>}</div>
+                @for (a of attachments(); track a.id) {
+                  <div class="o-row" [attr.data-testid]="'attachment-' + a.filename">
+                    @if (a.inline && thumbs()[a.id]) {<img class="att-img" [src]="thumbs()[a.id]" [alt]="a.filename" />} @else {<span class="att-ic" aria-hidden="true">{{ ext(a.filename) }}</span>}
+                    <div class="o-col" style="gap:2px;min-width:0;flex:1">
+                      <button type="button" class="o-lnk o-ell" style="text-align:left" (click)="download(a)">{{ a.filename }}</button>
+                      <span class="o-faint o-xs">{{ size(a.size) }} · {{ people().name(a.uploadedBy) }} · {{ ago(a.createdAt) }}</span>
+                    </div>
+                    @if ((a.uploadedBy === host.meId() && canEdit()) || canManage()) {<button type="button" class="o-btn o-ghost o-xs" (click)="removeAttachment(a)" [attr.aria-label]="'Delete ' + a.filename">×</button>}
+                  </div>
+                }
+                @if (canEdit()) {<input id="att-in-2" class="file-in" type="file" multiple (change)="upload($any($event.target))" />}
+              </div>
+            }
+
             <div class="o-col" style="gap:12px">
               <div class="o-tabs" role="tablist">
                 <button type="button" role="tab" class="o-tab" [class.o-on]="tab() === 'comments'" [attr.aria-selected]="tab() === 'comments'" (click)="tab.set('comments')">Comments<span class="o-n">{{ comments().length }}</span></button>
@@ -2242,14 +2478,36 @@ class IssuePage {
                       <span class="o-faint o-sm">{{ ago(c.createdAt) }}{{ c.edited ? ' · edited' : '' }}</span>
                       @if (c.authorId === host.meId() || canManage()) {<button type="button" class="o-lnk o-r" style="color:var(--o-mut)" (click)="removeComment(c)">Delete</button>}
                     </div>
-                    <div class="o-cb o-lh o-md md" style="font-size:14px" [innerHTML]="md(c.body)"></div>
+                    <div class="o-cb o-lh" style="font-size:14px">
+                      <div class="o-md md" [innerHTML]="md(c.body)"></div>
+                      <div class="rx">
+                        @for (r of c.reactions ?? []; track r.reaction) {
+                          <button type="button" class="o-chip o-out" [class.mine]="r.mine" [attr.aria-pressed]="r.mine" [disabled]="!canComment()" (click)="react(c, r.reaction, !r.mine)"
+                            [attr.aria-label]="emojiLabel(r.reaction) + ': ' + r.count + (r.mine ? ', including you' : '')" [title]="reactors(r.people)">{{ emoji(r.reaction) }} {{ r.count }}</button>
+                        }
+                        @if (canComment()) {
+                          @if (picker() === c.id) {
+                            <span class="rx-pal" role="group" aria-label="Add a reaction">
+                              @for (x of reactionList; track x.name) {<button type="button" [attr.aria-label]="x.label" (click)="react(c, x.name, true)">{{ x.emoji }}</button>}
+                            </span>
+                          } @else {
+                            <button type="button" class="o-chip o-out" style="color:var(--o-mut)" (click)="picker.set(c.id)" aria-label="Add a reaction" data-testid="react">☺︎ +</button>
+                          }
+                        }
+                      </div>
+                    </div>
                   </div>
                 }
                 @if (canComment()) {
-                  <div class="o-card">
+                  <div class="o-card mn">
                     <label class="o-sr-only" for="is-cmt">Add a comment</label>
-                    <textarea id="is-cmt" class="o-in" style="border:none;box-shadow:none;min-height:70px;font-family:var(--o-font);font-size:13px" placeholder="Add a comment. Markdown works." [ngModel]="draft()" (ngModelChange)="draft.set($event)" data-testid="comment-input"></textarea>
-                    <div class="o-cf"><span>Markdown</span><button type="button" class="o-btn o-sm o-dark o-r" (click)="addComment()" [disabled]="!draft().trim() || busy()" data-testid="comment-add">Comment</button></div>
+                    <textarea #cmtEl id="is-cmt" class="o-in" style="border:none;box-shadow:none;min-height:70px;font-family:var(--o-font);font-size:13px" placeholder="Add a comment. Markdown and @mentions work." [ngModel]="draft()" (ngModelChange)="draft.set($event)" data-testid="comment-input"
+                      (input)="typed(cmtEl, 'comment')" (keydown)="mentionKey($event, cmtEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'comment'" aria-autocomplete="list"></textarea>
+                    @if (mentionFor() === 'comment' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: cmtEl }" />}
+                    <div class="o-cf">
+                      @if (canEdit()) {<label for="att-in" class="o-lnk" style="color:var(--o-mut)">{{ uploading() ? 'Uploading…' : 'Attach files up to 25 MB' }}</label><input id="att-in" class="file-in" type="file" multiple (change)="upload($any($event.target))" data-testid="attach-input" />} @else {<span>Markdown</span>}
+                      <button type="button" class="o-btn o-sm o-dark o-r" (click)="addComment()" [disabled]="!draft().trim() || busy()" data-testid="comment-add">Comment</button>
+                    </div>
                   </div>
                 }
               } @else {
@@ -2329,6 +2587,7 @@ class IssuePage {
               <span class="o-faint">Created {{ shortDate(is.createdAt) }} by {{ people().name(is.reporterId) }}</span>
               <span class="o-faint">Updated {{ ago(is.updatedAt) }}</span>
               @if (is.resolvedAt) {<span class="o-faint">Resolved {{ shortDate(is.resolvedAt) }} · {{ is.resolution }}</span>}
+              <span class="o-faint" data-testid="watchers">Watching: {{ watcherNames() }}</span>
             </div>
             @if (canManage()) {
               @if (confirmDelete()) {
@@ -2349,11 +2608,20 @@ class IssuePage {
     } @else {
       <div class="o-page"><div class="o-card"><div class="o-empty">Loading {{ key() }}…</div></div></div>
     }
-  `, isInline: true, styles: [".ti{font-size:24px;margin:0;line-height:1.25;text-wrap:pretty}.ti-btn{border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:text}.md :where(p,ul,ol,pre){margin:0}.md pre{background:var(--o-well);padding:10px 12px;border-radius:8px;overflow:auto;font-family:var(--o-mono);font-size:12px}.md code{font-family:var(--o-mono);font-size:12px;color:var(--o-tx);background:var(--o-sunken);padding:0 4px;border-radius:4px}.md pre code{background:none;padding:0}.md img{max-width:100%}.kv-in{width:100%}textarea.o-in{min-height:140px;font-family:var(--o-mono);font-size:12px;line-height:1.6;padding:10px 12px;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    <ng-template #mentionList let-el="el">
+      <ul class="mn-list" role="listbox" aria-label="People to mention">
+        @for (p of suggestions(); track p.id; let i = $index) {
+          <li role="option" [class.on]="i === mentionIndex()" [attr.aria-selected]="i === mentionIndex()" (mousedown)="$event.preventDefault(); pick(p, el)">
+            <span class="o-av" aria-hidden="true">{{ people().initials(p.id) }}</span><span class="o-ell">{{ p.name || p.email }}</span>@if (p.email && p.name) {<span class="o-faint o-xs o-ell">{{ p.email }}</span>}
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, isInline: true, styles: [".ti{font-size:24px;margin:0;line-height:1.25;text-wrap:pretty}.ti-btn{border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:text}.md :where(p,ul,ol,pre){margin:0}.md pre{background:var(--o-well);padding:10px 12px;border-radius:8px;overflow:auto;font-family:var(--o-mono);font-size:12px}.md code{font-family:var(--o-mono);font-size:12px;color:var(--o-tx);background:var(--o-sunken);padding:0 4px;border-radius:4px}.md pre code{background:none;padding:0}.md img{max-width:100%}.kv-in{width:100%}textarea.o-in{min-height:140px;font-family:var(--o-mono);font-size:12px;line-height:1.6;padding:10px 12px;height:auto}.md .mention{color:var(--o-acc-tx, var(--o-acc));background:var(--o-acc-bg, var(--o-sunken));border-radius:4px;padding:0 3px;font-weight:500}.rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}.rx .o-chip{cursor:pointer;font-size:12px}.rx .o-chip.mine{border-color:var(--o-acc);background:var(--o-acc-bg, var(--o-sunken))}.rx-pal{display:flex;gap:2px;padding:4px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow-sm, none)}.rx-pal button{border:none;background:none;font-size:16px;padding:2px 4px;border-radius:6px;cursor:pointer}.rx-pal button:hover,.rx-pal button:focus-visible{background:var(--o-sunken)}.mn{position:relative}.mn-list{position:absolute;left:8px;top:calc(100% - 4px);z-index:20;min-width:220px;max-width:320px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow, 0 6px 20px rgba(0,0,0,.12));padding:4px;list-style:none;margin:0}.mn-list li{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}.mn-list li.on,.mn-list li:hover{background:var(--o-sunken)}.att-img{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--o-well);flex:none;overflow:hidden;font-size:0}.att-ic{width:40px;height:40px;border-radius:6px;background:var(--o-well);display:grid;place-items:center;font-size:10px;color:var(--o-mut);font-family:var(--o-mono);flex:none;text-transform:uppercase}.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IssuePage, decorators: [{
             type: Component,
-            args: [{ selector: 'o-design-issue', imports: [FormsModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'o-design-issue', imports: [FormsModule, RouterLink, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (issue(); as is) {
       <div class="o-page o-wide">
         <div class="o-flex o-sm o-wrap">
@@ -2365,6 +2633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           <span class="o-mono" aria-current="page">{{ is.key }}</span>
           </nav>
           <span class="o-r o-flex">
+            <button type="button" class="o-btn o-sm" [attr.aria-pressed]="watching()" (click)="toggleWatch()" data-testid="watch">{{ watching() ? 'Watching' : 'Watch' }}</button>
             <button type="button" class="o-btn o-sm" (click)="copyLink()">{{ copied() ? 'Copied' : 'Copy link' }}</button>
             <a class="o-btn o-sm" [routerLink]="host.link('board')">Board</a>
           </span>
@@ -2389,9 +2658,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             </div>
 
             @if (editingDesc()) {
-              <div class="o-card">
+              <div class="o-card mn">
                 <label class="o-sr-only" for="is-desc">Description</label>
-                <textarea id="is-desc" class="o-in" style="border:none;box-shadow:none" [(ngModel)]="descDraft" placeholder="Write with Markdown: checklists, code blocks, images and @mentions." data-testid="desc-input"></textarea>
+                <textarea #descEl id="is-desc" class="o-in" style="border:none;box-shadow:none" [(ngModel)]="descDraft" placeholder="Write with Markdown: checklists, code blocks, images and @mentions." data-testid="desc-input"
+                  (input)="typed(descEl, 'desc')" (keydown)="mentionKey($event, descEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'desc'" aria-autocomplete="list"></textarea>
+                @if (mentionFor() === 'desc' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: descEl }" />}
                 <div class="o-cf"><span>Markdown</span><button type="button" class="o-btn o-sm o-r" (click)="editingDesc.set(false)">Cancel</button><button type="button" class="o-btn o-sm o-dark" (click)="saveDesc()" [disabled]="busy()" data-testid="desc-save">Save</button></div>
               </div>
             } @else {
@@ -2482,6 +2753,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
               }
             </div>
 
+            @if (attachments().length) {
+              <div class="o-card" data-testid="attachments">
+                <div class="o-ch"><b>Attachments</b><span class="o-faint o-sm">{{ attachments().length }}</span>
+                  @if (canEdit()) {<label class="o-lnk o-r" for="att-in-2">+ Attach</label>}</div>
+                @for (a of attachments(); track a.id) {
+                  <div class="o-row" [attr.data-testid]="'attachment-' + a.filename">
+                    @if (a.inline && thumbs()[a.id]) {<img class="att-img" [src]="thumbs()[a.id]" [alt]="a.filename" />} @else {<span class="att-ic" aria-hidden="true">{{ ext(a.filename) }}</span>}
+                    <div class="o-col" style="gap:2px;min-width:0;flex:1">
+                      <button type="button" class="o-lnk o-ell" style="text-align:left" (click)="download(a)">{{ a.filename }}</button>
+                      <span class="o-faint o-xs">{{ size(a.size) }} · {{ people().name(a.uploadedBy) }} · {{ ago(a.createdAt) }}</span>
+                    </div>
+                    @if ((a.uploadedBy === host.meId() && canEdit()) || canManage()) {<button type="button" class="o-btn o-ghost o-xs" (click)="removeAttachment(a)" [attr.aria-label]="'Delete ' + a.filename">×</button>}
+                  </div>
+                }
+                @if (canEdit()) {<input id="att-in-2" class="file-in" type="file" multiple (change)="upload($any($event.target))" />}
+              </div>
+            }
+
             <div class="o-col" style="gap:12px">
               <div class="o-tabs" role="tablist">
                 <button type="button" role="tab" class="o-tab" [class.o-on]="tab() === 'comments'" [attr.aria-selected]="tab() === 'comments'" (click)="tab.set('comments')">Comments<span class="o-n">{{ comments().length }}</span></button>
@@ -2495,14 +2784,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                       <span class="o-faint o-sm">{{ ago(c.createdAt) }}{{ c.edited ? ' · edited' : '' }}</span>
                       @if (c.authorId === host.meId() || canManage()) {<button type="button" class="o-lnk o-r" style="color:var(--o-mut)" (click)="removeComment(c)">Delete</button>}
                     </div>
-                    <div class="o-cb o-lh o-md md" style="font-size:14px" [innerHTML]="md(c.body)"></div>
+                    <div class="o-cb o-lh" style="font-size:14px">
+                      <div class="o-md md" [innerHTML]="md(c.body)"></div>
+                      <div class="rx">
+                        @for (r of c.reactions ?? []; track r.reaction) {
+                          <button type="button" class="o-chip o-out" [class.mine]="r.mine" [attr.aria-pressed]="r.mine" [disabled]="!canComment()" (click)="react(c, r.reaction, !r.mine)"
+                            [attr.aria-label]="emojiLabel(r.reaction) + ': ' + r.count + (r.mine ? ', including you' : '')" [title]="reactors(r.people)">{{ emoji(r.reaction) }} {{ r.count }}</button>
+                        }
+                        @if (canComment()) {
+                          @if (picker() === c.id) {
+                            <span class="rx-pal" role="group" aria-label="Add a reaction">
+                              @for (x of reactionList; track x.name) {<button type="button" [attr.aria-label]="x.label" (click)="react(c, x.name, true)">{{ x.emoji }}</button>}
+                            </span>
+                          } @else {
+                            <button type="button" class="o-chip o-out" style="color:var(--o-mut)" (click)="picker.set(c.id)" aria-label="Add a reaction" data-testid="react">☺︎ +</button>
+                          }
+                        }
+                      </div>
+                    </div>
                   </div>
                 }
                 @if (canComment()) {
-                  <div class="o-card">
+                  <div class="o-card mn">
                     <label class="o-sr-only" for="is-cmt">Add a comment</label>
-                    <textarea id="is-cmt" class="o-in" style="border:none;box-shadow:none;min-height:70px;font-family:var(--o-font);font-size:13px" placeholder="Add a comment. Markdown works." [ngModel]="draft()" (ngModelChange)="draft.set($event)" data-testid="comment-input"></textarea>
-                    <div class="o-cf"><span>Markdown</span><button type="button" class="o-btn o-sm o-dark o-r" (click)="addComment()" [disabled]="!draft().trim() || busy()" data-testid="comment-add">Comment</button></div>
+                    <textarea #cmtEl id="is-cmt" class="o-in" style="border:none;box-shadow:none;min-height:70px;font-family:var(--o-font);font-size:13px" placeholder="Add a comment. Markdown and @mentions work." [ngModel]="draft()" (ngModelChange)="draft.set($event)" data-testid="comment-input"
+                      (input)="typed(cmtEl, 'comment')" (keydown)="mentionKey($event, cmtEl)" (blur)="closeMentionSoon()" role="combobox" [attr.aria-expanded]="mentionFor() === 'comment'" aria-autocomplete="list"></textarea>
+                    @if (mentionFor() === 'comment' && suggestions().length) {<ng-container *ngTemplateOutlet="mentionList; context: { el: cmtEl }" />}
+                    <div class="o-cf">
+                      @if (canEdit()) {<label for="att-in" class="o-lnk" style="color:var(--o-mut)">{{ uploading() ? 'Uploading…' : 'Attach files up to 25 MB' }}</label><input id="att-in" class="file-in" type="file" multiple (change)="upload($any($event.target))" data-testid="attach-input" />} @else {<span>Markdown</span>}
+                      <button type="button" class="o-btn o-sm o-dark o-r" (click)="addComment()" [disabled]="!draft().trim() || busy()" data-testid="comment-add">Comment</button>
+                    </div>
                   </div>
                 }
               } @else {
@@ -2582,6 +2893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
               <span class="o-faint">Created {{ shortDate(is.createdAt) }} by {{ people().name(is.reporterId) }}</span>
               <span class="o-faint">Updated {{ ago(is.updatedAt) }}</span>
               @if (is.resolvedAt) {<span class="o-faint">Resolved {{ shortDate(is.resolvedAt) }} · {{ is.resolution }}</span>}
+              <span class="o-faint" data-testid="watchers">Watching: {{ watcherNames() }}</span>
             </div>
             @if (canManage()) {
               @if (confirmDelete()) {
@@ -2602,7 +2914,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     } @else {
       <div class="o-page"><div class="o-card"><div class="o-empty">Loading {{ key() }}…</div></div></div>
     }
-  `, styles: [".ti{font-size:24px;margin:0;line-height:1.25;text-wrap:pretty}.ti-btn{border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:text}.md :where(p,ul,ol,pre){margin:0}.md pre{background:var(--o-well);padding:10px 12px;border-radius:8px;overflow:auto;font-family:var(--o-mono);font-size:12px}.md code{font-family:var(--o-mono);font-size:12px;color:var(--o-tx);background:var(--o-sunken);padding:0 4px;border-radius:4px}.md pre code{background:none;padding:0}.md img{max-width:100%}.kv-in{width:100%}textarea.o-in{min-height:140px;font-family:var(--o-mono);font-size:12px;line-height:1.6;padding:10px 12px;height:auto}\n"] }]
+    <ng-template #mentionList let-el="el">
+      <ul class="mn-list" role="listbox" aria-label="People to mention">
+        @for (p of suggestions(); track p.id; let i = $index) {
+          <li role="option" [class.on]="i === mentionIndex()" [attr.aria-selected]="i === mentionIndex()" (mousedown)="$event.preventDefault(); pick(p, el)">
+            <span class="o-av" aria-hidden="true">{{ people().initials(p.id) }}</span><span class="o-ell">{{ p.name || p.email }}</span>@if (p.email && p.name) {<span class="o-faint o-xs o-ell">{{ p.email }}</span>}
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, styles: [".ti{font-size:24px;margin:0;line-height:1.25;text-wrap:pretty}.ti-btn{border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:text}.md :where(p,ul,ol,pre){margin:0}.md pre{background:var(--o-well);padding:10px 12px;border-radius:8px;overflow:auto;font-family:var(--o-mono);font-size:12px}.md code{font-family:var(--o-mono);font-size:12px;color:var(--o-tx);background:var(--o-sunken);padding:0 4px;border-radius:4px}.md pre code{background:none;padding:0}.md img{max-width:100%}.kv-in{width:100%}textarea.o-in{min-height:140px;font-family:var(--o-mono);font-size:12px;line-height:1.6;padding:10px 12px;height:auto}.md .mention{color:var(--o-acc-tx, var(--o-acc));background:var(--o-acc-bg, var(--o-sunken));border-radius:4px;padding:0 3px;font-weight:500}.rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}.rx .o-chip{cursor:pointer;font-size:12px}.rx .o-chip.mine{border-color:var(--o-acc);background:var(--o-acc-bg, var(--o-sunken))}.rx-pal{display:flex;gap:2px;padding:4px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow-sm, none)}.rx-pal button{border:none;background:none;font-size:16px;padding:2px 4px;border-radius:6px;cursor:pointer}.rx-pal button:hover,.rx-pal button:focus-visible{background:var(--o-sunken)}.mn{position:relative}.mn-list{position:absolute;left:8px;top:calc(100% - 4px);z-index:20;min-width:220px;max-width:320px;border:1px solid var(--o-line);border-radius:8px;background:var(--o-surface);box-shadow:var(--o-shadow, 0 6px 20px rgba(0,0,0,.12));padding:4px;list-style:none;margin:0}.mn-list li{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}.mn-list li.on,.mn-list li:hover{background:var(--o-sunken)}.att-img{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--o-well);flex:none;overflow:hidden;font-size:0}.att-ic{width:40px;height:40px;border-radius:6px;background:var(--o-well);display:grid;place-items:center;font-size:10px;color:var(--o-mut);font-family:var(--o-mono);flex:none;text-transform:uppercase}.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 
 /*