From 91ed859a3509f8d794c7f8161ee93064611f7558 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Tue, 24 Feb 2026 16:58:46 +0100
Subject: [PATCH] feat: harmonize blog views with homepage UI/UX

Add color-coded left borders to post cards on all blog listing and
category pages, and make sidebar widgets collapsible with localStorage
persistence on both listing and single-post sidebars.
---
 _includes/components/blog-sidebar.njk | 292 ++++++++++++++++++++------
 _includes/components/sidebar.njk      | 281 +++++++++++++++++++------
 articles.njk                          |   2 +-
 blog.njk                              |  16 +-
 bookmarks.njk                         |   2 +-
 categories.njk                        |  20 +-
 likes.njk                             |   2 +-
 notes.njk                             |   2 +-
 photos.njk                            |   2 +-
 replies.njk                           |   2 +-
 reposts.njk                           |   2 +-
 11 files changed, 486 insertions(+), 137 deletions(-)

diff --git a/_includes/components/blog-sidebar.njk b/_includes/components/blog-sidebar.njk
index 0cbfb38..c108cdb 100644
--- a/_includes/components/blog-sidebar.njk
+++ b/_includes/components/blog-sidebar.njk
@@ -1,75 +1,239 @@
 {# Blog Sidebar - Shown on individual post pages #}
 {# Data-driven when homepageConfig.blogPostSidebar is configured, otherwise falls back to default widgets #}
+{# Each widget is wrapped in a collapsible container with localStorage persistence #}
 
 {% if homepageConfig and homepageConfig.blogPostSidebar and homepageConfig.blogPostSidebar.length %}
   {# === Data-driven mode: render configured widgets === #}
   {% for widget in homepageConfig.blogPostSidebar %}
-    {% if widget.type == "author-card-compact" %}
-      {% include "components/widgets/author-card-compact.njk" %}
-    {% elif widget.type == "author-card" %}
-      {% include "components/widgets/author-card.njk" %}
-    {% elif widget.type == "toc" %}
-      {% include "components/widgets/toc.njk" %}
-    {% elif widget.type == "post-categories" %}
-      {% include "components/widgets/post-categories.njk" %}
-    {% elif widget.type == "recent-posts" %}
-      {% include "components/widgets/recent-posts-blog.njk" %}
-    {% elif widget.type == "webmentions" %}
-      {% include "components/widgets/webmentions.njk" %}
-    {% elif widget.type == "share" %}
-      {% include "components/widgets/share.njk" %}
-    {% elif widget.type == "subscribe" %}
-      {% include "components/widgets/subscribe.njk" %}
-    {% elif widget.type == "social-activity" %}
-      {% include "components/widgets/social-activity.njk" %}
-    {% elif widget.type == "github-repos" %}
-      {% include "components/widgets/github-repos.njk" %}
-    {% elif widget.type == "funkwhale" %}
-      {% include "components/widgets/funkwhale.njk" %}
-    {% elif widget.type == "blogroll" %}
-      {% include "components/widgets/blogroll.njk" %}
-    {% elif widget.type == "feedland" %}
-      {% include "components/widgets/feedland.njk" %}
-    {% elif widget.type == "categories" %}
-      {% include "components/widgets/categories.njk" %}
-    {% elif widget.type == "recent-comments" %}
-      {% include "components/widgets/recent-comments.njk" %}
-    {% elif widget.type == "search" %}
-      <is-land on:visible>
-      <div class="widget">
-        <h3 class="widget-title">Search</h3>
-        <div id="blog-sidebar-search"></div>
-        <script>initPagefind("#blog-sidebar-search");</script>
-      </div>
-      </is-land>
-    {% elif widget.type == "fediverse-follow" %}
-      {% include "components/widgets/fediverse-follow.njk" %}
-    {% elif widget.type == "custom-html" %}
-      {% set wConfig = widget.config or {} %}
-      <is-land on:visible>
-      <div class="widget">
-        {% if wConfig.title %}
-        <h3 class="widget-title">{{ wConfig.title }}</h3>
-        {% endif %}
-        {% if wConfig.content %}
-        <div class="prose dark:prose-invert prose-sm max-w-none">
-          {{ wConfig.content | safe }}
-        </div>
-        {% endif %}
-      </div>
-      </is-land>
-    {% else %}
-      <!-- Unknown widget type: {{ widget.type }} -->
+
+    {# Resolve widget title #}
+    {% if widget.type == "search" %}{% set widgetTitle = "Search" %}
+    {% elif widget.type == "social-activity" %}{% set widgetTitle = "Social Activity" %}
+    {% elif widget.type == "github-repos" %}{% set widgetTitle = "GitHub" %}
+    {% elif widget.type == "funkwhale" %}{% set widgetTitle = "Listening" %}
+    {% elif widget.type == "recent-posts" %}{% set widgetTitle = "Recent Posts" %}
+    {% elif widget.type == "blogroll" %}{% set widgetTitle = "Blogroll" %}
+    {% elif widget.type == "feedland" %}{% set widgetTitle = "FeedLand" %}
+    {% elif widget.type == "categories" %}{% set widgetTitle = "Categories" %}
+    {% elif widget.type == "webmentions" %}{% set widgetTitle = "Webmentions" %}
+    {% elif widget.type == "recent-comments" %}{% set widgetTitle = "Recent Comments" %}
+    {% elif widget.type == "fediverse-follow" %}{% set widgetTitle = "Fediverse" %}
+    {% elif widget.type == "author-card" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "author-card-compact" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "subscribe" %}{% set widgetTitle = "Subscribe" %}
+    {% elif widget.type == "toc" %}{% set widgetTitle = "Table of Contents" %}
+    {% elif widget.type == "post-categories" %}{% set widgetTitle = "Categories" %}
+    {% elif widget.type == "share" %}{% set widgetTitle = "Share" %}
+    {% elif widget.type == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %}
+    {% else %}{% set widgetTitle = widget.type %}
     {% endif %}
+
+    {% set widgetKey = "post-widget-" + widget.type + "-" + loop.index0 %}
+    {% set defaultOpen = "true" if loop.index0 < 3 else "false" %}
+
+    {# Collapsible wrapper — Alpine.js handles toggle, localStorage persists state #}
+    <div
+      class="widget-collapsible mb-4"
+      x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }"
+    >
+      <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+        <button
+          class="widget-header w-full p-4"
+          @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)"
+          :aria-expanded="open ? 'true' : 'false'"
+        >
+          <h3 class="widget-title font-bold text-lg">{{ widgetTitle }}</h3>
+          <svg
+            class="widget-chevron"
+            :class="open && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+
+        <div
+          x-show="open"
+          x-transition:enter="transition ease-out duration-150"
+          x-transition:enter-start="opacity-0"
+          x-transition:enter-end="opacity-100"
+          x-transition:leave="transition ease-in duration-100"
+          x-transition:leave-start="opacity-100"
+          x-transition:leave-end="opacity-0"
+          x-cloak
+        >
+          {# Widget content — inner .widget provides padding, inner title hidden by CSS #}
+          {% if widget.type == "author-card-compact" %}
+            {% include "components/widgets/author-card-compact.njk" %}
+          {% elif widget.type == "author-card" %}
+            {% include "components/widgets/author-card.njk" %}
+          {% elif widget.type == "toc" %}
+            {% include "components/widgets/toc.njk" %}
+          {% elif widget.type == "post-categories" %}
+            {% include "components/widgets/post-categories.njk" %}
+          {% elif widget.type == "recent-posts" %}
+            {% include "components/widgets/recent-posts-blog.njk" %}
+          {% elif widget.type == "webmentions" %}
+            {% include "components/widgets/webmentions.njk" %}
+          {% elif widget.type == "share" %}
+            {% include "components/widgets/share.njk" %}
+          {% elif widget.type == "subscribe" %}
+            {% include "components/widgets/subscribe.njk" %}
+          {% elif widget.type == "social-activity" %}
+            {% include "components/widgets/social-activity.njk" %}
+          {% elif widget.type == "github-repos" %}
+            {% include "components/widgets/github-repos.njk" %}
+          {% elif widget.type == "funkwhale" %}
+            {% include "components/widgets/funkwhale.njk" %}
+          {% elif widget.type == "blogroll" %}
+            {% include "components/widgets/blogroll.njk" %}
+          {% elif widget.type == "feedland" %}
+            {% include "components/widgets/feedland.njk" %}
+          {% elif widget.type == "categories" %}
+            {% include "components/widgets/categories.njk" %}
+          {% elif widget.type == "recent-comments" %}
+            {% include "components/widgets/recent-comments.njk" %}
+          {% elif widget.type == "search" %}
+            <is-land on:visible>
+            <div class="widget">
+              <div id="blog-sidebar-search"></div>
+              <script>initPagefind("#blog-sidebar-search");</script>
+            </div>
+            </is-land>
+          {% elif widget.type == "fediverse-follow" %}
+            {% include "components/widgets/fediverse-follow.njk" %}
+          {% elif widget.type == "custom-html" %}
+            {% set wConfig = widget.config or {} %}
+            <is-land on:visible>
+            <div class="widget">
+              {% if wConfig.content %}
+              <div class="prose dark:prose-invert prose-sm max-w-none">
+                {{ wConfig.content | safe }}
+              </div>
+              {% endif %}
+            </div>
+            </is-land>
+          {% else %}
+            <!-- Unknown widget type: {{ widget.type }} -->
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
   {% endfor %}
 {% else %}
   {# === Fallback: default blog post sidebar (backward compatibility) === #}
-  {% include "components/widgets/author-card-compact.njk" %}
-  {% include "components/widgets/toc.njk" %}
-  {% include "components/widgets/post-categories.njk" %}
-  {% include "components/widgets/recent-posts-blog.njk" %}
-  {% include "components/widgets/webmentions.njk" %}
-  {% include "components/widgets/share.njk" %}
-  {% include "components/widgets/subscribe.njk" %}
-  {% include "components/widgets/recent-comments.njk" %}
+  {# Each widget wrapped in collapsible container #}
+
+  {# Author Card Compact #}
+  {% set widgetKey = "post-fb-author-card-compact" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Author</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/author-card-compact.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Table of Contents #}
+  {% set widgetKey = "post-fb-toc" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Table of Contents</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/toc.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Post Categories #}
+  {% set widgetKey = "post-fb-post-categories" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Categories</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/post-categories.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Recent Posts #}
+  {% set widgetKey = "post-fb-recent-posts" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Recent Posts</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-posts-blog.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Webmentions #}
+  {% set widgetKey = "post-fb-webmentions" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Webmentions</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/webmentions.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Share #}
+  {% set widgetKey = "post-fb-share" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Share</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/share.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Subscribe #}
+  {% set widgetKey = "post-fb-subscribe" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Subscribe</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/subscribe.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Recent Comments #}
+  {% set widgetKey = "post-fb-recent-comments" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Recent Comments</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-comments.njk" %}
+      </div>
+    </div>
+  </div>
 {% endif %}
diff --git a/_includes/components/sidebar.njk b/_includes/components/sidebar.njk
index 3301fb0..3395a0a 100644
--- a/_includes/components/sidebar.njk
+++ b/_includes/components/sidebar.njk
@@ -1,93 +1,250 @@
 {# Sidebar — for blog listing pages (/blog/, /notes/, /articles/...) #}
 {# Data-driven when homepageConfig.blogListingSidebar is configured, otherwise falls back to default widgets #}
+{# Each widget is wrapped in a collapsible container with localStorage persistence #}
 
 {% if homepageConfig and homepageConfig.blogListingSidebar and homepageConfig.blogListingSidebar.length %}
   {# === Data-driven mode: render configured widgets === #}
   {% for widget in homepageConfig.blogListingSidebar %}
-    {% if widget.type == "author-card" %}
-      {% include "components/widgets/author-card.njk" %}
-    {% elif widget.type == "author-card-compact" %}
-      {% include "components/widgets/author-card-compact.njk" %}
-    {% elif widget.type == "social-activity" %}
-      {% include "components/widgets/social-activity.njk" %}
-    {% elif widget.type == "github-repos" %}
-      {% include "components/widgets/github-repos.njk" %}
-    {% elif widget.type == "funkwhale" %}
-      {% include "components/widgets/funkwhale.njk" %}
-    {% elif widget.type == "recent-posts" %}
-      {% include "components/widgets/recent-posts.njk" %}
-    {% elif widget.type == "blogroll" %}
-      {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
-      {% include "components/widgets/blogroll.njk" %}
-      {% endif %}
-    {% elif widget.type == "feedland" %}
-      {% include "components/widgets/feedland.njk" %}
-    {% elif widget.type == "categories" %}
-      {% include "components/widgets/categories.njk" %}
-    {% elif widget.type == "subscribe" %}
-      {% include "components/widgets/subscribe.njk" %}
-    {% elif widget.type == "recent-comments" %}
-      {% include "components/widgets/recent-comments.njk" %}
-    {% elif widget.type == "search" %}
-      <is-land on:visible>
-      <div class="widget">
-        <h3 class="widget-title">Search</h3>
-        <div id="listing-sidebar-search"></div>
-        <script>initPagefind("#listing-sidebar-search");</script>
-      </div>
-      </is-land>
-    {% elif widget.type == "webmentions" %}
-      {% include "components/widgets/webmentions.njk" %}
-    {% elif widget.type == "fediverse-follow" %}
-      {% include "components/widgets/fediverse-follow.njk" %}
-    {% elif widget.type == "custom-html" %}
-      {% set wConfig = widget.config or {} %}
-      <is-land on:visible>
-      <div class="widget">
-        {% if wConfig.title %}
-        <h3 class="widget-title">{{ wConfig.title }}</h3>
-        {% endif %}
-        {% if wConfig.content %}
-        <div class="prose dark:prose-invert prose-sm max-w-none">
-          {{ wConfig.content | safe }}
-        </div>
-        {% endif %}
-      </div>
-      </is-land>
-    {% else %}
-      <!-- Unknown widget type: {{ widget.type }} -->
+
+    {# Resolve widget title #}
+    {% if widget.type == "search" %}{% set widgetTitle = "Search" %}
+    {% elif widget.type == "social-activity" %}{% set widgetTitle = "Social Activity" %}
+    {% elif widget.type == "github-repos" %}{% set widgetTitle = "GitHub" %}
+    {% elif widget.type == "funkwhale" %}{% set widgetTitle = "Listening" %}
+    {% elif widget.type == "recent-posts" %}{% set widgetTitle = "Recent Posts" %}
+    {% elif widget.type == "blogroll" %}{% set widgetTitle = "Blogroll" %}
+    {% elif widget.type == "feedland" %}{% set widgetTitle = "FeedLand" %}
+    {% elif widget.type == "categories" %}{% set widgetTitle = "Categories" %}
+    {% elif widget.type == "webmentions" %}{% set widgetTitle = "Webmentions" %}
+    {% elif widget.type == "recent-comments" %}{% set widgetTitle = "Recent Comments" %}
+    {% elif widget.type == "fediverse-follow" %}{% set widgetTitle = "Fediverse" %}
+    {% elif widget.type == "author-card" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "author-card-compact" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "subscribe" %}{% set widgetTitle = "Subscribe" %}
+    {% elif widget.type == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %}
+    {% else %}{% set widgetTitle = widget.type %}
     {% endif %}
+
+    {% set widgetKey = "listing-widget-" + widget.type + "-" + loop.index0 %}
+    {% set defaultOpen = "true" if loop.index0 < 3 else "false" %}
+
+    {# Collapsible wrapper — Alpine.js handles toggle, localStorage persists state #}
+    <div
+      class="widget-collapsible mb-4"
+      x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }"
+    >
+      <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+        <button
+          class="widget-header w-full p-4"
+          @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)"
+          :aria-expanded="open ? 'true' : 'false'"
+        >
+          <h3 class="widget-title font-bold text-lg">{{ widgetTitle }}</h3>
+          <svg
+            class="widget-chevron"
+            :class="open && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+
+        <div
+          x-show="open"
+          x-transition:enter="transition ease-out duration-150"
+          x-transition:enter-start="opacity-0"
+          x-transition:enter-end="opacity-100"
+          x-transition:leave="transition ease-in duration-100"
+          x-transition:leave-start="opacity-100"
+          x-transition:leave-end="opacity-0"
+          x-cloak
+        >
+          {# Widget content — inner .widget provides padding, inner title hidden by CSS #}
+          {% if widget.type == "author-card" %}
+            {% include "components/widgets/author-card.njk" %}
+          {% elif widget.type == "author-card-compact" %}
+            {% include "components/widgets/author-card-compact.njk" %}
+          {% elif widget.type == "social-activity" %}
+            {% include "components/widgets/social-activity.njk" %}
+          {% elif widget.type == "github-repos" %}
+            {% include "components/widgets/github-repos.njk" %}
+          {% elif widget.type == "funkwhale" %}
+            {% include "components/widgets/funkwhale.njk" %}
+          {% elif widget.type == "recent-posts" %}
+            {% include "components/widgets/recent-posts.njk" %}
+          {% elif widget.type == "blogroll" %}
+            {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
+            {% include "components/widgets/blogroll.njk" %}
+            {% endif %}
+          {% elif widget.type == "feedland" %}
+            {% include "components/widgets/feedland.njk" %}
+          {% elif widget.type == "categories" %}
+            {% include "components/widgets/categories.njk" %}
+          {% elif widget.type == "subscribe" %}
+            {% include "components/widgets/subscribe.njk" %}
+          {% elif widget.type == "recent-comments" %}
+            {% include "components/widgets/recent-comments.njk" %}
+          {% elif widget.type == "search" %}
+            <is-land on:visible>
+            <div class="widget">
+              <div id="listing-sidebar-search"></div>
+              <script>initPagefind("#listing-sidebar-search");</script>
+            </div>
+            </is-land>
+          {% elif widget.type == "webmentions" %}
+            {% include "components/widgets/webmentions.njk" %}
+          {% elif widget.type == "fediverse-follow" %}
+            {% include "components/widgets/fediverse-follow.njk" %}
+          {% elif widget.type == "custom-html" %}
+            {% set wConfig = widget.config or {} %}
+            <is-land on:visible>
+            <div class="widget">
+              {% if wConfig.content %}
+              <div class="prose dark:prose-invert prose-sm max-w-none">
+                {{ wConfig.content | safe }}
+              </div>
+              {% endif %}
+            </div>
+            </is-land>
+          {% else %}
+            <!-- Unknown widget type: {{ widget.type }} -->
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
   {% endfor %}
 {% else %}
   {# === Fallback: current hardcoded sidebar (backward compatibility) === #}
+  {# Each widget wrapped in collapsible container #}
+
   {# Author Card (h-card) — always shown #}
-  {% include "components/widgets/author-card.njk" %}
+  {% set widgetKey = "listing-fb-author-card" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Author</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/author-card.njk" %}
+      </div>
+    </div>
+  </div>
 
   {# Social Activity — Bluesky/Mastodon feeds #}
-  {% include "components/widgets/social-activity.njk" %}
+  {% set widgetKey = "listing-fb-social-activity" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Social Activity</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/social-activity.njk" %}
+      </div>
+    </div>
+  </div>
 
   {# GitHub Repos #}
-  {% include "components/widgets/github-repos.njk" %}
+  {% set widgetKey = "listing-fb-github-repos" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">GitHub</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/github-repos.njk" %}
+      </div>
+    </div>
+  </div>
 
   {# Funkwhale — Now Playing / Listening Stats #}
-  {% include "components/widgets/funkwhale.njk" %}
+  {% set widgetKey = "listing-fb-funkwhale" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Listening</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/funkwhale.njk" %}
+      </div>
+    </div>
+  </div>
 
-  {# Recent Posts (for non-blog pages) #}
-  {% include "components/widgets/recent-posts.njk" %}
+  {# Recent Posts #}
+  {% set widgetKey = "listing-fb-recent-posts" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Recent Posts</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-posts.njk" %}
+      </div>
+    </div>
+  </div>
 
   {# Blogroll — only when backend is available #}
   {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
-  {% include "components/widgets/blogroll.njk" %}
+  {% set widgetKey = "listing-fb-blogroll" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Blogroll</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/blogroll.njk" %}
+      </div>
+    </div>
+  </div>
   {% endif %}
 
   {# FeedLand — only when backend is available #}
   {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
-  {% include "components/widgets/feedland.njk" %}
+  {% set widgetKey = "listing-fb-feedland" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">FeedLand</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/feedland.njk" %}
+      </div>
+    </div>
+  </div>
   {% endif %}
 
   {# Recent Comments #}
-  {% include "components/widgets/recent-comments.njk" %}
+  {% set widgetKey = "listing-fb-recent-comments" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Recent Comments</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-comments.njk" %}
+      </div>
+    </div>
+  </div>
 
   {# Categories/Tags #}
-  {% include "components/widgets/categories.njk" %}
+  {% set widgetKey = "listing-fb-categories" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg">Categories</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/categories.njk" %}
+      </div>
+    </div>
+  </div>
 {% endif %}
diff --git a/articles.njk b/articles.njk
index 56e9ba9..de448b0 100644
--- a/articles.njk
+++ b/articles.njk
@@ -25,7 +25,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
   {% if paginatedArticles.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedArticles %}
-    <li class="h-entry post-card">
+    <li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
       <div class="post-header">
         <h2 class="text-xl font-semibold mb-1 flex-1">
           <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
diff --git a/blog.njk b/blog.njk
index 16a8c4c..2b9eb5f 100644
--- a/blog.njk
+++ b/blog.njk
@@ -45,7 +45,21 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
     {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
     {% set hasPhotos = post.data.photo and post.data.photo.length %}
     {% set _postType %}{% if likedUrl %}like{% elif bookmarkedUrl %}bookmark{% elif repostedUrl %}repost{% elif replyToUrl %}reply{% elif hasPhotos %}photo{% elif post.data.title %}article{% else %}note{% endif %}{% endset %}
-    <li class="h-entry post-card" data-filter-type="{{ _postType | trim }}">
+    {% set borderClass = "" %}
+    {% if likedUrl %}
+      {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
+    {% elif bookmarkedUrl %}
+      {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif repostedUrl %}
+      {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
+    {% elif replyToUrl %}
+      {% set borderClass = "border-l-[3px] border-l-primary-400 dark:border-l-primary-500" %}
+    {% elif hasPhotos %}
+      {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% else %}
+      {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+    {% endif %}
+    <li class="h-entry post-card {{ borderClass }}" data-filter-type="{{ _postType | trim }}">
 
       {% if likedUrl %}
       {# ── Like card ── #}
diff --git a/bookmarks.njk b/bookmarks.njk
index f3ae93a..5d4d086 100644
--- a/bookmarks.njk
+++ b/bookmarks.njk
@@ -25,7 +25,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
   {% if paginatedBookmarks.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedBookmarks %}
-    <li class="h-entry post-card">
+    <li class="h-entry post-card border-l-[3px] border-l-amber-400 dark:border-l-amber-500">
       <div class="post-header">
         {% if post.data.title %}
         <h2 class="text-xl font-semibold mb-1 flex-1">
diff --git a/categories.njk b/categories.njk
index f8248c5..925178f 100644
--- a/categories.njk
+++ b/categories.njk
@@ -34,7 +34,23 @@ eleventyComputed:
   <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">{{ categoryPosts.length }} post{% if categoryPosts.length != 1 %}s{% endif %}</p>
   <ul class="post-list">
     {% for post in categoryPosts %}
-    <li class="h-entry post-card">
+    {% set postType = post.inputPath | replace("./content/", "") %}
+    {% set postType = postType.split("/")[0] %}
+    {% set borderClass = "" %}
+    {% if postType == "likes" %}
+      {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
+    {% elif postType == "bookmarks" %}
+      {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif postType == "reposts" %}
+      {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
+    {% elif postType == "replies" %}
+      {% set borderClass = "border-l-[3px] border-l-primary-400 dark:border-l-primary-500" %}
+    {% elif postType == "photos" %}
+      {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% else %}
+      {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+    {% endif %}
+    <li class="h-entry post-card {{ borderClass }}">
       <div class="post-header">
         <h2 class="text-xl font-semibold mb-1 flex-1">
           <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
@@ -46,8 +62,6 @@ eleventyComputed:
         <time class="dt-published" datetime="{{ post.date | isoDate }}">
           {{ post.date | dateDisplay }}
         </time>
-        {% set postType = post.inputPath | replace("./content/", "") %}
-        {% set postType = postType.split("/")[0] %}
         <span class="post-type">{{ postType }}</span>
       </div>
       <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
diff --git a/likes.njk b/likes.njk
index 30306df..6c873a7 100644
--- a/likes.njk
+++ b/likes.njk
@@ -25,7 +25,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
   {% if paginatedLikes.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedLikes %}
-    <li class="h-entry post-card">
+    <li class="h-entry post-card border-l-[3px] border-l-red-400 dark:border-l-red-500">
       <div class="post-header flex items-start gap-3">
         <div class="flex-shrink-0 mt-1">
           <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
diff --git a/notes.njk b/notes.njk
index 3c0d4be..6db6636 100644
--- a/notes.njk
+++ b/notes.njk
@@ -25,7 +25,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
   {% if paginatedNotes.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedNotes %}
-    <li class="h-entry post-card">
+    <li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
       <div class="post-header">
         <a class="u-url" href="{{ post.url }}">
           <time class="dt-published text-sm text-primary-600 dark:text-primary-400 font-medium" datetime="{{ post.date | isoDate }}">
diff --git a/photos.njk b/photos.njk
index 8d58f66..c8282f8 100644
--- a/photos.njk
+++ b/photos.njk
@@ -25,7 +25,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
   {% if paginatedPhotos.length > 0 %}
   <ul class="post-list photo-list">
     {% for post in paginatedPhotos %}
-    <li class="h-entry post-card">
+    <li class="h-entry post-card border-l-[3px] border-l-purple-400 dark:border-l-purple-500">
       <div class="post-meta">
         <time class="dt-published" datetime="{{ post.date | isoDate }}">
           {{ post.date | dateDisplay }}
diff --git a/replies.njk b/replies.njk
index 07255f3..a7ba30e 100644
--- a/replies.njk
+++ b/replies.njk
@@ -25,7 +25,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
   {% if paginatedReplies.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedReplies %}
-    <li class="h-entry post-card">
+    <li class="h-entry post-card border-l-[3px] border-l-primary-400 dark:border-l-primary-500">
       <div class="post-header flex items-start gap-3">
         <div class="flex-shrink-0 mt-1">
           <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
diff --git a/reposts.njk b/reposts.njk
index 5e2c2ff..a77749a 100644
--- a/reposts.njk
+++ b/reposts.njk
@@ -25,7 +25,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
   {% if paginatedReposts.length > 0 %}
   <ul class="post-list">
     {% for post in paginatedReposts %}
-    <li class="h-entry post-card">
+    <li class="h-entry post-card border-l-[3px] border-l-green-400 dark:border-l-green-500">
       <div class="post-header flex items-start gap-3">
         <div class="flex-shrink-0 mt-1">
           <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">