Changeset 9e5438e in Klonkt for src/views

Timestamp:

06/26/2026 01:50:51 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

5e3be97

Parents:

8334d27

Message:

feat(fedi): unify Timeline/Following/Replies/Notifications/Blocking under one tabbed Fediverse section

Shared responsive fedi-tabs bar (5 tabs + back-to-site) on all fediverse pages, with
htmx nav so switching tabs swaps #pcms-main (feels like one page; URL stays bookmarkable
per tab; tab bar scrolls horizontally on narrow screens). Added a 'Fediverse' entry to
the user dropdown + mobile sheet (-> /tijdlijn), removed the separate Timeline nav icon
(kept the notification bell). Replaced the old 2-tab tl-tabs (removed). i18n nav.fediverse
+ tl.tab_replies (nl/en/de).

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

Location:

src/views

Files:

• pages/authorize-interaction.ejs (modified) (1 diff)
• pages/blocks.ejs (modified) (1 diff)
• pages/fedi-notifications.ejs (modified) (1 diff)
• pages/timeline.ejs (modified) (1 diff)
• pages/volgend.ejs (modified) (1 diff)
• partials/fedi-tabs.ejs (added)
• partials/profile-sheet.ejs (modified) (1 diff)
• partials/tl-tabs.ejs (deleted)
• partials/topnav.ejs (modified) (2 diffs)

src/views/pages/authorize-interaction.ejs

@@ -1 +1 @@
 <div class="auth-interact">
   <% if (typeof manage !== 'undefined' && manage) { %>
+    <%- include('../partials/fedi-tabs', { active: 'reacties' }) %>
     <h1 class="auth-interact-title"><%= t('fedi.manage_title') %></h1>
     <% if (!manage.length) { %>

src/views/pages/blocks.ejs

@@ -1 +1 @@
 <div class="bl-wrap">
+  <%- include('../partials/fedi-tabs', { active: 'blokkeren' }) %>
   <h1 class="bl-title"><%= t('blk.title') %></h1>
   <p class="bl-lead"><%= t('blk.lead') %></p>

src/views/pages/fedi-notifications.ejs

@@ -1 +1 @@
 <div class="nt-wrap">
-  <p class="fedi-back"><a class="btn btn-primary" href="/"><%= t('nav.back_to_site') %></a></p>
+  <%- include('../partials/fedi-tabs', { active: 'meldingen' }) %>
   <h1 class="nt-title"><%= t('notif.title') %></h1>
   <% if (!items || !items.length) { %>

src/views/pages/timeline.ejs

@@ -1 +1 @@
 <div class="tl-wrap">
-  <p class="fedi-back"><a class="btn btn-primary" href="/"><%= t('nav.back_to_site') %></a></p>
+  <%- include('../partials/fedi-tabs', { active: 'feed' }) %>
   <h1 class="tl-title"><%= t('tl.title') %></h1>
   <p class="tl-lead"><%= t('tl.lead') %></p>
-  <%- include('../partials/tl-tabs', { active: 'feed' }) %>
   <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
   <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>

src/views/pages/volgend.ejs

@@ -1 +1 @@
 <div class="tl-wrap">
+  <%- include('../partials/fedi-tabs', { active: 'following' }) %>
   <h1 class="tl-title"><%= t('tl.title') %></h1>
   <p class="tl-lead"><%= t('tl.lead') %></p>
-  <%- include('../partials/tl-tabs', { active: 'following' }) %>
   <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
   <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>

src/views/partials/profile-sheet.ejs

@@ -67 +67 @@
         <a href="/tijdlijn" class="profile-sheet-item" role="menuitem" data-close-sheet
            hx-get="/tijdlijn?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/tijdlijn" hx-indicator="#pcms-loading">
-          <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
-          <span class="psi-label"><%= t('tl.title') %></span>
+          <svg class="psi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+          <span class="psi-label"><%= t('nav.fediverse') %></span>
           <svg class="psi-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
         </a>

src/views/partials/topnav.ejs

@@ -97 +97 @@
           </div>
         </details>
-      <% } %>
-
-      <% if (user && typeof canManageFedi !== 'undefined' && canManageFedi) { %>
-        <a class="nav-btn" href="/tijdlijn" aria-label="<%= t('tl.title') %>" title="<%= t('tl.title') %>"
-           hx-get="/tijdlijn?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/tijdlijn" hx-indicator="#pcms-loading">
-          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
-        </a>
       <% } %>
 
@@ -162 +155 @@
                 </a>
               <% } %>
+              <% if (typeof canManageFedi !== 'undefined' && canManageFedi) { %>
+                <a href="/tijdlijn" role="menuitem" class="udi"
+                   hx-get="/tijdlijn?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
+                   hx-push-url="/tijdlijn" hx-indicator="#pcms-loading">
+                  <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+                  <span><%= t('nav.fediverse') %></span>
+                </a>
+              <% } %>
             </div>
             <div class="user-dropdown-divider" aria-hidden="true"></div>