Changeset 8ea3d0d in Klonkt

Timestamp:

06/16/2026 07:35:21 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

04a6b15

Parents:

1578f5d

Message:

Defaults: new sites grid + moderate; Circle page graphical header

(A) New-site defaults aligned with Robin's preference: feed_view_default
'timeline'->'grid' and comments_moderation_mode 'trust'->'moderate'. Set in
column defaults (fresh installs), siteEditableFields + createSite INSERT,
and ensurePrimarySite. Other defaults were already correct (public/index/
audio/switcher/search/archive on, login-to-comment off).
(B) /circle header redesigned: centred, graphical "connected circles"
motif in accent colour + chips with the avatars/names of the synced circle
sites.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Location:

src

Files:

• config/database.js (modified) (2 diffs)
• routes/admin-sites.js (modified) (3 diffs)
• routes/circle.js (modified) (1 diff)
• services/ensurePrimarySite.js (modified) (1 diff)
• views/pages/circle-feed.ejs (modified) (2 diffs)

src/config/database.js

@@ -44 +44 @@
   ensureColumn('users', 'readonly', 'INTEGER DEFAULT 0');
   // Site-level moderation toggle. 'trust' = auto-approve, 'moderate' = pending until reviewed.
-  ensureColumn('sites', 'comments_moderation_mode', "TEXT DEFAULT 'trust'");
+  ensureColumn('sites', 'comments_moderation_mode', "TEXT DEFAULT 'moderate'");
   // Per-site Prutter toggle: when off, DM endpoints/UI are hidden for that site.
   ensureColumn('sites', 'enable_prutter', 'INTEGER DEFAULT 1');
@@ -62 +62 @@
   ensureColumn('sites', 'profile_bio',     'TEXT');     // short bio for header
   ensureColumn('sites', 'profile_links',   'TEXT');     // JSON array [{platform, url}]
-  ensureColumn('sites', 'feed_view_default', "TEXT DEFAULT 'timeline'"); // timeline | grid
+  ensureColumn('sites', 'feed_view_default', "TEXT DEFAULT 'grid'"); // timeline | grid
   ensureColumn('sites', 'feed_view_switch',  'INTEGER DEFAULT 1');       // show switcher
   ensureColumn('sites', 'show_search',     'INTEGER DEFAULT 1');

src/routes/admin-sites.js

@@ -119 +119 @@
     enable_audio_player: 1,
     enable_prutter: 1,
-    feed_view_default: 'timeline',
+    comments_moderation_mode: 'moderate',
+    feed_view_default: 'grid',
     feed_view_switch: 1,
     show_search: 1,
@@ -191 +192 @@
       id, slug, title, description, tagline, owner_id,
       language, palette, accent, profile_photo,
-      is_public, robots_index, require_login_to_comment, enable_audio_player
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+      is_public, robots_index, require_login_to_comment, enable_audio_player,
+      feed_view_default, comments_moderation_mode
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
   `).run(
     siteId, slug,
@@ -207 +209 @@
     f.require_login_to_comment ? 1 : 0,
     (f.enable_audio_player !== undefined ? (f.enable_audio_player ? 1 : 0) : 1),
+    f.feed_view_default === 'timeline' ? 'timeline' : 'grid',
+    f.comments_moderation_mode === 'trust' ? 'trust' : 'moderate',
   );
 

src/routes/circle.js

@@ -58 +58 @@
   });
 
-  renderPage(req, res, 'pages/circle-feed', { pageTitle: 'Cirkel', bodyClass: 'on-cirkel', posts });
+  // Sites in de cirkel (alleen succesvol gesyncte = proto-compatibel) — voor de
+  // grafische header met avatars.
+  const sites = db.prepare('SELECT name, url, avatar FROM remote_actors ORDER BY name')
+    .all()
+    .map((s) => ({
+      name: s.name || 'Onbekend',
+      url: safeUrl(s.url),
+      avatar: safeUrl(s.avatar),
+    }));
+
+  renderPage(req, res, 'pages/circle-feed', { pageTitle: 'Cirkel', bodyClass: 'on-cirkel', posts, sites });
 });
 

src/services/ensurePrimarySite.js

@@ -39 +39 @@
       id, slug, title, description, tagline, owner_id,
       language, palette, accent, profile_photo,
-      is_public, robots_index, require_login_to_comment, enable_audio_player
-    ) VALUES (?, ?, ?, '', '', ?, 'nl', 'sage', '#c2410c', NULL, 1, 1, 0, 1)
+      is_public, robots_index, require_login_to_comment, enable_audio_player,
+      feed_view_default, comments_moderation_mode
+    ) VALUES (?, ?, ?, '', '', ?, 'nl', 'sage', '#c2410c', NULL, 1, 1, 0, 1, 'grid', 'moderate')
   `).run(siteId, slug, defaultTitle(), owner.id);
 

