feat: add logout dropdown to user menu in TopBar

Click user name/avatar to open dropdown with Logout option.
TopBar accepts optional onLogout callback prop.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/layout/TopBar/TopBar.module.css

@@ -121,6 +121,7 @@
   gap: 8px;
   font-size: 12px;
   color: var(--text-secondary);
+  cursor: pointer;
 }
 
 .userName {

src/design-system/layout/TopBar/TopBar.tsx

@@ -1,5 +1,6 @@
 import styles from './TopBar.module.css'
 import { Breadcrumb } from '../../composites/Breadcrumb/Breadcrumb'
+import { Dropdown } from '../../composites/Dropdown/Dropdown'
 import { Avatar } from '../../primitives/Avatar/Avatar'
 import { ButtonGroup } from '../../primitives/ButtonGroup/ButtonGroup'
 import type { ButtonGroupItem } from '../../primitives/ButtonGroup/ButtonGroup'
@@ -17,6 +18,7 @@ interface TopBarProps {
   breadcrumb: BreadcrumbItem[]
   environment?: string
   user?: { name: string }
+  onLogout?: () => void
   className?: string
 }
 
@@ -31,6 +33,7 @@ export function TopBar({
   breadcrumb,
   environment,
   user,
+  onLogout,
   className,
 }: TopBarProps) {
   const globalFilters = useGlobalFilters()
@@ -96,10 +99,17 @@ export function TopBar({
           <span className={styles.env}>{environment}</span>
         )}
         {user && (
-          <div className={styles.user}>
+          <Dropdown
-            <span className={styles.userName}>{user.name}</span>
+            trigger={
-            <Avatar name={user.name} size="md" />
+              <div className={styles.user}>
-          </div>
+                <span className={styles.userName}>{user.name}</span>
+                <Avatar name={user.name} size="md" />
+              </div>
+            }
+            items={[
+              { label: 'Logout', icon: '\u23FB', onClick: onLogout },
+            ]}
+          />
         )}
       </div>
     </header>