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

Make status/priority badges clickable; unify hover via .clickable class

Browse Source 
- Add .clickable CSS class (cursor + brightness hover) shared by all
  chip-style interactive elements; remove ad-hoc cursor declarations
- Status and priority badges in list view filter in place on click
- Status and priority badges in detail view navigate to type list
  with that filter applied
- Type chip uses .clickable class consistently

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-05-24 16:24:45 +00:00
parent b0af84607f
commit ab93e2548c
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/app.mjs
View File

@@ -262,16 +262,21 @@ function make_entry_row(entry, children_map) {
const type_chip = row.querySelector('.entry-type-chip');
const et = state.entry_types.find(t => t.id === entry.type);
type_chip.textContent = et ? et.title : entry.type;
type_chip.classList.add('clickable');
type_chip.addEventListener('click', (e) => { e.stopPropagation(); navigate('type/' + entry.type); });
show(type_chip);
const status_el = row.querySelector('.task-status');
status_el.textContent = entry.status;
status_el.dataset.val = entry.status;
status_el.classList.add('clickable');
status_el.addEventListener('click', (e) => { e.stopPropagation(); set_filter('filter_status', entry.status); });
const priority_el = row.querySelector('.task-priority');
priority_el.textContent = entry.priority;
priority_el.dataset.val = entry.priority;
priority_el.classList.add('clickable');
priority_el.addEventListener('click', (e) => { e.stopPropagation(); set_filter('filter_priority', entry.priority); });
const main_el = row.querySelector('.task-main');
main_el.classList.add('clickable');
@@ -761,15 +766,17 @@ function render_entry_detail(container) {
}
const status_el = document.createElement('span');
status_el.className = 'task-status';
status_el.className = 'task-status clickable';
status_el.textContent = entry.status;
status_el.dataset.val = entry.status;
status_el.addEventListener('click', () => { state.filter_status = entry.status; navigate('type/' + entry.type); });
meta.appendChild(status_el);
const priority_el = document.createElement('span');
priority_el.className = 'task-priority';
priority_el.className = 'task-priority clickable';
priority_el.textContent = entry.priority;
priority_el.dataset.val = entry.priority;
priority_el.addEventListener('click', () => { state.filter_priority = entry.priority; navigate('type/' + entry.type); });
meta.appendChild(priority_el);
for (const tag of entry.tags) {

5
public/style.css
View File

@@ -192,8 +192,8 @@ main { padding: 1.25rem; }
color: #8899cc;
}
.clickable-tag { cursor: pointer; }
.clickable-tag:hover { background: #363650; color: #aabbee; }
.clickable-tag, .clickable { cursor: pointer; }
.clickable-tag:hover, .clickable:hover { filter: brightness(1.3); }
.btn-expand {
width: 1.25rem;
@@ -448,7 +448,6 @@ dialog input:focus, dialog textarea:focus, dialog select:focus {
margin-bottom: 0.2rem;
display: inline-block;
width: fit-content;
cursor: pointer;
}
/* Type section in entry dialog */