@tobq/boardclip 2.1.111 → 2.1.112

package/lib/window-placement.js

@@ -0,0 +1,80 @@
+'use strict';
+
+// Where a clip window (editor, viewer, unify, conflict) opens, as pure maths so
+// it is unit-tested (test/window-placement.test.js); main.js supplies the saved
+// bounds, the display's work area, the clip windows already showing and the
+// popup's bounds when the popup stays up. Owner 2026-10-13: "spawns under BC
+// itself" / "multi spawning they dont stack, it jsut all sits on top".
+// - A clip window already open at the spot pushes the new one a cascade step on,
+//   wrapping inside the work area, like the OS cascades documents.
+// - With the popup up (keepPopup opens) the window goes beside the popup, never
+//   under it: the popup is always on top. It fans out away from the popup.
+
+const CASCADE_STEP = 28;
+const POPUP_GAP = 8;
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+}
+function clampInto(rect, area) {
+  return {
+    ...rect,
+    x: Math.max(area.x, Math.min(rect.x, area.x + area.width - rect.width)),
+    y: Math.max(area.y, Math.min(rect.y, area.y + area.height - rect.height)),
+  };
+}
+// Pure placement (unit-tested): base = the saved bounds (x/y may be missing),
+// area = the work area to stay in, taken = top-left corners of the clip windows
+// already showing, avoid = the open popup's bounds when it stays up.
+function placeClipWindowBounds(base, { area, taken = [], avoid = null } = {}) {
+  const width = Math.min(base.width, area.width);
+  const height = Math.min(base.height, area.height);
+  let start = Number.isFinite(base.x) && Number.isFinite(base.y)
+    ? clampInto({ x: base.x, y: base.y, width, height }, area)
+    : { x: Math.round(area.x + (area.width - width) / 2), y: Math.round(area.y + (area.height - height) / 2), width, height };
+  // Cascade direction: down and right, unless the window sits left of / above
+  // the popup, where it fans out away from the popup instead.
+  let dx = 1;
+  let dy = 1;
+  if (avoid && rectsOverlap(start, avoid)) {
+    const midY = avoid.y + Math.round((avoid.height - height) / 2);
+    const midX = avoid.x + Math.round((avoid.width - width) / 2);
+    const sides = [
+      { x: avoid.x + avoid.width + POPUP_GAP, y: midY, dx: 1, dy: 1 },
+      { x: avoid.x - POPUP_GAP - width, y: midY, dx: -1, dy: 1 },
+      { x: midX, y: avoid.y + avoid.height + POPUP_GAP, dx: 1, dy: 1 },
+      { x: midX, y: avoid.y - POPUP_GAP - height, dx: 1, dy: -1 },
+    ].map((s) => ({ ...s, rect: clampInto({ x: s.x, y: s.y, width, height }, area) }));
+    const overlapArea = (r) => Math.max(0, Math.min(r.x + width, avoid.x + avoid.width) - Math.max(r.x, avoid.x))
+      * Math.max(0, Math.min(r.y + height, avoid.y + avoid.height) - Math.max(r.y, avoid.y));
+    const best = sides.find((s) => !rectsOverlap(s.rect, avoid))
+      || sides.slice().sort((a, b) => overlapArea(a.rect) - overlapArea(b.rect))[0];
+    start = best.rect;
+    dx = best.dx;
+    dy = best.dy;
+  }
+  // The cascade walks diagonals (one step down and along per window); a
+  // diagonal that leaves the work area starts the next one a step further
+  // along at the area's top (or bottom, when fanning upward), like the OS
+  // cascade. The first spot no showing clip window holds wins.
+  const near = (p, q) => Math.abs(p.x - q.x) < 8 && Math.abs(p.y - q.y) < 8;
+  const fits = (p) => p.x >= area.x && p.y >= area.y && p.x + width <= area.x + area.width && p.y + height <= area.y + area.height;
+  // A wrapped spot never lands under the popup (unless no side had room for
+  // the window, when the least-covered spot is the best there is).
+  const besideFits = !(avoid && rectsOverlap(start, avoid));
+  const underPopup = (r) => !!avoid && besideFits && rectsOverlap(r, avoid);
+  const spanX = Math.max(1, area.width - width + 1);
+  const wrapX = (x) => area.x + ((((x - area.x) % spanX) + spanX) % spanX);
+  for (let column = 0; column < 64; column += 1) {
+    const x0 = wrapX(start.x + dx * column * CASCADE_STEP);
+    const y0 = column === 0 ? start.y : dy > 0 ? area.y : area.y + area.height - height;
+    for (let step = 0; step < 64; step += 1) {
+      const p = { x: x0 + dx * step * CASCADE_STEP, y: y0 + dy * step * CASCADE_STEP };
+      if (!fits(p)) break;
+      if (underPopup({ ...p, width, height })) continue;
+      if (!taken.some((t) => near(t, p))) return { x: p.x, y: p.y, width, height };
+    }
+  }
+  return { x: start.x, y: start.y, width, height };
+}
+
+module.exports = { placeClipWindowBounds, rectsOverlap, clampInto, CASCADE_STEP, POPUP_GAP };