src/views/pages/circle-feed.ejs

@@ -1 @@
-<div class="container cirkel-head">
+<div class="container cirkel-hero">
+  <span class="cirkel-badge" aria-hidden="true">
+    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="32" y1="16" x2="17" y2="45"/>
+      <line x1="32" y1="16" x2="47" y2="45"/>
+      <line x1="17" y1="45" x2="47" y2="45"/>
+      <circle cx="32" cy="16" r="8" fill="currentColor" fill-opacity=".16"/>
+      <circle cx="17" cy="45" r="8" fill="currentColor" fill-opacity=".16"/>
+      <circle cx="47" cy="45" r="8" fill="currentColor" fill-opacity=".16"/>
+    </svg>
+  </span>
   <h1>Cirkel</h1>
   <p class="cirkel-sub">Wat er speelt bij de andere sites in mijn cirkel.</p>
+  <% if (typeof sites !== 'undefined' && sites && sites.length) { %>
+    <div class="cirkel-members">
+      <% sites.forEach(function(s){ %>
+        <% if (s.url) { %><a class="cirkel-member" href="<%= s.url %>" target="_blank" rel="noopener" title="<%= s.name %>"><% } else { %><span class="cirkel-member" title="<%= s.name %>"><% } %>
+          <span class="cirkel-avatar"<% if (s.avatar) { %> style="background-image:url('<%= s.avatar %>')"<% } %>><% if (!s.avatar) { %><%= (s.name || '?').charAt(0).toUpperCase() %><% } %></span>
+          <span class="cirkel-member-name"><%= s.name %></span>
+        <% if (s.url) { %></a><% } else { %></span><% } %>
+      <% }); %>
+    </div>
+  <% } %>
 </div>
 
@@ -37 +57 @@
 
 <style>
-.cirkel-head { margin-top: 2rem; }
-.cirkel-head h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: 0 0 .25rem; }
-.cirkel-sub { color: var(--ink-muted); margin: 0 0 1.5rem; }
-.cirkel-empty { color: var(--ink-muted); }
+.cirkel-hero { text-align: center; max-width: 640px; margin: 2.5rem auto 2rem; }
+.cirkel-badge { display: block; width: 60px; height: 60px; margin: 0 auto .6rem; color: var(--accent); }
+.cirkel-badge svg { width: 100%; height: 100%; }
+.cirkel-hero h1 { font-family: var(--font-display, serif); font-size: 2.4rem; margin: 0 0 .3rem; }
+.cirkel-sub { color: var(--ink-muted); margin: 0 0 1.25rem; font-size: 1.02rem; }
+.cirkel-members { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
+.cirkel-member { display: inline-flex; align-items: center; gap: .45rem;
+  padding: .28rem .8rem .28rem .3rem; border: 1px solid var(--rule); border-radius: 999px;
+  text-decoration: none; color: var(--ink); background: var(--paper-2);
+  transition: border-color .15s, transform .15s; }
+.cirkel-member:hover { border-color: var(--accent); transform: translateY(-1px); }
+.cirkel-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
+  background-size: cover; background-position: center; background-color: var(--accent);
+  color: #fff; display: inline-flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: .82rem; }
+.cirkel-member-name { font-size: .9rem; font-weight: 600; }
+.cirkel-empty { color: var(--ink-muted); text-align: center; margin: 2rem auto; }
 .cirkel-empty a { color: var(--accent); }
 </style>