sulthan
2c3d687b6d
Adds the three UI mutation endpoints (favourite toggle, manual chapter override, delete) plus the card controls that call them via htmx. Each mutation is a read-modify-write through Store.Get/Upsert so Upsert alone decides whether updated_at moves — favouriting must not reorder the list, only real reading progress should. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
38 lines
1.7 KiB
HTML
38 lines
1.7 KiB
HTML
{{define "card"}}
|
|
<article class="card" id="card-{{.Key}}" data-title="{{.Title}}">
|
|
<a class="cover" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">
|
|
{{if .Cover}}<img src="{{.Cover}}" alt="" loading="lazy">{{end}}
|
|
</a>
|
|
<div class="body">
|
|
<h3 class="title">{{.Title}}</h3>
|
|
<p class="meta">
|
|
<span class="site site-{{.Site}}">{{.Site}}</span>
|
|
<span class="chapter">Ch {{.LastChapter}}</span>
|
|
{{if .HasNewChapter}}<span class="new">NEW {{.LatestChapter}}</span>{{end}}
|
|
</p>
|
|
<div class="actions">
|
|
<a class="primary" href="{{.ContinueURL}}" target="_blank" rel="noopener noreferrer">Continue</a>
|
|
<button class="icon {{if .Favorite}}on{{end}}"
|
|
title="Favourite" aria-label="Toggle favourite"
|
|
hx-post="/ui/bookmarks/{{.Key}}/favorite"
|
|
hx-target="#card-{{.Key}}" hx-swap="outerHTML">
|
|
{{if .Favorite}}★{{else}}☆{{end}}
|
|
</button>
|
|
<button class="icon" title="Set chapter" aria-label="Set chapter"
|
|
onclick="toggleChapterForm('{{.Key}}')">✎</button>
|
|
<button class="icon danger" title="Remove" aria-label="Remove"
|
|
hx-delete="/ui/bookmarks/{{.Key}}"
|
|
hx-target="#card-{{.Key}}" hx-swap="outerHTML"
|
|
hx-confirm="Remove {{.Title}} from the list?">🗑</button>
|
|
</div>
|
|
<form class="chapter-form" id="chapter-form-{{.Key}}" hidden
|
|
hx-post="/ui/bookmarks/{{.Key}}/chapter"
|
|
hx-target="#card-{{.Key}}" hx-swap="outerHTML">
|
|
<input name="chapter" type="number" step="0.1" min="0"
|
|
value="{{.LastChapterNum}}" aria-label="Chapter number" required>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
{{end}}
|