package/main.js

@@ -14,6 +14,7 @@ const macPaste = require('./lib/macos-paste');
 const winClipboard = require('./lib/windows-clipboard');
 const { createQuickPaster } = require('./lib/quick-paste');
 const { createClipboardFollower } = require('./lib/clipboard-follow');
+const { placeClipWindowBounds } = require('./lib/window-placement');
 const { dragFileNames } = require('./lib/drag-files');
 const { createHistoryFeed } = require('./lib/history-feed');
 // Shared UI core (pure UMD, no DOM at load): main reuses its chord tests.
@@ -5359,6 +5360,7 @@ function windowBoundsFromSettings(key, defaults) {
   return out;
 }
 const saveBoundsTimers = new Map();
+const placedBounds = new WeakMap(); // clip window -> the bounds it was opened at
 function scheduleWindowBoundsSave(childWin, key) {
   if (!childWin || childWin.isDestroyed()) return;
   const prior = saveBoundsTimers.get(key);
@@ -5368,6 +5370,14 @@ function scheduleWindowBoundsSave(childWin, key) {
     if (!childWin || childWin.isDestroyed()) return;
     const maximized = childWin.isMaximized() || childWin.isFullScreen();
     const { x, y, width, height } = maximized ? childWin.getNormalBounds() : childWin.getBounds();
+    // A window still where it was placed (a cascade step, beside the popup)
+    // never becomes the saved spot: only a move or resize by the user does, so
+    // untouched windows do not drift the next one's start.
+    const placed = placedBounds.get(childWin);
+    const savedNow = settings[key] || {};
+    if (placed && placed.x === x && placed.y === y && placed.width === width && placed.height === height
+      && maximized === (savedNow.maximized === true)) return;
+    placedBounds.delete(childWin);
     settings[key] = { x, y, width: Math.max(360, width), height: Math.max(240, height), maximized };
     saveSettingsFile({ localOnly: true });
   }, 300);
@@ -5389,15 +5399,45 @@ function restoreWindowMaximized(childWin, key, options) {
   if (!saved || saved.maximized !== true || (options && options.keepPopup)) return;
   try { childWin.maximize(); } catch {}
 }
