minor: extract UserMenu component for readability

Author: david-crespo

app/components/TopBar.tsx

@@ -19,12 +19,6 @@ import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { pb } from '~/util/path-builder'
 
 export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) {
-  const logout = useApiMutation('logout', {
-    onSuccess: () => navToLogin({ includeCurrent: false }),
-  })
-  // fetch happens in loader wrapping all authed pages
-  const { me } = useCurrentUser()
-
   // The height of this component is governed by the `PageContainer`
   // It's important that this component returns two distinct elements (wrapped in a fragment).
   // Each element will occupy one of the top column slots provided by `PageContainer`.
@@ -39,30 +33,39 @@ export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) {
         <div className="mx-3 flex h-[--top-bar-height] shrink-0 items-center justify-between">
           <Breadcrumbs />
           <div className="flex items-center gap-2">
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger
-                className={cn(
-                  buttonStyle({ size: 'sm', variant: 'secondary' }),
-                  'flex items-center gap-2'
-                )}
-                aria-label="User menu"
-              >
-                <Profile16Icon className="text-quaternary" />
-                <span className="normal-case text-sans-md text-secondary">
-                  {me.displayName || 'User'}
-                </span>
-                <DirectionDownIcon className="!w-2.5" />
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content gap={8}>
-                <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
-                <DropdownMenu.Item onSelect={() => logout.mutate({})}>
-                  Sign out
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
+            <UserMenu />
           </div>
         </div>
       </div>
     </>
   )
 }
+
+function UserMenu() {
+  const logout = useApiMutation('logout', {
+    onSuccess: () => navToLogin({ includeCurrent: false }),
+  })
+  // fetch happens in loader wrapping all authed pages
+  const { me } = useCurrentUser()
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger
+        className={cn(
+          buttonStyle({ size: 'sm', variant: 'secondary' }),
+          'flex items-center gap-2'
+        )}
+        aria-label="User menu"
+      >
+        <Profile16Icon className="text-quaternary" />
+        <span className="normal-case text-sans-md text-secondary">
+          {me.displayName || 'User'}
+        </span>
+        <DirectionDownIcon className="!w-2.5" />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content gap={8}>
+        <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
+        <DropdownMenu.Item onSelect={() => logout.mutate({})}>Sign out</DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}