From 6b7f1c1334c3fba267617708f2669e2c598f46c6 Mon Sep 17 00:00:00 2001
From: Paul Trowbridge <paul@hptrow.me>
Date: Sun, 5 Apr 2026 17:50:04 -0400
Subject: [PATCH] Move username and sign out below sidebar title

Username and 'Sign out' link now sit on their own row under the
Dataflow title, so they always have room to display regardless of
title width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/App.jsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index 615ad7e..9192e82 100644
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -18,23 +18,25 @@ const NAV = [
 
 export default function App() {
   const [authed, setAuthed] = useState(false)
+  const [loginUser, setLoginUser] = useState('')
   const [sources, setSources] = useState([])
   const [source, setSource] = useState(() => localStorage.getItem('selectedSource') || '')
   const [sidebarOpen, setSidebarOpen] = useState(false)
 
   async function handleLogin(user, pass) {
     setCredentials(user, pass)
-    // Verify credentials by hitting the API — throws on 401
     await api.getSources().then(s => {
       setSources(s)
       if (!source && s.length > 0) setSource(s[0].name)
       setAuthed(true)
+      setLoginUser(user)
     })
   }
 
   function handleLogout() {
     clearCredentials()
     setAuthed(false)
+    setLoginUser('')
     setSources([])
   }
 
@@ -57,12 +59,15 @@ export default function App() {
   const sidebar = (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="px-4 py-4 border-b border-gray-200 flex items-center justify-between">
-        <span className="text-sm font-semibold text-gray-800 tracking-wide uppercase">Dataflow</span>
-        <div className="flex items-center gap-2">
-          <button onClick={handleLogout} className="text-xs text-gray-400 hover:text-gray-600 leading-none" title="Sign out">⏻</button>
+      <div className="px-4 py-3 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-semibold text-gray-800 tracking-wide uppercase">Dataflow</span>
           <button onClick={() => setSidebarOpen(false)} className="md:hidden text-gray-400 hover:text-gray-600 leading-none" title="Close">✕</button>
         </div>
+        <div className="flex items-center justify-between mt-1">
+          <span className="text-xs text-gray-400">{loginUser}</span>
+          <button onClick={handleLogout} className="text-xs text-gray-400 hover:text-red-500" title="Sign out">Sign out</button>
+        </div>
       </div>
 
       {/* Source selector */}