pinokiod 8.2.34 → 8.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "8.2.34",
+  "version": "8.2.35",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/views/anywhere.ejs

@@ -38,31 +38,15 @@ body.dark .anywhere-card { border-color: rgba(255,255,255,0.1); background: rgba
 .anywhere-card h3 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
 .anywhere-card p { margin: 6px 0; line-height: 1.5; }
 .anywhere-muted { opacity: 0.7; font-size: 13px; }
-.anywhere-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
-@media (max-width: 900px) { .anywhere-grid { grid-template-columns: 1fr; } }
-.anywhere-signout { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
-/* which device is connecting: a segmented control, the phone panel by default */
-.anywhere-segments { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 4px; border-radius: 12px; background: rgba(0,0,0,0.05); }
-body.dark .anywhere-segments { background: rgba(255,255,255,0.08); }
-.anywhere-segments label { position: relative; display: block; }
-.anywhere-segments input { position: absolute; opacity: 0; width: 0; height: 0; }
-.anywhere-segments span { display: block; text-align: center; padding: 9px 12px; border-radius: 9px; font-size: 14px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s; }
-.anywhere-segments span:hover { opacity: 1; }
-.anywhere-segments input:checked + span { background: white; font-weight: bold; opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
-body.dark .anywhere-segments input:checked + span { background: rgba(255,255,255,0.16); box-shadow: none; }
-.anywhere-segments input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 1px; }
-#anywhere-connect[data-device=phone] [data-panel=computer], #anywhere-connect[data-device=computer] [data-panel=phone] { display: none; }
-#anywhere-connect [data-panel] { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
-#anywhere-connect [data-panel] p { margin: 0; max-width: 360px; font-size: 15px; line-height: 1.5; }
-#anywhere-connect [data-panel=computer] { padding-top: 10px; }
-.anywhere-warning { padding: 10px 14px; border-radius: 8px; background: rgba(255,140,0,0.14); font-size: 13px; line-height: 1.5; margin: 16px 0 0; }
-.anywhere-warning a { color: inherit; }
-.anywhere-connect-card { max-width: 440px; padding: 22px 24px 24px; }
-.anywhere-connect-title { text-align: center; font-size: 17px; margin: 0 0 14px; }
-.anywhere-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
-.anywhere-qr img { width: 212px; height: 212px; border-radius: 14px; background: white; padding: 12px; border: 1px solid rgba(0,0,0,0.08); margin-top: 4px; }
-body.dark .anywhere-qr img { border-color: transparent; }
-.anywhere-qr > .anywhere-muted { font-size: 12px; margin-top: 2px; }
+.anywhere-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
+@media (max-width: 900px) { .anywhere-connect { grid-template-columns: 1fr; } }
+.anywhere-device-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; text-align: center; padding: 22px 24px 24px; }
+.anywhere-device-icon { font-size: 32px; line-height: 1; opacity: 0.7; margin-bottom: -2px; }
+.anywhere-device-card h2 { font-size: 17px; margin: 0; }
+.anywhere-device-card p { margin: 0; max-width: 360px; font-size: 15px; line-height: 1.5; }
+.anywhere-device-card img { width: 212px; height: 212px; border-radius: 14px; background: white; padding: 12px; border: 1px solid rgba(0,0,0,0.08); }
+body.dark .anywhere-device-card img { border-color: transparent; }
+.anywhere-account-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 18px; }
 .anywhere-address {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 15px; word-break: break-all;
@@ -225,31 +209,29 @@ document.addEventListener('DOMContentLoaded', function() {
 
         <div class='anywhere-state' data-state='ready'>
           <div class='anywhere-warning' id='anywhere-expiry-warning' hidden></div>
-          <div class='anywhere-grid'>
-            <div class='anywhere-card anywhere-connect-card'>
-              <h2 class='anywhere-connect-title'>Connect a device</h2>
-              <div class='anywhere-qr' id='anywhere-connect' data-device='phone'>
-                <div class='anywhere-segments'>
-                  <label><input type='radio' name='anywhere-device' value='phone' checked><span>Phone or tablet</span></label>
-                  <label><input type='radio' name='anywhere-device' value='computer'><span>Another computer</span></label>
-                </div>
-                <div data-panel='phone'>
-                  <img id='anywhere-qr' alt='QR code to connect' src=''>
-                  <p>Scan with your phone. It walks you through the rest.</p>
-                </div>
-                <div data-panel='computer'>
-                  <p>Open this link on the other computer. It walks you through installing Tailscale and signing in as <b class='anywhere-account-inline'></b>, then opens this Pinokio.</p>
-                  <div class='anywhere-address'><a id='anywhere-address' href='#' target='_blank' rel='noopener'></a></div>
-                  <p><button type='button' class='anywhere-btn secondary anywhere-copy' id='anywhere-copy' disabled><i class='fa-regular fa-copy' aria-hidden='true'></i> Copy link</button></p>
-                  <div id='anywhere-copy-status' class='anywhere-muted' role='status' aria-live='polite'></div>
-                  <div id='anywhere-copy-manual' class='anywhere-copy-manual' hidden>
-                    <input id='anywhere-copy-value' type='text' readonly aria-label='Remote link' aria-describedby='anywhere-copy-status'>
-                  </div>
-                </div>
-                <div class='anywhere-muted'>signed in as <b id='anywhere-account'></b> · <button type='button' class='anywhere-signout' data-action='logout'>Sign out</button></div>
-                <div class='anywhere-waiting' id='anywhere-waiting'><i class="fa-solid fa-circle-notch fa-spin"></i> Waiting for another device to join…</div>
+          <div class='anywhere-connect' id='anywhere-connect'>
+            <div class='anywhere-card anywhere-device-card'>
+              <i class='fa-solid fa-mobile-screen anywhere-device-icon' aria-hidden='true'></i>
+              <h2>Connect a phone or tablet</h2>
+              <p>Scan with your phone. It walks you through the rest.</p>
+              <img id='anywhere-qr' alt='QR code to connect' src=''>
+            </div>
+            <div class='anywhere-card anywhere-device-card'>
+              <i class='fa-solid fa-laptop anywhere-device-icon' aria-hidden='true'></i>
+              <h2>Connect another computer</h2>
+              <p>Open this link on the other computer. It walks you through installing Tailscale and signing in as <b class='anywhere-account-inline'></b>, then opens this Pinokio.</p>
+              <div class='anywhere-address'><a id='anywhere-address' href='#' target='_blank' rel='noopener'></a></div>
+              <p><button type='button' class='anywhere-btn secondary anywhere-copy' id='anywhere-copy' disabled><i class='fa-regular fa-copy' aria-hidden='true'></i> Copy link</button></p>
+              <div id='anywhere-copy-status' class='anywhere-muted' role='status' aria-live='polite'></div>
+              <div id='anywhere-copy-manual' class='anywhere-copy-manual' hidden>
+                <input id='anywhere-copy-value' type='text' readonly aria-label='Remote link' aria-describedby='anywhere-copy-status'>
               </div>
             </div>
+          </div>
+          <div class='anywhere-account-line'>
+            <span class='anywhere-muted'>signed in as <b id='anywhere-account'></b> · <button type='button' class='anywhere-signout' data-action='logout'>Sign out</button></span>
+            <div class='anywhere-waiting' id='anywhere-waiting'><i class="fa-solid fa-circle-notch fa-spin"></i> Waiting for another device to join…</div>
+          </div>
             <div id='anywhere-details' hidden>
               <div class='anywhere-card'>
                 <h2>Running apps</h2>
@@ -275,7 +257,6 @@ document.addEventListener('DOMContentLoaded', function() {
                 </p>
               </div>
             </div>
-          </div>
         </div>
 
       </div>
@@ -525,9 +506,6 @@ document.addEventListener('DOMContentLoaded', function() {
       openExternal(link.href)
     }
   })
-  for (const input of document.querySelectorAll('input[name=anywhere-device]')) {
-    input.addEventListener('change', () => { document.getElementById('anywhere-connect').dataset.device = input.value })
-  }
   switchEl.addEventListener('click', () => {
     if (switchEl.dataset.on === 'true') {
       act('stop')

package/test/anywhere-onboarding.test.js

@@ -36,22 +36,24 @@ test('before any device joins, the ready state is the connect card alone, with s
   const h = render(t, { phase: 'ready', peers: [] })
   const card = h.document.querySelector('[data-state=ready] .anywhere-card')
   assert.equal(h.document.getElementById('anywhere-details').hidden, true, 'apps, devices and details wait for a device')
-  assert.ok(card.querySelector('.anywhere-signout[data-action=logout]'), 'a wrong-account sign-in is fixable during onboarding')
+  assert.ok(h.document.querySelector('.anywhere-account-line .anywhere-signout[data-action=logout]'), 'a wrong-account sign-in is fixable during onboarding')
   assert.ok(!h.document.querySelector('#anywhere-details [data-action=logout]'), 'sign out lives with the account, not in details')
   assert.equal(card.querySelectorAll('ol, h3').length, 0, 'no step lists on the desk: the phone page explains Tailscale after the scan')
   const connect = h.document.getElementById('anywhere-connect')
-  assert.equal(connect.dataset.device, 'phone', 'the QR is the default')
-  assert.match(connect.querySelector('[data-panel=phone]').textContent, /Scan with your phone\./)
-  const computer = connect.querySelector('[data-panel=computer]')
-  assert.match(computer.textContent, /signing in as me@example.com/)
-  const choose = connect.querySelector('input[value=computer]')
-  choose.checked = true
-  choose.dispatchEvent(new h.document.defaultView.Event('change'))
-  assert.equal(connect.dataset.device, 'computer', 'the segmented control switches the panel')
-  const link = computer.querySelector('#anywhere-address')
-  assert.equal(link.getAttribute('href'), connectUrl, 'the computer path is the same link the QR carries')
-  assert.equal(link.textContent, 'pinokio.co/anywhere/connect#…', 'the fragment is not spelled out')
-  assert.equal(h.text('anywhere-account'), 'me@example.com')
+  const cards = connect.querySelectorAll('.anywhere-device-card')
+  assert.equal(cards.length, 2, 'both ways in, side by side, nothing behind a toggle')
+  for (const card of cards) {
+    const icon = card.querySelector('.anywhere-device-icon')
+    assert.ok(icon, 'each card leads with its own icon row')
+    assert.strictEqual(icon.nextElementSibling.tagName, 'H2')
+  }
+  assert.match(cards[0].textContent, /Connect a phone or tablet.*Scan with your phone\./s)
+  assert.ok(cards[0].querySelector('#anywhere-qr'))
+  assert.match(cards[1].textContent, /Connect another computer.*installing Tailscale and signing in as me@example\.com/s)
+  const link = cards[1].querySelector('#anywhere-address')
+  assert.equal(link.getAttribute('href'), connectUrl, 'the same link the QR carries')
+  assert.equal(link.textContent, 'pinokio.co/anywhere/connect#…')
+  assert.equal(h.document.querySelector('.anywhere-segments'), null)
   assert.match(h.text('anywhere-waiting'), /Waiting for another device/)
   assert.equal(h.document.getElementById('anywhere-expiry-warning').hidden, true)
 })