giteadmin/lifeos-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: collapsible domain groups on focus page

Browse Source 
Domain headers are now clickable to expand/collapse their item rows,
with a chevron indicator and item count badge. State persists via
localStorage, matching the sidebar toggle pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael
2026-03-03 16:00:01 +00:00
parent 1a6b3fac1d
commit 9833f131e1
3 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
templates/focus.html
View File

@@ -22,14 +22,18 @@
</colgroup>
{% for domain in hierarchy %}
<tbody>
<tr><td colspan="9" style="padding:2px 8px;border-bottom:1px solid var(--border);background:var(--surface2);">
<span style="display:inline-flex;align-items:center;gap:6px;">
<span style="width:8px;height:8px;border-radius:50%;background:{{ domain.color or 'var(--accent)' }};flex-shrink:0;"></span>
<span style="font-weight:700;font-size:0.8rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--text)">{{ domain.label }}</span>
</span>
</td></tr>
<tr class="focus-domain-header" data-domain-key="{{ domain.key }}" style="cursor:pointer;">
<td colspan="9" style="padding:2px 8px;border-bottom:1px solid var(--border);background:var(--surface2);">
<span style="display:inline-flex;align-items:center;gap:6px;">
<svg class="focus-domain-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" style="transition:transform 0.15s;flex-shrink:0;color:var(--muted);"><polyline points="4 2 8 6 4 10"/></svg>
<span style="width:8px;height:8px;border-radius:50%;background:{{ domain.color or 'var(--accent)' }};flex-shrink:0;"></span>
<span style="font-weight:700;font-size:0.8rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--text)">{{ domain.label }}</span>
<span style="font-size:0.72rem;color:var(--muted);font-weight:400;">{{ domain.rows|length }}</span>
</span>
</td>
</tr>
</tbody>
<tbody class="focus-drag-group">
<tbody class="focus-drag-group" data-domain-key="{{ domain.key }}">
{% for item in domain.rows %}
<tr class="focus-drag-row" draggable="true" data-id="{{ item.id }}" style="border-bottom:1px solid var(--border);{{ 'opacity:0.6;' if item.completed }}">
<td style="padding:1px 1px;vertical-align:middle;">{% with reorder_url="/focus/reorder", item_id=item.id, extra_fields={"focus_date": focus_date|string} %}{% include 'partials/reorder_arrows.html' %}{% endwith %}</td>
@@ -191,6 +195,26 @@
});
}
// Domain group collapse/expand
document.querySelectorAll('.focus-domain-header').forEach(function(header) {
var key = 'focus-domain-' + header.dataset.domainKey;
var tbody = document.querySelector('tbody.focus-drag-group[data-domain-key="' + header.dataset.domainKey + '"]');
var chevron = header.querySelector('.focus-domain-chevron');
// Restore saved state
if (localStorage.getItem(key) === 'true') {
tbody.style.display = 'none';
chevron.style.transform = 'rotate(0deg)';
} else {
chevron.style.transform = 'rotate(90deg)';
}
header.addEventListener('click', function() {
var hidden = tbody.style.display === 'none';
tbody.style.display = hidden ? '' : 'none';
chevron.style.transform = hidden ? 'rotate(90deg)' : 'rotate(0deg)';
localStorage.setItem(key, !hidden);
});
});
// Drag-and-drop reorder within domain groups
var dragRow = null;
var dragGroup = null;