From 2157222e17cf35477dded98b625b7cb5a1920b0a Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 20 Dec 2025 02:51:28 -0500
Subject: [PATCH] topppp

---
 src/components/Layout/TopBar.jsx              |  46 +++
 .../Layout/TopBar.jsx.bak.1766214623          | 287 +++++++++++++++
 .../Layout/TopBar.jsx.bak.fix.1766214994      | 332 ++++++++++++++++++
 src/styles/topbar.css                         |  91 +++++
 src/styles/topbar.css.bak.1766214715          | 251 +++++++++++++
 5 files changed, 1007 insertions(+)
 create mode 100644 src/components/Layout/TopBar.jsx.bak.1766214623
 create mode 100644 src/components/Layout/TopBar.jsx.bak.fix.1766214994
 create mode 100644 src/styles/topbar.css.bak.1766214715

diff --git a/src/components/Layout/TopBar.jsx b/src/components/Layout/TopBar.jsx
index 5a0e45b..ddc7d39 100644
--- a/src/components/Layout/TopBar.jsx
+++ b/src/components/Layout/TopBar.jsx
@@ -59,6 +59,44 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
     if (authenticated) setShowAuth(false);
   }, [authenticated]);
 
+  /* SW_URL_NOTICE:BEGIN */
+  useEffect(() => {
+    try {
+      const qs = new URLSearchParams(window.location.search || "");
+      const verified = qs.get("verified") || qs.get("email_verified");
+      const signup = qs.get("signup");
+      const notice = qs.get("notice");
+
+      if (verified === "1" || verified === "true") {
+        setSignupInfo("✅ Email confirmé. Tu peux te connecter.");
+        setMode("login");
+        setShowAuth(true);
+      } else if (signup === "1" || signup === "true") {
+        setSignupInfo("✅ Compte créé. Vérifie tes emails (et le spam), puis connecte-toi.");
+        setMode("login");
+        setShowAuth(true);
+      } else if (notice) {
+        // allow custom notice (URL-encoded)
+        const msg = decodeURIComponent(notice);
+        if (msg && msg.trim()) {
+          setSignupInfo(msg.trim());
+          setMode("login");
+          setShowAuth(true);
+        }
+      }
+
+      // clean URL (remove params without reload)
+      if (verified || signup || notice) {
+        const clean = window.location.pathname + (window.location.hash || "");
+        window.history.replaceState({}, "", clean);
+      }
+} catch (e) {
+      // ignore
+    }
+  }, []);
+  /* SW_URL_NOTICE:END */
+
+
   const handleLoginSubmit = async (e) => {
     e.preventDefault();
     await login(loginUser, loginPass);
@@ -218,6 +256,14 @@ export default function TopBar({ theme = "dark", onChangeTheme }) {
               </button>
             </div>
 
+            {/* SW_MODAL_NOTICE:BEGIN */}
+            {signupInfo ? (
+              <div className="auth-notice auth-notice-success">
+                {signupInfo}
+              </div>
+            ) : null}
+            {/* SW_MODAL_NOTICE:END */}
+
             {mode === "login" ? (
               <form className="auth-form" onSubmit={handleLoginSubmit}>
                 <label>
diff --git a/src/components/Layout/TopBar.jsx.bak.1766214623 b/src/components/Layout/TopBar.jsx.bak.1766214623
new file mode 100644
index 0000000..5a0e45b
--- /dev/null
+++ b/src/components/Layout/TopBar.jsx.bak.1766214623
@@ -0,0 +1,287 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "../../auth/AuthContext";
+import { registerUser } from "../../api/client";
+import AuthToast from "../Auth/AuthToast";
+
+const THEME_LABELS = { dark: "Dark", blue: "Blue", light: "Light" };
+
+function initialLetter(name = "") {
+  const s = (name || "").trim();
+  return s ? s[0].toUpperCase() : "G";
+}
+
+export default function TopBar({ theme = "dark", onChangeTheme }) {
+  const {
+    loading,
+    authenticated,
+    username,
+    login,
+    logout,
+    needsEmailVerification,
+    openKeycloak,
+    lastError,
+    lastErrorCode,
+    lastInfo,
+    clearError,
+    clearInfo,
+  } = useAuth();
+
+  const [showAuth, setShowAuth] = useState(false);
+  const [mode, setMode] = useState("login");
+
+  const [loginUser, setLoginUser] = useState("");
+  const [loginPass, setLoginPass] = useState("");
+
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [regUser, setRegUser] = useState("");
+  const [regEmail, setRegEmail] = useState("");
+  const [regPass, setRegPass] = useState("");
+  const [signupError, setSignupError] = useState("");
+  const [signupInfo, setSignupInfo] = useState("");
+  const [signupLoading, setSignupLoading] = useState(false);
+
+  const openModal = (nextMode) => {
+    setMode(nextMode);
+    setShowAuth(true);
+    setSignupError("");
+    setSignupInfo("");
+  };
+
+  const closeModal = () => {
+    setShowAuth(false);
+    setLoginPass("");
+    setSignupError("");
+    setSignupInfo("");
+  };
+
+  useEffect(() => {
+    if (authenticated) setShowAuth(false);
+  }, [authenticated]);
+
+  const handleLoginSubmit = async (e) => {
+    e.preventDefault();
+    await login(loginUser, loginPass);
+  };
+
+  const handleSignupSubmit = async (e) => {
+    e.preventDefault();
+    setSignupError("");
+    setSignupInfo("");
+
+    if (!firstName.trim() || !lastName.trim() || !regUser.trim() || !regEmail.trim() || !regPass) {
+      setSignupError("First name, last name, username, email and password are required.");
+      return;
+    }
+
+    try {
+      setSignupLoading(true);
+
+      await registerUser({
+        username: regUser.trim(),
+        email: regEmail.trim(),
+        password: regPass,
+        firstName: firstName.trim(),
+        lastName: lastName.trim(),
+      });
+
+      setSignupInfo("Account created. Check your inbox (spam) to verify your email, then login.");
+      setMode("login");
+      setLoginUser(regUser.trim());
+      setLoginPass("");
+    } catch (err) {
+      console.error(err);
+      setSignupError(err.message || "Registration error.");
+    } finally {
+      setSignupLoading(false);
+    }
+  };
+
+  const toast = useMemo(() => {
+    if (lastError) {
+      const t = needsEmailVerification ? "warn" : "error";
+      const title = needsEmailVerification ? "Vérification email requise" : "Connexion impossible";
+      return { type: t, title, message: lastError };
+    }
+    if (lastInfo) {
+      return { type: "success", title: "", message: lastInfo };
+    }
+    return null;
+  }, [lastError, lastInfo, needsEmailVerification]);
+
+  return (
+    <>
+      {/* Toast area (under topbar) */}
+      {(toast?.message) && (
+        <div className="sw-toast-wrap">
+          <AuthToast
+            type={toast.type}
+            title={toast.title}
+            message={toast.message}
+            onClose={() => {
+              if (lastError) clearError();
+              if (lastInfo) clearInfo();
+            }}
+          />
+          {needsEmailVerification && (
+            <div style={{ maxWidth: 980, margin: "10px auto 0", display: "flex", gap: 10, justifyContent: "center" }}>
+              <button className="btn-secondary" type="button" onClick={openKeycloak}>
+                Ouvrir Keycloak (Proceed)
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      <header className="topbar">
+        <div style={{ display: "flex", alignItems: "center", gap: "0.65rem" }}>
+          <div className="logo-circle">SW</div>
+          <div className="title-block">
+            <div className="main-title">SOCIOWIRE.com</div>
+            <div className="sub-title">Wired to life</div>
+          </div>
+        </div>
+
+        <div className="topbar-right">
+          <div className="theme-switch">
+            {["dark", "blue", "light"].map((t) => (
+              <button
+                key={t}
+                type="button"
+                className={"theme-dot" + (theme === t ? " theme-dot-active" : "")}
+                title={THEME_LABELS[t]}
+                onClick={() => onChangeTheme && onChangeTheme(t)}
+              >
+                {THEME_LABELS[t][0]}
+              </button>
+            ))}
+          </div>
+
+          {authenticated ? (
+            <div style={{ display: "flex", alignItems: "center", gap: "0.45rem" }}>
+              <div className="sw-userchip" title={username}>
+                <div className="sw-avatar">
+                  <span>{initialLetter(username)}</span>
+                </div>
+                <div className="sw-usertext">
+                  <div className="sw-userline">Connecté</div>
+                  <div className="sw-userhandle">@{username || "user"}</div>
+                </div>
+              </div>
+              <button className="btn-primary" onClick={logout}>
+                Logout
+              </button>
+            </div>
+          ) : (
+            <div style={{ display: "flex", gap: "0.35rem", alignItems: "center" }}>
+              <div className="sw-userchip" title="Guest">
+                <div className="sw-avatar">
+                  <i className="fa-solid fa-user" />
+                </div>
+                <div className="sw-usertext">
+                  <div className="sw-userline">{loading ? "Loading…" : "Guest"}</div>
+                  <div className="sw-userhandle">anon</div>
+                </div>
+              </div>
+
+              <button type="button" className="btn-primary" onClick={() => openModal("login")}>
+                Login
+              </button>
+              <button type="button" className="btn-secondary" onClick={() => openModal("signup")}>
+                Sign up
+              </button>
+            </div>
+          )}
+        </div>
+      </header>
+
+      {showAuth && (
+        <div className="auth-modal-backdrop" onClick={closeModal}>
+          <div className="auth-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="auth-modal-header">
+              <button
+                type="button"
+                className={"auth-tab" + (mode === "login" ? " auth-tab-active" : "")}
+                onClick={() => setMode("login")}
+              >
+                Login
+              </button>
+              <button
+                type="button"
+                className={"auth-tab" + (mode === "signup" ? " auth-tab-active" : "")}
+                onClick={() => setMode("signup")}
+              >
+                Sign up
+              </button>
+              <button type="button" className="auth-close" onClick={closeModal}>
+                ✕
+              </button>
+            </div>
+
+            {mode === "login" ? (
+              <form className="auth-form" onSubmit={handleLoginSubmit}>
+                <label>
+                  Username
+                  <input
+                    type="text"
+                    value={loginUser}
+                    onChange={(e) => setLoginUser(e.target.value)}
+                    autoComplete="username"
+                  />
+                </label>
+                <label>
+                  Password
+                  <input
+                    type="password"
+                    value={loginPass}
+                    onChange={(e) => setLoginPass(e.target.value)}
+                    autoComplete="current-password"
+                  />
+                </label>
+                <button type="submit" className="btn-primary btn-full" disabled={loading}>
+                  {loading ? "..." : "Sign in"}
+                </button>
+              </form>
+            ) : (
+              <form className="auth-form" onSubmit={handleSignupSubmit}>
+                <div className="auth-row">
+                  <label>
+                    First name
+                    <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+                  </label>
+                  <label>
+                    Last name
+                    <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
+                  </label>
+                </div>
+                <label>
+                  Username
+                  <input type="text" value={regUser} onChange={(e) => setRegUser(e.target.value)} />
+                </label>
+                <label>
+                  Email
+                  <input type="email" value={regEmail} onChange={(e) => setRegEmail(e.target.value)} />
+                </label>
+                <label>
+                  Password
+                  <input type="password" value={regPass} onChange={(e) => setRegPass(e.target.value)} />
+                </label>
+
+                {signupError && <div className="auth-error">{signupError}</div>}
+                {signupInfo && (
+                  <div className="auth-error" style={{ background: "rgba(34,197,94,0.14)", borderColor: "rgba(34,197,94,0.55)", color: "#d1fae5" }}>
+                    {signupInfo}
+                  </div>
+                )}
+
+                <button type="submit" className="btn-primary btn-full" disabled={signupLoading}>
+                  {signupLoading ? "..." : "Create account"}
+                </button>
+              </form>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Layout/TopBar.jsx.bak.fix.1766214994 b/src/components/Layout/TopBar.jsx.bak.fix.1766214994
new file mode 100644
index 0000000..3883b85
--- /dev/null
+++ b/src/components/Layout/TopBar.jsx.bak.fix.1766214994
@@ -0,0 +1,332 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "../../auth/AuthContext";
+import { registerUser } from "../../api/client";
+import AuthToast from "../Auth/AuthToast";
+
+const THEME_LABELS = { dark: "Dark", blue: "Blue", light: "Light" };
+
+function initialLetter(name = "") {
+  const s = (name || "").trim();
+  return s ? s[0].toUpperCase() : "G";
+}
+
+export default function TopBar({ theme = "dark", onChangeTheme }) {
+  const {
+    loading,
+    authenticated,
+    username,
+    login,
+    logout,
+    needsEmailVerification,
+    openKeycloak,
+    lastError,
+    lastErrorCode,
+    lastInfo,
+    clearError,
+    clearInfo,
+  } = useAuth();
+
+  const [showAuth, setShowAuth] = useState(false);
+  const [mode, setMode] = useState("login");
+
+  const [loginUser, setLoginUser] = useState("");
+  const [loginPass, setLoginPass] = useState("");
+
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [regUser, setRegUser] = useState("");
+  const [regEmail, setRegEmail] = useState("");
+  const [regPass, setRegPass] = useState("");
+  const [signupError, setSignupError] = useState("");
+  const [signupInfo, setSignupInfo] = useState("");
+  const [signupLoading, setSignupLoading] = useState(false);
+
+  const openModal = (nextMode) => {
+    setMode(nextMode);
+    setShowAuth(true);
+    setSignupError("");
+    setSignupInfo("");
+  };
+
+  const closeModal = () => {
+    setShowAuth(false);
+    setLoginPass("");
+    setSignupError("");
+    setSignupInfo("");
+  };
+
+  useEffect(() => {
+    if (authenticated) setShowAuth(false);
+  }, [authenticated]);
+
+  /* SW_URL_NOTICE:BEGIN */
+  useEffect(() => {
+    try {
+      const qs = new URLSearchParams(window.location.search || "");
+      const verified = qs.get("verified") || qs.get("email_verified");
+      const signup = qs.get("signup");
+      const notice = qs.get("notice");
+
+      if (verified === "1" || verified === "true") {
+        setSignupInfo("✅ Email confirmé. Tu peux te connecter.");
+        setMode("login");
+        setShowAuth(true);
+      } else if (signup === "1" || signup === "true") {
+        setSignupInfo("✅ Compte créé. Vérifie tes emails (et le spam), puis connecte-toi.");
+        setMode("login");
+        setShowAuth(true);
+      } else if (notice) {
+        // allow custom notice (URL-encoded)
+        const msg = decodeURIComponent(notice);
+        if (msg && msg.trim()) {
+          setSignupInfo(msg.trim());
+          setMode("login");
+          setShowAuth(true);
+        }
+      }
+
+      // clean URL (remove params without reload)
+      if (verified or signup or notice):
+        const clean = window.location.pathname + (window.location.hash || "");
+        window.history.replaceState({}, "", clean);
+    } catch {
+      // ignore
+    }
+  }, []);
+  /* SW_URL_NOTICE:END */
+
+
+  const handleLoginSubmit = async (e) => {
+    e.preventDefault();
+    await login(loginUser, loginPass);
+  };
+
+  const handleSignupSubmit = async (e) => {
+    e.preventDefault();
+    setSignupError("");
+    setSignupInfo("");
+
+    if (!firstName.trim() || !lastName.trim() || !regUser.trim() || !regEmail.trim() || !regPass) {
+      setSignupError("First name, last name, username, email and password are required.");
+      return;
+    }
+
+    try {
+      setSignupLoading(true);
+
+      await registerUser({
+        username: regUser.trim(),
+        email: regEmail.trim(),
+        password: regPass,
+        firstName: firstName.trim(),
+        lastName: lastName.trim(),
+      });
+
+      setSignupInfo("Account created. Check your inbox (spam) to verify your email, then login.");
+      setMode("login");
+      setLoginUser(regUser.trim());
+      setLoginPass("");
+    } catch (err) {
+      console.error(err);
+      setSignupError(err.message || "Registration error.");
+    } finally {
+      setSignupLoading(false);
+    }
+  };
+
+  const toast = useMemo(() => {
+    if (lastError) {
+      const t = needsEmailVerification ? "warn" : "error";
+      const title = needsEmailVerification ? "Vérification email requise" : "Connexion impossible";
+      return { type: t, title, message: lastError };
+    }
+    if (lastInfo) {
+      return { type: "success", title: "", message: lastInfo };
+    }
+    return null;
+  }, [lastError, lastInfo, needsEmailVerification]);
+
+  return (
+    <>
+      {/* Toast area (under topbar) */}
+      {(toast?.message) && (
+        <div className="sw-toast-wrap">
+          <AuthToast
+            type={toast.type}
+            title={toast.title}
+            message={toast.message}
+            onClose={() => {
+              if (lastError) clearError();
+              if (lastInfo) clearInfo();
+            }}
+          />
+          {needsEmailVerification && (
+            <div style={{ maxWidth: 980, margin: "10px auto 0", display: "flex", gap: 10, justifyContent: "center" }}>
+              <button className="btn-secondary" type="button" onClick={openKeycloak}>
+                Ouvrir Keycloak (Proceed)
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      <header className="topbar">
+        <div style={{ display: "flex", alignItems: "center", gap: "0.65rem" }}>
+          <div className="logo-circle">SW</div>
+          <div className="title-block">
+            <div className="main-title">SOCIOWIRE.com</div>
+            <div className="sub-title">Wired to life</div>
+          </div>
+        </div>
+
+        <div className="topbar-right">
+          <div className="theme-switch">
+            {["dark", "blue", "light"].map((t) => (
+              <button
+                key={t}
+                type="button"
+                className={"theme-dot" + (theme === t ? " theme-dot-active" : "")}
+                title={THEME_LABELS[t]}
+                onClick={() => onChangeTheme && onChangeTheme(t)}
+              >
+                {THEME_LABELS[t][0]}
+              </button>
+            ))}
+          </div>
+
+          {authenticated ? (
+            <div style={{ display: "flex", alignItems: "center", gap: "0.45rem" }}>
+              <div className="sw-userchip" title={username}>
+                <div className="sw-avatar">
+                  <span>{initialLetter(username)}</span>
+                </div>
+                <div className="sw-usertext">
+                  <div className="sw-userline">Connecté</div>
+                  <div className="sw-userhandle">@{username || "user"}</div>
+                </div>
+              </div>
+              <button className="btn-primary" onClick={logout}>
+                Logout
+              </button>
+            </div>
+          ) : (
+            <div style={{ display: "flex", gap: "0.35rem", alignItems: "center" }}>
+              <div className="sw-userchip" title="Guest">
+                <div className="sw-avatar">
+                  <i className="fa-solid fa-user" />
+                </div>
+                <div className="sw-usertext">
+                  <div className="sw-userline">{loading ? "Loading…" : "Guest"}</div>
+                  <div className="sw-userhandle">anon</div>
+                </div>
+              </div>
+
+              <button type="button" className="btn-primary" onClick={() => openModal("login")}>
+                Login
+              </button>
+              <button type="button" className="btn-secondary" onClick={() => openModal("signup")}>
+                Sign up
+              </button>
+            </div>
+          )}
+        </div>
+      </header>
+
+      {showAuth && (
+        <div className="auth-modal-backdrop" onClick={closeModal}>
+          <div className="auth-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="auth-modal-header">
+              <button
+                type="button"
+                className={"auth-tab" + (mode === "login" ? " auth-tab-active" : "")}
+                onClick={() => setMode("login")}
+              >
+                Login
+              </button>
+              <button
+                type="button"
+                className={"auth-tab" + (mode === "signup" ? " auth-tab-active" : "")}
+                onClick={() => setMode("signup")}
+              >
+                Sign up
+              </button>
+              <button type="button" className="auth-close" onClick={closeModal}>
+                ✕
+              </button>
+            </div>
+
+            {/* SW_MODAL_NOTICE:BEGIN */}
+            {signupInfo ? (
+              <div className="auth-notice auth-notice-success">
+                {signupInfo}
+              </div>
+            ) : null}
+            {/* SW_MODAL_NOTICE:END */}
+
+            {mode === "login" ? (
+              <form className="auth-form" onSubmit={handleLoginSubmit}>
+                <label>
+                  Username
+                  <input
+                    type="text"
+                    value={loginUser}
+                    onChange={(e) => setLoginUser(e.target.value)}
+                    autoComplete="username"
+                  />
+                </label>
+                <label>
+                  Password
+                  <input
+                    type="password"
+                    value={loginPass}
+                    onChange={(e) => setLoginPass(e.target.value)}
+                    autoComplete="current-password"
+                  />
+                </label>
+                <button type="submit" className="btn-primary btn-full" disabled={loading}>
+                  {loading ? "..." : "Sign in"}
+                </button>
+              </form>
+            ) : (
+              <form className="auth-form" onSubmit={handleSignupSubmit}>
+                <div className="auth-row">
+                  <label>
+                    First name
+                    <input type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+                  </label>
+                  <label>
+                    Last name
+                    <input type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
+                  </label>
+                </div>
+                <label>
+                  Username
+                  <input type="text" value={regUser} onChange={(e) => setRegUser(e.target.value)} />
+                </label>
+                <label>
+                  Email
+                  <input type="email" value={regEmail} onChange={(e) => setRegEmail(e.target.value)} />
+                </label>
+                <label>
+                  Password
+                  <input type="password" value={regPass} onChange={(e) => setRegPass(e.target.value)} />
+                </label>
+
+                {signupError && <div className="auth-error">{signupError}</div>}
+                {signupInfo && (
+                  <div className="auth-error" style={{ background: "rgba(34,197,94,0.14)", borderColor: "rgba(34,197,94,0.55)", color: "#d1fae5" }}>
+                    {signupInfo}
+                  </div>
+                )}
+
+                <button type="submit" className="btn-primary btn-full" disabled={signupLoading}>
+                  {signupLoading ? "..." : "Create account"}
+                </button>
+              </form>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/styles/topbar.css b/src/styles/topbar.css
index ddb2af1..5926e5b 100644
--- a/src/styles/topbar.css
+++ b/src/styles/topbar.css
@@ -249,3 +249,94 @@ body[data-theme="light"] .user-avatar{
   color: #d1fae5;
 }
 /* SW_AUTH_UI2:END */
+
+
+/* SW_TOPBAR_POLISH:BEGIN */
+
+/* Make right side look like a clean “glass dock” */
+.topbar-right{
+  padding: .28rem .35rem;
+  border-radius: 999px;
+  background: rgba(2,6,23,.18);
+  border: 1px solid rgba(255,255,255,.14);
+  backdrop-filter: blur(10px);
+}
+
+/* User chip used by TopBar.jsx (missing styles before) */
+.sw-userchip{
+  display:flex;
+  align-items:center;
+  gap:.5rem;
+  padding:.28rem .55rem;
+  border-radius: 999px;
+  background: rgba(2,6,23,.22);
+  border: 1px solid rgba(148,163,184,.45);
+  box-shadow: 0 4px 14px rgba(0,0,0,.25);
+}
+
+.sw-avatar{
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  display:grid;
+  place-items:center;
+  background: rgba(56,189,248,0.18);
+  border: 1px solid rgba(56,189,248,0.35);
+  color: #e5e7eb;
+  font-weight: 950;
+  overflow:hidden;
+}
+.sw-avatar i{ font-size: 14px; }
+
+.sw-usertext{
+  display:flex;
+  flex-direction:column;
+  line-height: 1.05;
+  min-width: 0;
+}
+.sw-userline{
+  font-size: .72rem;
+  font-weight: 950;
+  color: #f9fafb;
+}
+.sw-userhandle{
+  font-size: .68rem;
+  font-weight: 800;
+  color: #dbeafe;
+  opacity: .92;
+  max-width: 160px;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Mobile: dock becomes full width and nice */
+@media (max-width:640px){
+  .topbar-right{
+    width:100%;
+    border-radius: 16px;
+    justify-content: flex-start;
+  }
+}
+
+/* Light theme readability */
+body[data-theme="light"] .topbar-right{
+  background: rgba(255,255,255,.55);
+  border-color: rgba(148,163,184,.55);
+}
+body[data-theme="light"] .sw-userchip{
+  background: rgba(255,255,255,.80);
+  border-color: rgba(148,163,184,.70);
+  color: #0b1220;
+}
+body[data-theme="light"] .sw-userline,
+body[data-theme="light"] .sw-userhandle{
+  color:#0b1220;
+}
+body[data-theme="light"] .sw-avatar{
+  background: rgba(30,107,255,0.10);
+  border-color: rgba(30,107,255,0.35);
+  color:#0b1220;
+}
+
+/* SW_TOPBAR_POLISH:END */
diff --git a/src/styles/topbar.css.bak.1766214715 b/src/styles/topbar.css.bak.1766214715
new file mode 100644
index 0000000..ddb2af1
--- /dev/null
+++ b/src/styles/topbar.css.bak.1766214715
@@ -0,0 +1,251 @@
+.topbar{
+  position: sticky; top:0; z-index:100;
+  width:100%;
+  padding: .55rem .9rem;
+  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
+  background: linear-gradient(135deg,#071225 0%,#0b2b5f 38%,#0e65c0 72%,#27a8ff 100%);
+  border-bottom-left-radius:18px; border-bottom-right-radius:18px;
+  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 18px rgba(56,189,248,.45);
+  overflow:hidden;
+}
+
+.logo-circle{
+  width:40px; height:40px; border-radius:50%; flex-shrink:0;
+  background-image:url("/icons/logo-master.png");
+  background-size:cover; background-position:center; background-repeat:no-repeat;
+  box-shadow: 0 0 10px rgba(37,99,235,.8), 0 0 18px rgba(56,189,248,.6);
+  color:transparent;
+}
+
+.title-block{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
+.main-title{ font-size:1.02rem; font-weight:800; letter-spacing:.04em; color:#f9fafb; }
+.sub-title{ font-size:.74rem; color:#dbeafe; opacity:.95; }
+
+.topbar-right{ display:flex; align-items:center; gap:.5rem; margin-left:auto; flex-wrap:wrap; }
+
+.theme-switch{ display:flex; gap:.28rem; }
+.theme-dot{
+  width:22px; height:22px; border-radius:999px;
+  border:1px solid rgba(148,163,184,.85);
+  background:rgba(15,23,42,.9); color:#e5e7eb; font-size:.65rem;
+  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
+  box-shadow:0 0 6px rgba(15,23,42,.9); transition:transform 0.36s ease;
+}
+.theme-dot:hover{ transform:scale(1.06); }
+.theme-dot-active{ border-color:#facc15; box-shadow:0 0 10px rgba(250,204,21,.9),0 0 14px rgba(56,189,248,.55); }
+
+.btn-primary, .btn-secondary{
+  padding:.32rem .85rem; font-size:.78rem; border-radius:999px; font-weight:700; cursor:pointer;
+  white-space:nowrap; line-height:1;
+}
+.btn-primary{
+  border:1px solid #22c55e;
+  background:radial-gradient(circle at 30% 30%,#22c55e,#16a34a);
+  color:#f9fafb;
+  box-shadow:0 4px 10px rgba(22,163,74,.5),0 0 8px rgba(22,163,74,.6);
+}
+.btn-primary:disabled{ opacity:.6; cursor:default; }
+.btn-secondary{
+  border:1px solid #bfdbfe;
+  background:rgba(15,23,42,.25);
+  color:#e0f2fe;
+  box-shadow:0 3px 10px rgba(15,23,42,.6);
+}
+.btn-secondary:hover{ background:rgba(15,23,42,.45); }
+
+@media (max-width:640px){
+  .topbar{ padding:.5rem .7rem; border-bottom-left-radius:16px; border-bottom-right-radius:16px; }
+  .main-title{ font-size:1rem; }
+  .sub-title{ font-size:.7rem; }
+  .topbar-right{ width:100%; justify-content:flex-start; gap:.45rem; }
+}
+
+/* SW_AUTH_UI:BEGIN */
+.auth-strip{
+  margin-top: 6px;
+  display:flex;
+  align-items:center;
+  gap: .45rem;
+  flex-wrap: wrap;
+}
+
+.auth-pill{
+  display:inline-flex;
+  align-items:center;
+  gap: .35rem;
+  padding: .18rem .55rem;
+  border-radius: 999px;
+  font-size: .70rem;
+  font-weight: 900;
+  letter-spacing: .02em;
+  border: 1px solid rgba(148,163,184,.55);
+  background: rgba(2,6,23,.25);
+  color: #e5e7eb;
+}
+.auth-pill i{ font-size: .85rem; opacity:.95; }
+
+.auth-pill--ok{
+  border-color: rgba(34,197,94,.65);
+  background: rgba(34,197,94,.16);
+}
+.auth-pill--loading{
+  border-color: rgba(56,189,248,.65);
+  background: rgba(56,189,248,.14);
+}
+.auth-pill--anon{
+  border-color: rgba(148,163,184,.55);
+  background: rgba(2,6,23,.20);
+}
+
+.auth-banner{
+  margin-top: 6px;
+  padding: 6px 10px;
+  border-radius: 14px;
+  font-size: .72rem;
+  font-weight: 800;
+  display:flex;
+  gap: 8px;
+  align-items:center;
+  flex-wrap:wrap;
+}
+.auth-banner--error{
+  background: rgba(248,113,113,0.14);
+  border: 1px solid rgba(248,113,113,0.55);
+  color: #ffe4e6;
+}
+.auth-banner--info{
+  background: rgba(56,189,248,0.14);
+  border: 1px solid rgba(56,189,248,0.55);
+  color: #e0f2fe;
+}
+.auth-banner--success{
+  background: rgba(34,197,94,0.14);
+  border: 1px solid rgba(34,197,94,0.55);
+  color: #d1fae5;
+}
+
+.user-chip{
+  display:inline-flex;
+  align-items:center;
+  gap: .45rem;
+  padding: .22rem .55rem;
+  border-radius: 999px;
+  background: rgba(2,6,23,.25);
+  border: 1px solid rgba(148,163,184,.55);
+}
+.user-avatar{
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background: rgba(56,189,248,0.18);
+  border: 1px solid rgba(56,189,248,0.35);
+}
+.user-avatar i{ font-size: 14px; }
+
+.user-name{
+  font-size: .80rem;
+  font-weight: 950;
+  color: #f9fafb;
+  max-width: 220px;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Light theme readability */
+body[data-theme="light"] .auth-pill{
+  background: rgba(255,255,255,0.82);
+  border-color: rgba(148,163,184,0.85);
+  color: #0b1220;
+}
+body[data-theme="light"] .user-chip{
+  background: rgba(255,255,255,0.82);
+  border-color: rgba(148,163,184,0.85);
+}
+body[data-theme="light"] .user-name{ color:#0b1220; }
+body[data-theme="light"] .user-avatar{
+  background: rgba(30,107,255,0.12);
+  border-color: rgba(30,107,255,0.35);
+  color:#0b1220;
+}
+/* SW_AUTH_UI:END */
+
+/* SW_AUTH_UI2:BEGIN */
+.sw-notice{
+  margin: 10px 14px 0 14px;
+  padding: 10px 12px;
+  border-radius: 16px;
+  font-size: .78rem;
+  font-weight: 800;
+  line-height: 1.2;
+  border: 1px solid rgba(148,163,184,.35);
+  background: rgba(2,6,23,.22);
+  color: #e5e7eb;
+}
+.sw-notice--error{
+  background: rgba(248,113,113,0.14);
+  border-color: rgba(248,113,113,0.55);
+  color: #ffe4e6;
+}
+.sw-notice--info{
+  background: rgba(56,189,248,0.14);
+  border-color: rgba(56,189,248,0.55);
+  color: #e0f2fe;
+}
+.sw-notice--success{
+  background: rgba(34,197,94,0.14);
+  border-color: rgba(34,197,94,0.55);
+  color: #d1fae5;
+}
+.sw-notice--warn{
+  background: rgba(251,191,36,0.12);
+  border-color: rgba(251,191,36,0.40);
+  color: #fffbeb;
+}
+
+/* single user chip (no duplicates) */
+.user-chip{
+  display:inline-flex;
+  align-items:center;
+  gap: .45rem;
+  padding: .22rem .55rem;
+  border-radius: 999px;
+  background: rgba(2,6,23,.25);
+  border: 1px solid rgba(148,163,184,.55);
+}
+.user-avatar{
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background: rgba(56,189,248,0.18);
+  border: 1px solid rgba(56,189,248,0.35);
+}
+.user-avatar i{ font-size: 14px; }
+.user-name{
+  font-size: .82rem;
+  font-weight: 950;
+  color: #f9fafb;
+  max-width: 180px;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.user-badge{
+  display:inline-flex;
+  align-items:center;
+  gap: .35rem;
+  padding: .10rem .45rem;
+  border-radius: 999px;
+  font-size: .70rem;
+  font-weight: 950;
+  border: 1px solid rgba(34,197,94,.55);
+  background: rgba(34,197,94,.14);
+  color: #d1fae5;
+}
+/* SW_AUTH_UI2:END */