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

ui: align empty states and fix text casing

Browse Source
This commit is contained in:
mkelvers
2026-04-08 16:06:00 +02:00
parent bffdcb5241
commit 2d067c88e4
6 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
internal/templates/index.templ
View File

@@ -13,13 +13,13 @@ templ Search(q string) {
<div class="loading-dot"></div> <div class="loading-dot"></div>
<div class="loading-dot"></div> <div class="loading-dot"></div>
<div class="loading-dot"></div> <div class="loading-dot"></div>
<span>searching</span> <span>Searching...</span>
</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"> <div class="empty-state">
<div class="empty-state-title">search for anime</div> <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 class="empty-state-text">Use the search bar above to find anime to add to your watchlist.</div>
</div> </div>
} }
} }

4
internal/templates/index_templ.go
View File

@@ -48,7 +48,7 @@ func Search(q string) templ.Component {
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
if q != "" { if q != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"loading-indicator htmx-indicator\" id=\"loading\"><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><span>searching</span></div><div id=\"results\" hx-get=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"loading-indicator htmx-indicator\" id=\"loading\"><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><span>Searching...</span></div><div id=\"results\" hx-get=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -66,7 +66,7 @@ func Search(q string) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} else { } else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<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>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<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>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

6
internal/templates/notifications_templ.go
View File

@@ -75,7 +75,7 @@ func Notifications(watching []WatchingAnimeWithDetails) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<h1 style=\"margin-top: var(--space-2xl);\">discovered sequels</h1><p class=\"notifications-subtitle\">Because you've watched prequels.</p><div hx-get=\"/notifications/upcoming\" hx-trigger=\"load, every 15s\" hx-swap=\"innerHTML\"><div class=\"loading-indicator\"><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><span>Syncing sequel graphs...</span></div></div></div>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<h1 style=\"margin-top: var(--space-2xl);\">Discovered sequels</h1><p class=\"notifications-subtitle\">Because you've watched prequels.</p><div hx-get=\"/notifications/upcoming\" hx-trigger=\"load, every 15s\" hx-swap=\"innerHTML\"><div class=\"loading-indicator\"><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><div class=\"loading-dot\"></div><span>Syncing sequel graphs...</span></div></div></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -159,7 +159,7 @@ func renderSplitSeasons(upcomingSeasons []database.GetUpcomingSeasonsRow) templ.
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
if airing, upcoming := splitUpcomingSeasons(upcomingSeasons); true { if airing, upcoming := splitUpcomingSeasons(upcomingSeasons); true {
if len(airing) > 0 { if len(airing) > 0 {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<h2 style=\"font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--text-muted);\">airing now (not tracked)</h2><div class=\"notifications-list\" style=\"margin-bottom: var(--space-xl);\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<h2 style=\"font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--text-muted);\">Airing now (not tracked)</h2><div class=\"notifications-list\" style=\"margin-bottom: var(--space-xl);\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -179,7 +179,7 @@ func renderSplitSeasons(upcomingSeasons []database.GetUpcomingSeasonsRow) templ.
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if len(upcoming) > 0 { if len(upcoming) > 0 {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<h2 style=\"font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--text-muted);\">announced & upcoming</h2><div class=\"notifications-list\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<h2 style=\"font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--text-muted);\">Announced & upcoming</h2><div class=\"notifications-list\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

20
internal/templates/watchlist.templ
View File

@@ -10,21 +10,21 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
<div class="watchlist-header"> <div class="watchlist-header">
<h2>Watchlist</h2> <h2>Watchlist</h2>
<div class="watchlist-controls"> <div class="watchlist-controls">
<a href="/api/watchlist/export" class="text-link">export</a> <a href="/api/watchlist/export" class="text-link">Export</a>
<button class="text-link" onclick="document.getElementById('import-file').click()">Import</button> <button class="text-link" onclick="document.getElementById('import-file').click()">Import</button>
<form id="import-form" hx-post="/api/watchlist/import" hx-encoding="multipart/form-data" style="display: none;"> <form id="import-form" hx-post="/api/watchlist/import" hx-encoding="multipart/form-data" style="display: none;">
<input type="file" id="import-file" name="file" accept=".json" onchange="htmx.trigger('#import-form', 'submit')"/> <input type="file" id="import-file" name="file" accept=".json" onchange="htmx.trigger('#import-form', 'submit')"/>
</form> </form>
<div class="view-toggle"> <div class="view-toggle">
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=grid&status=%s&sort=%s&order=%s", currentStatus, sortBy, sortOrder)) } class={ viewClass(layout == "grid") }>grid</a> <a href={ templ.URL(fmt.Sprintf("/watchlist?view=grid&status=%s&sort=%s&order=%s", currentStatus, sortBy, sortOrder)) } class={ viewClass(layout == "grid") }>Grid</a>
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=table&status=%s&sort=%s&order=%s", currentStatus, sortBy, sortOrder)) } class={ viewClass(layout == "table") }>table</a> <a href={ templ.URL(fmt.Sprintf("/watchlist?view=table&status=%s&sort=%s&order=%s", currentStatus, sortBy, sortOrder)) } class={ viewClass(layout == "table") }>Table</a>
</div> </div>
</div> </div>
</div> </div>
<div class="status-tabs"> <div class="status-tabs">
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=all&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "all") }>all</a> <a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=all&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "all") }>All</a>
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=watching&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "watching") }>Watching</a> <a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=watching&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "watching") }>Watching</a>
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=continuing&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "continuing") }>continuing</a> <a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=continuing&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "continuing") }>Continuing</a>
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=on_hold&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "on_hold") }>On hold</a> <a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=on_hold&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "on_hold") }>On hold</a>
<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=plan_to_watch&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "plan_to_watch") }>Plan to watch</a> <a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=plan_to_watch&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "plan_to_watch") }>Plan to watch</a>
<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=dropped&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "dropped") }>Dropped</a>
@@ -33,14 +33,14 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
@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"> <div class="empty-state">
<div class="empty-state-title">nothing here yet</div> <div class="empty-state-title">Nothing here yet</div>
<div class="empty-state-text"> <div class="empty-state-text">
if currentStatus == "all" { if currentStatus == "all" {
your watchlist is empty. <a href="/">search for anime</a> to get started. Your watchlist is empty. <a href="/">Search for anime</a> to get started.
} else if currentStatus == "continuing" { } else if currentStatus == "continuing" {
no airing anime with watching or plan to watch status. No airing anime with watching or plan to watch status.
} else { } else {
no anime in this category. No anime in this category.
} }
</div> </div>
</div> </div>
@@ -95,7 +95,7 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
hx-target={ fmt.Sprintf("#watchlist-entry-%d", entry.AnimeID) } hx-target={ fmt.Sprintf("#watchlist-entry-%d", entry.AnimeID) }
hx-swap="delete" hx-swap="delete"
style="background: none; border: none; cursor: pointer;" style="background: none; border: none; cursor: pointer;"
>remove</button> >Remove</button>
</td> </td>
</tr> </tr>
} }

