melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: extract empty state component

Browse Source
This commit is contained in:
mkelvers
2026-04-08 18:07:17 +02:00
parent 8cc07dfadd
commit dfb61bfe8c
3 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
internal/shared/ui/empty_state.templ Normal file
View File

@@ -0,0 +1,10 @@
package ui
templ EmptyState(title string) {
<div class="empty-state">
<div class="empty-state-title">{ title }</div>
<div class="empty-state-text">
{ children... }
</div>
</div>
}

14
internal/templates/index.templ
View File

@@ -15,20 +15,18 @@ templ Search(q string) {
</div> </div>
<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div> <div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
} else { } else {
<div class="empty-state"> @ui.EmptyState("Search for anime") {
<div class="empty-state-title">Search for anime</div> Use the search bar above to find anime to add to your watchlist.
<div class="empty-state-text">Use the search bar above to find anime to add to your watchlist.</div> }
</div>
} }
} }
} }
templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) { templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
if len(animes) == 0 { if len(animes) == 0 {
<div class="empty-state"> @ui.EmptyState("No results found.") {
<div class="empty-state-title">No results found.</div> Try a different search term.
<div class="empty-state-text">Try a different search term.</div> }
</div>
} else { } else {
<div class="catalog-grid"> <div class="catalog-grid">
@SearchItems(query, animes, nextPage, hasNext) @SearchItems(query, animes, nextPage, hasNext)

22
internal/templates/watchlist.templ
View File

@@ -3,6 +3,7 @@ package templates
import ( import (
"fmt" "fmt"
"mal/internal/database" "mal/internal/database"
"mal/internal/shared/ui"
) )
templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentStatus string, sortBy string, sortOrder string) { templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentStatus string, sortBy string, sortOrder string) {
@@ -32,18 +33,15 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
</div> </div>
@SortFilter(SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus}) @SortFilter(SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})
if len(entries) == 0 { if len(entries) == 0 {
<div class="empty-state"> @ui.EmptyState("Nothing here yet") {
<div class="empty-state-title">Nothing here yet</div> if currentStatus == "all" {
<div class="empty-state-text"> Your watchlist is empty. <a href="/">Search for anime</a> to get started.
if currentStatus == "all" { } else if currentStatus == "continuing" {
Your watchlist is empty. <a href="/">Search for anime</a> to get started. No airing anime with watching or plan to watch status.
} else if currentStatus == "continuing" { } else {
No airing anime with watching or plan to watch status. No anime in this category.
} else { }
No anime in this category. }
}
</div>
</div>
} else { } else {
if layout == "grid" { if layout == "grid" {
<div class="catalog-grid"> <div class="catalog-grid">