Notes: share sheet rows show each person's name and checkbox, with a compact access dropdown

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/notes-view.js

@@ -203,7 +203,7 @@ function ntShareSheet(n, patch) {
   const chosen = new Map(Array.isArray(n.share) ? n.sharedWith.map(p => [p.id, p.ro]) : []);
   const el = openSheet('Who can see this?', 'Choose who can read it, and who can change it.', `<div class="list"><button class="row" data-s="me"><span class="grow"><b>Just me</b></span>${n.share === 'me' ? icon('check') : ''}</button><button class="row" data-s="family"><span class="grow"><b>The whole family</b><small>Everyone with Notes</small></span>${n.share === 'family' ? icon('check') : ''}</button></div>
     <label style="display:flex;gap:8px;align-items:center;margin:8px 2px"><input type="checkbox" id="ntfro" ${n.familyRo ? 'checked' : ''}>Family can only view</label>
-    ${nt.people.length ? `<h2>Or choose people</h2><div class="list">${nt.people.map(p => `<div class="row"><label class="grow" style="display:flex;gap:10px;align-items:center;cursor:pointer"><input type="checkbox" data-p="${esc(p.id)}"${chosen.has(p.id) ? ' checked' : ''}><b>${esc(p.name)}</b></label><select data-r="${esc(p.id)}" aria-label="${esc(p.name)} can"><option value="0">Can edit</option><option value="1" ${chosen.get(p.id) ? 'selected' : ''}>View only</option></select></div>`).join('')}</div><div class="bar"><button class="btn" id="ntps" style="width:100%;justify-content:center">Share with these people</button></div>` : ''}`);
+    ${nt.people.length ? `<h2>Or choose people</h2><div class="list">${nt.people.map(p => `<div class="row ntpr"><label class="grow"><input type="checkbox" data-p="${esc(p.id)}"${chosen.has(p.id) ? ' checked' : ''}><b>${esc(p.name)}</b></label><select data-r="${esc(p.id)}" aria-label="${esc(p.name)} can"><option value="0">Can edit</option><option value="1" ${chosen.get(p.id) ? 'selected' : ''}>View only</option></select></div>`).join('')}</div><div class="bar"><button class="btn" id="ntps" style="width:100%;justify-content:center">Share with these people</button></div>` : ''}`);
   el.querySelectorAll('[data-s]').forEach(b => b.onclick = () => { closeSheet(); patch({ share: b.dataset.s, ...(b.dataset.s === 'family' ? { familyRo: el.querySelector('#ntfro').checked } : {}) }); });
   const ps = el.querySelector('#ntps'); if (ps) ps.onclick = () => { const ids = [...el.querySelectorAll('[data-p]:checked')].map(c => c.dataset.p), ro = ids.filter(i => el.querySelector(`[data-r="${i}"]`).value === '1'); closeSheet(); patch(ids.length ? { share: ids, ro } : { share: 'me' }); };
 }

public/style.css

@@ -1044,6 +1044,7 @@ body.vizopen { overflow: hidden; }
 .ntwrap .ntsearch { display: flex; gap: 8px; margin: 2px 0 4px; } .ntsearch input { flex: 1; min-width: 0; } .ntsearch select { width: auto; max-width: 42%; }
 .ntf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px 0; } .ntf::-webkit-scrollbar { display: none; } .ntf a { flex: none; min-height: 36px; }
 .ntags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; } .ntags:empty { display: none; }
+.ntpr { gap: 10px; } .ntpr label { display: flex; gap: 12px; align-items: center; min-width: 0; cursor: pointer; } .ntpr input[type=checkbox] { width: 22px; height: 22px; flex: none; } .ntpr b { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ntpr select { width: auto; flex: none; min-width: 112px; }
 .ntag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 13px; text-decoration: none; min-height: 26px; }
 .ntags .ntag { cursor: pointer; } .ntag.on { background: var(--accent); color: var(--accent-t); } .ntag button { background: none; border: 0; color: inherit; padding: 0 0 0 2px; font-size: 16px; line-height: 1; cursor: pointer; }
 .nth { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 2px 8px; }