20
internal/templates/watchlist_templ.go
View File

@@ -46,7 +46,7 @@ func Watchlist(entries []database.GetUserWatchListRow, layout string, currentSta
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"watchlist-header\"><h2>Watchlist</h2><div class=\"watchlist-controls\"><a href=\"/api/watchlist/export\" class=\"text-link\">export</a> <button class=\"text-link\" onclick=\"document.getElementById('import-file').click()\">Import</button><form id=\"import-form\" hx-post=\"/api/watchlist/import\" hx-encoding=\"multipart/form-data\" style=\"display: none;\"><input type=\"file\" id=\"import-file\" name=\"file\" accept=\".json\" onchange=\"htmx.trigger('#import-form', 'submit')\"></form><div class=\"view-toggle\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"watchlist-header\"><h2>Watchlist</h2><div class=\"watchlist-controls\"><a href=\"/api/watchlist/export\" class=\"text-link\">Export</a> <button class=\"text-link\" onclick=\"document.getElementById('import-file').click()\">Import</button><form id=\"import-form\" hx-post=\"/api/watchlist/import\" hx-encoding=\"multipart/form-data\" style=\"display: none;\"><input type=\"file\" id=\"import-file\" name=\"file\" accept=\".json\" onchange=\"htmx.trigger('#import-form', 'submit')\"></form><div class=\"view-toggle\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -81,7 +81,7 @@ func Watchlist(entries []database.GetUserWatchListRow, layout string, currentSta
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\">grid</a> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\">Grid</a> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -116,7 +116,7 @@ func Watchlist(entries []database.GetUserWatchListRow, layout string, currentSta
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\">table</a></div></div></div><div class=\"status-tabs\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\">Table</a></div></div></div><div class=\"status-tabs\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -151,7 +151,7 @@ func Watchlist(entries []database.GetUserWatchListRow, layout string, currentSta
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\">all</a> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\">All</a> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -221,7 +221,7 @@ func Watchlist(entries []database.GetUserWatchListRow, layout string, currentSta
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\">continuing</a> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\">Continuing</a> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -374,22 +374,22 @@ func Watchlist(entries []database.GetUserWatchListRow, layout string, currentSta
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if len(entries) == 0 { if len(entries) == 0 {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div class=\"empty-state\"><div class=\"empty-state-title\">nothing here yet</div><div class=\"empty-state-text\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div class=\"empty-state\"><div class=\"empty-state-title\">Nothing here yet</div><div class=\"empty-state-text\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if currentStatus == "all" { if currentStatus == "all" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "your watchlist is empty. <a href=\"/\">search for anime</a> to get started.") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "Your watchlist is empty. <a href=\"/\">Search for anime</a> to get started.")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} else if currentStatus == "continuing" { } else if currentStatus == "continuing" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "no airing anime with watching or plan to watch status.") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "No airing anime with watching or plan to watch status.")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} else { } else {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "no anime in this category.") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "No anime in this category.")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -630,7 +630,7 @@ func Watchlist(entries []database.GetUserWatchListRow, layout string, currentSta
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "\" hx-swap=\"delete\" style=\"background: none; border: none; cursor: pointer;\">remove</button></td></tr>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "\" hx-swap=\"delete\" style=\"background: none; border: none; cursor: pointer;\">Remove</button></td></tr>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

10
static/css/style.css
View File

@@ -346,8 +346,8 @@ a.htmx-request {
/* Empty State */ /* Empty State */
.empty-state { .empty-state {
text-align: center; text-align: left;
padding: var(--space-2xl) var(--space-lg); padding: var(--space-md) 0;
} }
.empty-state-title { .empty-state-title {
@@ -1205,13 +1205,13 @@ a.htmx-request {
.notifications-subtitle { .notifications-subtitle {
color: var(--text-muted); color: var(--text-muted);
font-size: var(--text-sm); font-size: var(--text-sm);
margin: 0 0 var(--space-2xl) 0; margin: 0 0 var(--space-lg) 0;
} }
.no-notifications { .no-notifications {
text-align: center; text-align: left;
color: var(--text-muted); color: var(--text-muted);
padding: var(--space-2xl); padding: var(--space-md) 0;
} }
.no-notifications .hint { .no-notifications .hint {