pinokiod 3.231.0 → 3.233.0

package/server/public/container-tab-link.js

@@ -0,0 +1,115 @@
+(function () {
+  const api = window.PinokioTabLinkPopover
+  if (!api) {
+    return
+  }
+  const { renderTabLinkPopover, hideTabLinkPopover, isLocalHostLike } = api
+
+  const getPopoverEl = () => document.getElementById('tab-link-popover')
+
+  const ensureHttpUrl = (value) => {
+    if (typeof value !== 'string') {
+      return ''
+    }
+    let trimmed = value.trim()
+    if (!trimmed) {
+      return ''
+    }
+    if (!/^https?:\/\//i.test(trimmed)) {
+      if (/^[a-z]+:\/\//i.test(trimmed)) {
+        return ''
+      }
+      trimmed = `http://${trimmed}`
+    }
+    try {
+      const parsed = new URL(trimmed)
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+        return ''
+      }
+      return parsed.toString()
+    } catch (_) {
+      return ''
+    }
+  }
+
+  const isLocalUrl = (value) => {
+    if (!value) {
+      return false
+    }
+    try {
+      const parsed = new URL(value)
+      return isLocalHostLike(parsed.hostname)
+    } catch (_) {
+      return false
+    }
+  }
+
+  const resolveCurrentUrl = (input) => {
+    if (input && typeof input.value === 'string' && input.value.trim().length > 0) {
+      const normalized = ensureHttpUrl(input.value)
+      if (normalized) {
+        return normalized
+      }
+    }
+    const fallback = input?.getAttribute('value')
+    return ensureHttpUrl(fallback || '')
+  }
+
+  const showPopoverForAnchor = (anchor, urlInput) => {
+    if (!anchor) {
+      return
+    }
+    const currentUrl = resolveCurrentUrl(urlInput)
+    if (!currentUrl || !isLocalUrl(currentUrl)) {
+      hideTabLinkPopover({ immediate: true })
+      return
+    }
+    renderTabLinkPopover(anchor, {
+      hrefOverride: currentUrl,
+      requireAlternate: false,
+      restrictToBase: true,
+      forceCanonicalQr: true,
+      allowQrPortMismatch: true,
+      skipPeerFallback: true
+    })
+  }
+
+  const handleMouseLeave = (anchor, event) => {
+    const related = event.relatedTarget
+    const popover = getPopoverEl()
+    if (related && (anchor.contains(related) || (popover && popover.contains(related)))) {
+      return
+    }
+    hideTabLinkPopover()
+  }
+
+  const init = () => {
+    const container = document.querySelector('.url-input-container')
+    const urlInput = container ? container.querySelector('input[type="url"]') : null
+    const mobileButton = document.getElementById('mobile-link-button')
+
+    if (container) {
+      container.addEventListener('mouseover', () => showPopoverForAnchor(container, urlInput))
+      container.addEventListener('mouseout', (event) => handleMouseLeave(container, event))
+      const inputFocus = () => showPopoverForAnchor(container, urlInput)
+      const inputBlur = (event) => handleMouseLeave(container, event)
+      if (urlInput) {
+        urlInput.addEventListener('focus', inputFocus)
+        urlInput.addEventListener('blur', inputBlur)
+      }
+    }
+
+    if (mobileButton) {
+      mobileButton.addEventListener('mouseover', () => showPopoverForAnchor(mobileButton, urlInput))
+      mobileButton.addEventListener('mouseout', (event) => handleMouseLeave(mobileButton, event))
+      mobileButton.addEventListener('focus', () => showPopoverForAnchor(mobileButton, urlInput))
+      mobileButton.addEventListener('blur', (event) => handleMouseLeave(mobileButton, event))
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init)
+  } else {
+    init()
+  }
+})()

package/server/public/style.css

@@ -847,9 +847,11 @@ body {
   position: relative;
 }
 /* Reserve scrollbar space to prevent header layout shift */
