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

fix(ux/nd): Browse tab auto-selects top category on mount; add Surprise Me button (closes #41)

Browse source
This commit is contained in:
pyr0ball 2026-04-08 22:30:49 -07:00
parent 001e46ba9a
commit 8c1443d156
1 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/components/RecipeBrowserPanel.vue
View file

@ -15,7 +15,7 @@
<div v-if="loadingDomains" class="text-secondary text-sm">Loading…</div> <div v-if="loadingDomains" class="text-secondary text-sm">Loading…</div>
<div v-else-if="activeDomain" class="browser-body"> <div v-else-if="activeDomain" class="browser-body">
<!-- Category list --> <!-- Category list + Surprise Me -->
<div class="category-list mb-md flex flex-wrap gap-xs"> <div class="category-list mb-md flex flex-wrap gap-xs">
<button <button
v-for="cat in categories" v-for="cat in categories"
@ -26,6 +26,14 @@
{{ cat.category }} {{ cat.category }}
<span class="cat-count">{{ cat.recipe_count }}</span> <span class="cat-count">{{ cat.recipe_count }}</span>
</button> </button>
<button
v-if="categories.length > 1"
class="btn btn-secondary cat-btn surprise-btn"
@click="surpriseMe"
title="Pick a random category"
>
🎲 Surprise me
</button>
</div> </div>
<!-- Recipe grid --> <!-- Recipe grid -->
@ -93,10 +101,10 @@
</template> </template>
</template> </template>
<div v-else class="text-secondary text-sm">Select a category above to browse recipes.</div> <div v-else class="text-secondary text-sm">Loading recipes…</div>
</div> </div>
<div v-else-if="!loadingDomains" class="text-secondary text-sm">Select a domain to start browsing.</div> <div v-else-if="!loadingDomains" class="text-secondary text-sm">Loading…</div>
<!-- Save modal --> <!-- Save modal -->
<SaveRecipeModal <SaveRecipeModal
@ -171,6 +179,18 @@ async function selectDomain(domainId: string) {
total.value = 0 total.value = 0
page.value = 1 page.value = 1
categories.value = await browserAPI.listCategories(domainId) categories.value = await browserAPI.listCategories(domainId)
// Auto-select the most-populated category so content appears immediately
if (categories.value.length > 0) {
const top = categories.value.reduce((best, c) =>
c.recipe_count > best.recipe_count ? c : best, categories.value[0]!)
selectCategory(top.category)
}
}
function surpriseMe() {
if (categories.value.length === 0) return
const pick = categories.value[Math.floor(Math.random() * categories.value.length)]!
selectCategory(pick.category)
} }
async function selectCategory(category: string) { async function selectCategory(category: string) {
@ -250,6 +270,15 @@ async function doUnsave(recipeId: number) {
color: white; color: white;
} }
.surprise-btn {
opacity: 0.75;
font-style: italic;
}
.surprise-btn:hover {
opacity: 1;
}
.recipe-grid { .recipe-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;