mikael-lovqvists-claude-agent/task-inventory
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mode toggle and flat mode row layout

Browse Source 
- Segmented control (Tree | Flat) replaces the toggle button
- Expand arrow hidden in flat mode
- Arrow listener only attached in tree mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-05-17 19:10:05 +00:00
parent b7ee5006d2
commit fa2b5bda18
2 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/app.mjs
View File

@@ -263,9 +263,9 @@ function make_task_row(task, children_map) {
row.dataset.priority = task.priority; row.dataset.priority = task.priority;
row.dataset.status = task.status; row.dataset.status = task.status;
// Expand button // Expand button — hidden in flat mode
const expand_btn = row.querySelector('.btn-expand'); const expand_btn = row.querySelector('.btn-expand');
if (children.length > 0) { if (!state.flat_mode && children.length > 0) {
show(expand_btn); show(expand_btn);
expand_btn.textContent = state.expanded.has(task.id) ? '▼' : '▶'; expand_btn.textContent = state.expanded.has(task.id) ? '▼' : '▶';
expand_btn.addEventListener('click', () => { expand_btn.addEventListener('click', () => {
@@ -350,10 +350,17 @@ function render_tasks(container) {
toolbar.className = 'toolbar'; toolbar.className = 'toolbar';
toolbar.innerHTML = '<h2>Tasks</h2>'; toolbar.innerHTML = '<h2>Tasks</h2>';
const flat_btn = document.createElement('button'); const mode_toggle = document.createElement('div');
flat_btn.textContent = state.flat_mode ? 'Tree mode' : 'Flat mode'; mode_toggle.className = 'segmented-control';
flat_btn.addEventListener('click', () => { state.flat_mode = !state.flat_mode; render(); }); for (const [val, label] of [[false, 'Tree'], [true, 'Flat']]) {
toolbar.appendChild(flat_btn); const btn = document.createElement('button');
btn.type = 'button';
btn.textContent = label;
btn.classList.toggle('active', state.flat_mode === val);
btn.addEventListener('click', () => { state.flat_mode = val; render(); });
mode_toggle.appendChild(btn);
}
toolbar.appendChild(mode_toggle);
const add_btn = document.createElement('button'); const add_btn = document.createElement('button');
add_btn.className = 'btn-primary'; add_btn.className = 'btn-primary';

21
public/style.css
View File

@@ -35,6 +35,27 @@ nav { display: flex; gap: 0.5rem; }
font-size: 13px; font-size: 13px;
} }
.segmented-control {
display: flex;
border: 1px solid #444;
border-radius: 4px;
overflow: hidden;
}
.segmented-control button {
border: none;
border-radius: 0;
padding: 0.3rem 0.75rem;
background: transparent;
color: #777;
font-size: 13px;
}
.segmented-control button + button { border-left: 1px solid #444; }
.segmented-control button.active { background: #383838; color: #fff; }
.segmented-control button:hover:not(.active) { color: #bbb; }
.nav-btn.active, .nav-btn:hover { .nav-btn.active, .nav-btn:hover {
background: #333; background: #333;
color: #fff; color: #fff;