Only display theme selector on the library and settings dropdowns

packages/web/components/templates/PrimaryDropdown.tsx

@@ -1,34 +1,46 @@
 import { useRouter } from 'next/router'
-import { ReactNode, useCallback } from 'react'
+import { Check } from 'phosphor-react'
+import { ReactNode, useCallback, useMemo, useState } from 'react'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
-import { updateTheme } from '../../lib/themeUpdater'
+import { currentThemeName, updateTheme } from '../../lib/themeUpdater'
 import { AvatarDropdown } from '../elements/AvatarDropdown'
-import { DropdownMenu, HeaderDropdownAction } from '../patterns/DropdownMenu'
+import { Button } from '../elements/Button'
+import { Dropdown, DropdownOption } from '../elements/DropdownElements'
+import { HStack, VStack } from '../elements/LayoutPrimitives'
+import { StyledText } from '../elements/StyledText'
+import { DropdownMenu } from '../patterns/DropdownMenu'
 import { ThemeId } from '../tokens/stitches.config'
 
 type PrimaryDropdownProps = {
   children?: ReactNode
+  showThemeSection: boolean
 }
 
+export type HeaderDropdownAction =
+  | 'navigate-to-install'
+  | 'navigate-to-emails'
+  | 'navigate-to-labels'
+  | 'navigate-to-profile'
+  | 'navigate-to-subscriptions'
+  | 'navigate-to-api'
+  | 'navigate-to-integrations'
+  | 'increaseFontSize'
+  | 'decreaseFontSize'
+  | 'logout'
+
 export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
 
+  const [currentTheme, setCurrentTheme] = useState(currentThemeName())
+
+  const isDark = useMemo(() => {
+    return currentTheme === 'Dark' || currentTheme === 'Darker'
+  }, [currentTheme])
+
   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
@@ -62,14 +74,86 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
   }
 
   return (
-    <DropdownMenu
-      username={viewerData?.me.profile.username}
+    <Dropdown
       triggerElement={
         props.children ?? (
           <AvatarDropdown userInitials={viewerData?.me?.name.charAt(0) ?? ''} />
         )
       }
-      actionHandler={headerDropdownActionHandler}
-    />
+    >
+      <VStack css={{ py: '12px', px: '24px' }}>
+        {props.showThemeSection && <ThemeSection />}
+      </VStack>
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-install')}
+        title="Install"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-emails')}
+        title="Emails"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-labels')}
+        title="Labels"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-api')}
+        title="API Keys"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('navigate-to-integrations')}
+        title="Integrations"
+      />
+      <DropdownOption
+        onSelect={() => window.open('https://docs.omnivore.app', '_blank')}
+        title="Documentation"
+      />
+      <DropdownOption
+        onSelect={() => window.Intercom('show')}
+        title="Feedback"
+      />
+      <DropdownOption
+        onSelect={() => headerDropdownActionHandler('logout')}
+        title="Logout"
+      />
+    </Dropdown>
+  )
+}
+
+function ThemeSection(): JSX.Element {
+  const [currentTheme, setCurrentTheme] = useState(currentThemeName())
+
+  const isDark = useMemo(() => {
+    return currentTheme === 'Dark' || currentTheme === 'Darker'
+  }, [currentTheme])
+
+  return (
+    <>
+      <StyledText style="menuTitle">Theme</StyledText>
+      <HStack css={{ py: '8px', width: '100%', gap: '25px' }}>
+        <Button
+          style="themeSwitch"
+          css={{ background: '#FFFFFF' }}
+          data-state={isDark ? 'unselected' : 'selected'}
+          onClick={() => {
+            updateTheme(ThemeId.Lighter)
+            setCurrentTheme(currentThemeName())
+          }}
+        >
+          {!isDark && <Check color="#F9D354" size={32} />}
+        </Button>
+        <Button
+          style="themeSwitch"
+          css={{ background: '#3D3D3D' }}
+          data-state={isDark ? 'selected' : 'unselected'}
+          onClick={() => {
+            updateTheme(ThemeId.Dark)
+            setCurrentTheme(currentThemeName())
+          }}
+        >
+          {isDark && <Check color="#F9D354" size={32} />}
+        </Button>
+      </HStack>
+    </>
   )
 }

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

@@ -31,6 +31,9 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           borderRight: '1px solid #E1E1E1',
           overflowY: 'auto',
           overflowX: 'hidden',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
         }}
       >
         <SavedSearches {...props} />

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

@@ -289,7 +289,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
             color={props.layout == 'LIST_LAYOUT' ? '#6A6968' : '#FFEA9F'}
           />
         </Button>
-        <PrimaryDropdown />
+        <PrimaryDropdown showThemeSection={true} />
       </HStack>
 
       <HStack
@@ -306,7 +306,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
           },
         }}
       >
-        <PrimaryDropdown />
+        <PrimaryDropdown showThemeSection={true} />
       </HStack>
     </>
   )

packages/web/components/templates/reader/ReaderHeader.tsx

@@ -111,7 +111,7 @@ function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
             <TextAa size={25} color="#6A6968" />
           </TooltipWrapped>
         </Button>
-        <PrimaryDropdown>
+        <PrimaryDropdown showThemeSection={false}>
           <DotsThreeOutline size={25} color="#6A6968" />
         </PrimaryDropdown>
       </HStack>
@@ -130,7 +130,7 @@ function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
           },
         }}
       >
-        <PrimaryDropdown />
+        <PrimaryDropdown showThemeSection={false} />
       </HStack>
     </>
   )