From 3f4b756fc6413ae9505e4195d01469b14b97a800 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 11 May 2026 12:11:06 -0700
Subject: [PATCH] feat(find): surface time budget inline, always visible
 (closes #131)

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.
---
 frontend/src/components/RecipesView.vue | 26 ++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/RecipesView.vue b/frontend/src/components/RecipesView.vue
index 7c6d0ad..416a5cc 100644
--- a/frontend/src/components/RecipesView.vue
+++ b/frontend/src/components/RecipesView.vue
@@ -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;