+/*
 html {
   scrollbar-gutter: stable both-edges;
 }
+*/
 body.dark {
   color: var(--dark-color);
   background: var(--dark-bg);
@@ -2816,3 +2818,7 @@ header.navheader.minimized .home .icon {
 header.navheader.transitioning {
   pointer-events: none;
 }
+
+.shutdown i.fa-stop:hover {
+  color: crimson;
+}

package/server/public/tab-link-popover.css

@@ -0,0 +1,118 @@
+.tab-link-popover {
+  position: fixed;
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 0;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.97);
+  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
+  z-index: 9999;
+  min-width: 240px;
+  max-width: 420px;
+  backdrop-filter: blur(6px);
+}
+body.dark .tab-link-popover {
+  border-color: rgba(255, 255, 255, 0.08);
+  background: rgba(17, 24, 39, 0.95);
+  box-shadow: 0 12px 36px -12px rgba(15, 23, 42, 0.55);
+}
+.tab-link-popover.visible {
+  display: flex;
+}
+.tab-link-popover .tab-link-popover-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: rgba(15, 23, 42, 0.55);
+}
+.tab-link-popover .tab-link-popover-header i {
+  font-size: 12px;
+}
+body.dark .tab-link-popover .tab-link-popover-header {
+  color: rgba(226, 232, 240, 0.7);
+}
+.tab-link-popover .tab-link-popover-item {
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 8px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+.tab-link-popover .tab-link-popover-item.qr-inline { flex-direction: row; align-items: center; gap: 10px; }
+.tab-link-popover .tab-link-popover-item.qr-inline .textcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
+.tab-link-popover .tab-link-popover-item.qr-inline .qr { width: 64px; height: 64px; image-rendering: pixelated; flex: 0 0 auto; margin-left: auto; }
+.tab-link-popover .tab-link-popover-item:hover,
+.tab-link-popover .tab-link-popover-item:focus-visible {
+  background: rgba(15, 23, 42, 0.06);
+  outline: none;
+}
+body.dark .tab-link-popover .tab-link-popover-item:hover,
+body.dark .tab-link-popover .tab-link-popover-item:focus-visible {
+  background: rgba(148, 163, 184, 0.12);
+}
+.tab-link-popover .tab-link-popover-item .label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(15, 23, 42, 0.55);
+}
+body.dark .tab-link-popover .tab-link-popover-item .label {
+  color: rgba(226, 232, 240, 0.65);
+}
+.tab-link-popover .tab-link-popover-item .value {
+  font-size: 13px;
+  line-height: 1.35;
+  word-break: break-word;
+  color: rgba(15, 23, 42, 0.85);
+}
+body.dark .tab-link-popover .tab-link-popover-item .value {
+  color: rgba(226, 232, 240, 0.9);
+}
+.tab-link-popover .tab-link-popover-item .value .muted {
+  color: rgba(15, 23, 42, 0.55);
+}
+body.dark .tab-link-popover .tab-link-popover-item .value .muted {
+  color: rgba(226, 232, 240, 0.65);
+}
+.tab-link-popover .tab-link-popover-footer {
+  border-top: 1px solid rgba(15, 23, 42, 0.08);
+  margin-top: 4px;
+  padding-top: 12px;
+  background: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+}
+.tab-link-popover .tab-link-popover-footer .label,
+.tab-link-popover .tab-link-popover-footer .value {
+  color: inherit;
+}
+.tab-link-popover .tab-link-popover-footer .value {
+  font-weight: 600;
+}
+.tab-link-popover .tab-link-popover-footer:hover,
+.tab-link-popover .tab-link-popover-footer:focus-visible {
+  background: rgba(37, 99, 235, 0.2);
+}
+body.dark .tab-link-popover .tab-link-popover-footer {
+  border-top-color: rgba(148, 163, 184, 0.2);
+  background: rgba(96, 165, 250, 0.22);
+  color: #bfdbfe;
+}
+body.dark .tab-link-popover .tab-link-popover-footer:hover,
+body.dark .tab-link-popover .tab-link-popover-footer:focus-visible {
+  background: rgba(147, 197, 253, 0.35);
+}