feat: add edit/delete buttons to list views and inline privacy toggle

Fave cards in the list and profile views now show edit, delete, and
privacy toggle buttons directly — no need to open the detail page first.

- New POST /faves/{id}/privacy route with HTMX privacy toggle partial
- New UpdatePrivacy store method for single-column update
- fave_list.html: edit link, HTMX delete, privacy toggle on every card
- profile.html: edit/delete for owner's own cards
- privacy_toggle.html: new HTMX partial that swaps inline on toggle
- CSS: compact .fave-card-actions styles

The existing handleFaveDelete already returns empty 200 for HTMX
requests, so hx-target="closest article" hx-swap="outerHTML" removes
the card from DOM seamlessly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-04-07 10:17:46 +02:00
commit b186fb4bc5
9 changed files with 360 additions and 3 deletions

View file

@ -92,6 +92,40 @@
padding: 0 1rem 0.5rem;
}
/* Card action buttons (edit/delete/privacy toggle) */
.fave-card-actions {
display: flex;
gap: 0.5rem;
padding: 0 1rem 0.5rem;
align-items: center;
}
.fave-action-link {
font-size: 0.8rem;
text-decoration: none;
}
.fave-action-btn {
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
margin: 0;
border: 1px solid var(--pico-muted-border-color);
background: transparent;
cursor: pointer;
border-radius: var(--pico-border-radius);
color: inherit;
}
.fave-action-btn:hover {
border-color: var(--pico-primary);
color: var(--pico-primary);
}
.fave-action-btn.secondary:hover {
border-color: var(--pico-del-color);
color: var(--pico-del-color);
}
/* Privacy badge */
.badge-private {
background: var(--pico-muted-border-color);

View file

@ -21,9 +21,6 @@
<a href="{{basePath}}/faves/{{.ID}}">
<strong>{{.Description}}</strong>
</a>
{{if eq .Privacy "private"}}
<small class="badge-private" aria-label="Privat">Privat</small>
{{end}}
</header>
{{if .Tags}}
<footer>
@ -32,6 +29,27 @@
{{end}}
</footer>
{{end}}
<footer class="fave-card-actions">
<span class="privacy-toggle" id="privacy-{{.ID}}">
<button
hx-post="{{basePath}}/faves/{{.ID}}/privacy"
hx-target="#privacy-{{.ID}}"
hx-swap="outerHTML"
class="fave-action-btn {{if eq .Privacy "private"}}secondary{{end}}"
title="{{if eq .Privacy "public"}}Gjør privat{{else}}Gjør offentlig{{end}}"
>{{if eq .Privacy "public"}}Offentlig{{else}}Privat{{end}}</button>
</span>
<a href="{{basePath}}/faves/{{.ID}}/edit" class="fave-action-link"
aria-label="Rediger {{.Description}}">Rediger</a>
<button
hx-delete="{{basePath}}/faves/{{.ID}}"
hx-confirm="Er du sikker på at du vil slette denne favoritten?"
hx-target="closest article"
hx-swap="outerHTML"
class="fave-action-btn secondary"
aria-label="Slett {{.Description}}"
>Slett</button>
</footer>
</article>
{{end}}
</div>

View file

@ -75,6 +75,20 @@
{{end}}
</footer>
{{end}}
{{if $d.IsOwner}}
<footer class="fave-card-actions">
<a href="{{basePath}}/faves/{{.ID}}/edit" class="fave-action-link"
aria-label="Rediger {{.Description}}">Rediger</a>
<button
hx-delete="{{basePath}}/faves/{{.ID}}"
hx-confirm="Er du sikker på at du vil slette denne favoritten?"
hx-target="closest article"
hx-swap="outerHTML"
class="fave-action-btn secondary"
aria-label="Slett {{.Description}}"
>Slett</button>
</footer>
{{end}}
</article>
{{end}}
</div>

View file

@ -0,0 +1,10 @@
<span class="privacy-toggle" id="privacy-{{.ID}}">
<button
hx-post="{{basePath}}/faves/{{.ID}}/privacy"
hx-target="#privacy-{{.ID}}"
hx-swap="outerHTML"
class="fave-action-btn {{if eq .Privacy "private"}}secondary{{end}}"
aria-label="{{if eq .Privacy "public"}}Gjør privat{{else}}Gjør offentlig{{end}}"
title="{{if eq .Privacy "public"}}Gjør privat{{else}}Gjør offentlig{{end}}"
>{{if eq .Privacy "public"}}Offentlig{{else}}Privat{{end}}</button>
</span>