-function editorBoundsFromSettings() { return windowBoundsFromSettings('editor_bounds', { width: 560, height: 520 }); }
+// Every clip window (editor, viewer, unify, conflict) opens at its kind's saved
+// bounds, then cascades past the clip windows already showing and, when the
+// popup stays up (keepPopup), goes beside the popup instead of under it
+// (lib/window-placement.js). The work area is the popup's display, else the
+// saved spot's, else the cursor's.
+const clipWindows = new Set();
+function trackClipWindow(childWin) {
+  clipWindows.add(childWin);
+  try { placedBounds.set(childWin, childWin.getBounds()); } catch {}
+  childWin.once('closed', () => clipWindows.delete(childWin));
+}
+function clipWindowBoundsFromSettings(key, defaults, options) {
+  const base = windowBoundsFromSettings(key, defaults);
+  const keepPopup = !!(options && options.keepPopup) && isPopupOpen();
+  const avoid = keepPopup && win && !win.isDestroyed() ? win.getBounds() : null;
+  const anchor = avoid
+    ? { x: avoid.x + Math.round(avoid.width / 2), y: avoid.y + Math.round(avoid.height / 2) }
+    : Number.isFinite(base.x) ? { x: base.x + Math.round(base.width / 2), y: base.y + Math.round(base.height / 2) }
+      : screen.getCursorScreenPoint();
+  const area = screen.getDisplayNearestPoint(anchor).workArea;
+  const taken = [];
+  for (const other of clipWindows) {
+    try {
+      if (other.isDestroyed() || !other.isVisible() || other.isMinimized() || other.isMaximized()) continue;
+      const b = other.getBounds();
+      taken.push({ x: b.x, y: b.y });
+    } catch {}
+  }
+  return placeClipWindowBounds(base, { area, taken, avoid });
+}
+function editorBoundsFromSettings(options) { return clipWindowBoundsFromSettings('editor_bounds', { width: 560, height: 520 }, options); }
 // The merge windows (unify, conflict) keep their own size: two or three panes
 // with a head each need width a plain editor does not (and a widened unify
 // must not leave the next editor wide).
-function mergeBoundsFromSettings() { return windowBoundsFromSettings('merge_bounds', { width: 780, height: 560 }); }
+function mergeBoundsFromSettings(options) { return clipWindowBoundsFromSettings('merge_bounds', { width: 780, height: 560 }, options); }
 
 function createEditorWindow(session, presentOptions = {}) {
   const editorWin = new BrowserWindow({
-    ...editorBoundsFromSettings(),
+    ...editorBoundsFromSettings(presentOptions),
     minWidth: 360,
     minHeight: 240,
     resizable: true,
@@ -5414,6 +5454,7 @@ function createEditorWindow(session, presentOptions = {}) {
     },
   });
   noteSecondarySurface(editorWin);
+  trackClipWindow(editorWin);
   session.win = editorWin;
   editorWin.loadFile(path.join(SCRIPT_DIR, 'editor.html'));
   // Show + focus the editor, then dismiss the popup so it doesn't linger behind
@@ -5477,7 +5518,7 @@ function sourceGroupsForNewNote(options) {
 // Bring an editor/viewer window on screen. Default = a deliberate hand-off: the
 // window takes focus and the popup is dismissed (a popup lingering behind the
 // editor felt "sticky" - you had to click back to it + Escape). With
-// options.keepPopup (mouse-driven opens: middle-click, alt+click, the row menu)
+// options.keepPopup (the "open several" gestures: middle-click, right-click on the open button, alt+click)
 // the window is shown WITHOUT activating and the popup stays where it is, so
 // several results can be opened one after another; the popup still hides on
 // its own blur the moment the user clicks into one of the windows.
@@ -5648,7 +5689,7 @@ function openImageViewer(id, options = {}) {
     return;
   }
   const viewerWin = new BrowserWindow({
-    ...windowBoundsFromSettings('viewer_bounds', { width: 720, height: 560 }),
+    ...clipWindowBoundsFromSettings('viewer_bounds', { width: 720, height: 560 }, options),
     minWidth: 360,
     minHeight: 240,
     resizable: true,
@@ -5665,6 +5706,7 @@ function openImageViewer(id, options = {}) {
     },
   });
   noteSecondarySurface(viewerWin);
+  trackClipWindow(viewerWin);
   viewerWindows.set(key, viewerWin);
   viewerWin.loadFile(path.join(SCRIPT_DIR, 'viewer.html'));
   viewerWin.once('ready-to-show', () => {
@@ -5821,6 +5863,7 @@ function openConflictWindow(conflictId) {
     },
   });
   noteSecondarySurface(conflictWin);
+  trackClipWindow(conflictWin);
   conflictWindows.set(id, conflictWin);
   const sessionId = `conflict:${id}`;
   conflictWin.loadFile(path.join(SCRIPT_DIR, 'editor.html'));
@@ -5938,6 +5981,7 @@ function openUnifyWindow(session) {
     },
   });
   noteSecondarySurface(unifyWin);
