Circuit-Forge/kiwi
3
0
Fork 0
Code Issues 12 Pull requests Projects Releases 3 Packages Wiki Activity Actions

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

Browse source 
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
1 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/components/RecipesView.vue
View file

@ -147,9 +147,8 @@
Tap "Find recipes" again to apply.
</p>
<!-- Time Budget selector (kiwi#52) -->
<!-- Shows when time_first_layout != 'normal' (auto or time_first) -->
<div v-if="settingsStore.timeFirstLayout !== 'normal'" class="form-group time-bucket-group">
<!-- Time Budget selector — always visible; closes #131 -->
<div class="form-group time-bucket-group">
<!-- Hands-on / active time row -->
<div class="time-row">
<span class="time-row-label">Hands-on time</span>
@ -163,6 +162,12 @@
:aria-pressed="recipesStore.maxActiveMin === bucket.value"
:title="'Max ' + bucket.label + ' of active cooking'"
>{{ 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>
@ -179,6 +184,12 @@
:aria-pressed="recipesStore.maxTotalMin === bucket.value"
:title="'Max ' + bucket.label + ' start to finish'"
>{{ 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>
@ -1638,6 +1649,15 @@ details[open] .collapsible-summary::before {
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) {
.time-row {
flex-direction: column;