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

<%# Shared tab bar for the unified Fediverse section. Owner/admin-only.
    Param: active = 'feed' | 'connect' | 'berichten' | 'blokkeren'
    (legacy values 'following'/'followers' → Connect, 'reacties'/'meldingen' → Berichten).
    All tabs share the content width equally (flex:1) and always fit (ellipsis).
    "Back to site" lives in the top nav, not here. %>
<% var _a = (typeof active !== 'undefined') ? active : ''; %>
<% var _nu = (typeof notifUnread !== 'undefined') ? notifUnread : 0; %>
<nav class="fedi-tabs" aria-label="Fediverse">
  <a href="/news" class="fedi-tab<%= _a === 'feed' ? ' is-active' : '' %>"
     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>
  <a href="/connect" class="fedi-tab<%= (_a === 'connect' || _a === 'following' || _a === 'followers') ? ' is-active' : '' %>"
     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>
  <a href="/messages" class="fedi-tab<%= (_a === 'berichten' || _a === 'reacties' || _a === 'meldingen') ? ' is-active' : '' %>"
     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>
  <a href="/blocking" class="fedi-tab<%= _a === 'blokkeren' ? ' is-active' : '' %>"
     hx-get="/blocking?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/blocking" hx-indicator="#pcms-loading"><%= t('blk.title') %></a>
</nav>
<style>
/* All 5 tabs share the width equally and always fit (truncate with ellipsis if needed). */
.fedi-tabs { display: flex; margin: 0 0 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
.fedi-tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: .6rem .4rem; text-decoration: none; font-weight: 600; font-size: .95rem;
  color: var(--ink-soft, #888); border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.fedi-tab:hover { color: var(--ink, #000); }
.fedi-tab.is-active { color: var(--accent, #06c); border-bottom-color: var(--accent, #06c); }
.fedi-tab-label { overflow: hidden; text-overflow: ellipsis; }
.fedi-tab-badge { flex: 0 0 auto; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
  background: var(--accent, #e8b04b); color: #fff; font-size: .66rem; line-height: 1.5; text-align: center; }
@media (max-width: 520px) { .fedi-tab { padding: .55rem .25rem; font-size: .82rem; } }
@media (max-width: 380px) { .fedi-tab { font-size: .74rem; } }
</style>