+  trackClipWindow(unifyWin);
   session.win = unifyWin;
   unifyWin.loadFile(path.join(SCRIPT_DIR, 'editor.html'));
   unifyWin.once('ready-to-show', () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tobq/boardclip",
   "productName": "BoardClip",
-  "version": "2.1.111",
+  "version": "2.1.112",
   "description": "Cross-platform clipboard history tray app with numpad quick-paste and native cloud sync",
   "keywords": [
     "clipboard",

package/site/shared/clipboard-popup.css

@@ -316,7 +316,13 @@
               display: inline-flex; align-items: center; gap: var(--sp-1); vertical-align: top; font-family: inherit; }
 .filter-tag.icon-filter { min-width: var(--ctl-sm); height: var(--ctl-sm); justify-content: center; padding: 0 var(--sp-2); }
 .filter-tag:hover { background: var(--hover); color: var(--text); }
-.filter-tag.group-tag, .filter-tag.group-tag:hover { color: var(--accent-text); }
+/* A group name reads in the accent text shade wherever it shows: its chip, a
+   clip's meta line and window bar, every group picker and chip dropdown row,
+   Settings > Groups (owner 2026-10-09 on the chips: "too hard to see before
+   selected"; 2026-10-13: "blue tags should be consistent everywhere"). Hover
+   keeps the colour (the wash says hover); a picked chip's fill and an excluded
+   name's strike override it. */
+.filter-tag.group-tag, .filter-tag.group-tag:hover, .meta-tags > .meta-tag, .bc-menu-item.group-name > .bc-menu-label, .group-row .si-name { color: var(--accent-text); }
 .filter-tag.active, .filter-tag.active:hover { background: var(--accent); color: var(--active-fg); --icon-fill: 1; }
 .filter-tag.active:hover { background: var(--accent-hover); }
 .filter-tag.excluded { color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1px; opacity: .6; }
@@ -414,7 +420,7 @@
 /* A group chip's dropdown holds menu rows (renderTagTreeMenuNode, depth > 0):
    an excluded group is struck through like its chip, a greyed one dims in the
    chips' two tiers, and a parent row stays lit while its submenu is out. */
-.bc-menu-item.excluded > .bc-menu-label { text-decoration: line-through; }
+.bc-menu-item.excluded > .bc-menu-label { color: var(--text-dim); text-decoration: line-through; }
 .bc-menu-item.is-disabled { opacity: .4; cursor: default; }
 .bc-menu-item.is-disabled.dis-structural { opacity: .25; }
 .bc-menu-item.is-disabled:hover { background: none; }
@@ -494,7 +500,8 @@
    at the last name and the + follows it instead of the box's far edge. */
 .item:hover .meta-tag.meta-cut, .item:focus-within .meta-tag.meta-cut, .item.actions-held .meta-tag.meta-cut { display: none; }
 .meta-tag { display: block; flex: 0 1 auto; min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
-.meta-np:hover, .meta-tag:hover, .meta-ghost:hover { color: var(--text); background: var(--hover); }
+.meta-np:hover, .meta-ghost:hover { color: var(--text); }
+.meta-np:hover, .meta-tag:hover, .meta-ghost:hover { background: var(--hover); }
 .meta-ghost { display: inline-flex; align-items: center; justify-content: center; width: var(--meta-h); padding: 0; }
 .meta-ghost .mi { font-size: var(--icon-sm); }
 .meta > .meta-reveal, .bc-tag-strip > .meta-reveal { margin-left: calc(-1 * var(--sp-3)); --reveal-gap: var(--sp-3); }

package/site/shared/clipboard-ui-core.js

@@ -220,7 +220,7 @@
         check: state === 'include',
         label: node.label || group,
         hint: disabled ? '' : String(count),
-        cls: `group-filter-row${state === 'exclude' ? ' excluded' : ''}${disabled ? ` is-disabled${v.kind === 'structural' ? ' dis-structural' : ''}` : ''}`,
+        cls: `group-filter-row group-name${state === 'exclude' ? ' excluded' : ''}${disabled ? ` is-disabled${v.kind === 'structural' ? ' dis-structural' : ''}` : ''}`,
         attrs: { 'data-group': group, title, 'aria-disabled': disabled ? 'true' : null },
       };
       return hasChildren
@@ -1166,7 +1166,7 @@
       const group = normalizeTagName(node && node.name);
       if (!group) return '';
       const [icon, checked] = MEMBERSHIP_GLYPH[state(group)] || MEMBERSHIP_GLYPH.none;
-      const row = { icon, check: true, label: node.label || group, role: 'menuitemcheckbox', attrs: { 'data-action': action, 'data-group': group, 'aria-checked': checked, title: group } };
+      const row = { icon, check: true, label: node.label || group, cls: 'group-name', role: 'menuitemcheckbox', attrs: { 'data-action': action, 'data-group': group, 'aria-checked': checked, title: group } };
       return node.children && node.children.length
         ? submenuNodeHtml(row, renderGroupChecklist(node.children, state, action))
         : menuRowHtml(row);
@@ -4986,18 +4986,19 @@
         refresh();
         return true;
       }
