diff --git a/sitecompanion/settings.css b/sitecompanion/settings.css index 927ebfd..350c83f 100644 --- a/sitecompanion/settings.css +++ b/sitecompanion/settings.css @@ -86,6 +86,34 @@ body { min-height: 0; } +.toc-group { + margin: 0; +} + +.toc-group summary { + padding: 4px 6px; + border-radius: 6px; + cursor: pointer; + font-size: 12px; + color: var(--ink); + list-style-position: inside; +} + +.toc-group summary::marker { + color: var(--muted); +} + +.toc-group summary:hover { + background: var(--card-bg); +} + +.toc-group summary a { + display: inline; + padding: 0; + color: inherit; + text-decoration: none; +} + .toc-resizer { position: absolute; top: 0; @@ -112,40 +140,7 @@ body.is-resizing { .toc-sub { padding-left: 12px !important; margin-top: 2px !important; - display: none; -} - -.toc-sub.expanded { - display: grid !important; -} - -.toc-item { - display: flex; - align-items: center; - gap: 4px; - padding: 4px 6px; - border-radius: 6px; - cursor: pointer; - font-size: 12px; - color: var(--ink); - text-decoration: none; -} - -.toc-item:hover { - background: var(--card-bg); -} - -.toc-item .toc-caret { - display: inline-block; - width: 10px; - text-align: center; - color: var(--muted); - font-size: 10px; - transition: transform 0.15s; -} - -.toc-item.expanded .toc-caret { - transform: rotate(90deg); + display: grid; } .toc li a { @@ -161,6 +156,16 @@ body.is-resizing { background: var(--card-bg); } +.toc-group summary a { + display: inline; + padding: 0; + background: transparent; +} + +.toc-group summary a:hover { + background: transparent; +} + .toc-sub li a { color: var(--muted); } diff --git a/sitecompanion/settings.html b/sitecompanion/settings.html index 4965fa9..6b7eb2e 100644 --- a/sitecompanion/settings.html +++ b/sitecompanion/settings.html @@ -21,31 +21,31 @@
diff --git a/sitecompanion/settings.js b/sitecompanion/settings.js index 3f501a4..f586a6e 100644 --- a/sitecompanion/settings.js +++ b/sitecompanion/settings.js @@ -3916,14 +3916,6 @@ function openDetailsChain(target) { } } -function toggleTocSection(item, sub, force) { - if (!sub) return; - const shouldExpand = - typeof force === "boolean" ? force : !sub.classList.contains("expanded"); - sub.classList.toggle("expanded", shouldExpand); - item.classList.toggle("expanded", shouldExpand); -} - function updateToc(workspaces, sites) { const wsList = document.getElementById("toc-workspaces-list"); if (!wsList) return; @@ -3931,21 +3923,15 @@ function updateToc(workspaces, sites) { wsList.innerHTML = ""; for (const ws of workspaces) { const li = document.createElement("li"); - - const itemDiv = document.createElement("div"); - itemDiv.className = "toc-item"; - - const caret = document.createElement("span"); - caret.className = "toc-caret"; - caret.textContent = "▸"; - + const details = document.createElement("details"); + details.className = "toc-group toc-workspace"; + const summary = document.createElement("summary"); const a = document.createElement("a"); a.href = "#"; a.textContent = ws.name || "Untitled"; - - itemDiv.appendChild(caret); - itemDiv.appendChild(a); - + summary.appendChild(a); + details.appendChild(summary); + const subUl = document.createElement("ul"); subUl.className = "toc-sub"; @@ -3985,13 +3971,6 @@ function updateToc(workspaces, sites) { subUl.appendChild(subLi); } - itemDiv.addEventListener("click", (e) => { - if (e.target.closest("a")) return; - e.preventDefault(); - e.stopPropagation(); - toggleTocSection(itemDiv, subUl); - }); - a.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); @@ -4000,11 +3979,11 @@ function updateToc(workspaces, sites) { card.scrollIntoView({ behavior: "smooth", block: "start" }); openDetailsChain(document.getElementById("workspaces-panel")); } - toggleTocSection(itemDiv, subUl); + details.open = true; }); - li.appendChild(itemDiv); - li.appendChild(subUl); + details.appendChild(subUl); + li.appendChild(details); wsList.appendChild(li); } @@ -4032,52 +4011,25 @@ function updateToc(workspaces, sites) { } function initToc() { - const items = document.querySelectorAll(".toc-links > ul > li > .toc-item"); - items.forEach(item => { - item.addEventListener("click", (e) => { - const sub = item.nextElementSibling; - - // Handle link click - if (e.target.closest("a")) { - const link = e.target.closest("a"); - const href = link.getAttribute("href"); - if (href && href.startsWith("#")) { - openDetailsChain(document.querySelector(href)); - if (sub && sub.classList.contains("toc-sub")) { - toggleTocSection(item, sub); - } - } - return; - } - - // Toggle sub-list on row click (excluding link) - if (sub && sub.classList.contains("toc-sub")) { - e.preventDefault(); - e.stopPropagation(); - toggleTocSection(item, sub); - } - }); - }); - - const subLinks = document.querySelectorAll(".toc-sub a[href^=\"#\"]"); - subLinks.forEach((link) => { - const href = link.getAttribute("href"); - if (!href || href === "#") return; - link.addEventListener("click", (e) => { - const target = document.querySelector(href); - if (target) { - openDetailsChain(target); + const links = document.querySelectorAll(".toc-links a[href^=\"#\"]"); + links.forEach((link) => { + const href = link.getAttribute("href"); + if (!href || href === "#") return; + const isSummaryLink = Boolean(link.closest("summary")); + link.addEventListener("click", (e) => { + const target = document.querySelector(href); + if (target) { + openDetailsChain(target); + if (!isSummaryLink) { target.scrollIntoView({ behavior: "smooth", block: "start" }); } - const sub = link.closest(".toc-sub"); - const parentItem = sub?.previousElementSibling; - if (parentItem?.classList?.contains("toc-item")) { - toggleTocSection(parentItem, sub, true); - } + } + if (!isSummaryLink) { e.preventDefault(); e.stopPropagation(); - }); + } }); + }); } document.addEventListener("DOMContentLoaded", initToc);