Add tabbed sub-views to bins section, create-bin-from-source flow

Bins section now mirrors the grids section with two tabs:
- Bins: gallery of processed bin records
- Sources: source images tagged with uses=['bin'], with upload and
  '+ Bin' button to create a bin record from an existing source image

Server: POST /api/bins/from-source accepts source_id, creates bin
record and adds 'bin' to the source image's uses array.

URL state: /bins → bins tab, /bins/sources → sources tab.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-01 04:41:08 +00:00
parent e183988acb
commit 38c2d89c9b
4 changed files with 142 additions and 30 deletions

View File

@@ -280,6 +280,7 @@
<div class="source-card-meta"></div>
<div class="source-card-uses"></div>
</div>
<button type="button" class="btn btn-secondary btn-sm source-card-create-bin" hidden>+ Bin</button>
<button type="button" class="btn-icon btn-danger source-card-delete" title="Delete"></button>
</div>
</template>
@@ -592,12 +593,21 @@
<template id="t-section-bins">
<section class="section" id="section-bins">
<div class="section-toolbar">
<label class="btn btn-primary">
<input type="file" id="bin-upload-input" accept="image/*" hidden>
+ Upload bin photo
<div class="tab-bar">
<button class="tab-btn" id="btn-tab-bins">Bins</button>
<button class="tab-btn" id="btn-tab-bin-sources">Source images</button>
</div>
<label class="btn btn-secondary" id="btn-upload-bin-sources" hidden>
+ Upload
<input type="file" accept="image/*" multiple hidden id="bin-source-upload-input">
</label>
</div>
<div class="bin-gallery" id="bin-gallery"></div>
<div id="tab-bins-content">
<div class="bin-gallery" id="bin-gallery"></div>
</div>
<div id="tab-bin-sources-content" hidden>
<div id="bin-source-image-list" class="source-gallery"></div>
</div>
</section>
</template>