refactor(templates): simplify BooksGrid component

Remove wrapper div and pagination from BooksGrid component.
The component now only renders book cards, making it more reusable.

Changes:
- Remove books-grid wrapper div from BooksGrid
- Remove pagination controls from BooksGrid
- Component now only renders book card grid

This allows the parent template to control the wrapper div
placement and pagination location, which is needed for proper
HTMX targeting on the bookshelf page.

Related: Issue with pagination displaying inside grid instead of below
This commit is contained in:
2026-03-27 15:52:02 -04:00
parent 0c5831f9c0
commit 804d765988
2 changed files with 1 additions and 83 deletions
-31
View File
@@ -3,7 +3,6 @@ package templates
import "bookhoard/internal/handlers"
templ BooksGrid(books []handlers.BookInfo, limit int, offset int, count int, currentLibraryID string) {
<div id="books-grid" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
if len(books) > 0 {
for _, book := range books {
@BookCard(book)
@@ -15,34 +14,4 @@ templ BooksGrid(books []handlers.BookInfo, limit int, offset int, count int, cur
<p class="text-sm">Try adjusting your filters or add some books to your library.</p>
</div>
}
</div>
<!-- Pagination -->
<div id="pagination" class="mt-6 flex justify-center gap-2">
if count > 0 {
<button
type="button"
class="px-4 py-2 rounded-lg border disabled:opacity-50"
style="border-color: var(--border); color: var(--text-primary);"
hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset - limit }"
hx-target="#books-grid"
hx-include="#filter-form"
disabled?={ offset <= 0 }
>
Previous
</button>
<span class="px-4 py-2" style="color: var(--text-secondary);">
Page { offset / limit + 1 }
</span>
<button
class="px-4 py-2 rounded-lg border disabled:opacity-50"
style="border-color: var(--border); color: var(--text-primary);"
hx-get="/api/media-items/search?library_id={ currentLibraryID }&limit={ limit }&offset={ offset + limit }"
hx-target="#books-grid"
hx-include="#filter-form"
disabled?={ offset+limit >= count }
>
Next
</button>
}
</div>
}