ui: final sweep extracting SortFilter and standardizing empty notifications to ui.EmptyState

This commit is contained in:
2026-04-08 18:17:49 +02:00
parent c0516b7118
commit bbc90095bd
3 changed files with 8 additions and 10 deletions

View File

@@ -17,10 +17,9 @@ templ Notifications(watching []WatchingAnimeWithDetails) {
<p class="notifications-subtitle">Shows you're currently watching or planning to watch.</p>
if len(watching) == 0 {
<div class="no-notifications">
<p>No airing anime in your watching list.</p>
<p class="hint">Add currently airing shows to your watching list to see upcoming episodes here.</p>
</div>
@ui.EmptyState("No airing anime in your watching list.") {
<span style="font-size: var(--text-sm); margin-top: var(--space-sm); display: block;">Add currently airing shows to your watching list to see upcoming episodes here.</span>
}
} else {
<div class="notifications-list">
for _, item := range watching {
@@ -52,10 +51,9 @@ func splitUpcomingSeasons(items []database.GetUpcomingSeasonsRow) (airing []data
templ UpcomingSeasonsList(upcomingSeasons []database.GetUpcomingSeasonsRow) {
if len(upcomingSeasons) == 0 {
<div class="no-notifications">
<p>No upcoming seasons for anime you've watched.</p>
<p class="hint">As you watch more shows, new seasons will appear here.</p>
</div>
@ui.EmptyState("No upcoming seasons for anime you've watched.") {
<span style="font-size: var(--text-sm); margin-top: var(--space-sm); display: block;">As you watch more shows, new seasons will appear here.</span>
}
} else {
@renderSplitSeasons(upcomingSeasons)
}

View File

@@ -1,38 +0,0 @@
package templates
type SortFilterOptions struct {
Sort string // "title", "date", "score"
Order string // "asc", "desc"
View string // for watchlist: "grid", "table"
Status string // for watchlist: "all", "watching", etc
}
templ SortFilter(opts SortFilterOptions) {
<div class="sort-filter">
<div class="sort-filter-group">
<label for="sort-select">Sort by</label>
<select id="sort-select" class="sort-filter-select" onchange="document.getElementById('sort-input').value = this.value; document.getElementById('sort-form').submit()">
<option value="date" selected?={ opts.Sort == "date" }>Date added</option>
<option value="title" selected?={ opts.Sort == "title" }>Title</option>
<option value="score" selected?={ opts.Sort == "score" }>Score</option>
</select>
</div>
<div class="sort-filter-group">
<label for="order-select">Order</label>
<select id="order-select" class="sort-filter-select" onchange="document.getElementById('order-input').value = this.value; document.getElementById('sort-form').submit()">
<option value="desc" selected?={ opts.Order == "desc" }>Descending</option>
<option value="asc" selected?={ opts.Order == "asc" }>Ascending</option>
</select>
</div>
</div>
<form id="sort-form" method="get" style="display: none;">
<input type="hidden" name="sort" id="sort-input" value={ opts.Sort }/>
<input type="hidden" name="order" id="order-input" value={ opts.Order }/>
if opts.View != "" {
<input type="hidden" name="view" value={ opts.View }/>
}
if opts.Status != "" {
<input type="hidden" name="status" value={ opts.Status }/>
}
</form>
}

View File

@@ -31,7 +31,7 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=dropped&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "dropped") }>Dropped</a>
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=completed&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "completed") }>Completed</a>
</div>
@SortFilter(SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})
@ui.SortFilter(ui.SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})
if len(entries) == 0 {
@ui.EmptyState("Nothing here yet") {
if currentStatus == "all" {