Merge pull request #456 from omnivore-app/feature/saved-searches

Initial implementation of saved searches (feature flagged)

packages/web/components/elements/Button.tsx

@@ -38,18 +38,15 @@ export const Button = styled('button', {
         fontFamily: 'Inter',
         borderRadius: '8px',
         cursor: 'pointer',
-        color: '$omnivoreGray',
-        p: '10px 10px',
-        bg: 'rgb(125, 125, 125, 0)',
+        color: '$grayTextContrast',
+        p: '10px 12px',
+        bg: 'rgb(125, 125, 125, 0.1)',
         '&:hover': {
           bg: 'rgb(47, 47, 47, 0.1)',
           '.ctaButtonIcon': {
             visibility: 'visible',
           },
         },
-        '@md': {
-          bg: 'rgb(125, 125, 125, 0.1)',
-        },
         '.ctaButtonIcon': {
           visibility: 'hidden',
         }

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 || (!props.searchTerm && !searchQuery) ? 'ctaDarkYellow' : 'ctaLightGray'
+              return (
+                <Button key={key} style={style} onClick={() => { props.applySearchQuery(searchQuery)}} css={{ p: '10px 12px', borderRadius: '6px' }}>
+                  {key}
+                </Button>
+              )
+            })
+          }
+          </Box>
+        )}
         <Box
           ref={props.gridContainerRef}
           css={{

packages/web/lib/featureFlag.ts

@@ -1,6 +1,6 @@
 import { UserBasicData } from "./networking/queries/useGetViewerQuery"
 
-const VIP_USERS = ['jacksonh', 'satindar', 'hongbo']
+const VIP_USERS = ['jacksonh', 'satindar', 'hongbo', 'nat']
 
 export const isVipUser = (user: UserBasicData): boolean => {
   return VIP_USERS.includes(user.profile.username)