Allow passing mode to backend to better handle mode changes in client

packages/api/src/utils/search.ts

@@ -334,6 +334,7 @@ export const parseSearchQuery = (query: string | undefined): SearchFilter => {
       'includes',
       'recommendedBy',
       'no',
+      'mode',
     ],
     tokenize: true,
   })
@@ -424,6 +425,9 @@ export const parseSearchQuery = (query: string | undefined): SearchFilter => {
           noFilter && result.noFilters.push(noFilter)
           break
         }
+        case 'mode':
+          // mode is ignored and used only by the frontend
+          break
       }
     }
   }

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

@@ -114,10 +114,20 @@ export function HomeFeedContainer(): JSX.Element {
     } else setSearchResults([])
   }, [queryValue])
 
+  useEffect(() => {
+    if (
+      queryInputs.searchQuery &&
+      queryInputs.searchQuery?.indexOf('mode:highlights') > -1
+    ) {
+      setMode('highlights')
+    } else {
+      setMode('reads')
+    }
+  }, [queryInputs])
+
   useEffect(() => {
     if (!router.isReady) return
     const q = router.query['q']
-    const mode = router.query['mode']
     let qs = ''
     if (q && typeof q === 'string') {
       qs = q
@@ -126,6 +136,7 @@ export function HomeFeedContainer(): JSX.Element {
       setQueryInputs({ ...queryInputs, searchQuery: qs })
       performActionOnItem('refresh', undefined as unknown as any)
     }
+    const mode = router.query['mode']
 
     // intentionally not watching queryInputs here to prevent infinite looping
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -535,12 +546,6 @@ export function HomeFeedContainer(): JSX.Element {
           qp.delete('q')
         }
 
-        if (searchQuery.indexOf('has:highlights') > -1) {
-          setMode('highlights')
-        } else {
-          setMode('reads')
-        }
-
         const href = `${window.location.pathname}?${qp.toString()}`
         router.push(href, href, { shallow: true })
         window.sessionStorage.setItem('q', qp.toString())
@@ -682,7 +687,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
           }}
           showFilterMenu={showFilterMenu}
           setShowFilterMenu={setShowFilterMenu}
-          setMode={props.setMode}
         />
 
         {props.mode == 'highlights' && (

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

@@ -11,7 +11,6 @@ import { theme } from '../../tokens/stitches.config'
 import { currentThemeName } from '../../../lib/themeUpdater'
 import { MOBILE_HEADER_HEIGHT } from './HeaderSpacer'
 import { useRegisterActions } from 'kbar'
-import { LibraryMode } from './HomeFeedContainer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '300px'
 
@@ -23,8 +22,6 @@ type LibraryFilterMenuProps = {
 
   showFilterMenu: boolean
   setShowFilterMenu: (show: boolean) => void
-
-  setMode: (mode: LibraryMode) => void
 }
 
 export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
@@ -88,8 +85,7 @@ function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
     },
     {
       name: 'Highlights',
-      term: 'has:highlights',
-      mode: 'highlights' as LibraryMode,
+      term: 'has:highlights mode:highlights',
     },
     {
       name: 'Unlabeled',
@@ -115,7 +111,6 @@ function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
         section: 'Saved Searches',
         keywords: '?' + item.name,
         perform: () => {
-          props.setMode(item.mode ?? 'reads')
           props.applySearchQuery(item.term)
         },
       }
@@ -130,7 +125,6 @@ function SavedSearches(props: LibraryFilterMenuProps): JSX.Element {
           key={item.name}
           text={item.name}
           filterTerm={item.term}
-          mode={item.mode}
           {...props}
         />
       ))}
@@ -292,10 +286,8 @@ type FilterButtonProps = {
   filterTerm: string
   searchTerm: string | undefined
 
-  mode?: LibraryMode
   applySearchQuery: (searchTerm: string) => void
 
-  setMode: (mode: LibraryMode) => void
   setShowFilterMenu: (show: boolean) => void
 }
 
@@ -339,7 +331,6 @@ function FilterButton(props: FilterButtonProps): JSX.Element {
         },
       }}
       onClick={(e) => {
-        props.setMode(props.mode ?? 'reads')
         props.applySearchQuery(props.filterTerm)
         props.setShowFilterMenu(false)
         e.preventDefault()