-      // The row's primary open button is the "normal" open: a hand-off (the
-      // popup closes, like before). Only the detached "..."/right-click MENU's
-      // Open in editor / Open image keeps the popup, alongside middle/alt-click.
-      const fromMenu = !!t.closest('.bc-menu-item');
+      // A plain click on any Open (the row's own open button or the clip menu's
+      // Open in editor / Open image) is a hand-off: the window takes the focus
+      // and the popup closes. Only the "open several" gestures keep the popup:
+      // middle-click, right-click on the open button, Alt+click (owner
+      // 2026-10-13: "when i click on note, bc doesnt close... inconsisntent").
       const openImg = t.closest('[data-action="open-img"]');
-      if (openImg) { event.stopPropagation(); await a.openImage(a.itemById(openImg.dataset.id), fromMenu ? KEEP_POPUP : undefined); return true; }
+      if (openImg) { event.stopPropagation(); await a.openImage(a.itemById(openImg.dataset.id)); return true; }
       const openImgExt = t.closest('[data-action="open-img-ext"]');
       if (openImgExt) { event.stopPropagation(); if (a.openImageExternal) await a.openImageExternal(a.itemById(openImgExt.dataset.id)); return true; }
       const saveImg = t.closest('[data-action="save-img"]');
       if (saveImg) { event.stopPropagation(); toast(await a.saveImage(a.itemById(saveImg.dataset.id))); return true; }
       const edit = t.closest('[data-action="edit"]');
-      if (edit) { event.stopPropagation(); await a.editClip(edit.dataset.id, edit.closest('.item'), fromMenu ? KEEP_POPUP : undefined); return true; }
+      if (edit) { event.stopPropagation(); await a.editClip(edit.dataset.id, edit.closest('.item')); return true; }
       const rename = t.closest('[data-action="rename"]');
       if (rename) { event.stopPropagation(); await renameClip(rename.dataset.id); return true; }
       const revert = t.closest('[data-action="revert"]');