pt/dataflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move username and sign out below sidebar title

Browse Source 
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>
This commit is contained in:
Paul Trowbridge 2026-04-05 17:50:04 -04:00
parent 71c4654361
commit 6b7f1c1334
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/App.jsx
View File

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