feat: add collapsible sidebar widgets with localStorage persistence

Sidebar widgets are now wrapped in a collapsible Alpine.js container
with a title + chevron toggle. First 3 widgets open by default, rest
collapsed. State persists in localStorage across page loads. Inner
widget titles hidden by CSS to avoid duplication with wrapper titles.

_includes/components/homepage-sidebar.njk

@@ -1,53 +1,106 @@
 {# Homepage Builder Sidebar — renders widgets from homepageConfig.sidebar #}
+{# Each widget is wrapped in a collapsible container with localStorage persistence #}
 {% if homepageConfig.sidebar and homepageConfig.sidebar.length %}
   {% for widget in homepageConfig.sidebar %}
-    {% if widget.type == "author-card" %}
+
-      {% include "components/widgets/author-card.njk" %}
+    {# Resolve widget title #}
-    {% elif widget.type == "social-activity" %}
+    {% if widget.type == "search" %}{% set widgetTitle = "Search" %}
-      {% include "components/widgets/social-activity.njk" %}
+    {% elif widget.type == "social-activity" %}{% set widgetTitle = "Social Activity" %}
-    {% elif widget.type == "github-repos" %}
+    {% elif widget.type == "github-repos" %}{% set widgetTitle = "GitHub" %}
-      {% include "components/widgets/github-repos.njk" %}
+    {% elif widget.type == "funkwhale" %}{% set widgetTitle = "Listening" %}
-    {% elif widget.type == "funkwhale" %}
+    {% elif widget.type == "recent-posts" %}{% set widgetTitle = "Recent Posts" %}
-      {% include "components/widgets/funkwhale.njk" %}
+    {% elif widget.type == "blogroll" %}{% set widgetTitle = "Blogroll" %}
-    {% elif widget.type == "recent-posts" %}
+    {% elif widget.type == "feedland" %}{% set widgetTitle = "FeedLand" %}
-      {% include "components/widgets/recent-posts.njk" %}
+    {% elif widget.type == "categories" %}{% set widgetTitle = "Categories" %}
-    {% elif widget.type == "blogroll" %}
+    {% elif widget.type == "webmentions" %}{% set widgetTitle = "Webmentions" %}
-      {% include "components/widgets/blogroll.njk" %}
+    {% elif widget.type == "recent-comments" %}{% set widgetTitle = "Recent Comments" %}
-    {% elif widget.type == "feedland" %}
+    {% elif widget.type == "fediverse-follow" %}{% set widgetTitle = "Fediverse" %}
-      {% include "components/widgets/feedland.njk" %}
+    {% elif widget.type == "author-card" %}{% set widgetTitle = "Author" %}
-    {% elif widget.type == "categories" %}
+    {% elif widget.type == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %}
-      {% include "components/widgets/categories.njk" %}
+    {% else %}{% set widgetTitle = widget.type %}
-    {% elif widget.type == "search" %}
-      <is-land on:visible>
-      <div class="widget">
-        <h3 class="widget-title">Search</h3>
-        <div id="sidebar-search"></div>
-        <script>initPagefind("#sidebar-search");</script>
-      </div>
-      </is-land>
-    {% elif widget.type == "webmentions" %}
-      {% include "components/widgets/webmentions.njk" %}
-    {% elif widget.type == "recent-comments" %}
-      {% include "components/widgets/recent-comments.njk" %}
-    {% elif widget.type == "fediverse-follow" %}
-      {% include "components/widgets/fediverse-follow.njk" %}
-    {% elif widget.type == "custom-html" %}
-      {# Custom content widget #}
-      {% 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 }} -->
     {% endif %}
+
+    {% set widgetKey = "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 == "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" %}
+            {% 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 == "search" %}
+            <is-land on:visible>
+            <div class="widget">
+              <div id="sidebar-search"></div>
+              <script>initPagefind("#sidebar-search");</script>
+            </div>
+            </is-land>
+          {% elif widget.type == "webmentions" %}
+            {% include "components/widgets/webmentions.njk" %}
+          {% elif widget.type == "recent-comments" %}
+            {% include "components/widgets/recent-comments.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 %}
 {% endif %}

css/tailwind.css

@@ -292,6 +292,34 @@
     @apply font-bold text-lg mb-4;
   }
 
+  /* Collapsible widget wrapper */
+  .widget-header {
+    @apply flex items-center justify-between cursor-pointer;
+  }
+
+  .widget-header .widget-title {
+    @apply mb-0;
+  }
+
+  .widget-chevron {
+    @apply w-4 h-4 text-surface-400 transition-transform duration-200 shrink-0;
+  }
+
+  /* Hide inner widget titles when the collapsible wrapper provides one */
+  .widget-collapsible .widget .widget-title {
+    @apply hidden;
+  }
+
+  /* Hide FeedLand's custom title in collapsible wrapper */
+  .widget-collapsible .widget .fl-title {
+    @apply hidden;
+  }
+
+  /* Neutralize inner widget card styling when inside collapsible wrapper */
+  .widget-collapsible .widget {
+    @apply border-0 shadow-none rounded-none mb-0 bg-transparent;
+  }
+
   /* Post cards */
   .post-card {
     @apply p-5 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;