Sidebar Chat button Quality of Life improvement. (#155)

static/app.js

@@ -1025,16 +1025,10 @@ function initializeEventListeners() {
     });
   }
 
-  // "Chats" sidebar section header:
+  // Manage Chats — opens Full Library modal (decoupled from Chats accordion toggle)
-  //   • Click the auto-injected chevron (section-management.js adds it)
+  const chatsLibraryBtn = el('chats-library-btn');
-  //     or the empty area of the title → toggle collapse of the list.
+  if (chatsLibraryBtn) {
-  //   • Click the "Chats" text label → open the Chats tab of the library.
+    chatsLibraryBtn.addEventListener('click', (e) => {
-  // We stop propagation on the label so section-management.js's
-  // section-title click handler (which toggles collapse) doesn't also
-  // fire when the user is trying to open the library.
-  const chatsSectionLabel = el('chats-section-label');
-  if (chatsSectionLabel) {
-    chatsSectionLabel.addEventListener('click', (e) => {
       e.stopPropagation();
       if (sessionModule) sessionModule.openLibrary('chats');
     });

static/index.html

@@ -693,8 +693,16 @@
 
       <div class="section" id="sessions-section">
         <div class="section-header-flex">
-          <span class="section-title" id="chats-section-title"><svg class="section-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><span id="chats-section-label" class="section-title-label" style="cursor:pointer;" title="Open Library">Chats</span><span id="chats-notif-dot" class="sidebar-notif-dot" style="display:none"></span></span>
+          <span class="section-title" id="chats-section-title"><svg class="section-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><span id="chats-section-label" class="section-title-label">Chats</span><span id="chats-notif-dot" class="sidebar-notif-dot" style="display:none"></span></span>
-          <div style="position:relative; display:inline-block;">
+          <div style="position:relative; display:inline-block; display:flex; gap:4px; align-items:center;">
+            <button type="button" class="section-header-btn chats-manage-btn" id="chats-library-btn" title="Manage Chats (Library)">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="3" width="7" height="7"></rect>
+                <rect x="14" y="3" width="7" height="7"></rect>
+                <rect x="14" y="14" width="7" height="7"></rect>
+                <rect x="3" y="14" width="7" height="7"></rect>
+              </svg>
+            </button>
             <button type="button" class="section-header-btn" id="session-sort-btn" title="Sort sessions">
               <svg class="sort-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <line x1="4" y1="6" x2="20" y2="6"/>

static/style.css

@@ -1208,6 +1208,25 @@ body.bg-pattern-sparkles {
     .section-header-btn.active { opacity: 0.9; color: var(--accent); }
     .section-header-btn svg { width: 12px; height: 12px; }
 
+    /* Chats library — grid icon, hover-reveal so the header only toggles collapse */
+    #sessions-section .chats-manage-btn {
+      opacity: 0;
+      transition: opacity 0.12s, background 0.08s;
+    }
+    #sessions-section .section-header-flex:hover .chats-manage-btn,
+    #sessions-section .chats-manage-btn:hover,
+    #sessions-section .chats-manage-btn:focus-visible {
+      opacity: 0.45;
+    }
+    #sessions-section .chats-manage-btn:hover,
+    #sessions-section .chats-manage-btn:focus-visible {
+      opacity: 1;
+    }
+    @media (hover: none) {
+      #sessions-section .chats-manage-btn { opacity: 0.35; }
+      #sessions-section .chats-manage-btn:active { opacity: 1; }
+    }
+
     /* Collapse chevron */
     .section-collapse-btn {
       all: unset;