Changeset 98ceadd in Klonkt for src/views/pages/volgend.ejs

Timestamp:

06/26/2026 01:23:16 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

fda08c2

Parents:

54d2f98

Message:

feat(volgend): explain box above the follow options (what Featured / boost-5 do)

A 'What do these options do?' box above the follow form clarifies the difference:
✨ Featured = their new posts keep showing in your Circle (local, ongoing, no fediverse
boost); 🔁 boost latest 5 = a one-time boost to the fediverse. Also reworded the
Featured hint to say 'keep showing / ongoing' so it's clearly not 'the latest 5'.
i18n nl/en/de (tl.explain_heading + tl.autoboost_hint).

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

File:

• src/views/pages/volgend.ejs (modified) (2 diffs)

src/views/pages/volgend.ejs

@@ -5 +5 @@
   <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
   <% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><%= error %></div><% } %>
+
+  <div class="tl-explain">
+    <h2 class="tl-explain-h"><%= t('tl.explain_heading') %></h2>
+    <p><span class="tl-explain-tag">✨ <%= t('tl.autoboost') %></span> — <%= t('tl.autoboost_hint') %></p>
+    <p><span class="tl-explain-tag">🔁 <%= t('tl.boost5_follow') %></span> — <%= t('tl.boost5_hint') %></p>
+  </div>
 
   <form method="post" action="/tijdlijn/follow" class="tl-follow">
@@ -41 +47 @@
   .tl-title { margin: 0 0 .25rem; }
   .tl-lead { color: var(--ink-soft, #888); margin: 0 0 1.25rem; }
+  .tl-explain { margin: 0 0 1.25rem; padding: .85rem 1rem; border-radius: 12px;
+    background: color-mix(in srgb, var(--accent, #888) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent, #888) 22%, transparent); }
+  .tl-explain-h { font-size: .95rem; margin: 0 0 .5rem; }
+  .tl-explain p { margin: .3rem 0; font-size: .85rem; color: var(--ink-soft, #888); line-height: 1.5; }
+  .tl-explain-tag { font-weight: 600; color: var(--ink, inherit); white-space: nowrap; }
   .tl-sub { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }
   .tl-follow { display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; align-items: center; }