From 33c8ff274e7c5db8dfcc747e4ecf24acbd042422 Mon Sep 17 00:00:00 2001
From: mikael-lovqvists-claude-agent <mikaels.claude.agent@efforting.tech>
Date: Fri, 3 Apr 2026 03:34:26 +0000
Subject: [PATCH] Add tabs, fields section, and contents section to bin editor
 dialog

- t-dialog-bin-editor: tabs (Corners|Fields|Contents), field rows, contents list
- t-bin-content-row: row template for bin content items
- t-dialog-bin-content: dialog for adding/editing component or free-text items
- t-dialog-bin-type: append field rows section below existing form fields

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/templates.html | 123 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 107 insertions(+), 16 deletions(-)

diff --git a/public/templates.html b/public/templates.html
index 0446227..aa74caf 100644
--- a/public/templates.html
+++ b/public/templates.html
@@ -671,26 +671,58 @@
 <template id="t-dialog-bin-editor">
 	<dialog id="dialog-bin-editor" class="app-dialog app-dialog-wide">
 		<h2 class="dialog-title">Edit bin</h2>
-		<div class="form-row">
-			<label>Name</label>
-			<input type="text" id="bin-editor-name" autocomplete="off">
+		<div class="tab-bar" id="bin-editor-tabs">
+			<button class="tab-btn active" data-tab="corners">Corners</button>
+			<button class="tab-btn" data-tab="fields">Fields</button>
+			<button class="tab-btn" data-tab="contents">Contents</button>
 		</div>
-		<div class="form-row">
-			<label>Type</label>
-			<select id="bin-editor-type">
-				<option value="">— Custom —</option>
-			</select>
+
+		<!-- Corners tab -->
+		<div id="bin-editor-tab-corners">
+			<div class="form-row">
+				<label>Name</label>
+				<input type="text" id="bin-editor-name" autocomplete="off">
+			</div>
+			<div class="form-row">
+				<label>Type</label>
+				<select id="bin-editor-type">
+					<option value="">— Custom —</option>
+				</select>
+			</div>
+			<div class="form-row" id="bin-editor-dims-row">
+				<label>Dimensions (mm)</label>
+				<div class="bin-editor-dims">
+					<input type="number" id="bin-editor-width" placeholder="W" min="1" step="1">
+					<span>×</span>
+					<input type="number" id="bin-editor-height" placeholder="H" min="1" step="1">
+					<span class="form-hint">Leave blank to infer from corners</span>
+				</div>
+			</div>
+			<canvas id="bin-editor-canvas" class="bin-editor-canvas"></canvas>
 		</div>
-		<div class="form-row" id="bin-editor-dims-row">
-			<label>Dimensions (mm)</label>
-			<div class="bin-editor-dims">
-				<input type="number" id="bin-editor-width" placeholder="W" min="1" step="1">
-				<span>×</span>
-				<input type="number" id="bin-editor-height" placeholder="H" min="1" step="1">
-				<span class="form-hint">Leave blank to infer from corners</span>
+
+		<!-- Fields tab -->
+		<div id="bin-editor-tab-fields" hidden>
+			<div class="form-section-label">Field values</div>
+			<div id="bin-field-rows"></div>
+			<div class="form-row add-field-row">
+				<div class="input-with-action">
+					<select id="bin-add-field-select" class="filter-select">
+						<option value="">— add a field —</option>
+					</select>
+					<button type="button" class="btn btn-secondary btn-sm" id="bin-new-field">New…</button>
+				</div>
 			</div>
 		</div>
-		<canvas id="bin-editor-canvas" class="bin-editor-canvas"></canvas>
+
+		<!-- Contents tab -->
+		<div id="bin-editor-tab-contents" hidden>
+			<div id="bin-contents-list"></div>
+			<div class="form-row" style="margin-top:0.5rem">
+				<button type="button" class="btn btn-secondary btn-sm" id="bin-add-content">+ Add item</button>
+			</div>
+		</div>
+
 		<div class="dialog-actions">
 			<button type="button" class="btn btn-secondary" id="bin-editor-cancel">Cancel</button>
 			<button type="button" class="btn btn-primary" id="bin-editor-save">Save &amp; process</button>
@@ -698,6 +730,55 @@
 	</dialog>
 </template>
 
+<!-- ===== TEMPLATE: BIN CONTENT ROW ===== -->
+<template id="t-bin-content-row">
+	<div class="bin-content-row">
+		<span class="bin-content-name"></span>
+		<span class="bin-content-qty"></span>
+		<span class="bin-content-notes"></span>
+		<span class="row-actions">
+			<button class="btn-icon btn-edit" title="Edit">✎</button>
+			<button class="btn-icon btn-danger btn-delete" title="Remove">✕</button>
+		</span>
+	</div>
+</template>
+
+<!-- ===== DIALOG: BIN CONTENT ITEM ===== -->
+<template id="t-dialog-bin-content">
+	<dialog id="dialog-bin-content" class="app-dialog">
+		<h2 class="dialog-title">Add item</h2>
+		<div class="form-row">
+			<label>Type</label>
+			<select id="bc-type" class="filter-select wide">
+				<option value="component">Component</option>
+				<option value="item">Free text</option>
+			</select>
+		</div>
+		<div class="form-row" id="bc-component-row">
+			<label>Component</label>
+			<select id="bc-component" class="filter-select wide">
+				<option value="">— select —</option>
+			</select>
+		</div>
+		<div class="form-row" id="bc-name-row" hidden>
+			<label>Name</label>
+			<input type="text" id="bc-name" autocomplete="off">
+		</div>
+		<div class="form-row">
+			<label>Quantity</label>
+			<input type="text" id="bc-quantity" autocomplete="off" placeholder="e.g. 10, ~50, full">
+		</div>
+		<div class="form-row">
+			<label>Notes</label>
+			<input type="text" id="bc-notes" autocomplete="off" placeholder="Optional">
+		</div>
+		<div class="dialog-actions">
+			<button type="button" class="btn btn-secondary" id="bc-cancel">Cancel</button>
+			<button type="button" class="btn btn-primary" id="bc-save">Save</button>
+		</div>
+	</dialog>
+</template>
+
 <template id="t-dialog-bin-type">
 	<dialog id="dialog-bin-type" class="app-dialog">
 		<h2 class="dialog-title"></h2>
@@ -717,6 +798,16 @@
 			<label>Description</label>
 			<input type="text" id="bt-description" autocomplete="off" placeholder="Optional">
 		</div>
+		<div class="form-section-label">Field values</div>
+		<div id="bt-field-rows"></div>
+		<div class="form-row add-field-row">
+			<div class="input-with-action">
+				<select id="bt-add-field-select" class="filter-select">
+					<option value="">— add a field —</option>
+				</select>
+				<button type="button" class="btn btn-secondary btn-sm" id="bt-new-field">New…</button>
+			</div>
+		</div>
 		<div class="dialog-actions">
 			<button type="button" class="btn btn-secondary" id="bt-cancel">Cancel</button>
 			<button type="button" class="btn btn-primary" id="bt-save">Save</button>