Elevate planner UX and offline resilience

This commit is contained in:
2026-07-30 07:03:35 -04:00
parent 057d68156b
commit 7416898bec
6 changed files with 347 additions and 120 deletions
+36 -14
View File
@@ -23,17 +23,15 @@
</div>
</div>
<nav class="section-nav" id="section-nav" aria-label="Jump to section">
<a href="#sec-coffee">Coffee</a>
<a href="#sec-blend">Blend</a>
<a href="#sec-process">Roast target</a>
<nav class="section-nav" id="section-nav" aria-label="Plan sections">
<a href="#sec-coffee">Plan</a>
<a href="#sec-bean">Bean condition</a>
<a href="#sec-machine">Machine plan</a>
<a href="#sec-roastlog">Roast log</a>
<a href="#sec-after">After the roast</a>
<a href="#sec-machine">Roast</a>
<a href="#sec-after">Learn</a>
</nav>
<div class="header-actions">
<button id="btn-plans" type="button" class="ghost-btn">Plans</button>
<button
id="btn-toggle-fids"
type="button"
@@ -54,8 +52,10 @@
<input id="file-load" type="file" accept="application/json" />
<button id="btn-save" type="button" class="ghost-btn">Download</button>
<details class="account-menu">
<summary class="ghost-btn">Account</summary>
<summary class="ghost-btn" id="account-summary">Account</summary>
<div class="account-menu-popover">
<p class="account-email" id="account-email"></p>
<button id="btn-settings" type="button">Settings &amp; sync</button>
<a id="menu-admin" class="hidden" href="/admin">Admin</a>
<button id="btn-logout" type="button">Log out</button>
</div>
@@ -76,9 +76,9 @@
></div>
<div class="drawer-overlay hidden" id="drawer-overlay"></div>
<aside class="drawer hidden" id="panel-prefill" aria-hidden="true">
<aside class="drawer hidden" id="panel-prefill" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="prefill-title" tabindex="-1">
<div class="drawer-head">
<h3>Prefill from a bean product URL</h3>
<h3 id="prefill-title">Prefill from a bean product URL</h3>
<button
class="icon-btn"
type="button"
@@ -112,9 +112,9 @@
</div>
</aside>
<aside class="drawer hidden" id="panel-alog" aria-hidden="true">
<aside class="drawer hidden" id="panel-alog" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="alog-title" tabindex="-1">
<div class="drawer-head">
<h3>Attach an Artisan .alog reference curve</h3>
<h3 id="alog-title">Attach an Artisan .alog reference curve</h3>
<button
class="icon-btn"
type="button"
@@ -136,6 +136,25 @@
</div>
</aside>
<aside class="drawer hidden" id="panel-plans" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="plans-title" tabindex="-1">
<div class="drawer-head"><h3 id="plans-title">Your plans</h3><button class="icon-btn" type="button" data-close-drawer aria-label="Close"></button></div>
<div class="drawer-body">
<button id="btn-new-plan" type="button" class="primary-btn">New plan</button>
<p class="drawer-result">Choose a plan to continue. Every edit is stored on this device first and then synced when online.</p>
<ul class="plan-list" id="plan-list" aria-live="polite"></ul>
</div>
</aside>
<aside class="drawer hidden" id="panel-settings" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="settings-title" tabindex="-1">
<div class="drawer-head"><h3 id="settings-title">Settings &amp; sync</h3><button class="icon-btn" type="button" data-close-drawer aria-label="Close"></button></div>
<div class="drawer-body">
<p class="drawer-result"><strong id="settings-email"></strong> is the active account. Plans are saved locally first, then synced to your account whenever you are online.</p>
<p class="drawer-result">Install Roast Planner from your browser menu for a focused workspace. Updates wait for your confirmation so an in-progress plan is never discarded.</p>
<button id="btn-install" type="button" class="primary-btn hidden">Install Roast Planner</button>
<button id="btn-refresh" type="button" class="ghost-btn hidden">Update ready — refresh safely</button>
</div>
</aside>
<form id="plan-form">
<div class="workspace-grid">
<div class="form-col">
@@ -407,6 +426,7 @@
<section class="panel-card" id="sec-bean">
<div class="panel-head"><h2>Bean Condition</h2></div>
<div class="unknown-condition" role="note"><strong>Don't have lab measurements?</strong> Moisture and density are optional. Leave them blank and record only evidence you have (supplier COA, lot notes, or your next roast). They never change the ledger automatically. Use Net correction only when you can explain the observation behind it.</div>
<div class="panel-body">
<div class="field-grid">
<label class="field" data-fid="5.1"
@@ -776,8 +796,8 @@
</section>
</div>
<aside class="dock">
<div class="dock-card ledger-card">
<aside class="dock" aria-label="Live plan feedback">
<div class="dock-card ledger-card" id="plan-now">
<div class="dock-card-head"><h2>Time Ledger</h2></div>
<div class="ledger-group">
@@ -843,6 +863,8 @@
</div>
</div>
<div class="ledger-warnings hidden" id="ledger-warnings" role="status" aria-live="polite"></div>
<div class="dock-card checks-card">
<div class="dock-card-head"><h2>Sanity Checks</h2></div>
<div class="checks-grid">