pinokiod 3.170.0 → 3.181.0

package/server/public/layout.js

@@ -23,7 +23,7 @@
   const HOST_ORIGIN = window.location.origin;
   const STORAGE_PREFIX = 'pinokio:layout:';
   const MIN_PANEL_SIZE = 120;
-  const GUTTER_SIZE = 4;
+  const GUTTER_SIZE = 6;
 
   const state = {
     sessionId: typeof parsedConfig.sessionId === 'string' && parsedConfig.sessionId.trim() ? parsedConfig.sessionId.trim() : null,
@@ -790,4 +790,118 @@
   };
 
   window.PinokioLayout = api;
+  // Mobile "Tap to connect" curtain is centralized in common.js to avoid duplicates
+  
+  // Top-level notification listener (indicator + optional chime) for mobile
+  (function initTopLevelNotificationListener() {
+    try { if (window.top && window.top !== window) return; } catch (_) { return; }
+    if (window.__pinokioTopNotifyListener) {
+      return;
+    }
+    window.__pinokioTopNotifyListener = true;
+
+    const ensureIndicator = (() => {
+      let el = null;
+      let styleInjected = false;
+      return () => {
+        if (!styleInjected) {
+          const style = document.createElement('style');
+          style.textContent = `
+.pinokio-notify-indicator{position:fixed;top:12px;right:12px;z-index:2147483647;display:none;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(15,23,42,0.92);color:#fff;font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
+.pinokio-notify-indicator .bell{font-size:14px}
+.pinokio-notify-indicator.show{display:inline-flex;animation:pinokioNotifyPop 160ms ease-out, pinokioNotifyFade 1600ms ease-in 700ms forwards}
+@keyframes pinokioNotifyPop{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
+@keyframes pinokioNotifyFade{to{opacity:0;transform:translateY(-4px)}}
+@media (max-width: 768px){.pinokio-notify-indicator{top:10px;right:10px;padding:7px 9px;font-size:12px}}
+          `;
+          document.head.appendChild(style);
+          styleInjected = true;
+        }
+        if (!el) {
+          el = document.createElement('div');
+          el.className = 'pinokio-notify-indicator';
+          const icon = document.createElement('span');
+          icon.className = 'bell';
+          icon.textContent = '🔔';
+          const text = document.createElement('span');
+          text.className = 'text';
+          text.textContent = 'Notification received';
+          el.appendChild(icon);
+          el.appendChild(text);
+          document.body.appendChild(el);
+        }
+        return el;
+      };
+    })();
+
+    const flashIndicator = (message) => {
+      const node = ensureIndicator();
+      const text = node.querySelector('.text');
+      if (text) {
+        const msg = (message && typeof message === 'string' && message.trim()) ? message.trim() : 'Notification received';
+        text.textContent = msg.length > 80 ? (msg.slice(0,77) + '…') : msg;
+      }
+      node.classList.remove('show');
+      void node.offsetWidth;
+      node.classList.add('show');
+      setTimeout(() => node.classList.remove('show'), 2400);
+    };
+
+    const tryPlay = (url) => {
+      try {
+        const src = (typeof url === 'string' && url) ? url : '/chime.mp3';
+        let a = window.__pinokioChimeAudio;
+        if (!a) {
+          a = new Audio(src);
+          a.preload = 'auto';
+          a.loop = false;
+          a.muted = false;
+          window.__pinokioChimeAudio = a;
+        } else {
+          try { if (a.src && !a.src.endsWith(src)) a.src = src; } catch (_) {}
+        }
+        try { a.currentTime = 0; } catch (_) {}
+        const p = a.play();
+        if (p && typeof p.catch === 'function') { p.catch(() => {}); }
+        if (typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function') {
+          try { navigator.vibrate(80); } catch (_) {}
+        }
+      } catch (_) {}
+    };
+
+    const listen = () => {
+      const SocketCtor = typeof window.Socket === 'function' ? window.Socket : (typeof Socket === 'function' ? Socket : null);
+      if (!SocketCtor || typeof WebSocket === 'undefined') {
+        return;
+      }
+      const socket = new SocketCtor();
+      try {
+        socket.run({ method: 'kernel.notifications', mode: 'listen', device_id: (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : undefined }, (packet) => {
+          if (!packet || packet.id !== 'kernel.notifications' || packet.type !== 'notification') {
+            return;
+          }
+          const payload = packet.data || {};
+          // If targeted to a specific device, ignore only when our id exists and mismatches
+          try {
+            const targetId = (typeof payload.device_id === 'string' && payload.device_id.trim()) ? payload.device_id.trim() : null;
+            if (targetId) {
+              const myId = (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : null;
+              if (myId && myId !== targetId) return;
+            }
+          } catch (_) {}
+          flashIndicator(payload.message);
+          tryPlay(payload.sound);
+        }).then(() => {
+          // socket closed; ignore
+        }).catch(() => {});
+        window.__pinokioTopNotifySocket = socket;
+      } catch (_) {}
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', listen, { once: true });
+    } else {
+      listen();
+    }
+  })();
 })();

