pinokiod 7.5.52 → 7.5.54

package/package.json

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

package/server/public/style.css

@@ -1433,6 +1433,17 @@ body.main-sidebar-page main > .task-container {
   margin-top: 8px;
   padding-top: 0;
 }
+.main-sidebar .main-sidebar-section-connect {
+  margin-top: auto;
+  padding-top: 10px;
+}
+.main-sidebar .main-sidebar-section-connect::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin-bottom: 10px;
+  background: var(--pinokio-sidebar-separator);
+}
 .main-sidebar-section-title {
   min-height: 20px;
   display: flex;

package/server/views/app.ejs

@@ -85,7 +85,7 @@ body.app-page > header.navheader h1 > .home-server-popover {
 }
 .app-header-info {
   position: relative;
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   display: inline-flex;
   align-items: center;
@@ -100,8 +100,7 @@ body.app-page > header.navheader h1 > .home-server-popover {
   align-items: center;
   gap: 8px;
   min-width: 0;
-  width: 100%;
-  max-width: none;
+  max-width: min(260px, 32vw);
   height: 22px;
   padding: 0 4px;
   margin: 0 -4px;
@@ -325,11 +324,20 @@ body.app-page header.navheader .nav-labeled-action:focus-visible {
   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;
+  body.app-page header.navheader .app-header-identity {
+    gap: 5px;
+    padding: 0 9px;
+    margin-right: 6px;
+  }
+  body.app-page header.navheader .app-header-info-trigger {
+    gap: 6px;
+  }
+  body.app-page header.navheader .resource-usage-trigger {
+    gap: 4px;
+    padding: 0 3px;
+  }
+  body.app-page header.navheader .resource-chip {
+    font-size: 10px;
   }
 }
 .resource-usage {
@@ -6884,10 +6892,10 @@ header.navheader h1 {
 	    min-width: 0;
 	    display: flex;
 	    align-items: center;
-	    justify-content: flex-start;
+	    justify-content: center;
 	    align-content: center;
 	    flex-wrap: wrap;
-	    gap: 2px 5px;
+	    gap: 2px 8px;
 	    min-height: 38px;
 	    padding: 2px 9px;
 	    border-radius: 999px;
@@ -6901,11 +6909,11 @@ header.navheader h1 {
     background: rgba(255,255,255,0.06);
   }
   .mobile-bottom-nav .app-header-info {
-    flex: 0 1 42%;
-    max-width: 42%;
+    flex: 0 1 auto;
+    max-width: min(260px, 42%);
   }
   .mobile-bottom-nav .app-header-info-trigger {
-    width: 100%;
+    width: auto;
     max-width: 100%;
     height: auto;
     min-height: 18px;
@@ -6976,14 +6984,15 @@ header.navheader h1 {
     display: none;
   }
 	  .mobile-bottom-nav .resource-usage {
-	    flex: 1 1 120px;
-	    max-width: none;
+	    flex: 0 1 auto;
+	    max-width: 100%;
 	  }
 	  .mobile-bottom-nav .resource-usage-trigger {
-	    width: 100%;
+	    width: auto;
+	    max-width: 100%;
 	    height: auto;
 	    min-height: 0;
-	    justify-content: flex-start;
+	    justify-content: center;
 	    align-content: center;
 	    flex-wrap: wrap;
 	    gap: 2px 5px;

package/server/views/partials/main_sidebar.ejs

@@ -40,6 +40,12 @@
       <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>
+
+    <div class='main-sidebar-section main-sidebar-section-connect' aria-label="Community links">
+      <a class="tab" href="https://x.com/cocktailpeanut" target="_blank" rel="noopener noreferrer" data-main-sidebar-browser-link><i class="fa-brands fa-x-twitter"></i><div class='caption'>Updates</div></a>
+      <a class="tab" href="https://discord.gg/TQdNwadtE4" target="_blank" rel="noopener noreferrer" data-main-sidebar-browser-link><i class="fa-brands fa-discord"></i><div class='caption'>Discord</div></a>
+      <a class="tab" href="https://pinokiocomputer.substack.com" target="_blank" rel="noopener noreferrer" data-main-sidebar-browser-link><i class="fa-solid fa-newspaper"></i><div class='caption'>Newsletter</div></a>
+    </div>
   </nav>
 </aside>
 <script>
@@ -50,6 +56,23 @@
     const sidebar = document.getElementById("main-sidebar");
     const peekTrigger = document.querySelector("[data-main-sidebar-peek-trigger]");
 
+    if (sidebar) {
+      sidebar.querySelectorAll("[data-main-sidebar-browser-link]").forEach((link) => {
+        link.addEventListener("click", (event) => {
+          const href = link.getAttribute("href") || "";
+          if (!href) return;
+          event.preventDefault();
+          event.stopPropagation();
+          const agent = document.body ? document.body.getAttribute("data-agent") : null;
+          if (agent === "electron") {
+            window.open(href, "_blank", "browser");
+          } else {
+            window.open(href, "_blank");
+          }
+        });
+      });
+    }
+
     const initHomeServerStatusBadge = () => {
       if (!sidebar || window.__pinokioMainSidebarHomeServerStatusInit) return;
       const homeServerTab = sidebar.querySelector("[data-main-sidebar-home-server-tab]");

package/test/launch-settings-ui.test.js

@@ -643,8 +643,23 @@ test("app navbar stays on one line when app identity and Home Server controls ar
   assert.match(appView, /body\.app-page > header\.navheader h1 > \.home,[\s\S]*body\.app-page > header\.navheader h1 > \.home-server-popover\s*\{[\s\S]*flex:\s*0 0 auto;/)
   assert.match(appView, /body\.app-page header\.navheader h1 > \.flexible\s*\{[\s\S]*flex:\s*0 0 0;[\s\S]*margin-left:\s*auto;/)
   assert.match(appView, /\.app-header-identity\s*\{[\s\S]*flex:\s*1 1 auto;[\s\S]*max-width:\s*none;/)
+  assert.match(appView, /\.app-header-info\s*\{[\s\S]*flex:\s*0 1 auto;/)
+  const identityTriggerStart = appView.indexOf(".app-header-info-trigger {")
+  const identityTriggerEnd = appView.indexOf("\n}", identityTriggerStart)
+  const identityTriggerRule = identityTriggerStart >= 0 && identityTriggerEnd > identityTriggerStart
+    ? appView.slice(identityTriggerStart, identityTriggerEnd)
+    : ""
+  assert.match(identityTriggerRule, /max-width:\s*min\(260px, 32vw\);/)
+  assert.doesNotMatch(identityTriggerRule, /width:\s*100%;/)
+  assert.doesNotMatch(identityTriggerRule, /max-width:\s*none;/)
   assert.doesNotMatch(appView, /nav-action-label\s*\{[^}]*display:\s*none;/)
-  assert.match(appView, /@media only screen and \(max-width: 1180px\)\s*\{[\s\S]*\.resource-chip--vram[\s\S]*display:\s*none !important;/)
+  const compactRuleStart = appView.indexOf("@media only screen and (max-width: 1180px)")
+  const compactRuleEnd = appView.indexOf(".resource-usage {", compactRuleStart)
+  const compactHeaderRule = compactRuleStart >= 0 && compactRuleEnd > compactRuleStart
+    ? appView.slice(compactRuleStart, compactRuleEnd)
+    : ""
+  assert.match(compactHeaderRule, /body\.app-page header\.navheader \.resource-usage-trigger\s*\{[\s\S]*gap:\s*4px;[\s\S]*padding:\s*0 3px;/)
+  assert.doesNotMatch(compactHeaderRule, /\.resource-chip--(?:cpu|ram|vram)[\s\S]*display:\s*none !important;/)
 })
 
 test("download page header does not show browser chrome controls", async () => {
@@ -970,7 +985,30 @@ test("app identity popover exposes launcher metadata and remote browser link", a
   assert.match(appView, /window\.open\(href, "_blank"\)/)
   assert.match(appView, /window\.open\(href, "_blank", "browser"\)/)
   assert.match(appView, /No browser-openable remote detected/)
-  assert.match(appView, /\.mobile-bottom-nav__identity \{[\s\S]*overflow: visible;/)
+  const cssRule = (selector) => {
+    const start = appView.indexOf(`${selector} {`)
+    if (start < 0) return ""
+    const tail = appView.slice(start)
+    const end = tail.match(/\n\s*\}/)
+    return end ? tail.slice(0, end.index + end[0].length) : ""
+  }
+  const mobileIdentityRule = cssRule(".mobile-bottom-nav__identity")
+  const mobileInfoRule = cssRule(".mobile-bottom-nav .app-header-info")
+  const mobileInfoTriggerRule = cssRule(".mobile-bottom-nav .app-header-info-trigger")
+  const mobileResourceRule = cssRule(".mobile-bottom-nav .resource-usage")
+  const mobileResourceTriggerRule = cssRule(".mobile-bottom-nav .resource-usage-trigger")
+  assert.match(mobileIdentityRule, /justify-content:\s*center;/)
+  assert.match(mobileIdentityRule, /overflow:\s*visible;/)
+  assert.doesNotMatch(mobileIdentityRule, /justify-content:\s*flex-start;/)
+  assert.match(mobileInfoRule, /flex:\s*0 1 auto;/)
+  assert.match(mobileInfoRule, /max-width:\s*min\(260px, 42%\);/)
+  assert.match(mobileInfoTriggerRule, /width:\s*auto;/)
+  assert.doesNotMatch(mobileInfoTriggerRule, /(^|\n)\s*width:\s*100%;/)
+  assert.match(mobileResourceRule, /flex:\s*0 1 auto;/)
+  assert.match(mobileResourceRule, /max-width:\s*100%;/)
+  assert.match(mobileResourceTriggerRule, /width:\s*auto;/)
+  assert.match(mobileResourceTriggerRule, /justify-content:\s*center;/)
+  assert.doesNotMatch(mobileResourceTriggerRule, /justify-content:\s*flex-start;/)
   assert.match(appView, /\.mobile-bottom-nav \.app-header-info-popover \{[\s\S]*bottom: calc\(100% \+ 9px\);[\s\S]*width: min\(390px, calc\(100vw - 24px\)\);/)
   assert.match(appView, /\.mobile-bottom-nav \.resource-usage-popover \{[\s\S]*bottom: calc\(100% \+ 9px\);/)
   assert.doesNotMatch(appView, /Open launcher remote/)

package/test/main-sidebar.test.js

@@ -59,3 +59,26 @@ test('main sidebar no longer renders peer rows or phone access modal', async ()
   assert.doesNotMatch(source, /peer_access_router_installed/)
   assert.doesNotMatch(style, /main-sidebar-peer/)
 })
+
+test('main sidebar renders external community links as a footer cluster', async () => {
+  const source = await fs.readFile(sidebarFile, 'utf8')
+  const style = await fs.readFile(path.resolve(__dirname, '..', 'server', 'public', 'style.css'), 'utf8')
+
+  const configureIndex = source.indexOf('aria-label="Configure"')
+  const connectedIndex = source.indexOf('aria-label="Community links"')
+
+  assert.notEqual(configureIndex, -1)
+  assert.notEqual(connectedIndex, -1)
+  assert.ok(configureIndex < connectedIndex)
+  assert.match(source, /main-sidebar-section-connect/)
+  assert.doesNotMatch(source, /main-sidebar-section-connect[\s\S]*main-sidebar-section-title/)
+  assert.doesNotMatch(source, />Stay Connected</)
+  assert.match(source, /href="https:\/\/x\.com\/cocktailpeanut"[^>]*target="_blank"[^>]*rel="noopener noreferrer"[^>]*data-main-sidebar-browser-link[\s\S]*fa-brands fa-x-twitter[\s\S]*Updates/)
+  assert.match(source, /href="https:\/\/discord\.gg\/TQdNwadtE4"[^>]*target="_blank"[^>]*rel="noopener noreferrer"[^>]*data-main-sidebar-browser-link[\s\S]*fa-brands fa-discord[\s\S]*Discord/)
+  assert.match(source, /href="https:\/\/pinokiocomputer\.substack\.com"[^>]*target="_blank"[^>]*rel="noopener noreferrer"[^>]*data-main-sidebar-browser-link[\s\S]*fa-solid fa-newspaper[\s\S]*Newsletter/)
+  assert.doesNotMatch(source, /main-sidebar-section-connect[\s\S]*features="browser"/)
+  assert.match(source, /window\.open\(href, "_blank", "browser"\)/)
+  assert.match(source, /window\.open\(href, "_blank"\)/)
+  assert.match(style, /\.main-sidebar \.main-sidebar-section-connect \{[\s\S]*margin-top:\s*auto/)
+  assert.match(style, /\.main-sidebar \.main-sidebar-section-connect::before \{[\s\S]*background:\s*var\(--pinokio-sidebar-separator\)/)
+})