Move the menu off the homefeedgrid into new library layout

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

@@ -53,6 +53,20 @@ import {
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
+const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60
+
+const SAVED_SEARCHES: Record<string, string> = {
+  Inbox: `in:inbox`,
+  'Read Later': `in:inbox -label:Newsletter`,
+  Highlights: `type:highlights`,
+  Today: `in:inbox saved:${
+    new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0]
+  }Z${timeZoneHourDiff.toLocaleString('en-US', {
+    signDisplay: 'always',
+  })}..*`,
+  Newsletters: `in:inbox label:Newsletter`,
+}
+
 const fetchSearchResults = async (query: string, cb: any) => {
   if (!query.startsWith('#')) return
   const res = await typeaheadSearchQuery({
@@ -82,14 +96,17 @@ export function HomeFeedContainer(): JSX.Element {
 
   const gridContainerRef = useRef<HTMLDivElement>(null)
 
-  const [shareTarget, setShareTarget] =
-    useState<LibraryItem | undefined>(undefined)
+  const [shareTarget, setShareTarget] = useState<LibraryItem | undefined>(
+    undefined
+  )
 
-  const [snoozeTarget, setSnoozeTarget] =
-    useState<LibraryItem | undefined>(undefined)
+  const [snoozeTarget, setSnoozeTarget] = useState<LibraryItem | undefined>(
+    undefined
+  )
 
-  const [labelsTarget, setLabelsTarget] =
-    useState<LibraryItem | undefined>(undefined)
+  const [labelsTarget, setLabelsTarget] = useState<LibraryItem | undefined>(
+    undefined
+  )
 
   const [showAddLinkModal, setShowAddLinkModal] = useState(false)
   const [showEditTitleModal, setShowEditTitleModal] = useState(false)
@@ -656,8 +673,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         alignment="center"
         css={{
           px: '$3',
-          width: '75%',
-          display: 'inline-flex',
+          width: '100%',
           '@smDown': {
             px: '$2',
           },
@@ -665,16 +681,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
       >
         <Toaster />
         {props.isValidating && props.items.length == 0 && <TopBarProgress />}
-        <HStack
-          alignment="center"
-          distribution="start"
-          css={{
-            width: '95%',
-            position: 'absolute',
-            top: '35px',
-            left: '20px',
-          }}
-        >
+        <HStack alignment="center" distribution="start" css={{ width: '100%' }}>
           <StyledText
             style="subHeadline"
             css={{
@@ -724,7 +731,53 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           searchTerm={props.searchTerm}
           applySearchQuery={props.applySearchQuery}
         />
+        {viewerData?.me && (
+          <Box
+            css={{
+              display: 'flex',
+              width: '100%',
+              height: '44px',
+              marginTop: '16px',
+              gap: '8px',
+              flexDirection: 'row',
+              overflowY: 'scroll',
+              scrollbarWidth: 'none',
+              '&::-webkit-scrollbar': {
+                display: 'none',
+              },
+            }}
+          >
+            {Object.keys(SAVED_SEARCHES).map((key) => {
+              const isInboxTerm = (term: string) => {
+                return !term || term === 'in:inbox'
+              }
 
+              const searchQuery = SAVED_SEARCHES[key]
+              const style =
+                searchQuery === props.searchTerm ||
+                (!props.searchTerm && isInboxTerm(searchQuery))
+                  ? 'ctaDarkYellow'
+                  : 'ctaLightGray'
+              return (
+                <Button
+                  key={key}
+                  style={style}
+                  onClick={() => {
+                    props.applySearchQuery(searchQuery)
+                  }}
+                  css={{
+                    p: '10px 12px',
+                    height: '37.5px',
+                    borderRadius: '6px',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {key}
+                </Button>
+              )
+            })}
+          </Box>
+        )}
         {!props.isValidating && props.items.length == 0 ? (
           <EmptyLibrary
             onAddLinkClicked={() => {

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

@@ -49,14 +49,7 @@ export function LibrarySearchBar(props: LibrarySearchBarProps): JSX.Element {
   )
 
   return (
-    <VStack
-      css={{
-        width: '95%',
-        position: 'absolute',
-        top: '105px',
-        left: '20px',
-      }}
-    >
+    <VStack css={{ width: '100%' }}>
       <HStack
         alignment="center"
         distribution="start"

packages/web/pages/home.tsx

@@ -1,6 +1,7 @@
 import { PrimaryLayout } from '../components/templates/PrimaryLayout'
 import { HomeFeedContainer } from '../components/templates/homeFeed/HomeFeedContainer'
-import { Menubar } from '../components/templates/Menu'
+import { VStack } from './../components/elements/LayoutPrimitives'
+import { useRef } from 'react'
 
 export default function Home(): JSX.Element {
   return <LoadedContent />
@@ -8,17 +9,16 @@ export default function Home(): JSX.Element {
 
 function LoadedContent(): JSX.Element {
   return (
-    <>
-      <PrimaryLayout
-        pageMetaDataProps={{
-          title: 'Home - Omnivore',
-          path: '/home',
-        }}
-        pageTestId="home-page-tag"
-      >
-        <Menubar />
+    <PrimaryLayout
+      pageMetaDataProps={{
+        title: 'Home - Omnivore',
+        path: '/home',
+      }}
+      pageTestId="home-page-tag"
+    >
+      <VStack alignment="center" distribution="center">
         <HomeFeedContainer />
-      </PrimaryLayout>
-    </>
+      </VStack>
+    </PrimaryLayout>
   )
 }