appview/pr: gutter button that links code line #1152

+132

appview/pages/templates/fragments/line-quote-button.html

··· 1 1 + {{ define "fragments/line-quote-button" }} 2 2 + <button 3 3 + id="line-quote-btn" 4 4 + type="button" 5 5 + aria-label="Quote line in comment" 6 6 + class="hidden fixed z-50 p-0.5 rounded bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer shadow-sm transition-opacity opacity-0" 7 7 + style="pointer-events: none;" 8 8 + > 9 9 + {{ i "message-square-quote" "w-3.5 h-3.5" }} 10 10 + </button> 11 11 + <script> 12 12 + (() => { 13 13 + const btn = document.getElementById('line-quote-btn'); 14 14 + if (!btn) return; 15 15 + 16 16 + let currentAnchor = null; 17 17 + let currentFileName = null; 18 18 + 19 19 + const findTextarea = () => 20 20 + document.getElementById('pull-comment-textarea') 21 21 + || document.getElementById('comment-textarea'); 22 22 + 23 23 + const findLineEl = (el) => 24 24 + el?.closest?.('.line') 25 25 + || el?.closest?.('span[id*="-O"]') 26 26 + || el?.closest?.('span[id*="-N"]'); 27 27 + 28 28 + const getAnchor = (lineEl) => { 29 29 + const link = lineEl.querySelector('a[href^="#"]'); 30 30 + return link ? link.getAttribute('href').slice(1) : lineEl.id || null; 31 31 + }; 32 32 + 33 33 + const getFileName = (lineEl) => { 34 34 + const details = lineEl.closest('details[id^="file-"]'); 35 35 + if (details) return details.id.replace(/^file-/, ''); 36 36 + const bc = document.getElementById('breadcrumbs'); 37 37 + if (!bc) return null; 38 38 + const els = bc.querySelectorAll('.text-bold'); 39 39 + return els.length > 0 ? els[els.length - 1].textContent.trim() : null; 40 40 + }; 41 41 + 42 42 + const show = (lineEl) => { 43 43 + if (!findTextarea()) return; 44 44 + const anchor = getAnchor(lineEl); 45 45 + if (!anchor) return; 46 46 + 47 47 + currentAnchor = anchor; 48 48 + currentFileName = getFileName(lineEl); 49 49 + 50 50 + const rect = lineEl.getBoundingClientRect(); 51 51 + Object.assign(btn.style, { 52 52 + top: `${rect.top + rect.height / 2 - btn.offsetHeight / 2}px`, 53 53 + left: `${rect.left + 4}px`, 54 54 + opacity: '1', 55 55 + pointerEvents: 'auto', 56 56 + }); 57 57 + btn.classList.remove('hidden'); 58 58 + }; 59 59 + 60 60 + const hide = () => { 61 61 + Object.assign(btn.style, { opacity: '0', pointerEvents: 'none' }); 62 62 + setTimeout(() => { if (btn.style.opacity === '0') btn.classList.add('hidden'); }, 150); 63 63 + }; 64 64 + 65 65 + let hoverTarget = null; 66 66 + 67 67 + document.addEventListener('mouseover', (e) => { 68 68 + const lineEl = findLineEl(e.target); 69 69 + if (lineEl && lineEl !== hoverTarget) { 70 70 + hoverTarget = lineEl; 71 71 + show(lineEl); 72 72 + } 73 73 + }); 74 74 + 75 75 + document.addEventListener('mouseout', (e) => { 76 76 + const lineEl = findLineEl(e.target); 77 77 + if (!lineEl) return; 78 78 + if (findLineEl(e.relatedTarget) === lineEl) return; 79 79 + if (e.relatedTarget === btn || btn.contains(e.relatedTarget)) return; 80 80 + hoverTarget = null; 81 81 + hide(); 82 82 + }); 83 83 + 84 84 + btn.addEventListener('mouseleave', (e) => { 85 85 + if (!findLineEl(e.relatedTarget)) { 86 86 + hoverTarget = null; 87 87 + hide(); 88 88 + } 89 89 + }); 90 90 + 91 91 + btn.addEventListener('click', (e) => { 92 92 + e.preventDefault(); 93 93 + e.stopPropagation(); 94 94 + const textarea = findTextarea(); 95 95 + if (!textarea || !currentAnchor) return; 96 96 + 97 97 + const lineNum = currentAnchor.match(/[ON]?(\d+)(?:-[ON]?\d+)?$/)?.[1]; 98 98 + if (!lineNum) return; 99 99 + 100 100 + const label = currentFileName ? `${currentFileName}:${lineNum}` : `L${lineNum}`; 101 101 + const md = `[\`${label}\`](${window.location.pathname}#${currentAnchor})`; 102 102 + 103 103 + const { selectionStart: start, selectionEnd: end, value } = textarea; 104 104 + const before = value.slice(0, start); 105 105 + const after = value.slice(end); 106 106 + 107 107 + let prefix = ''; 108 108 + let suffix = ''; 109 109 + if (start === end && before.length > 0) { 110 110 + const currentLine = before.slice(before.lastIndexOf('\n') + 1); 111 111 + if (currentLine.length > 0) { 112 112 + const nextNl = after.indexOf('\n'); 113 113 + const restOfLine = nextNl === -1 ? after : after.slice(0, nextNl); 114 114 + if (restOfLine.trim().length === 0) { 115 115 + prefix = '\n'; 116 116 + } else { 117 117 + prefix = before.endsWith(' ') ? '' : ' '; 118 118 + suffix = after.startsWith(' ') ? '' : ' '; 119 119 + } 120 120 + } 121 121 + } 122 122 + 123 123 + textarea.value = before + prefix + md + suffix + after; 124 124 + const pos = start + prefix.length + md.length + suffix.length; 125 125 + textarea.selectionStart = textarea.selectionEnd = pos; 126 126 + textarea.focus(); 127 127 + textarea.dispatchEvent(new Event('input', { bubbles: true })); 128 128 + textarea.dispatchEvent(new Event('keyup', { bubbles: true })); 129 129 + }); 130 130 + })(); 131 131 + </script> 132 132 + {{ end }}

+1

appview/pages/templates/repo/blob.html

··· 121 121 </div> 122 122 {{ end }} 123 123 {{ template "fragments/multiline-select" }} 124 124 + {{ template "fragments/line-quote-button" }} 124 125 <script> 125 126 (() => { 126 127 const abortController = new AbortController();

+1

appview/pages/templates/repo/fragments/diff.html

··· 12 12 {{ block "diffLayout" . }} {{ end }} 13 13 {{ template "fragments/resizable" }} 14 14 {{ template "activeFileHighlight" }} 15 15 + {{ template "fragments/line-quote-button" }} 15 16 {{ end }} 16 17 17 18 {{ define "diffTopbar" }}