From 77122e04284cddb2c50e4d811ef92c5cee7e42a6 Mon Sep 17 00:00:00 2001
From: u1 <u1@rv32i.pl>
Date: Tue, 6 Jan 2026 15:14:59 +0100
Subject: [PATCH] feat(ui): restore portfolio status next to logout

---
 apps/visualizer/src/App.tsx               |  2 +-
 apps/visualizer/src/layout/AuthStatus.tsx |  8 ++++----
 apps/visualizer/src/layout/TopNav.tsx     |  5 +++--
 apps/visualizer/src/styles.css            | 21 +++++++++++++++++++++
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/apps/visualizer/src/App.tsx b/apps/visualizer/src/App.tsx
index 503e78f..b2c689c 100644
--- a/apps/visualizer/src/App.tsx
+++ b/apps/visualizer/src/App.tsx
@@ -156,7 +156,7 @@ export default function App() {
 
   return (
     <AppShell
-      header={<TopNav active="trade" rightSlot={<AuthStatus />} />}
+      header={<TopNav active="trade" rightEndSlot={<AuthStatus />} />}
       top={<TickerBar items={topItems} />}
       main={
         <div className="tradeMain">
diff --git a/apps/visualizer/src/layout/AuthStatus.tsx b/apps/visualizer/src/layout/AuthStatus.tsx
index 9ed3d4d..4f82ef8 100644
--- a/apps/visualizer/src/layout/AuthStatus.tsx
+++ b/apps/visualizer/src/layout/AuthStatus.tsx
@@ -43,13 +43,13 @@ export default function AuthStatus() {
 
   return (
     <div className="authStatus">
+      <div className="authStatus__user" aria-label="Zalogowany użytkownik">
+        <div className="authStatus__userLabel">Zalogowany</div>
+        <div className="authStatus__userName">{loading ? '…' : user || '—'}</div>
+      </div>
       <Button size="sm" variant="ghost" type="button" onClick={logout}>
         Wyloguj
       </Button>
-      <div className="topNav__account">
-        <div className="topNav__accountName">{loading ? '…' : user || 'unknown'}</div>
-        <div className="topNav__accountSub">zalogowany</div>
-      </div>
     </div>
   );
 }
diff --git a/apps/visualizer/src/layout/TopNav.tsx b/apps/visualizer/src/layout/TopNav.tsx
index 967b109..3a514f8 100644
--- a/apps/visualizer/src/layout/TopNav.tsx
+++ b/apps/visualizer/src/layout/TopNav.tsx
@@ -16,9 +16,10 @@ type Props = {
   active?: NavId;
   onSelect?: (id: NavId) => void;
   rightSlot?: ReactNode;
+  rightEndSlot?: ReactNode;
 };
 
-export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props) {
+export default function TopNav({ active = 'trade', onSelect, rightSlot, rightEndSlot }: Props) {
   return (
     <header className="topNav">
       <div className="topNav__left">
@@ -55,8 +56,8 @@ export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props)
             </div>
           </>
         )}
+        {rightEndSlot}
       </div>
     </header>
   );
 }
-
diff --git a/apps/visualizer/src/styles.css b/apps/visualizer/src/styles.css
index 0dbf625..32e5a06 100644
--- a/apps/visualizer/src/styles.css
+++ b/apps/visualizer/src/styles.css
@@ -288,6 +288,27 @@ a:hover {
   align-items: center;
 }
 
+.authStatus__user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  line-height: 1.1;
+}
+
+.authStatus__userLabel {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.authStatus__userName {
+  font-weight: 900;
+  font-size: 12px;
+}
+
 .topNav__iconBtn {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.12);