Show the signed-in user's username in the top bar

src/components/layout/TopBar.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { downloadProjectFile, readProjectFile, ProjectImportError } from '../../data/exportImport'
 import { supabase } from '../../data/supabaseClient'
 import { useProjectStore } from '../../state/projectStore'
@@ -10,6 +10,21 @@ export default function TopBar() {
   const importProject = useProjectStore((s) => s.importProject)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [diagramManagerOpen, setDiagramManagerOpen] = useState(false)
+  const [username, setUsername] = useState<string | null>(null)
+
+  // One-time fetch — nothing else in the app changes your own username after
+  // CompleteProfileScreen sets it, so there's no need to keep this live.
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      if (!user) return
+      supabase
+        .from('profiles')
+        .select('username')
+        .eq('id', user.id)
+        .single()
+        .then(({ data }) => setUsername(data?.username ?? null))
+    })
+  }, [])
 
   const handleExport = () => downloadProjectFile(project)
 
@@ -55,6 +70,7 @@ export default function TopBar() {
         >
           Export
         </button>
+        {username && <span className="ml-1 text-xs text-slate-400">{username}</span>}
         <button
           onClick={() => supabase.auth.signOut()}
           className="rounded px-2.5 py-1.5 text-xs text-slate-500 hover:bg-slate-100"