From 9961ada6c7e03b52faa844508fa4855e1696ff71 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 5 Jun 2024 19:11:21 +0800
Subject: [PATCH 1/6] Match latest UX a bit more closely for just read

---
 packages/web/components/elements/Button.tsx   |   10 +
 .../web/components/elements/Pagination.tsx    |   51 +-
 .../icons/home/AddToLibraryActionIcon.tsx     |    9 +-
 .../elements/icons/home/ArchiveActionIcon.tsx |   14 +-
 .../elements/icons/home/CommentActionIcon.tsx |    9 +-
 .../elements/icons/home/RemoveActionIcon.tsx  |   18 +-
 .../elements/icons/home/ShareActionIcon.tsx   |   10 +-
 .../templates/navMenu/LibraryMenu.tsx         |   21 +-
 .../templates/navMenu/NavigationMenu.tsx      | 1074 +++++++++++++++++
 .../web/components/tokens/stitches.config.ts  |    3 +
 packages/web/pages/justread/index.tsx         |  268 +++-
 11 files changed, 1406 insertions(+), 81 deletions(-)
 create mode 100644 packages/web/components/templates/navMenu/NavigationMenu.tsx

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 69eb8ac72..e0a999ce3 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -428,6 +428,16 @@ export const Button = styled('button', {
           opacity: 0.8,
         },
       },
