From 53bd086661a5b7877bc845d71ccbbf4f529e88d6 Mon Sep 17 00:00:00 2001
From: mikael-lovqvists-claude-agent <mikaels.claude.agent@efforting.tech>
Date: Wed, 1 Apr 2026 04:41:44 +0000
Subject: [PATCH] Make source-use badges read-only display labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 public/app.mjs     | 32 +++++---------------------------
 public/lib/api.mjs |  5 ++---
 public/style.css   |  7 -------
 3 files changed, 7 insertions(+), 37 deletions(-)

diff --git a/public/app.mjs b/public/app.mjs
index 1e54709..5829175 100644
--- a/public/app.mjs
+++ b/public/app.mjs
@@ -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) {
diff --git a/public/lib/api.mjs b/public/lib/api.mjs
index fa38b67..9696989 100644
--- a/public/lib/api.mjs
+++ b/public/lib/api.mjs
@@ -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');
diff --git a/public/style.css b/public/style.css
index b70e663..99d988e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -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 {