From 0c6229088c4aa68ccf759eee0cf0b9e2a09e282d Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Thu, 5 Mar 2026 13:22:32 +0100
Subject: [PATCH] feat: rework single post view for better content hierarchy

- Add post-type header (Reply/Like/Repost/Bookmark/Note) for titleless posts
- Add left accent border to user content on interaction posts
- Collapse AI Usage box into a compact <details> summary line
- Collapse comments section when empty, auto-open when comments exist
- Collapse webmention send form behind <details> toggle

Confab-Link: http://localhost:8080/sessions/648a550c-4f65-46be-b9a9-6b7e0fd90751
---
 _includes/components/comments.njk    | 173 ++++++++++++++-------------
 _includes/components/webmentions.njk |  51 ++++----
 _includes/layouts/post.njk           |  55 ++++-----
 js/comments.js                       |   1 +
 4 files changed, 146 insertions(+), 134 deletions(-)

diff --git a/_includes/components/comments.njk b/_includes/components/comments.njk
index 6943098..ddf074c 100644
--- a/_includes/components/comments.njk
+++ b/_includes/components/comments.njk
@@ -1,4 +1,5 @@
 {# Comments section — shown on post pages before webmentions #}
+{# Collapsed when empty, auto-opens when comments exist #}
 {% set absoluteUrl = site.url + page.url %}
 
 <is-land on:visible>
@@ -6,91 +7,103 @@
          x-data="commentsSection('{{ absoluteUrl }}')"
          x-init="init()">
 
-  <h2 class="text-xl font-bold mb-4">Comments</h2>
+  <details class="group" x-bind:open="comments.length > 0 || showForm">
+    <summary class="flex items-center justify-between cursor-pointer list-none [&::-webkit-details-marker]:hidden" @click="showForm = true">
+      <h2 class="text-lg font-semibold text-surface-700 dark:text-surface-300">
+        Comments
+        <span x-show="comments.length > 0" x-text="'(' + comments.length + ')'" class="text-sm font-normal" x-cloak></span>
+      </h2>
+      <svg class="w-4 h-4 text-surface-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+      </svg>
+    </summary>
 
-  {# Status messages #}
-  <div x-show="statusMessage" x-cloak
-       x-bind:class="statusType === 'error' ? 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400' :
-                      statusType === 'success' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' :
-                      'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'"
-       class="p-3 rounded-lg mb-4 text-sm">
-    <span x-text="statusMessage"></span>
-  </div>
-
-  {# Sign-in form (shown when not authenticated) #}
-  <div x-show="!user" x-cloak>
-    <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">Sign in with your website to comment:</p>
-    <form x-on:submit.prevent="startAuth()" class="flex gap-2 items-end flex-wrap">
-      <div class="flex-1 min-w-[200px]">
-        <label for="comment-me" class="block text-sm font-medium mb-1">Your website</label>
-        <input id="comment-me" type="url" x-model="meUrl"
-               placeholder="https://yourdomain.com" required
-               class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-600">
+    <div class="mt-4">
+      {# Status messages #}
+      <div x-show="statusMessage" x-cloak
+           x-bind:class="statusType === 'error' ? 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400' :
+                          statusType === 'success' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' :
+                          'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'"
+           class="p-3 rounded-lg mb-4 text-sm">
+        <span x-text="statusMessage"></span>
       </div>
-      <button type="submit" class="button" x-bind:disabled="authLoading">
-        <span x-show="!authLoading">Sign In</span>
-        <span x-show="authLoading" x-cloak>Signing in...</span>
-      </button>
-    </form>
-  </div>
 
-  {# Comment form (shown when authenticated) #}
-  <div x-show="user" x-cloak>
-    <div class="flex items-center gap-2 mb-3 text-sm text-surface-600 dark:text-surface-400">
-      <span>Signed in as</span>
-      <a x-bind:href="user?.url" class="font-medium hover:underline" x-text="user?.name || user?.url" target="_blank" rel="noopener"></a>
-      <button x-on:click="signOut()" class="text-xs underline hover:no-underline">Sign out</button>
-    </div>
-
-    <form x-on:submit.prevent="submitComment()">
-      <textarea x-model="commentText" rows="4" required
-                placeholder="Share your thoughts... (supports **bold**, *italic*, and [links](url))"
-                class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-600"
-                x-bind:maxlength="maxLength"></textarea>
-      <div class="flex items-center justify-between">
-        <span class="text-xs text-surface-500" x-text="commentText.length + '/' + maxLength"></span>
-        <button type="submit" class="button" x-bind:disabled="submitting">
-          <span x-show="!submitting">Post Comment</span>
-          <span x-show="submitting" x-cloak>Posting...</span>
-        </button>
-      </div>
-    </form>
-  </div>
-
-  {# Comment list #}
-  <div class="mt-6 space-y-4">
-    <template x-if="loading">
-      <p class="text-sm text-surface-500">Loading comments...</p>
-    </template>
-
-    <template x-for="comment in comments" x-bind:key="comment.published">
-      <div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
-        <div class="flex items-start gap-3">
-          <template x-if="comment.author?.photo">
-            <img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
-                 class="w-8 h-8 rounded-full flex-shrink-0" loading="lazy">
-          </template>
-          <template x-if="!comment.author?.photo">
-            <div class="w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 flex-shrink-0 flex items-center justify-center text-xs font-bold"
-                 x-text="(comment.author?.name || '?')[0].toUpperCase()">
-            </div>
-          </template>
-          <div class="flex-1">
-            <div class="flex items-center gap-2">
-              <a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
-                 x-text="comment.author?.name || comment.author?.url"></a>
-              <time class="text-xs text-surface-500" x-bind:datetime="comment.published"
-                    x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
-            </div>
-            <div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
+      {# Sign-in form (shown when not authenticated) #}
+      <div x-show="!user" x-cloak>
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">Sign in with your website to comment:</p>
+        <form x-on:submit.prevent="startAuth()" class="flex gap-2 items-end flex-wrap">
+          <div class="flex-1 min-w-[200px]">
+            <label for="comment-me" class="block text-sm font-medium mb-1">Your website</label>
+            <input id="comment-me" type="url" x-model="meUrl"
+                   placeholder="https://yourdomain.com" required
+                   class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-600">
           </div>
-        </div>
+          <button type="submit" class="button" x-bind:disabled="authLoading">
+            <span x-show="!authLoading">Sign In</span>
+            <span x-show="authLoading" x-cloak>Signing in...</span>
+          </button>
+        </form>
       </div>
-    </template>
 
-    <template x-if="!loading && comments.length === 0">
-      <p class="text-sm text-surface-500">No comments yet. Be the first to share your thoughts!</p>
-    </template>
-  </div>
+      {# Comment form (shown when authenticated) #}
+      <div x-show="user" x-cloak>
+        <div class="flex items-center gap-2 mb-3 text-sm text-surface-600 dark:text-surface-400">
+          <span>Signed in as</span>
+          <a x-bind:href="user?.url" class="font-medium hover:underline" x-text="user?.name || user?.url" target="_blank" rel="noopener"></a>
+          <button x-on:click="signOut()" class="text-xs underline hover:no-underline">Sign out</button>
+        </div>
+
+        <form x-on:submit.prevent="submitComment()">
+          <textarea x-model="commentText" rows="4" required
+                    placeholder="Share your thoughts... (supports **bold**, *italic*, and [links](url))"
+                    class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-600"
+                    x-bind:maxlength="maxLength"></textarea>
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-surface-500" x-text="commentText.length + '/' + maxLength"></span>
+            <button type="submit" class="button" x-bind:disabled="submitting">
+              <span x-show="!submitting">Post Comment</span>
+              <span x-show="submitting" x-cloak>Posting...</span>
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {# Comment list #}
+      <div class="mt-6 space-y-4">
+        <template x-if="loading">
+          <p class="text-sm text-surface-500">Loading comments...</p>
+        </template>
+
+        <template x-for="comment in comments" x-bind:key="comment.published">
+          <div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+            <div class="flex items-start gap-3">
+              <template x-if="comment.author?.photo">
+                <img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
+                     class="w-8 h-8 rounded-full flex-shrink-0" loading="lazy">
+              </template>
+              <template x-if="!comment.author?.photo">
+                <div class="w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 flex-shrink-0 flex items-center justify-center text-xs font-bold"
+                     x-text="(comment.author?.name || '?')[0].toUpperCase()">
+                </div>
+              </template>
+              <div class="flex-1">
+                <div class="flex items-center gap-2">
+                  <a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
+                     x-text="comment.author?.name || comment.author?.url"></a>
+                  <time class="text-xs text-surface-500" x-bind:datetime="comment.published"
+                        x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
+                </div>
+                <div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template x-if="!loading && comments.length === 0">
+          <p class="text-sm text-surface-500">No comments yet. Be the first to share your thoughts!</p>
+        </template>
+      </div>
+    </div>
+  </details>
 </section>
 </is-land>
diff --git a/_includes/components/webmentions.njk b/_includes/components/webmentions.njk
index 1ba4f96..971984b 100644
--- a/_includes/components/webmentions.njk
+++ b/_includes/components/webmentions.njk
@@ -175,27 +175,32 @@
 </section>
 {% endif %}
 
-{# Webmention send form #}
-<section class="webmention-form mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
-  <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-300 mb-2">
+{# Webmention send form — collapsed by default #}
+<details class="mt-8">
+  <summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5">
+    <svg class="w-3.5 h-3.5 transition-transform [[open]>&]:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
     Send a Webmention
-  </h3>
-  <p class="text-xs text-surface-600 dark:text-surface-400 mb-3">
-    Have you written a response to this post? Send a webmention by entering your post URL below.
-  </p>
-  <form action="https://webmention.io/{{ site.webmentions.domain }}/webmention" method="post" class="flex gap-2">
-    <input type="hidden" name="target" value="{{ site.url }}{{ page.url }}">
-    <input
-      type="url"
-      name="source"
-      placeholder="https://your-site.com/response"
-      required
-      class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded focus:outline-none focus:ring-2 focus:ring-accent-500"
-    >
-    <button
-      type="submit"
-      class="px-4 py-2 text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 rounded transition-colors">
-      Send
-    </button>
-  </form>
-</section>
+  </summary>
+  <div class="mt-3 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+    <p class="text-xs text-surface-600 dark:text-surface-400 mb-3">
+      Have you written a response to this post? Send a webmention by entering your post URL below.
+    </p>
+    <form action="https://webmention.io/{{ site.webmentions.domain }}/webmention" method="post" class="flex gap-2">
+      <input type="hidden" name="target" value="{{ site.url }}{{ page.url }}">
+      <input
+        type="url"
+        name="source"
+        placeholder="https://your-site.com/response"
+        required
+        class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded focus:outline-none focus:ring-2 focus:ring-accent-500"
+      >
+      <button
+        type="submit"
+        class="px-4 py-2 text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 rounded transition-colors">
+        Send
+      </button>
+    </form>
+  </div>
+</details>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
index 36492f9..6e11371 100644
--- a/_includes/layouts/post.njk
+++ b/_includes/layouts/post.njk
@@ -3,8 +3,20 @@ layout: layouts/base.njk
 withBlogSidebar: true
 ---
 <article class="h-entry post" x-data="lightbox" @keydown.window="onKeydown($event)">
+  {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
+  {% set bookmarkedUrl = bookmarkOf or bookmark_of %}
+  {% set likedUrl = likeOf or like_of %}
+  {% set replyTo = inReplyTo or in_reply_to %}
+  {% set repostedUrl = repostOf or repost_of %}
+
   {% if title %}
   <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-3 sm:mb-4">{{ title }}</h1>
+  {% else %}
+  <div class="flex items-center gap-2 mb-1">
+    <span class="text-sm font-medium text-surface-500 dark:text-surface-400">
+      {% if replyTo %}&#8617; Reply{% elif likedUrl %}&#9829; Like{% elif repostedUrl %}&#9851; Repost{% elif bookmarkedUrl %}&#128278; Bookmark{% else %}&#9998; Note{% endif %}
+    </span>
+  </div>
   {% endif %}
 
   <div class="post-meta mb-4 sm:mb-6">
@@ -27,12 +39,6 @@ withBlogSidebar: true
 
   {# Bridgy syndication content - controls what gets posted to social networks #}
   {# For interaction types (bookmarks, likes, replies, reposts), include the target URL #}
-  {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
-  {% set bookmarkedUrl = bookmarkOf or bookmark_of %}
-  {% set likedUrl = likeOf or like_of %}
-  {% set replyTo = inReplyTo or in_reply_to %}
-  {% set repostedUrl = repostOf or repost_of %}
-
   {% set bridgySummary = description or summary or (content | ogDescription(280)) %}
   {% set interactionUrl = bookmarkedUrl or likedUrl or replyTo or repostedUrl %}
 
@@ -53,44 +59,31 @@ withBlogSidebar: true
   </div>
   {% endif %}
 
-  <div class="e-content prose prose-surface dark:prose-invert max-w-none">
+  {% set isInteraction = replyTo or likedUrl or repostedUrl or bookmarkedUrl %}
+  {% set hasContent = content and content | striptags | trim %}
+  <div class="e-content prose prose-surface dark:prose-invert max-w-none{% if isInteraction and hasContent %} border-l-[3px] border-l-accent-500 dark:border-l-accent-400 pl-4{% endif %}">
     {{ content | safe }}
   </div>
 
-  {# AI usage disclosure #}
+  {# AI usage disclosure — collapsed by default #}
   {% set aiTextLevel = aiTextLevel or ai_text_level %}
   {% set aiCodeLevel = aiCodeLevel or ai_code_level %}
   {% set aiTools = aiTools or ai_tools %}
   {% set aiDescription = aiDescription or ai_description %}
   {% if aiTextLevel or aiCodeLevel or aiTools %}
-  <aside class="mt-6 p-4 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
-    <div class="flex items-center gap-2 mb-2">
-      <svg class="w-4 h-4 text-surface-500 dark:text-surface-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+  <details class="mt-4 text-xs text-surface-500 dark:text-surface-400">
+    <summary class="cursor-pointer hover:text-surface-600 dark:hover:text-surface-300 list-none flex items-center gap-1.5 [&::-webkit-details-marker]:hidden">
+      <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/>
       </svg>
-      <strong class="text-sm font-semibold text-surface-700 dark:text-surface-300">AI Usage</strong>
-    </div>
-    <div class="flex flex-wrap gap-3 text-xs text-surface-600 dark:text-surface-400">
-      {% if aiTextLevel %}
-      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
-        Text: {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %}
+      <span>AI:
+        {% if aiTextLevel %}Text {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %}{% endif %}{% if aiCodeLevel %}{% if aiTextLevel %} · {% endif %}Code {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}{% endif %}{% if aiTools %}{% if aiTextLevel or aiCodeLevel %} · {% endif %}{{ aiTools }}{% endif %}
       </span>
-      {% endif %}
-      {% if aiCodeLevel %}
-      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
-        Code: {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}
-      </span>
-      {% endif %}
-      {% if aiTools %}
-      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
-        Tools: {{ aiTools }}
-      </span>
-      {% endif %}
-    </div>
+    </summary>
     {% if aiDescription %}
-    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ aiDescription }}</p>
+    <p class="mt-1 pl-5">{{ aiDescription }}</p>
     {% endif %}
-  </aside>
+  </details>
   {% endif %}
 
   {# Rich reply context with h-cite microformat #}
diff --git a/js/comments.js b/js/comments.js
index afb8c46..11219e4 100644
--- a/js/comments.js
+++ b/js/comments.js
@@ -19,6 +19,7 @@ document.addEventListener("alpine:init", () => {
     statusMessage: "",
     statusType: "info",
     maxLength: 2000,
+    showForm: false,
 
     async init() {
       await this.checkSession();