From a194c78c59e2dc4a8e0da976ca9b01e48ce82e26 Mon Sep 17 00:00:00 2001
From: Tomas Kracmar <tomas.kracmar@cqre.net>
Date: Wed, 22 Apr 2026 14:48:03 +0200
Subject: [PATCH] feat: all panels are now collapsible

- Source Health, Alerts, Alert Rules, Filters, Ask, Events panels all collapsible
- Click panel header to expand/collapse
- Chevron indicator rotates to show state
- Collapsed state persisted to localStorage (aoc_panels key)
---
 backend/frontend/index.html | 78 ++++++++++++++++++++++++++++++-------
 backend/frontend/style.css  | 25 ++++++++++++
 2 files changed, 88 insertions(+), 15 deletions(-)

diff --git a/backend/frontend/index.html b/backend/frontend/index.html
index bda1650..71e814a 100644
--- a/backend/frontend/index.html
+++ b/backend/frontend/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Admin Operations Center</title>
-  <link rel="stylesheet" href="/style.css?v=14" />
+  <link rel="stylesheet" href="/style.css?v=15" />
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
   <script src="https://alcdn.msauth.net/browser/2.37.0/js/msal-browser.min.js" crossorigin="anonymous"></script>
 </head>
@@ -56,8 +56,11 @@
     </header>
 
     <section class="panel">
-      <h3>Source Health</h3>
-      <div class="source-health">
+      <div class="panel-header panel-header--collapsible" @click="togglePanel('sourceHealth')">
+        <h3>Source Health</h3>
+        <span class="panel-toggle" :class="panelState.sourceHealth ? 'panel-toggle--open' : ''">▸</span>
+      </div>
+      <div x-show="panelState.sourceHealth">
         <template x-for="src in sourceHealth" :key="src.source">
           <div class="health-card">
             <strong x-text="src.source"></strong>
@@ -71,11 +74,15 @@
     </section>
 
     <section class="panel">
-      <div class="panel-header">
+      <div class="panel-header panel-header--collapsible" @click="togglePanel('alerts')">
         <h3>Alerts</h3>
-        <span x-text="`${alertSummary.total_open} open`" class="alert-open-count"></span>
+        <div style="display:flex;align-items:center;gap:10px;">
+          <span x-text="`${alertSummary.total_open} open`" class="alert-open-count"></span>
+          <span class="panel-toggle" :class="panelState.alerts ? 'panel-toggle--open' : ''">▸</span>
+        </div>
       </div>
-      <div class="alert-filters">
+      <div x-show="panelState.alerts">
+        <div class="alert-filters">
         <select x-model="alertsFilter.status" @change="alertsPage = 1; loadAlerts()">
           <option value="">All statuses</option>
           <option value="open">Open</option>
@@ -117,14 +124,19 @@
         <span x-text="`Page ${alertsPage}`"></span>
         <button type="button" :disabled="alertsPage * 20 >= alertsTotal" @click="alertsPage++; loadAlerts()">Next</button>
       </div>
+      </div>
     </section>
 
     <section class="panel">
-      <div class="panel-header">
+      <div class="panel-header panel-header--collapsible" @click="togglePanel('rules')">
         <h3>Alert Rules</h3>
-        <button type="button" class="btn--compact" @click="openRuleEditor()">+ Add rule</button>
+        <div style="display:flex;align-items:center;gap:10px;">
+          <button type="button" class="btn--compact" @click.stop="openRuleEditor()">+ Add rule</button>
+          <span class="panel-toggle" :class="panelState.rules ? 'panel-toggle--open' : ''">▸</span>
+        </div>
       </div>
-      <div class="rules-list">
+      <div x-show="panelState.rules">
+        <div class="rules-list">
         <template x-for="rule in rules" :key="rule.id">
           <div class="rule-card" :class="rule.enabled ? '' : 'rule-card--disabled'">
             <div class="rule-card__meta">
@@ -151,6 +163,7 @@
       <div class="rules-empty" x-show="rules.length === 0">
         <p>No custom rules yet. Pre-built admin-ops rules are active by default. Add your own rules to detect specific patterns.</p>
       </div>
+      </div>
 
       <div id="ruleModal" class="modal hidden" role="dialog" aria-modal="true" :class="{ 'hidden': !ruleModalOpen }">
         <div class="modal__content" style="max-width: 600px;">
@@ -210,7 +223,11 @@
     </section>
 
     <section class="panel">
