gabriel / musehub public
issue-detail.ts typescript
113 lines 4.6 KB
Raw
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago
1 /**
2 * issue-detail.ts — Issue detail page module.
3 *
4 * Responsibilities:
5 * 1. Comment entrance animations (IntersectionObserver stagger).
6 * 2. Re-animate comments after HTMX swap (new comment submitted).
7 * 3. Copy issue URL to clipboard (keyboard shortcut).
8 * 4. Syntax-highlight CLI / MCP / REST code snippets (highlight.js).
9 * 5. Inject per-snippet copy buttons.
10 */
11
12 import hljs from 'highlight.js/lib/core';
13 import bash from 'highlight.js/lib/languages/bash';
14 import javascript from 'highlight.js/lib/languages/javascript';
15
16 hljs.registerLanguage('bash', bash);
17 hljs.registerLanguage('javascript', javascript);
18
19
20 // ── Comment entrance animations ───────────────────────────────────────────────
21
22 function animateComments(root: Element | Document = document): void {
23 const comments = root.querySelectorAll<HTMLElement>(".id-comment, .id-reply");
24 if (!comments.length) return;
25
26 const io = new IntersectionObserver((entries) => {
27 entries.forEach((entry, i) => {
28 if (!entry.isIntersecting) return;
29 const el = entry.target as HTMLElement;
30 el.style.animationDelay = `${i * 30}ms`;
31 io.unobserve(el);
32 });
33 }, { threshold: 0.05 });
34
35 comments.forEach(el => io.observe(el));
36 }
37
38 // ── HTMX: re-animate on comment swap ─────────────────────────────────────────
39
40 function bindHtmxSwap(): void {
41 document.body.addEventListener("htmx:afterSwap", (e: Event) => {
42 const target = (e as CustomEvent).detail?.target as HTMLElement | undefined;
43 if (!target) return;
44 if (target.id === "issue-comments" || target.closest("#issue-comments")) {
45 animateComments(target);
46 }
47 });
48 }
49
50 // ── Copy issue URL (keyboard shortcut) ───────────────────────────────────────
51
52 function bindCopyUrl(): void {
53 document.addEventListener("keydown", async (e: KeyboardEvent) => {
54 if (e.key !== "y" || e.ctrlKey || e.metaKey || e.altKey) return;
55 const active = document.activeElement;
56 if (active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA")) return;
57 try {
58 await navigator.clipboard.writeText(window.location.href);
59 } catch { /* clipboard unavailable */ }
60 });
61 }
62
63 // ── Syntax highlighting ───────────────────────────────────────────────────────
64
65 function highlightSnippets(): void {
66 document.querySelectorAll<HTMLElement>('pre.isd-cli-snippet code').forEach(el => {
67 hljs.highlightElement(el);
68 });
69 }
70
71 // ── Copy buttons ──────────────────────────────────────────────────────────────
72
73 const COPY_ICON = `<svg class="icon icon-copy" width="10" height="10" aria-hidden="true" focusable="false"><use href="#icon-copy"></use></svg>`;
74 const CHECK_ICON = `<svg class="icon icon-check" width="10" height="10" aria-hidden="true" focusable="false"><use href="#icon-check"></use></svg>`;
75
76 function injectCopyButtons(): void {
77 document.querySelectorAll<HTMLElement>('.isd-snippet-wrap').forEach(wrap => {
78 if (wrap.querySelector('.isd-cli-copy')) return;
79 const pre = wrap.querySelector<HTMLElement>('pre.isd-cli-snippet');
80 if (!pre) return;
81
82 const btn = document.createElement('button');
83 btn.className = 'isd-cli-copy';
84 btn.setAttribute('aria-label', 'Copy to clipboard');
85 btn.innerHTML = `${COPY_ICON}<span>copy</span>`;
86
87 btn.addEventListener('click', async () => {
88 const code = pre.querySelector('code');
89 const text = (code?.textContent ?? pre.textContent ?? '').trim();
90 try {
91 await navigator.clipboard.writeText(text);
92 btn.classList.add('copied');
93 btn.innerHTML = `${CHECK_ICON}<span>copied</span>`;
94 setTimeout(() => {
95 btn.classList.remove('copied');
96 btn.innerHTML = `${COPY_ICON}<span>copy</span>`;
97 }, 2000);
98 } catch { /* clipboard unavailable */ }
99 });
100
101 wrap.appendChild(btn);
102 });
103 }
104
105 // ── Entry point ───────────────────────────────────────────────────────────────
106
107 export function initIssueDetail(_data?: Record<string, unknown>): void {
108 animateComments();
109 bindHtmxSwap();
110 bindCopyUrl();
111 highlightSnippets();
112 injectCopyButtons();
113 }
File History 13 commits
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 9 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 15 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 30 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 34 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 36 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago