pinokiod 7.3.9 → 7.3.11

package/server/views/network.ejs

@@ -1052,10 +1052,10 @@ body.dark .troubleshoot {
   }
 }
 body.network-page .task-container {
-  padding: 20px 28px 32px;
+  padding: 0;
 }
 body.network-page .task-shell {
-  width: min(1180px, 100%);
+  width: 100%;
   margin: 0;
   background: transparent;
   border: 0;
@@ -1065,19 +1065,29 @@ body.network-page .task-shell {
   backdrop-filter: none;
 }
 body.network-page .task-shell-header {
-  padding-bottom: 18px;
+  padding: 12px 18px 14px;
 }
 body.network-page .task-shell-body {
-  padding: 28px 28px 28px;
+  padding: 0 28px 28px;
 }
 body.network-page .c {
   display: grid;
-  gap: 24px;
+  gap: 0;
   min-width: 0;
 }
 body.network-page .container {
   margin: 0;
 }
+body.network-page .network-config-section {
+  padding-top: 18px;
+  border-top: 0;
+}
+body.network-page .network-config-head {
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--task-border);
+}
 body.network-page .config {
   margin: 0;
   padding: 0;
@@ -1088,13 +1098,13 @@ body.network-page .config-header {
 }
 body.network-page .config-body {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 14px 18px;
-  padding: 18px 22px;
-  border: 1px solid var(--task-border);
-  border-radius: 18px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
-  align-items: center;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  align-items: stretch;
 }
 body.network-page .config-row {
   padding: 0;
@@ -1106,15 +1116,21 @@ body.network-page .config-row .label {
   font-weight: 700;
   color: var(--task-text);
 }
-body.network-page .config-toggle-row {
+body.network-page .config-access-copy {
+  min-width: 0;
+}
+body.network-page .config-access-titleline {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
 }
-body.network-page .config-toggle-copy {
-  display: grid;
-  gap: 3px;
+body.network-page .config-toggle-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex: 0 0 auto;
 }
 body.network-page #active-label {
   padding: 0;
@@ -1129,18 +1145,11 @@ body.network-page .switcher {
 }
 body.network-page .config-save-btn {
   min-width: 104px;
-  min-height: 42px;
-  padding: 0 16px;
-  border-radius: 12px;
-  background: var(--task-accent-surface) !important;
-  color: var(--task-accent-contrast) !important;
-  border: 1px solid var(--task-accent-surface) !important;
-  font-size: 14px;
-  font-weight: 700;
-}
-body.network-page .config-save-btn:hover {
-  background: var(--task-accent-hover) !important;
-  border-color: var(--task-accent-hover) !important;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 600;
 }
 body.network-page .slider {
   border: 1px solid var(--task-border-strong);
@@ -1158,7 +1167,8 @@ body.network-page .switcher input:checked + .slider {
   border-color: color-mix(in srgb, var(--task-accent) 72%, var(--task-panel));
 }
 body.network-page #network_name {
-  grid-column: 1 / -1;
+  display: grid;
+  gap: 8px;
 }
 body.network-page .network-name {
   display: block;
@@ -1166,22 +1176,22 @@ body.network-page .network-name {
 body.network-page .network-name input[type=text] {
   width: 100%;
   min-width: 0;
+  min-height: 38px;
+  padding: 7px 12px;
   border: 1px solid var(--task-border-strong);
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--task-panel) 98%, white);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--task-panel) 92%, var(--task-soft));
   color: var(--task-text);
-  padding: 0 14px;
-  height: 44px;
   box-sizing: border-box;
 }
 body.dark.network-page .network-name input[type=text] {
-  background: color-mix(in srgb, var(--task-panel) 96%, black);
+  background: color-mix(in srgb, var(--task-panel) 92%, var(--task-soft));
 }
 body.network-page #network_name .label {
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 body.network-page .advanced {
-  margin-top: 12px;
+  margin-top: 14px;
   justify-content: flex-start;
 }
 body.network-page .troubleshoot,
@@ -1189,14 +1199,20 @@ body.dark.network-page .troubleshoot {
   color: var(--task-muted);
   padding: 0;
   font-size: 13px;
+  line-height: 1.5;
+}
+body.network-page .troubleshoot .link-label {
+  margin-right: 0;
+  padding: 0 !important;
 }
 body.network-page .link-label {
   color: var(--task-accent);
 }
 body.network-page .loading {
-  border: 1px solid var(--task-border);
-  border-radius: 16px;
-  background: color-mix(in srgb, var(--task-panel) 94%, var(--task-soft));
+  margin-top: 16px;
+  border-top: 1px solid var(--task-border);
+  border-radius: 0;
+  background: transparent;
   color: var(--task-muted);
 }
 body.network-page .running-apps {
@@ -1294,12 +1310,8 @@ body.dark.network-page .badge {
     padding-left: 18px;
     padding-right: 18px;
   }
-  body.network-page .config-body {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
   body.network-page .config-save-btn {
-    width: 100%;
+    width: auto;
   }
 }
 @media only screen and (max-width: 560px) {
@@ -1309,6 +1321,12 @@ body.dark.network-page .badge {
   body.network-page .task-shell-body {
     padding-bottom: 22px;
   }
+  body.network-page .network-config-head {
+    align-items: flex-start;
+  }
+  body.network-page .config-toggle-actions {
+    gap: 10px;
+  }
   body.network-page .line.align-top h3 {
     grid-template-columns: 1fr;
   }
@@ -1322,7 +1340,7 @@ body.dark.network-page .badge {
     display: block;
   }
   body.network-page .network-name input[type=text] {
-    border-radius: 14px;
+    border-radius: 9px;
   }
 }
 </style>
@@ -1384,31 +1402,35 @@ document.addEventListener('DOMContentLoaded', function() {
   <section class='task-shell network-shell'>
     <header class='task-shell-header'>
       <div class='task-shell-header-main'>
-        <p class='task-eyebrow'>Network</p>
         <h1 class='task-title'>Network settings</h1>
         <p class='task-description'>Instantly add HTTPS, CORS, and peer sharing for apps on your local network.</p>
       </div>
     </header>
     <div class='task-shell-body network-shell-body'>
       <div class='c'>
-  <div class='container'>
+  <section class='task-section network-config-section' aria-label='Network access'>
+    <div class='task-section-head network-config-head'>
+      <div class='config-access-copy'>
+        <div class='config-access-titleline'>
+          <h2 class='task-section-title'>Network access</h2>
+          <div id='active-label'><%=peer_active ? "On" : "Off"%></div>
+        </div>
+        <p class='task-section-subcopy'>Enable local sharing and set this machine's network name.</p>
+      </div>
+      <div class='config-toggle-actions'>
+        <label class="switcher">
+          <input id='active' type="checkbox" <%=peer_active ? 'checked' : ''%>>
+          <span class="slider"></span>
+        </label>
+        <button class='task-button primary save config-save-btn'>Save</button>
+      </div>
+    </div>
     <div class='config'>
       <div class='config-body'>
-        <div class='config-row config-toggle-row'>
-          <div class='config-toggle-copy'>
-            <div class='label'>Network access</div>
-            <div id='active-label'><%=peer_active ? "On" : "Off"%></div>
-          </div>
-          <label class="switcher">
-            <input id='active' type="checkbox" <%=peer_active ? 'checked' : ''%>>
-            <span class="slider"></span>
-          </label>
-        </div>
-        <button class='btn save config-save-btn'>Save</button>
         <div class='config-row' id='network_name'>
           <div class='label'>Network Name</div>
           <div class='network-name'>
-            <input id='name' type='text' value="<%=name%>">
+            <input id='name' class='task-input' type='text' value="<%=name%>">
           </div>
         </div>
       </div>
@@ -1425,7 +1447,7 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class='loading hidden'>
       <i class="fa-solid fa-circle-notch fa-spin"></i> Stand by. Do not close this window..
     </div>
-  </div>
+  </section>
   <div class='container'>
     <div class='running-apps'>
       <% if (requirements_pending || peer_active && processes.length === 0) { %>

package/server/views/partials/main_sidebar.ejs

@@ -4,6 +4,31 @@
   const sidebarCurrentHost = (typeof current_host !== "undefined" && current_host) ? current_host : "";
   const sidebarSelectedNetName = (typeof selectedNetName !== "undefined" && selectedNetName) ? String(selectedNetName) : "";
   const sidebarShowPeerAccess = typeof showPeerAccess === "boolean" ? showPeerAccess : true;
+  const sidebarPeerSourcePoints = Array.isArray(typeof peer_access_points !== "undefined" ? peer_access_points : null) ? peer_access_points : [];
+  const sidebarPeerAccessPoints = sidebarPeerSourcePoints
+    .filter((point) => point && point.url)
+    .map((point) => {
+      const url = String(point.url);
+      return {
+        url,
+        qr: point.qr ? String(point.qr) : `/qr?data=${encodeURIComponent(url)}&s=4&m=0`,
+        scope_label: point.scope_label ? String(point.scope_label) : "",
+      };
+    });
+  const sidebarPeerAccessRouterInstalled = typeof peer_access_router_installed === "boolean" ? peer_access_router_installed : true;
+  if (
+    sidebarPeerAccessPoints.length === 0 &&
+    typeof peer_qr !== "undefined" && peer_qr &&
+    typeof peer_url !== "undefined" && peer_url
+  ) {
+    sidebarPeerAccessPoints.push({
+      url: String(peer_url),
+      qr: String(peer_qr),
+      scope_label: "",
+    });
+  }
+  const sidebarShowPhoneAccess = sidebarShowPeerAccess && sidebarPeerAccessPoints.length > 0;
+  const sidebarPhoneAccessNeedsSetup = sidebarShowPhoneAccess && !sidebarPeerAccessRouterInstalled;
   const brands = { win32: "windows", darwin: "apple", linux: "Linux" };
 %>
 <button type="button" class="main-sidebar-mobile-toggle" data-main-sidebar-toggle aria-label="Open navigation" aria-expanded="false">
@@ -29,44 +54,101 @@
 
     <div class='main-sidebar-section' aria-label="Computer">
       <div class="main-sidebar-section-title">Computer</div>
-      <a href="/home" class="tab <%= sidebarSelected === 'home' ? 'selected' : '' %>" data-tippy-content="This machine"><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
-      <a href="/network" class="tab <%= sidebarSelected === 'network' ? 'selected' : '' %>" data-tippy-content="Local network"><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
+      <a href="/home" class="tab <%= sidebarSelected === 'home' ? 'selected' : '' %>"><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
+      <a href="/network" class="tab <%= sidebarSelected === 'network' ? 'selected' : '' %>"><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
       <% if (sidebarList.length > 0) { %>
         <% sidebarList.forEach(({ host, name, platform }) => { %>
           <% const selectedNet = sidebarSelectedNetName && String(name || "") === sidebarSelectedNetName; %>
-          <a href="/net/<%=name%>" class="submenu tab <%= selectedNet ? 'selected' : '' %>" data-tippy-content="<%=name%> (<%=sidebarCurrentHost === host ? 'this machine' : host%>)"><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=sidebarCurrentHost === host ? 'this machine' : host%>)</div></a>
+          <a href="/net/<%=name%>" class="submenu tab <%= selectedNet ? 'selected' : '' %>"><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=sidebarCurrentHost === host ? 'this machine' : host%>)</div></a>
         <% }) %>
       <% } %>
+      <% if (sidebarShowPhoneAccess) { %>
+        <button type="button" class="tab main-sidebar-phone-trigger" data-peer-access-open aria-haspopup="dialog" aria-controls="main-sidebar-peer-dialog" aria-expanded="false">
+          <i class="fa-solid fa-mobile-screen-button"></i><div class='caption'>Phone</div>
+        </button>
+      <% } %>
     </div>
 
     <div class='main-sidebar-section' aria-label="Manage">
       <div class="main-sidebar-section-title">Manage</div>
-      <a class="tab <%= sidebarSelected === 'checkpoints' ? 'selected' : '' %>" href="/checkpoints" data-tippy-content="Checkpoints"><i class="fa-solid fa-clock-rotate-left"></i><div class='caption'>Checkpoints</div></a>
-      <a class="tab <%= sidebarSelected === 'tools' ? 'selected' : '' %>" href="/tools" data-tippy-content="Installed Tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Tools</div></a>
-      <a class="tab <%= sidebarSelected === 'plugins' ? 'selected' : '' %>" href="/plugins" data-tippy-content="Plugins"><i class="fa-solid fa-plug-circle-bolt"></i><div class='caption'>Plugins</div></a>
-      <a class="tab <%= sidebarSelected === 'tasks' ? 'selected' : '' %>" href="/tasks" data-tippy-content="Tasks"><i class="fa-solid fa-list-check"></i><div class='caption'>Tasks</div></a>
-      <a class="tab <%= sidebarSelected === 'skills' ? 'selected' : '' %>" href="/skills" data-tippy-content="Skills"><i class="fa-solid fa-wand-magic-sparkles"></i><div class='caption'>Skills</div></a>
-      <a class="tab <%= sidebarSelected === 'logs' ? 'selected' : '' %>" id='genlog' href="/logs" data-tippy-content="Logs"><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
+      <a class="tab <%= sidebarSelected === 'checkpoints' ? 'selected' : '' %>" href="/checkpoints"><i class="fa-solid fa-clock-rotate-left"></i><div class='caption'>Checkpoints</div></a>
+      <a class="tab <%= sidebarSelected === 'tools' ? 'selected' : '' %>" href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Tools</div></a>
+      <a class="tab <%= sidebarSelected === 'plugins' ? 'selected' : '' %>" href="/plugins"><i class="fa-solid fa-plug-circle-bolt"></i><div class='caption'>Plugins</div></a>
+      <a class="tab <%= sidebarSelected === 'tasks' ? 'selected' : '' %>" href="/tasks"><i class="fa-solid fa-list-check"></i><div class='caption'>Tasks</div></a>
+      <a class="tab <%= sidebarSelected === 'skills' ? 'selected' : '' %>" href="/skills"><i class="fa-solid fa-wand-magic-sparkles"></i><div class='caption'>Skills</div></a>
+      <a class="tab <%= sidebarSelected === 'logs' ? 'selected' : '' %>" id='genlog' href="/logs"><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
     </div>
 
     <div class='main-sidebar-section' aria-label="Configure">
       <div class="main-sidebar-section-title">Configure</div>
-      <a class="tab <%= sidebarSelected === 'autolaunch' ? 'selected' : '' %>" href="/autolaunch" data-tippy-content="Autolaunch"><i class="fa-solid fa-power-off"></i><div class='caption'>Autolaunch</div></a>
-      <a href="/connect" class="tab <%= sidebarSelected === 'connect' ? 'selected' : '' %>" data-tippy-content="Login"><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
-      <a class="tab <%= sidebarSelected === 'settings' ? 'selected' : '' %>" href="/home?mode=settings" data-tippy-content="Settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+      <a class="tab <%= sidebarSelected === 'autolaunch' ? 'selected' : '' %>" href="/autolaunch"><i class="fa-solid fa-power-off"></i><div class='caption'>Autolaunch</div></a>
+      <a href="/connect" class="tab <%= sidebarSelected === 'connect' ? 'selected' : '' %>"><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
+      <a class="tab <%= sidebarSelected === 'settings' ? 'selected' : '' %>" href="/home?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
     </div>
   </nav>
-
-  <% if (sidebarShowPeerAccess) { %>
-    <div class='main-sidebar-peer'>
-      <%- include('peer_access_points', {
-        peer_access_points: (typeof peer_access_points !== "undefined" ? peer_access_points : null),
-        peer_url: (typeof peer_url !== "undefined" ? peer_url : null),
-        peer_qr: (typeof peer_qr !== "undefined" ? peer_qr : null),
-      }) %>
-    </div>
-  <% } %>
 </aside>
+<% if (sidebarShowPhoneAccess) { %>
+  <div class="main-sidebar-peer-dialog" data-peer-access-modal hidden>
+    <button type="button" class="main-sidebar-peer-dialog-backdrop" data-peer-access-close aria-label="Close phone popup" tabindex="-1"></button>
+    <section class="main-sidebar-peer-dialog-surface" id="main-sidebar-peer-dialog" role="dialog" aria-modal="true" aria-labelledby="main-sidebar-peer-dialog-title">
+      <div class="main-sidebar-peer-dialog-header">
+        <div class="main-sidebar-peer-dialog-icon" aria-hidden="true">
+          <i class="fa-solid fa-mobile-screen-button"></i>
+        </div>
+        <div class="main-sidebar-peer-dialog-heading">
+          <div class="main-sidebar-peer-dialog-title" id="main-sidebar-peer-dialog-title"><%= sidebarPhoneAccessNeedsSetup ? 'Set up local access' : 'Open from another device' %></div>
+          <div class="main-sidebar-peer-dialog-subtitle"><%= sidebarPhoneAccessNeedsSetup ? 'Same network only' : 'Same Wi-Fi/LAN only' %></div>
+        </div>
+        <button type="button" class="main-sidebar-peer-dialog-close" data-peer-access-close aria-label="Close phone popup">
+          <i class="fa-solid fa-xmark" aria-hidden="true"></i>
+        </button>
+      </div>
+      <% if (!sidebarPhoneAccessNeedsSetup && sidebarPeerAccessPoints.length > 1) { %>
+        <div class="main-sidebar-peer-dialog-tabs" role="tablist" aria-label="Phone connection options">
+          <% sidebarPeerAccessPoints.forEach((point, index) => { %>
+            <% const tabLabel = point.scope_label || `Option ${index + 1}`; %>
+            <button type="button" class="main-sidebar-peer-dialog-tab <%= index === 0 ? 'is-active' : '' %>" data-peer-access-tab data-peer-access-index="<%= index %>" role="tab" aria-selected="<%= index === 0 ? 'true' : 'false' %>" aria-controls="main-sidebar-peer-panel-<%= index %>" tabindex="<%= index === 0 ? '0' : '-1' %>"><%= tabLabel %></button>
+          <% }) %>
+        </div>
+      <% } %>
+      <div class="main-sidebar-peer-dialog-body">
+        <% if (sidebarPhoneAccessNeedsSetup) { %>
+          <div class="main-sidebar-peer-setup">
+            <p class="main-sidebar-peer-setup-copy">To open Pinokio from another device on this network, set up local access first.</p>
+            <div class="main-sidebar-peer-setup-actions">
+              <a class="main-sidebar-peer-setup-primary" href="/setup/network" data-peer-access-setup>
+                Set up local access
+              </a>
+              <button type="button" class="main-sidebar-peer-setup-secondary" data-peer-access-close>
+                Cancel
+              </button>
+            </div>
+          </div>
+        <% } else { %>
+          <% sidebarPeerAccessPoints.forEach((point, index) => { %>
+            <div class="main-sidebar-peer-dialog-panel <%= index === 0 ? 'is-active' : '' %>" id="main-sidebar-peer-panel-<%= index %>" data-peer-access-panel data-peer-access-index="<%= index %>" role="tabpanel" <%= index === 0 ? '' : 'hidden' %>>
+              <a class="main-sidebar-peer-qr-link" href="<%= point.url %>" target="_blank" rel="noreferrer">
+                <img class="main-sidebar-peer-qr-image" src="<%= point.qr %>" alt="QR code for <%= point.url %>"/>
+              </a>
+              <div class="main-sidebar-peer-caption">
+                Scan with a device on the same local network
+              </div>
+              <div class="main-sidebar-peer-local-note">
+                This link is not public and will not work outside this network.
+              </div>
+              <div class="main-sidebar-peer-url-row">
+                <a class="main-sidebar-peer-url" href="<%= point.url %>" target="_blank" rel="noreferrer"><%= point.url %></a>
+                <button type="button" class="main-sidebar-peer-copy" data-peer-access-copy data-peer-access-url="<%= point.url %>" aria-label="Copy phone URL" title="Copy URL">
+                  <i class="fa-regular fa-copy" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+          <% }) %>
+        <% } %>
+      </div>
+    </section>
+  </div>
+<% } %>
 <script>
   (() => {
     const body = document.body;
@@ -123,19 +205,148 @@
       };
     }
 
+    if (window.__pinokioPeerAccessModalInit) return;
+    window.__pinokioPeerAccessModalInit = true;
+
+    const peerAccessTrigger = document.querySelector("[data-peer-access-open]");
+    const peerAccessModal = document.querySelector("[data-peer-access-modal]");
+    if (body && peerAccessTrigger && peerAccessModal) {
+      const peerAccessCloseButtons = peerAccessModal.querySelectorAll("[data-peer-access-close]");
+      const peerAccessTabs = peerAccessModal.querySelectorAll("[data-peer-access-tab]");
+      const peerAccessPanels = peerAccessModal.querySelectorAll("[data-peer-access-panel]");
+      const peerAccessCopyButtons = peerAccessModal.querySelectorAll("[data-peer-access-copy]");
+      const peerAccessSetupLinks = peerAccessModal.querySelectorAll("[data-peer-access-setup]");
+      const peerAccessFocusTarget = peerAccessModal.querySelector(".main-sidebar-peer-dialog-close");
+
+      const setPeerAccessOpen = (open) => {
+        const nextOpen = !!open;
+        peerAccessModal.hidden = !nextOpen;
+        body.classList.toggle("main-sidebar-peer-dialog-open", nextOpen);
+        peerAccessTrigger.setAttribute("aria-expanded", nextOpen ? "true" : "false");
+        if (nextOpen) {
+          window.requestAnimationFrame(() => {
+            if (peerAccessFocusTarget && typeof peerAccessFocusTarget.focus === "function") {
+              peerAccessFocusTarget.focus();
+            }
+          });
+        } else if (typeof peerAccessTrigger.focus === "function") {
+          peerAccessTrigger.focus();
+        }
+      };
+
+      const setPeerAccessPanel = (index) => {
+        const activeIndex = String(index);
+        peerAccessTabs.forEach((tab) => {
+          const active = tab.dataset.peerAccessIndex === activeIndex;
+          tab.classList.toggle("is-active", active);
+          tab.setAttribute("aria-selected", active ? "true" : "false");
+          tab.setAttribute("tabindex", active ? "0" : "-1");
+        });
+        peerAccessPanels.forEach((panel) => {
+          const active = panel.dataset.peerAccessIndex === activeIndex;
+          panel.hidden = !active;
+          panel.classList.toggle("is-active", active);
+        });
+      };
+
+      const copyText = async (text) => {
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+          await navigator.clipboard.writeText(text);
+          return;
+        }
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        textarea.remove();
+      };
+
+      peerAccessTrigger.addEventListener("click", () => {
+        setPeerAccessOpen(peerAccessModal.hidden);
+      });
+
+      peerAccessCloseButtons.forEach((button) => {
+        button.addEventListener("click", () => setPeerAccessOpen(false));
+      });
+
+      peerAccessTabs.forEach((tab) => {
+        tab.addEventListener("click", () => setPeerAccessPanel(tab.dataset.peerAccessIndex || "0"));
+      });
+
+      peerAccessSetupLinks.forEach((link) => {
+        link.addEventListener("click", (event) => {
+          event.preventDefault();
+          const currentPath = `${window.location.pathname}${window.location.search}`;
+          window.location.href = `/setup/network?callback=${encodeURIComponent(currentPath || "/")}`;
+        });
+      });
+
+      peerAccessCopyButtons.forEach((button) => {
+        button.addEventListener("click", async () => {
+          const url = button.dataset.peerAccessUrl || "";
+          if (!url) return;
+          try {
+            await copyText(url);
+            const icon = button.querySelector("i");
+            button.setAttribute("aria-label", "Copied phone URL");
+            button.setAttribute("title", "Copied");
+            if (icon) {
+              icon.classList.remove("fa-regular", "fa-copy");
+              icon.classList.add("fa-solid", "fa-check");
+            }
+            window.setTimeout(() => {
+              button.setAttribute("aria-label", "Copy phone URL");
+              button.setAttribute("title", "Copy URL");
+              if (icon) {
+                icon.classList.remove("fa-solid", "fa-check");
+                icon.classList.add("fa-regular", "fa-copy");
+              }
+            }, 1200);
+          } catch (_) {}
+        });
+      });
+
+      document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && !peerAccessModal.hidden) {
+          setPeerAccessOpen(false);
+        }
+      });
+    }
+
     if (window.__pinokioMainSidebarMobileInit) return;
     window.__pinokioMainSidebarMobileInit = true;
 
     const html = document.documentElement;
     const toggle = document.querySelector("[data-main-sidebar-toggle]");
