From 27bd895a5ff0b95045ea6a26b9440874b1c6bf0e Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Sun, 15 Feb 2026 20:47:26 -0800
Subject: Vanilla JS (v3): Reduce font size and implement collapsible sidebar
 sections for Tags and Feeds

---
 frontend-vanilla/src/main.ts | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

(limited to 'frontend-vanilla/src/main.ts')

diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts
index 400bf7b..3553ea7 100644
--- a/frontend-vanilla/src/main.ts
+++ b/frontend-vanilla/src/main.ts
@@ -44,12 +44,12 @@ export function renderLayout() {
               <li class="filter-item" data-filter="starred"><a href="/v3/?filter=starred" data-nav="filter" data-value="starred">Starred</a></li>
             </ul>
           </section>
-          <section class="sidebar-section">
-            <h3>Tags</h3>
+          <section class="sidebar-section collapsible collapsed" id="section-tags">
+            <h3>Tags <span class="caret">▶</span></h3>
             <ul id="tag-list"></ul>
           </section>
-          <section class="sidebar-section">
-            <h3>Feeds</h3>
+          <section class="sidebar-section collapsible collapsed" id="section-feeds">
+            <h3>Feeds <span class="caret">▶</span></h3>
             <ul id="feed-list"></ul>
           </section>
         </div>
@@ -96,6 +96,13 @@ export function attachLayoutListeners() {
     }
   });
 
+  // Collapsible sections
+  document.querySelectorAll('.sidebar-section.collapsible h3').forEach(header => {
+    header.addEventListener('click', () => {
+      header.parentElement?.classList.toggle('collapsed');
+    });
+  });
+
   // Event delegation for filters, tags, and feeds in sidebar
   const sidebar = document.getElementById('sidebar');
   sidebar?.addEventListener('click', (e) => {
@@ -420,9 +427,11 @@ function handleRoute() {
     const id = parseInt(route.params.feedId);
     store.setActiveFeed(id);
     fetchItems(route.params.feedId);
+    document.getElementById('section-feeds')?.classList.remove('collapsed');
   } else if (route.path === '/tag' && route.params.tagName) {
     store.setActiveTag(route.params.tagName);
     fetchItems(undefined, route.params.tagName);
+    document.getElementById('section-tags')?.classList.remove('collapsed');
   } else {
     store.setActiveFeed(null);
     store.setActiveTag(null);
-- 
cgit v1.2.3