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

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

Feature: followers list with delivery health for cleanup

Adds a /followers page (new Fediverse tab) listing remote accounts that
follow you, each with its last SUCCESSFUL delivery timestamp so dead accounts
surface for manual pruning. New ap_followers columns last_delivery_at /
last_error_at (additive migration) are stamped in deliverWithRetry and the
retry-queue worker on success / final give-up. Never-delivered and failing
accounts sort to the top and are highlighted; a Remove button drops the local
follower row after a manual check. i18n added for NL/EN/DE.

Co-Authored-By: Claude Opus 4.8 <noreply@…>

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