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 (
} />}
+ header={} />}
top={}
main={
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 (
+
+
Zalogowany
+
{loading ? '…' : user || '—'}
+
-
-
{loading ? '…' : user || 'unknown'}
-
zalogowany
-
);
}
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 (
@@ -55,8 +56,8 @@ export default function TopNav({ active = 'trade', onSelect, rightSlot }: Props)
>
)}
+ {rightEndSlot}
);
}
-
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);