package/server/public/nav.js

@@ -1,4 +1,8 @@
 document.addEventListener("DOMContentLoaded", () => {
+  // Logging disabled for production
+  const log = () => {};
+  const rectInfo = () => null;
+
   const newWindowButton = document.querySelector("#new-window");
   if (newWindowButton) {
     newWindowButton.addEventListener("click", (event) => {
@@ -14,10 +18,70 @@ document.addEventListener("DOMContentLoaded", () => {
   const header = document.querySelector("header.navheader");
   const minimizeButton = document.querySelector("#minimize-header");
   const homeLink = header ? header.querySelector(".home") : null;
-  if (!header || !minimizeButton || !homeLink) {
+  log("init:elements", { hasHeader: !!header, hasMinimize: !!minimizeButton, hasHome: !!homeLink });
+  // Only require the header; other controls may be missing on some views
+  if (!header) {
+    log("init:abort:no-header", {});
     return;
   }
 
+  // Helper functions used during initial restore must be defined before use
+  const MIN_MARGIN = 8;
+
+  function clampPosition(left, top, sizeOverride) {
+    const rect = header.getBoundingClientRect();
+    const width = sizeOverride && Number.isFinite(sizeOverride.width) ? sizeOverride.width : rect.width;
+    const height = sizeOverride && Number.isFinite(sizeOverride.height) ? sizeOverride.height : rect.height;
+    const maxLeft = Math.max(0, window.innerWidth - width);
+    const maxTop = Math.max(0, window.innerHeight - height);
+    return {
+      left: Math.min(Math.max(0, left), maxLeft),
+      top: Math.min(Math.max(0, top), maxTop),
+    };
+  }
+
+  function applyPosition(left, top) {
+    header.style.left = `${left}px`;
+    header.style.top = `${top}px`;
+    header.style.right = "auto";
+    header.style.bottom = "auto";
+    log("pos:apply", { left, top });
+  }
+
+  function measureRect(configureClone) {
+    const clone = header.cloneNode(true);
+    // Avoid duplicate-IDs while preserving #refresh-page so measurement matches visible controls
+    clone.querySelectorAll("[id]").forEach((node) => {
+      if (node.id !== "refresh-page") {
+        node.removeAttribute("id");
+      }
+    });
+    Object.assign(clone.style, {
+      transition: "none",
+      transform: "none",
+      position: "fixed",
+      visibility: "hidden",
+      pointerEvents: "none",
+      margin: "0",
+      left: "0",
+      top: "0",
+      right: "auto",
+      bottom: "auto",
+      width: "auto",
+      height: "auto",
+    });
+    document.body.appendChild(clone);
+    if (typeof configureClone === "function") {
+      configureClone(clone);
+    }
+    clone.style.right = "auto";
+    clone.style.bottom = "auto";
+    const rect = clone.getBoundingClientRect();
+    log("measure", { minimized: !!clone.classList.contains("minimized"), rect: rectInfo(rect) });
+    clone.remove();
+    return rect;
+  }
+
   const dispatchHeaderState = (minimized, detail = {}) => {
     if (typeof window === "undefined" || typeof window.CustomEvent !== "function") {
       return;
@@ -36,8 +100,49 @@ document.addEventListener("DOMContentLoaded", () => {
     dragHandle.setAttribute("aria-hidden", "true");
     dragHandle.setAttribute("title", "Drag minimized header");
     headerTitle.insertBefore(dragHandle, homeLink ? homeLink.nextSibling : headerTitle.firstChild);
+    log("init:drag-handle:created", {});
   }
 
+  const STORAGE_KEY = () => `pinokio:header-state:v1:${location.pathname}`;
+  const RESTORE_ONCE_KEY = () => `pinokio:header-restore-once:${location.pathname}`;
+  const storage = (() => {
+    try { return window.sessionStorage; } catch (_) { return null; }
+  })();
+  const readPersisted = () => {
+    if (!storage) return null;
+    try {
+      const raw = storage.getItem(STORAGE_KEY());
+      if (!raw) return null;
+      const data = JSON.parse(raw);
+      if (!data || typeof data !== "object") return null;
+      const left = Number.isFinite(data.left) ? data.left : null;
+      const top = Number.isFinite(data.top) ? data.top : null;
+      const minimized = !!data.minimized;
+      const out = { minimized, left, top };
+      log("storage:read", { key: STORAGE_KEY(), value: out });
+      return out;
+    } catch (_) {
+      return null;
+    }
+  };
+  const writePersisted = (data) => {
+    if (!storage) return;
+    try {
+      const prev = readPersisted() || {};
+      const next = { ...prev, ...data };
+      storage.setItem(STORAGE_KEY(), JSON.stringify(next));
+      log("storage:write", { key: STORAGE_KEY(), value: next });
+    } catch (_) {}
+  };
+  const readRestoreOnce = () => {
+    if (!storage) return false;
+    try {
+      const raw = storage.getItem(RESTORE_ONCE_KEY());
+      storage.removeItem(RESTORE_ONCE_KEY());
+      return raw === "1";
+    } catch (_) { return false; }
+  };
+
   const state = {
     minimized: header.classList.contains("minimized"),
     pointerId: null,
@@ -54,27 +159,42 @@ document.addEventListener("DOMContentLoaded", () => {
     },
     transitionHandler: null,
   };
+  log("init:state", {
+    minimizedClass: header.classList.contains("minimized"),
+    style: { left: header.style.left, top: header.style.top, right: header.style.right, bottom: header.style.bottom },
+    rect: rectInfo(header.getBoundingClientRect())
+  });
 
-  dispatchHeaderState(state.minimized, { phase: "init" });
-
-  const MIN_MARGIN = 8;
+  // Restore persisted or respect DOM state on load (per path, per session)
+  const persisted = readPersisted();
+  const restoreFromStorage = !!(persisted && persisted.minimized);
+  const domIsMinimized = header.classList.contains("minimized");
+  if (restoreFromStorage || domIsMinimized) {
+    header.classList.add("minimized");
+    // Use minimized size for clamping/positioning
+    const size = measureRect((clone) => { clone.classList.add("minimized"); });
+    const fallbackLeft = Math.max(MIN_MARGIN, window.innerWidth - size.width - MIN_MARGIN);
+    const fallbackTop = Math.max(MIN_MARGIN, window.innerHeight - size.height - MIN_MARGIN);
+    const left = restoreFromStorage && Number.isFinite(persisted.left) ? persisted.left : fallbackLeft;
+    const top = restoreFromStorage && Number.isFinite(persisted.top) ? persisted.top : fallbackTop;
+    const clamped = clampPosition(left, top, size);
+    state.lastLeft = clamped.left;
+    state.lastTop = clamped.top;
+    state.hasCustomPosition = restoreFromStorage;
+    state.minimized = true;
+    // Apply immediately and once after layout settles
+    applyPosition(clamped.left, clamped.top);
+    requestAnimationFrame(() => applyPosition(clamped.left, clamped.top));
+    log("init:restore", { restoreFromStorage, domIsMinimized, measured: { width: size.width, height: size.height }, fallback: { left: fallbackLeft, top: fallbackTop }, chosen: { left, top }, clamped });
+  } else {
+    // Leave DOM/styles as rendered (expanded)
+    state.minimized = false;
+    log("init:expanded", {});
+  }
 
-  const clampPosition = (left, top) => {
-    const rect = header.getBoundingClientRect();
-    const maxLeft = Math.max(0, window.innerWidth - rect.width);
-    const maxTop = Math.max(0, window.innerHeight - rect.height);
-    return {
-      left: Math.min(Math.max(0, left), maxLeft),
-      top: Math.min(Math.max(0, top), maxTop),
-    };
-  };
+  dispatchHeaderState(state.minimized, { phase: "init" });
 
-  const applyPosition = (left, top) => {
-    header.style.left = `${left}px`;
-    header.style.top = `${top}px`;
-    header.style.right = "auto";
-    header.style.bottom = "auto";
-  };
+  // MIN_MARGIN is already declared above
 
   const rememberOriginalPosition = () => {
     state.originalPosition = {
@@ -85,33 +205,7 @@ document.addEventListener("DOMContentLoaded", () => {
     };
   };
 
-  const measureRect = (configureClone) => {
-    const clone = header.cloneNode(true);
-    clone.querySelectorAll("[id]").forEach((node) => node.removeAttribute("id"));
-    Object.assign(clone.style, {
-      transition: "none",
-      transform: "none",
-      position: "fixed",
-      visibility: "hidden",
-      pointerEvents: "none",
-      margin: "0",
-      left: "0",
-      top: "0",
-      right: "auto",
-      bottom: "auto",
-      width: "auto",
-      height: "auto",
-    });
-    document.body.appendChild(clone);
-    if (typeof configureClone === "function") {
-      configureClone(clone);
-    }
-    clone.style.right = "auto";
-    clone.style.bottom = "auto";
-    const rect = clone.getBoundingClientRect();
-    clone.remove();
-    return rect;
-  };
+  // measureRect declared above for early use
 
   const stopTransition = () => {
     if (state.transitionHandler) {
@@ -124,6 +218,7 @@ document.addEventListener("DOMContentLoaded", () => {
     header.style.transformOrigin = "";
     header.style.opacity = "";
     header.style.willChange = "";
+    log("transition:stop", {});
   };
 
   const minimize = () => {
@@ -132,6 +227,7 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     rememberOriginalPosition();
+    log("minimize:start", { rect: rectInfo(header.getBoundingClientRect()), original: { ...state.originalPosition } });
 
     const firstRect = header.getBoundingClientRect();
     const minimizedSize = measureRect((clone) => {
@@ -143,13 +239,17 @@ document.addEventListener("DOMContentLoaded", () => {
     const targetLeft = state.hasCustomPosition ? state.lastLeft : defaultLeft;
     const targetTop = state.hasCustomPosition ? state.lastTop : defaultTop;
 
-    state.lastLeft = targetLeft;
-    state.lastTop = targetTop;
+    // Clamp final position using minimized size so it anchors bottom-right correctly
+    const clamped = clampPosition(targetLeft, targetTop, minimizedSize);
+    state.lastLeft = clamped.left;
+    state.lastTop = clamped.top;
+    log("minimize:computed", { minimizedSize, default: { left: defaultLeft, top: defaultTop }, target: { left: targetLeft, top: targetTop }, clamped });
 
     stopTransition();
 
     header.classList.add("minimized");
-    applyPosition(targetLeft, targetTop);
+    applyPosition(clamped.left, clamped.top);
+    writePersisted({ minimized: true, left: clamped.left, top: clamped.top });
 
     dispatchHeaderState(true, { phase: "start" });
 
@@ -169,6 +269,19 @@ document.addEventListener("DOMContentLoaded", () => {
     header.classList.add("transitioning");
     header.style.transition = "transform 520ms cubic-bezier(0.22, 1, 0.36, 1)";
     header.style.transform = "";
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        log("minimize:failsafe", {});
+        stopTransition();
+      }
+    }, 900);
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        stopTransition();
+      }
+    }, 900);
 
     state.transitionHandler = (event) => {
       if (event.propertyName !== "transform") {
@@ -178,18 +291,21 @@ document.addEventListener("DOMContentLoaded", () => {
       state.transitionHandler = null;
       stopTransition();
       state.minimized = true;
+      writePersisted({ minimized: true, left: state.lastLeft, top: state.lastTop });
       dispatchHeaderState(true, { phase: "settled" });
+      log("minimize:done", { lastLeft: state.lastLeft, lastTop: state.lastTop });
     };
 
     header.addEventListener("transitionend", state.transitionHandler);
   };
 
   const restore = () => {
-    if (!state.minimized || header.classList.contains("transitioning")) {
+    if (!header.classList.contains("minimized") || header.classList.contains("transitioning")) {
       return;
     }
 
     const firstRect = header.getBoundingClientRect();
+    log("restore:start", { rect: rectInfo(firstRect), original: { ...state.originalPosition } });
 
     stopTransition();
 
@@ -218,6 +334,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
     header.style.transition = "transform 560ms cubic-bezier(0.18, 0.85, 0.4, 1)";
     header.style.transform = "";
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        log("restore:failsafe", {});
+        stopTransition();
+      }
+    }, 900);
+    // Failsafe: clear transitioning if the event never fires
+    setTimeout(() => {
+      if (header.classList.contains("transitioning")) {
+        stopTransition();
+      }
+    }, 900);
 
     state.transitionHandler = (event) => {
       if (event.propertyName !== "transform") {
@@ -230,27 +359,36 @@ document.addEventListener("DOMContentLoaded", () => {
       state.hasCustomPosition = false;
       state.lastLeft = parseFloat(header.style.left) || 0;
       state.lastTop = parseFloat(header.style.top) || 0;
+      writePersisted({ minimized: false, left: state.lastLeft, top: state.lastTop });
       dispatchHeaderState(false, { phase: "settled" });
+      log("restore:done", { left: state.lastLeft, top: state.lastTop });
     };
 
     header.addEventListener("transitionend", state.transitionHandler);
   };
 
-  minimizeButton.addEventListener("click", (event) => {
-    event.preventDefault();
-    minimize();
-  });
+  if (minimizeButton) {
+    minimizeButton.addEventListener("click", (event) => {
+      log("click:minimize", {});
+      event.preventDefault();
+      minimize();
+    });
+  }
 
-  homeLink.addEventListener("click", (event) => {
-    if (!state.minimized) {
-      return;
-    }
-    event.preventDefault();
-    restore();
-  });
+  if (homeLink) {
+    homeLink.addEventListener("click", (event) => {
+      const minimizedNow = header.classList.contains("minimized");
+      log("click:home", { minimizedNow });
+      if (!minimizedNow) {
+        return;
+      }
+      event.preventDefault();
+      restore();
+    });
+  }
 
   const onPointerDown = (event) => {
-    if (!state.minimized || header.classList.contains("transitioning")) {
+    if (!header.classList.contains("minimized") || header.classList.contains("transitioning")) {
       return;
     }
     state.pointerId = event.pointerId;
@@ -263,11 +401,13 @@ document.addEventListener("DOMContentLoaded", () => {
       } catch (error) {}
     }
     dragHandle.classList.add("dragging");
+    log("drag:start", { pointerId: state.pointerId, rect: rectInfo(rect), offsetX: Math.round(state.offsetX), offsetY: Math.round(state.offsetY) });
     event.preventDefault();
   };
 
+  let __lastPointerLog = 0;
   const onPointerMove = (event) => {
-    if (!state.minimized || state.pointerId !== event.pointerId) {
+    if (!header.classList.contains("minimized") || state.pointerId !== event.pointerId) {
       return;
     }
     const left = event.clientX - state.offsetX;
@@ -277,6 +417,12 @@ document.addEventListener("DOMContentLoaded", () => {
     state.lastTop = clamped.top;
     state.hasCustomPosition = true;
     applyPosition(clamped.left, clamped.top);
+    writePersisted({ minimized: true, left: clamped.left, top: clamped.top });
+    const t = Date.now();
+    if (t - __lastPointerLog > 150) {
+      __lastPointerLog = t;
+      log("drag:move", { left, top, clamped });
+    }
   };
 
   const onPointerEnd = (event) => {
@@ -289,6 +435,7 @@ document.addEventListener("DOMContentLoaded", () => {
       } catch (error) {}
     }
     dragHandle.classList.remove("dragging");
+    log("drag:end", { pointerId: event.pointerId, lastLeft: state.lastLeft, lastTop: state.lastTop });
     state.pointerId = null;
   };
 
@@ -296,14 +443,30 @@ document.addEventListener("DOMContentLoaded", () => {
   dragHandle.addEventListener("pointermove", onPointerMove);
   dragHandle.addEventListener("pointerup", onPointerEnd);
   dragHandle.addEventListener("pointercancel", onPointerEnd);
+  // Fallback: allow dragging by grabbing empty areas of the minimized header
+  const isInteractive = (el) => !!el.closest("a, button, [role='button'], input, select, textarea");
+  header.addEventListener("pointerdown", (event) => {
+    if (!header.classList.contains("minimized") || isInteractive(event.target) || event.target.closest(".header-drag-handle")) {
+      // Interactive controls and the dedicated drag handle use their own handlers
+      return;
+    }
+    log("drag:fallback:pointerdown", { target: event.target && (event.target.id || event.target.className || event.target.nodeName) });
+    onPointerDown(event);
+  });
+  header.addEventListener("pointermove", onPointerMove);
+  header.addEventListener("pointerup", onPointerEnd);
+  header.addEventListener("pointercancel", onPointerEnd);
 
   window.addEventListener("resize", () => {
-    if (!state.minimized || header.classList.contains("transitioning")) {
+    if (!header.classList.contains("minimized") || header.classList.contains("transitioning")) {
       return;
     }
+    const before = { left: state.lastLeft, top: state.lastTop };
     const { left, top } = clampPosition(state.lastLeft, state.lastTop);
     state.lastLeft = left;
     state.lastTop = top;
     applyPosition(left, top);
+    writePersisted({ minimized: state.minimized, left, top });
+    log("resize:clamp", { before, after: { left, top } });
   });
 });

package/server/public/style.css

@@ -821,6 +821,10 @@ body {
   color: var(--light-color);
   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);
@@ -2371,7 +2375,7 @@ body.dark .mode-selector .btn2.selected {
   justify-content: center;
   padding: 5px 10px;
   box-sizing: border-box;
-  width: 100px;
+  width: 70px;
   gap: 5px;
   border-radius: 5px;
 }
@@ -2379,6 +2383,8 @@ body.dark .mode-selector .btn2.selected {
 
 
 @media only screen and (max-width: 768px) {
+  /* Hide QR block on small screens */
+  aside .qr { display: none !important; }
   body {
     display: flex;
     align-items: stretch;
@@ -2451,6 +2457,14 @@ body.dark .mode-selector .btn2.selected {
     overflow: auto;
     flex-wrap: nowrap;
   }
+  /* Keep minimized header horizontal on small screens */
+  header.navheader.minimized,
+  header.navheader.minimized h1 {
+    display: inline-flex;
+    flex-direction: row;
+  }
+  /* Avoid stretching buttons to full width inside minimized pill */
+  header.navheader.minimized h1 .btn2 { width: auto; }
   .mode-selector {
     flex-direction: column;
     padding: 0;
@@ -2535,8 +2549,18 @@ header.navheader.minimized h1 {
   padding: 0;
   height: auto;
   overflow: visible;
-}
-header.navheader.minimized h1 > *:not(.home):not(.header-drag-handle) {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+/* Ensure item order inside minimized pill: home, refresh, dragger */
+header.navheader.minimized h1 .home { order: 0; }
+header.navheader.minimized h1 #refresh-page { order: 1; }
+header.navheader.minimized h1 .header-drag-handle { order: 2; }
+/* Prevent items from stretching */
+header.navheader.minimized h1 > .home,
+header.navheader.minimized h1 > #refresh-page,
+header.navheader.minimized h1 > .header-drag-handle { flex: 0 0 auto; }
+header.navheader.minimized h1 > *:not(.home):not(.header-drag-handle):not(#refresh-page) {
   display: none !important;
 }
 header.navheader .header-drag-handle {

package/server/public/tab-idle-notifier.js

@@ -492,6 +492,9 @@ const ensureTabAccessories = aggregateDebounce(() => {
       message,
       timeout: 60,
       sound: true,
+      // Target this notification to this browser/device only
+      audience: 'device',
+      device_id: (typeof window !== 'undefined' && typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : undefined,
     };
     if (image) {
       payload.image = image;