Index: src/views/pages/search.ejs
===================================================================
--- src/views/pages/search.ejs	(revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8)
+++ src/views/pages/search.ejs	(revision 76bd53c87f8d2d93af80fc4939f7e485da07ecbc)
@@ -1,265 +1,9 @@
-<% const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; %>
-<% const _tracks = (typeof tracks !== 'undefined' && tracks) ? tracks : []; %>
-<% const _events = (typeof events !== 'undefined' && events) ? events : []; %>
-<% const _pages = (typeof pages !== 'undefined' && pages) ? pages : []; %>
-<div class="container search-page">
-  <h1><%= t('nav.search') %></h1>
+<%#
+  /search?q=... is geen eigen pagina meer met een eigen uiterlijk (Robins
+  ontwerp, 30-9): het is het zoekvlak, open, met de resultaten al op de server
+  gerenderd. Een gedeelde link en Enter zonder JavaScript komen zo op precies
+  hetzelfde beeld uit als de zoekbalk op elke andere pagina.
 
-  <form method="get" action="<%= _base %>/search" class="search-page-form">
-    <input
-      type="search"
-      name="q"
-      value="<%= query %>"
-      placeholder="<%= t('search.placeholder') %>"
-      autocomplete="off"
-      autofocus
-      aria-label="<%= t('nav.search') %>">
-    <button type="submit" class="btn btn-primary"><%= t('search.button') %></button>
-  </form>
-
-  <% if (queryError) { %>
-    <p class="search-error"><%= t('search.error') %></p>
-  <% } %>
-
-  <% if (query && !queryError) { %>
-    <p class="search-meta">
-      <%= t(total === 1 ? 'search.results_one' : 'search.results_other', { n: total, q: query }) %>
-    </p>
-  <% } %>
-
-  <%# Een geplakt adres is geen zoekterm maar een aanwijzing (shaer-utpi): het
-      object van de andere server staat bovenaan, met dezelfde knoppen als op
-      /authorize_interaction -- dezelfde partial, dus één render en één plek
-      waar een poort of een sanitizer kan wonen. %>
-  <% if (typeof remoteUri !== 'undefined' && remoteUri) { %>
-    <h2 class="search-section-title"><%= t('search.section_fediverse') %></h2>
-    <div class="auth-interact search-remote">
-      <% if (!mayLookup) { %>
-        <%# Ophalen is een uitgaand verzoek namens deze server; dat doen we niet
-            op verzoek van een willekeurige bezoeker. %>
-        <p class="auth-interact-note"><%= t('search.fedi_signin') %></p>
-      <% } else if (remote && remoteKind === 'note') { %>
-        <%- include('../partials/remote-object', { target: remote, uri: remoteUri, reacted: remoteReacted, siteTitle: siteTitle, cancelUrl: _base + '/search?q=' + encodeURIComponent(query) }) %>
-      <% } else if (remote && remoteKind === 'actor') { %>
-        <%- include('../partials/remote-actor', { actor: remote, siteTitle: siteTitle }) %>
-      <% } else { %>
-        <p class="auth-interact-note"><%= t('fedi.remote_notfound') %></p>
-      <% } %>
-    </div>
-    <%- include('../partials/fedi-interact-styles') %>
-  <% } %>
-
-  <% if (_tracks.length) { %>
-    <h2 class="search-section-title"><%= t('search.section_tracks') %></h2>
-    <% var _inPost = t('search.in_post'); /* t() vóór de loop ophalen: function(t) overschaduwt 'm */ %>
-    <div class="search-tracks">
-      <% _tracks.forEach(function(t) {
-           const tj = JSON.stringify({ id: t.id, url: t.url, title: t.title, artist: t.artist || '', cover: t.cover || '' })
-             .replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;'); %>
-        <div class="post-audio-track search-track" id="track-<%= t.id %>"
-             data-pcms-track-id="<%= t.id %>" data-pcms-track-url="<%= t.url %>"
-             data-pcms-track='<%- tj %>'>
-          <button type="button" class="pat-play" aria-label="Speel <%= t.title %>">
-            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 4l12 8-12 8z"/></svg>
-          </button>
-          <% if (t.cover) { %>
-            <span class="search-track-cover" style="background-image:url('<%= t.cover %>')" aria-hidden="true"></span>
-          <% } %>
-          <div class="pat-info">
-            <div class="pat-title"><%= t.title %></div>
-            <% if (t.artist || t.album) { %>
-              <div class="pat-artist">
-                <%= t.artist %><% if (t.artist && t.album) { %> &middot; <% } %><%= t.album %>
-              </div>
-            <% } %>
-          </div>
-          <% if (t.postUrl) { %>
-            <a class="search-track-link"
-               href="<%= t.postUrl %>"
-               hx-get="<%= t.postUrl %>?partial=1"
-               hx-target="#pcms-main"
-               hx-swap="innerHTML"
-               hx-push-url="<%= t.postUrl %>"
-               aria-label="<%= _inPost %>"><%= _inPost %></a>
-          <% } %>
-        </div>
-      <% }); %>
-    </div>
-  <% } %>
-
-  <% if (results && results.length) { %>
-    <% if (_tracks.length) { %><h2 class="search-section-title"><%= t('search.section_posts') %></h2><% } %>
-    <ol class="search-results">
-      <% results.forEach(function(r) { %>
-        <li class="search-result">
-          <h3 class="search-result-title">
-            <a href="<%= _base %>/<%= r.slug %>"
-               hx-get="<%= _base %>/<%= r.slug %>?partial=1"
-               hx-target="#pcms-main"
-               hx-swap="innerHTML"
-               hx-push-url="<%= _base %>/<%= r.slug %>"
-               hx-indicator="#pcms-loading">
-              <%= r.title || '(zonder titel)' %>
-            </a>
-          </h3>
-          <p class="search-result-meta">
-            <%= r.author_username %>
-            <% if (r.published_at) { %> &middot; <%= formatDate(r.published_at) %><% } %>
-          </p>
-          <p class="search-result-snippet"><%- r.snippet %></p>
-        </li>
-      <% }); %>
-    </ol>
-  <% } %>
-
-  <% if (_events.length) { %>
-    <h2 class="search-section-title"><%= t('search.section_events') %></h2>
-    <ol class="search-results">
-      <% _events.forEach(function(ev) { %>
-        <li class="search-result">
-          <h3 class="search-result-title"><a href="<%= ev.url %>"><%= ev.where || '—' %></a></h3>
-          <p class="search-result-meta"><%= [ev.date, ev.time].filter(Boolean).join(' ') %></p>
-        </li>
-      <% }); %>
-    </ol>
-  <% } %>
-
-  <% if (_pages.length) { %>
-    <h2 class="search-section-title"><%= t('search.section_pages') %></h2>
-    <ul class="search-pages">
-      <% _pages.forEach(function(pg) { %>
-        <li><a class="search-page-link" href="<%= pg.url %>"><%= pg.label %> <span aria-hidden="true">→</span></a></li>
-      <% }); %>
-    </ul>
-  <% } %>
-
-  <% if (query && !queryError && !results.length && !_tracks.length && !_events.length && !_pages.length) { %>
-    <p class="search-empty"><%= t('search.empty') %></p>
-  <% } %>
-</div>
-
-<style>
-.search-page { max-width: 720px; margin: 3rem auto; padding: 0 1rem; }
-.search-page h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: 0 0 1.5rem; }
-
-.search-page-form {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-.search-page-form input {
-  flex: 1;
-  padding: 0.6rem 0.9rem;
-  border: 1px solid var(--rule);
-  border-radius: 5px;
-  background: var(--paper-2);
-  color: var(--ink);
-  font-size: 1rem;
-}
-.search-page-form input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.search-meta {
-  color: var(--ink-muted, var(--ink-soft));
-  font-size: 0.9rem;
-  margin: 0 0 1rem;
-}
-.search-section-title {
-  font-family: var(--font-display, serif);
-  font-size: 1.1rem;
-  margin: 1.75rem 0 0.75rem;
-  color: var(--ink-soft);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.search-error {
-  background: rgba(200, 60, 60, 0.15);
-  color: #c33;
-  padding: 0.75rem 1rem;
-  border-radius: 6px;
-  border: 1px solid rgba(200, 60, 60, 0.3);
-}
-.search-empty {
-  color: var(--ink-muted, var(--ink-soft));
-  text-align: center;
-  margin: 3rem 0;
-}
-
-/* Nummer-resultaten */
-.search-tracks { display: flex; flex-direction: column; gap: 0.25rem; }
-.search-track.post-audio-track {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.6rem;
-  border-radius: 8px;
-}
-.search-track .search-track-cover {
-  width: 38px; height: 38px;
-  flex: 0 0 38px;
-  border-radius: 5px;
-  background-size: cover;
-  background-position: center;
-  background-color: var(--paper-2);
-}
-.search-track .pat-info { flex: 1; min-width: 0; }
-.search-track .pat-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.search-track .pat-artist { font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.search-track-link {
-  flex: 0 0 auto;
-  font-size: 0.82rem;
-  color: var(--accent);
-  text-decoration: none;
-  white-space: nowrap;
-}
-.search-track-link:hover { text-decoration: underline; }
-
-.search-results {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.search-result {
-  padding: 1rem 0;
-  border-bottom: 1px solid var(--rule);
-}
-.search-result:last-child { border-bottom: 0; }
-
-.search-result-title {
-  font-family: var(--font-display, serif);
-  font-size: 1.25rem;
-  margin: 0 0 0.25rem;
-}
-.search-result-title a {
-  color: var(--ink);
-  text-decoration: none;
-}
-.search-result-title a:hover { color: var(--accent); }
-
-.search-result-meta {
-  margin: 0 0 0.5rem;
-  color: var(--ink-muted, var(--ink-soft));
-  font-size: 0.85rem;
-}
-
-.search-result-snippet {
-  margin: 0;
-  color: var(--ink-soft);
-  line-height: 1.5;
-}
-.search-result-snippet mark {
-  background: var(--accent);
-  color: white;
-  padding: 0.05em 0.25em;
-  border-radius: 3px;
-}
-.search-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
-.search-page-link {
-  display: inline-flex; align-items: center; gap: 0.3rem;
-  padding: 0.45rem 0.8rem; border: 1px solid var(--rule); border-radius: 999px;
-  color: var(--ink); text-decoration: none; font-size: 0.9rem; background: var(--paper-2);
-}
-.search-page-link:hover { border-color: var(--accent); color: var(--accent); }
-</style>
+  De opmaak staat in partials/search-styles.ejs, die de topnav al meebrengt.
+%>
+<%- include('../partials/search-surface', Object.assign({}, locals, { mode: 'page' })) %>