Add bottle size, bourbon list modal, and stat improvements

- Add bottle_size field to User model and UserResponse/UserUpdate schemas
- Settings modal includes bottle size input (shots capacity)
- Community bottles and My Bottle page show fill bar based on bottle size
- Community bottle cards are clickable — opens searchable bourbon list modal
- Add total_shots_added stat to replace duplicate net volume on dashboard
- Reorder dashboard stats: Bourbons Added, Total Poured In, Shots Remaining, Est. Proof
- Theme-matched custom scrollbar (amber on dark)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-24 21:53:50 -07:00
parent f1b82baebd
commit ca83351e9d
10 changed files with 108 additions and 23 deletions

View File

@@ -27,6 +27,11 @@
<div class="stat-box"><span class="stat-value"></span><span class="stat-label">Shots Remaining</span></div>
<div class="stat-box"><span class="stat-value"></span><span class="stat-label">Total Poured In</span></div>
</div>
<div id="bottle-level" style="display:none;margin-bottom:1.5rem">
<div class="bottle-bar-wrap" style="height:14px;border-radius:4px">
<div id="bottle-bar-fill" class="bottle-bar" style="width:0%"></div>
</div>
</div>
<!-- Entries -->
<div class="card">
@@ -69,6 +74,7 @@ document.addEventListener('DOMContentLoaded', async () => {
async function loadStats() {
try {
const s = await API.entries.stats();
const user = Auth.getUser();
const grid = document.getElementById('stats-grid');
grid.innerHTML = `
<div class="stat-box">
@@ -76,18 +82,25 @@ async function loadStats() {
<span class="stat-label">Bourbons Added</span>
</div>
<div class="stat-box">
<span class="stat-value">${s.estimated_proof != null ? s.estimated_proof : '—'}</span>
<span class="stat-label">Est. Proof</span>
<span class="stat-value">${s.total_shots_added}</span>
<span class="stat-label">Total Poured In</span>
</div>
<div class="stat-box">
<span class="stat-value">${s.current_total_shots}</span>
<span class="stat-label">Shots Remaining</span>
</div>
<div class="stat-box">
<span class="stat-value">${(s.total_add_entries > 0 ? s.current_total_shots : 0)}</span>
<span class="stat-label">Net Volume (shots)</span>
<span class="stat-value">${s.estimated_proof != null ? s.estimated_proof : '—'}</span>
<span class="stat-label">Est. Proof</span>
</div>
`;
const bottleSize = user?.bottle_size;
if (bottleSize > 0) {
const pct = Math.min(100, (s.current_total_shots / bottleSize) * 100);
document.getElementById('bottle-bar-fill').style.width = pct + '%';
document.getElementById('bottle-level').style.display = '';
}
} catch (_) {}
}