moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): add icons to buttons and normalize button styles

Browse source 
- Add icons to all submit/action buttons (plus, beaker, key, check, etc.)
- Add pencil icons to "Change" buttons in multi-step flows
- Add icons to account page actions (passkeys, tokens, backup, reset)
- Add key icons to login/register passkey buttons
- Normalize primary button weight to font-semibold on account page
- Standardize secondary button hover to hover:bg-surface-alt
This commit is contained in:
Jon Seager 2026-02-07 22:37:07 +00:00
parent ce4f32c63f
commit 487ff75f48
No known key found for this signature in database
6 changed files with 66 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
templates/pages/account.html
View file

@ -67,16 +67,16 @@
id="add-passkey-btn" id="add-passkey-btn"
type="button" type="button"
onclick="registerPasskey()" onclick="registerPasskey()"
class="shrink-0 rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
> >
Register {{ icons::key("h-4 w-4") }} Register
</button> </button>
<button <button
type="button" type="button"
data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''" data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''"
class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt" class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
> >
Cancel {{ icons::x_mark("h-4 w-4") }} Cancel
</button> </button>
</div> </div>
<div id="add-passkey-loading" class="mt-3 hidden flex items-center gap-3 text-sm text-accent"> <div id="add-passkey-loading" class="mt-3 hidden flex items-center gap-3 text-sm text-accent">
@ -90,8 +90,9 @@
type="button" type="button"
data-show="!$_showPasskeyForm" data-show="!$_showPasskeyForm"
data-on:click="$_showPasskeyForm = true; setTimeout(() => document.getElementById('passkey-name').focus(), 50)" data-on:click="$_showPasskeyForm = true; setTimeout(() => document.getElementById('passkey-name').focus(), 50)"
class="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover" class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
> >
{{ icons::key("h-4 w-4") }}
Add Passkey Add Passkey
</button> </button>
</div> </div>
@ -167,17 +168,17 @@
</label> </label>
<button <button
type="submit" type="submit"
class="shrink-0 rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
data-attr:disabled="$_creatingToken" data-attr:disabled="$_creatingToken"
> >
Create {{ icons::plus("h-4 w-4") }} Create
</button> </button>
<button <button
type="button" type="button"
data-on:click="$_showTokenForm = false; $_tokenError = ''" data-on:click="$_showTokenForm = false; $_tokenError = ''"
class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt" class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
> >
Cancel {{ icons::x_mark("h-4 w-4") }} Cancel
</button> </button>
</div> </div>
</form> </form>
@ -201,9 +202,9 @@
<button <button
type="button" type="button"
onclick="copyToken(this)" onclick="copyToken(this)"
class="shrink-0 rounded-md bg-green-600 px-3 py-1.5 text-sm font-medium text-green-50 transition hover:bg-green-500" class="shrink-0 inline-flex items-center gap-2 rounded-md bg-green-600 px-3 py-1.5 text-sm font-medium text-green-50 transition hover:bg-green-500"
> >
Copy {{ icons::clipboard("h-4 w-4") }} Copy
</button> </button>
</div> </div>
</div> </div>
@ -213,8 +214,9 @@
type="button" type="button"
data-show="!$_showTokenForm && !$_tokenCreated" data-show="!$_showTokenForm && !$_tokenCreated"
data-on:click="$_showTokenForm = true; setTimeout(() => document.getElementById('token-name').focus(), 50)" data-on:click="$_showTokenForm = true; setTimeout(() => document.getElementById('token-name').focus(), 50)"
class="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover" class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
> >
{{ icons::terminal("h-4 w-4") }}
Create Token Create Token
</button> </button>
</div> </div>
@ -233,22 +235,25 @@
<a <a
href="/api/v1/backup" href="/api/v1/backup"
download download
class="rounded-md bg-accent px-4 py-2 text-center text-sm font-medium text-accent-text transition hover:bg-accent-hover" class="inline-flex items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
> >
{{ icons::arrow_down_tray("h-4 w-4") }}
Download Backup Download Backup
</a> </a>
<button <button
type="button" type="button"
class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt" class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
onclick="document.getElementById('restore-file-input').click()" onclick="document.getElementById('restore-file-input').click()"
> >
{{ icons::arrow_up_tray("h-4 w-4") }}
Restore from Backup Restore from Backup
</button> </button>
<button <button
type="button" type="button"
class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt" class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-red-600 transition hover:text-red-700 hover:bg-surface-alt"
onclick="resetDatabase()" onclick="resetDatabase()"
> >
{{ icons::delete("h-4 w-4") }}
Reset Database Reset Database
</button> </button>
</div> </div>

