feat: mark source as read — split button with popover

Add ability to mark all items from a specific feed/source as read at once,
instead of clicking each item individually. The mark-read button becomes a
split button group with a caret that opens a popover offering "Mark [source]
as read". Items without a feedId (AP items) keep the simple button.

Confab-Link: http://localhost:8080/sessions/a477883d-4aef-4013-983c-ce3d3157cfba
This commit is contained in:
Ricardo
2026-03-11 16:08:53 +01:00
parent 5037ff3d8f
commit e48335da2c
7 changed files with 294 additions and 2 deletions

View File

@@ -4,6 +4,7 @@
#}
<article class="item-card{% if item._is_read %} item-card--read{% endif %}"
data-item-id="{{ item._id }}"
data-feed-id="{{ item._feedId or '' }}"
data-is-read="{{ item._is_read | default(false) }}">
{# Context bar for interactions (Aperture pattern) #}
@@ -198,6 +199,33 @@
<span class="visually-hidden">Bookmark</span>
</a>
{% if not item._is_read %}
{% if item._feedId %}
<span class="item-actions__mark-read-group">
<button type="button"
class="item-actions__button item-actions__mark-read"
data-action="mark-read"
data-item-id="{{ item._id }}"
{% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
{% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}
title="Mark as read">
{{ icon("checkboxChecked") }}
<span class="visually-hidden">Mark read</span>
</button>
<button type="button"
class="item-actions__button item-actions__mark-read-caret"
aria-label="More mark-read options"
title="More options">&#9662;</button>
<div class="item-actions__mark-read-popover" hidden>
<button type="button"
class="item-actions__mark-source-read"
data-feed-id="{{ item._feedId }}"
{% if item._channelUid %}data-channel-uid="{{ item._channelUid }}"{% endif %}
{% if item._channelId %}data-channel-id="{{ item._channelId }}"{% endif %}>
Mark {{ item._source.name or item.author.name or "source" }} as read
</button>
</div>
</span>
{% else %}
<button type="button"
class="item-actions__button item-actions__mark-read"
data-action="mark-read"
@@ -209,6 +237,7 @@
<span class="visually-hidden">Mark read</span>
</button>
{% endif %}
{% endif %}
{% if application.readlaterEndpoint %}
<button type="button"
class="item-actions__button item-actions__save-later"