0.3.34: greyer chrome bar, tighter bookmarks + drag-reorder, legible Tor/Theseus chips in light mode

Chrome strip: light-mode --bg/--surface/--surface2/--active retuned to a
soft neutral grey. Flat #ffffff tabs disappeared into light Windows
title bars and the top strip read as one bright rectangle; now the
tab row sits on #e6e8ec, inactive tabs are #f2f4f7, active tab is
white so the current one still pops.

Bookmarks: chips down to 130px max-width, 11px text, 12px favicon,
tighter padding, 22px row (was 26). Fits ~40% more saved pages in
the same width. Chips are now draggable — dragstart/dragover/drop
mirror the tab strip's reorder pattern, dropping before/after by
which half of the target chip the pointer is on. IPC bookmark-move
splices the array; a missing entry or self-drop is a no-op.

Tor + Theseus (⛓ logo) chips in light mode: white-on-#253A49 was
below legible at 12-13px on real light Windows themes. Both now use
#eef1f5 with #253A49 ink and a subtle border — same footprint, dark
letters read cleanly. .tor.connecting/.on keep amber/purple hue but
in light-appropriate fills with dark text. .upchip picks up the
same treatment for consistency.

chrome.html

@@ -13,7 +13,12 @@
   }
   @media (prefers-color-scheme: light) {
     :root {
-      --bg:#e9ecf1; --surface:#ffffff; --surface2:#f1f3f7; --active:#dbe1ec;
+      /* Chrome strip is a soft neutral grey — flat white was too bright next
+         to the browsed page, and pure #ffffff tabs disappeared into the
+         window title bar on light Windows themes. --bg tints the whole
+         top strip; --surface (inactive tab) sits a hair above it; --active
+         (foreground tab) pops a bit brighter so the current tab reads. */
+      --bg:#e6e8ec; --surface:#f2f4f7; --surface2:#eaecf0; --active:#ffffff;
       --ink:#1a1f28; --mut:#3c4453; --dim:#697280; --faint:#98a1b0;
       --line:rgba(0,0,0,.18); --line2:rgba(0,0,0,.11); --hover:rgba(0,0,0,.06);
       /* Darker acid for light backgrounds — same hue family, ~5.5:1
@@ -293,8 +298,10 @@
           padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--acid) 20%, transparent); border-radius: 8px; cursor: pointer; background: rgb(from var(--acid) r g b / .08); font-size: 13px; }
   .logo:hover { background: rgb(from var(--acid) r g b / .16); }
   .logo .gear { font-size: 12px; opacity: .8; }
-  /* favorites bar — new-tab page only, single compact row */
+  /* favorites bar — new-tab page only, single compact row. Chips are
-  .bookmarks { display: flex; align-items: center; gap: 4px; padding: 3px 10px 5px; height: 26px; overflow: hidden; }
+     tight so many fit in the row; the whole strip is 22px tall (down
+     from 26) so the chrome view gains a bit of vertical space. */
+  .bookmarks { display: flex; align-items: center; gap: 3px; padding: 2px 10px 4px; height: 22px; overflow: hidden; }
   /* Ctrl+F find-in-page bar. Sits below the address bar (above tabs body),
      ~32px tall so it's part of the chrome view height like .tordisc / .bcnrbar.
      syncHeight in the tabs handler picks it up automatically. */
@@ -307,11 +314,14 @@
   .findbar .findbtn { border: 1px solid var(--line); background: var(--surface2); color: var(--ink); border-radius: 6px;
                       padding: 3px 8px; font-size: 13px; cursor: pointer; }
   .findbar .findbtn:hover { background: var(--surface); border-color: color-mix(in srgb, var(--acid) 35%, transparent); }
-  .bm { display: flex; align-items: center; gap: 6px; max-width: 180px; padding: 3px 9px; border-radius: 6px;
+  .bm { display: flex; align-items: center; gap: 5px; max-width: 130px; padding: 2px 7px; border-radius: 5px;
-        background: var(--surface2); border: 1px solid var(--hover); color: var(--mut); font-size: 12px; cursor: pointer; white-space: nowrap; }
+        background: var(--surface2); border: 1px solid var(--hover); color: var(--mut); font-size: 11px; cursor: grab; white-space: nowrap; }
   .bm:hover { background: var(--active); color: var(--ink); }
-  .bm .bmfav { width: 14px; height: 14px; flex: none; object-fit: contain; border-radius: 2px; }
+  .bm.dragging { opacity: .45; cursor: grabbing; }
-  .bm .bt { overflow: hidden; text-overflow: ellipsis; }
+  .bm.dropbefore { box-shadow: -2px 0 0 var(--acid); }
+  .bm.dropafter  { box-shadow:  2px 0 0 var(--acid); }
+  .bm .bmfav { width: 12px; height: 12px; flex: none; object-fit: contain; border-radius: 2px; }
+  .bm .bt { overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
   /* In-chrome prompt modal (window.prompt is disabled in Electron BrowserViews,
      so bookmark rename etc. use this instead). */
   .promptmask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 10000;
@@ -344,15 +354,21 @@
   @media (prefers-color-scheme: light) {
     .ctxmenu { background: #ffffff; border-color: rgba(0,0,0,.15); }
     .ctxmenu .mi:hover { background: rgba(0,0,0,.05); }
-    /* BCH dark #253A49 as a light-mode accent so the toolbar isn't
+    /* The old light-mode chips used the BCH dark #253A49 as their fill.
-       all-white-on-white. .logo (⛓ Theseus) becomes a dark chip; the
+       At small font sizes on light Windows the white-on-dark-navy label
-       download / update pill picks it up so both stand out. */
+       fell below legible, so both .logo (⛓ Theseus) and .tor switch to
-    .logo { background: #253A49; color: #F8FDFF; border-color: #253A49; }
+       a light-grey chip with dark ink — same footprint, readable text.
-    .logo:hover { background: #1a2c39; }
+       Update pill picks up the same treatment. */
-    .logo .gear { color: #F8FDFF; opacity: .85; }
+    .logo { background: #eef1f5; color: #253A49; border-color: rgba(0,0,0,.14); }
-    .upchip { background: #253A49; color: #F8FDFF; border-color: #253A49; }
+    .logo:hover { background: #e2e6ec; }
-    .upchip .upcore:hover { background: #1a2c39; }
+    .logo .gear { color: #253A49; opacity: .85; }
-    .upchip .updismiss { border-left-color: rgba(255,255,255,.20); color: #F8FDFF; }
+    .tor { background: #eef1f5; color: #253A49; border-color: rgba(0,0,0,.14); }
+    .tor:hover { background: #e2e6ec; }
+    .tor.connecting { background: #fbe9b5; color: #5a3f00; border-color: rgba(0,0,0,.14); }
+    .tor.on { background: #e6d9f5; color: #3f1f6b; border-color: rgba(0,0,0,.14); }
+    .upchip { background: #eef1f5; color: #253A49; border-color: rgba(0,0,0,.14); }
+    .upchip .upcore:hover { background: #e2e6ec; }
+    .upchip .updismiss { border-left-color: rgba(0,0,0,.14); color: #253A49; }
   }
   .tordisc { font-size: 11.5px; color: #d9c7f2; background: #2a1c40; border-top: 1px solid #6b3fa055; padding: 5px 14px; }
   .tordisc a { color: var(--acid); }
@@ -793,7 +809,7 @@
           const fav = b.favicon
             ? `<img class="bmfav" src="${String(b.favicon).replace(/"/g,"&quot;")}" onerror="this.remove()">`
             : `<span class="bmfav" style="display:inline-block"></span>`;
-          return `<div class="bm" data-i="${i}" title="${(b.url||"").replace(/"/g,"&quot;")}">${fav}<span class="bt">${(b.title||b.url).replace(/</g,"&lt;")}</span><span class="bx" data-x="${i}">✕</span></div>`;
+          return `<div class="bm" draggable="true" data-i="${i}" data-url="${(b.url||"").replace(/"/g,"&quot;")}" title="${((b.title||b.url)+" — "+(b.url||"")).replace(/"/g,"&quot;")}">${fav}<span class="bt">${(b.title||b.url).replace(/</g,"&lt;")}</span><span class="bx" data-x="${i}">✕</span></div>`;
         }).join("")
       : `<span class="bm-empty">No saved pages yet — click ☆ or right-click here to add one.</span>`;
     box.querySelectorAll(".bm").forEach((el) => el.onclick = (e) => {
@@ -801,6 +817,40 @@
       if (e.target.dataset.x !== undefined) T.removeBookmark(bookmarks[i].url);
       else T.navigate(bookmarks[i].url);
     });
+    // Drag-reorder chips — same shape as the tab strip. Drop side is chosen
+    // by whether the pointer is on the left/right half of the target chip.
+    // dragUrl is the identity we hand to bookmark-move; renderBookmarks
+    // fires again after the reorder, which rebinds these handlers cleanly.
+    let dragUrl = null;
+    box.querySelectorAll(".bm").forEach((row) => {
+      row.addEventListener("dragstart", (e) => {
+        dragUrl = row.dataset.url;
+        try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", dragUrl); } catch {}
+        row.classList.add("dragging");
+      });
+      row.addEventListener("dragend", () => {
+        row.classList.remove("dragging");
+        box.querySelectorAll(".bm").forEach((r) => r.classList.remove("dropbefore", "dropafter"));
+        dragUrl = null;
+      });
+      row.addEventListener("dragover", (e) => {
+        if (!dragUrl || row.dataset.url === dragUrl) return;
+        e.preventDefault(); e.dataTransfer.dropEffect = "move";
+        const r = row.getBoundingClientRect();
+        const before = (e.clientX - r.left) < r.width / 2;
+        row.classList.toggle("dropbefore", before);
+        row.classList.toggle("dropafter", !before);
+      });
+      row.addEventListener("dragleave", () => row.classList.remove("dropbefore", "dropafter"));
+      row.addEventListener("drop", (e) => {
+        e.preventDefault();
+        const targetUrl = row.dataset.url;
+        if (!dragUrl || dragUrl === targetUrl) return;
+        const r = row.getBoundingClientRect();
+        const before = (e.clientX - r.left) < r.width / 2;
+        T.moveBookmark && T.moveBookmark(dragUrl, targetUrl, before ? "before" : "after");
+      });
+    });
     // Backfill: older bookmarks stored before favicon-support have no icon.
     // If we're currently on that URL and have a favicon in hand, patch it in
     // once so the next render draws it.

main.js

@@ -3772,6 +3772,22 @@ ipcMain.handle("bookmark-remove", (_e, url) => {
   saveBookmarks(); emitBookmarks();
   return bookmarks;
 });
+// Reorder: pull `fromUrl` out of the list and reinsert it before or after
+// `targetUrl`. Renderer picks the side by which half of the target chip the
+// pointer is on, same convention the tab strip uses. A missing entry or a
+// self-drop is a no-op, so noisy drag events don't corrupt the list.
+ipcMain.handle("bookmark-move", (_e, fromUrl, targetUrl, place) => {
+  if (typeof fromUrl !== "string" || typeof targetUrl !== "string" || fromUrl === targetUrl) return bookmarks;
+  const from = bookmarks.findIndex((b) => b.url === fromUrl);
+  if (from < 0) return bookmarks;
+  const [moved] = bookmarks.splice(from, 1);
+  let to = bookmarks.findIndex((b) => b.url === targetUrl);
+  if (to < 0) { bookmarks.splice(from, 0, moved); return bookmarks; }
+  if (place === "after") to += 1;
+  bookmarks.splice(to, 0, moved);
+  saveBookmarks(); emitBookmarks();
+  return bookmarks;
+});
 ipcMain.handle("settings-get", () => settings);
 ipcMain.handle("settings-set", (_e, key, val) => {
   if (key in SETTINGS_DEFAULTS) { settings[key] = val; saveSettings(); }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "theseus-navigator",
-  "version": "0.3.33",
+  "version": "0.3.34",
   "description": "Theseus Navigator — a browser that follows the thread. By Silent Mode, a Deviant project.",
   "author": "Silent Mode",
   "main": "main.js",

preload.js

@@ -48,6 +48,7 @@ contextBridge.exposeInMainWorld("theseus", {
   addBookmark: (bm) => ipcRenderer.invoke("bookmark-add", bm),
   updateBookmark: (url, patch) => ipcRenderer.invoke("bookmark-update", url, patch),
   removeBookmark: (url) => ipcRenderer.invoke("bookmark-remove", url),
+  moveBookmark: (fromUrl, targetUrl, place) => ipcRenderer.invoke("bookmark-move", fromUrl, targetUrl, place),
   onBookmarks: (cb) => ipcRenderer.on("bookmarks", (_e, d) => cb(d)),
   onNav: (cb) => ipcRenderer.on("nav", (_e, d) => cb(d)),
   onTor: (cb) => ipcRenderer.on("tor", (_e, d) => cb(d)),