40
templates/pages/add.html
View file

@ -118,8 +118,8 @@
</label> </label>
</div> </div>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Roaster {{ icons::plus("h-4 w-4") }} Save Roaster
</button> </button>
</div> </div>
</form> </form>
@ -204,8 +204,8 @@
</label> </label>
</div> </div>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Roast {{ icons::plus("h-4 w-4") }} Save Roast
</button> </button>
</div> </div>
</form> </form>
@ -249,8 +249,8 @@
</label> </label>
</div> </div>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Bag {{ icons::plus("h-4 w-4") }} Save Bag
</button> </button>
</div> </div>
</form> </form>
@ -312,8 +312,8 @@
<span class="text-text-muted shrink-0">&middot;</span> <span class="text-text-muted shrink-0">&middot;</span>
<span class="shrink-0" data-text="$_brewGrind"></span> <span class="shrink-0" data-text="$_brewGrind"></span>
</div> </div>
<button type="button" class="shrink-0 ml-3 text-xs text-text-muted hover:text-text" <button type="button" class="shrink-0 ml-3 inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_editGrinder = true">Change</button> data-on:click="$_editGrinder = true">{{ icons::pencil("h-3 w-3") }} Change</button>
</div> </div>
<!-- Full grinder fields (expanded) --> <!-- Full grinder fields (expanded) -->
<div data-show="$_editGrinder" style="display:none"> <div data-show="$_editGrinder" style="display:none">
@ -349,8 +349,8 @@
<span data-show="$_filterDisplay" class="text-text-muted shrink-0" style="display:none">&middot;</span> <span data-show="$_filterDisplay" class="text-text-muted shrink-0" style="display:none">&middot;</span>
<span data-show="$_filterDisplay" class="truncate" data-text="$_filterDisplay" style="display:none"></span> <span data-show="$_filterDisplay" class="truncate" data-text="$_filterDisplay" style="display:none"></span>
</div> </div>
<button type="button" class="shrink-0 ml-3 text-xs text-text-muted hover:text-text" <button type="button" class="shrink-0 ml-3 inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_editBrewer = true">Change</button> data-on:click="$_editBrewer = true">{{ icons::pencil("h-3 w-3") }} Change</button>
</div> </div>
<!-- Full brewer fields (expanded) --> <!-- Full brewer fields (expanded) -->
<div data-show="$_editBrewer" style="display:none"> <div data-show="$_editBrewer" style="display:none">
@ -437,8 +437,8 @@
data-attr:value="[$_qnGood && 'good', $_qnTooFast && 'too-fast', $_qnTooSlow && 'too-slow', $_qnTooHot && 'too-hot', $_qnUnderExtracted && 'under-extracted', $_qnOverExtracted && 'over-extracted'].filter(Boolean).join(',')" /> data-attr:value="[$_qnGood && 'good', $_qnTooFast && 'too-fast', $_qnTooSlow && 'too-slow', $_qnTooHot && 'too-hot', $_qnUnderExtracted && 'under-extracted', $_qnOverExtracted && 'over-extracted'].filter(Boolean).join(',')" />
</div> </div>
<div class="sticky-submit flex items-center justify-end"> <div class="sticky-submit flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Log Brew {{ icons::beaker("h-4 w-4") }} Log Brew
</button> </button>
</div> </div>
</form> </form>
@ -472,8 +472,8 @@
</label> </label>
</div> </div>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Gear {{ icons::plus("h-4 w-4") }} Save Gear
</button> </button>
</div> </div>
</form> </form>
@ -500,9 +500,9 @@
<span class="text-xs text-text-muted" data-show="$_cafeCity" data-text="$_cafeCity" style="display:none"></span> <span class="text-xs text-text-muted" data-show="$_cafeCity" data-text="$_cafeCity" style="display:none"></span>
</div> </div>
<button type="button" <button type="button"
class="text-xs text-text-muted hover:text-text" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = ''; $_cafeLng = ''; $_cafeWebsite = ''" data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = ''; $_cafeLng = ''; $_cafeWebsite = ''"
>Back</button> >{{ icons::x_mark("h-3 w-3") }} Back</button>
</div> </div>
<form id="cafe-form" method="post" action="/api/v1/cafes" class="mt-4 flex flex-col gap-4"> <form id="cafe-form" method="post" action="/api/v1/cafes" class="mt-4 flex flex-col gap-4">
@ -533,8 +533,8 @@
</label> </label>
</div> </div>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Cafe {{ icons::plus("h-4 w-4") }} Save Cafe
</button> </button>
</div> </div>
</form> </form>
@ -580,8 +580,8 @@
</div> </div>
</div> </div>
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Cup {{ icons::plus("h-4 w-4") }} Save Cup
</button> </button>
</div> </div>
</form> </form>

