Add support for logout, centralize all the dropdown code

packages/web/components/templates/PrimaryDropdown.tsx

@@ -0,0 +1,69 @@
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
+import { updateTheme } from '../../lib/themeUpdater'
+import { AvatarDropdown } from '../elements/AvatarDropdown'
+import { DropdownMenu, HeaderDropdownAction } from '../patterns/DropdownMenu'
+import { ThemeId } from '../tokens/stitches.config'
+
+export function PrimaryDropdown(): JSX.Element {
+  const { viewerData } = useGetViewerQuery()
+  const router = useRouter()
+
+  const headerDropdownActionHandler = useCallback(
+    (action: HeaderDropdownAction) => {
+      switch (action) {
+        case 'apply-darker-theme':
+          updateTheme(ThemeId.Darker)
+          break
+        case 'apply-dark-theme':
+          updateTheme(ThemeId.Dark)
+          break
+        case 'apply-lighter-theme':
+          updateTheme(ThemeId.Lighter)
+          break
+        case 'apply-light-theme':
+          updateTheme(ThemeId.Light)
+          break
+        case 'navigate-to-install':
+          router.push('/settings/installation')
+          break
+        case 'navigate-to-emails':
+          router.push('/settings/emails')
+          break
+        case 'navigate-to-labels':
+          router.push('/settings/labels')
+          break
+        case 'navigate-to-subscriptions':
+          router.push('/settings/subscriptions')
+          break
+        case 'navigate-to-api':
+          router.push('/settings/api')
+          break
+        case 'navigate-to-integrations':
+          router.push('/settings/integrations')
+          break
+        case 'logout':
+          document.dispatchEvent(new Event('logout'))
+          break
+        default:
+          break
+      }
+    },
+    [updateTheme, router]
+  )
+
+  if (!viewerData?.me) {
+    return <></>
+  }
+
+  return (
+    <DropdownMenu
+      username={viewerData?.me.profile.username}
+      triggerElement={
+        <AvatarDropdown userInitials={viewerData?.me?.name.charAt(0) ?? ''} />
+      }
+      actionHandler={headerDropdownActionHandler}
+    />
+  )
+}

packages/web/components/templates/PrimaryLayout.tsx

@@ -1,6 +1,12 @@
 import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData'
 import { Box } from '../elements/LayoutPrimitives'
-import { ReactNode, MutableRefObject, useEffect, useState } from 'react'
+import {
+  ReactNode,
+  MutableRefObject,
+  useEffect,
+  useState,
+  useCallback,
+} from 'react'
 import { PrimaryHeader } from './../patterns/PrimaryHeader'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
@@ -65,6 +71,18 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
     }
   }
 
+  const showLogout = useCallback(() => {
+    setShowLogoutConfirmation(true)
+  }, [showLogoutConfirmation, setShowLogoutConfirmation, logoutMutation])
+
+  useEffect(() => {
+    document.addEventListener('logout', showLogout)
+
+    return () => {
+      document.removeEventListener('logout', showLogout)
+    }
+  }, [showLogout])
+
   return (
     <>
       {props.pageMetaDataProps ? (

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -25,6 +25,7 @@ import { LayoutType } from './HomeFeedContainer'
 import { DropdownMenu, HeaderDropdownAction } from '../../patterns/DropdownMenu'
 import { updateTheme } from '../../../lib/themeUpdater'
 import { useRouter } from 'next/router'
+import { PrimaryDropdown } from '../PrimaryDropdown'
 
 type LibraryHeaderProps = {
   layout: LayoutType
@@ -259,51 +260,6 @@ type ControlButtonBoxProps = {
 }
 
 function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
-  const router = useRouter()
-
-  const headerDropdownActionHandler = useCallback(
-    (action: HeaderDropdownAction) => {
-      switch (action) {
-        case 'apply-darker-theme':
-          updateTheme(ThemeId.Darker)
-          break
-        case 'apply-dark-theme':
-          updateTheme(ThemeId.Dark)
-          break
-        case 'apply-lighter-theme':
-          updateTheme(ThemeId.Lighter)
-          break
-        case 'apply-light-theme':
-          updateTheme(ThemeId.Light)
-          break
-        case 'navigate-to-install':
-          router.push('/settings/installation')
-          break
-        case 'navigate-to-emails':
-          router.push('/settings/emails')
-          break
-        case 'navigate-to-labels':
-          router.push('/settings/labels')
-          break
-        case 'navigate-to-subscriptions':
-          router.push('/settings/subscriptions')
-          break
-        case 'navigate-to-api':
-          router.push('/settings/api')
-          break
-        case 'navigate-to-integrations':
-          router.push('/settings/integrations')
-          break
-        case 'logout':
-          // props.setShowLogoutConfirmation(true)
-          break
-        default:
-          break
-      }
-    },
-    [updateTheme, router]
-  )
-
   return (
     <>
       <HStack
@@ -346,11 +302,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
             color={props.layout == 'LIST_LAYOUT' ? '#6A6968' : '#FFEA9F'}
           />
         </Button>
-        <DropdownMenu
-          username={'props.username'}
-          triggerElement={<AvatarDropdown userInitials="JH" />}
-          actionHandler={headerDropdownActionHandler}
-        />
+        <PrimaryDropdown />
       </HStack>
 
       <HStack