From 4030f8efc4282ee6d957ebff210dd775eeece85d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 20 Apr 2022 11:22:30 -0700
Subject: [PATCH] Initial implementation of saved searches (feature flagged)

---
 packages/web/components/elements/Button.tsx   |  2 +-
 .../templates/homeFeed/HomeFeedContainer.tsx  | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index ccd3b0131..d17a1dc4c 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -39,7 +39,7 @@ export const Button = styled('button', {
         borderRadius: '8px',
         cursor: 'pointer',
         color: '$omnivoreGray',
-        p: '10px 10px',
+        p: '10px 12px',
         bg: 'rgb(125, 125, 125, 0)',
         '&:hover': {
           bg: 'rgb(47, 47, 47, 0.1)',
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 4ec5db90b..4a65456b9 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -37,6 +37,7 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { ConfirmationModal } from '../../patterns/ConfirmationModal'
 import { SetLabelsModal } from '../article/SetLabelsModal'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { isVipUser } from '../../../lib/featureFlag'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -44,6 +45,14 @@ export type HomeFeedContainerProps = {
   scrollElementRef: React.RefObject<HTMLDivElement>
 }
 
+const SAVED_SEARCHES: Record<string,string> = {
+  'Inbox': '',
+  'All': 'in:all',
+  'Today': `in:inbox saved:${new Date(new Date().setDate(-1)).toISOString().split('T')[0]}..*`,
+  'Newsletter': `in:inbox label:Newsletter`,
+  'Non-Newsletter': `in:inbox -label:Newsletter`,
+}
+
 export function HomeFeedContainer(props: HomeFeedContainerProps): JSX.Element {
   const { viewerData } = useGetViewerQuery()
   const router = useRouter()
@@ -577,6 +586,20 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           searchTerm={props.searchTerm}
           applySearchQuery={props.applySearchQuery}
         />
+        {viewerData?.me && isVipUser(viewerData?.me) && (
+          <Box css={{ display: 'flex', width: '100%', height: '44px', marginTop: '16px', gap: '8px', flexDirection: 'row' }}>
+            {Object.keys(SAVED_SEARCHES).map(key => {
+              const searchQuery = SAVED_SEARCHES[key]
+              const style = searchQuery === props.searchTerm ? 'ctaDarkYellow' : 'ctaLightGray'
+              return (
+                <Button style={style} onClick={() => { props.applySearchQuery(searchQuery)}}>
+                  {key}
+                </Button>
+              )
+            })
+          }
+          </Box>
+        )}
         <Box
           ref={props.gridContainerRef}
           css={{