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

ui: extract infinite anime list and catalog item to shared ui component

Browse Source
This commit is contained in:
mkelvers
2026-04-08 18:08:37 +02:00
parent dfb61bfe8c
commit 0f338ba9ee
4 changed files with 55 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
internal/shared/ui/anime_list.templ Normal file
View File

@@ -0,0 +1,49 @@
package ui
import (
"fmt"
"mal/internal/jikan"
)
templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, containerID string) {
for _, anime := range animes {
<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@CatalogItem(anime)
</div>
}
if hasNext {
<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
}
<script>
(function() {
const containerID = "{" + containerID + "}"; // fallback for string concat in JS
const actualID = containerID.replace(/[{}]/g, '');
const container = document.getElementById(actualID) || document;
const items = container.querySelectorAll('.catalog-item[data-id]');
const seen = new Set();
items.forEach(item => {
const id = item.getAttribute('data-id');
if (id) {
if (seen.has(id)) {
item.remove();
} else {
seen.add(id);
}
}
});
})();
</script>
}
templ CatalogItem(anime jikan.Anime) {
<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
if anime.ImageURL() != "" {
<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
} else {
<div class="no-image">No image</div>
}
</a>
<div class="catalog-title">
{ anime.DisplayTitle() }
</div>
}

45
internal/templates/catalog.templ
View File

@@ -14,49 +14,6 @@ templ Catalog() {
}
}
templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, containerID string) {
for _, anime := range animes {
<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@CatalogItem(anime)
</div>
}
if hasNext {
<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
}
<script>
(function() {
const containerID = "{" + containerID + "}"; // fallback for string concat in JS
const actualID = containerID.replace(/[{}]/g, '');
const container = document.getElementById(actualID) || document;
const items = container.querySelectorAll('.catalog-item[data-id]');
const seen = new Set();
items.forEach(item => {
const id = item.getAttribute('data-id');
if (id) {
if (seen.has(id)) {
item.remove();
} else {
seen.add(id);
}
}
});
})();
</script>
}
templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))), "catalog-content")
}
templ CatalogItem(anime jikan.Anime) {
<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
if anime.ImageURL() != "" {
<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
} else {
<div class="no-image">No image</div>
}
</a>
<div class="catalog-title">
{ anime.DisplayTitle() }
</div>
@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))), "catalog-content")
}

10
internal/templates/discovery.templ
View File

@@ -1,6 +1,7 @@
package templates
import "mal/internal/jikan"
import "mal/internal/shared/ui"
import "fmt"
templ Discover() {
@@ -27,11 +28,8 @@ templ Discover() {
</button>
</div>
<div class="catalog-grid" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
<div class="loading-indicator" style="grid-column: 1 / -1;">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<span>Loading discover</span>
<div style="grid-column: 1 / -1;">
@ui.LoadingIndicator("Loading discover")
</div>
</div>
</div>
@@ -39,5 +37,5 @@ templ Discover() {
}
templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
}

2
internal/templates/index.templ
View File

@@ -35,5 +35,5 @@ templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, has
}
templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
}