Potion/internal/templates/pages/favorites.templ
Hayden Hargreaves 045dc13fbe (FEAT): Created favorites search route which allows for better search.
This basically marks the favorites page completed. Updating the recipe
repository to allow the search function to accept a userId and favorites
flag. This flag will toggle a "favorites only" search. Which can be used
to replicate the same functionality from the search page in the
favorites page. This later can serve as a baseline for updating to also
work for activity search.

I am starting to think an ORM is a good idea...I heard Gorm is good, but
for now, there is a bit too much tech debt.
2025-07-16 18:57:36 -07:00

67 lines
2.2 KiB
Plaintext

package templates
import "fmt"
import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "github.com/haydenhargreaves/Potion/internal/domain/recipe"
import domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"
templ favoriteList(recipes []domain.Recipe) {
<div id="result-list" class="flex flex-col w-full p-4 items-center">
for _, recipe := range recipes {
@searchResult(recipe)
}
if len(recipes) == 0 || recipes == nil {
<p class="text-gray-700 text-sm py-4">No results</p>
} else {
<p class="text-gray-700 text-sm py-4">End of results</p>
}
</div>
}
templ favoriteResult(recipe domain.Recipe) {
<div
hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
hx-trigger="click"
hx-swap="none"
class="w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer"
>
<img class="bg-gray-50 size-56 md:size-40 rounded-md border-0" src=""/>
<div class="text-gray-700 p-4 flex flex-col items-center md:items-start">
<h3 class="text-xl font-semibold text-black pb-1">
{ recipe.Title } <span class="text-sm font-normal hidden md:inline">{ recipe.Category }</span>
</h3>
<div class="text-sm flex gap-x-3 gap-y-1 items-center flex-wrap">
<span class="flex gap-x-1 align-center">
@timeIconSm()
{ recipe.Duration.Total } min
</span>
<span class="flex gap-x-1 align-center">
for _ = range(recipe.Difficulty) {
@starIconSm(true)
}
for _ = range(5 - recipe.Difficulty) {
@starIconSm(false)
}
</span>
<span class="flex gap-x-1 align-center">
@servingIconSm()
Serves { recipe.Serves }
</span>
</div>
<p class="text-sm py-2 text-center md:text-left">{ recipe.Description }</p>
</div>
</div>
}
templ FavoritesPage(filters domain.SearchFilters) {
@components.Navbar("favorites")
<div class="w-full h-screen flex justify-center">
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
@components.BannerText("Favorites")
@components.SearchBar(filters, false, true, true)
<hr class="text-gray-300 w-full"/>
@favoriteList(nil)
</div>
</div>
}