pinokiod 7.5.44 → 7.5.46

package/server/public/style.css

@@ -1553,270 +1553,6 @@ body.main-sidebar-page aside.main-sidebar .tab.selected .main-sidebar-action-ico
   -webkit-mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
   mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
 }
-.main-sidebar-peer-dialog[hidden],
-.main-sidebar-peer-dialog-panel[hidden] {
-  display: none !important;
-}
-.main-sidebar-peer-dialog {
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
-  display: grid;
-  place-items: center;
-  box-sizing: border-box;
-  padding: 16px;
-}
-.main-sidebar-peer-dialog-backdrop {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  appearance: none;
-  border: 0;
-  border-radius: 0;
-  background: rgba(15, 23, 42, 0.28);
-  cursor: default;
-}
-body.dark .main-sidebar-peer-dialog-backdrop {
-  background: rgba(0, 0, 0, 0.44);
-}
-.main-sidebar-peer-dialog-surface {
-  position: relative;
-  width: min(300px, calc(100vw - 32px));
-  max-height: calc(100vh - 32px);
-  box-sizing: border-box;
-  overflow: auto;
-  padding: 10px;
-  border: 1px solid var(--pinokio-sidebar-tabbar-border);
-  border-radius: 8px;
-  background: var(--pinokio-sidebar-tabbar-bg);
-  color: var(--pinokio-sidebar-tab-active-color);
-  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
-}
-body.dark .main-sidebar-peer-dialog-surface {
-  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
-}
-.main-sidebar-peer-dialog-header {
-  display: grid;
-  grid-template-columns: 30px minmax(0, 1fr) 28px;
-  align-items: center;
-  gap: 8px;
-}
-.main-sidebar-peer-dialog-icon,
-.main-sidebar-peer-dialog-close,
-.main-sidebar-peer-copy {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  border-radius: 6px;
-}
-.main-sidebar-peer-dialog-icon {
-  background: var(--pinokio-sidebar-tab-active-bg);
-  color: var(--pinokio-sidebar-icon-active);
-}
-.main-sidebar-peer-dialog-heading {
-  min-width: 0;
-}
-.main-sidebar-peer-dialog-title {
-  color: var(--pinokio-sidebar-tab-active-color);
-  font-size: 13px;
-  font-weight: 650;
-  line-height: 1.2;
-  letter-spacing: 0;
-}
-.main-sidebar-peer-dialog-subtitle {
-  margin-top: 2px;
-  color: var(--pinokio-sidebar-action-muted);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1.2;
-  letter-spacing: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.main-sidebar-peer-dialog-close,
-.main-sidebar-peer-copy {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: var(--pinokio-sidebar-icon-muted);
-  cursor: pointer;
-  transition: background-color 120ms ease, color 120ms ease;
-}
-.main-sidebar-peer-dialog-close:hover,
-.main-sidebar-peer-dialog-close:focus-visible,
-.main-sidebar-peer-copy:hover,
-.main-sidebar-peer-copy:focus-visible {
-  background: var(--pinokio-sidebar-tab-hover);
-  color: var(--pinokio-sidebar-icon-active);
-  outline: none;
-}
-.main-sidebar-peer-dialog-tabs {
-  display: flex;
-  gap: 2px;
-  margin-top: 10px;
-  padding: 2px;
-  border-radius: 7px;
-  background: var(--pinokio-sidebar-control-bg);
-}
-.main-sidebar-peer-dialog-tab {
-  flex: 1 1 0;
-  min-width: 0;
-  appearance: none;
-  border: 0;
-  border-radius: 5px;
-  padding: 5px 7px;
-  background: transparent;
-  color: var(--pinokio-sidebar-tab-muted);
-  font: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.main-sidebar-peer-dialog-tab:hover,
-.main-sidebar-peer-dialog-tab:focus-visible,
-.main-sidebar-peer-dialog-tab.is-active {
-  background: var(--pinokio-sidebar-control-active-bg);
-  color: var(--pinokio-sidebar-tab-active-color);
-  outline: none;
-}
-.main-sidebar-peer-dialog-body {
-  margin-top: 10px;
-}
-.main-sidebar-peer-dialog-panel {
-  display: grid;
-  justify-items: center;
-  gap: 8px;
-}
-.main-sidebar-peer-qr-link {
-  display: block;
-  box-sizing: border-box;
-  padding: 10px;
-  border-radius: 6px;
-  background: #ffffff;
-  line-height: 0;
-}
-.main-sidebar-peer-qr-image {
-  width: 174px;
-  height: 174px;
-  display: block;
-  image-rendering: pixelated;
-}
-.main-sidebar-peer-caption {
-  width: 100%;
-  color: var(--pinokio-sidebar-tab-active-color);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.25;
-  text-align: center;
-  letter-spacing: 0;
-  overflow-wrap: anywhere;
-}
-.main-sidebar-peer-local-note {
-  width: 100%;
-  color: var(--pinokio-sidebar-action-muted);
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 1.35;
-  text-align: center;
-  letter-spacing: 0;
-}
-.main-sidebar-peer-url-row {
-  width: 100%;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 28px;
-  align-items: center;
-  gap: 6px;
-}
-.main-sidebar-peer-url {
-  min-width: 0;
-  display: block;
-  padding: 6px 7px;
-  border-radius: 6px;
-  background: var(--pinokio-sidebar-control-bg);
-  color: var(--pinokio-sidebar-tab-muted);
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: 0;
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.main-sidebar-peer-url:hover,
-.main-sidebar-peer-url:focus-visible {
-  color: var(--pinokio-sidebar-tab-active-color);
-  outline: none;
-}
-.main-sidebar-peer-setup {
-  display: grid;
-  gap: 12px;
-}
-.main-sidebar-peer-setup-copy {
-  margin: 0;
-  color: var(--pinokio-sidebar-tab-active-color);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.45;
-  letter-spacing: 0;
-}
-.main-sidebar-peer-setup-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.main-sidebar-peer-setup-primary,
-.main-sidebar-peer-setup-secondary {
-  min-height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  border-radius: 6px;
-  padding: 7px 10px;
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.2;
-  letter-spacing: 0;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
-}
-.main-sidebar-peer-setup-primary {
-  border: 1px solid var(--pinokio-sidebar-tab-active-color);
-  background: var(--pinokio-sidebar-tab-active-color);
-  color: var(--pinokio-sidebar-tabbar-bg);
-}
-.main-sidebar-peer-setup-primary:hover,
-.main-sidebar-peer-setup-primary:focus-visible {
-  border-color: var(--pinokio-sidebar-icon-active);
-  background: var(--pinokio-sidebar-icon-active);
-  color: var(--pinokio-sidebar-tabbar-bg);
-  outline: none;
-}
-.main-sidebar-peer-setup-secondary {
-  appearance: none;
-  border: 1px solid var(--pinokio-sidebar-tabbar-border);
-  background: var(--pinokio-sidebar-control-bg);
-  color: var(--pinokio-sidebar-tab-active-color);
-}
-.main-sidebar-peer-setup-secondary:hover,
-.main-sidebar-peer-setup-secondary:focus-visible {
-  background: var(--pinokio-sidebar-tab-hover);
-  color: var(--pinokio-sidebar-icon-active);
-  outline: none;
-}
 @media only screen and (min-width: 601px) {
   body.main-sidebar-page {
     display: flex;

package/server/public/urldropdown.css

@@ -1568,6 +1568,13 @@ body.dark .urlbar input[type=url] {
 .mobile-link-button {
   display: none;
 }
+header.navheader .urlbar {
+  pointer-events: none;
+  visibility: hidden;
+}
+header.navheader #mobile-link-button {
+  display: none !important;
+}
 .url-modal-overlay {
   background: rgba(15, 23, 42, 0.4);
   -webkit-backdrop-filter: blur(12px);

package/server/views/app.ejs

@@ -70,9 +70,22 @@ body.dark .app-header-identity {
     0 1px 2px rgba(2, 6, 23, 0.35);
   color: rgba(248, 250, 252, 0.94);
 }
+body.app-page > header.navheader h1 {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  flex-wrap: nowrap;
+}
+body.app-page > header.navheader h1 > .home,
+body.app-page > header.navheader h1 > .btn2,
+body.app-page > header.navheader h1 > .sep,
+body.app-page > header.navheader h1 > .home-server-popover {
+  flex: 0 0 auto;
+}
 .app-header-info {
   position: relative;
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   min-width: 0;
   display: inline-flex;
   align-items: center;
@@ -87,7 +100,8 @@ body.dark .app-header-identity {
   align-items: center;
   gap: 8px;
   min-width: 0;
-  max-width: min(260px, 32vw);
+  width: 100%;
+  max-width: none;
   height: 22px;
   padding: 0 4px;
   margin: 0 -4px;
@@ -266,6 +280,7 @@ body.dark .app-header-identity-separator {
 body.app-page header.navheader h1 > .flexible {
   flex: 0 0 0;
   min-width: 0;
+  margin-left: auto;
 }
 body.app-page header.navheader .nav-labeled-action {
   width: auto;
@@ -309,9 +324,17 @@ body.app-page header.navheader .nav-labeled-action:focus-visible {
   background: var(--pinokio-sidebar-tab-active-bg);
   color: var(--pinokio-sidebar-tab-active-color);
 }
+@media only screen and (max-width: 1180px) {
+  body.app-page header.navheader .app-header-identity-separator,
+  body.app-page header.navheader .resource-chip--cpu,
+  body.app-page header.navheader .resource-chip--ram,
+  body.app-page header.navheader .resource-chip--vram {
+    display: none !important;
+  }
+}
 .resource-usage {
   position: relative;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   min-width: 0;
   display: inline-flex;
   align-items: center;
@@ -327,6 +350,8 @@ body.app-page header.navheader .nav-labeled-action:focus-visible {
   gap: 8px;
   height: 22px;
   min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   padding: 0 7px;
   margin: 0;
   border-radius: 999px;
@@ -8180,6 +8205,7 @@ body.dark .pinokio-custom-terminal-header {
   <span class="nav-action-label">Feed</span>
 </button>
 <% } %>
+<%- include('partials/home_server_popover') %>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>
 </a>
@@ -8194,6 +8220,7 @@ body.dark .pinokio-custom-terminal-header {
 </button>
 </h1>
 </header>
+<%- include('partials/home_server_popover_assets') %>
 <div class='appcanvas vertical <%=type === "browse" ? "dev-workspace" : ""%>' data-page-error="<%= error ? '1' : '0' %>">
   <% if (type !== 'files') { %>
   <button type='button' class='app-sidebar-peek-trigger' data-app-sidebar-peek-trigger aria-label='Show app navigation' aria-controls='app-sidebar' aria-expanded='false'></button>

package/server/views/app_search_test.ejs

@@ -127,6 +127,7 @@ document.addEventListener('DOMContentLoaded', function() {
     <div class="url-dropdown" id="url-dropdown" style="display: none;"></div>
   </div>
 </form>
+<%- include('partials/home_server_popover') %>
 <a class="btn2" href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>
 </a>
@@ -141,6 +142,7 @@ document.addEventListener('DOMContentLoaded', function() {
 </button>
 </h1>
 </header>
+<%- include('partials/home_server_popover_assets') %>
 <main>
   <div class="search-shell">
     <div class="search-card">

package/server/views/connect/x.ejs

@@ -206,6 +206,7 @@ pre {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
+<%- include('../partials/home_server_popover') %>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>
 </a>
@@ -221,6 +222,7 @@ pre {
 </button>
 </h1>
 </header>
+<%- include('../partials/home_server_popover_assets') %>
 <main>
   <div class='head'>
     <h3><i class="fa-brands fa-x-twitter"></i><br><br>Connect with X.com</h3>

package/server/views/container.ejs

@@ -348,6 +348,7 @@ iframe {
     <div class='url-dropdown' id='url-dropdown'></div>
   </div>
 </form>
+<%- include('partials/home_server_popover') %>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>
 </a>
@@ -362,6 +363,7 @@ iframe {
 </button>
 </h1>
 </header>
+<%- include('partials/home_server_popover_assets') %>
 <iframe class='mainframe' src="<%=src%>" allow="fullscreen *;" allowfullscreen></iframe>
 <script src="/urldropdown.js"></script>
 <script>

package/server/views/create.ejs

@@ -20,8 +20,11 @@
 <header class="navheader grabbable">
 <h1>
 <a class="home" href="/home"><img class="icon" src="/pinokio-black.png" /></a>
+<div class="flexible"></div>
+<%- include('partials/home_server_popover') %>
 </h1>
 </header>
+<%- include('partials/home_server_popover_assets') %>
 <main>
   <div class="container create-page">
     <div id="create-page-root" class="create-page-root" aria-live="polite"></div>

package/server/views/editor.ejs

@@ -1007,6 +1007,8 @@ const reloadMemory = async () => {
       <a class='path' href="<%=path.path%>"><%-path.name%></a>
     <% } %>
   <% }) %>
+  <div class='flexible'></div>
+  <%- include('partials/home_server_popover') %>
   </h1>
   <% if (false) { %>
   <a class='gitremote' data-filepath="<%=filepath%>"><%=filepath%></a>
@@ -1032,6 +1034,7 @@ const reloadMemory = async () => {
     </div>
   <% } %>
   </header>
+  <%- include('partials/home_server_popover_assets') %>
   <% if (requirements_pending) { %>
     <div class='requirements'>
       <div class='content'>

package/server/views/env_editor.ejs

@@ -524,6 +524,7 @@ document.addEventListener("DOMContentLoaded", async () => {
             <a class='home-button home' href="/home"><i class='fa-solid fa-home'></i></a>
           <% } %>
           <div class='flexible'></div>
+          <%- include('partials/home_server_popover') %>
           <div class='nav-btns'>
             <a class='btn' href="<%=editorpath%>"><i class="fa-solid fa-pen-to-square"></i> Edit file</a>
             <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Open in File Explorer</button>
@@ -533,6 +534,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           </div>
         </h1>
       </header>
+      <%- include('partials/home_server_popover_assets') %>
     <% } %>
     <div id='editor' class='<%=init ? "hidden" : ""%>'>
       <% items.forEach((item) => { %>

package/server/views/explore.ejs

@@ -159,6 +159,7 @@ body.dark .explore-url {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <input id="explore-url" class="explore-url" type="url" readonly spellcheck="false" value="">
+<%- include('partials/home_server_popover') %>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>
 </a>
@@ -173,6 +174,7 @@ body.dark .explore-url {
 </button>
 </h1>
 </header>
+<%- include('partials/home_server_popover_assets') %>
 <main>
 <% if (theme === "dark") { %>
   <iframe name="<%=schema%>" src="<%=discover_dark%>" <%=agent === "electron" ? "no-referrer" : ""%> allow="fullscreen *;" allowfullscreen></iframe>

package/server/views/general_editor.ejs

@@ -190,6 +190,8 @@ document.addEventListener("DOMContentLoaded", async () => {
   <h1>
     <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
     <%=filepath%>
+    <div class='flexible'></div>
+    <%- include('partials/home_server_popover') %>
   </h1>
   <div class='runner'>
     <div id='save' class='btn disabled'>
@@ -198,6 +200,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Open in File Explorer</button>
   </div>
   </header>
+  <%- include('partials/home_server_popover_assets') %>
   <div class='containers'>
     <main>
       <div id='editor'><%=content%></div>

package/server/views/help.ejs

@@ -268,6 +268,7 @@ body.dark .item .tile .badge {
 <button class='btn2' id='screenshot' data-tippy-content="screen capture"><i class="fa-solid fa-camera"></i></button>
 <button class='btn2' id='inspector' data-tippy-content="X-ray mode"><i class="fa-solid fa-eye"></i></button>
 <div class='flexible'></div>
+<%- include('partials/home_server_popover') %>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
   <div><i class="fa-solid fa-table-columns"></i></div>
 </a>
@@ -282,6 +283,7 @@ body.dark .item .tile .badge {
 </button>
 </h1>
 </header>
+<%- include('partials/home_server_popover_assets') %>
 <main>
 <div class='container'>
 <div class='titleview'>