From 04c41ee740f2e88f8d28283b8a70cd75b267d2c0 Mon Sep 17 00:00:00 2001
From: Tomas Kracmar <tomas.kracmar@cqre.net>
Date: Wed, 22 Apr 2026 11:31:37 +0200
Subject: [PATCH] =?UTF-8?q?style:=20UI=20polish=20=E2=80=94=20topbar,=20fo?=
 =?UTF-8?q?oter,=20user=20info,=20product=20feel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add sticky top navigation bar with brand, repo/docs links, user chip
- Show logged-in user name + email from MSAL account
- Add footer with version, issue link, repo link, docs link
- Move action buttons (Fetch/Refresh/Login) to compact topbar
- Clean up hero section (removed buttons, just title + tagline)
- Bump CSS cache-buster to v=9
- Responsive stacking for mobile
---
 backend/frontend/index.html |  57 ++++++++++--
 backend/frontend/style.css  | 180 +++++++++++++++++++++++++++++++++++-
 2 files changed, 229 insertions(+), 8 deletions(-)
diff --git a/backend/frontend/index.html b/backend/frontend/index.html
index 157a264..77840ec 100644
--- a/backend/frontend/index.html
+++ b/backend/frontend/index.html
@@ -4,23 +4,49 @@
   <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=8" />
+  <link rel="stylesheet" href="/style.css?v=9" />
   <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>
 <body>
   <div class="page" x-data="aocApp()" x-init="initApp()">
+    <nav class="topbar">
+      <div class="topbar__brand">
+        <span class="topbar__logo">🔍</span>
+        <span class="topbar__name">AOC</span>
+        <span class="version-badge" x-text="appVersion"></span>
+      </div>
+      <div class="topbar__links">
+        <a :href="repoUrl" target="_blank" rel="noopener">Repository</a>
+        <a :href="docsUrl" target="_blank" rel="noopener">Docs</a>
+      </div>
+      <div class="topbar__meta">
+        <template x-if="account">
+          <div class="user-chip">
+            <div class="user-avatar" x-text="(account.name || account.username || '?').charAt(0).toUpperCase()"></div>
+            <div class="user-details">
+              <span class="user-name" x-text="account.name || account.username || ''"></span>
+              <span class="user-email" x-text="account.username || ''"></span>
+            </div>
+          </div>
+        </template>
+        <template x-if="!account && authConfig?.auth_enabled">
+          <span class="login-hint">Not signed in</span>
+        </template>
+      </div>
+      <div class="topbar__actions">
+        <button id="fetchBtn" class="ghost btn--compact" aria-label="Fetch latest audit logs" @click="fetchLogs()">Fetch</button>
+        <button id="refreshBtn" class="ghost btn--compact" aria-label="Refresh events" @click="loadEvents(currentCursor)">Refresh</button>
+        <button id="authBtn" class="ghost btn--compact" aria-label="Login" x-text="authBtnText" @click="toggleAuth()"></button>
+      </div>
+    </nav>
+
     <header class="hero">
       <div>
-        <p class="eyebrow">Admin Operations Center <span class="version-badge" x-text="appVersion"></span></p>
+        <p class="eyebrow">Admin Operations Center</p>
         <h1>Audit Log Explorer</h1>
         <p class="lede">Search and review Microsoft audit events from Entra, Intune, Exchange, SharePoint, and Teams.</p>
       </div>
-      <div class="cta">
-        <button id="authBtn" class="ghost" aria-label="Login" x-text="authBtnText" @click="toggleAuth()"></button>
-        <button id="fetchBtn" aria-label="Fetch latest audit logs" @click="fetchLogs()">Fetch new</button>
-        <button id="refreshBtn" aria-label="Refresh events" @click="loadEvents(currentCursor)">Refresh</button>
-      </div>
     </header>
 
     <section class="panel">
@@ -239,6 +265,21 @@
         <pre id="modalBody" x-text="modalBody"></pre>
       </div>
     </div>
+
+    <footer class="footer">
+      <div class="footer__left">
+        <span class="footer__brand">Admin Operations Center</span>
+        <span class="footer__version" x-text="'v' + appVersion"></span>
+      </div>
+      <div class="footer__center">
+        <a :href="repoUrl + '/issues/new'" target="_blank" rel="noopener">🐛 Report an issue</a>
+        <a :href="repoUrl" target="_blank" rel="noopener">💻 Source code</a>
+        <a :href="docsUrl" target="_blank" rel="noopener">📖 Documentation</a>
+      </div>
+      <div class="footer__right">
+        <span>Built with ❤️ by CQRE</span>
+      </div>
+    </footer>
   </div>
 
   <script>
@@ -269,6 +310,8 @@
         options: { actors: [], services: [], operations: [], results: [] },
         savedSearches: [],
         appVersion: '',
+        repoUrl: 'https://git.cqre.net/cqrenet/aoc',
+        docsUrl: 'https://git.cqre.net/cqrenet/aoc/src/branch/main/README.md',
         aiFeaturesEnabled: true,
         askQuestionText: '',
         askLoading: false,
diff --git a/backend/frontend/style.css b/backend/frontend/style.css
index 5f4c98b..892aec0 100644
--- a/backend/frontend/style.css
+++ b/backend/frontend/style.css
@@ -28,7 +28,115 @@ body {
 .page {
   max-width: 1100px;
   margin: 0 auto;
-  padding: 32px 20px 60px;
+  padding: 0 20px 40px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 0;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+
+.topbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.topbar__logo {
+  font-size: 20px;
+}
+
+.topbar__links {
+  display: flex;
+  gap: 16px;
+  margin-right: auto;
+}
+
+.topbar__links a {
+  color: var(--muted);
+  font-size: 13px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s ease;
+}
+
+.topbar__links a:hover {
+  color: var(--accent-strong);
+}
+
+.topbar__meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 4px 12px 4px 4px;
+}
+
+.user-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  color: #0b1220;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.user-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.user-email {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.login-hint {
+  font-size: 12px;
+  color: var(--muted);
+  font-style: italic;
+}
+
+.topbar__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.btn--compact {
+  padding: 8px 14px;
+  font-size: 13px;
+  border-radius: 8px;
 }
 
 .hero {
@@ -37,6 +145,7 @@ body {
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 20px;
+  padding-top: 16px;
 }
 
 .eyebrow {
@@ -508,7 +617,70 @@ input {
   gap: 4px;
 }
 
+.footer {
+  margin-top: auto;
+  padding: 20px 0;
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.footer__left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.footer__brand {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.footer__version {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(125, 211, 252, 0.1);
+  border: 1px solid rgba(125, 211, 252, 0.2);
+  color: var(--accent-strong);
+}
+
+.footer__center {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.footer__center a {
+  color: var(--muted);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.footer__center a:hover {
+  color: var(--accent-strong);
+}
+
+.footer__right {
+  font-size: 12px;
+}
+
 @media (max-width: 640px) {
+  .topbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .topbar__links {
+    margin-right: 0;
+  }
+
   .hero {
     flex-direction: column;
   }
@@ -522,4 +694,10 @@ input {
     flex-direction: column;
     align-items: stretch;
   }
+
+  .footer {
+    flex-direction: column;
+    text-align: center;
+    gap: 10px;
+  }
 }