-      <form id="filters" class="filters" @submit.prevent="resetPagination(); loadEvents()">
+      <div class="panel-header panel-header--collapsible" @click="togglePanel('filters')">
+        <h3>Filters</h3>
+        <span class="panel-toggle" :class="panelState.filters ? 'panel-toggle--open' : ''">▸</span>
+      </div>
+      <form id="filters" class="filters" @submit.prevent="resetPagination(); loadEvents()" x-show="panelState.filters">
         <div class="filter-row">
           <label>
             User (name/UPN)
@@ -304,8 +321,11 @@
     </section>
 
     <section class="panel" x-show="aiFeaturesEnabled">
-      <h3>Ask a question</h3>
-      <form class="ask-form" @submit.prevent="askQuestion()">
+      <div class="panel-header panel-header--collapsible" @click="togglePanel('ask')">
+        <h3>Ask a question</h3>
+        <span class="panel-toggle" :class="panelState.ask ? 'panel-toggle--open' : ''">▸</span>
+      </div>
+      <form class="ask-form" @submit.prevent="askQuestion()" x-show="panelState.ask">
         <div class="ask-row">
           <input
             type="text"
@@ -347,11 +367,15 @@
     </section>
 
     <section class="panel">
-      <div class="panel-header">
+      <div class="panel-header panel-header--collapsible" @click="togglePanel('events')">
         <h2>Events</h2>
-        <span id="count" x-text="countText"></span>
+        <div style="display:flex;align-items:center;gap:10px;">
+          <span id="count" x-text="countText"></span>
+          <span class="panel-toggle" :class="panelState.events ? 'panel-toggle--open' : ''">▸</span>
+        </div>
       </div>
-      <div id="status" class="status" aria-live="polite" x-text="statusText"></div>
+      <div x-show="panelState.events">
+        <div id="status" class="status" aria-live="polite" x-text="statusText"></div>
       <div id="events" class="events">
         <template x-for="(evt, idx) in events" :key="evt._id || evt.id || idx">
           <article class="event">
@@ -391,6 +415,7 @@
         <span x-text="`Page ${cursorStack.length + 1}`"></span>
         <button type="button" id="nextPage" :disabled="!nextCursor" @click="goNext()">Next</button>
       </div>
+      </div>
     </section>
 
     <div id="modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle" :class="{ 'hidden': !modalOpen }">
@@ -452,6 +477,7 @@
         filters: {
           actor: '', selectedServices: [], search: '', operation: '', result: '', start: '', end: '', limit: 24, includeTags: '', excludeTags: '',
         },
+        panelState: { sourceHealth: true, alerts: true, rules: true, filters: true, ask: true, events: true },
         options: { actors: [], services: [], operations: [], results: [] },
         savedSearches: [],
         appVersion: '',
@@ -479,6 +505,7 @@
           await this.loadVersion();
           await this.initAuth();
           this.loadSavedFilters();
+          this.loadPanelState();
           if (!this.authConfig?.auth_enabled || this.accessToken) {
             await this.loadFilterOptions();
             await this.loadSavedSearches();
@@ -508,6 +535,27 @@
           } catch {}
         },
 
+        loadPanelState() {
+          try {
+            const saved = localStorage.getItem('aoc_panels');
+            if (saved) {
+              const parsed = JSON.parse(saved);
+              Object.keys(parsed).forEach((k) => { if (this.panelState[k] !== undefined) this.panelState[k] = parsed[k]; });
+            }
+          } catch {}
+        },
+
+        savePanelState() {
+          try {
+            localStorage.setItem('aoc_panels', JSON.stringify(this.panelState));
+          } catch {}
+        },
+
+        togglePanel(key) {
+          this.panelState[key] = !this.panelState[key];
+          this.savePanelState();
+        },
+
         async loadVersion() {
           try {
             const res = await fetch('/api/version');
diff --git a/backend/frontend/style.css b/backend/frontend/style.css
index 9b5c7c0..3dc3a99 100644
--- a/backend/frontend/style.css
+++ b/backend/frontend/style.css
@@ -274,6 +274,31 @@ input {
   margin-bottom: 8px;
 }
 
+.panel-header--collapsible {
+  cursor: pointer;
+  user-select: none;
+  padding: 4px 0;
+  margin-bottom: 0;
+}
+
+.panel-header--collapsible:hover {
+  opacity: 0.85;
+}
+
+.panel-toggle {
+  display: inline-block;
+  font-size: 14px;
+  color: var(--muted);
+  transition: transform 0.2s ease;
+  transform: rotate(-90deg);
+  width: 16px;
+  text-align: center;
+}
+
+.panel-toggle--open {
+  transform: rotate(0deg);
+}
+
 #count {
   color: var(--muted);
   font-size: 14px;