source: Klonkt/src/views/partials/fedi-tabs.ejs@ 2dd1dc4

main
Last change on this file since 2dd1dc4 was f1a23b8, checked in by Robin <roboburr@…>, 8 weeks ago

Feature: Messages merges Replies + Notifications into one inbox

/messages replaces /fediverse (manage own replies) and /notifications with a
single stream, per the Robin+Bart decision. getMessages() merges notifications
with your outbound replies ('sent' items, edit/delete via their outbox routes)
and collapses consecutive likes/boosts on the same post into one grouped item.
Design refresh: filter chips (All/Conversations/Activity/Sent, client-side),
avatars with a type-dot overlay, sent items with a direction indicator and
accent border, a lock badge on private replies (visibility now flows through
getNotifications along with actor icons), and unread dots via the existing
seen-watermark (read before marking seen). The two tabs collapse into one
Messages tab carrying the badge; the bookmarklet moved to /messages; old routes
redirect. Also fixes a latent NaN-unsafe date sort in getNotifications that
scrambled ordering when a row had a garbled created_at (seen live). i18n
NL/EN/DE. 4 new tests (67 green); verified in a browser incl. grouping, chips,
private badge, edit/delete forms. Beads: klonkt-demo-pkg. Old
fedi-notifications.ejs and the authorize-interaction manage block are now
unreachable; cleanup tracked in klonkt-demo-bk8.

Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 2.8 KB
Line 
1<%# Shared tab bar for the unified Fediverse section. Owner/admin-only.
2 Param: active = 'feed' | 'connect' | 'berichten' | 'blokkeren'
3 (legacy values 'following'/'followers' → Connect, 'reacties'/'meldingen' → Berichten).
4 All tabs share the content width equally (flex:1) and always fit (ellipsis).
5 "Back to site" lives in the top nav, not here. %>
6<% var _a = (typeof active !== 'undefined') ? active : ''; %>
7<% var _nu = (typeof notifUnread !== 'undefined') ? notifUnread : 0; %>
8<nav class="fedi-tabs" aria-label="Fediverse">
9 <a href="/news" class="fedi-tab<%= _a === 'feed' ? ' is-active' : '' %>"
10 hx-get="/news?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/news" hx-indicator="#pcms-loading"><%= t('tl.tab_feed') %></a>
11 <a href="/connect" class="fedi-tab<%= (_a === 'connect' || _a === 'following' || _a === 'followers') ? ' is-active' : '' %>"
12 hx-get="/connect?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/connect" hx-indicator="#pcms-loading"><%= t('tl.tab_connect') %></a>
13 <a href="/messages" class="fedi-tab<%= (_a === 'berichten' || _a === 'reacties' || _a === 'meldingen') ? ' is-active' : '' %>"
14 hx-get="/messages?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/messages" hx-indicator="#pcms-loading"><span class="fedi-tab-label"><%= t('msg.tab') %></span><% if (_nu > 0) { %><span class="fedi-tab-badge"><%= _nu > 9 ? '9+' : _nu %></span><% } %></a>
15 <a href="/blocking" class="fedi-tab<%= _a === 'blokkeren' ? ' is-active' : '' %>"
16 hx-get="/blocking?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/blocking" hx-indicator="#pcms-loading"><%= t('blk.title') %></a>
17</nav>
18<style>
19/* All 5 tabs share the width equally and always fit (truncate with ellipsis if needed). */
20.fedi-tabs { display: flex; margin: 0 0 1.25rem;
21 border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
22.fedi-tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
23 padding: .6rem .4rem; text-decoration: none; font-weight: 600; font-size: .95rem;
24 color: var(--ink-soft, #888); border-bottom: 2px solid transparent; margin-bottom: -1px;
25 display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
26.fedi-tab:hover { color: var(--ink, #000); }
27.fedi-tab.is-active { color: var(--accent, #06c); border-bottom-color: var(--accent, #06c); }
28.fedi-tab-label { overflow: hidden; text-overflow: ellipsis; }
29.fedi-tab-badge { flex: 0 0 auto; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
30 background: var(--accent, #e8b04b); color: #fff; font-size: .66rem; line-height: 1.5; text-align: center; }
31@media (max-width: 520px) { .fedi-tab { padding: .55rem .25rem; font-size: .82rem; } }
32@media (max-width: 380px) { .fedi-tab { font-size: .74rem; } }
33</style>
Note: See TracBrowser for help on using the repository browser.