14
templates/pages/checkin.html
View file

@ -110,9 +110,9 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<button <button
type="button" type="button"
data-on:click="$_cafeId = ''; $_cafeName = ''; $_step = 1" data-on:click="$_cafeId = ''; $_cafeName = ''; $_step = 1"
class="text-xs text-text-muted hover:text-text" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
> >
Change {{ icons::pencil("h-3 w-3") }} Change
</button> </button>
</div> </div>
@ -136,9 +136,9 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<button <button
type="button" type="button"
data-on:click="$_roastId = ''; $_roastName = ''; $_roasterName = ''; $_scanSuccess = ''; $_step = 2" data-on:click="$_roastId = ''; $_roastName = ''; $_roasterName = ''; $_scanSuccess = ''; $_step = 2"
class="text-xs text-text-muted hover:text-text" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
> >
Change {{ icons::pencil("h-3 w-3") }} Change
</button> </button>
</div> </div>
@ -185,7 +185,7 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<div class="mt-4 flex items-center justify-end gap-2"> <div class="mt-4 flex items-center justify-end gap-2">
<button <button
type="button" type="button"
class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:border-accent hover:text-text" class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''" data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''"
> >
Back Back
@ -316,10 +316,10 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<input type="hidden" name="roast_id" data-attr:value="$_roastId" /> <input type="hidden" name="roast_id" data-attr:value="$_roastId" />
<button <button
type="submit" type="submit"
class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting" data-attr:disabled="$_submitting"
> >
Check In {{ icons::check("h-4 w-4") }} Check In
</button> </button>
</form> </form>
</div> </div>

6
templates/pages/login.html
View file

@ -1,4 +1,4 @@
{% extends "base.html" %} {% extends "base.html" %} {% import "partials/icons.html" as icons %}
{% block title %}Brewlog · Login{% endblock %} {% block title %}Brewlog · Login{% endblock %}
{% block head %} {% block head %}
<script src="/webauthn.js"></script> <script src="/webauthn.js"></script>
@ -21,8 +21,8 @@
<button <button
id="login-button" id="login-button"
type="button" type="button"
class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" > class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" >
Sign in with Passkey {{ icons::key("h-4 w-4") }} Sign in with Passkey
</button> </button>
<div id="login-loading" class="mt-4 hidden text-center text-sm text-text-muted"> <div id="login-loading" class="mt-4 hidden text-center text-sm text-text-muted">

6
templates/pages/register.html
View file

@ -1,4 +1,4 @@
{% extends "base.html" %} {% extends "base.html" %} {% import "partials/icons.html" as icons %}
{% block title %}Brewlog · Register{% endblock %} {% block title %}Brewlog · Register{% endblock %}
{% block head %} {% block head %}
<script src="/webauthn.js"></script> <script src="/webauthn.js"></script>
@ -44,8 +44,8 @@
<button <button
id="register-button" id="register-button"
type="button" type="button"
class="mt-2 w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" > class="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" >
Register Passkey {{ icons::key("h-4 w-4") }} Register Passkey
</button> </button>
<div id="register-loading" class="mt-2 hidden text-center text-sm text-text-muted"> <div id="register-loading" class="mt-2 hidden text-center text-sm text-text-muted">

