e2a194a044a9

add an expand all and collapse all button to the Atlas bar (v3.0.114)

time
2026-09-29 19:42 UTC · 1 week ago
machine
Junes-MacBook-Pro.local
agent
claude-opus-5-5
session
match kepr 2 repo page
parent
5d7a600d9f51
4 files package.json+1 −1public/css/kepr.css+6 −2public/js/kepr.js+13 −0src/pages/atlas.ts+1 −0
package.json+1 −1
@@ -1,6 +1,6 @@11 {22 	"name": "kepr",3-	"version": "3.0.113",3+	"version": "3.0.114",44 	"private": true,55 	"type": "module",66 	"scripts": {

view file

public/css/kepr.css+6 −2
@@ -655,8 +655,11 @@655655 .atlas-head-link {656656 	color: var(--accent);657657 }658-.atlas-search-btn {658+.atlas-fold-btn {659659 	margin-left: auto;660+}661+.atlas-fold-btn,662+.atlas-search-btn {660663 	padding: 4px 8px;661664 	background: transparent;662665 	border: 1px solid var(--border);@@ -666,10 +669,12 @@666669 	color: var(--text-faint);667670 	cursor: pointer;668671 }672+.atlas-fold-btn:hover,669673 .atlas-search-btn:hover {670674 	color: var(--accent);671675 	border-color: var(--accent-dim);672676 }677+.atlas-fold-btn[hidden],673678 .atlas-search-btn[hidden],674679 .atlas-filter[hidden] {675680 	display: none;@@ -677,7 +682,6 @@677682 .atlas-filter {678683 	width: 220px;679684 	max-width: 100%;680-	margin-left: auto;681685 	padding: 5px 10px;682686 	background: transparent;683687 	border: 1px solid var(--border);

view file

public/js/kepr.js+13 −0
@@ -434,6 +434,19 @@434434 			folder.open = query !== "" || opened.has(folder.dataset.path);435435 		}436436 	});437+	// One button opens every folder, or, when they all are, closes them all.438+	const fold = document.querySelector(".atlas-fold-btn");439+	const label = () => {440+		fold.textContent = folders.every((folder) => folder.open) ? "collapse all" : "expand all";441+	};442+	fold.addEventListener("click", () => {443+		const open = !folders.every((folder) => folder.open);444+		for (const folder of folders) folder.open = open;445+		label();446+	});447+	for (const folder of folders) folder.addEventListener("toggle", label);448+	label();449+	fold.hidden = folders.length === 0;437450 	// The filter waits behind a search button, and folds back into it when left empty.438451 	const search = document.querySelector(".atlas-search-btn");439452 	search.addEventListener("click", () => {

view file

src/pages/atlas.ts+1 −0
@@ -115,6 +115,7 @@115115 <div class="atlas-bar">116116 ${picker(view, saves)}117117 ${at && html`<a class="atlas-head-link mono" href="/${view.repo}#atlas">back to HEAD</a>`}118+<button type="button" class="atlas-fold-btn mono" hidden>expand all</button>118119 <button type="button" class="atlas-search-btn mono" hidden>search</button>119120 <input class="atlas-filter mono" type="search" placeholder="filter by filename" aria-label="Filter files by name" hidden>120121 </div>

view file