Update utils/ui.py

utils/ui.py

@@ -2,113 +2,52 @@
 ui.py — Shared styles, CSS injection, and HTML component helpers.
 """
 
-FONTS = "@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');"
-
-BASE_CSS = f"""<style>
-{FONTS}
-:root {{
-  --bg:#07070f;
-  --bg2:#0e0e1a;
-  --bg3:#151525;
-  --border:rgba(99,102,241,0.18);
-  --border2:rgba(99,102,241,0.35);
-  --accent:#6366f1;
-  --accent2:#818cf8;
-  --accent-g:linear-gradient(135deg,#6366f1,#8b5cf6);
-  --text:#f1f0ff;
-  --muted:rgba(241,240,255,0.42);
-  --muted2:rgba(241,240,255,0.22);
-  --success:#22d3a5;
-  --warning:#f59e0b;
-  --danger:#f43f5e;
-  --radius:14px;
-  --radius-sm:8px;
-}}
-
-/* ═══ BASE STYLES (apply to all pages) ═══ */
-html {{
-  scroll-behavior: auto !important;
-  background: var(--bg) !important;
-  height: 100% !important;
-}}
-
-body {{
-  background: var(--bg) !important;
-  color: var(--text) !important;
-  font-family: 'DM Sans', sans-serif !important;
-  min-height: 100vh !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow-x: hidden !important;
-}}
-
-/* ═══ DASHBOARD-SPECIFIC FIXES (only apply to dashboard pages) ═══ */
-[data-testid="stAppViewContainer"]:has([data-testid="stSidebar"]) {{
-  overflow: hidden !important;
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-}}
-
-[data-testid="stAppViewContainer"]:has([data-testid="stSidebar"]) > section {{
-  height: 100vh !important;
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-}}
-
-/* Prevent keyboard scrolling ONLY on dashboard pages */
-[data-testid="stAppViewContainer"]:has([data-testid="stSidebar"]) input,
-[data-testid="stAppViewContainer"]:has([data-testid="stSidebar"]) textarea,
-[data-testid="stAppViewContainer"]:has([data-testid="stSidebar"]) select,
-[data-testid="stAppViewContainer"]:has([data-testid="stSidebar"]) button {{
-  scroll-margin: 0 !important;
-  scroll-snap-margin: 0 !important;
-}}
-
-/* ═══ NUCLEAR CHROME REMOVAL (all pages) ═══ */
+FONTS = """@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');"""
+
+# ── Design tokens ──────────────────────────────────────────────────────────────
+BASE_CSS = """
+<style>
+""" + FONTS + """
+:root {
+  --bg:        #07070f;
+  --bg2:       #0e0e1a;
+  --bg3:       #151525;
+  --border:    rgba(99,102,241,0.18);
+  --border2:   rgba(99,102,241,0.35);
+  --accent:    #6366f1;
+  --accent2:   #818cf8;
+  --accent-g:  linear-gradient(135deg,#6366f1,#8b5cf6);
+  --text:      #f1f0ff;
+  --muted:     rgba(241,240,255,0.42);
+  --muted2:    rgba(241,240,255,0.22);
+  --success:   #22d3a5;
+  --warning:   #f59e0b;
+  --danger:    #f43f5e;
+  --radius:    14px;
+  --radius-sm: 8px;
+}
+
+/* ── Reset chrome ── */
 #MainMenu,footer,header,
 [data-testid="stToolbar"],
-[data-testid="stToolbarActions"],
-[data-testid="stHeader"],
 [data-testid="stDecoration"],
-[data-testid="stStatusWidget"],
 [data-testid="stSidebarNav"],
-[data-testid="collapsedControl"],
-[data-testid="baseButton-header"],
-.stDeployButton,
-.stHamburger,
-button[kind="header"] {{
-  display:none!important;
-  visibility:hidden!important;
-  opacity:0!important;
-  pointer-events:none!important;
-  height:0!important;
-  width:0!important;
-  overflow:hidden!important;
-  position:absolute!important;
-}}
-
-/* ═══ COMMON LAYOUT ═══ */
-.stApp {{
-  background: var(--bg) !important;
-  color: var(--text) !important;
-  font-family: 'DM Sans', sans-serif !important;
-}}
-
-[data-testid="stAppViewContainer"] > section > div.block-container {{
-  max-width: 1160px !important;
-  width: 100% !important;
-  margin: 0 auto !important;
-  padding: 0 24px 80px !important;
-}}
-
-.main .block-container {{
-  padding-top: 0 !important;
-}}
-
-/* ─── FORM ELEMENTS (all pages) ─── */
+section[data-testid="stSidebar"] { display:none!important; }
+
+html,body,.stApp,
+[data-testid="stAppViewContainer"] {
+  background:var(--bg)!important;
+  color:var(--text)!important;
+  font-family:'DM Sans',sans-serif!important;
+}
+
+[data-testid="stAppViewContainer"]>section>div.block-container {
+  max-width:1160px!important;
+  margin:0 auto!important;
+  padding:0 24px 80px!important;
+}
+
+/* ── Labels ── */
 [data-testid="stWidgetLabel"],
 [data-testid="stWidgetLabel"] p,
 [data-testid="stWidgetLabel"] span,
@@ -117,245 +56,168 @@ button[kind="header"] {{
 .stSelectbox>label,
 .stMultiSelect>label,
 .stCheckbox>label,
-.stRadio>label {{
-  color: var(--text) !important;
-  font-size: 0.78rem !important;
-  font-weight: 600 !important;
-  letter-spacing: 1.5px !important;
-  text-transform: uppercase !important;
-  opacity: 1 !important;
-}}
-
-/* Inputs */
+.stRadio>label {
+  color:var(--text)!important;
+  font-size:0.78rem!important;
+  font-weight:600!important;
+  letter-spacing:1.5px!important;
+  text-transform:uppercase!important;
+  opacity:1!important;
+}
+
+/* ── Inputs ── */
 div[data-baseweb="input"]>div,
-div[data-baseweb="textarea"]>div {{
-  background: var(--bg3) !important;
-  border: 1.5px solid var(--border) !important;
-  border-radius: var(--radius-sm) !important;
-  transition: border-color 0.2s !important;
-}}
-
-div[data-baseweb="input"]:focus-within>div {{
-  border-color: var(--accent) !important;
-  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
-}}
-
-div[data-baseweb="input"] input {{
-  background: transparent !important;
-  color: var(--text) !important;
-  font-family: 'DM Sans', sans-serif !important;
-}}
-
-/* Select */
-div[data-baseweb="select"]>div {{
-  background: var(--bg3) !important;
-  border: 1.5px solid var(--border) !important;
-  border-radius: var(--radius-sm) !important;
-  color: var(--text) !important;
-}}
-
-div[data-baseweb="select"] span {{ color: var(--text) !important; }}
-
-div[data-baseweb="popover"] {{
-  background: var(--bg2) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: var(--radius) !important;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
-}}
-
-li[role="option"] {{
-  color: var(--muted) !important;
-  font-family: 'DM Sans', sans-serif !important;
-  border-radius: 6px !important;
-  margin: 2px 6px !important;
-}}
-
-li[role="option"]:hover {{ background: rgba(99,102,241,0.14) !important; color: var(--text) !important; }}
-li[aria-selected="true"] {{ background: rgba(99,102,241,0.22) !important; color: var(--text) !important; }}
-
-/* Multiselect */
-div[data-baseweb="multi-select"]>div {{
-  background: var(--bg3) !important;
-  border: 1.5px solid var(--border) !important;
-  border-radius: var(--radius-sm) !important;
-  min-height: 48px !important;
-}}
-
-span[data-baseweb="tag"] {{
-  background: rgba(99,102,241,0.18) !important;
-  border: 1px solid rgba(99,102,241,0.35) !important;
-  border-radius: 5px !important;
-}}
-
-span[data-baseweb="tag"] span {{ color: var(--text) !important; font-size: 0.82rem !important; }}
-
-/* Buttons */
-.stButton>button {{
-  background: var(--accent-g) !important;
-  border: none !important;
-  color: #fff !important;
-  border-radius: var(--radius-sm) !important;
-  font-family: 'DM Sans', sans-serif !important;
-  font-size: 0.88rem !important;
-  font-weight: 600 !important;
-  padding: 10px 22px !important;
-  transition: all 0.2s !important;
-  box-shadow: 0 4px 18px rgba(99,102,241,0.30) !important;
-}}
-
-.stButton>button:hover {{
-  opacity: 0.9 !important;
-  transform: translateY(-2px) !important;
-  box-shadow: 0 8px 28px rgba(99,102,241,0.45) !important;
-}}
-
-/* Tabs */
-.stTabs [data-baseweb="tab-list"] {{
-  background: var(--bg2) !important;
-  border-radius: var(--radius-sm) !important;
-  padding: 4px !important;
-  gap: 3px !important;
-  border: 1px solid var(--border) !important;
-}}
-
-.stTabs [data-baseweb="tab"] {{
-  background: transparent !important;
-  color: var(--muted) !important;
-  border-radius: 6px !important;
-  font-family: 'DM Sans', sans-serif !important;
-  font-size: 0.82rem !important;
-  font-weight: 500 !important;
-  border: none !important;
-  padding: 8px 16px !important;
-}}
-
-.stTabs [aria-selected="true"] {{
-  background: var(--accent-g) !important;
-  color: #fff !important;
-  box-shadow: 0 2px 10px rgba(99,102,241,0.35) !important;
-}}
-
+div[data-baseweb="textarea"]>div {
+  background:var(--bg3)!important;
+  border:1.5px solid var(--border)!important;
+  border-radius:var(--radius-sm)!important;
+  transition:border-color 0.2s!important;
+}
+div[data-baseweb="input"]:focus-within>div,
+div[data-baseweb="textarea"]:focus-within>div {
+  border-color:var(--accent)!important;
+  box-shadow:0 0 0 3px rgba(99,102,241,0.12)!important;
+}
+div[data-baseweb="input"] input,
+div[data-baseweb="textarea"] textarea {
+  background:transparent!important;
+  color:var(--text)!important;
+  font-family:'DM Sans',sans-serif!important;
+}
+
+/* ── Select ── */
+div[data-baseweb="select"]>div {
+  background:var(--bg3)!important;
+  border:1.5px solid var(--border)!important;
+  border-radius:var(--radius-sm)!important;
+  color:var(--text)!important;
+}
+div[data-baseweb="select"]>div:focus-within {
+  border-color:var(--accent)!important;
+}
+div[data-baseweb="select"] span { color:var(--text)!important; }
+div[data-baseweb="popover"] {
+  background:var(--bg2)!important;
+  border:1px solid var(--border)!important;
+  border-radius:var(--radius)!important;
+  box-shadow:0 20px 60px rgba(0,0,0,0.8)!important;
+}
+li[role="option"] {
+  color:var(--muted)!important;
+  font-family:'DM Sans',sans-serif!important;
+  border-radius:6px!important;
+  margin:2px 6px!important;
+}
+li[role="option"]:hover { background:rgba(99,102,241,0.14)!important; color:var(--text)!important; }
+li[aria-selected="true"] { background:rgba(99,102,241,0.22)!important; color:var(--text)!important; }
+
+/* ── Multiselect ── */
+div[data-baseweb="multi-select"]>div {
+  background:var(--bg3)!important;
+  border:1.5px solid var(--border)!important;
+  border-radius:var(--radius-sm)!important;
+  min-height:48px!important;
+}
+span[data-baseweb="tag"] {
+  background:rgba(99,102,241,0.18)!important;
+  border:1px solid rgba(99,102,241,0.35)!important;
+  border-radius:5px!important;
+}
+span[data-baseweb="tag"] span { color:var(--text)!important; font-size:0.82rem!important; }
+
+/* ── Buttons ── */
+.stButton>button {
+  background:var(--accent-g)!important;
+  border:none!important;
+  color:#fff!important;
+  border-radius:var(--radius-sm)!important;
+  font-family:'DM Sans',sans-serif!important;
+  font-size:0.88rem!important;
+  font-weight:600!important;
+  padding:10px 22px!important;
+  letter-spacing:0.3px!important;
+  transition:all 0.2s!important;
+  box-shadow:0 4px 18px rgba(99,102,241,0.30)!important;
+}
+.stButton>button:hover {
+  opacity:0.9!important;
+  transform:translateY(-2px)!important;
+  box-shadow:0 8px 28px rgba(99,102,241,0.45)!important;
+}
+
+/* ── Tabs ── */
+.stTabs [data-baseweb="tab-list"] {
+  background:var(--bg2)!important;
+  border-radius:var(--radius-sm)!important;
+  padding:4px!important;
+  gap:3px!important;
+  border:1px solid var(--border)!important;
+}
+.stTabs [data-baseweb="tab"] {
+  background:transparent!important;
+  color:var(--muted)!important;
+  border-radius:6px!important;
+  font-family:'DM Sans',sans-serif!important;
+  font-size:0.82rem!important;
+  font-weight:500!important;
+  border:none!important;
+  padding:8px 16px!important;
+}
+.stTabs [aria-selected="true"] {
+  background:var(--accent-g)!important;
+  color:#fff!important;
+  box-shadow:0 2px 10px rgba(99,102,241,0.35)!important;
+}
 .stTabs [data-baseweb="tab-highlight"],
-.stTabs [data-baseweb="tab-border"] {{ display: none !important; }}
-
-/* Sidebar */
-section[data-testid="stSidebar"] {{
-  display: block !important;
-  background: var(--bg2) !important;
-  border-right: 1px solid var(--border) !important;
-}}
-
-section[data-testid="stSidebar"]>div {{ padding: 20px 16px !important; }}
-
-/* Misc */
-hr {{ border-color: var(--border) !important; margin: 20px 0 !important; }}
-.stProgress>div>div {{ background: var(--accent-g) !important; border-radius: 100px !important; }}
-.stProgress>div {{ background: var(--bg3) !important; border-radius: 100px !important; }}
-.stSpinner>div {{ border-top-color: var(--accent) !important; }}
-
-[data-testid="stMetric"] {{
-  background: var(--bg2) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: var(--radius) !important;
-  padding: 16px !important;
-}}
-
-[data-testid="stMetricValue"] {{
-  font-family: 'Syne', sans-serif !important;
-  color: var(--text) !important;
-}}
-
-[data-testid="stMetricLabel"] {{
-  color: var(--muted) !important;
-  font-size: 0.65rem !important;
-  letter-spacing: 2px !important;
-  text-transform: uppercase !important;
-}}
-</style>"""
+.stTabs [data-baseweb="tab-border"] { display:none!important; }
+
+/* ── Progress ── */
+.stProgress>div>div { background:var(--accent-g)!important; border-radius:100px!important; }
+.stProgress>div { background:var(--bg3)!important; border-radius:100px!important; }
+
+/* ── Spinner ── */
+.stSpinner>div { border-top-color:var(--accent)!important; }
+
+/* ── Metric ── */
+[data-testid="stMetric"] {
+  background:var(--bg2)!important;
+  border:1px solid var(--border)!important;
+  border-radius:var(--radius)!important;
+  padding:16px!important;
+}
+[data-testid="stMetricValue"] {
+  font-family:'Syne',sans-serif!important;
+  color:var(--text)!important;
+}
+[data-testid="stMetricLabel"] {
+  color:var(--muted)!important;
+  font-size:0.65rem!important;
+  letter-spacing:2px!important;
+  text-transform:uppercase!important;
+}
+
+hr { border-color:var(--border)!important; margin:20px 0!important; }
+</style>
+"""
 
 def inject_css():
     import streamlit as st
-    
-    # Inject the base CSS
     st.markdown(BASE_CSS, unsafe_allow_html=True)
-    
-    # JavaScript that runs after page load
-    HIDE_CHROME_JS = """
-    <script>
-    (function() {
-        // Check if we're on a dashboard page (has sidebar)
-        function isDashboardPage() {
-            return !!document.querySelector('[data-testid="stSidebar"]');
-        }
-        
-        // Only apply keyboard prevention on dashboard pages
-        if (isDashboardPage()) {
-            document.addEventListener('keydown', function(e) {
-                const keysToPrevent = [
-                    'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
-                    'PageUp', 'PageDown', 'Home', 'End', ' ',
-                    'Space', 'Spacebar'
-                ];
-                
-                if (keysToPrevent.includes(e.key) || e.key === ' ') {
-                    e.preventDefault();
-                    return false;
-                }
-            }, false);
-        }
-        
-        // Prevent scroll restoration on all pages
-        if ('scrollRestoration' in history) {
-            history.scrollRestoration = 'manual';
-        }
-        
-        // Force scroll to top on all pages
-        window.scrollTo(0, 0);
-        
-        // Hide Streamlit chrome on all pages
-        var HIDE = [
-            '#MainMenu','header','footer',
-            '[data-testid="stHeader"]',
-            '[data-testid="stToolbar"]',
-            '[data-testid="stToolbarActions"]',
-            '[data-testid="stDecoration"]',
-            '[data-testid="stStatusWidget"]',
-            '[data-testid="collapsedControl"]',
-            '[data-testid="baseButton-header"]',
-            '.stDeployButton',
-            'button[kind="header"]',
-            '[data-testid="stSidebarNav"]'
-        ];
-        
-        function nuke() {
-            HIDE.forEach(function(sel) {
-                document.querySelectorAll(sel).forEach(function(el) {
-                    el.style.cssText = 'display:none!important;visibility:hidden!important;' +
-                        'opacity:0!important;height:0!important;width:0!important;' +
-                        'position:absolute!important;pointer-events:none!important;overflow:hidden!important;';
-                });
-            });
-        }
-        
-        nuke();
-        new MutationObserver(nuke).observe(document.documentElement,
-            {childList: true, subtree: true, attributes: false});
-        
-        // Ensure body is visible and properly positioned
-        document.body.style.visibility = 'visible';
-        document.body.style.position = 'relative';
-        document.body.style.minHeight = '100vh';
-        
-    })();
-    </script>
-    """
-    
-    st.markdown(HIDE_CHROME_JS, unsafe_allow_html=True)
+
+# ── Component builders ─────────────────────────────────────────────────────────
+def card(content: str, cls: str = "") -> str:
+    return f"""<div style="background:var(--bg2);border:1px solid var(--border);
+    border-radius:var(--radius);padding:24px;{cls}">{content}</div>"""
+
+def badge(text: str, color: str = "var(--accent)") -> str:
+    return (f'<span style="display:inline-block;background:{color}22;border:1px solid {color}55;'
+            f'border-radius:4px;padding:2px 9px;font-size:0.72rem;font-weight:600;color:{color}">{text}</span>')
 
 def stat_card(icon, label, value, sub="", accent="var(--accent)"):
     return f"""
 <div style="background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
-  padding:20px 16px;text-align:center;position:relative;overflow:hidden">
+padding:20px 16px;text-align:center;position:relative;overflow:hidden;
+transition:transform 0.2s,border-color 0.2s">
   <div style="position:absolute;top:0;left:15%;right:15%;height:2px;
     background:linear-gradient(90deg,transparent,{accent},transparent)"></div>
   <div style="font-size:1.4rem;margin-bottom:8px">{icon}</div>
@@ -366,14 +228,29 @@ def stat_card(icon, label, value, sub="", accent="var(--accent)"):
   {f'<div style="font-size:0.72rem;color:var(--muted2);margin-top:3px">{sub}</div>' if sub else ''}
 </div>"""
 
-def section_header(title, sub=""):
+def section_header(title: str, sub: str = "") -> str:
     return f"""
 <div style="display:flex;align-items:center;gap:12px;margin:28px 0 16px">
-  <div style="width:3px;height:22px;background:var(--accent-g);
-    border-radius:2px;flex-shrink:0"></div>
+  <div style="width:3px;height:22px;background:var(--accent-g);border-radius:2px;flex-shrink:0"></div>
   <div>
-    <div style="font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;
-      color:var(--text)">{title}</div>
+    <div style="font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text)">{title}</div>
     {f'<div style="font-size:0.75rem;color:var(--muted);margin-top:1px">{sub}</div>' if sub else ''}
   </div>
 </div>"""
+
+def topnav(username: str, page: str = "") -> str:
+    return f"""
+<div style="display:flex;align-items:center;justify-content:space-between;
+  padding:14px 0 12px;border-bottom:1px solid var(--border);margin-bottom:24px;
+  position:sticky;top:0;z-index:100;background:rgba(7,7,15,0.95);
+  backdrop-filter:blur(20px)">
+  <div style="font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;
+    background:var(--accent-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
+    letter-spacing:1px">⚡ FitPro AI</div>
+  <div style="display:flex;align-items:center;gap:10px">
+    <span style="font-size:0.78rem;color:var(--muted)">
+      <span style="color:var(--text);font-weight:600">{username}</span>
+    </span>
+    {'<span style="font-size:0.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;border:1px solid var(--border2);border-radius:100px;color:var(--accent2)">'+page+'</span>' if page else ''}
+  </div>
+</div>"""