feat(ui): restore portfolio status next to logout

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">

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>
   );
 }

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>
   );
 }
-

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);