source: Klonkt/src/views/pages/timeline.ejs@ df0516a

<div class="tl-wrap">
  <h1 class="tl-title"><%= t('tl.title') %></h1>
  <p class="tl-lead"><%= t('tl.lead') %></p>
  <% 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>
  <% } else { %>
    <ol class="tl-feed">
      <% timeline.forEach(function(p){ %>
        <li class="tl-item">
          <span class="tl-avatar"><% if (p.author_icon) { %><img src="<%= p.author_icon %>" alt="" loading="lazy"><% } else { %><%= (p.author_name || '?').charAt(0).toUpperCase() %><% } %></span>
          <div class="tl-itembody">
            <div class="tl-meta">
              <a class="tl-author" href="<%= p.author_url || p.author_uri %>" target="_blank" rel="nofollow noopener"><%= p.author_name %></a>
              <span class="tl-handle"><%= p.author_handle %></span>
              <% if (p.published || p.created_at) { %><span class="tl-time"><%= formatDateTime(p.published || p.created_at) %></span><% } %>
            </div>
            <div class="tl-content"><%- p.content %></div>
            <% var media = []; try { media = JSON.parse(p.media_json || '[]'); } catch (e) { media = []; } %>
            <% media.filter(function(m){ return !m.type || /^image\//.test(m.type); }).forEach(function(m){ %><img class="tl-media" src="<%= m.url %>" alt="" loading="lazy"><% }); %>
            <% if (p.url) { %><p class="tl-orig"><a href="<%= p.url %>" target="_blank" rel="nofollow noopener"><%= t('tl.view_original') %></a></p><% } %>
            <div class="tl-actions">
              <form method="post" action="/tijdlijn/like" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act" title="<%= t('fedi.likes') %>">⭐</button></form>
              <form method="post" action="/tijdlijn/boost" class="tl-act-form"><input type="hidden" name="note" value="<%= p.id %>"><input type="hidden" name="author" value="<%= p.author_uri %>"><button type="submit" class="tl-act" title="<%= t('fedi.boosts') %>">🔁</button></form>
              <button type="button" class="tl-act fedi-remote-reply-btn" data-fedi-uri="<%= p.id %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('fedi.remote_reply') %>">↩</button>
              <form method="post" action="/blokkeren/add" class="tl-act-form" onsubmit="return confirm('<%= t('tl.block') %>?');"><input type="hidden" name="target" value="<%= p.author_uri %>"><button type="submit" class="tl-act" title="<%= t('tl.block') %>">🚫</button></form>
            </div>
          </div>
        </li>
      <% }); %>
    </ol>
  <% } %>
</div>

<style>
  .tl-wrap { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
  .tl-title { margin: 0 0 .25rem; }
  .tl-lead { color: var(--ink-soft, #888); margin: 0 0 1.25rem; }
  .tl-sub { font-size: 1.1rem; margin: 1.75rem 0 .75rem; }
  .tl-follow { display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
  .tl-follow input { flex: 1; min-width: 200px; height: 2.4rem; padding: 0 .9rem; border-radius: 999px; font: inherit;
    border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent); background: color-mix(in srgb, var(--ink, #000) 4%, transparent); color: var(--ink, #000); }
  .tl-foll-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
  .tl-foll { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 12px; background: color-mix(in srgb, var(--ink, #000) 4%, transparent); }
  .tl-foll-av, .tl-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: color-mix(in srgb, var(--accent, #888) 20%, transparent); color: var(--accent, #555); }
  .tl-foll-av img, .tl-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .tl-foll-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .tl-foll-handle, .tl-handle { color: var(--ink-soft, #888); font-size: .82rem; }
  .tl-pending { font-size: .72rem; color: var(--ink-soft, #999); }
  .tl-unfollow { background: none; border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent); border-radius: 8px; padding: .25rem .6rem; font-size: .8rem; color: var(--ink-soft, #888); cursor: pointer; }
  .tl-unfollow:hover { color: var(--ink, #000); }
  .tl-empty { color: var(--ink-soft, #888); }
  .tl-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
  .tl-item { display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent); background: color-mix(in srgb, var(--ink, #000) 3%, transparent); }
  .tl-itembody { flex: 1; min-width: 0; }
  .tl-meta { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
  .tl-author { font-weight: 600; color: var(--ink, inherit); text-decoration: none; }
  .tl-author:hover { text-decoration: underline; }
  .tl-time { color: var(--ink-soft, #999); font-size: .8rem; margin-left: auto; }
  .tl-content { margin: .3rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
  .tl-content p { margin: .25rem 0; } .tl-content p:first-child { margin-top: 0; }
  .tl-media { max-width: 100%; height: auto; border-radius: 10px; margin: .5rem 0 0; display: block; }
  .tl-orig { margin: .5rem 0 0; font-size: .82rem; }
  .tl-orig a { color: var(--accent, #06c); }
  .tl-actions { display: flex; gap: .35rem; margin-top: .55rem; }
  .tl-act-form { margin: 0; }
  .tl-act { background: none; border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); border-radius: 999px; padding: .2rem .6rem; cursor: pointer; font-size: .9rem; color: var(--ink-soft, #888); }
  .tl-act:hover { color: var(--ink, #000); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent); }
</style>

<script>
(function(){
  if (window.__fediRemoteWired) return; window.__fediRemoteWired = true;
  var current = null, currentBtn = null;
  function close(){ if (current) { current.remove(); current = null; currentBtn = null; } }
  function go(raw, uri){ var d=(raw||'').trim().replace(/^@?[^@\s]*@/,'').replace(/^https?:\/\//i,'').replace(/\/.*$/,'').trim(); if(d) location.href='https://'+d+'/authorize_interaction?uri='+encodeURIComponent(uri||''); }
  function place(f, b){ var r=b.getBoundingClientRect(); f.style.top=(r.bottom+window.scrollY+6)+'px'; f.style.left=Math.max(8, Math.min(r.left+window.scrollX, window.scrollX+window.innerWidth-340))+'px'; }
  document.addEventListener('click', function(e){
    if (e.target.closest && e.target.closest('.fedi-remote-cancel')) { close(); return; }
    if (current && e.target.closest && e.target.closest('.fedi-remote-form')) return;
    var b = e.target.closest && e.target.closest('.fedi-remote-reply-btn');
    if (b) {
      e.preventDefault();
      if (currentBtn === b) { close(); return; }
      close();
      var f = document.createElement('form'); f.className='fedi-remote-form'; f.dataset.uri = b.getAttribute('data-fedi-uri')||'';
      f.innerHTML = '<input type="text" autocomplete="off" spellcheck="false"><button type="submit" class="btn btn-primary fedi-remote-go" aria-label="ok">&rarr;</button><button type="button" class="fedi-remote-cancel" aria-label="x">&times;</button>';
      f.querySelector('input').placeholder = b.getAttribute('data-fedi-ph') || 'mastodon.social';
      document.body.appendChild(f); place(f, b); current=f; currentBtn=b; f.querySelector('input').focus();
      return;
    }
    if (current) close();
  });
  document.addEventListener('submit', function(e){ var f=e.target.closest && e.target.closest('.fedi-remote-form'); if(!f) return; e.preventDefault(); go(f.querySelector('input').value, f.dataset.uri); });
  document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
  window.addEventListener('scroll', close, true);
})();
</script>