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

@@ -114,10 +114,14 @@ const Auth = (() => {
<div id="settings-msg"></div>
<h3 class="settings-section-title">Profile</h3>
<div class="form-group" style="margin-bottom:1.25rem">
<div class="form-group">
<label for="settings-display-name">Display Name</label>
<input type="text" id="settings-display-name" value="${escHtml(user?.display_name || '')}" maxlength="100" />
</div>
<div class="form-group" style="margin-bottom:1.25rem">
<label for="settings-bottle-size">Bottle Size (shots)</label>
<input type="number" id="settings-bottle-size" value="${user?.bottle_size ?? ''}" min="1" step="0.5" placeholder="e.g. 25" />
</div>
<hr class="settings-divider">
@@ -179,10 +183,12 @@ const Auth = (() => {
}
async function saveProfile() {
const displayName = document.getElementById('settings-display-name').value.trim();
const timezone = document.getElementById('settings-tz').value;
const displayName = document.getElementById('settings-display-name').value.trim();
const timezone = document.getElementById('settings-tz').value;
const bottleSizeRaw = document.getElementById('settings-bottle-size').value;
const bottleSize = bottleSizeRaw !== '' ? parseFloat(bottleSizeRaw) : null;
try {
const user = await API.users.update({ display_name: displayName || null, timezone });
const user = await API.users.update({ display_name: displayName || null, timezone, bottle_size: bottleSize });
saveUser(user);
const usernameEl = document.querySelector('.nav-username');
if (usernameEl) usernameEl.textContent = user.display_name || user.email || 'Account';