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

Make source-use badges read-only display labels

Browse Source 
Removing toggle interactivity from use badges — they were confusing
and the wrong place to manage uses. The uses array is now managed
automatically by upload context. Badges are plain spans.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-04-01 04:41:44 +00:00
parent 38c2d89c9b
commit 53bd086661
3 changed files with 7 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/app.mjs
View File

@@ -900,33 +900,11 @@ function build_source_card(src, selectable, on_select = null) {
qs(card, '.source-card-link').href = `/img/${src.id}`;
set_text(card, '.source-card-meta', [src.original_name, `${src.width}×${src.height}`].filter(Boolean).join(' · '));
const uses_el = qs(card, '.source-card-uses');
const KNOWN_USES = ['grid', 'bin'];
for (const use of KNOWN_USES) {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = `source-use-badge source-use-${use}`;
btn.textContent = use;
const active = (src.uses ?? []).includes(use);
btn.classList.toggle('source-use-inactive', !active);
btn.title = active ? `Remove "${use}" tag` : `Add "${use}" tag`;
btn.addEventListener('click', async (e) => {
e.stopPropagation();
const current = (src.uses ?? []);
const new_uses = current.includes(use)
? current.filter(u => u !== use)
: [...current, use];
try {
const result = await api.update_source_image_uses(src.id, new_uses);
src.uses = result.source.uses;
all_sources = all_sources.map(s => s.id === src.id ? { ...s, uses: src.uses } : s);
// Re-render just this card's badges
btn.classList.toggle('source-use-inactive', !src.uses.includes(use));
btn.title = src.uses.includes(use) ? `Remove "${use}" tag` : `Add "${use}" tag`;
} catch (err) {
alert(err.message);
}
});
uses_el.appendChild(btn);
for (const use of (src.uses ?? [])) {
const badge = document.createElement('span');
badge.className = `source-use-badge source-use-${use}`;
badge.textContent = use;
uses_el.appendChild(badge);
}
if (selectable) {

5
public/lib/api.mjs
View File

@@ -35,9 +35,8 @@ export const update_grid_draft = (id, body) => req('PUT', `/api/grid-drafts/${i
export const delete_grid_draft = (id) => req('DELETE', `/api/grid-drafts/${id}`);
// Source images
export const get_source_images = () => req('GET', '/api/source-images');
export const update_source_image_uses = (id, uses) => req('PUT', `/api/source-images/${id}`, { uses });
export const delete_source_image = (id) => req('DELETE', `/api/source-images/${id}`);
export const get_source_images = () => req('GET', '/api/source-images');
export const delete_source_image = (id) => req('DELETE', `/api/source-images/${id}`);
// Component templates
export const get_component_templates = () => req('GET', '/api/component-templates');

7
public/style.css
View File

@@ -1118,13 +1118,6 @@ nav {
text-transform: lowercase;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
border: none;
transition: opacity 0.1s;
}
.source-use-badge.source-use-inactive {
display: none;
}
.source-use-grid {