feat(find): surface time budget inline, always visible (closes #131)
Some checks are pending
CI / Backend (Python) (push) Waiting to run
CI / Frontend (Vue) (push) Waiting to run
Mirror / mirror (push) Waiting to run

The time budget selector (hands-on and total time chips) was previously
gated behind the time_first_layout Settings preference. Removed the v-if
guard so both rows are always visible in the Find tab without requiring
a Settings change.

Added "No limit" clear buttons that appear next to the chip row when a
time limit is active, so users can reset a time filter in one tap without
needing to find the active chip and re-tap it.

The time_first_layout setting in Settings remains for users who want
control over the layout.
This commit is contained in:
pyr0ball 2026-05-11 12:11:06 -07:00
parent 973c76a4c8
commit 3f4b756fc6

View file

@ -147,9 +147,8 @@
Tap "Find recipes" again to apply. Tap "Find recipes" again to apply.
</p> </p>
<!-- Time Budget selector (kiwi#52) --> <!-- Time Budget selector always visible; closes #131 -->
<!-- Shows when time_first_layout != 'normal' (auto or time_first) --> <div class="form-group time-bucket-group">
<div v-if="settingsStore.timeFirstLayout !== 'normal'" class="form-group time-bucket-group">
<!-- Hands-on / active time row --> <!-- Hands-on / active time row -->
<div class="time-row"> <div class="time-row">
<span class="time-row-label">Hands-on time</span> <span class="time-row-label">Hands-on time</span>
@ -163,6 +162,12 @@
:aria-pressed="recipesStore.maxActiveMin === bucket.value" :aria-pressed="recipesStore.maxActiveMin === bucket.value"
:title="'Max ' + bucket.label + ' of active cooking'" :title="'Max ' + bucket.label + ' of active cooking'"
>{{ bucket.label }}</button> >{{ bucket.label }}</button>
<button
v-if="recipesStore.maxActiveMin !== null"
class="btn btn-sm btn-secondary time-bucket-clear"
@click="recipesStore.maxActiveMin = null"
aria-label="Clear hands-on time limit"
>No limit</button>
</div> </div>
</div> </div>
@ -179,6 +184,12 @@
:aria-pressed="recipesStore.maxTotalMin === bucket.value" :aria-pressed="recipesStore.maxTotalMin === bucket.value"
:title="'Max ' + bucket.label + ' start to finish'" :title="'Max ' + bucket.label + ' start to finish'"
>{{ bucket.label }}</button> >{{ bucket.label }}</button>
<button
v-if="recipesStore.maxTotalMin !== null"
class="btn btn-sm btn-secondary time-bucket-clear"
@click="recipesStore.maxTotalMin = null"
aria-label="Clear total time limit"
>No limit</button>
</div> </div>
</div> </div>
@ -1638,6 +1649,15 @@ details[open] .collapsible-summary::before {
border-color: var(--color-primary, #1a6b4a); border-color: var(--color-primary, #1a6b4a);
} }
.time-bucket-clear {
font-style: italic;
opacity: 0.7;
}
.time-bucket-clear:hover {
opacity: 1;
}
@media (max-width: 480px) { @media (max-width: 480px) {
.time-row { .time-row {
flex-direction: column; flex-direction: column;