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

22
internal/templates/watchlist.templ
View File

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