+      homeAction: {
+        display: 'flex',
+        color: 'transparent',
+        border: 'none',
+        bg: 'transparent',
+        cursor: 'pointer',
+        p: '5px',
+        borderRadius: '5px',
+        '&:hover': { bg: '$readerHoverBg', opacity: '1' },
+      },
       themeSwitch: {
         p: '0px',
         m: '0px',
diff --git a/packages/web/components/elements/Pagination.tsx b/packages/web/components/elements/Pagination.tsx
index 595f130ec..2d36cdb59 100644
--- a/packages/web/components/elements/Pagination.tsx
+++ b/packages/web/components/elements/Pagination.tsx
@@ -1,45 +1,60 @@
-import React, { useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Button } from './Button'
 import { HStack, VStack } from './LayoutPrimitives'
 
 type PaginationProps<T> = {
   items: T[]
   itemsPerPage: number
+  loadMoreButtonText?: string
   render: (item: T) => React.ReactNode
 }
 
 const Pagination = <T,>({
   items,
   itemsPerPage,
+  loadMoreButtonText,
   render,
 }: PaginationProps<T>) => {
   const [currentPage, setCurrentPage] = useState(1)
   const maxPage = Math.ceil(items.length / itemsPerPage)
 
-  function createChangePageHandler(page: number) {
-    return function handlePageChange() {
-      setCurrentPage(page)
-    }
-  }
+  const incrementCurrentPage = useCallback(() => {
+    setCurrentPage(currentPage + 1)
+  }, [currentPage, setCurrentPage])
 
-  const itemsToShow = items.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  )
+  const itemsToShow = useMemo(() => {
+    const count = currentPage * itemsPerPage
+    return items.slice(0, count)
+  }, [items, currentPage, itemsPerPage])
 
   return (
-    <VStack>
+    <VStack css={{ width: '100%' }}>
       {itemsToShow.map(render)}
-      <HStack>
-        {Array.from({ length: maxPage }, (_, i) => i + 1).map((pageNum) => (
+      <HStack
+        alignment="center"
+        distribution="center"
+        css={{ p: '30px', width: '100%' }}
+      >
+        {currentPage < maxPage && (
           <Button
-            key={pageNum}
-            onClick={createChangePageHandler(pageNum)}
-            disabled={pageNum === currentPage}
+            onClick={(event) => {
+              incrementCurrentPage()
+              event.preventDefault()
+            }}
+            style="homeAction"
+            css={{
+              fontFamily: '$inter',
+              fontSize: '15px',
+              fontWeight: '500',
+              color: '$thTextSubtle4',
+              bg: '#3D3D3D',
+              py: '10px',
+              px: '25px',
+            }}
           >
-            {pageNum}
+            {loadMoreButtonText ?? 'Load More'}
           </Button>
-        ))}
+        )}
       </HStack>
     </VStack>
   )
diff --git a/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx b/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
index e42a1bb8a..b2db19fe2 100644
--- a/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
@@ -11,16 +11,15 @@ export class AddToLibraryActionIcon extends React.Component<IconProps> {
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M30 11.8333V23.5L25 20.1667L20 23.5V11.8333C20 10.9493 20.3512 10.1014 20.9763 9.47631C21.6014 8.85119 22.4493 8.5 23.3333 8.5H26.6667C27.5507 8.5 28.3986 8.85119 29.0237 9.47631C29.6488 10.1014 30 10.9493 30 11.8333Z"
+            d="M14.25 5.54167V16.625L9.5 13.4583L4.75 16.625V5.54167C4.75 4.70181 5.08363 3.89636 5.6775 3.3025C6.27136 2.70863 7.07681 2.375 7.91667 2.375H11.0833C11.9232 2.375 12.7286 2.70863 13.3225 3.3025C13.9164 3.89636 14.25 4.70181 14.25 5.54167Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx b/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx
index d97f49e5d..6f3aa65ae 100644
--- a/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/ArchiveActionIcon.tsx
@@ -7,34 +7,32 @@ import React from 'react'
 export class ArchiveActionIcon extends React.Component<IconProps> {
   render() {
     const strokeColor = (this.props.color || '#D9D9D9').toString()
-    const backgroundColor = (this.props.color || '#3D3D3D').toString()
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M17.5 11.0002C17.5 10.5581 17.6756 10.1342 17.9882 9.82165C18.3007 9.50909 18.7246 9.3335 19.1667 9.3335H30.8333C31.2754 9.3335 31.6993 9.50909 32.0118 9.82165C32.3244 10.1342 32.5 10.5581 32.5 11.0002C32.5 11.4422 32.3244 11.8661 32.0118 12.1787C31.6993 12.4912 31.2754 12.6668 30.8333 12.6668H19.1667C18.7246 12.6668 18.3007 12.4912 17.9882 12.1787C17.6756 11.8661 17.5 11.4422 17.5 11.0002Z"
+            d="M2.375 4.74984C2.375 4.32991 2.54181 3.92718 2.83875 3.63025C3.13568 3.33332 3.53841 3.1665 3.95833 3.1665H15.0417C15.4616 3.1665 15.8643 3.33332 16.1613 3.63025C16.4582 3.92718 16.625 4.32991 16.625 4.74984C16.625 5.16976 16.4582 5.57249 16.1613 5.86942C15.8643 6.16636 15.4616 6.33317 15.0417 6.33317H3.95833C3.53841 6.33317 3.13568 6.16636 2.83875 5.86942C2.54181 5.57249 2.375 5.16976 2.375 4.74984Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M19.1666 12.6665V20.9998C19.1666 21.4419 19.3422 21.8658 19.6548 22.1783C19.9673 22.4909 20.3913 22.6665 20.8333 22.6665H29.1666C29.6087 22.6665 30.0326 22.4909 30.3451 22.1783C30.6577 21.8658 30.8333 21.4419 30.8333 20.9998V12.6665"
+            d="M3.95801 6.3335V14.2502C3.95801 14.6701 4.12482 15.0728 4.42176 15.3697C4.71869 15.6667 5.12141 15.8335 5.54134 15.8335H13.458C13.8779 15.8335 14.2807 15.6667 14.5776 15.3697C14.8745 15.0728 15.0413 14.6701 15.0413 14.2502V6.3335"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M23.3334 16H26.6667"
+            d="M7.91699 9.5H11.0837"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/CommentActionIcon.tsx b/packages/web/components/elements/icons/home/CommentActionIcon.tsx
index d0d704821..4222b2ac4 100644
--- a/packages/web/components/elements/icons/home/CommentActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/CommentActionIcon.tsx
@@ -11,16 +11,15 @@ export class CommentActionIcon extends React.Component<IconProps> {
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="20"
+        height="21"
+        viewBox="0 0 20 21"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M17.5 22.6668L18.5833 19.4168C17.647 18.032 17.3083 16.3922 17.6302 14.8021C17.952 13.212 18.9126 11.7799 20.3331 10.772C21.7537 9.76421 23.5377 9.24923 25.3534 9.32285C27.1691 9.39647 28.8929 10.0537 30.2044 11.1723C31.5159 12.2909 32.3257 13.7948 32.4834 15.4043C32.6411 17.0138 32.1358 18.6195 31.0616 19.9228C29.9873 21.226 28.4172 22.1382 26.6432 22.4896C24.8691 22.8411 23.0118 22.6079 21.4167 21.8335L17.5 22.6668Z"
+            d="M2.5 17.1668L3.58333 13.9168C2.64704 12.532 2.30833 10.8922 2.63018 9.30207C2.95204 7.71197 3.91255 6.27987 5.33314 5.27204C6.75373 4.26421 8.53772 3.74923 10.3534 3.82285C12.1691 3.89647 13.8929 4.55368 15.2044 5.67228C16.5159 6.79089 17.3257 8.29477 17.4834 9.9043C17.6411 11.5138 17.1358 13.1195 16.0616 14.4228C14.9873 15.726 13.4172 16.6382 11.6432 16.9896C9.86911 17.3411 8.01184 17.1079 6.41667 16.3335L2.5 17.1668Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/RemoveActionIcon.tsx b/packages/web/components/elements/icons/home/RemoveActionIcon.tsx
index ab55125b1..4af3c0d2e 100644
--- a/packages/web/components/elements/icons/home/RemoveActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/RemoveActionIcon.tsx
@@ -7,48 +7,46 @@ import React from 'react'
 export class RemoveActionIcon extends React.Component<IconProps> {
   render() {
     const strokeColor = (this.props.color || '#D9D9D9').toString()
-    const backgroundColor = (this.props.color || '#3D3D3D').toString()
 
     return (
       <svg
-        width="50"
-        height="32"
-        viewBox="0 0 50 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="50" height="32" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M18.3334 11.8335H31.6667"
+            d="M3.16699 5.5415H15.8337"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M23.3334 15.1665V20.1665"
+            d="M7.91699 8.7085V13.4585"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M26.6666 15.1665V20.1665"
+            d="M11.083 8.7085V13.4585"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M19.1666 11.8335L20 21.8335C20 22.2755 20.1756 22.6994 20.4881 23.012C20.8007 23.3246 21.2246 23.5002 21.6666 23.5002H28.3333C28.7753 23.5002 29.1992 23.3246 29.5118 23.012C29.8244 22.6994 30 22.2755 30 21.8335L30.8333 11.8335"
+            d="M3.95801 5.5415L4.74967 15.0415C4.74967 15.4614 4.91649 15.8642 5.21342 16.1611C5.51035 16.458 5.91308 16.6248 6.33301 16.6248H12.6663C13.0863 16.6248 13.489 16.458 13.7859 16.1611C14.0829 15.8642 14.2497 15.4614 14.2497 15.0415L15.0413 5.5415"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M22.5 11.8333V9.33333C22.5 9.11232 22.5878 8.90036 22.7441 8.74408C22.9004 8.5878 23.1123 8.5 23.3333 8.5H26.6667C26.8877 8.5 27.0996 8.5878 27.2559 8.74408C27.4122 8.90036 27.5 9.11232 27.5 9.33333V11.8333"
+            d="M7.125 5.54167V3.16667C7.125 2.9567 7.20841 2.75534 7.35687 2.60687C7.50534 2.45841 7.7067 2.375 7.91667 2.375H11.0833C11.2933 2.375 11.4947 2.45841 11.6431 2.60687C11.7916 2.75534 11.875 2.9567 11.875 3.16667V5.54167"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/elements/icons/home/ShareActionIcon.tsx b/packages/web/components/elements/icons/home/ShareActionIcon.tsx
index 75648581d..fbc063da2 100644
--- a/packages/web/components/elements/icons/home/ShareActionIcon.tsx
+++ b/packages/web/components/elements/icons/home/ShareActionIcon.tsx
@@ -7,20 +7,18 @@ import React from 'react'
 export class ShareActionIcon extends React.Component<IconProps> {
   render() {
     const strokeColor = (this.props.color || '#D9D9D9').toString()
-    const backgroundColor = (this.props.color || '#3D3D3D').toString()
 
     return (
       <svg
-        width="49"
-        height="32"
-        viewBox="0 0 49 32"
+        width="19"
+        height="19"
+        viewBox="0 0 19 19"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect y="0.5" width="49" height="31" rx="4" fill={backgroundColor} />
         <g>
           <path
-            d="M25.2917 9.6665V12.8332C20.0865 13.647 18.1509 18.207 17.375 22.3332C17.3457 22.4963 21.6374 17.6133 25.2917 17.5832V20.7498L31.625 15.2082L25.2917 9.6665Z"
+            d="M10.2918 3.1665V6.33317C5.08661 7.147 3.15098 11.707 2.37515 15.8332C2.34586 15.9963 6.63748 11.1133 10.2918 11.0832V14.2498L16.6251 8.70817L10.2918 3.1665Z"
             stroke={strokeColor}
             strokeWidth="1.25"
             strokeLinecap="round"
diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index e39923bca..367480623 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { StyledText } from '../../elements/StyledText'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
-import { Circle, DotsThree, MagnifyingGlass, X } from 'phosphor-react'
+import { Circle, DotsThree, List, MagnifyingGlass, X } from 'phosphor-react'
 import {
   Subscription,
   SubscriptionType,
@@ -122,9 +122,9 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         <Box
           css={{
             width: '100%',
-            px: '25px',
+            px: '15px',
             pb: '17px',
-            pt: '4.5px',
+            pt: '15px',
             lineHeight: '1',
             '@mdDown': {
               pb: '0px',
@@ -133,8 +133,19 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
             },
           }}
         >
-          <SpanBox css={{ '@mdDown': { display: 'none' } }}>
-            <LogoBox />
+          <SpanBox css={{ mr: 'auto', '@mdDown': { display: 'none' } }}>
+            <Button
+              style="plainIcon"
+              onClick={(event) => {
+                props.setShowFilterMenu(false)
+                event.preventDefault()
+              }}
+            >
+              <List
+                size="25"
+                color={theme.colors.readerTextSubtle.toString()}
+              />
+            </Button>
           </SpanBox>
 
           <Button
diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
new file mode 100644
index 000000000..788891b6d
--- /dev/null
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -0,0 +1,1074 @@
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { StyledText } from '../../elements/StyledText'
+import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { Button } from '../../elements/Button'
+import { Circle, DotsThree, List, MagnifyingGlass, X } 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 { NavMenuFooter } from './Footer'
+import { FollowingIcon } from '../../elements/icons/FollowingIcon'
+import { HomeIcon } from '../../elements/icons/HomeIcon'
+import { LibraryIcon } from '../../elements/icons/LibraryIcon'
+import { HighlightsIcon } from '../../elements/icons/HighlightsIcon'
+import { CoverImage } from '../../elements/CoverImage'
+import { Shortcut } from '../../../pages/settings/shortcuts'
+import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip'
+import { NewsletterIcon } from '../../elements/icons/NewsletterIcon'
+import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
+import { useRouter } from 'next/router'
+import { DiscoverIcon } from '../../elements/icons/DiscoverIcon'
+import { escapeQuotes } from '../../../utils/helper'
+
+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 NavigationMenu(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': {
+            width: '100%',
+            transition: 'top 100ms, visibility 100ms',
+            top: props.showFilterMenu ? '0' : '100%',
+            visibility: props.showFilterMenu ? 'visible' : 'hidden',
+          },
+          zIndex: 10,
+        }}
+      >
+        <Box
+          css={{
+            width: '100%',
+            px: '15px',
+            pb: '17px',
+            pt: '15px',
+            lineHeight: '1',
+            '@mdDown': {
+              pb: '0px',
+              pt: '5px',
+              px: '15px',
+            },
+          }}
+        >
+          <SpanBox css={{ mr: 'auto', '@mdDown': { display: 'none' } }}>
+            <Button
+              style="plainIcon"
+              onClick={(event) => {
+                props.setShowFilterMenu(false)
+                event.preventDefault()
+              }}
+            >
+              <List
+                size="25"
+                color={theme.colors.readerTextSubtle.toString()}
+              />
+            </Button>
+          </SpanBox>
+
+          <Button
+            style="plainIcon"
+            css={{
+              display: 'none',
+              '@mdDown': {
+                display: 'flex',
+                ml: 'auto',
+                pt: '10px',
+                pb: '0px',
+              },
+            }}
+            onClick={(event) => {
+              props.setShowFilterMenu(false)
+              event.preventDefault()
+            }}
+          >
+            <X size={30} />
+          </Button>
+        </Box>
+        <LibraryNav {...props} />
+        <Shortcuts {...props} />
+        <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>
+    </>
+  )
+}
+
+const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        mt: '10px',
+        gap: '5px',
+        width: '100%',
+        borderBottom: '1px solid $thBorderColor',
+        px: '15px',
+        pb: '25px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <NavButton
+        {...props}
+        text="Home"
+        filterTerm="in:library OR in:following use:folders"
+        icon={<HomeIcon color={theme.colors.thHomeIcon.toString()} />}
+      />
+      <NavButton
+        {...props}
+        text="Following"
+        filterTerm="in:following use:folders"
+        icon={<FollowingIcon color="#F59932" />}
+      />
+      <NavButton
+        {...props}
+        text="Library"
+        filterTerm="in:library use:folders"
+        icon={<LibraryIcon color={theme.colors.ctaBlue.toString()} />}
+      />
+      <NavButton
+        {...props}
+        text="Highlights"
+        filterTerm="in:all has:highlights mode:highlights"
+        icon={<HighlightsIcon color={theme.colors.highlight.toString()} />}
+      />
+      <NavRedirectButton
+        {...props}
+        text="Discover"
+        redirectLocation={'/discover'}
+        icon={<DiscoverIcon color={theme.colors.discover.toString()} />}
+      />
+    </VStack>
+  )
+}
+
+const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => {
+  const router = useRouter()
+  const [shortcuts] = usePersistedState<Shortcut[]>({
+    key: 'library-shortcuts',
+    isSessionStorage: false,
+    initialValue: [],
+  })
+
+  // const shortcuts: Shortcut[] = [
+  //   {
+  //     id: '12asdfasdf',
+  //     name: 'Omnivore Blog',
+  //     icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'subscription:"Money Talk"',
+  //     type: 'feed',
+  //   },
+  //   {
+  //     id: 'sdfsdfgdsfg',
+  //     name: 'Follow the Money | Arne & Harr',
+  //     filter: 'subscription:"Money Talk"',
+  //     type: 'feed',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfsdfsdfsgasdfg',
+  //     name: 'Andrew Kenneson from Center for the Study of Partisanship and Ideology',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'newsletter',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfsdfsdfsgasdfg',
+  //     name: 'Robert的博客',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'feed',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfasdfasf',
+  //     name: 'Oldest First',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'search',
+  //   },
+  //   {
+  //     id: 'sdfasdfasdfgasdfg',
+  //     name: 'Hockey',
+  //     // icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+  //     filter: 'in:all label:"Hockey"',
+  //     type: 'label',
+  //     label: {
+  //       id: 'sdfsdfsdf',
+  //       name: 'Hockey',
+  //       color: '#E98B8B',
+  //       createdAt: new Date(),
+  //     },
+  //   },
+  // ]
+  //
+
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        gap: '8px',
+        width: '100%',
+        px: '15px',
+        pb: '25px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <HStack
+        alignment="center"
+        distribution="start"
+        css={{ width: '100%', pr: '0px' }}
+      >
+        <StyledText
+          css={{
+            fontFamily: '$display',
+            fontSize: '14px',
+            lineHeight: '125%',
+            color: '$thLibraryMenuPrimary',
+            pl: '10px',
+            // mt: '20px',
+            mb: '10px',
+          }}
+        >
+          SHORTCUTS
+        </StyledText>
+        <SpanBox css={{ display: 'flex', ml: 'auto' }}>
+          <Dropdown
+            side="bottom"
+            triggerElement={<DotsThree size={20} />}
+            css={{ ml: 'auto' }}
+          >
+            <DropdownOption
+              onSelect={() => {
+                router.push(`/settings/shortcuts`)
+              }}
+              title="Edit shortcuts"
+            />
+          </Dropdown>
+        </SpanBox>
+      </HStack>
+      {shortcuts.map((shortcut) => {
+        const selected = props.searchTerm === shortcut.filter
+        return (
+          <Box
+            key={`shortcut-${shortcut.id}`}
+            css={{
+              display: 'flex',
+              width: '100%',
+              maxWidth: '100%',
+              height: '32px',
+
+              backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+              color: selected
+                ? '$thLibraryMenuSecondary'
+                : '$thLibraryMenuUnselected',
+              verticalAlign: 'middle',
+              borderRadius: '3px',
+              cursor: 'pointer',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              '&:hover': {
+                backgroundColor: selected
+                  ? '$thLibrarySelectionColor'
+                  : '$thBackground4',
+              },
+              '&:active': {
+                backgroundColor: selected
+                  ? '$thLibrarySelectionColor'
+                  : '$thBackground4',
+              },
+            }}
+            title={shortcut.name}
+            onClick={(e) => {
+              props.applySearchQuery(shortcut.filter)
+              props.setShowFilterMenu(false)
+              e.preventDefault()
+            }}
+          >
+            {(shortcut.type == 'feed' || shortcut.type == 'newsletter') && (
+              <FeedOrNewsletterShortcut shortcut={shortcut} />
+            )}
+            {shortcut.type == 'search' && (
+              <SearchShortcut shortcut={shortcut} />
+            )}
+            {shortcut.type == 'label' && <LabelShortcut shortcut={shortcut} />}
+          </Box>
+        )
+      })}
+    </VStack>
+  )
+}
+
+type ShortcutItemProps = {
+  shortcut: Shortcut
+}
+
+const FeedOrNewsletterShortcut = (props: ShortcutItemProps): JSX.Element => {
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{ pl: '10px', width: '100%', gap: '10px' }}
+      key={`search-${props.shortcut.id}`}
+    >
+      <HStack
+        distribution="start"
+        alignment="center"
+        css={{ minWidth: '20px' }}
+      >
+        {props.shortcut.icon ? (
+          <CoverImage
+            src={props.shortcut.icon}
+            width={20}
+            height={20}
+            css={{ borderRadius: '20px' }}
+          />
+        ) : props.shortcut.type == 'newsletter' ? (
+          <NewsletterIcon color="#F59932" size={18} />
+        ) : (
+          <FollowingIcon color="#F59932" size={21} />
+        )}
+      </HStack>
+      <StyledText style="settingsItem">{props.shortcut.name}</StyledText>
+    </HStack>
+  )
+}
+
+const SearchShortcut = (props: ShortcutItemProps): JSX.Element => {
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{ pl: '10px', width: '100%', gap: '10px' }}
+      key={`search-${props.shortcut.id}`}
+    >
+      <HStack
+        distribution="start"
+        alignment="center"
+        css={{ minWidth: '20px' }}
+      >
+        <MagnifyingGlass size={18} />
+      </HStack>
+      <StyledText style="settingsItem">{props.shortcut.name}</StyledText>
+    </HStack>
+  )
+}
+
+const LabelShortcut = (props: ShortcutItemProps): JSX.Element => {
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{ pl: '5px', width: '100%' }}
+      key={`search-${props.shortcut.id}`}
+    >
+      <OutlinedLabelChip
+        text={props.shortcut.name}
+        color={props.shortcut.label?.color ?? 'gray'}
+      />
+    </HStack>
+  )
+}
+
+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="SHORTCUTS"
+      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:\"${escapeQuotes(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:\"${escapeQuotes(
+                      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: '$display',
+            fontSize: '14px',
+            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 NavButtonProps = {
+  text: string
+  icon: ReactNode
+
+  filterTerm: string
+  searchTerm: string | undefined
+
+  applySearchQuery: (searchTerm: string) => void
+  setShowFilterMenu: (show: boolean) => void
+}
+
+type NavButtonRedirectProps = {
+  text: string
+  icon: ReactNode
+
+  redirectLocation: string
+}
+
+function NavRedirectButton(props: NavButtonRedirectProps): JSX.Element {
+  const [selected, setSelected] = useState(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    setSelected(window.location.pathname.includes(props.redirectLocation))
+  }, [])
+
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        pl: '10px',
+        mb: '2px',
+        gap: '10px',
+        display: 'flex',
+        width: '100%',
+        maxWidth: '100%',
+        height: '34px',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+        fontSize: '15px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        '&:hover': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+        '&:active': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+      }}
+      title={props.text}
+      onClick={(e) => {
+        router.push(props.redirectLocation)
+        e.preventDefault()
+      }}
+    >
+      {props.icon}
+      {props.text}
+    </HStack>
+  )
+}
+
+function NavButton(props: NavButtonProps): 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 (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        pl: '10px',
+        mb: '2px',
+        gap: '10px',
+        display: 'flex',
+        width: '100%',
+        maxWidth: '100%',
+        height: '34px',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+        fontSize: '15px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        '&: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.icon}
+      {props.text}
+    </HStack>
+  )
+}
+
+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:\"${escapeQuotes(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:\"${escapeQuotes(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) => {
+            const escapedLabelName = escapeQuotes(props.label.name)
+            if (e.target.checked) {
+              props.applySearchQuery(
+                `${props.searchTerm ?? ''} label:\"${escapedLabelName}\"`
+              )
+            } else {
+              const query =
+                props.searchTerm?.replace(
+                  `label:\"${escapedLabelName}\"`,
+                  ''
+                ) ?? ''
+              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/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 5a1908fbf..e4a575337 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -157,6 +157,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         readerTableHeader: '#FFFFFF',
         readerMargin: 'white',
         readerTextSubtle: '#898989',
+        readerHoverBg: '#1E1E1E',
 
         // Avatar Fallback color
         avatarBg: '#FFEA9F',
@@ -296,6 +297,8 @@ const darkThemeSpec = {
     readerFontHighContrast: 'white',
     readerTableHeader: '#FFFFFF',
     readerMargin: '#2A2A2A',
+    readerHoverBg: '#1E1E1E',
+    readerTextSubtle: '#EDEDED',
 
     avatarBg: '#7B5C3E',
     avatarFont: '#D9D9D9',
diff --git a/packages/web/pages/justread/index.tsx b/packages/web/pages/justread/index.tsx
index 936484476..877707db0 100644
--- a/packages/web/pages/justread/index.tsx
+++ b/packages/web/pages/justread/index.tsx
@@ -1,7 +1,7 @@
 import * as HoverCard from '@radix-ui/react-hover-card'
 import { styled } from '@stitches/react'
 import { useRouter } from 'next/router'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Button } from '../../components/elements/Button'
 import { AddToLibraryActionIcon } from '../../components/elements/icons/home/AddToLibraryActionIcon'
 import { ArchiveActionIcon } from '../../components/elements/icons/home/ArchiveActionIcon'
@@ -25,14 +25,20 @@ import {
   useGetSubscriptionsQuery,
 } from '../../lib/networking/queries/useGetSubscriptionsQuery'
 import {
+  Box,
   HStack,
   SpanBox,
   VStack,
 } from './../../components/elements/LayoutPrimitives'
+import { Hamburger, List, ThumbsDown, ThumbsUp } from 'phosphor-react'
+import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
+import { Toaster } from 'react-hot-toast'
+import { DEFAULT_HEADER_HEIGHT } from '../../components/templates/homeFeed/HeaderSpacer'
+import { NavigationMenu } from '../../components/templates/navMenu/NavigationMenu'
 
 export default function Home(): JSX.Element {
+  const [showLeftMenu, setShowLeftMenu] = useState(false)
   const homeData = useGetHomeItems()
-  console.log('home sections: ', homeData.sections)
   useApplyLocalTheme()
 
   return (
@@ -41,11 +47,29 @@ export default function Home(): JSX.Element {
       alignment="center"
       css={{
         width: '100%',
-        bg: '$readerBg',
+        // bg: '$readerBg',
+        bg: '#2A2A2A',
         pt: '45px',
         minHeight: '100vh',
       }}
     >
+      <Toaster />
+      <Header
+        toggleMenu={() => {
+          setShowLeftMenu(!showLeftMenu)
+        }}
+      />
+      {showLeftMenu && (
+        <NavigationMenu
+          setShowAddLinkModal={() => {}}
+          searchTerm={''}
+          applySearchQuery={(searchQuery: string) => {}}
+          showFilterMenu={showLeftMenu}
+          setShowFilterMenu={(show) => {
+            setShowLeftMenu(show)
+          }}
+        />
+      )}
       <VStack
         distribution="start"
         css={{
@@ -58,6 +82,9 @@ export default function Home(): JSX.Element {
         }}
       >
         {homeData.sections?.map((homeSection, idx) => {
+          if (homeSection.items.length < 1) {
+            return <></>
+          }
           switch (homeSection.layout) {
             case 'just_added':
               return (
@@ -150,6 +177,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
       <Pagination
         items={props.homeSection.items}
         itemsPerPage={4}
+        loadMoreButtonText="Load more Top Picks"
         render={(homeItem) => (
           <TopicPickHomeItemView key={homeItem.id} homeItem={homeItem} />
         )}
@@ -165,14 +193,23 @@ const QuickLinksHomeSection = (props: HomeSectionProps): JSX.Element => {
       css={{
         width: '100%',
         gap: '20px',
+        bg: '#3D3D3D',
+        py: '30px',
+        px: '20px',
+        borderRadius: '5px',
       }}
     >
       <SpanBox
         css={{
           fontFamily: '$inter',
-          fontSize: '16px',
+          fontSize: '12px',
           fontWeight: '600',
-          color: '$readerText',
+          textTransform: 'uppercase',
+          color: '$ctaBlue',
+          bg: '#007AFF10',
+          px: '10px',
+          py: '5px',
+          borderRadius: '5px',
         }}
       >
         {props.homeSection.title}
@@ -279,9 +316,9 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => {
       alignment="center"
       css={{
         fontSize: '12px',
-        fontWeight: 'normal',
+        fontWeight: 'medium',
         fontFamily: '$inter',
-        color: '$readerContrast',
+        color: '$readerTextSubtle',
       }}
     >
       {timeAgo(props.homeItem.date)}
@@ -299,7 +336,13 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
         lineHeight: '20px',
         fontWeight: '600',
         fontFamily: '$inter',
-        color: '$readerText',
+        color: 'white',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        wordBreak: 'break-word',
+        display: '-webkit-box',
+        '-webkit-line-clamp': '3',
+        '-webkit-box-orient': 'vertical',
       }}
     >
       {props.homeItem.title}
@@ -307,6 +350,31 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
   )
 }
 
+type PreviewContentProps = {
+  previewContent?: string
+  maxLines?: string
+}
+
+const PreviewContent = (props: PreviewContentProps): JSX.Element => {
+  return (
+    <SpanBox
+      css={{
+        fontFamily: '$inter',
+        fontSize: '14px',
+        lineHeight: '28px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        wordBreak: 'break-word',
+        display: '-webkit-box',
+        '-webkit-line-clamp': props.maxLines ?? '3',
+        '-webkit-box-orient': 'vertical',
+      }}
+    >
+      {props.previewContent ?? ''}
+    </SpanBox>
+  )
+}
+
 const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
   const router = useRouter()
 
@@ -349,10 +417,12 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
     <VStack
       css={{
         width: '100%',
-        padding: '20px',
+        p: '0px',
+        pt: '35px',
+
         borderRadius: '5px',
         '&:hover': {
-          bg: '$thBackground',
+          bg: '#3D3D3D',
           borderRadius: '0px',
         },
       }}
@@ -363,8 +433,9 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
           router.push(props.homeItem.url)
         }
       }}
+      alignment="start"
     >
-      <HStack css={{ width: '100%', gap: '5px' }}>
+      <HStack css={{ width: '100%', gap: '5px', px: '20px' }}>
         <VStack css={{ gap: '15px' }}>
           <HStack
             distribution="start"
@@ -390,28 +461,30 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
           )}
         </SpanBox>
       </HStack>
-      <SpanBox
-        css={{ fontFamily: '$inter', fontSize: '13px', lineHeight: '23px' }}
-      >
-        {props.homeItem.previewContent}
+      <SpanBox css={{ px: '20px' }}>
+        <PreviewContent
+          previewContent={props.homeItem.previewContent}
+          maxLines="6"
+        />
       </SpanBox>
-      <HStack css={{ gap: '6px', mt: '20px' }}>
-        <Button style="ghost">
+      <HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
+        <Button style="homeAction">
           <AddToLibraryActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <CommentActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <ShareActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <ArchiveActionIcon />
         </Button>
-        <Button style="ghost">
+        <Button style="homeAction">
           <RemoveActionIcon />
         </Button>
       </HStack>
+      <Box css={{ mt: '15px', width: '100%', height: '1px', bg: '#3D3D3D' }} />
     </VStack>
   )
 }
@@ -423,11 +496,13 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => {
     <VStack
       css={{
         width: '100%',
-        padding: '10px',
+        px: '10px',
+        py: '10px',
+        gap: '2px',
         borderRadius: '5px',
         '&:hover': {
-          bg: '$thBackground',
-          borderRadius: '0px',
+          bg: '$readerBg',
+          cursor: 'pointer',
         },
       }}
       onClick={(event) => {
@@ -440,6 +515,10 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => {
     >
       <TimeAgo homeItem={props.homeItem} />
       <Title homeItem={props.homeItem} />
+      <PreviewContent
+        previewContent={props.homeItem.previewContent}
+        maxLines="2"
+      />
     </VStack>
   )
 }
@@ -573,3 +652,144 @@ const SubscriptionSourceHoverContent = (
     </VStack>
   )
 }
+
+// const SiteSourceHoverContent = (
+//   props: SourceHoverContentProps
+// ): JSX.Element => {
+//   const sendHomeFeedback = useCallback(
+//     async (feedbackType: SendHomeFeedbackType) => {
+//       const feedback: SendHomeFeedbackInput = {
+//         feedbackType,
+//       }
+//       feedback.site = props.source.name
+//       const result = await sendHomeFeedbackMutation(feedback)
+//       if (result) {
+//         showSuccessToast('Feedback sent')
+//       } else {
+//         showErrorToast('Error sending feedback')
+//       }
+//     },
+//     [props]
+//   )
+
+//   return (
+//     <VStack
+//       alignment="start"
+//       distribution="start"
+//       css={{
+//         width: '240px',
+//         height: '100px',
+//         bg: '$thBackground2',
+//         borderRadius: '10px',
+//         padding: '15px',
+//         gap: '10px',
+//         boxShadow: theme.shadows.cardBoxShadow.toString(),
+//       }}
+//     >
+//       <HStack
+//         distribution="start"
+//         alignment="center"
+//         css={{ width: '100%', gap: '10px' }}
+//       >
+//         {props.source.icon && (
+//           <SiteIcon
+//             src={props.source.icon}
+//             alt={props.source.name}
+//             size="large"
+//           />
+//         )}
+//         <SpanBox
+//           css={{
+//             fontFamily: '$inter',
+//             fontWeight: '500',
+//             fontSize: '14px',
+//           }}
+//         >
+//           {props.source.name}
+//         </SpanBox>
+//       </HStack>
+//       {/* <SpanBox
+//         css={{
+//           fontFamily: '$inter',
+//           fontSize: '13px',
+//           color: '$thTextSubtle4',
+//         }}
+//       >
+//         {subscription ? <>{subscription.description}</> : <></>}
+//       </SpanBox> */}
+//       <FeedbackView sendFeedback={sendHomeFeedback} />
+//     </VStack>
+//   )
+// }
+
+type FeedbackViewProps = {
+  sendFeedback: (type: SendHomeFeedbackType) => void
+}
+
+const FeedbackView = (props: FeedbackViewProps): JSX.Element => {
+  return (
+    <HStack css={{ ml: 'auto', mt: 'auto', gap: '5px' }}>
+      <Button
+        style="plainIcon"
+        onClick={(event) => {
+          props.sendFeedback('MORE')
+          event.preventDefault()
+          event.stopPropagation()
+        }}
+      >
+        <ThumbsUp weight="fill" />
+      </Button>
+      <Button
+        style="plainIcon"
+        onClick={(event) => {
+          props.sendFeedback('LESS')
+          event.preventDefault()
+          event.stopPropagation()
+        }}
+      >
+        <ThumbsDown weight="fill" />
+      </Button>
+    </HStack>
+  )
+}
+
+type HeaderProps = {
+  toggleMenu: () => void
+}
+
+const Header = (props: HeaderProps): JSX.Element => {
+  const small = false
+
+  return (
+    <VStack
+      alignment="start"
+      distribution="start"
+      css={{
+        zIndex: 5,
+        position: 'fixed',
+        left: '15px',
+        top: '15px',
+        height: small ? '60px' : DEFAULT_HEADER_HEIGHT,
+        transition: 'height 0.5s',
+        '@lgDown': { px: '20px' },
+        '@mdDown': {
+          px: '10px',
+          left: '0px',
+          right: '0',
+        },
+      }}
+    >
+      <VStack alignment="center" distribution="center">
+        <Button
+          style="plainIcon"
+          onClick={(event) => {
+            props.toggleMenu()
+            event.preventDefault()
+          }}
+        >
+          <List size="25" color={theme.colors.readerTextSubtle.toString()} />
+        </Button>
+      </VStack>
+    </VStack>
+  )
+}

From c4d8be60940486c77743ffec4c109b9c8b454933 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 5 Jun 2024 19:20:54 +0800
Subject: [PATCH 2/6] Linting

---
 packages/web/pages/justread/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web/pages/justread/index.tsx b/packages/web/pages/justread/index.tsx
index 877707db0..0a2707d5b 100644
--- a/packages/web/pages/justread/index.tsx
+++ b/packages/web/pages/justread/index.tsx
@@ -61,8 +61,10 @@ export default function Home(): JSX.Element {
       />
       {showLeftMenu && (
         <NavigationMenu
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
           setShowAddLinkModal={() => {}}
           searchTerm={''}
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
           applySearchQuery={(searchQuery: string) => {}}
           showFilterMenu={showLeftMenu}
           setShowFilterMenu={(show) => {

From 9861822d8f8df515c2049cd78f29c60c6ae95855 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 5 Jun 2024 19:26:36 +0800
Subject: [PATCH 3/6] Comment out feedback buttons

---
 packages/web/pages/justread/index.tsx | 58 +++++++++++++--------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/packages/web/pages/justread/index.tsx b/packages/web/pages/justread/index.tsx
index 0a2707d5b..409408f4f 100644
--- a/packages/web/pages/justread/index.tsx
+++ b/packages/web/pages/justread/index.tsx
@@ -724,36 +724,36 @@ const SubscriptionSourceHoverContent = (
 //   )
 // }
 
-type FeedbackViewProps = {
-  sendFeedback: (type: SendHomeFeedbackType) => void
-}
+// type FeedbackViewProps = {
+//   sendFeedback: (type: SendHomeFeedbackType) => void
+// }
 
-const FeedbackView = (props: FeedbackViewProps): JSX.Element => {
-  return (
-    <HStack css={{ ml: 'auto', mt: 'auto', gap: '5px' }}>
-      <Button
-        style="plainIcon"
-        onClick={(event) => {
-          props.sendFeedback('MORE')
-          event.preventDefault()
-          event.stopPropagation()
-        }}
-      >
-        <ThumbsUp weight="fill" />
-      </Button>
-      <Button
-        style="plainIcon"
-        onClick={(event) => {
-          props.sendFeedback('LESS')
-          event.preventDefault()
-          event.stopPropagation()
-        }}
-      >
-        <ThumbsDown weight="fill" />
-      </Button>
-    </HStack>
-  )
-}
+// const FeedbackView = (props: FeedbackViewProps): JSX.Element => {
+//   return (
+//     <HStack css={{ ml: 'auto', mt: 'auto', gap: '5px' }}>
+//       <Button
+//         style="plainIcon"
+//         onClick={(event) => {
+//           props.sendFeedback('MORE')
+//           event.preventDefault()
+//           event.stopPropagation()
+//         }}
+//       >
+//         <ThumbsUp weight="fill" />
+//       </Button>
+//       <Button
+//         style="plainIcon"
+//         onClick={(event) => {
+//           props.sendFeedback('LESS')
+//           event.preventDefault()
+//           event.stopPropagation()
+//         }}
+//       >
+//         <ThumbsDown weight="fill" />
+//       </Button>
+//     </HStack>
+//   )
+// }
 
 type HeaderProps = {
   toggleMenu: () => void

From 136baf80e4b0725bf240e3bb568788758515a8ec Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 6 Jun 2024 11:10:52 +0800
Subject: [PATCH 4/6] Revert LibraryMenu changes

---
 .../templates/navMenu/LibraryMenu.tsx         | 21 +++++--------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index 367480623..e39923bca 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { StyledText } from '../../elements/StyledText'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
-import { Circle, DotsThree, List, MagnifyingGlass, X } from 'phosphor-react'
+import { Circle, DotsThree, MagnifyingGlass, X } from 'phosphor-react'
 import {
   Subscription,
   SubscriptionType,
@@ -122,9 +122,9 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         <Box
           css={{
             width: '100%',
-            px: '15px',
+            px: '25px',
             pb: '17px',
-            pt: '15px',
+            pt: '4.5px',
             lineHeight: '1',
             '@mdDown': {
               pb: '0px',
@@ -133,19 +133,8 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
             },
           }}
         >
-          <SpanBox css={{ mr: 'auto', '@mdDown': { display: 'none' } }}>
-            <Button
-              style="plainIcon"
-              onClick={(event) => {
-                props.setShowFilterMenu(false)
-                event.preventDefault()
-              }}
-            >
-              <List
-                size="25"
-                color={theme.colors.readerTextSubtle.toString()}
-              />
-            </Button>
+          <SpanBox css={{ '@mdDown': { display: 'none' } }}>
+            <LogoBox />
           </SpanBox>
 
           <Button

From b6cbf064e942f1776150e8c81caa992a43299086 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 6 Jun 2024 11:39:22 +0800
Subject: [PATCH 5/6] Add full theme selection to the menu

---
 .../components/templates/PrimaryDropdown.tsx  | 21 +++++++++++++++++--
 .../article/ReaderSettingsControl.tsx         |  8 ++++---
 .../components/templates/navMenu/Footer.tsx   |  6 +++++-
 .../templates/navMenu/NavigationMenu.tsx      |  2 +-
 packages/web/pages/justread/index.tsx         |  7 +++----
 5 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index e7f2d727a..f5698a5f5 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -16,10 +16,12 @@ import { StyledText } from '../elements/StyledText'
 import { styled, theme, ThemeId } from '../tokens/stitches.config'
 import { LayoutType } from './homeFeed/HomeFeedContainer'
 import { useCurrentTheme } from '../../lib/hooks/useCurrentTheme'
+import { ThemeSelector } from './article/ReaderSettingsControl'
 
 type PrimaryDropdownProps = {
   children?: ReactNode
   showThemeSection: boolean
+  showFullThemeSection: boolean
 
   layout?: LayoutType
   updateLayout?: (layout: LayoutType) => void
@@ -192,7 +194,8 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
         </VStack>
       </HStack>
       <DropdownSeparator />
-      {props.showThemeSection && <ThemeSection {...props} />}
+      {props.showThemeSection && <LegacyMenuThemeSection {...props} />}
+      {props.showFullThemeSection && <ThemeSection {...props} />}
       <DropdownOption
         onSelect={() => headerDropdownActionHandler('navigate-to-install')}
         title="Install"
@@ -261,7 +264,21 @@ export const StyledToggleButton = styled('button', {
   },
 })
 
-function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
+const ThemeSection = (props: PrimaryDropdownProps): JSX.Element => {
+  const { currentTheme, setCurrentTheme, currentThemeIsDark } =
+    useCurrentTheme()
+
+  return (
+    <>
+      <VStack css={{ width: '100%' }}>
+        <ThemeSelector />
+      </VStack>
+      <DropdownSeparator />
+    </>
+  )
+}
+
+function LegacyMenuThemeSection(props: PrimaryDropdownProps): JSX.Element {
   const { currentTheme, setCurrentTheme, currentThemeIsDark } =
     useCurrentTheme()
 
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index fd220d1d7..279605c87 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -278,7 +278,9 @@ function BasicSettings(props: SettingsProps): JSX.Element {
 
       <HorizontalDivider />
 
-      <ThemeSelector />
+      <SpanBox css={{ px: '10px', width: '100%' }}>
+        <ThemeSelector />
+      </SpanBox>
 
       <HorizontalDivider />
 
@@ -597,14 +599,14 @@ function LayoutControls(props: LayoutControlsProps): JSX.Element {
   )
 }
 
-function ThemeSelector(): JSX.Element {
+export function ThemeSelector(): JSX.Element {
   useDarkModeListener()
   const { currentTheme, setCurrentTheme, resetSystemTheme } = useCurrentTheme()
 
   return (
     <VStack
       css={{
-        px: '20px',
+        px: '10px',
         m: '0px',
         pb: '10px',
         width: '100%',
diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx
index d44bae039..fa1e5b611 100644
--- a/packages/web/components/templates/navMenu/Footer.tsx
+++ b/packages/web/components/templates/navMenu/Footer.tsx
@@ -4,6 +4,7 @@ import { PrimaryDropdown } from '../PrimaryDropdown'
 import { LIBRARY_LEFT_MENU_WIDTH } from './LibraryMenu'
 
 type NavMenuFooterProps = {
+  showFullThemeSection?: boolean
   setShowAddLinkModal?: (show: true) => void
 }
 
@@ -28,7 +29,10 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
         },
       }}
     >
-      <PrimaryDropdown showThemeSection={true} />
+      <PrimaryDropdown
+        showThemeSection={!props.showFullThemeSection ?? true}
+        showFullThemeSection={props.showFullThemeSection ?? false}
+      />
       <SpanBox
         css={{
           marginLeft: 'auto',
diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
index 788891b6d..47df7da78 100644
--- a/packages/web/components/templates/navMenu/NavigationMenu.tsx
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -169,7 +169,7 @@ export function NavigationMenu(props: LibraryFilterMenuProps): JSX.Element {
         </Box>
         <LibraryNav {...props} />
         <Shortcuts {...props} />
-        <NavMenuFooter {...props} />
+        <NavMenuFooter {...props} showFullThemeSection={true} />
         <Box css={{ height: '250px ' }} />
       </Box>
       {/* This spacer pushes library content to the right of 
diff --git a/packages/web/pages/justread/index.tsx b/packages/web/pages/justread/index.tsx
index 409408f4f..f98cd6c19 100644
--- a/packages/web/pages/justread/index.tsx
+++ b/packages/web/pages/justread/index.tsx
@@ -30,7 +30,7 @@ import {
   SpanBox,
   VStack,
 } from './../../components/elements/LayoutPrimitives'
-import { Hamburger, List, ThumbsDown, ThumbsUp } from 'phosphor-react'
+import { List, ThumbsDown, ThumbsUp } from 'phosphor-react'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { Toaster } from 'react-hot-toast'
 import { DEFAULT_HEADER_HEIGHT } from '../../components/templates/homeFeed/HeaderSpacer'
@@ -47,8 +47,7 @@ export default function Home(): JSX.Element {
       alignment="center"
       css={{
         width: '100%',
-        // bg: '$readerBg',
-        bg: '#2A2A2A',
+        bg: '$readerBg',
         pt: '45px',
         minHeight: '100vh',
       }}
@@ -338,7 +337,7 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
         lineHeight: '20px',
         fontWeight: '600',
         fontFamily: '$inter',
-        color: 'white',
+        color: '$readerText',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         wordBreak: 'break-word',

From 1e0b0a54ad91f2cbb8dc2d45e0860b3ded4097be Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 6 Jun 2024 11:58:30 +0800
Subject: [PATCH 6/6] Add missing attribute

---
 packages/web/components/templates/reader/ReaderHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index e1399ae03..75c776241 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -144,7 +144,7 @@ function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
             color={theme.colors.thHighContrast.toString()}
           />
         </Button>
-        <PrimaryDropdown showThemeSection={false}>
+        <PrimaryDropdown showThemeSection={false} showFullThemeSection={false}>
           <CircleUtilityMenuIcon
             size={25}
             color={theme.colors.thHighContrast.toString()}