From d0f98487175352b218be5b88f809d5be6f2be905 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Mon, 18 May 2026 12:57:50 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20auth=20system=20=E2=80=94=20CSS=20page?=
 =?UTF-8?q?=20transitions,=20API=20helpers,=20users/tokens=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 services/web-ui/public/css/common.css | 84 ++++++++++++++++++++++++++-
 1 file changed, 81 insertions(+), 3 deletions(-)

diff --git a/services/web-ui/public/css/common.css b/services/web-ui/public/css/common.css
index 66e1af6..7edab99 100644
--- a/services/web-ui/public/css/common.css
+++ b/services/web-ui/public/css/common.css
@@ -134,6 +134,16 @@ svg { display: block; flex-shrink: 0; }
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  animation: page-in 200ms ease-out;
+}
+
+/* ================================================================
+   PAGE TRANSITION
+   ================================================================ */
+
+@keyframes page-in {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
 /* ================================================================
@@ -222,11 +232,61 @@ svg { display: block; flex-shrink: 0; }
 .nav-item.active svg { opacity: 1; }
 
 .sidebar-footer {
-  padding: var(--sp-4);
+  padding: var(--sp-3) var(--sp-2);
   border-top: 1px solid var(--border);
   flex-shrink: 0;
 }
 
+/* ── Sidebar user widget ─────────────────────────────────── */
+
+.sidebar-user {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: var(--sp-2);
+  border-radius: var(--r-md);
+  transition: background var(--t-fast);
+}
+
+.sidebar-user:hover { background: var(--bg-surface); }
+
+.sidebar-user-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--r-sm);
+  background: var(--accent-subtle);
+  border: 1px solid var(--accent-border);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
+.sidebar-user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar-user-name {
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-user-role {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
 /* ================================================================
    TOPBAR
    ================================================================ */
@@ -523,6 +583,10 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
 .badge-srt  { background: var(--status-green-bg); color: var(--status-green); }
 .badge-rtmp { background: var(--accent-subtle);   color: var(--accent); }
 
+.badge-admin  { background: oklch(65% 0.16 245 / 0.12); color: oklch(72% 0.16 245); }
+.badge-editor { background: var(--accent-subtle); color: var(--accent); }
+.badge-viewer { background: oklch(25% 0.014 250); color: var(--text-secondary); }
+
 /* ================================================================
    STATUS DOTS
    ================================================================ */
@@ -733,7 +797,7 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
 .progress-fill--error   { background: var(--status-red); }
 
 /* ================================================================
-   INFO BANNER (inline connection info etc.)
+   INFO BANNER
    ================================================================ */
 
 .info-banner {
@@ -756,7 +820,7 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
 }
 
 /* ================================================================
-   SEGMENT (conditional field groups)
+   SEGMENT
    ================================================================ */
 
 .conditional-fields { display: flex; flex-direction: column; gap: var(--sp-5); }
@@ -785,3 +849,17 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
 .mt-2          { margin-top: var(--sp-2); }
 .mt-4          { margin-top: var(--sp-4); }
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+
+/* Token reveal box */
+.token-reveal {
+  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
+  font-size: var(--text-xs);
+  padding: var(--sp-3) var(--sp-4);
+  background: var(--bg-base);
+  border: 1px solid var(--accent-border);
+  border-radius: var(--r-md);
+  color: var(--accent);
+  word-break: break-all;
+  line-height: 1.7;
+  user-select: all;
+}