svemagie/indiekit-endpoint-microsub
1
0
Fork 0
mirror of https://github.com/svemagie/indiekit-endpoint-microsub.git synced 2026-04-02 15:35:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: mark source as read — split button with popover

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

52
assets/styles.css
View File

@@ -416,7 +416,57 @@
color: var(--color-background);
}
/* Mark as read button */
/* Mark as read — split button group */
.item-actions__mark-read-group {
display: inline-flex;
margin-left: auto;
position: relative;
}
.item-actions__mark-read-group .item-actions__mark-read {
border-bottom-right-radius: 0;
border-right: 0;
border-top-right-radius: 0;
margin-left: 0;
}
.item-actions__mark-read-caret {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
font-size: 0.625rem;
padding: var(--space-xs) 6px;
}
.item-actions__mark-read-popover {
background: var(--color-background);
border: 1px solid var(--color-offset-active);
border-radius: var(--border-radius);
bottom: calc(100% + 4px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
padding: var(--space-xs);
position: absolute;
right: 0;
white-space: nowrap;
z-index: 10;
}
.item-actions__mark-source-read {
background: transparent;
border: 0;
border-radius: var(--border-radius);
color: var(--color-text);
cursor: pointer;
font-size: var(--font-size-small);
padding: var(--space-xs) var(--space-s);
text-align: left;
width: 100%;
}
.item-actions__mark-source-read:hover {
background: var(--color-offset);
}
/* Mark as read button (standalone, no split group) */
.item-actions__mark-read {
margin-left: auto;
}