+    const mobileHomeToggle = document.querySelector("body.main-sidebar-page > header.navheader .home");
     const backdrop = document.querySelector("[data-main-sidebar-backdrop]");
-    const mobileMq = window.matchMedia("(max-width: 600px)");
+    const mobileMq = window.matchMedia("(max-width: 768px)");
 
     if (!body || !html || !sidebar || !toggle || !backdrop) return;
 
     const sync = () => {
       const open = body.classList.contains("main-sidebar-mobile-open");
       toggle.setAttribute("aria-expanded", open ? "true" : "false");
+      if (mobileHomeToggle) {
+        if (mobileMq.matches) {
+          const label = open ? "Close navigation" : "Open navigation";
+          mobileHomeToggle.setAttribute("role", "button");
+          mobileHomeToggle.setAttribute("aria-controls", "main-sidebar");
+          mobileHomeToggle.setAttribute("aria-expanded", open ? "true" : "false");
+          mobileHomeToggle.setAttribute("aria-label", label);
+          mobileHomeToggle.setAttribute("title", label);
+        } else {
+          mobileHomeToggle.removeAttribute("role");
+          mobileHomeToggle.removeAttribute("aria-controls");
+          mobileHomeToggle.removeAttribute("aria-expanded");
+          mobileHomeToggle.removeAttribute("aria-label");
+          mobileHomeToggle.removeAttribute("title");
+        }
+      }
       const icon = toggle.querySelector("i");
       if (icon) {
         icon.classList.toggle("fa-bars", !open);
@@ -157,14 +368,28 @@
       sync();
     };
 
-    toggle.addEventListener("click", () => {
+    const toggleMobileSidebar = () => {
       if (body.classList.contains("main-sidebar-mobile-open")) {
         close();
       } else {
         open();
       }
+    };
+
+    toggle.addEventListener("click", () => {
+      toggleMobileSidebar();
     });
 
+    if (mobileHomeToggle) {
+      mobileHomeToggle.addEventListener("click", (event) => {
+        if (!mobileMq.matches) {
+          return;
+        }
+        event.preventDefault();
+        toggleMobileSidebar();
+      });
+    }
+
     backdrop.addEventListener("click", close);
 
     sidebar.addEventListener("click", (event) => {