From 9cd88fd87546040fa28bb58b238710cbe3f35dd3 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:07:30 +0800
Subject: [PATCH 01/17] feat: consolidate bookmark management views

---
 apps/web/src/BookmarkManager.tsx | 101 ++++++++++++++++++++++++-------
 1 file changed, 79 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/BookmarkManager.tsx b/apps/web/src/BookmarkManager.tsx
index fcd6f19..fa55a7e 100644
--- a/apps/web/src/BookmarkManager.tsx
+++ b/apps/web/src/BookmarkManager.tsx
@@ -1,5 +1,7 @@
 import { useMemo, useState } from "react";
 import type { Bookmark, Category } from "@dockmark/core";
+import { AiOrganizationSettings } from "./AiOrganizationSettings";
+import { BookmarkMaintenance } from "./BookmarkMaintenance";
 import { BookmarkManager as ExistingBookmarkManager } from "./BookmarkManagerLegacy";
 import { ChangeJournal } from "./ChangeJournal";
 import { LibraryBulkMaintenance } from "./LibraryBulkMaintenance";
@@ -13,7 +15,17 @@ interface Props {
   onChanged: () => Promise<void>;
 }
 
+type LibraryView = "library" | "organize" | "health" | "history";
+
+const views: Array<{ id: LibraryView; label: string; detail: string }> = [
+  { id: "library", label: "Library", detail: "Create, edit, categorize and reorder bookmarks." },
+  { id: "organize", label: "Organize", detail: "Bulk moves, tags and AI-assisted organization." },
+  { id: "health", label: "Health", detail: "Metadata, health checks, cleanup and archive review." },
+  { id: "history", label: "History", detail: "Review recent library changes." },
+];
+
 export function BookmarkManager({ bookmarks, categories, bookmarkTags, loading, onChanged }: Props) {
+  const [view, setView] = useState<LibraryView>("library");
   const [journalRevision, setJournalRevision] = useState(0);
   const categoryNameById = useMemo(
     () => new Map(categories.map((category) => [category.id, category.name])),
@@ -25,28 +37,73 @@ export function BookmarkManager({ bookmarks, categories, bookmarkTags, loading,
     setJournalRevision((current) => current + 1);
   }
 
+  const active = views.find((item) => item.id === view) ?? views[0];
+
   return (
-    <>
-      <LibraryBulkOrganizer
-        bookmarks={bookmarks}
-        categories={categories}
-        bookmarkTags={bookmarkTags}
-        onChanged={onBulkChanged}
-      />
-      <LibraryBulkMaintenance
-        bookmarks={bookmarks}
-        bookmarkTags={bookmarkTags}
-        categoryNameById={categoryNameById}
-        onChanged={onBulkChanged}
-      />
-      <ChangeJournal revision={String(journalRevision)} />
-      <ExistingBookmarkManager
-        bookmarks={bookmarks}
-        categories={categories}
-        bookmarkTags={bookmarkTags}
-        loading={loading}
-        onChanged={onChanged}
-      />
-    </>
+    <section className="management bookmark-management">
+      <div className="management-heading bookmark-management-heading">
+        <div>
+          <p className="eyebrow">BOOKMARK LIBRARY</p>
+          <h1>One library,<br />one place to maintain it.</h1>
+          <p className="management-intro">{active.detail}</p>
+        </div>
+        <span className="library-count">{bookmarks.length} bookmarks</span>
+      </div>
+
+      <nav className="section-tabs" aria-label="Bookmark management sections">
+        {views.map((item) => (
+          <button
+            key={item.id}
+            className={view === item.id ? "active" : ""}
+            type="button"
+            aria-current={view === item.id ? "page" : undefined}
+            onClick={() => setView(item.id)}
+          >
+            <strong>{item.label}</strong>
+            <span>{item.detail}</span>
+          </button>
+        ))}
+      </nav>
+
+      {view === "library" && (
+        <ExistingBookmarkManager
+          bookmarks={bookmarks}
+          categories={categories}
+          bookmarkTags={bookmarkTags}
+          loading={loading}
+          onChanged={onChanged}
+        />
+      )}
+
+      {view === "organize" && (
+        <div className="bookmark-section-stack">
+          <LibraryBulkOrganizer
+            bookmarks={bookmarks}
+            categories={categories}
+            bookmarkTags={bookmarkTags}
+            onChanged={onBulkChanged}
+          />
+          <AiOrganizationSettings
+            bookmarks={bookmarks}
+            categories={categories}
+            onChanged={onBulkChanged}
+          />
+        </div>
+      )}
+
+      {view === "health" && (
+        <div className="bookmark-section-stack">
+          <LibraryBulkMaintenance
+            bookmarks={bookmarks}
+            bookmarkTags={bookmarkTags}
+            categoryNameById={categoryNameById}
+            onChanged={onBulkChanged}
+          />
+          <BookmarkMaintenance bookmarks={bookmarks} onChanged={onBulkChanged} />
+        </div>
+      )}
+
+      {view === "history" && <ChangeJournal revision={String(journalRevision)} />}
+    </section>
   );
 }

From 360590fdb00fa1c2670e51c62af29ed8ed1442a2 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:07:46 +0800
Subject: [PATCH 02/17] feat: split settings into focused subnavigation

---
 apps/web/src/SettingsPage.tsx | 81 ++++++++++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/SettingsPage.tsx b/apps/web/src/SettingsPage.tsx
index 18e9f5f..892e0c7 100644
--- a/apps/web/src/SettingsPage.tsx
+++ b/apps/web/src/SettingsPage.tsx
@@ -1,52 +1,103 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { Bookmark, Category } from "@dockmark/core";
 import { listBookmarks, listCategories } from "./api";
-import { AiOrganizationSettings } from "./AiOrganizationSettings";
 import { AppearanceSettings } from "./AppearanceSettings";
-import { BookmarkMaintenance } from "./BookmarkMaintenance";
 import { BrowserSettingsManager } from "./BrowserSettingsManager";
 import { PublicPageSettings } from "./PublicPageSettings";
 import { SecuritySettings } from "./SecuritySettings";
 import "./settings.css";
 import "./security.css";
 
+type SettingsView = "appearance" | "browser" | "security" | "public";
+
+const sections: Array<{ id: SettingsView; label: string; detail: string }> = [
+  { id: "appearance", label: "Appearance", detail: "Theme and visual preferences." },
+  { id: "browser", label: "Browser", detail: "New Tab and sync behavior." },
+  { id: "security", label: "Security", detail: "Pairing and trusted devices." },
+  { id: "public", label: "Public Page", detail: "Publish and arrange curated links." },
+];
+
+function settingsView(pathname: string): SettingsView {
+  const segment = pathname.split("/").filter(Boolean).at(-1);
+  return segment === "browser" || segment === "security" || segment === "public" || segment === "appearance"
+    ? segment
+    : "appearance";
+}
+
+function navigate(view: SettingsView) {
+  window.history.pushState({}, "", `/app/settings/${view}`);
+  window.dispatchEvent(new PopStateEvent("popstate"));
+}
+
 export function SettingsPage() {
+  const [path, setPath] = useState(window.location.pathname);
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
   const [categories, setCategories] = useState<Category[]>([]);
+  const [publicDataLoaded, setPublicDataLoaded] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const view = useMemo(() => settingsView(path), [path]);
 
-  const refreshData = useCallback(async () => {
+  useEffect(() => {
+    const onPopState = () => setPath(window.location.pathname);
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+
+  const refreshPublicData = useCallback(async () => {
     setError(null);
     try {
       const [nextBookmarks, nextCategories] = await Promise.all([listBookmarks(), listCategories()]);
       setBookmarks(nextBookmarks);
       setCategories(nextCategories);
+      setPublicDataLoaded(true);
     } catch (caught) {
-      setError(caught instanceof Error ? caught.message : "Could not load settings data.");
+      setError(caught instanceof Error ? caught.message : "Could not load public-page data.");
       throw caught;
     }
   }, []);
 
   useEffect(() => {
-    void refreshData().catch(() => undefined);
-  }, [refreshData]);
+    if (view === "public" && !publicDataLoaded) {
+      void refreshPublicData().catch(() => undefined);
+    }
+  }, [publicDataLoaded, refreshPublicData, view]);
+
+  const active = sections.find((section) => section.id === view) ?? sections[0];
 
   return (
     <main className="settings-page shell">
       <section className="management-heading settings-page-heading">
         <div>
           <p className="eyebrow">DOCKMARK SETTINGS</p>
-          <h1>Private controls,<br />explicit policies.</h1>
-          <p>Manage appearance, security, browser sync behavior, metadata and health review, AI-assisted organization, New Tab preferences and the curated public homepage from one place.</p>
+          <h1>Policies and preferences,<br />without the library clutter.</h1>
+          <p>{active.detail} Bookmark editing, organization, health and change history now live together under Workspace → Bookmarks.</p>
         </div>
       </section>
+
+      <nav className="settings-subnav" aria-label="Settings sections">
+        {sections.map((section) => (
+          <button
+            key={section.id}
+            className={view === section.id ? "active" : ""}
+            type="button"
+            aria-current={view === section.id ? "page" : undefined}
+            onClick={() => navigate(section.id)}
+          >
+            <strong>{section.label}</strong>
+            <span>{section.detail}</span>
+          </button>
+        ))}
+      </nav>
+
       {error && <div className="error-banner" role="alert">{error}</div>}
-      <AppearanceSettings />
-      <SecuritySettings />
-      <BrowserSettingsManager />
-      <BookmarkMaintenance bookmarks={bookmarks} onChanged={refreshData} />
-      <AiOrganizationSettings bookmarks={bookmarks} categories={categories} onChanged={refreshData} />
-      <PublicPageSettings bookmarks={bookmarks} categories={categories} />
+      {view === "appearance" && <AppearanceSettings />}
+      {view === "browser" && <BrowserSettingsManager />}
+      {view === "security" && <SecuritySettings />}
+      {view === "public" && (
+        publicDataLoaded
+          ? <PublicPageSettings bookmarks={bookmarks} categories={categories} onChanged={refreshPublicData} />
+          : <div className="settings-loading-card">Loading public-page library…</div>
+      )}
     </main>
   );
 }

From 1a3ee36424f8cfbc4f791943c7582fb71e5de713 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:08:26 +0800
Subject: [PATCH 03/17] feat: add grouped public page curation and ordering

---
 apps/web/src/PublicPageSettings.tsx | 184 ++++++++++++++++++++++++----
 1 file changed, 157 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/PublicPageSettings.tsx b/apps/web/src/PublicPageSettings.tsx
index c4da430..2495562 100644
--- a/apps/web/src/PublicPageSettings.tsx
+++ b/apps/web/src/PublicPageSettings.tsx
@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import type { Bookmark, Category } from "@dockmark/core";
+import { reorderBookmarks, reorderCategories } from "./reorder-api";
 
 interface Props {
   bookmarks: Bookmark[];
   categories: Category[];
+  onChanged: () => Promise<void>;
 }
 
 async function loadSelection() {
@@ -22,10 +24,20 @@ async function setPublished(id: string, published: boolean) {
   if (!response.ok) throw new Error(payload.error?.message ?? `Could not update public page (${response.status}).`);
 }
 
-export function PublicPageSettings({ bookmarks, categories }: Props) {
+function swapIds(ids: string[], leftId: string, rightId: string) {
+  const left = ids.indexOf(leftId);
+  const right = ids.indexOf(rightId);
+  if (left < 0 || right < 0) return ids;
+  const next = [...ids];
+  [next[left], next[right]] = [next[right]!, next[left]!];
+  return next;
+}
+
+export function PublicPageSettings({ bookmarks, categories, onChanged }: Props) {
   const [published, setPublishedIds] = useState<Set<string>>(() => new Set());
   const [loading, setLoading] = useState(true);
   const [busyId, setBusyId] = useState<string | null>(null);
+  const [sorting, setSorting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -45,9 +57,33 @@ export function PublicPageSettings({ bookmarks, categories }: Props) {
     };
   }, []);
 
-  const categoryNames = useMemo(
-    () => new Map(categories.map((category) => [category.id, category.name])),
-    [categories],
+  const bookmarksByCategory = useMemo(() => {
+    const map = new Map<string, Bookmark[]>();
+    for (const bookmark of bookmarks) {
+      const key = bookmark.categoryId ?? "";
+      const list = map.get(key) ?? [];
+      list.push(bookmark);
+      map.set(key, list);
+    }
+    return map;
+  }, [bookmarks]);
+
+  const groups = useMemo(() => {
+    const categoryGroups = categories.map((category) => ({
+      id: category.id,
+      name: category.name,
+      bookmarks: (bookmarksByCategory.get(category.id) ?? []).filter((bookmark) => published.has(bookmark.id)),
+    }));
+    const uncategorized = (bookmarksByCategory.get("") ?? []).filter((bookmark) => published.has(bookmark.id));
+    return [
+      ...categoryGroups.filter((group) => group.bookmarks.length),
+      ...(uncategorized.length ? [{ id: "", name: "Elsewhere", bookmarks: uncategorized }] : []),
+    ];
+  }, [bookmarksByCategory, categories, published]);
+
+  const unpublished = useMemo(
+    () => bookmarks.filter((bookmark) => !published.has(bookmark.id)),
+    [bookmarks, published],
   );
 
   async function toggle(bookmark: Bookmark) {
@@ -69,13 +105,53 @@ export function PublicPageSettings({ bookmarks, categories }: Props) {
     }
   }
 
+  async function moveCategory(groupId: string, direction: -1 | 1) {
+    if (!groupId) return;
+    const publicCategoryIds = groups.map((group) => group.id).filter(Boolean);
+    const index = publicCategoryIds.indexOf(groupId);
+    const targetId = publicCategoryIds[index + direction];
+    if (!targetId) return;
+    const allIds = categories.map((category) => category.id);
+    setSorting(true);
+    setError(null);
+    try {
+      await reorderCategories(swapIds(allIds, groupId, targetId));
+      await onChanged();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Could not reorder public categories.");
+    } finally {
+      setSorting(false);
+    }
+  }
+
+  async function moveBookmark(bookmark: Bookmark, direction: -1 | 1) {
+    const categoryKey = bookmark.categoryId ?? "";
+    const publicIds = (bookmarksByCategory.get(categoryKey) ?? [])
+      .filter((candidate) => published.has(candidate.id))
+      .map((candidate) => candidate.id);
+    const index = publicIds.indexOf(bookmark.id);
+    const targetId = publicIds[index + direction];
+    if (!targetId) return;
+    const allIds = (bookmarksByCategory.get(categoryKey) ?? []).map((candidate) => candidate.id);
+    setSorting(true);
+    setError(null);
+    try {
+      await reorderBookmarks(bookmark.categoryId ?? null, swapIds(allIds, bookmark.id, targetId));
+      await onChanged();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Could not reorder public bookmarks.");
+    } finally {
+      setSorting(false);
+    }
+  }
+
   return (
     <section className="public-settings-section" aria-labelledby="public-settings-title">
       <div className="settings-heading">
         <div>
           <p className="eyebrow">PUBLIC PAGE</p>
-          <h2 id="public-settings-title">Curate what visitors can see.</h2>
-          <p>The public homepage exposes only the bookmarks selected here. Workspaces, Sessions, settings and private bookmarks remain behind authentication.</p>
+          <h2 id="public-settings-title">Publish and arrange the curated view.</h2>
+          <p>Public groups reuse the canonical Library category and bookmark order. Reordering here updates that shared order, so Web, New Tab and the public page stay consistent instead of drifting into separate layouts.</p>
         </div>
         <div className="settings-sync-state">
           <strong>{published.size} published</strong>
@@ -84,30 +160,84 @@ export function PublicPageSettings({ bookmarks, categories }: Props) {
       </div>
 
       {error && <div className="error-banner" role="alert">{error}</div>}
-      <article className="form-card settings-card settings-card-wide">
-        <div className="public-bookmark-picker">
-          {bookmarks.map((bookmark) => {
-            const checked = published.has(bookmark.id);
-            return (
-              <label className="public-bookmark-row" key={bookmark.id}>
-                <input
-                  type="checkbox"
-                  checked={checked}
-                  disabled={loading || busyId === bookmark.id}
-                  onChange={() => void toggle(bookmark)}
-                />
+
+      <div className="public-curation-layout">
+        <article className="form-card public-layout-card">
+          <div className="card-heading">
+            <div>
+              <h2>Public layout</h2>
+              <p>Move published categories and links without leaving Settings.</p>
+            </div>
+            <span>{groups.length} groups</span>
+          </div>
+
+          <div className="public-layout-groups">
+            {groups.map((group, groupIndex) => (
+              <section className="public-layout-group" key={group.id || "uncategorized"}>
+                <header>
+                  <div>
+                    <strong>{group.name}</strong>
+                    <span>{group.bookmarks.length} links</span>
+                  </div>
+                  {group.id && (
+                    <div className="public-order-actions">
+                      <button className="text-action" type="button" disabled={sorting || groupIndex === 0} onClick={() => void moveCategory(group.id, -1)}>↑ Group</button>
+                      <button className="text-action" type="button" disabled={sorting || groupIndex === groups.length - 1 || !groups[groupIndex + 1]?.id} onClick={() => void moveCategory(group.id, 1)}>↓ Group</button>
+                    </div>
+                  )}
+                </header>
+
+                <div className="public-layout-items">
+                  {group.bookmarks.map((bookmark, index) => (
+                    <div className="public-layout-item" key={bookmark.id}>
+                      <span className="drag-handle" aria-hidden="true">⠿</span>
+                      <span>
+                        <strong>{bookmark.title}</strong>
+                        <small>{bookmark.url}</small>
+                      </span>
+                      <div className="public-order-actions">
+                        <button className="text-action" type="button" disabled={sorting || index === 0} onClick={() => void moveBookmark(bookmark, -1)}>↑</button>
+                        <button className="text-action" type="button" disabled={sorting || index === group.bookmarks.length - 1} onClick={() => void moveBookmark(bookmark, 1)}>↓</button>
+                        <button className="danger-text text-action" type="button" disabled={busyId === bookmark.id} onClick={() => void toggle(bookmark)}>Unpublish</button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            ))}
+            {!loading && !groups.length && <p className="empty-copy">Nothing is public yet. Publish bookmarks from the list beside this preview.</p>}
+            {loading && <p className="empty-copy">Loading public selection…</p>}
+          </div>
+        </article>
+
+        <article className="form-card public-publish-card">
+          <div className="card-heading">
+            <div>
+              <h2>Add to public page</h2>
+              <p>Private bookmarks remain private until explicitly published.</p>
+            </div>
+            <span>{unpublished.length}</span>
+          </div>
+          <div className="public-bookmark-picker">
+            {unpublished.map((bookmark) => (
+              <button
+                className="public-bookmark-row public-bookmark-add"
+                type="button"
+                key={bookmark.id}
+                disabled={loading || busyId === bookmark.id}
+                onClick={() => void toggle(bookmark)}
+              >
                 <span>
                   <strong>{bookmark.title}</strong>
-                  <small>{categoryNames.get(bookmark.categoryId ?? "") ?? "Uncategorized"} · {bookmark.url}</small>
+                  <small>{categories.find((category) => category.id === bookmark.categoryId)?.name ?? "Uncategorized"} · {bookmark.url}</small>
                 </span>
-                <em>{checked ? "PUBLIC" : "PRIVATE"}</em>
-              </label>
-            );
-          })}
-          {!loading && !bookmarks.length && <p className="empty-copy">Add bookmarks first, then choose which ones belong on the public page.</p>}
-          {loading && <p className="empty-copy">Loading public selection…</p>}
-        </div>
-      </article>
+                <em>＋ PUBLISH</em>
+              </button>
+            ))}
+            {!loading && !unpublished.length && <p className="empty-copy">Every active bookmark is currently published.</p>}
+          </div>
+        </article>
+      </div>
     </section>
   );
 }

From 0c23d1f22834b42ffb327753a4e3207a99697e1f Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:09:51 +0800
Subject: [PATCH 04/17] refactor: keep bookmark hub navigation lightweight

---
 apps/web/src/BookmarkManager.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/apps/web/src/BookmarkManager.tsx b/apps/web/src/BookmarkManager.tsx
index fa55a7e..daf791f 100644
--- a/apps/web/src/BookmarkManager.tsx
+++ b/apps/web/src/BookmarkManager.tsx
@@ -37,19 +37,8 @@ export function BookmarkManager({ bookmarks, categories, bookmarkTags, loading,
     setJournalRevision((current) => current + 1);
   }
 
-  const active = views.find((item) => item.id === view) ?? views[0];
-
   return (
-    <section className="management bookmark-management">
-      <div className="management-heading bookmark-management-heading">
-        <div>
-          <p className="eyebrow">BOOKMARK LIBRARY</p>
-          <h1>One library,<br />one place to maintain it.</h1>
-          <p className="management-intro">{active.detail}</p>
-        </div>
-        <span className="library-count">{bookmarks.length} bookmarks</span>
-      </div>
-
+    <section className="bookmark-management-hub">
       <nav className="section-tabs" aria-label="Bookmark management sections">
         {views.map((item) => (
           <button

From 28ddd35877e69133f9926db8c36a31d3d7600d51 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:10:16 +0800
Subject: [PATCH 05/17] style: add settings and public curation navigation

---
 apps/web/src/settings.css | 67 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/apps/web/src/settings.css b/apps/web/src/settings.css
index d6d79de..e3537f1 100644
--- a/apps/web/src/settings.css
+++ b/apps/web/src/settings.css
@@ -37,3 +37,70 @@
   .settings-actions-row { align-items: stretch; flex-direction: column; }
   .settings-actions-row .extension-actions { justify-content: flex-end; }
 }
+
+
+.settings-subnav {
+  position: sticky;
+  top: calc(var(--dm-private-nav-height) + 14px);
+  z-index: 20;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin: -18px 0 28px;
+  padding: 7px;
+  border: 1px solid var(--dm-border);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--dm-bg) 92%, transparent);
+  backdrop-filter: blur(14px);
+}
+.settings-subnav button {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 11px 12px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  color: var(--dm-text-muted);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+.settings-subnav button:hover { color: var(--dm-text); background: var(--dm-bg-soft); }
+.settings-subnav button.active { border-color: var(--dm-border-strong); color: var(--dm-text); background: var(--dm-bg-raised); }
+.settings-subnav strong { font-size: 12px; }
+.settings-subnav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
+.settings-loading-card { padding: 28px; border: 1px dashed var(--dm-border); border-radius: 16px; color: var(--dm-text-muted); text-align: center; }
+
+.public-curation-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 14px; }
+.public-layout-card, .public-publish-card { min-width: 0; }
+.public-layout-groups { display: grid; gap: 14px; }
+.public-layout-group { overflow: hidden; border: 1px solid var(--dm-border); border-radius: 14px; background: color-mix(in srgb, var(--dm-bg-soft) 72%, transparent); }
+.public-layout-group > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border-bottom: 1px solid var(--dm-border); }
+.public-layout-group > header > div:first-child { display: grid; gap: 3px; min-width: 0; }
+.public-layout-group > header strong { font-size: 12px; }
+.public-layout-group > header span { color: var(--dm-text-muted); font-size: 10px; }
+.public-layout-items { display: grid; }
+.public-layout-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 9px 12px; border-top: 1px solid var(--dm-border); }
+.public-layout-item:first-child { border-top: 0; }
+.public-layout-item > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
+.public-layout-item strong, .public-layout-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.public-layout-item strong { font-size: 12px; }
+.public-layout-item small { color: var(--dm-text-muted); font-size: 10px; }
+.public-order-actions { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
+.public-order-actions button:disabled { opacity: .35; cursor: default; }
+.public-publish-card .public-bookmark-picker { max-height: 640px; }
+.public-bookmark-add { grid-template-columns: minmax(0, 1fr) auto; width: 100%; text-align: left; }
+.public-bookmark-add:disabled { opacity: .55; cursor: default; }
+
+@media (max-width: 860px) {
+  .settings-subnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .public-curation-layout { grid-template-columns: 1fr; }
+}
+@media (max-width: 560px) {
+  .settings-subnav { position: static; grid-template-columns: 1fr; margin-top: -24px; }
+  .settings-subnav span { white-space: normal; }
+  .public-layout-group > header, .public-layout-item { align-items: flex-start; }
+  .public-layout-group > header { flex-direction: column; }
+  .public-layout-item { grid-template-columns: auto minmax(0, 1fr); }
+  .public-layout-item .public-order-actions { grid-column: 2; }
+}

From f3b3ca16a683b1d303fed5f567eee4ef024569c1 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:10:18 +0800
Subject: [PATCH 06/17] style: add bookmark management hub navigation

---
 apps/web/src/styles.css | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 5f709d0..0f9abd1 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -144,3 +144,42 @@ kbd { padding: 6px 8px; color: #77827c; border: 1px solid #303934; border-radius
   .bookmark-actions { width: 100%; padding-left: 55px; }
   .row-actions { opacity: 1; }
 }
+
+
+.bookmark-management-hub { padding-top: 26px; }
+.section-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: -28px;
+  padding: 7px;
+  border: 1px solid var(--dm-border);
+  border-radius: 16px;
+  background: var(--dm-bg-soft);
+}
+.section-tabs button {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 11px 12px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  color: var(--dm-text-muted);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+.section-tabs button:hover { color: var(--dm-text); background: var(--dm-bg-card); }
+.section-tabs button.active { border-color: var(--dm-border-strong); color: var(--dm-text); background: var(--dm-bg-raised); }
+.section-tabs strong { font-size: 12px; }
+.section-tabs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
+.bookmark-section-stack { padding-top: 40px; }
+.bookmark-section-stack > :first-child { margin-top: 0; }
+
+@media (max-width: 760px) {
+  .section-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: -10px; }
+}
+@media (max-width: 520px) {
+  .section-tabs { grid-template-columns: 1fr; }
+  .section-tabs span { white-space: normal; }
+}

From 09c5b987b0e5f133951f2ecff5c8d2cdcd03e415 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:05 +0800
Subject: [PATCH 07/17] feat: share appearance preference with New Tab

---
 apps/extension/public/newtab-theme.js | 38 +++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 apps/extension/public/newtab-theme.js

diff --git a/apps/extension/public/newtab-theme.js b/apps/extension/public/newtab-theme.js
new file mode 100644
index 0000000..0ab31bf
--- /dev/null
+++ b/apps/extension/public/newtab-theme.js
@@ -0,0 +1,38 @@
+(() => {
+  const STORAGE_KEY = "dockmarkAppearanceV1";
+
+  function normalize(value) {
+    return value === "light" || value === "dark" || value === "system" ? value : "system";
+  }
+
+  function resolved(preference) {
+    if (preference === "system") {
+      return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+    }
+    return preference;
+  }
+
+  function apply(preference, persist = true) {
+    const normalized = normalize(preference);
+    const theme = resolved(normalized);
+    document.documentElement.dataset.appearance = normalized;
+    document.documentElement.dataset.theme = theme;
+    document.documentElement.style.colorScheme = theme;
+    const meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute("content", theme === "light" ? "#f4f7f5" : "#0a0f0c");
+    if (persist) localStorage.setItem(STORAGE_KEY, normalized);
+    return normalized;
+  }
+
+  function current() {
+    return normalize(localStorage.getItem(STORAGE_KEY));
+  }
+
+  apply(current(), false);
+  const media = matchMedia("(prefers-color-scheme: light)");
+  media.addEventListener("change", () => {
+    if (current() === "system") apply("system", false);
+  });
+
+  window.dockmarkAppearance = { apply, current };
+})();

From 5c3abd0ea9f67d72a93258eded4a1020a571fea4 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:08 +0800
Subject: [PATCH 08/17] feat: initialize New Tab appearance before paint

---
 apps/extension/public/newtab.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/extension/public/newtab.html b/apps/extension/public/newtab.html
index ccd31d5..3ace7a7 100644
--- a/apps/extension/public/newtab.html
+++ b/apps/extension/public/newtab.html
@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="color-scheme" content="dark" />
+    <meta name="color-scheme" content="light dark" />
     <meta name="theme-color" content="#0a0f0c" />
     <title>Dockmark New Tab</title>
     <link rel="icon" href="newtab-icon.svg" type="image/svg+xml" />
+    <script src="newtab-theme.js"></script>
     <link rel="stylesheet" href="newtab.css" />
   </head>
   <body>

From 373dd20b224bed5817d4e0cc76c78de083ed7970 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:10 +0800
Subject: [PATCH 09/17] feat: cache Web appearance in New Tab snapshot

---
 apps/extension/public/newtab.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/extension/public/newtab.js b/apps/extension/public/newtab.js
index 0b99545..d3b9e93 100644
--- a/apps/extension/public/newtab.js
+++ b/apps/extension/public/newtab.js
@@ -52,6 +52,7 @@ function emptySnapshot() {
     categories: [],
     workspaces: [],
     searchEngines: [],
+    appearancePreference: "system",
   };
 }
 
@@ -284,15 +285,19 @@ async function refreshCloud({ quiet = false } = {}) {
       throw new Error("Dockmark site access is not granted. Open the extension popup and reconnect this origin.");
     }
 
-    const [bookmarkPayload, categoryPayload, workspacePayload, enginePayload, settingsPayload] = await Promise.all([
+    const [bookmarkPayload, categoryPayload, workspacePayload, enginePayload, settingsPayload, appearancePayload] = await Promise.all([
       requestJson("/api/bookmarks"),
       requestJson("/api/categories"),
       requestJson("/api/workspaces"),
       requestJson("/api/search-engines"),
       requestJson("/api/settings/browser"),
+      requestJson("/api/settings/appearance").catch(() => null),
     ]);
 
     settings = normalizeSettings(settingsPayload.settings);
+    const appearancePreference = window.dockmarkAppearance?.apply(
+      appearancePayload?.settings?.preference ?? snapshot.appearancePreference ?? "system",
+    ) ?? "system";
     snapshot = {
       version: CACHE_VERSION,
       origin,
@@ -301,6 +306,7 @@ async function refreshCloud({ quiet = false } = {}) {
       categories: asArray(categoryPayload.categories),
       workspaces: asArray(workspacePayload.workspaces),
       searchEngines: asArray(enginePayload.engines),
+      appearancePreference,
     };
     await chrome.storage.local.set({
       [CACHE_KEY]: snapshot,
@@ -568,6 +574,7 @@ async function bootstrap() {
   origin = validOrigin(stored[SERVER_KEY]);
   settings = normalizeSettings(stored[SETTINGS_KEY]);
   if (cacheIsUsable(stored[CACHE_KEY], origin)) snapshot = stored[CACHE_KEY];
+  if (snapshot.appearancePreference) window.dockmarkAppearance?.apply(snapshot.appearancePreference);
 
   await loadOpenTabs();
   renderSnapshot();

From 01620e355a81c46b9b1ee22e92137687f8ef898e Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:12 +0800
Subject: [PATCH 10/17] feat: sync appearance during New Tab refresh

---
 apps/extension/public/newtab-library-cache.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/extension/public/newtab-library-cache.js b/apps/extension/public/newtab-library-cache.js
index 335a08f..2439873 100644
--- a/apps/extension/public/newtab-library-cache.js
+++ b/apps/extension/public/newtab-library-cache.js
@@ -10,12 +10,13 @@
       }
 
       const previousSessions = asArray(snapshot.sessions);
-      const [bookmarkPayload, categoryPayload, workspacePayload, enginePayload, settingsPayload] = await Promise.all([
+      const [bookmarkPayload, categoryPayload, workspacePayload, enginePayload, settingsPayload, appearancePayload] = await Promise.all([
         requestJson("/api/bookmarks"),
         requestJson("/api/categories"),
         requestJson("/api/workspaces"),
         requestJson("/api/search-engines"),
         requestJson("/api/settings/browser"),
+        requestJson("/api/settings/appearance").catch(() => null),
       ]);
 
       let sessions = previousSessions;
@@ -32,6 +33,9 @@
         : {};
 
       settings = normalizeSettings(settingsPayload?.settings);
+      const appearancePreference = window.dockmarkAppearance?.apply(
+        appearancePayload?.settings?.preference ?? snapshot.appearancePreference ?? "system",
+      ) ?? "system";
       snapshot = {
         version: CACHE_VERSION,
         origin,
@@ -46,6 +50,7 @@
         searchEngines: asArray(enginePayload?.engines),
         smartCollections: asArray(settingsPayload?.smartCollections),
         inboxBookmarkIds: asArray(settingsPayload?.inboxBookmarkIds).filter((id) => typeof id === "string" && id.trim()),
+        appearancePreference,
       };
 
       await chrome.storage.local.set({

From 090f8810d85a3f91bd1513a1b315dbc84e83e007 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:14 +0800
Subject: [PATCH 11/17] style: add Dockmark light theme to New Tab

---
 apps/extension/public/newtab.css | 54 +++++++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/apps/extension/public/newtab.css b/apps/extension/public/newtab.css
index 04ced49..0c5cb47 100644
--- a/apps/extension/public/newtab.css
+++ b/apps/extension/public/newtab.css
@@ -1,5 +1,5 @@
 :root {
-  color-scheme: dark;
+  color-scheme: light dark;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --dm-bg: #0a0f0c;
   --dm-surface: #0f1512;
@@ -119,3 +119,55 @@ button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid
   .footer { align-items: flex-start; flex-direction: column; }
   .footer-actions { justify-content: flex-start; flex-wrap: wrap; }
 }
+
+
+html[data-theme="light"] {
+  --dm-bg: #f4f7f5;
+  --dm-surface: #edf2ef;
+  --dm-surface-raised: #ffffff;
+  --dm-surface-hover: #e7efea;
+  --dm-surface-selected: #dceae1;
+  --dm-input-bg: #ffffff;
+  --dm-border: #d1ddd6;
+  --dm-border-strong: #b7c9bf;
+  --dm-text: #173126;
+  --dm-text-soft: #4e665b;
+  --dm-text-muted: #73867c;
+  --dm-placeholder: #91a097;
+  --dm-accent: #4f8063;
+  --dm-accent-strong: #315f47;
+  --dm-focus-ring: rgba(79, 128, 99, .14);
+}
+
+html[data-theme="light"] body {
+  background:
+    radial-gradient(circle at 18% 0%, rgba(81, 132, 101, .11), transparent 34rem),
+    radial-gradient(circle at 85% 12%, rgba(86, 115, 98, .05), transparent 26rem),
+    var(--dm-bg);
+}
+html[data-theme="light"] .state-chip,
+html[data-theme="light"] .icon-button,
+html[data-theme="light"] .ghost-button,
+html[data-theme="light"] .command-input,
+html[data-theme="light"] .panel,
+html[data-theme="light"] .setup-card {
+  border-color: var(--dm-border);
+  background: rgba(255,255,255,.86);
+  color: var(--dm-text-soft);
+}
+html[data-theme="light"] .command-input { box-shadow: 0 18px 60px rgba(40,67,54,.08); color: var(--dm-text); }
+html[data-theme="light"] .command-results { border-color: var(--dm-border-strong); background: rgba(255,255,255,.985); box-shadow: 0 26px 80px rgba(40,67,54,.14); }
+html[data-theme="light"] .result-row { border-color: var(--dm-border); }
+html[data-theme="light"] .bookmark-card,
+html[data-theme="light"] .workspace-card { border-color: var(--dm-border); background: #fff; color: var(--dm-text-soft); }
+html[data-theme="light"] .bookmark-card:hover,
+html[data-theme="light"] .workspace-card:hover,
+html[data-theme="light"] .result-row:hover,
+html[data-theme="light"] .result-row.active,
+html[data-theme="light"] .icon-button:hover,
+html[data-theme="light"] .ghost-button:hover { border-color: #a8c7b5; background: var(--dm-surface-selected); color: var(--dm-text); }
+html[data-theme="light"] .state-chip.online { border-color: #a8cbb5; color: #315f47; background: #eef8f1; }
+html[data-theme="light"] .state-chip.offline,
+html[data-theme="light"] .offline-banner { border-color: #dfc995; color: #7a6328; background: #fff8e9; }
+html[data-theme="light"] .footer,
+html[data-theme="light"] .footer-button { color: var(--dm-text-muted); }

From 71139fd975c7d6d1ab4078dfc09415016744b82c Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:44 +0800
Subject: [PATCH 12/17] chore: bump extension to 1.5.5

---
 apps/extension/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/extension/package.json b/apps/extension/package.json
index 4cce4f3..f549337 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dockmark/extension",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "private": true,
   "type": "module",
   "scripts": {

From 0a8b3bb64c88e9750227b403a0de1ddd98dba630 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:46 +0800
Subject: [PATCH 13/17] chore: align extension manifest version

---
 apps/extension/wxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/extension/wxt.config.ts b/apps/extension/wxt.config.ts
index 6e66f5f..3450082 100644
--- a/apps/extension/wxt.config.ts
+++ b/apps/extension/wxt.config.ts
@@ -5,7 +5,7 @@ export default defineConfig({
   modules: ["@wxt-dev/module-react"],
   manifest: ({ browser }) => ({
     name: "Dockmark",
-    version: "1.5.4",
+    version: "1.5.5",
     description: "Browser bridge for Dockmark tabs, reviewed Capture Inbox, sessions, Smart Collection-aware local-first search, reviewed bookmark sync, local health checks and device pairing.",
     icons: {
       16: "icons/dockmark-16.png",

From bba7bf39a513768fee918c606f7d709787cd5549 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:48 +0800
Subject: [PATCH 14/17] chore: point Web to extension 1.5.5

---
 apps/web/src/extension-distribution.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/extension-distribution.ts b/apps/web/src/extension-distribution.ts
index 9a3331a..49e94a6 100644
--- a/apps/web/src/extension-distribution.ts
+++ b/apps/web/src/extension-distribution.ts
@@ -1,4 +1,4 @@
-export const EXTENSION_RELEASE_VERSION = "1.5.4";
+export const EXTENSION_RELEASE_VERSION = "1.5.5";
 
 // Fill these when browser-store listings are public. The UI will promote the
 // store action while keeping manual downloads visible.

From 7fefe3c2e722a46dfc71e76644f10b803f75bd98 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:50 +0800
Subject: [PATCH 15/17] test: require New Tab theme bootstrap in package

---
 scripts/package-newtab-extension.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/package-newtab-extension.mjs b/scripts/package-newtab-extension.mjs
index 5de387f..ebcf12c 100644
--- a/scripts/package-newtab-extension.mjs
+++ b/scripts/package-newtab-extension.mjs
@@ -25,7 +25,7 @@ manifest.description = "Dockmark browser bridge with a local-first, offline-capa
 manifest.chrome_url_overrides = { newtab: "newtab.html" };
 await writeFile(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`);
 
-for (const required of ["newtab.html", "newtab.js", "newtab-search.js", "newtab-ux.js", "newtab-parity.js", "newtab-auth.js", "newtab.css", "newtab-icon.svg"]) {
+for (const required of ["newtab.html", "newtab.js", "newtab-search.js", "newtab-ux.js", "newtab-parity.js", "newtab-auth.js", "newtab-theme.js", "newtab.css", "newtab-icon.svg"]) {
   await readFile(path.join(variantDir, required));
 }
 

From 90d5e473ecb449b1d67cb1e6740f9c9021b138d1 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:11:52 +0800
Subject: [PATCH 16/17] test: cover shared Web and New Tab appearance

---
 scripts/chromium-newtab-smoke.mjs | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/scripts/chromium-newtab-smoke.mjs b/scripts/chromium-newtab-smoke.mjs
index 463c58f..242644e 100644
--- a/scripts/chromium-newtab-smoke.mjs
+++ b/scripts/chromium-newtab-smoke.mjs
@@ -100,6 +100,9 @@ try {
           }],
         };
       }
+      if (path === "/api/settings/appearance") {
+        return { settings: { version: 1, preference: "light", updatedAt: now } };
+      }
       if (path === "/api/settings/browser") {
         return {
           settings: {
@@ -136,6 +139,9 @@ try {
   }, clickedTargetUrl);
   assert.equal(refreshProbe.refreshed, true);
   assert.equal(refreshProbe.counts["/api/settings/browser"], 1, "A current New Tab refresh should read /api/settings/browser exactly once.");
+  assert.equal(refreshProbe.counts["/api/settings/appearance"], 1, "A current New Tab refresh should read the shared Web appearance exactly once.");
+  assert.equal(refreshProbe.snapshot.appearancePreference, "light");
+  assert.equal(await page.evaluate(() => document.documentElement.dataset.theme), "light");
   assert.deepEqual(refreshProbe.snapshot.bookmarks?.[0]?.tags, ["online", "dev"]);
   assert.equal(refreshProbe.snapshot.smartCollections?.[0]?.name, "Online dev");
   assert.deepEqual(refreshProbe.snapshot.inboxBookmarkIds, ["online-bookmark"]);

From 59a8bbac8e16c278fe830428ddcbebce3b960ce9 Mon Sep 17 00:00:00 2001
From: WangEn <WangEn@users.noreply.github.com>
Date: Fri, 18 Sep 2026 11:13:18 +0800
Subject: [PATCH 17/17] fix: satisfy strict settings section typing

---
 apps/web/src/SettingsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/SettingsPage.tsx b/apps/web/src/SettingsPage.tsx
index 892e0c7..5436a95 100644
--- a/apps/web/src/SettingsPage.tsx
+++ b/apps/web/src/SettingsPage.tsx
@@ -62,7 +62,7 @@ export function SettingsPage() {
     }
   }, [publicDataLoaded, refreshPublicData, view]);
 
-  const active = sections.find((section) => section.id === view) ?? sections[0];
+  const active = sections.find((section) => section.id === view) ?? sections[0]!;
 
   return (
     <main className="settings-page shell">