Changeset 46f3dd6 in Klonkt for src/views

Timestamp:

06/26/2026 09:05:28 AM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

8ef8c3e

Parents:

2c22bb5

Message:

feat(fediverse): split Tijdlijn (feed) from Volgend (following) + put Timeline in the menu

Phase 3 of the Cirkels-on-AP rework. /tijdlijn is now just the reading feed;
following management (follow box, follow list, auto-boost toggles) moves to a new
/volgend page. A shared tab nav switches between them. Timeline gets a top-bar
button next to the bell on desktop and a Tijdlijn entry in the mobile profile
sheet (both admin-only via canManageFedi). follow/unfollow/autoboost now redirect
to /volgend. nl/en/de.

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

Location:

src/views

Files:

• pages/timeline.ejs (modified) (1 diff)
• pages/volgend.ejs (added)
• partials/profile-sheet.ejs (modified) (1 diff)
• partials/tl-tabs.ejs (added)
• partials/topnav.ejs (modified) (1 diff)

src/views/pages/timeline.ejs

@@ -2 +2 @@
   <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><% } %>
 
-  <form method="post" action="/tijdlijn/follow" class="tl-follow">
-    <input type="text" name="handle" placeholder="@naam@server.social" autocomplete="off" spellcheck="false" required>
-    <button type="submit" class="btn btn-primary"><%= t('tl.follow_btn') %></button>
-    <label class="tl-follow-ab" title="<%= t('tl.autoboost_hint') %>"><input type="checkbox" name="auto_boost" value="1"> 🔁 <%= t('tl.autoboost_follow') %></label>
-  </form>
-
-  <% if (following && following.length) { %>
-    <h2 class="tl-sub"><%= t('tl.following') %> (<%= following.length %>)</h2>
-    <ul class="tl-foll-list">
-      <% following.forEach(function(f){ %>
-        <li class="tl-foll">
-          <span class="tl-foll-av"><% if (f.icon) { %><img src="<%= f.icon %>" alt=""><% } else { %><%= (f.name || '?').charAt(0).toUpperCase() %><% } %></span>
-          <span class="tl-foll-meta">
-            <a href="<%= f.url || f.actor_uri %>" target="_blank" rel="nofollow noopener"><%= f.name || f.handle %></a>
-            <span class="tl-foll-handle"><%= f.handle %></span>
-            <% if (f.status === 'pending') { %><span class="tl-pending"><%= t('tl.pending') %></span><% } %>
-          </span>
-          <form method="post" action="/tijdlijn/autoboost" class="tl-foll-ab" title="<%= t('tl.autoboost_hint') %>">
-            <input type="hidden" name="actor_uri" value="<%= f.actor_uri %>">
-            <label><input type="checkbox" name="auto_boost" value="1" <%= f.auto_boost ? 'checked' : '' %> onchange="this.form.submit()"> 🔁 <%= t('tl.autoboost') %></label>
-          </form>
-          <form method="post" action="/tijdlijn/unfollow"><input type="hidden" name="actor_uri" value="<%= f.actor_uri %>"><button type="submit" class="tl-unfollow"><%= t('tl.unfollow') %></button></form>
-        </li>
-      <% }); %>
-    </ul>
-  <% } %>
-
-  <h2 class="tl-sub"><%= t('tl.feed') %></h2>
   <% if (!timeline || !timeline.length) { %>
     <p class="tl-empty"><%= t('tl.empty') %></p>

src/views/partials/profile-sheet.ejs

@@ -63 +63 @@
         </a>
       </li>
+      <% if (typeof canManageFedi !== 'undefined' && canManageFedi) { %>
+      <li role="none">
+        <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-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>
+      </li>
+      <% } %>
       <% if (typeof canSeeBeheer !== 'undefined' && canSeeBeheer) { %>
       <li role="none">

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>
       <% } %>