From 1f7fe5a2b2d05c7a200cbeabdadfc70f355b13d9 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 13:54:59 +0800
Subject: [PATCH 1/8] Fix issue where multiselect control would be disabled
 during search

---
 .../templates/homeFeed/LibraryHeader.tsx      | 48 ++++++++-----------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 3d444209f..ec6decb0e 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -36,7 +36,6 @@ import { HeaderCheckboxIcon } from '../../elements/icons/HeaderCheckboxIcon'
 import { HeaderSearchIcon } from '../../elements/icons/HeaderSearchIcon'
 import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon'
 import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon'
-import useWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
 
 export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
 
@@ -124,7 +123,6 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
 }
 
 function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
-  const dimensions = useWindowDimensions()
   const [showSearchBar, setShowSearchBar] = useState(false)
   const [pinnedSearches, setPinnedSearches] = usePersistedState<
     PinnedSearch[] | null
@@ -134,10 +132,6 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
     isSessionStorage: false,
   })
 
-  const isWideWindow = useMemo(() => {
-    return dimensions.width >= 480
-  }, [dimensions])
-
   return (
     <HStack
       alignment="center"
@@ -154,29 +148,25 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         </HStack>
       ) : (
         <>
-          {(!showSearchBar || isWideWindow) && (
-            <>
-              <SpanBox
-                css={{
-                  display: 'none',
-                  '@mdDown': { display: 'flex' },
-                }}
-              >
-                <MenuHeaderButton {...props} />
-              </SpanBox>
-              <Button
-                title="Select multiple"
-                style="plainIcon"
-                css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
-                onClick={(e) => {
-                  props.setMultiSelectMode('visible')
-                  e.preventDefault()
-                }}
-              >
-                <HeaderCheckboxIcon />
-              </Button>
-            </>
-          )}
+          <SpanBox
+            css={{
+              display: 'none',
+              '@mdDown': { display: 'flex' },
+            }}
+          >
+            <MenuHeaderButton {...props} />
+          </SpanBox>
+          <Button
+            title="Select multiple"
+            style="plainIcon"
+            css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
+            onClick={(e) => {
+              props.setMultiSelectMode('visible')
+              e.preventDefault()
+            }}
+          >
+            <HeaderCheckboxIcon />
+          </Button>
 
           {showSearchBar ? (
             <SearchBox {...props} setShowSearchBar={setShowSearchBar} />

From b4f3469210c44b7fe76b1c37692cc20919f6aff1 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 13:58:06 +0800
Subject: [PATCH 2/8] Simplify header code

---
 .../templates/homeFeed/LibraryHeader.tsx      | 142 +++++++++---------
 1 file changed, 70 insertions(+), 72 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index ec6decb0e..c802e2bbd 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -123,15 +123,6 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
 }
 
 function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
-  const [showSearchBar, setShowSearchBar] = useState(false)
-  const [pinnedSearches, setPinnedSearches] = usePersistedState<
-    PinnedSearch[] | null
-  >({
-    key: `--library-pinned-searches`,
-    initialValue: [],
-    isSessionStorage: false,
-  })
-
   return (
     <HStack
       alignment="center"
@@ -147,74 +138,81 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
           <MultiSelectControls {...props} />
         </HStack>
       ) : (
-        <>
-          <SpanBox
-            css={{
-              display: 'none',
-              '@mdDown': { display: 'flex' },
-            }}
-          >
-            <MenuHeaderButton {...props} />
-          </SpanBox>
-          <Button
-            title="Select multiple"
-            style="plainIcon"
-            css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
-            onClick={(e) => {
-              props.setMultiSelectMode('visible')
-              e.preventDefault()
-            }}
-          >
-            <HeaderCheckboxIcon />
-          </Button>
-
-          {showSearchBar ? (
-            <SearchBox {...props} setShowSearchBar={setShowSearchBar} />
-          ) : (
-            <Button
-              title="search"
-              style="plainIcon"
-              css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
-              onClick={(e) => {
-                setShowSearchBar(true)
-                e.preventDefault()
-              }}
-            >
-              <HeaderSearchIcon />
-            </Button>
-          )}
-
-          <Button
-            title={
-              props.layout == 'GRID_LAYOUT'
-                ? 'Switch to list layout'
-                : 'Switch to grid layout'
-            }
-            style="plainIcon"
-            css={{
-              display: 'flex',
-              marginLeft: 'auto',
-              '&:hover': { opacity: '1.0' },
-            }}
-            onClick={(e) => {
-              props.updateLayout(
-                props.layout == 'GRID_LAYOUT' ? 'LIST_LAYOUT' : 'GRID_LAYOUT'
-              )
-              e.preventDefault()
-            }}
-          >
-            {props.layout == 'LIST_LAYOUT' ? (
-              <HeaderToggleGridIcon />
-            ) : (
-              <HeaderToggleListIcon />
-            )}
-          </Button>
-        </>
+        <HeaderControls {...props} />
       )}
     </HStack>
   )
 }
 
+const HeaderControls = (props: LibraryHeaderProps): JSX.Element => {
+  const [showSearchBar, setShowSearchBar] = useState(false)
+  return (
+    <>
+      <SpanBox
+        css={{
+          display: 'none',
+          '@mdDown': { display: 'flex' },
+        }}
+      >
+        <MenuHeaderButton {...props} />
+      </SpanBox>
+      <Button
+        title="Select multiple"
+        style="plainIcon"
+        css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
+        onClick={(e) => {
+          props.setMultiSelectMode('visible')
+          e.preventDefault()
+        }}
+      >
+        <HeaderCheckboxIcon />
+      </Button>
+
+      {showSearchBar ? (
+        <SearchBox {...props} setShowSearchBar={setShowSearchBar} />
+      ) : (
+        <Button
+          title="search"
+          style="plainIcon"
+          css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
+          onClick={(e) => {
+            setShowSearchBar(true)
+            e.preventDefault()
+          }}
+        >
+          <HeaderSearchIcon />
+        </Button>
+      )}
+
+      <Button
+        title={
+          props.layout == 'GRID_LAYOUT'
+            ? 'Switch to list layout'
+            : 'Switch to grid layout'
+        }
+        style="plainIcon"
+        css={{
+          display: 'flex',
+          marginLeft: 'auto',
+          '&:hover': { opacity: '1.0' },
+        }}
+        onClick={(e) => {
+          props.updateLayout(
+            props.layout == 'GRID_LAYOUT' ? 'LIST_LAYOUT' : 'GRID_LAYOUT'
+          )
+          e.preventDefault()
+        }}
+      >
+        {props.layout == 'LIST_LAYOUT' ? (
+          <HeaderToggleGridIcon />
+        ) : (
+          <HeaderToggleListIcon />
+        )}
+      </Button>
+    </>
+  )
+}
+
 type MenuHeaderButtonProps = {
   showFilterMenu: boolean
   setShowFilterMenu: (show: boolean) => void

From 01e9486b7fb4a71a99b9c8a1affcad2dc269c10f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 14:08:00 +0800
Subject: [PATCH 3/8] Add the footer menu in settings, remove header menu in
 settings

---
 .../components/patterns/SettingsHeader.tsx    |  3 --
 .../web/components/templates/SettingsMenu.tsx |  2 +
 .../templates/homeFeed/LibraryFilterMenu.tsx  | 41 +--------------
 .../components/templates/navMenu/Footer.tsx   | 50 +++++++++++++++++++
 4 files changed, 54 insertions(+), 42 deletions(-)
 create mode 100644 packages/web/components/templates/navMenu/Footer.tsx

diff --git a/packages/web/components/patterns/SettingsHeader.tsx b/packages/web/components/patterns/SettingsHeader.tsx
index b8c218a08..e50bfe10f 100644
--- a/packages/web/components/patterns/SettingsHeader.tsx
+++ b/packages/web/components/patterns/SettingsHeader.tsx
@@ -31,9 +31,6 @@ export function SettingsHeader(props: HeaderProps): JSX.Element {
         }}
       >
         <LogoBox />
-        <HStack css={{ ml: 'auto' }}>
-          <PrimaryDropdown showThemeSection={true} />
-        </HStack>
       </HStack>
     </nav>
   )
diff --git a/packages/web/components/templates/SettingsMenu.tsx b/packages/web/components/templates/SettingsMenu.tsx
index 5663ae6d6..72ee1f099 100644
--- a/packages/web/components/templates/SettingsMenu.tsx
+++ b/packages/web/components/templates/SettingsMenu.tsx
@@ -7,6 +7,7 @@ import { styled, theme } from '../tokens/stitches.config'
 import { Button } from '../elements/Button'
 import { ArrowSquareUpRight } from 'phosphor-react'
 import { useRouter } from 'next/router'