26
templates/partials/forms/scan_result_form.html
View file

@ -20,8 +20,8 @@
<span class="font-medium text-text" data-text="$_roasterName"></span> <span class="font-medium text-text" data-text="$_roasterName"></span>
<span class="text-xs text-text-muted" data-show="$_roasterCountry" data-text="$_roasterCountry" style="display:none"></span> <span class="text-xs text-text-muted" data-show="$_roasterCountry" data-text="$_roasterCountry" style="display:none"></span>
</div> </div>
<button type="button" class="text-xs text-text-muted hover:text-text" <button type="button" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_matchedRoasterId = ''; $_matchedRoastId = ''">Change</button> data-on:click="$_matchedRoasterId = ''; $_matchedRoastId = ''">{{ icons::pencil("h-3 w-3") }} Change</button>
</div> </div>
</div> </div>
<!-- Roaster: form (not matched) --> <!-- Roaster: form (not matched) -->
@ -53,12 +53,12 @@
<h3 class="text-base font-semibold text-text">Roast</h3> <h3 class="text-base font-semibold text-text">Roast</h3>
<div class="mt-2 rounded-lg border bg-surface px-4 py-3 flex items-center justify-between cursor-pointer" data-on:click="$_matchedRoastId = ''"> <div class="mt-2 rounded-lg border bg-surface px-4 py-3 flex items-center justify-between cursor-pointer" data-on:click="$_matchedRoastId = ''">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
{{ icons::bag("h-4 w-4 text-accent shrink-0") }} {{ icons::coffee_bean("h-4 w-4 text-accent shrink-0") }}
<span class="font-medium text-text" data-text="$_roastName"></span> <span class="font-medium text-text" data-text="$_roastName"></span>
<span class="text-xs text-text-muted" data-show="$_origin" data-text="$_origin" style="display:none"></span> <span class="text-xs text-text-muted" data-show="$_origin" data-text="$_origin" style="display:none"></span>
</div> </div>
<button type="button" class="text-xs text-text-muted hover:text-text" <button type="button" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_matchedRoastId = ''">Change</button> data-on:click="$_matchedRoastId = ''">{{ icons::pencil("h-3 w-3") }} Change</button>
</div> </div>
</div> </div>
<!-- Roast: form (not matched) --> <!-- Roast: form (not matched) -->
@ -114,33 +114,33 @@
<button <button
type="button" type="button"
data-on:click="$_scanExtracted = false; $_matchedRoasterId = ''; $_matchedRoastId = ''" data-on:click="$_scanExtracted = false; $_matchedRoasterId = ''; $_matchedRoastId = ''"
class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt" class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
> >
Cancel {{ icons::x_mark("h-4 w-4") }} Cancel
</button> </button>
<!-- Neither matched: full create --> <!-- Neither matched: full create -->
<button <button
type="submit" type="submit"
data-show="!$_matchedRoasterId" data-show="!$_matchedRoasterId"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
> >
Save Roaster &amp; Roast {{ icons::plus("h-4 w-4") }} Save Roaster &amp; Roast
</button> </button>
<!-- Roaster matched, roast not: create roast only --> <!-- Roaster matched, roast not: create roast only -->
<button <button
type="submit" type="submit"
data-show="$_matchedRoasterId && !$_matchedRoastId" data-show="$_matchedRoasterId && !$_matchedRoastId"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none" class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
> >
Save Roast {{ icons::plus("h-4 w-4") }} Save Roast
</button> </button>
<!-- Both matched + open bag: create bag only --> <!-- Both matched + open bag: create bag only -->
<button <button
type="submit" type="submit"
data-show="$_matchedRoastId && $_openBag" data-show="$_matchedRoastId && $_openBag"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none" class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
> >
Open Bag {{ icons::bag("h-4 w-4") }} Open Bag
</button> </button>
<!-- Both matched + no bag: nothing to do --> <!-- Both matched + no bag: nothing to do -->
<p data-show="$_matchedRoastId && !$_openBag" style="display:none" <p data-show="$_matchedRoastId && !$_openBag" style="display:none"