From b2f1ae09f3a9911c557a5e86a6885a6e910548b0 Mon Sep 17 00:00:00 2001 From: Melvin Carvalho Date: Tue, 5 May 2026 19:43:32 +0200 Subject: [PATCH] sharing-pane: tighten typography, prevent name overflow, add copy button (#15) - Reduce font sizes ~1px across header, public-access card, permissions label, agent name, WebID, and the add-WebID input/button. - Truncate the agent name with ellipsis (and full text in title=) so long unbreakable identifiers like did:nostr: stay inside the card on narrow viewports. - Add a copy button next to each WebID; the URI is also click-to-copy. Brief checkmark confirmation, with execCommand fallback for non-secure contexts. Only on individual-agent rows. --- panes/sharing-pane.js | 55 +++++++++++++++++++++++++++++++++---------- 1 file changed, 43 insertions(+), 12 deletions(-) diff --git a/panes/sharing-pane.js b/panes/sharing-pane.js index 8b3f3dc..fa9ac4a 100644 --- a/panes/sharing-pane.js +++ b/panes/sharing-pane.js @@ -184,9 +184,9 @@ export default { // Header var header = document.createElement('div') header.style.cssText = 'margin-bottom:24px;' - header.innerHTML = '

\u{1F91D} Sharing

' - + '
' + resourceUrl + '
' - if (statusMsg) header.innerHTML += '
' + statusMsg + '
' + header.innerHTML = '

\u{1F91D} Sharing

' + + '
' + resourceUrl + '
' + if (statusMsg) header.innerHTML += '
' + statusMsg + '
' w.appendChild(header) if (loading) { @@ -215,8 +215,8 @@ export default { var pubInfo = document.createElement('div') pubInfo.style.cssText = 'flex:1;' - pubInfo.innerHTML = '
Public Access
' - + '
Anyone on the web can ' + (pub ? pub.modes.join(', ').toLowerCase() : 'not access') + '
' + pubInfo.innerHTML = '
Public Access
' + + '
Anyone on the web can ' + (pub ? pub.modes.join(', ').toLowerCase() : 'not access') + '
' var pubToggle = document.createElement('button') pubToggle.className = 'sh-toggle ' + (pub ? 'sh-toggle-on' : 'sh-toggle-off') @@ -229,7 +229,7 @@ export default { // Individual authorizations var label = document.createElement('div') - label.style.cssText = 'font-size:12px;font-weight:700;color:#888;letter-spacing:.05em;text-transform:uppercase;padding:20px 0 10px;' + label.style.cssText = 'font-size:11px;font-weight:700;color:#888;letter-spacing:.05em;text-transform:uppercase;padding:20px 0 10px;' label.textContent = 'Permissions (' + auths.length + ')' w.appendChild(label) @@ -245,16 +245,47 @@ export default { info.style.cssText = 'flex:1;min-width:0;' var name = document.createElement('div') - name.style.cssText = 'font-size:14px;font-weight:600;color:#1a1a1a;' + name.style.cssText = 'font-size:13px;font-weight:600;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' + name.title = agentLabel(auth.agent) name.textContent = agentLabel(auth.agent) info.appendChild(name) if (!auth.isClass) { + var uriRow = document.createElement('div') + uriRow.style.cssText = 'display:flex;align-items:center;gap:4px;min-width:0;' + var uri = document.createElement('div') - uri.style.cssText = 'font-size:11px;color:#bbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' + uri.style.cssText = 'font-size:10px;color:#bbb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;cursor:pointer;' uri.textContent = auth.agent - uri.title = auth.agent - info.appendChild(uri) + uri.title = 'Click to copy: ' + auth.agent + + var copyBtn = document.createElement('button') + copyBtn.style.cssText = 'background:none;border:none;cursor:pointer;color:#bbb;font-size:11px;padding:2px 4px;flex-shrink:0;line-height:1;' + copyBtn.textContent = '\u{1F4CB}' + copyBtn.title = 'Copy WebID' + + var doCopy = function() { + (navigator.clipboard ? navigator.clipboard.writeText(auth.agent) : Promise.reject()).then(function() { + copyBtn.textContent = '✓' + copyBtn.style.color = '#7c3aed' + setTimeout(function() { copyBtn.textContent = '\u{1F4CB}'; copyBtn.style.color = '#bbb' }, 1200) + }).catch(function() { + var ta = document.createElement('textarea') + ta.value = auth.agent + ta.style.position = 'fixed'; ta.style.opacity = '0' + document.body.appendChild(ta); ta.select() + try { document.execCommand('copy') } catch (e) {} + document.body.removeChild(ta) + copyBtn.textContent = '✓'; copyBtn.style.color = '#7c3aed' + setTimeout(function() { copyBtn.textContent = '\u{1F4CB}'; copyBtn.style.color = '#bbb' }, 1200) + }) + } + uri.onclick = doCopy + copyBtn.onclick = doCopy + + uriRow.appendChild(uri) + uriRow.appendChild(copyBtn) + info.appendChild(uriRow) } // Mode toggles @@ -295,12 +326,12 @@ export default { var input = document.createElement('input') input.type = 'text' input.placeholder = 'Add WebID (https://...)' - input.style.cssText = 'flex:1;padding:8px 14px;border:1px solid #ddd;border-radius:8px;font:14px inherit;outline:none;' + input.style.cssText = 'flex:1;padding:7px 12px;border:1px solid #ddd;border-radius:8px;font:13px inherit;outline:none;' input.onfocus = function() { input.style.borderColor = '#7c3aed' } input.onblur = function() { input.style.borderColor = '#ddd' } input.onkeydown = function(e) { if (e.key === 'Enter' && input.value.trim()) { addAgent(input.value.trim()); input.value = '' } } var addBtn = document.createElement('button') - addBtn.style.cssText = 'background:#7c3aed;color:#fff;border:none;border-radius:8px;padding:8px 18px;font:600 13px inherit;cursor:pointer;' + addBtn.style.cssText = 'background:#7c3aed;color:#fff;border:none;border-radius:8px;padding:7px 16px;font:600 12px inherit;cursor:pointer;' addBtn.textContent = 'Add' addBtn.onclick = function() { if (input.value.trim()) { addAgent(input.value.trim()); input.value = '' } } addSection.appendChild(input)