+import { NavMenuFooter } from './navMenu/Footer'
 
 const HorizontalDivider = styled(SpanBox, {
   width: '100%',
@@ -173,6 +174,7 @@ export function SettingsMenu(): JSX.Element {
             destination="https://docs.omnivore.app"
             title="Documentation"
           />
+          <NavMenuFooter />
         </VStack>
       </Box>
       {/* This spacer pushes library content to the right of 
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 958b30b73..5cfa16319 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -22,6 +22,7 @@ import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
 import { SplitButton } from '../../elements/SplitButton'
 import { AvatarDropdown } from '../../elements/AvatarDropdown'
 import { PrimaryDropdown } from '../PrimaryDropdown'
+import { NavMenuFooter } from '../navMenu/Footer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '275px'
 
@@ -122,7 +123,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         <SavedSearches {...props} savedSearches={savedSearches} />
         <Subscriptions {...props} subscriptions={subscriptions} />
         <Labels {...props} labels={labels} />
-        <Footer {...props} />
+        <NavMenuFooter {...props} />
         <Box css={{ height: '250px ' }} />
       </Box>
       {/* This spacer pushes library content to the right of 
@@ -610,41 +611,3 @@ function EditButton(props: EditButtonProps): JSX.Element {
     </Link>
   )
 }
-
-const Footer = (props: LibraryFilterMenuProps): JSX.Element => {
-  return (
-    <HStack
-      css={{
-        gap: '10px',
-        height: '65px',
-        position: 'fixed',
-        bottom: '0%',
-        alignItems: 'center',
-
-        backgroundColor: '$thBackground2',
-        width: LIBRARY_LEFT_MENU_WIDTH,
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        '&::-webkit-scrollbar': {
-          display: 'none',
-        },
-        '@mdDown': {
-          width: '100%',
-        },
-      }}
-    >
-      <PrimaryDropdown showThemeSection={true} />
-      <SpanBox
-        css={{
-          marginLeft: 'auto',
-          marginRight: '15px',
-        }}
-      >
-        <SplitButton
-          title="Add"
-          setShowLinkMode={() => props.setShowAddLinkModal(true)}
-        />
-      </SpanBox>
-    </HStack>
-  )
-}
diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx
new file mode 100644
index 000000000..4ac9bcf67
--- /dev/null
+++ b/packages/web/components/templates/navMenu/Footer.tsx
@@ -0,0 +1,50 @@
+import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
+import { SplitButton } from '../../elements/SplitButton'
+import { PrimaryDropdown } from '../PrimaryDropdown'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../homeFeed/LibraryFilterMenu'
+
+type NavMenuFooterProps = {
+  setShowAddLinkModal?: (show: true) => void
+}
+
+export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
+  return (
+    <HStack
+      css={{
+        gap: '10px',
+        height: '65px',
+        position: 'fixed',
+        bottom: '0%',
+        alignItems: 'center',
+
+        backgroundColor: '$thBackground2',
+        width: LIBRARY_LEFT_MENU_WIDTH,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+        '@mdDown': {
+          width: '100%',
+        },
+      }}
+    >
+      <PrimaryDropdown showThemeSection={true} />
+      <SpanBox
+        css={{
+          marginLeft: 'auto',
+          marginRight: '15px',
+        }}
+      >
+        {props.setShowAddLinkModal && (
+          <SplitButton
+            title="Add"
+            setShowLinkMode={() => {
+              props.setShowAddLinkModal && props.setShowAddLinkModal(true)
+            }}
+          />
+        )}
+      </SpanBox>
+    </HStack>
+  )
+}

From c0e917848a45e62bf7c62d7cb9df8d98ab8249c9 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 14:11:51 +0800
Subject: [PATCH 4/8] Ensure window dimensions are set on load. Fixes bug where
 the inspector side panel was displayed full width on large screens

---
 packages/web/lib/hooks/useGetWindowDimensions.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web/lib/hooks/useGetWindowDimensions.tsx b/packages/web/lib/hooks/useGetWindowDimensions.tsx
index bfa2563eb..800e34e5d 100644
--- a/packages/web/lib/hooks/useGetWindowDimensions.tsx
+++ b/packages/web/lib/hooks/useGetWindowDimensions.tsx
@@ -14,6 +14,8 @@ export default function useWindowDimensions() {
   })
 
   useEffect(() => {
+    setWindowDimensions(getWindowDimensions())
+
     function handleResize() {
       setWindowDimensions(getWindowDimensions())
     }

From d6cd57b5757efb675d6912ec96f99f7c6b93caea Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 14:33:28 +0800
Subject: [PATCH 5/8] Move menus, add UI for setting auto theme

---
 packages/web/components/elements/LogoBox.tsx  |   2 +-
 .../web/components/elements/StyledText.tsx    |   2 +
 .../patterns/LibraryCards/LibraryListCard.tsx |   2 +-
 .../components/templates/SettingsLayout.tsx   |   2 +-
 .../web/components/templates/SettingsMenu.tsx | 257 --------
 .../article/ReaderSettingsControl.tsx         |  30 +-
 .../templates/homeFeed/EmptyLibrary.tsx       |   2 +-
 .../templates/homeFeed/HomeFeedContainer.tsx  |  12 +-
 .../templates/homeFeed/LibraryFilterMenu.tsx  | 613 ------------------
 .../templates/homeFeed/LibraryHeader.tsx      |   2 +-
 .../components/templates/navMenu/Footer.tsx   |   2 +-
 11 files changed, 42 insertions(+), 884 deletions(-)
 delete mode 100644 packages/web/components/templates/SettingsMenu.tsx
 delete mode 100644 packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

diff --git a/packages/web/components/elements/LogoBox.tsx b/packages/web/components/elements/LogoBox.tsx
index 276941f07..1105263bc 100644
--- a/packages/web/components/elements/LogoBox.tsx
+++ b/packages/web/components/elements/LogoBox.tsx
@@ -1,4 +1,4 @@
-import { LIBRARY_LEFT_MENU_WIDTH } from '../templates/homeFeed/LibraryFilterMenu'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../templates/navMenu/LibraryMenu'
 import { theme } from '../tokens/stitches.config'
 import { OmnivoreFullLogo } from './images/OmnivoreFullLogo'
 import { OmnivoreNameLogo } from './images/OmnivoreNameLogo'
diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 0a47e4747..c9460941e 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -192,6 +192,8 @@ const textVariants = {
       fontSize: '12px',
       lineHeight: '20px',
       color: '$thTextSubtle2',
+      marginBlockStart: '0',
+      marginTop: '10px',
     },
     error: {
       color: '$error',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 524c76848..b930e9c68 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -14,7 +14,7 @@ import {
   FLAIR_ICON_NAMES,
 } from './LibraryCardStyles'
 import { sortedLabels } from '../../../lib/labelsSort'
-import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/navMenu/LibraryMenu'
 import { LibraryHoverActions } from './LibraryHoverActions'
 import {
   useHover,
diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index a7df5dedd..dd734e772 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/packages/web/components/templates/SettingsLayout.tsx
@@ -11,7 +11,7 @@ import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { PageMetaData } from '../patterns/PageMetaData'
 import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
 import { logout } from '../../lib/logout'
-import { SettingsMenu } from './SettingsMenu'
+import { SettingsMenu } from './navMenu/SettingsMenu'
 
 type SettingsLayoutProps = {
   title?: string
diff --git a/packages/web/components/templates/SettingsMenu.tsx b/packages/web/components/templates/SettingsMenu.tsx
deleted file mode 100644
index 72ee1f099..000000000
--- a/packages/web/components/templates/SettingsMenu.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-import { useMemo } from 'react'
-import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
-import { LIBRARY_LEFT_MENU_WIDTH } from './homeFeed/LibraryFilterMenu'
-import { LogoBox } from '../elements/LogoBox'
-import Link from 'next/link'
-import { styled, theme } from '../tokens/stitches.config'
-import { Button } from '../elements/Button'
-import { ArrowSquareUpRight } from 'phosphor-react'
-import { useRouter } from 'next/router'
-import { NavMenuFooter } from './navMenu/Footer'
-
-const HorizontalDivider = styled(SpanBox, {
-  width: '100%',
-  height: '1px',
-  my: '25px',
-  background: `${theme.colors.grayLine.toString()}`,
-})
-
-const StyledLink = styled(SpanBox, {
-  pl: '25px',
-  ml: '10px',
-  mb: '10px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '2px',
-  '&:hover': {
-    textDecoration: 'underline',
-  },
-
-  width: 'calc(100% - 10px)',
-  maxWidth: '100%',
-  height: '32px',
-
-  fontSize: '14px',
-  fontWeight: 'regular',
-  fontFamily: '$display',
-  color: '$thLibraryMenuUnselected',
-  verticalAlign: 'middle',
-  borderRadius: '3px',
-  cursor: 'pointer',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-})
-
-type ExternalLinkProps = {
-  title: string
-  destination: string
-}
-
-function ExternalLink(props: ExternalLinkProps): JSX.Element {
-  return (
-    <StyledLink
-      css={{
-        '> a': {
-          backgroundColor: 'transparent',
-          textDecoration: 'none',
-        },
-      }}
-      title={props.title}
-    >
-      <a href={props.destination} target="_blank" rel="noreferrer">
-        <HStack
-          distribution="start"
-          alignment="center"
-          css={{
-            gap: '5px',
-            color: '$thLibraryMenuUnselected',
-            '&:hover': {
-              textDecoration: 'underline',
-            },
-          }}
-        >
-          {props.title}
-          <ArrowSquareUpRight size={12} />
-        </HStack>
-      </a>
-    </StyledLink>
-  )
-}
-
-export function SettingsMenu(): JSX.Element {
-  const section1 = [
-    { name: 'Account', destination: '/settings/account' },
-    { name: 'API Keys', destination: '/settings/api' },
-    { name: 'Emails', destination: '/settings/emails' },
-    { name: 'Feeds', destination: '/settings/feeds' },
-    { name: 'Subscriptions', destination: '/settings/subscriptions' },
-    { name: 'Labels', destination: '/settings/labels' },
-    { name: 'Saved Searches', destination: '/settings/saved-searches' },
-    { name: 'Pinned Searches', destination: '/settings/pinned-searches' },
-  ]
-
-  const section2 = [
-    { name: 'Integrations', destination: '/settings/integrations' },
-    { name: 'Install', destination: '/settings/installation' },
-  ]
-  return (
-    <>
-      <Box
-        css={{
-          left: '0px',
-          top: '0px',
-          position: 'fixed',
-          bg: '$thLeftMenuBackground',
-          height: '100%',
-          width: LIBRARY_LEFT_MENU_WIDTH,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-          '@mdDown': {
-            visibility: 'hidden',
-            width: '100%',
-            transition: 'visibility 0s, top 150ms',
-          },
-          zIndex: 3,
-        }}
-      >
-        <Box
-          css={{
-            width: '100%',
-            px: '25px',
-            pb: '50px',
-            pt: '4.5px',
-            lineHeight: '1',
-          }}
-        >
-          <LogoBox />
-        </Box>
-
-        <VStack
-          css={{
-            gap: '10px',
-            width: '100%',
-          }}
-          distribution="start"
-          alignment="start"
-        >
-          {section1.map((item) => {
-            return <SettingsButton key={item.name} {...item} />
-          })}
-          <HorizontalDivider />
-          {section2.map((item) => {
-            return <SettingsButton key={item.name} {...item} />
-          })}
-          <HorizontalDivider />
-          <StyledLink>
-            <Button
-              style="link"
-              onClick={(event) => {
-                if (window.Intercom) {
-                  try {
-                    window.Intercom('show')
-                  } catch (error) {
-                    console.log(error)
-                    alert('error opening system feedback')
-                  }
-                } else {
-                  alert('error opening system feedback')
-                }
-                event.preventDefault()
-              }}
-            >
-              Feedback
-            </Button>
-          </StyledLink>
-          <ExternalLink
-            destination="https://blog.omnivore.app/p/contributing-to-omnivore"
-            title="Contribute"
-          />
-          <ExternalLink
-            destination="https://docs.omnivore.app"
-            title="Documentation"
-          />
-          <NavMenuFooter />
-        </VStack>
-      </Box>
-      {/* This spacer pushes library content to the right of 
-      the fixed left side menu. */}
-      <Box
-        css={{
-          minWidth: LIBRARY_LEFT_MENU_WIDTH,
-          height: '100%',
-          bg: '$thBackground',
-          '@mdDown': {
-            display: 'none',
-          },
-        }}
-      ></Box>
-    </>
-  )
-}
-
-type SettingsButtonProps = {
-  name: string
-  destination: string
-}
-
-function SettingsButton(props: SettingsButtonProps): JSX.Element {
-  const router = useRouter()
-  const selected = useMemo(() => {
-    if (router && router.isReady) {
-      return router.asPath.endsWith(props.destination)
-    }
-    return false
-  }, [props, router])
-
-  return (
-    <Link href={props.destination} passHref title={props.name} legacyBehavior>
-      <SpanBox
-        css={{
-          mx: '10px',
-          pl: '25px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '2px',
-
-          width: 'calc(100% - 20px)',
-          maxWidth: '100%',
-          height: '32px',
-
-          fontSize: '14px',
-          fontWeight: 'regular',
-          fontFamily: '$display',
-          verticalAlign: 'middle',
-          borderRadius: '3px',
-          cursor: 'pointer',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-
-          backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
-
-          color: selected
-            ? '$thLibraryMenuSecondary'
-            : '$thLibraryMenuUnselected',
-
-          '&:hover': {
-            textDecoration: 'underline',
-            backgroundColor: selected
-              ? '$thLibrarySelectionColor'
-              : '$thBackground4',
-          },
-          '&:active': {
-            backgroundColor: selected
-              ? '$thLibrarySelectionColor'
-              : '$thBackground4',
-          },
-        }}
-      >
-        {props.name}
-      </SpanBox>
-    </Link>
-  )
-}
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index 3c0c0665f..673ef4624 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -17,6 +17,7 @@ import { currentThemeName, updateTheme } from '../../../lib/themeUpdater'
 import { LineHeightIncreaseIcon } from '../../elements/images/LineHeightIncreaseIconProps'
 import { LineHeightDecreaseIcon } from '../../elements/images/LineHeightDecreaseIcon'
 import * as Switch from '@radix-ui/react-switch'
+import { Checkbox } from '@radix-ui/react-checkbox'
 
 type ReaderSettingsProps = {
   readerSettings: ReaderSettings
@@ -575,7 +576,34 @@ function ThemeSelector(): JSX.Element {
         height: '100%',
       }}
     >
-      <StyledText style="displaySettingsLabel">Themes</StyledText>
+      <HStack
+        distribution="start"
+        css={{
+          width: '100%',
+        }}
+      >
+        <StyledText style="displaySettingsLabel">Themes</StyledText>
+        <HStack
+          alignment="center"
+          distribution="center"
+          css={{ ml: 'auto', gap: '5px', mt: '10px', cursor: 'pointer' }}
+        >
+          <Label
+            htmlFor="auto-checkbox"
+            css={{
+              fontFamily: '$display',
+              fontWeight: '500',
+              fontSize: '12px',
+              lineHeight: '20px',
+              color: '$thTextSubtle2',
+            }}
+          >
+            Auto
+          </Label>
+          <input id="auto-checkbox" type="checkbox" />
+        </HStack>
+      </HStack>
+
       <HStack
         distribution="start"
         css={{
diff --git a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
index dc7ca5777..361f24f11 100644
--- a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
+++ b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
@@ -1,6 +1,6 @@
 import { Box } from '../../elements/LayoutPrimitives'
 import { useMemo } from 'react'
-import { LIBRARY_LEFT_MENU_WIDTH } from './LibraryFilterMenu'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../navMenu/LibraryMenu'
 import { LayoutType } from './HomeFeedContainer'
 import { SuggestionBox, SuggestionAction } from '../../elements/SuggestionBox'
 
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 0bf63a5cf..b6313765c 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -36,7 +36,7 @@ import { AddLinkModal } from './AddLinkModal'
 import { EditLibraryItemModal } from './EditItemModals'
 import { EmptyLibrary } from './EmptyLibrary'
 import { HighlightItemsLayout } from './HighlightsLayout'
-import { LibraryFilterMenu } from './LibraryFilterMenu'
+import { LibraryFilterMenu } from '../navMenu/LibraryMenu'
 import {
   LibraryHeader,
   MultiSelectMode,
@@ -96,13 +96,11 @@ export function HomeFeedContainer(): JSX.Element {
 
   const gridContainerRef = useRef<HTMLDivElement>(null)
 
-  const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
+  const [labelsTarget, setLabelsTarget] =
+    useState<LibraryItem | undefined>(undefined)
 
-  const [notebookTarget, setNotebookTarget] = useState<LibraryItem | undefined>(
-    undefined
-  )
+  const [notebookTarget, setNotebookTarget] =
+    useState<LibraryItem | undefined>(undefined)
 
   const [showAddLinkModal, setShowAddLinkModal] = useState(false)
   const [showEditTitleModal, setShowEditTitleModal] = useState(false)
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
deleted file mode 100644
index 5cfa16319..000000000
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ /dev/null
@@ -1,613 +0,0 @@
-import { ReactNode, useEffect, useMemo, useRef } from 'react'
-import { StyledText } from '../../elements/StyledText'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { Circle } from 'phosphor-react'
-import {
-  Subscription,
-  SubscriptionType,
-  useGetSubscriptionsQuery,
-} from '../../../lib/networking/queries/useGetSubscriptionsQuery'
-import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
-import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { theme } from '../../tokens/stitches.config'
-import { useRegisterActions } from 'kbar'
-import { LogoBox } from '../../elements/LogoBox'
-import { usePersistedState } from '../../../lib/hooks/usePersistedState'
-import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
-import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
-import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
-import Link from 'next/link'
-import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
-import { SplitButton } from '../../elements/SplitButton'
-import { AvatarDropdown } from '../../elements/AvatarDropdown'
-import { PrimaryDropdown } from '../PrimaryDropdown'
-import { NavMenuFooter } from '../navMenu/Footer'
-
-export const LIBRARY_LEFT_MENU_WIDTH = '275px'
-
-type LibraryFilterMenuProps = {
-  setShowAddLinkModal: (show: boolean) => void
-
-  searchTerm: string | undefined
-  applySearchQuery: (searchTerm: string) => void
-
-  showFilterMenu: boolean
-  setShowFilterMenu: (show: boolean) => void
-}
-
-export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
-  const [labels, setLabels] = usePersistedState<Label[]>({
-    key: 'menu-labels',
-    isSessionStorage: false,
-    initialValue: [],
-  })
-  const [savedSearches, setSavedSearches] = usePersistedState<SavedSearch[]>({
-    key: 'menu-searches',
-    isSessionStorage: false,
-    initialValue: [],
-  })
-  const [subscriptions, setSubscriptions] = usePersistedState<Subscription[]>({
-    key: 'menu-subscriptions',
-    isSessionStorage: false,
-    initialValue: [],
-  })
-  const labelsResponse = useGetLabelsQuery()
-  const searchesResponse = useGetSavedSearchQuery()
-  const subscriptionsResponse = useGetSubscriptionsQuery()
-
-  useEffect(() => {
-    if (
-      !labelsResponse.error &&
-      !labelsResponse.isLoading &&
-      labelsResponse.labels
-    ) {
-      setLabels(labelsResponse.labels)
-    }
-  }, [setLabels, labelsResponse])
-
-  useEffect(() => {
-    if (
-      !subscriptionsResponse.error &&
-      !subscriptionsResponse.isLoading &&
-      subscriptionsResponse.subscriptions
-    ) {
-      setSubscriptions(subscriptionsResponse.subscriptions)
-    }
-  }, [setSubscriptions, subscriptionsResponse])
-
-  useEffect(() => {
-    if (
-      !searchesResponse.error &&
-      !searchesResponse.isLoading &&
-      searchesResponse.savedSearches
-    ) {
-      setSavedSearches(searchesResponse.savedSearches)
-    }
-  }, [setSavedSearches, searchesResponse])
-
-  return (
-    <>
-      <Box
-        css={{
-          left: '0px',
-          top: '0px',
-          position: 'fixed',
-          bg: '$thLeftMenuBackground',
-          height: '100%',
-          width: LIBRARY_LEFT_MENU_WIDTH,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-          '@mdDown': {
-            visibility: props.showFilterMenu ? 'visible' : 'hidden',
-            width: '100%',
-            transition: 'visibility 0s, top 150ms',
-          },
-          zIndex: 3,
-        }}
-      >
-        <Box
-          css={{
-            width: '100%',
-            px: '25px',
-            pb: '25px',
-            pt: '4.5px',
-            lineHeight: '1',
-          }}
-        >
-          <LogoBox />
-        </Box>
-        <SavedSearches {...props} savedSearches={savedSearches} />
-        <Subscriptions {...props} subscriptions={subscriptions} />
-        <Labels {...props} labels={labels} />
-        <NavMenuFooter {...props} />
-        <Box css={{ height: '250px ' }} />
-      </Box>
-      {/* This spacer pushes library content to the right of 
-      the fixed left side menu. */}
-      <Box
-        css={{
-          minWidth: LIBRARY_LEFT_MENU_WIDTH,
-          height: '100%',
-          bg: '$thBackground',
-          '@mdDown': {
-            display: 'none',
-          },
-        }}
-      ></Box>
-    </>
-  )
-}
-
-function SavedSearches(
-  props: LibraryFilterMenuProps & { savedSearches: SavedSearch[] | undefined }
-): JSX.Element {
-  const sortedSearches = useMemo(() => {
-    return props.savedSearches
-      ?.filter((it) => it.visible)
-      ?.sort(
-        (left: SavedSearch, right: SavedSearch) =>
-          left.position - right.position
-      )
-  }, [props.savedSearches])
-
-  useRegisterActions(
-    (sortedSearches ?? []).map((item, idx) => {
-      const key = String(idx + 1)
-      return {
-        id: `saved_search_${key}`,
-        name: item.name,
-        shortcut: [key],
-        section: 'Saved Searches',
-        keywords: '?' + item.name,
-        perform: () => {
-          props.applySearchQuery(item.filter)
-        },
-      }
-    }),
-    [props.savedSearches]
-  )
-
-  const [collapsed, setCollapsed] = usePersistedState<boolean>({
-    key: `--saved-searches-collapsed`,
-    initialValue: false,
-  })
-
-  return (
-    <MenuPanel
-      title="Saved Searches"
-      collapsed={collapsed}
-      setCollapsed={setCollapsed}
-    >
-      {!collapsed &&
-        sortedSearches &&
-        sortedSearches?.map((item) => (
-          <FilterButton
-            key={item.name}
-            text={item.name}
-            filterTerm={item.filter}
-            {...props}
-          />
-        ))}
-      {!collapsed && sortedSearches !== undefined && (
-        <EditButton
-          title="Edit Saved Searches"
-          destination="/settings/saved-searches"
-        />
-      )}
-
-      <Box css={{ height: '10px' }}></Box>
-    </MenuPanel>
-  )
-}
-
-function Subscriptions(
-  props: LibraryFilterMenuProps & { subscriptions: Subscription[] | undefined }
-): JSX.Element {
-  const [collapsed, setCollapsed] = usePersistedState<boolean>({
-    key: `--subscriptions-collapsed`,
-    initialValue: false,
-  })
-
-  const sortedSubscriptions = useMemo(() => {
-    if (!props.subscriptions) {
-      return []
-    }
-    return props.subscriptions
-      .filter((s) => s.status == 'ACTIVE')
-      .sort((a, b) => a.name.localeCompare(b.name))
-  }, [props.subscriptions])
-
-  useRegisterActions(
-    (sortedSubscriptions ?? []).map((subscription, idx) => {
-      const key = String(idx + 1)
-      const name = subscription.name
-      return {
-        id: `subscription_${key}`,
-        section: 'Subscriptions',
-        name: name,
-        keywords: '*' + name,
-        perform: () => {
-          props.applySearchQuery(`subscription:\"${name}\"`)
-        },
-      }
-    }),
-    [sortedSubscriptions]
-  )
-
-  return (
-    <MenuPanel
-      title="Subscriptions"
-      collapsed={collapsed}
-      setCollapsed={setCollapsed}
-    >
-      {!collapsed ? (
-        <>
-          <FilterButton
-            filterTerm="in:inbox has:subscriptions"
-            text="All"
-            {...props}
-          />
-          <FilterButton
-            filterTerm={`in:inbox label:RSS`}
-            text="Feeds"
-            {...props}
-          />
-          <FilterButton
-            filterTerm={`in:inbox label:Newsletter`}
-            text="Newsletters"
-            {...props}
-          />
-          {(sortedSubscriptions ?? []).map((item) => {
-            switch (item.type) {
-              case SubscriptionType.NEWSLETTER:
-                return (
-                  <FilterButton
-                    key={item.id}
-                    filterTerm={`in:inbox subscription:\"${item.name}\"`}
-                    text={item.name}
-                    {...props}
-                  />
-                )
-              case SubscriptionType.RSS:
-                return (
-                  <FilterButton
-                    key={item.id}
-                    filterTerm={`in:inbox rss:\"${item.url}\"`}
-                    text={item.name}
-                    {...props}
-                  />
-                )
-            }
-          })}
-          <EditButton
-            title="Edit Subscriptions"
-            destination="/settings/subscriptions"
-          />
-        </>
-      ) : (
-        <SpanBox css={{ mb: '10px' }} />
-      )}
-    </MenuPanel>
-  )
-}
-
-function Labels(
-  props: LibraryFilterMenuProps & { labels: Label[] }
-): JSX.Element {
-  const [collapsed, setCollapsed] = usePersistedState<boolean>({
-    key: `--labels-collapsed`,
-    initialValue: false,
-  })
-
-  const sortedLabels = useMemo(() => {
-    return props.labels.sort((left: Label, right: Label) =>
-      left.name.localeCompare(right.name)
-    )
-  }, [props.labels])
-
-  return (
-    <MenuPanel
-      title="Labels"
-      editTitle="Edit Labels"
-      hideBottomBorder={true}
-      collapsed={collapsed}
-      setCollapsed={setCollapsed}
-    >
-      {!collapsed && (
-        <>
-          {sortedLabels.map((item) => {
-            return <LabelButton key={item.id} label={item} {...props} />
-          })}
-          <EditButton title="Edit Labels" destination="/settings/labels" />
-        </>
-      )}
-    </MenuPanel>
-  )
-}
-
-type MenuPanelProps = {
-  title: string
-  children: ReactNode
-  editFunc?: () => void
-  editTitle?: string
-  hideBottomBorder?: boolean
-  collapsed: boolean
-  setCollapsed: (collapsed: boolean) => void
-}
-
-function MenuPanel(props: MenuPanelProps): JSX.Element {
-  return (
-    <VStack
-      css={{
-        m: '0px',
-        width: '100%',
-        borderBottom: props.hideBottomBorder
-          ? '1px solid transparent'
-          : '1px solid $thBorderColor',
-        px: '15px',
-      }}
-      alignment="start"
-      distribution="start"
-    >
-      <HStack css={{ width: '100%' }} distribution="start" alignment="center">
-        <StyledText
-          css={{
-            fontFamily: 'Inter',
-            fontWeight: '600',
-            fontSize: '16px',
-            lineHeight: '125%',
-            color: '$thLibraryMenuPrimary',
-            pl: '10px',
-            mt: '20px',
-            mb: '10px',
-          }}
-        >
-          {props.title}
-        </StyledText>
-        <SpanBox
-          css={{
-            display: 'flex',
-            height: '100%',
-            mt: '10px',
-            marginLeft: 'auto',
-            verticalAlign: 'middle',
-          }}
-        >
-          <Button
-            style="articleActionIcon"
-            onClick={(event) => {
-              props.setCollapsed(!props.collapsed)
-              event.preventDefault()
-            }}
-          >
-            {props.collapsed ? (
-              <ToggleCaretRightIcon
-                size={15}
-                color={theme.colors.thLibraryMenuPrimary.toString()}
-              />
-            ) : (
-              <ToggleCaretDownIcon
-                size={15}
-                color={theme.colors.thLibraryMenuPrimary.toString()}
-              />
-            )}
-          </Button>
-        </SpanBox>
-      </HStack>
-      {props.children}
-    </VStack>
-  )
-}
-
-type FilterButtonProps = {
-  text: string
-
-  filterTerm: string
-  searchTerm: string | undefined
-
-  applySearchQuery: (searchTerm: string) => void
-
-  setShowFilterMenu: (show: boolean) => void
-}
-
-function FilterButton(props: FilterButtonProps): JSX.Element {
-  const isInboxFilter = (filter: string) => {
-    return filter === '' || filter === 'in:inbox'
-  }
-  const selected = useMemo(() => {
-    if (isInboxFilter(props.filterTerm) && !props.searchTerm) {
-      return true
-    }
-    return props.searchTerm === props.filterTerm
-  }, [props.searchTerm, props.filterTerm])
-
-  return (
-    <Box
-      css={{
-        pl: '10px',
-        mb: '2px',
-        display: 'flex',
-        width: '100%',
-        maxWidth: '100%',
-        height: '32px',
-
-        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
-        fontSize: '14px',
-        fontWeight: 'regular',
-        fontFamily: '$display',
-        color: selected
-          ? '$thLibraryMenuSecondary'
-          : '$thLibraryMenuUnselected',
-        verticalAlign: 'middle',
-        borderRadius: '3px',
-        cursor: 'pointer',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        alignItems: 'center',
-        '&:hover': {
-          backgroundColor: selected
-            ? '$thLibrarySelectionColor'
-            : '$thBackground4',
-        },
-        '&:active': {
-          backgroundColor: selected
-            ? '$thLibrarySelectionColor'
-            : '$thBackground4',
-        },
-      }}
-      title={props.text}
-      onClick={(e) => {
-        props.applySearchQuery(props.filterTerm)
-        props.setShowFilterMenu(false)
-        e.preventDefault()
-      }}
-    >
-      {props.text}
-    </Box>
-  )
-}
-
-type LabelButtonProps = {
-  label: Label
-  searchTerm: string | undefined
-  applySearchQuery: (searchTerm: string) => void
-}
-
-function LabelButton(props: LabelButtonProps): JSX.Element {
-  const labelId = `checkbox-label-${props.label.id}`
-  const checkboxRef = useRef<HTMLInputElement | null>(null)
-  const state = useMemo(() => {
-    const term = props.searchTerm ?? ''
-    if (term.indexOf(`label:\"${props.label.name}\"`) >= 0) {
-      return 'on'
-    }
-    return 'off'
-  }, [props.searchTerm, props.label])
-
-  return (
-    <HStack
-      css={{
-        pl: '10px',
-        pt: '2px', // TODO: hack to middle align
-        width: '100%',
-        height: '30px',
-
-        fontSize: '14px',
-        fontWeight: 'regular',
-        fontFamily: '$display',
-        color:
-          state == 'on'
-            ? '$thLibraryMenuSecondary'
-            : '$thLibraryMenuUnselected',
-
-        verticalAlign: 'middle',
-        borderRadius: '3px',
-        cursor: 'pointer',
-
-        m: '0px',
-        '&:hover': {
-          backgroundColor: '$thBackground4',
-        },
-      }}
-      title={props.label.name}
-      alignment="center"
-      distribution="start"
-    >
-      <label
-        style={{
-          cursor: 'pointer',
-          width: '100%',
-          maxWidth: '170px',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-        onClick={() => {
-          const query = props.searchTerm?.replace(/label:\"(.*)\"/, '') ?? ''
-          if (checkboxRef.current?.checked) {
-            props.applySearchQuery(query.trim())
-          } else {
-            props.applySearchQuery(
-              `${query.trim()} label:\"${props.label.name}\"`
-            )
-          }
-        }}
-      >
-        <Circle size={9} color={props.label.color} weight="fill" />
-        <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
-      </label>
-      <SpanBox
-        css={{
-          ml: 'auto',
-        }}
-      >
-        <input
-          id={labelId}
-          ref={checkboxRef}
-          type="checkbox"
-          checked={state === 'on'}
-          onChange={(e) => {
-            if (e.target.checked) {
-              props.applySearchQuery(
-                `${props.searchTerm ?? ''} label:\"${props.label.name}\"`
-              )
-            } else {
-              const query =
-                props.searchTerm?.replace(
-                  `label:\"${props.label.name}\"`,
-                  ''
-                ) ?? ''
-              props.applySearchQuery(query)
-            }
-          }}
-        />
-      </SpanBox>
-    </HStack>
-  )
-}
-
-type EditButtonProps = {
-  title: string
-  destination: string
-}
-
-function EditButton(props: EditButtonProps): JSX.Element {
-  return (
-    <Link href={props.destination} passHref legacyBehavior>
-      <SpanBox
-        css={{
-          ml: '10px',
-          mb: '10px',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '2px',
-          '&:hover': {
-            textDecoration: 'underline',
-          },
-
-          width: '100%',
-          maxWidth: '100%',
-          height: '32px',
-
-          fontSize: '14px',
-          fontWeight: 'regular',
-          fontFamily: '$display',
-          color: '$thLibraryMenuUnselected',
-          verticalAlign: 'middle',
-          borderRadius: '3px',
-          cursor: 'pointer',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {props.title}
-      </SpanBox>
-    </Link>
-  )
-}
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index c802e2bbd..a178bd4b7 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -16,7 +16,7 @@ import {
 import { LayoutType } from './HomeFeedContainer'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
 import { DEFAULT_HEADER_HEIGHT, HeaderSpacer } from './HeaderSpacer'
-import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../navMenu/LibraryMenu'
 import { CardCheckbox } from '../../patterns/LibraryCards/LibraryCardStyles'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx
index 4ac9bcf67..f8b0a9804 100644
--- a/packages/web/components/templates/navMenu/Footer.tsx
+++ b/packages/web/components/templates/navMenu/Footer.tsx
@@ -1,7 +1,7 @@
 import { HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { SplitButton } from '../../elements/SplitButton'
 import { PrimaryDropdown } from '../PrimaryDropdown'
-import { LIBRARY_LEFT_MENU_WIDTH } from '../homeFeed/LibraryFilterMenu'
+import { LIBRARY_LEFT_MENU_WIDTH } from './LibraryMenu'
 
 type NavMenuFooterProps = {
   setShowAddLinkModal?: (show: true) => void

From 1082b3fa9d0a5812c6566c74085d984d5409ec5c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 14:42:54 +0800
Subject: [PATCH 6/8] Remove server sync for theme settings

---
 .../web/components/patterns/LoadingView.tsx   |   2 +-
 .../components/templates/PrimaryLayout.tsx    |   2 +-
 .../components/templates/SettingsLayout.tsx   |   2 +-
 packages/web/lib/hooks/useReaderSettings.tsx  |   2 +-
 packages/web/lib/themeUpdater.tsx             |   2 +-
 .../web/pages/[username]/[slug]/debug.tsx     |   2 +-
 packages/web/pages/[username]/links/[id].tsx  |   2 +-
 .../web/pages/app/[username]/[slug]/index.tsx |   7 +-
 .../app/[username]/link-request/[id].tsx      |   2 +-
 packages/web/pages/app/privacy.tsx            |   2 +-
 packages/web/pages/app/terms.tsx              |   2 +-
 packages/web/pages/article/index.tsx          |   2 +-
 packages/web/pages/article/sr/[id].tsx        |   2 +-
 packages/web/pages/settings/account.tsx       |   2 +-
 packages/web/pages/settings/api.tsx           |   2 +-
 .../web/pages/settings/delete-my-account.tsx  |   2 +-
 packages/web/pages/settings/emails/index.tsx  | 282 +++++++++---------
 packages/web/pages/settings/emails/recent.tsx |  12 +-
 packages/web/pages/settings/feeds/index.tsx   |   2 +-
 packages/web/pages/settings/integrations.tsx  |   2 +-
 packages/web/pages/settings/labels.tsx        |   7 +-
 .../web/pages/settings/pinned-searches.tsx    |   2 +-
 packages/web/pages/settings/rules.tsx         |  12 +-
 .../web/pages/settings/saved-searches.tsx     |  33 +-
 packages/web/pages/settings/subscriptions.tsx |   9 +-
 packages/web/pages/settings/webhooks.tsx      |   2 +-
 packages/web/pages/tools/bulk.tsx             |   2 +-
 packages/web/pages/tools/import/file.tsx      |   2 +-
 .../web/pages/tools/import/matter-archive.tsx |   2 +-
 29 files changed, 203 insertions(+), 203 deletions(-)

diff --git a/packages/web/components/patterns/LoadingView.tsx b/packages/web/components/patterns/LoadingView.tsx
index b2a496fe7..2f71e8c60 100644
--- a/packages/web/components/patterns/LoadingView.tsx
+++ b/packages/web/components/patterns/LoadingView.tsx
@@ -6,7 +6,7 @@ type LoadingViewProps = {
 }
 
 export function LoadingView(props: LoadingViewProps): JSX.Element {
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   return (
     <VStack
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index e08f3f08b..906eb734e 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -23,7 +23,7 @@ type PrimaryLayoutProps = {
 }
 
 export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index dd734e772..6f05780f7 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/packages/web/components/templates/SettingsLayout.tsx
@@ -26,7 +26,7 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
     useState(false)
 
   useKeyboardShortcuts(navigationCommands(router))
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const showLogout = useCallback(() => {
     setShowLogoutConfirmation(true)
diff --git a/packages/web/lib/hooks/useReaderSettings.tsx b/packages/web/lib/hooks/useReaderSettings.tsx
index cbd7c134b..66e1fdefa 100644
--- a/packages/web/lib/hooks/useReaderSettings.tsx
+++ b/packages/web/lib/hooks/useReaderSettings.tsx
@@ -37,7 +37,7 @@ export type ReaderSettings = {
 }
 
 export const useReaderSettings = (): ReaderSettings => {
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const [, updateState] = useState({})
 
diff --git a/packages/web/lib/themeUpdater.tsx b/packages/web/lib/themeUpdater.tsx
index 77f885f52..2873da351 100644
--- a/packages/web/lib/themeUpdater.tsx
+++ b/packages/web/lib/themeUpdater.tsx
@@ -88,7 +88,7 @@ export function currentTheme(): ThemeId | undefined {
   return ThemeId.Light
 }
 
-export function applyStoredTheme(syncWithServer = true): ThemeId | undefined {
+export function applyStoredTheme(): ThemeId | undefined {
   if (typeof window === 'undefined') {
     return undefined
   }
diff --git a/packages/web/pages/[username]/[slug]/debug.tsx b/packages/web/pages/[username]/[slug]/debug.tsx
index ae4bd375f..ab7886ace 100644
--- a/packages/web/pages/[username]/[slug]/debug.tsx
+++ b/packages/web/pages/[username]/[slug]/debug.tsx
@@ -30,7 +30,7 @@ export default function Debug(): JSX.Element {
     includeFriendsHighlights: false,
   })
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const sortedAttributes = useMemo(() => {
     // if (!sortedAttributes) {
diff --git a/packages/web/pages/[username]/links/[id].tsx b/packages/web/pages/[username]/links/[id].tsx
index f3ac5b7dd..ae933aee3 100644
--- a/packages/web/pages/[username]/links/[id].tsx
+++ b/packages/web/pages/[username]/links/[id].tsx
@@ -20,7 +20,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
   const readerSettings = useReaderSettings()
   const [articleId, setArticleId] = useState<string | undefined>(undefined)
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   useEffect(() => {
     if (!router.isReady) return
diff --git a/packages/web/pages/app/[username]/[slug]/index.tsx b/packages/web/pages/app/[username]/[slug]/index.tsx
index fbecdb63a..c704d620c 100644
--- a/packages/web/pages/app/[username]/[slug]/index.tsx
+++ b/packages/web/pages/app/[username]/[slug]/index.tsx
@@ -25,13 +25,12 @@ type AppArticleEmbedContentProps = {
 }
 
 export default function AppArticleEmbed(): JSX.Element {
-  applyStoredTheme(false) // false to skip server sync
+  applyStoredTheme()
 
   const router = useRouter()
 
-  const [contentProps, setContentProps] = useState<
-    AppArticleEmbedContentProps | undefined
-  >(undefined)
+  const [contentProps, setContentProps] =
+    useState<AppArticleEmbedContentProps | undefined>(undefined)
 
   useEffect(() => {
     if (!router.isReady) return
diff --git a/packages/web/pages/app/[username]/link-request/[id].tsx b/packages/web/pages/app/[username]/link-request/[id].tsx
index 74ba9279c..a1d96f8ff 100644
--- a/packages/web/pages/app/[username]/link-request/[id].tsx
+++ b/packages/web/pages/app/[username]/link-request/[id].tsx
@@ -9,7 +9,7 @@ import { PrimaryLayout } from '../../../../components/templates/PrimaryLayout'
 import { applyStoredTheme } from '../../../../lib/themeUpdater'
 
 export default function LinkRequestPage(): JSX.Element {
-  applyStoredTheme(false) // false to skip server sync
+  applyStoredTheme()
 
   const router = useRouter()
   const [requestID, setRequestID] = useState<string | undefined>(undefined)
diff --git a/packages/web/pages/app/privacy.tsx b/packages/web/pages/app/privacy.tsx
index 3e59a439e..0352dd5c2 100644
--- a/packages/web/pages/app/privacy.tsx
+++ b/packages/web/pages/app/privacy.tsx
@@ -2,6 +2,6 @@ import { PrivacyPolicy } from '../../components/templates/PrivacyPolicy'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 
 export default function Privacy(): JSX.Element {
-  applyStoredTheme(false) // false to skip server sync
+  applyStoredTheme()
   return <PrivacyPolicy isAppEmbed />
 }
diff --git a/packages/web/pages/app/terms.tsx b/packages/web/pages/app/terms.tsx
index fd4325ab7..5e87fe202 100644
--- a/packages/web/pages/app/terms.tsx
+++ b/packages/web/pages/app/terms.tsx
@@ -2,6 +2,6 @@ import { TermsAndConditions } from '../../components/templates/TermsAndCondition
 import { applyStoredTheme } from '../../lib/themeUpdater'
 
 export default function Terms(): JSX.Element {
-  applyStoredTheme(false) // false to skip server sync
+  applyStoredTheme()
   return <TermsAndConditions isAppEmbed />
 }
diff --git a/packages/web/pages/article/index.tsx b/packages/web/pages/article/index.tsx
index 1b09414ed..dca4cde0f 100644
--- a/packages/web/pages/article/index.tsx
+++ b/packages/web/pages/article/index.tsx
@@ -16,7 +16,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
   const readerSettings = useReaderSettings()
   const [url, setUrl] = useState<string | undefined>(undefined)
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   useEffect(() => {
     if (!router.isReady) return
diff --git a/packages/web/pages/article/sr/[id].tsx b/packages/web/pages/article/sr/[id].tsx
index 6213a6759..ed5d1016b 100644
--- a/packages/web/pages/article/sr/[id].tsx
+++ b/packages/web/pages/article/sr/[id].tsx
@@ -20,7 +20,7 @@ export default function ArticleSavingRequestPage(): JSX.Element {
   const readerSettings = useReaderSettings()
   const [articleId, setArticleId] = useState<string | undefined>(undefined)
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   useEffect(() => {
     if (!router.isReady) return
diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx
index d4cc1252a..3d57d36e0 100644
--- a/packages/web/pages/settings/account.tsx
+++ b/packages/web/pages/settings/account.tsx
@@ -198,7 +198,7 @@ export default function Account(): JSX.Element {
     })()
   }, [email])
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   return (
     <SettingsLayout>
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 69b51531a..721546900 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -28,7 +28,7 @@ export default function Api(): JSX.Element {
   const neverExpiresDate = new Date(8640000000000000)
   const defaultExpiresAt = 'Never'
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   async function onDelete(id: string): Promise<void> {
     const result = await revokeApiKeyMutation(id)
diff --git a/packages/web/pages/settings/delete-my-account.tsx b/packages/web/pages/settings/delete-my-account.tsx
index 250c76cc0..44682b4f4 100644
--- a/packages/web/pages/settings/delete-my-account.tsx
+++ b/packages/web/pages/settings/delete-my-account.tsx
@@ -20,7 +20,7 @@ export default function DeleteMyAccount(): JSX.Element {
   const viewer = useGetViewerQuery()
   const [showConfirm, setShowConfirm] = useState(false)
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   async function deleteAccount(): Promise<void> {
     const viewerId = viewer.viewerData?.me?.id
diff --git a/packages/web/pages/settings/emails/index.tsx b/packages/web/pages/settings/emails/index.tsx
index 266a33a6b..bb00659c3 100644
--- a/packages/web/pages/settings/emails/index.tsx
+++ b/packages/web/pages/settings/emails/index.tsx
@@ -81,11 +81,10 @@ function CopyTextButton(props: CopyTextButtonProps): JSX.Element {
 export default function EmailsPage(): JSX.Element {
   const { emailAddresses, revalidate, isValidating } =
     useGetNewsletterEmailsQuery()
-  const [confirmDeleteEmailId, setConfirmDeleteEmailId] = useState<
-    undefined | string
-  >(undefined)
+  const [confirmDeleteEmailId, setConfirmDeleteEmailId] =
+    useState<undefined | string>(undefined)
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   async function createEmail(): Promise<void> {
     const email = await createNewsletterEmailMutation()
@@ -114,143 +113,148 @@ export default function EmailsPage(): JSX.Element {
     return emailAddresses.sort((a, b) => a.createdAt.localeCompare(b.createdAt))
   }, [emailAddresses])
 
-  return <>
-    <SettingsTable
-      pageId="settings-emails-tag"
-      pageInfoLink="https://docs.omnivore.app/using/inbox.html"
-      headerTitle="Address"
-      createTitle="Create a new email address"
-      createAction={createEmail}
-      suggestionInfo={{
-        title: 'Subscribe to newsletters with an Omnivore Email Address',
-        message:
-          'Create an Omnivore email address and use it to subscribe to newsletters or send yourself documents. Newsletters and documents will be categorized and added to your library when we receive a message. View all received emails with the "Recently Received Emails" link at the bottom of this page.',
-        docs: 'https://docs.omnivore.app/using/inbox.html',
-        key: '--settings-emails-show-help',
-        CTAText: 'Create an email address',
-        onClickCTA: () => {
-          createEmail()
-        },
-      }}
-    >
-      {sortedEmailAddresses.length > 0 ? (
-        sortedEmailAddresses.map((email, i) => {
-          return (
-            <SettingsTableRow
-              key={email.address}
-              title={email.address}
-              isLast={i === sortedEmailAddresses.length - 1}
-              onDelete={() => setConfirmDeleteEmailId(email.id)}
-              deleteTitle="Delete"
-              sublineElement={
-                <StyledText
-                  css={{
-                    my: '5px',
-                    fontSize: '11px',
-                    a: {
-                      color: '$omnivoreCtaYellow',
-                    },
-                  }}
-                >
-                  {`created ${formattedShortDate(email.createdAt)}, `}
-                  <Link href="/settings/subscriptions" legacyBehavior>{`${email.subscriptionCount} subscriptions`}</Link>
-                </StyledText>
-              }
-              titleElement={
-                <CopyTextBtnWrapper
-                  css={{
-                    marginLeft: '20px',
-                    '@mdDown': {
-                      marginRight: '10px',
-                    },
-                  }}
-                >
-                  <CopyTextButton
-                    text={email.address}
-                    type={TextType.EmailAddress}
-                  />
-                </CopyTextBtnWrapper>
-              }
-              extraElement={
-                email.confirmationCode ? (
-                  <HStack
-                    alignment="start"
-                    distribution="center"
-                    css={{
-                      width: '100%',
-                      backgroundColor: '$grayBgActive',
-                      borderRadius: '6px',
-                      padding: '4px 4px 4px 0px',
-                      '@md': {
-                        width: '30%',
-                        backgroundColor: 'transparent',
-                      },
-                    }}
-                  >
-                    <>
-                      <StyledText
-                        css={{
-                          fontSize: '11px',
-                          '@md': {
-                            marginTop: '5px',
-                          },
-                          '@mdDown': {
-                            marginLeft: 'auto',
-                          },
-                          marginRight: '10px',
-                        }}
-                      >
-                        {`Gmail: ${email.confirmationCode}`}
-                      </StyledText>
-                      <Box>
-                        <CopyTextBtnWrapper>
-                          <CopyTextButton
-                            text={email.confirmationCode || ''}
-                            type={TextType.ConfirmationCode}
-                          />
-                        </CopyTextBtnWrapper>
-                      </Box>
-                    </>
-                  </HStack>
-                ) : (
-                  <></>
-                )
-              }
-            />
-          );
-        })
-      ) : (
-        <EmptySettingsRow
-          text={isValidating ? '-' : 'No Email Addresses Found'}
-        />
-      )}
-      <SpanBox
-        css={{
-          pt: '15px',
-          fontSize: '12px',
-          marginLeft: 'auto',
-          a: {
-            color: '$omnivoreCtaYellow',
+  return (
+    <>
+      <SettingsTable
+        pageId="settings-emails-tag"
+        pageInfoLink="https://docs.omnivore.app/using/inbox.html"
+        headerTitle="Address"
+        createTitle="Create a new email address"
+        createAction={createEmail}
+        suggestionInfo={{
+          title: 'Subscribe to newsletters with an Omnivore Email Address',
+          message:
+            'Create an Omnivore email address and use it to subscribe to newsletters or send yourself documents. Newsletters and documents will be categorized and added to your library when we receive a message. View all received emails with the "Recently Received Emails" link at the bottom of this page.',
+          docs: 'https://docs.omnivore.app/using/inbox.html',
+          key: '--settings-emails-show-help',
+          CTAText: 'Create an email address',
+          onClickCTA: () => {
+            createEmail()
           },
         }}
       >
-        <Link href="/settings/emails/recent">
-          View recently received emails
-        </Link>
-      </SpanBox>
-    </SettingsTable>
+        {sortedEmailAddresses.length > 0 ? (
+          sortedEmailAddresses.map((email, i) => {
+            return (
+              <SettingsTableRow
+                key={email.address}
+                title={email.address}
+                isLast={i === sortedEmailAddresses.length - 1}
+                onDelete={() => setConfirmDeleteEmailId(email.id)}
+                deleteTitle="Delete"
+                sublineElement={
+                  <StyledText
+                    css={{
+                      my: '5px',
+                      fontSize: '11px',
+                      a: {
+                        color: '$omnivoreCtaYellow',
+                      },
+                    }}
+                  >
+                    {`created ${formattedShortDate(email.createdAt)}, `}
+                    <Link
+                      href="/settings/subscriptions"
+                      legacyBehavior
+                    >{`${email.subscriptionCount} subscriptions`}</Link>
+                  </StyledText>
+                }
+                titleElement={
+                  <CopyTextBtnWrapper
+                    css={{
+                      marginLeft: '20px',
+                      '@mdDown': {
+                        marginRight: '10px',
+                      },
+                    }}
+                  >
+                    <CopyTextButton
+                      text={email.address}
+                      type={TextType.EmailAddress}
+                    />
+                  </CopyTextBtnWrapper>
+                }
+                extraElement={
+                  email.confirmationCode ? (
+                    <HStack
+                      alignment="start"
+                      distribution="center"
+                      css={{
+                        width: '100%',
+                        backgroundColor: '$grayBgActive',
+                        borderRadius: '6px',
+                        padding: '4px 4px 4px 0px',
+                        '@md': {
+                          width: '30%',
+                          backgroundColor: 'transparent',
+                        },
+                      }}
+                    >
+                      <>
+                        <StyledText
+                          css={{
+                            fontSize: '11px',
+                            '@md': {
+                              marginTop: '5px',
+                            },
+                            '@mdDown': {
+                              marginLeft: 'auto',
+                            },
+                            marginRight: '10px',
+                          }}
+                        >
+                          {`Gmail: ${email.confirmationCode}`}
+                        </StyledText>
+                        <Box>
+                          <CopyTextBtnWrapper>
+                            <CopyTextButton
+                              text={email.confirmationCode || ''}
+                              type={TextType.ConfirmationCode}
+                            />
+                          </CopyTextBtnWrapper>
+                        </Box>
+                      </>
+                    </HStack>
+                  ) : (
+                    <></>
+                  )
+                }
+              />
+            )
+          })
+        ) : (
+          <EmptySettingsRow
+            text={isValidating ? '-' : 'No Email Addresses Found'}
+          />
+        )}
+        <SpanBox
+          css={{
+            pt: '15px',
+            fontSize: '12px',
+            marginLeft: 'auto',
+            a: {
+              color: '$omnivoreCtaYellow',
+            },
+          }}
+        >
+          <Link href="/settings/emails/recent">
+            View recently received emails
+          </Link>
+        </SpanBox>
+      </SettingsTable>
 
-    {confirmDeleteEmailId ? (
-      <ConfirmationModal
-        message={
-          'Are you sure? You will stop receiving emails sent to this address.'
-        }
-        onAccept={async () => {
-          await deleteEmail(confirmDeleteEmailId)
-          setConfirmDeleteEmailId(undefined)
-        }}
-        onOpenChange={() => setConfirmDeleteEmailId(undefined)}
-      />
-    ) : null}
-  </>;
+      {confirmDeleteEmailId ? (
+        <ConfirmationModal
+          message={
+            'Are you sure? You will stop receiving emails sent to this address.'
+          }
+          onAccept={async () => {
+            await deleteEmail(confirmDeleteEmailId)
+            setConfirmDeleteEmailId(undefined)
+          }}
+          onOpenChange={() => setConfirmDeleteEmailId(undefined)}
+        />
+      ) : null}
+    </>
+  )
 }
diff --git a/packages/web/pages/settings/emails/recent.tsx b/packages/web/pages/settings/emails/recent.tsx
index 3a77c106e..4a4b119d6 100644
--- a/packages/web/pages/settings/emails/recent.tsx
+++ b/packages/web/pages/settings/emails/recent.tsx
@@ -152,15 +152,13 @@ const ViewRecentEmailModal = (
 
 export default function RecentEmails(): JSX.Element {
   const { recentEmails, revalidate, isValidating } = useGetRecentEmailsQuery()
-  const [viewingEmailText, setViewingEmailText] = useState<
-    RecentEmail | undefined
-  >(undefined)
+  const [viewingEmailText, setViewingEmailText] =
+    useState<RecentEmail | undefined>(undefined)
 
-  const [viewingEmailHtml, setViewingEmailHtml] = useState<
-    RecentEmail | undefined
-  >(undefined)
+  const [viewingEmailHtml, setViewingEmailHtml] =
+    useState<RecentEmail | undefined>(undefined)
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const sortedRecentEmails = useMemo(() => {
     return recentEmails.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
diff --git a/packages/web/pages/settings/feeds/index.tsx b/packages/web/pages/settings/feeds/index.tsx
index 0935eda1d..540735174 100644
--- a/packages/web/pages/settings/feeds/index.tsx
+++ b/packages/web/pages/settings/feeds/index.tsx
@@ -99,7 +99,7 @@ export default function Rss(): JSX.Element {
     revalidate()
   }
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   return (
     <SettingsTable
diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx
index 17314adc7..4d549b217 100644
--- a/packages/web/pages/settings/integrations.tsx
+++ b/packages/web/pages/settings/integrations.tsx
@@ -74,7 +74,7 @@ type integrationsCard = {
   }
 }
 export default function Integrations(): JSX.Element {
-  applyStoredTheme(false)
+  applyStoredTheme()
   const { integrations, revalidate } = useGetIntegrationsQuery()
   const { webhooks } = useGetWebhooksQuery()
 
diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx
index dbd81ed95..c031ecb75 100644
--- a/packages/web/pages/settings/labels.tsx
+++ b/packages/web/pages/settings/labels.tsx
@@ -153,16 +153,15 @@ export default function LabelsPage(): JSX.Element {
   const [descriptionInputText, setDescriptionInputText] = useState<string>('')
   const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
   const [windowWidth, setWindowWidth] = useState<number>(0)
-  const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState<
-    string | null
-  >(null)
+  const [confirmRemoveLabelId, setConfirmRemoveLabelId] =
+    useState<string | null>(null)
   const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState<boolean>({
     key: `--settings-labels-show-help`,
     initialValue: true,
   })
   const breakpoint = 768
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const sortedLabels = useMemo(() => {
     return labels.sort((left: Label, right: Label) =>
diff --git a/packages/web/pages/settings/pinned-searches.tsx b/packages/web/pages/settings/pinned-searches.tsx
index 08c50c0ad..b06f8cce9 100644
--- a/packages/web/pages/settings/pinned-searches.tsx
+++ b/packages/web/pages/settings/pinned-searches.tsx
@@ -139,7 +139,7 @@ export default function PinnedSearches(): JSX.Element {
     dispatchList({ type: 'RESET' })
   }, [])
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   return (
     <SettingsLayout>
diff --git a/packages/web/pages/settings/rules.tsx b/packages/web/pages/settings/rules.tsx
index 5da8d0315..dd0d52448 100644
--- a/packages/web/pages/settings/rules.tsx
+++ b/packages/web/pages/settings/rules.tsx
@@ -149,9 +149,8 @@ const CreateActionModal = (props: CreateActionModalProps): JSX.Element => {
     }
   }
 
-  const [actionType, setActionType] = useState<RuleActionType | undefined>(
-    undefined
-  )
+  const [actionType, setActionType] =
+    useState<RuleActionType | undefined>(undefined)
 
   return (
     <Modal
@@ -219,9 +218,8 @@ export default function Rules(): JSX.Element {
   const { rules, revalidate } = useGetRulesQuery()
   const { labels } = useGetLabelsQuery()
   const [isCreateRuleModalOpen, setIsCreateRuleModalOpen] = useState(false)
-  const [createActionRule, setCreateActionRule] = useState<Rule | undefined>(
-    undefined
-  )
+  const [createActionRule, setCreateActionRule] =
+    useState<Rule | undefined>(undefined)
 
   const dataSource = useMemo(() => {
     return rules.map((rule: Rule) => {
@@ -235,7 +233,7 @@ export default function Rules(): JSX.Element {
     })
   }, [rules])
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const deleteRule = useCallback(
     async (rule: Rule) => {
diff --git a/packages/web/pages/settings/saved-searches.tsx b/packages/web/pages/settings/saved-searches.tsx
index 0117c95cc..7c4de1e26 100644
--- a/packages/web/pages/settings/saved-searches.tsx
+++ b/packages/web/pages/settings/saved-searches.tsx
@@ -156,19 +156,19 @@ export default function SavedSearchesPage(): JSX.Element {
   const [editingId, setEditingId] = useState<string | null>(null)
   const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
   const [windowWidth, setWindowWidth] = useState<number>(0)
-  const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState<
-    string | null
-  >(null)
+  const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] =
+    useState<string | null>(null)
   const [draggedElementId, setDraggedElementId] = useState<string | null>(null)
-  const [draggedElementPosition, setDraggedElementPosition] = useState<{
-    x: number
-    y: number
-  } | null>(null)
+  const [draggedElementPosition, setDraggedElementPosition] =
+    useState<{
+      x: number
+      y: number
+    } | null>(null)
   const [sortedSavedSearch, setSortedSavedSearch] = useState<SavedSearch[]>([])
 
   // Some theming stuff here.
   const breakpoint = 768
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   useEffect(() => {
     setSortedSavedSearch(
@@ -579,14 +579,15 @@ function GenericTableCard(
     editingId === savedSearch?.id || (isCreateMode && !savedSearch)
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
   const DEFAULT_STYLE = { position: null }
-  const [style, setStyle] = useState<
-    Partial<{
-      position: string | null
-      top: string
-      left: string
-      maxWidth: string
-    }>
-  >(DEFAULT_STYLE)
+  const [style, setStyle] =
+    useState<
+      Partial<{
+        position: string | null
+        top: string
+        left: string
+        maxWidth: string
+      }>
+    >(DEFAULT_STYLE)
   const handleEdit = () => {
     editingId && updateSavedSearch(editingId)
     setEditingId(null)
diff --git a/packages/web/pages/settings/subscriptions.tsx b/packages/web/pages/settings/subscriptions.tsx
index 95f48a7eb..d10b4453b 100644
--- a/packages/web/pages/settings/subscriptions.tsx
+++ b/packages/web/pages/settings/subscriptions.tsx
@@ -22,7 +22,7 @@ export default function SubscriptionsPage(): JSX.Element {
   const [confirmUnsubscribeSubscription, setConfirmUnsubscribeSubscription] =
     useState<Subscription | null>(null)
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   async function onUnsubscribe(subscription: Subscription): Promise<void> {
     const result = await unsubscribeMutation(subscription.name, subscription.id)
@@ -86,7 +86,8 @@ export default function SubscriptionsPage(): JSX.Element {
                         at{' '}
                         <Link
                           href={`/settings/emails?address=${subscription.newsletterEmail}`}
-                          legacyBehavior>
+                          legacyBehavior
+                        >
                           {subscription.newsletterEmail}
                         </Link>
                       </>
@@ -101,7 +102,7 @@ export default function SubscriptionsPage(): JSX.Element {
                   </StyledText>
                 }
               />
-            );
+            )
           })
         ) : (
           <EmptySettingsRow
@@ -125,5 +126,5 @@ export default function SubscriptionsPage(): JSX.Element {
         ) : null}
       </>
     </SettingsTable>
-  );
+  )
 }
diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx
index 4171d5e4d..6db99dddf 100644
--- a/packages/web/pages/settings/webhooks.tsx
+++ b/packages/web/pages/settings/webhooks.tsx
@@ -65,7 +65,7 @@ export default function Webhooks(): JSX.Element {
     return rows
   }, [webhooks])
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   function validateEventTypes(eventTypes: WebhookEvent[]): boolean {
     if (eventTypes.length > 0) return true
diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx
index ab74aed27..1229aa4bd 100644
--- a/packages/web/pages/tools/bulk.tsx
+++ b/packages/web/pages/tools/bulk.tsx
@@ -25,7 +25,7 @@ type RunningState = 'none' | 'confirming' | 'running' | 'completed'
 export default function BulkPerformer(): JSX.Element {
   const router = useRouter()
 
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const [action, setAction] = useState<BulkAction | undefined>()
   const [query, setQuery] = useState<string>('in:all')
diff --git a/packages/web/pages/tools/import/file.tsx b/packages/web/pages/tools/import/file.tsx
index 2ea4495d2..a68a5d641 100644
--- a/packages/web/pages/tools/import/file.tsx
+++ b/packages/web/pages/tools/import/file.tsx
@@ -17,7 +17,7 @@ import { validateCsvFile } from '../../../utils/csvValidator'
 type UploadState = 'none' | 'uploading' | 'completed'
 
 export default function ImportUploader(): JSX.Element {
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const [errorMessage, setErrorMessage] = useState<string | undefined>()
   const [file, setFile] = useState<File>()
diff --git a/packages/web/pages/tools/import/matter-archive.tsx b/packages/web/pages/tools/import/matter-archive.tsx
index 0262fc5de..fdd687cae 100644
--- a/packages/web/pages/tools/import/matter-archive.tsx
+++ b/packages/web/pages/tools/import/matter-archive.tsx
@@ -20,7 +20,7 @@ import { Tray } from 'phosphor-react'
 type UploadState = 'none' | 'uploading' | 'completed'
 
 export default function ImportUploader(): JSX.Element {
-  applyStoredTheme(false)
+  applyStoredTheme()
 
   const [errorMessage, setErrorMessage] = useState<string | undefined>()
   const [uploadState, setUploadState] = useState<UploadState>('none')

From 0c9c82c1fa618fffcc2f036f71841ccc2d31c6bc Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 17:11:49 +0800
Subject: [PATCH 7/8] Update menu file names

---
 .../templates/navMenu/LibraryMenu.tsx         | 613 ++++++++++++++++++
 .../templates/navMenu/SettingsMenu.tsx        | 257 ++++++++
 2 files changed, 870 insertions(+)
 create mode 100644 packages/web/components/templates/navMenu/LibraryMenu.tsx
 create mode 100644 packages/web/components/templates/navMenu/SettingsMenu.tsx

diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
new file mode 100644
index 000000000..5b015216b
--- /dev/null
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -0,0 +1,613 @@
+import { ReactNode, useEffect, useMemo, useRef } from 'react'
+import { StyledText } from '../../elements/StyledText'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+import { Circle } from 'phosphor-react'
+import {
+  Subscription,
+  SubscriptionType,
+  useGetSubscriptionsQuery,
+} from '../../../lib/networking/queries/useGetSubscriptionsQuery'
+import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { theme } from '../../tokens/stitches.config'
+import { useRegisterActions } from 'kbar'
+import { LogoBox } from '../../elements/LogoBox'
+import { usePersistedState } from '../../../lib/hooks/usePersistedState'
+import { useGetSavedSearchQuery } from '../../../lib/networking/queries/useGetSavedSearchQuery'
+import { SavedSearch } from '../../../lib/networking/fragments/savedSearchFragment'
+import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
+import Link from 'next/link'
+import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
+import { SplitButton } from '../../elements/SplitButton'
+import { AvatarDropdown } from '../../elements/AvatarDropdown'
+import { PrimaryDropdown } from '../PrimaryDropdown'
+import { NavMenuFooter } from './Footer'
+
+export const LIBRARY_LEFT_MENU_WIDTH = '275px'
+
+type LibraryFilterMenuProps = {
+  setShowAddLinkModal: (show: boolean) => void
+
+  searchTerm: string | undefined
+  applySearchQuery: (searchTerm: string) => void
+
+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
+}
+
+export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
+  const [labels, setLabels] = usePersistedState<Label[]>({
+    key: 'menu-labels',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+  const [savedSearches, setSavedSearches] = usePersistedState<SavedSearch[]>({
+    key: 'menu-searches',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+  const [subscriptions, setSubscriptions] = usePersistedState<Subscription[]>({
+    key: 'menu-subscriptions',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+  const labelsResponse = useGetLabelsQuery()
+  const searchesResponse = useGetSavedSearchQuery()
+  const subscriptionsResponse = useGetSubscriptionsQuery()
+
+  useEffect(() => {
+    if (
+      !labelsResponse.error &&
+      !labelsResponse.isLoading &&
+      labelsResponse.labels
+    ) {
+      setLabels(labelsResponse.labels)
+    }
+  }, [setLabels, labelsResponse])
+
+  useEffect(() => {
+    if (
+      !subscriptionsResponse.error &&
+      !subscriptionsResponse.isLoading &&
+      subscriptionsResponse.subscriptions
+    ) {
+      setSubscriptions(subscriptionsResponse.subscriptions)
+    }
+  }, [setSubscriptions, subscriptionsResponse])
+
+  useEffect(() => {
+    if (
+      !searchesResponse.error &&
+      !searchesResponse.isLoading &&
+      searchesResponse.savedSearches
+    ) {
+      setSavedSearches(searchesResponse.savedSearches)
+    }
+  }, [setSavedSearches, searchesResponse])
+
+  return (
+    <>
+      <Box
+        css={{
+          left: '0px',
+          top: '0px',
+          position: 'fixed',
+          bg: '$thLeftMenuBackground',
+          height: '100%',
+          width: LIBRARY_LEFT_MENU_WIDTH,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+          '@mdDown': {
+            visibility: props.showFilterMenu ? 'visible' : 'hidden',
+            width: '100%',
+            transition: 'visibility 0s, top 150ms',
+          },
+          zIndex: 3,
+        }}
+      >
+        <Box
+          css={{
+            width: '100%',
+            px: '25px',
+            pb: '25px',
+            pt: '4.5px',
+            lineHeight: '1',
+          }}
+        >
+          <LogoBox />
+        </Box>
+        <SavedSearches {...props} savedSearches={savedSearches} />
+        <Subscriptions {...props} subscriptions={subscriptions} />
+        <Labels {...props} labels={labels} />
+        <NavMenuFooter {...props} />
+        <Box css={{ height: '250px ' }} />
+      </Box>
+      {/* This spacer pushes library content to the right of 
+      the fixed left side menu. */}
+      <Box
+        css={{
+          minWidth: LIBRARY_LEFT_MENU_WIDTH,
+          height: '100%',
+          bg: '$thBackground',
+          '@mdDown': {
+            display: 'none',
+          },
+        }}
+      ></Box>
+    </>
+  )
+}
+
+function SavedSearches(
+  props: LibraryFilterMenuProps & { savedSearches: SavedSearch[] | undefined }
+): JSX.Element {
+  const sortedSearches = useMemo(() => {
+    return props.savedSearches
+      ?.filter((it) => it.visible)
+      ?.sort(
+        (left: SavedSearch, right: SavedSearch) =>
+          left.position - right.position
+      )
+  }, [props.savedSearches])
+
+  useRegisterActions(
+    (sortedSearches ?? []).map((item, idx) => {
+      const key = String(idx + 1)
+      return {
+        id: `saved_search_${key}`,
+        name: item.name,
+        shortcut: [key],
+        section: 'Saved Searches',
+        keywords: '?' + item.name,
+        perform: () => {
+          props.applySearchQuery(item.filter)
+        },
+      }
+    }),
+    [props.savedSearches]
+  )
+
+  const [collapsed, setCollapsed] = usePersistedState<boolean>({
+    key: `--saved-searches-collapsed`,
+    initialValue: false,
+  })
+
+  return (
+    <MenuPanel
+      title="Saved Searches"
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+    >
+      {!collapsed &&
+        sortedSearches &&
+        sortedSearches?.map((item) => (
+          <FilterButton
+            key={item.name}
+            text={item.name}
+            filterTerm={item.filter}
+            {...props}
+          />
+        ))}
+      {!collapsed && sortedSearches !== undefined && (
+        <EditButton
+          title="Edit Saved Searches"
+          destination="/settings/saved-searches"
+        />
+      )}
+
+      <Box css={{ height: '10px' }}></Box>
+    </MenuPanel>
+  )
+}
+
+function Subscriptions(
+  props: LibraryFilterMenuProps & { subscriptions: Subscription[] | undefined }
+): JSX.Element {
+  const [collapsed, setCollapsed] = usePersistedState<boolean>({
+    key: `--subscriptions-collapsed`,
+    initialValue: false,
+  })
+
+  const sortedSubscriptions = useMemo(() => {
+    if (!props.subscriptions) {
+      return []
+    }
+    return props.subscriptions
+      .filter((s) => s.status == 'ACTIVE')
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [props.subscriptions])
+
+  useRegisterActions(
+    (sortedSubscriptions ?? []).map((subscription, idx) => {
+      const key = String(idx + 1)
+      const name = subscription.name
+      return {
+        id: `subscription_${key}`,
+        section: 'Subscriptions',
+        name: name,
+        keywords: '*' + name,
+        perform: () => {
+          props.applySearchQuery(`subscription:\"${name}\"`)
+        },
+      }
+    }),
+    [sortedSubscriptions]
+  )
+
+  return (
+    <MenuPanel
+      title="Subscriptions"
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+    >
+      {!collapsed ? (
+        <>
+          <FilterButton
+            filterTerm="in:inbox has:subscriptions"
+            text="All"
+            {...props}
+          />
+          <FilterButton
+            filterTerm={`in:inbox label:RSS`}
+            text="Feeds"
+            {...props}
+          />
+          <FilterButton
+            filterTerm={`in:inbox label:Newsletter`}
+            text="Newsletters"
+            {...props}
+          />
+          {(sortedSubscriptions ?? []).map((item) => {
+            switch (item.type) {
+              case SubscriptionType.NEWSLETTER:
+                return (
+                  <FilterButton
+                    key={item.id}
+                    filterTerm={`in:inbox subscription:\"${item.name}\"`}
+                    text={item.name}
+                    {...props}
+                  />
+                )
+              case SubscriptionType.RSS:
+                return (
+                  <FilterButton
+                    key={item.id}
+                    filterTerm={`in:inbox rss:\"${item.url}\"`}
+                    text={item.name}
+                    {...props}
+                  />
+                )
+            }
+          })}
+          <EditButton
+            title="Edit Subscriptions"
+            destination="/settings/subscriptions"
+          />
+        </>
+      ) : (
+        <SpanBox css={{ mb: '10px' }} />
+      )}
+    </MenuPanel>
+  )
+}
+
+function Labels(
+  props: LibraryFilterMenuProps & { labels: Label[] }
+): JSX.Element {
+  const [collapsed, setCollapsed] = usePersistedState<boolean>({
+    key: `--labels-collapsed`,
+    initialValue: false,
+  })
+
+  const sortedLabels = useMemo(() => {
+    return props.labels.sort((left: Label, right: Label) =>
+      left.name.localeCompare(right.name)
+    )
+  }, [props.labels])
+
+  return (
+    <MenuPanel
+      title="Labels"
+      editTitle="Edit Labels"
+      hideBottomBorder={true}
+      collapsed={collapsed}
+      setCollapsed={setCollapsed}
+    >
+      {!collapsed && (
+        <>
+          {sortedLabels.map((item) => {
+            return <LabelButton key={item.id} label={item} {...props} />
+          })}
+          <EditButton title="Edit Labels" destination="/settings/labels" />
+        </>
+      )}
+    </MenuPanel>
+  )
+}
+
+type MenuPanelProps = {
+  title: string
+  children: ReactNode
+  editFunc?: () => void
+  editTitle?: string
+  hideBottomBorder?: boolean
+  collapsed: boolean
+  setCollapsed: (collapsed: boolean) => void
+}
+
+function MenuPanel(props: MenuPanelProps): JSX.Element {
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        width: '100%',
+        borderBottom: props.hideBottomBorder
+          ? '1px solid transparent'
+          : '1px solid $thBorderColor',
+        px: '15px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <HStack css={{ width: '100%' }} distribution="start" alignment="center">
+        <StyledText
+          css={{
+            fontFamily: 'Inter',
+            fontWeight: '600',
+            fontSize: '16px',
+            lineHeight: '125%',
+            color: '$thLibraryMenuPrimary',
+            pl: '10px',
+            mt: '20px',
+            mb: '10px',
+          }}
+        >
+          {props.title}
+        </StyledText>
+        <SpanBox
+          css={{
+            display: 'flex',
+            height: '100%',
+            mt: '10px',
+            marginLeft: 'auto',
+            verticalAlign: 'middle',
+          }}
+        >
+          <Button
+            style="articleActionIcon"
+            onClick={(event) => {
+              props.setCollapsed(!props.collapsed)
+              event.preventDefault()
+            }}
+          >
+            {props.collapsed ? (
+              <ToggleCaretRightIcon
+                size={15}
+                color={theme.colors.thLibraryMenuPrimary.toString()}
+              />
+            ) : (
+              <ToggleCaretDownIcon
+                size={15}
+                color={theme.colors.thLibraryMenuPrimary.toString()}
+              />
+            )}
+          </Button>
+        </SpanBox>
+      </HStack>
+      {props.children}
+    </VStack>
+  )
+}
+
+type FilterButtonProps = {
+  text: string
+
+  filterTerm: string
+  searchTerm: string | undefined
+
+  applySearchQuery: (searchTerm: string) => void
+
+  setShowFilterMenu: (show: boolean) => void
+}
+
+function FilterButton(props: FilterButtonProps): JSX.Element {
+  const isInboxFilter = (filter: string) => {
+    return filter === '' || filter === 'in:inbox'
+  }
+  const selected = useMemo(() => {
+    if (isInboxFilter(props.filterTerm) && !props.searchTerm) {
+      return true
+    }
+    return props.searchTerm === props.filterTerm
+  }, [props.searchTerm, props.filterTerm])
+
+  return (
+    <Box
+      css={{
+        pl: '10px',
+        mb: '2px',
+        display: 'flex',
+        width: '100%',
+        maxWidth: '100%',
+        height: '32px',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+        fontSize: '14px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        alignItems: 'center',
+        '&:hover': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+        '&:active': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+      }}
+      title={props.text}
+      onClick={(e) => {
+        props.applySearchQuery(props.filterTerm)
+        props.setShowFilterMenu(false)
+        e.preventDefault()
+      }}
+    >
+      {props.text}
+    </Box>
+  )
+}
+
+type LabelButtonProps = {
+  label: Label
+  searchTerm: string | undefined
+  applySearchQuery: (searchTerm: string) => void
+}
+
+function LabelButton(props: LabelButtonProps): JSX.Element {
+  const labelId = `checkbox-label-${props.label.id}`
+  const checkboxRef = useRef<HTMLInputElement | null>(null)
+  const state = useMemo(() => {
+    const term = props.searchTerm ?? ''
+    if (term.indexOf(`label:\"${props.label.name}\"`) >= 0) {
+      return 'on'
+    }
+    return 'off'
+  }, [props.searchTerm, props.label])
+
+  return (
+    <HStack
+      css={{
+        pl: '10px',
+        pt: '2px', // TODO: hack to middle align
+        width: '100%',
+        height: '30px',
+
+        fontSize: '14px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color:
+          state == 'on'
+            ? '$thLibraryMenuSecondary'
+            : '$thLibraryMenuUnselected',
+
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+
+        m: '0px',
+        '&:hover': {
+          backgroundColor: '$thBackground4',
+        },
+      }}
+      title={props.label.name}
+      alignment="center"
+      distribution="start"
+    >
+      <label
+        style={{
+          cursor: 'pointer',
+          width: '100%',
+          maxWidth: '170px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+        onClick={() => {
+          const query = props.searchTerm?.replace(/label:\"(.*)\"/, '') ?? ''
+          if (checkboxRef.current?.checked) {
+            props.applySearchQuery(query.trim())
+          } else {
+            props.applySearchQuery(
+              `${query.trim()} label:\"${props.label.name}\"`
+            )
+          }
+        }}
+      >
+        <Circle size={9} color={props.label.color} weight="fill" />
+        <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
+      </label>
+      <SpanBox
+        css={{
+          ml: 'auto',
+        }}
+      >
+        <input
+          id={labelId}
+          ref={checkboxRef}
+          type="checkbox"
+          checked={state === 'on'}
+          onChange={(e) => {
+            if (e.target.checked) {
+              props.applySearchQuery(
+                `${props.searchTerm ?? ''} label:\"${props.label.name}\"`
+              )
+            } else {
+              const query =
+                props.searchTerm?.replace(
+                  `label:\"${props.label.name}\"`,
+                  ''
+                ) ?? ''
+              props.applySearchQuery(query)
+            }
+          }}
+        />
+      </SpanBox>
+    </HStack>
+  )
+}
+
+type EditButtonProps = {
+  title: string
+  destination: string
+}
+
+function EditButton(props: EditButtonProps): JSX.Element {
+  return (
+    <Link href={props.destination} passHref legacyBehavior>
+      <SpanBox
+        css={{
+          ml: '10px',
+          mb: '10px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '2px',
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+
+          width: '100%',
+          maxWidth: '100%',
+          height: '32px',
+
+          fontSize: '14px',
+          fontWeight: 'regular',
+          fontFamily: '$display',
+          color: '$thLibraryMenuUnselected',
+          verticalAlign: 'middle',
+          borderRadius: '3px',
+          cursor: 'pointer',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {props.title}
+      </SpanBox>
+    </Link>
+  )
+}
diff --git a/packages/web/components/templates/navMenu/SettingsMenu.tsx b/packages/web/components/templates/navMenu/SettingsMenu.tsx
new file mode 100644
index 000000000..c674d7282
--- /dev/null
+++ b/packages/web/components/templates/navMenu/SettingsMenu.tsx
@@ -0,0 +1,257 @@
+import { useMemo } from 'react'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { LIBRARY_LEFT_MENU_WIDTH } from './LibraryMenu'
+import { LogoBox } from '../../elements/LogoBox'
+import Link from 'next/link'
+import { styled, theme } from '../../tokens/stitches.config'
+import { Button } from '../../elements/Button'
+import { ArrowSquareUpRight } from 'phosphor-react'
+import { useRouter } from 'next/router'
+import { NavMenuFooter } from './Footer'
+
+const HorizontalDivider = styled(SpanBox, {
+  width: '100%',
+  height: '1px',
+  my: '25px',
+  background: `${theme.colors.grayLine.toString()}`,
+})
+
+const StyledLink = styled(SpanBox, {
+  pl: '25px',
+  ml: '10px',
+  mb: '10px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '2px',
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+
+  width: 'calc(100% - 10px)',
+  maxWidth: '100%',
+  height: '32px',
+
+  fontSize: '14px',
+  fontWeight: 'regular',
+  fontFamily: '$display',
+  color: '$thLibraryMenuUnselected',
+  verticalAlign: 'middle',
+  borderRadius: '3px',
+  cursor: 'pointer',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+})
+
+type ExternalLinkProps = {
+  title: string
+  destination: string
+}
+
+function ExternalLink(props: ExternalLinkProps): JSX.Element {
+  return (
+    <StyledLink
+      css={{
+        '> a': {
+          backgroundColor: 'transparent',
+          textDecoration: 'none',
+        },
+      }}
+      title={props.title}
+    >
+      <a href={props.destination} target="_blank" rel="noreferrer">
+        <HStack
+          distribution="start"
+          alignment="center"
+          css={{
+            gap: '5px',
+            color: '$thLibraryMenuUnselected',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+          }}
+        >
+          {props.title}
+          <ArrowSquareUpRight size={12} />
+        </HStack>
+      </a>
+    </StyledLink>
+  )
+}
+
+export function SettingsMenu(): JSX.Element {
+  const section1 = [
+    { name: 'Account', destination: '/settings/account' },
+    { name: 'API Keys', destination: '/settings/api' },
+    { name: 'Emails', destination: '/settings/emails' },
+    { name: 'Feeds', destination: '/settings/feeds' },
+    { name: 'Subscriptions', destination: '/settings/subscriptions' },
+    { name: 'Labels', destination: '/settings/labels' },
+    { name: 'Saved Searches', destination: '/settings/saved-searches' },
+    { name: 'Pinned Searches', destination: '/settings/pinned-searches' },
+  ]
+
+  const section2 = [
+    { name: 'Integrations', destination: '/settings/integrations' },
+    { name: 'Install', destination: '/settings/installation' },
+  ]
+  return (
+    <>
+      <Box
+        css={{
+          left: '0px',
+          top: '0px',
+          position: 'fixed',
+          bg: '$thLeftMenuBackground',
+          height: '100%',
+          width: LIBRARY_LEFT_MENU_WIDTH,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          '&::-webkit-scrollbar': {
+            display: 'none',
+          },
+          '@mdDown': {
+            visibility: 'hidden',
+            width: '100%',
+            transition: 'visibility 0s, top 150ms',
+          },
+          zIndex: 3,
+        }}
+      >
+        <Box
+          css={{
+            width: '100%',
+            px: '25px',
+            pb: '50px',
+            pt: '4.5px',
+            lineHeight: '1',
+          }}
+        >
+          <LogoBox />
+        </Box>
+
+        <VStack
+          css={{
+            gap: '10px',
+            width: '100%',
+          }}
+          distribution="start"
+          alignment="start"
+        >
+          {section1.map((item) => {
+            return <SettingsButton key={item.name} {...item} />
+          })}
+          <HorizontalDivider />
+          {section2.map((item) => {
+            return <SettingsButton key={item.name} {...item} />
+          })}
+          <HorizontalDivider />
+          <StyledLink>
+            <Button
+              style="link"
+              onClick={(event) => {
+                if (window.Intercom) {
+                  try {
+                    window.Intercom('show')
+                  } catch (error) {
+                    console.log(error)
+                    alert('error opening system feedback')
+                  }
+                } else {
+                  alert('error opening system feedback')
+                }
+                event.preventDefault()
+              }}
+            >
+              Feedback
+            </Button>
+          </StyledLink>
+          <ExternalLink
+            destination="https://blog.omnivore.app/p/contributing-to-omnivore"
+            title="Contribute"
+          />
+          <ExternalLink
+            destination="https://docs.omnivore.app"
+            title="Documentation"
+          />
+          <NavMenuFooter />
+        </VStack>
+      </Box>
+      {/* This spacer pushes library content to the right of 
+      the fixed left side menu. */}
+      <Box
+        css={{
+          minWidth: LIBRARY_LEFT_MENU_WIDTH,
+          height: '100%',
+          bg: '$thBackground',
+          '@mdDown': {
+            display: 'none',
+          },
+        }}
+      ></Box>
+    </>
+  )
+}
+
+type SettingsButtonProps = {
+  name: string
+  destination: string
+}
+
+function SettingsButton(props: SettingsButtonProps): JSX.Element {
+  const router = useRouter()
+  const selected = useMemo(() => {
+    if (router && router.isReady) {
+      return router.asPath.endsWith(props.destination)
+    }
+    return false
+  }, [props, router])
+
+  return (
+    <Link href={props.destination} passHref title={props.name} legacyBehavior>
+      <SpanBox
+        css={{
+          mx: '10px',
+          pl: '25px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '2px',
+
+          width: 'calc(100% - 20px)',
+          maxWidth: '100%',
+          height: '32px',
+
+          fontSize: '14px',
+          fontWeight: 'regular',
+          fontFamily: '$display',
+          verticalAlign: 'middle',
+          borderRadius: '3px',
+          cursor: 'pointer',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+
+          backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+
+          color: selected
+            ? '$thLibraryMenuSecondary'
+            : '$thLibraryMenuUnselected',
+
+          '&:hover': {
+            textDecoration: 'underline',
+            backgroundColor: selected
+              ? '$thLibrarySelectionColor'
+              : '$thBackground4',
+          },
+          '&:active': {
+            backgroundColor: selected
+              ? '$thLibrarySelectionColor'
+              : '$thBackground4',
+          },
+        }}
+      >
+        {props.name}
+      </SpanBox>
+    </Link>
+  )
+}

From 328625d713c0358eeb55e5903501f5f62af1da91 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 17:12:28 +0800
Subject: [PATCH 8/8] Allow using system theme

---
 .../components/templates/PrimaryDropdown.tsx  |  8 +-
 .../components/templates/PrimaryLayout.tsx    |  3 +-
 .../templates/article/EpubContainer.tsx       | 18 ++--
 .../article/ReaderSettingsControl.tsx         | 42 +++++---
 .../web/components/tokens/stitches.config.ts  |  1 +
 packages/web/lib/hooks/useApplyLocalTheme.tsx | 11 +++
 packages/web/lib/hooks/useCurrentTheme.tsx    | 97 +++++++++++++++++++
 packages/web/lib/themeUpdater.tsx             | 36 ++++++-
 8 files changed, 189 insertions(+), 27 deletions(-)
 create mode 100644 packages/web/lib/hooks/useApplyLocalTheme.tsx
 create mode 100644 packages/web/lib/hooks/useCurrentTheme.tsx

diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index 5c44615e6..bed04ebeb 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import { Moon, Sun } from 'phosphor-react'
 import { ReactNode, useCallback, useState } from 'react'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
-import { currentTheme, updateTheme } from '../../lib/themeUpdater'
+import { getCurrentLocalTheme, updateTheme } from '../../lib/themeUpdater'
 import { Avatar } from '../elements/Avatar'
 import { AvatarDropdown } from '../elements/AvatarDropdown'
 import {
@@ -271,7 +271,7 @@ export const StyledToggleButton = styled('button', {
 })
 
 function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
-  const [displayTheme, setDisplayTheme] = useState(currentTheme())
+  const [displayTheme, setDisplayTheme] = useState(getCurrentLocalTheme())
 
   const doUpdateTheme = useCallback(
     (newTheme: ThemeId) => {
@@ -315,7 +315,7 @@ function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
             }}
           >
             <StyledToggleButton
-              data-state={currentTheme() != ThemeId.Dark ? 'on' : 'off'}
+              data-state={getCurrentLocalTheme() != ThemeId.Dark ? 'on' : 'off'}
               onClick={() => {
                 doUpdateTheme(ThemeId.Light)
               }}
@@ -324,7 +324,7 @@ function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
               <Sun size={15} color={theme.colors.thTextContrast2.toString()} />
             </StyledToggleButton>
             <StyledToggleButton
-              data-state={currentTheme() == ThemeId.Dark ? 'on' : 'off'}
+              data-state={getCurrentLocalTheme() == ThemeId.Dark ? 'on' : 'off'}
               onClick={() => {
                 doUpdateTheme(ThemeId.Dark)
               }}
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 906eb734e..3ccd71fd0 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -12,6 +12,7 @@ import { deinitAnalytics, setupAnalytics } from '../../lib/analytics'
 import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 import { logout } from '../../lib/logout'
+import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme'
 
 type PrimaryLayoutProps = {
   children: ReactNode
@@ -23,7 +24,7 @@ type PrimaryLayoutProps = {
 }
 
 export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
-  applyStoredTheme()
+  useApplyLocalTheme()
 
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
diff --git a/packages/web/components/templates/article/EpubContainer.tsx b/packages/web/components/templates/article/EpubContainer.tsx
index a4c90f30b..ea9ae366e 100644
--- a/packages/web/components/templates/article/EpubContainer.tsx
+++ b/packages/web/components/templates/article/EpubContainer.tsx
@@ -3,7 +3,11 @@ import { Box, VStack } from '../../elements/LayoutPrimitives'
 import { v4 as uuidv4 } from 'uuid'
 import { nanoid } from 'nanoid'
 import { useState, useEffect, useRef, useMemo } from 'react'
-import { currentTheme, getTheme, isDarkTheme } from '../../../lib/themeUpdater'
+import {
+  getCurrentLocalTheme,
+  getTheme,
+  isDarkTheme,
+} from '../../../lib/themeUpdater'
 import PSPDFKit from 'pspdfkit'
 import { Instance, HighlightAnnotation, List, Annotation, Rect } from 'pspdfkit'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
@@ -38,15 +42,13 @@ type EpubPatch = {
 export default function EpubContainer(props: EpubContainerProps): JSX.Element {
   const epubRef = useRef<HTMLDivElement | null>(null)
   const renditionRef = useRef<Rendition | undefined>(undefined)
-  const [shareTarget, setShareTarget] = useState<Highlight | undefined>(
-    undefined
-  )
+  const [shareTarget, setShareTarget] =
+    useState<Highlight | undefined>(undefined)
   const [touchStart, setTouchStart] = useState(0)
   const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
   const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
-  const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
-    number | undefined
-  >(undefined)
+  const [noteTargetPageIndex, setNoteTargetPageIndex] =
+    useState<number | undefined>(undefined)
   const highlightsRef = useRef<Highlight[]>([])
 
   const book = useMemo(() => {
@@ -102,7 +104,7 @@ export default function EpubContainer(props: EpubContainerProps): JSX.Element {
       }
     })
 
-    const themeId = currentTheme()
+    const themeId = getCurrentLocalTheme()
     if (themeId) {
       const readerTheme = getTheme(themeId)
       renditionRef.current.themes.override(
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index 673ef4624..57d4aecb1 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -13,11 +13,17 @@ import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
 import { showSuccessToast } from '../../../lib/toastHelpers'
 import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { useCallback, useState } from 'react'
-import { currentThemeName, updateTheme } from '../../../lib/themeUpdater'
+import {
+  getCurrentLocalTheme,
+  currentThemeName,
+  updateTheme,
+} from '../../../lib/themeUpdater'
 import { LineHeightIncreaseIcon } from '../../elements/images/LineHeightIncreaseIconProps'
 import { LineHeightDecreaseIcon } from '../../elements/images/LineHeightDecreaseIcon'
 import * as Switch from '@radix-ui/react-switch'
 import { Checkbox } from '@radix-ui/react-checkbox'
+import { useCurrentTheme } from '../../../lib/hooks/useCurrentTheme'
+import { useDarkModeListener } from '../../../lib/hooks/useDarkModeListener'
 
 type ReaderSettingsProps = {
   readerSettings: ReaderSettings
@@ -565,7 +571,9 @@ function LayoutControls(props: LayoutControlsProps): JSX.Element {
 }
 
 function ThemeSelector(): JSX.Element {
-  const [currentTheme, setCurrentTheme] = useState(currentThemeName())
+  const isDarkMode = useDarkModeListener()
+  const { currentTheme, setCurrentTheme, resetSystemTheme } = useCurrentTheme()
+
   return (
     <VStack
       css={{
@@ -587,6 +595,10 @@ function ThemeSelector(): JSX.Element {
           alignment="center"
           distribution="center"
           css={{ ml: 'auto', gap: '5px', mt: '10px', cursor: 'pointer' }}
+          onClick={() => {
+            console.log('clicked use system')
+            updateTheme(ThemeId.System)
+          }}
         >
           <Label
             htmlFor="auto-checkbox"
@@ -600,7 +612,19 @@ function ThemeSelector(): JSX.Element {
           >
             Auto
           </Label>
-          <input id="auto-checkbox" type="checkbox" />
+          <input
+            type="checkbox"
+            id="auto-checkbox"
+            checked={currentTheme == ThemeId.System}
+            onChange={(event) => {
+              if (event.target.checked) {
+                setCurrentTheme(ThemeId.System)
+              } else {
+                resetSystemTheme()
+              }
+              event.stopPropagation()
+            }}
+          ></input>
         </HStack>
       </HStack>
 
@@ -633,8 +657,7 @@ function ThemeSelector(): JSX.Element {
           }}
           data-state={currentTheme == ThemeId.Light ? 'selected' : 'unselected'}
           onClick={() => {
-            updateTheme(ThemeId.Light)
-            setCurrentTheme(currentThemeName())
+            setCurrentTheme(ThemeId.Light)
           }}
         >
           {currentTheme == ThemeId.Light && (
@@ -663,8 +686,7 @@ function ThemeSelector(): JSX.Element {
           }}
           data-state={currentTheme == ThemeId.Dark ? 'selected' : 'unselected'}
           onClick={() => {
-            updateTheme(ThemeId.Dark)
-            setCurrentTheme(currentThemeName())
+            setCurrentTheme(ThemeId.Dark)
           }}
         >
           {currentTheme == ThemeId.Dark && <Check color="#F9D354" size={20} />}
@@ -691,8 +713,7 @@ function ThemeSelector(): JSX.Element {
           }}
           data-state={currentTheme == ThemeId.Sepia ? 'selected' : 'unselected'}
           onClick={() => {
-            updateTheme(ThemeId.Sepia)
-            setCurrentTheme(currentThemeName())
+            setCurrentTheme(ThemeId.Sepia)
           }}
         >
           {currentTheme == ThemeId.Sepia && <Check color="#6A6968" size={20} />}
@@ -721,8 +742,7 @@ function ThemeSelector(): JSX.Element {
             currentTheme == ThemeId.Apollo ? 'selected' : 'unselected'
           }
           onClick={() => {
-            updateTheme(ThemeId.Apollo)
-            setCurrentTheme(currentThemeName())
+            setCurrentTheme(ThemeId.Apollo)
           }}
         >
           {currentTheme == ThemeId.Apollo && (
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 9cbeec80c..a27c06931 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -7,6 +7,7 @@ export enum ThemeId {
   Sepia = 'Sepia',
   Apollo = 'Apollo',
   Black = 'Black',
+  System = 'System',
 }
 
 export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
diff --git a/packages/web/lib/hooks/useApplyLocalTheme.tsx b/packages/web/lib/hooks/useApplyLocalTheme.tsx
new file mode 100644
index 000000000..deed45154
--- /dev/null
+++ b/packages/web/lib/hooks/useApplyLocalTheme.tsx
@@ -0,0 +1,11 @@
+import { useEffect } from 'react'
+import { applyStoredTheme } from '../themeUpdater'
+import { useDarkModeListener } from './useDarkModeListener'
+
+export function useApplyLocalTheme() {
+  const isDark = useDarkModeListener()
+
+  useEffect(() => {
+    applyStoredTheme()
+  }, [isDark])
+}
diff --git a/packages/web/lib/hooks/useCurrentTheme.tsx b/packages/web/lib/hooks/useCurrentTheme.tsx
new file mode 100644
index 000000000..7e31295a7
--- /dev/null
+++ b/packages/web/lib/hooks/useCurrentTheme.tsx
@@ -0,0 +1,97 @@
+import { useCallback, useMemo } from 'react'
+import { usePersistedState } from './usePersistedState'
+import { getCurrentLocalTheme, updateThemeLocally } from '../themeUpdater'
+import { useDarkModeListener } from './useDarkModeListener'
+
+const themeKey = 'currentTheme'
+const preferredDarkThemeKey = 'preferredDarkThemeKey'
+const preferredLightThemeKey = 'preferredLightThemeKey'
+
+export function useCurrentTheme() {
+  const isDarkMode = useDarkModeListener()
+  const [currentThemeInternal, setCurrentThemeInternal] = usePersistedState<
+    string | undefined
+  >({
+    key: themeKey,
+    initialValue: getCurrentLocalTheme(),
+  })
+
+  const [preferredLightTheme, setPreferredLightTheme] =
+    usePersistedState<string>({
+      key: preferredLightThemeKey,
+      initialValue: 'Light',
+    })
+
+  const [preferredDarkTheme, setPreferredDarkTheme] = usePersistedState<string>(
+    {
+      key: preferredDarkThemeKey,
+      initialValue: 'Dark',
+    }
+  )
+
+  const isDarkTheme = (themeId: string): boolean => {
+    if (
+      themeId === 'Dark' ||
+      themeId === 'Darker' ||
+      themeId === 'Apollo' ||
+      themeId == 'Black'
+    ) {
+      return true
+    }
+    return false
+  }
+
+  const isLightTheme = (themeId: string): boolean => {
+    if (themeId === 'Sepia' || themeId == 'Light') {
+      return true
+    }
+    return false
+  }
+
+  const currentTheme = useMemo(() => {
+    return currentThemeInternal
+  }, [currentThemeInternal])
+
+  const setCurrentTheme = useCallback(
+    (themeId: string) => {
+      if (isDarkTheme(themeId)) {
+        setPreferredDarkTheme(themeId)
+      }
+      if (isLightTheme(themeId)) {
+        setPreferredLightTheme(themeId)
+      }
+      if (themeId == 'System') {
+        const current = currentThemeInternal
+        if (current && isDarkTheme(current)) {
+          setPreferredDarkTheme(current)
+        }
+        if (current && isLightTheme(current)) {
+          setPreferredLightTheme(current)
+        }
+      }
+      setCurrentThemeInternal(themeId)
+      updateThemeLocally(themeId)
+    },
+    [setCurrentThemeInternal]
+  )
+
+  // This is used when the user disables "System" theme
+  const resetSystemTheme = useCallback(() => {
+    if (isDarkMode) {
+      setCurrentThemeInternal(preferredDarkTheme ?? 'Dark')
+    } else {
+      setCurrentThemeInternal(preferredLightTheme ?? 'Light')
+    }
+  }, [
+    isDarkMode,
+    preferredDarkTheme,
+    preferredLightTheme,
+    setCurrentThemeInternal,
+  ])
+
+  return {
+    currentTheme,
+    setCurrentTheme,
+    resetSystemTheme,
+  }
+}
diff --git a/packages/web/lib/themeUpdater.tsx b/packages/web/lib/themeUpdater.tsx
index 2873da351..27397a0e4 100644
--- a/packages/web/lib/themeUpdater.tsx
+++ b/packages/web/lib/themeUpdater.tsx
@@ -8,6 +8,8 @@ import {
 } from '../components/tokens/stitches.config'
 
 const themeKey = 'theme'
+const preferredDarkThemeKey = 'preferredDarkThemeKey'
+const preferredLightThemeKey = 'preferredLightThemeKey'
 
 // Map legacy theme names to their new equivelents
 const LEGACY_THEMES: { [string: string]: string } = {
@@ -25,8 +27,36 @@ export function updateTheme(themeId: string): void {
   updateThemeLocally(themeId)
 }
 
+const visibleThemeId = (themeId: string) => {
+  if (themeId == ThemeId.System) {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        try {
+          const preferred = window.localStorage.getItem(preferredDarkThemeKey)
+          if (preferred) {
+            return JSON.parse(preferred)
+          }
+        } catch {}
+        return ThemeId.Dark
+      } else {
+        try {
+          const preferred = window.localStorage.getItem(preferredLightThemeKey)
+          if (preferred) {
+            return JSON.parse(preferred)
+          }
+        } catch {}
+        return ThemeId.Light
+      }
+    }
+    return ThemeId.Light
+  } else {
+    return themeId
+  }
+}
+
 export function getTheme(themeId: string) {
-  switch (themeId) {
+  const themeToUse = visibleThemeId(themeId)
+  switch (themeToUse) {
     case ThemeId.Dark:
       return darkTheme
     case ThemeId.Sepia:
@@ -56,7 +86,7 @@ export function updateThemeLocally(themeId: string): void {
 }
 
 export function currentThemeName(): string {
-  switch (currentTheme()) {
+  switch (getCurrentLocalTheme()) {
     case ThemeId.Light:
       return 'Light'
     case ThemeId.Dark:
@@ -71,7 +101,7 @@ export function currentThemeName(): string {
   return 'Light'
 }
 
-export function currentTheme(): ThemeId | undefined {
+export function getCurrentLocalTheme(): ThemeId | undefined {
   if (typeof window === 'undefined') {
     return undefined
   }