refactor(core): use KeyValueStore for recent searches (#5872)

* refactor(core): create useStoredSearch hook

* refactor: pass useStoredSearch to recentSearchesStore

* refactor(core): convert createRecentSearchesStore to useRecentSearchesStore

* fix(core): use default studio client options

* fix: pass recent terms for more predictable UI behavior

* refactor: remove recent searches from search state and invoke hook wherever needed

* fix: remove typos, spaces

Author: cngonzalez

packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/RecentSearches.tsx

@@ -10,7 +10,7 @@ import {
 } from '../../../../../../components'
 import {useTranslation} from '../../../../../../i18n'
 import {useSearchState} from '../../contexts/search/useSearchState'
-import {type RecentSearch} from '../../datastores/recentSearches'
+import {type RecentSearch, useRecentSearchesStore} from '../../datastores/recentSearches'
 import {Instructions} from '../Instructions'
 import {RecentSearchItem} from './item/RecentSearchItem'
 
@@ -33,9 +33,14 @@ interface RecentSearchesProps {
 export function RecentSearches({inputElement}: RecentSearchesProps) {
   const {
     dispatch,
-    recentSearchesStore,
-    state: {filtersVisible, fullscreen, recentSearches},
+    state: {filtersVisible, fullscreen},
   } = useSearchState()
+  const recentSearchesStore = useRecentSearchesStore()
+  const recentSearches = useMemo(
+    () => recentSearchesStore?.getRecentSearches(),
+    [recentSearchesStore],
+  )
+
   const commandListRef = useRef<CommandListHandle | null>(null)
 
   const {t} = useTranslation()
@@ -46,11 +51,10 @@ export function RecentSearches({inputElement}: RecentSearchesProps) {
    */
   const handleClearRecentSearchesClick = useCallback(() => {
     if (recentSearchesStore) {
-      const updatedRecentSearches = recentSearchesStore.removeSearch()
-      dispatch({recentSearches: updatedRecentSearches, type: 'RECENT_SEARCHES_SET'})
+      recentSearchesStore.removeSearch()
     }
     commandListRef?.current?.focusInputElement()
-  }, [dispatch, recentSearchesStore])
+  }, [recentSearchesStore])
 
   const mediaIndex = useMediaIndex()
 

packages/sanity/src/core/studio/components/navbar/search/components/recentSearches/item/RecentSearchItem.tsx

@@ -14,7 +14,7 @@ import {type MouseEvent, useCallback} from 'react'
 import styled from 'styled-components'
 
 import {useSearchState} from '../../../contexts/search/useSearchState'
-import {type RecentSearch} from '../../../datastores/recentSearches'
+import {type RecentSearch, useRecentSearchesStore} from '../../../datastores/recentSearches'
 import {DocumentTypesPill} from '../../common/DocumentTypesPill'
 import {FilterPill} from '../../common/FilterPill'
 
@@ -60,7 +60,8 @@ export function RecentSearchItem({
   value,
   ...rest
 }: RecentSearchesProps) {
-  const {dispatch, recentSearchesStore} = useSearchState()
+  const {dispatch} = useSearchState()
+  const recentSearchesStore = useRecentSearchesStore()
 
   // Determine how many characters are left to render type pills
   const availableCharacters = maxVisibleTypePillChars - value.query.length
@@ -70,8 +71,7 @@ export function RecentSearchItem({
 
     // Add to Local Storage
     if (recentSearchesStore) {
-      const updatedRecentSearches = recentSearchesStore?.addSearch(value, value?.filters)
-      dispatch({recentSearches: updatedRecentSearches, type: 'RECENT_SEARCHES_SET'})
+      recentSearchesStore?.addSearch(value, value?.filters)
     }
   }, [dispatch, recentSearchesStore, value])
 
@@ -80,11 +80,10 @@ export function RecentSearchItem({
       event.stopPropagation()
       // Remove from Local Storage
       if (recentSearchesStore) {
-        const updatedRecentSearches = recentSearchesStore?.removeSearchAtIndex(index)
-        dispatch({recentSearches: updatedRecentSearches, type: 'RECENT_SEARCHES_SET'})
+        recentSearchesStore?.removeSearchAtIndex(index)
       }
     },
-    [dispatch, index, recentSearchesStore],
+    [index, recentSearchesStore],
   )
 
   return (

packages/sanity/src/core/studio/components/navbar/search/components/searchResults/SearchResults.tsx

@@ -7,6 +7,7 @@ import {useTranslation} from '../../../../../../i18n'
 import {type WeightedHit} from '../../../../../../search'
 import {getPublishedId} from '../../../../../../util/draftUtils'
 import {useSearchState} from '../../contexts/search/useSearchState'
+import {useRecentSearchesStore} from '../../datastores/recentSearches'
 import {NoResults} from '../NoResults'
 import {SearchError} from '../SearchError'
 import {SortMenu} from '../SortMenu'
@@ -35,11 +36,11 @@ export function SearchResults({disableIntentLink, inputElement, onItemSelect}: S
   const {
     dispatch,
     onClose,
-    recentSearchesStore,
     setSearchCommandList,
     state: {debug, filters, fullscreen, lastActiveIndex, result, terms},
   } = useSearchState()
   const {t} = useTranslation()
+  const recentSearchesStore = useRecentSearchesStore()
 
   const hasSearchResults = !!result.hits.length
   const hasNoSearchResults = !result.hits.length && result.loaded
@@ -50,11 +51,10 @@ export function SearchResults({disableIntentLink, inputElement, onItemSelect}: S
    */
   const handleSearchResultClick = useCallback(() => {
     if (recentSearchesStore) {
-      const updatedRecentSearches = recentSearchesStore.addSearch(terms, filters)
-      dispatch({recentSearches: updatedRecentSearches, type: 'RECENT_SEARCHES_SET'})
+      recentSearchesStore.addSearch(terms, filters)
     }
     onClose?.()
-  }, [dispatch, filters, onClose, recentSearchesStore, terms])
+  }, [filters, onClose, recentSearchesStore, terms])
 
   const handleEndReached = useCallback(() => {
     dispatch({type: 'PAGE_INCREMENT'})

packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchContext.ts

@@ -1,7 +1,6 @@
 import {createContext, type Dispatch, type SetStateAction} from 'react'
 
 import {type CommandListHandle} from '../../../../../../components/commandList/types'
-import {type RecentSearchesStore} from '../../datastores/recentSearches'
 import {type SearchAction, type SearchReducerState} from './reducer'
 
 /**
@@ -10,7 +9,6 @@ import {type SearchAction, type SearchReducerState} from './reducer'
 export interface SearchContextValue {
   dispatch: Dispatch<SearchAction>
   onClose: (() => void) | null
-  recentSearchesStore?: RecentSearchesStore
   searchCommandList: CommandListHandle | null
   setSearchCommandList: Dispatch<SetStateAction<CommandListHandle | null>>
   setOnClose: (onClose: () => void) => void

packages/sanity/src/core/studio/components/navbar/search/contexts/search/SearchProvider.tsx

@@ -2,17 +2,12 @@ import isEqual from 'lodash/isEqual'
 import {type ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState} from 'react'
 
 import {type CommandListHandle} from '../../../../../../components'
-import {useClient, useSchema} from '../../../../../../hooks'
+import {useSchema} from '../../../../../../hooks'
 import {type SearchableType, type SearchTerms} from '../../../../../../search'
 import {useCurrentUser} from '../../../../../../store'
-import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../../../studioClient'
 import {useSource} from '../../../../../source'
 import {SEARCH_LIMIT} from '../../constants'
-import {
-  createRecentSearchesStore,
-  RECENT_SEARCH_VERSION,
-  type RecentSearch,
-} from '../../datastores/recentSearches'
+import {type RecentSearch} from '../../datastores/recentSearches'
 import {createFieldDefinitionDictionary, createFieldDefinitions} from '../../definitions/fields'
 import {createFilterDefinitionDictionary} from '../../definitions/filters'
 import {createOperatorDefinitionDictionary} from '../../definitions/operators'
@@ -36,15 +31,12 @@ export function SearchProvider({children, fullscreen}: SearchProviderProps) {
   const onCloseRef = useRef<(() => void) | null>(null)
   const [searchCommandList, setSearchCommandList] = useState<CommandListHandle | null>(null)
 
-  const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
   const schema = useSchema()
   const currentUser = useCurrentUser()
   const {
     search: {operators, filters},
   } = useSource()
 
-  const {dataset, projectId} = client.config()
-
   // Create field, filter and operator dictionaries
   const {fieldDefinitions, filterDefinitions, operatorDefinitions} = useMemo(() => {
     return {
@@ -54,41 +46,11 @@ export function SearchProvider({children, fullscreen}: SearchProviderProps) {
     }
   }, [filters, operators, schema])
 
-  // Create local storage store
-  const recentSearchesStore = useMemo(
-    () =>
-      createRecentSearchesStore({
-        dataset,
-        fieldDefinitions,
-        filterDefinitions,
-        operatorDefinitions,
-        projectId,
-        schema,
-        user: currentUser,
-        version: RECENT_SEARCH_VERSION,
-      }),
-    [
-      currentUser,
-      dataset,
-      fieldDefinitions,
-      filterDefinitions,
-      operatorDefinitions,
-      projectId,
-      schema,
-    ],
-  )
-
-  const recentSearches = useMemo(
-    () => recentSearchesStore?.getRecentSearches(),
-    [recentSearchesStore],
-  )
-
   const initialState = useMemo(
     () =>
       initialSearchState({
         currentUser,
         fullscreen,
-        recentSearches,
         definitions: {
           fields: fieldDefinitions,
           operators: operatorDefinitions,
@@ -99,14 +61,7 @@ export function SearchProvider({children, fullscreen}: SearchProviderProps) {
           nextCursor: null,
         },
       }),
-    [
-      currentUser,
-      fieldDefinitions,
-      filterDefinitions,
-      fullscreen,
-      operatorDefinitions,
-      recentSearches,
-    ],
+    [currentUser, fieldDefinitions, filterDefinitions, fullscreen, operatorDefinitions],
   )
   const [state, dispatch] = useReducer(searchReducer, initialState)
 
@@ -224,7 +179,6 @@ export function SearchProvider({children, fullscreen}: SearchProviderProps) {
       value={{
         dispatch,
         onClose: onCloseRef?.current,
-        recentSearchesStore,
         searchCommandList,
         setSearchCommandList,
         setOnClose: handleSetOnClose,

packages/sanity/src/core/studio/components/navbar/search/contexts/search/reducer.ts

@@ -38,7 +38,6 @@ export type SearchReducerState = PaginationState & {
   lastAddedFilter?: SearchFilter | null
   lastActiveIndex: number
   ordering: SearchOrdering
-  recentSearches: RecentSearch[]
   result: SearchResult
   terms: RecentSearch | SearchTerms
 }
@@ -60,15 +59,13 @@ export interface SearchResult {
 export interface InitialSearchState {
   currentUser: CurrentUser | null
   fullscreen?: boolean
-  recentSearches?: RecentSearch[]
   definitions: SearchDefinitions
   pagination: PaginationState
 }
 
 export function initialSearchState({
   currentUser,
   fullscreen,
-  recentSearches = [],
   definitions,
   pagination,
 }: InitialSearchState): SearchReducerState {
@@ -82,7 +79,6 @@ export function initialSearchState({
     lastActiveIndex: -1,
     ordering: ORDERINGS.relevance,
     ...pagination,
-    recentSearches,
     result: {
       error: null,
       hasLocal: false,
@@ -101,10 +97,6 @@ export function initialSearchState({
 export type FiltersVisibleSet = {type: 'FILTERS_VISIBLE_SET'; visible: boolean}
 export type LastActiveIndexSet = {type: 'LAST_ACTIVE_INDEX_SET'; index: number}
 export type PageIncrement = {type: 'PAGE_INCREMENT'}
-export type RecentSearchesSet = {
-  recentSearches: RecentSearch[]
-  type: 'RECENT_SEARCHES_SET'
-}
 export type OrderingReset = {type: 'ORDERING_RESET'}
 export type OrderingSet = {ordering: SearchOrdering; type: 'ORDERING_SET'}
 export type SearchClear = {type: 'SEARCH_CLEAR'}
@@ -140,7 +132,6 @@ export type SearchAction =
   | OrderingReset
   | OrderingSet
   | PageIncrement
-  | RecentSearchesSet
   | SearchClear
   | SearchRequestComplete
   | SearchRequestError
@@ -198,11 +189,6 @@ export function searchReducer(state: SearchReducerState, action: SearchAction):
         nextCursor: null,
         terms: stripRecent(state.terms),
       }
-    case 'RECENT_SEARCHES_SET':
-      return {
-        ...state,
-        recentSearches: action.recentSearches,
-      }
     case 'SEARCH_CLEAR':
       return {
         ...state,

packages/sanity/src/core/studio/components/navbar/search/datastores/recentSearches.test.ts

@@ -1,16 +1,28 @@
-import {type CurrentUser, type ObjectSchemaType, type Schema} from '@sanity/types'
+import {type ObjectSchemaType, type Schema} from '@sanity/types'
 import omit from 'lodash/omit'
+import {useMemo} from 'react'
 
+import {useSchema} from '../../../../../hooks'
 import {type SearchTerms} from '../../../../../search'
-import {supportsLocalStorage} from '../../../../../util/supportsLocalStorage'
-import {type SearchFieldDefinitionDictionary} from '../definitions/fields'
-import {type SearchFilterDefinitionDictionary} from '../definitions/filters'
-import {type SearchOperatorDefinitionDictionary} from '../definitions/operators'
+import {useSource} from '../../../../source'
+import {
+  createFieldDefinitionDictionary,
+  createFieldDefinitions,
+  type SearchFieldDefinitionDictionary,
+} from '../definitions/fields'
+import {
+  createFilterDefinitionDictionary,
+  type SearchFilterDefinitionDictionary,
+} from '../definitions/filters'
+import {
+  createOperatorDefinitionDictionary,
+  type SearchOperatorDefinitionDictionary,
+} from '../definitions/operators'
 import {type SearchFilter} from '../types'
 import {validateFilter} from '../utils/filterUtils'
 import {getSearchableOmnisearchTypes} from '../utils/selectors'
+import {useStoredSearch} from './useStoredSearch'
 
-const RECENT_SEARCHES_KEY = 'search::recent'
 export const MAX_RECENT_SEARCHES = 5
 /**
  * Current recent search version.
@@ -50,37 +62,28 @@ interface StoredSearchItem {
   terms: Omit<SearchTerms, 'types'> & {typeNames: string[]}
 }
 
-export function createRecentSearchesStore({
-  dataset,
-  fieldDefinitions,
-  filterDefinitions,
-  operatorDefinitions,
-  projectId,
-  schema,
-  user,
-  version = RECENT_SEARCH_VERSION,
-}: {
-  dataset?: string
-  fieldDefinitions: SearchFieldDefinitionDictionary
-  filterDefinitions: SearchFilterDefinitionDictionary
-  operatorDefinitions: SearchOperatorDefinitionDictionary
-  projectId?: string
-  schema: Schema
-  user: CurrentUser | null
-  version: number
-}): RecentSearchesStore | undefined {
-  if (!dataset || !projectId || !supportsLocalStorage || !user) {
-    return undefined
-  }
+export function useRecentSearchesStore(): RecentSearchesStore {
+  const [storedSearch, setStoredSearch] = useStoredSearch()
+  const schema = useSchema()
+  const {
+    search: {operators, filters},
+  } = useSource()
 
-  const lsKey = `${RECENT_SEARCHES_KEY}__${projectId}:${dataset}:${user.id}`
+  // Create field, filter and operator dictionaries
+  const {fieldDefinitions, filterDefinitions, operatorDefinitions} = useMemo(() => {
+    return {
+      fieldDefinitions: createFieldDefinitionDictionary(createFieldDefinitions(schema, filters)),
+      filterDefinitions: createFilterDefinitionDictionary(filters),
+      operatorDefinitions: createOperatorDefinitionDictionary(operators),
+    }
+  }, [filters, operators, schema])
 
   return {
     /**
      * Write a search term to Local Storage and return updated recent searches.
      */
-    addSearch: (searchTerm: SearchTerms, filters?: SearchFilter[]): RecentSearch[] => {
-      const storedFilters = (filters || []).map(
+    addSearch: (searchTerm: SearchTerms, searchFilters?: SearchFilter[]): RecentSearch[] => {
+      const storedFilters = (searchFilters || []).map(
         (filter): SearchFilter => ({
           fieldId: filter.fieldId,
           filterName: filter.filterName,
@@ -111,23 +114,23 @@ export function createRecentSearchesStore({
       // When comparing search items, don't compare against the created date (which will always be different).
       const comparator = JSON.stringify(omit(newSearchItem, 'created'))
       const newRecent: StoredSearch = {
-        version,
+        version: RECENT_SEARCH_VERSION,
         recentSearches: [
           newSearchItem,
-          ...getRecentStoredSearch(lsKey, version).recentSearches.filter((r) => {
+          ...storedSearch.recentSearches.filter((r) => {
             return JSON.stringify(omit(r, 'created')) !== comparator
           }),
         ].slice(0, MAX_RECENT_SEARCHES),
       }
-      window.localStorage.setItem(lsKey, JSON.stringify(newRecent))
+      setStoredSearch(newRecent)
 
       return getRecentSearchTerms({
         fieldDefinitions,
         filterDefinitions,
-        lsKey,
         operatorDefinitions,
         schema,
-        version,
+        storedSearch: newRecent,
+        setStoredSearch,
       })
     },
     /**
@@ -138,114 +141,94 @@ export function createRecentSearchesStore({
       getRecentSearchTerms({
         fieldDefinitions,
         filterDefinitions,
-        lsKey,
         operatorDefinitions,
         schema,
-        version,
+        storedSearch,
+        setStoredSearch,
       }),
     /**
      * Remove all search terms from Local Storage and return updated recent searches.
      */
     removeSearch: () => {
-      const searchTerms = getRecentStoredSearch(lsKey, version)
-
       const newRecent: StoredSearch = {
-        ...searchTerms,
+        ...storedSearch,
         recentSearches: [],
       }
 
-      window.localStorage.setItem(lsKey, JSON.stringify(newRecent))
+      setStoredSearch(newRecent)
 
       return getRecentSearchTerms({
         fieldDefinitions,
         filterDefinitions,
-        lsKey,
         operatorDefinitions,
         schema,
-        version,
+        storedSearch: newRecent,
+        setStoredSearch,
       })
     },
     /**
      * Remove a search term from Local Storage and return updated recent searches.
      */
     removeSearchAtIndex: (index: number) => {
-      const searchTerms = getRecentStoredSearch(lsKey, version)
-
-      if (index < 0 || index > searchTerms.recentSearches.length) {
+      if (index < 0 || index > storedSearch.recentSearches.length) {
         return getRecentSearchTerms({
           fieldDefinitions,
           filterDefinitions,
-          lsKey,
           operatorDefinitions,
           schema,
-          version,
+          storedSearch,
+          setStoredSearch,
         })
       }
 
       const newRecent: StoredSearch = {
-        ...searchTerms,
+        ...storedSearch,
         recentSearches: [
-          ...searchTerms.recentSearches.slice(0, index),
-          ...searchTerms.recentSearches.slice(index + 1),
+          ...storedSearch.recentSearches.slice(0, index),
+          ...storedSearch.recentSearches.slice(index + 1),
         ],
       }
 
-      window.localStorage.setItem(lsKey, JSON.stringify(newRecent))
+      setStoredSearch(newRecent)
 
       return getRecentSearchTerms({
         fieldDefinitions,
         filterDefinitions,
-        lsKey,
         operatorDefinitions,
         schema,
-        version,
+        storedSearch: newRecent,
+        setStoredSearch,
       })
     },
   }
 }
 
-/**
- * Get the 'raw' stored search terms from Local Storage.
- * Stored search terms are the minimal representation of saved terms and only include schema names.
- */
-function getRecentStoredSearch(lsKey: string, version: number): StoredSearch {
-  const recentString = supportsLocalStorage ? window.localStorage.getItem(lsKey) : undefined
-
-  return recentString ? (JSON.parse(recentString) as StoredSearch) : {version, recentSearches: []}
-}
-
 /**
  * Get a list of recent searches from Local Storage.
  * Recent searches contain full document schema types.
  */
 function getRecentSearchTerms({
-  lsKey,
   schema,
   fieldDefinitions,
   filterDefinitions,
   operatorDefinitions,
-  version,
+  storedSearch,
+  setStoredSearch,
 }: {
-  lsKey: string
   schema: Schema
   fieldDefinitions: SearchFieldDefinitionDictionary
   filterDefinitions: SearchFilterDefinitionDictionary
   operatorDefinitions: SearchOperatorDefinitionDictionary
-  version: number
+  storedSearch: StoredSearch
+  setStoredSearch: (_value: StoredSearch) => void
 }): RecentSearch[] {
-  const storedSearchTerms = verifySearchVersionNumber({
-    lsKey,
-    storedSearch: getRecentStoredSearch(lsKey, version),
-  })
-
   return sanitizeStoredSearch({
     studioSchema: schema,
-    storedSearch: storedSearchTerms,
-    lsKey,
     filterDefinitions,
     fieldDefinitions,
     operatorDefinitions,
-    version,
+    storedSearch,
+    setStoredSearch,
   })
     .recentSearches.filter((r) => !!r.terms)
     .map((r, index) => ({
@@ -261,34 +244,6 @@ function getRecentSearchTerms({
     }))
 }
 
-/**
- * Check if there's a mismatch between the _search_ version in Local Storage and
- * the current studio.
- *
- * If there's a mismatch, clear all recent searches and update the stored search version.
- *
- * This mutates Local Storage if a mismatch is found.
- */
-
-function verifySearchVersionNumber({
-  lsKey,
-  storedSearch,
-}: {
-  lsKey: string
-  storedSearch: StoredSearch
-}): StoredSearch {
-  if (storedSearch.version !== RECENT_SEARCH_VERSION) {
-    const newStoredSearch: StoredSearch = {
-      version: RECENT_SEARCH_VERSION,
-      recentSearches: [],
-    }
-    window.localStorage.setItem(lsKey, JSON.stringify(newStoredSearch))
-    return newStoredSearch
-  }
-
-  return storedSearch
-}
-
 /**
  * Sanitize stored search.
  *
@@ -302,19 +257,17 @@ function verifySearchVersionNumber({
 function sanitizeStoredSearch({
   fieldDefinitions,
   filterDefinitions,
-  lsKey,
   operatorDefinitions,
-  storedSearch,
   studioSchema,
-  version,
+  storedSearch,
+  setStoredSearch,
 }: {
   fieldDefinitions: SearchFieldDefinitionDictionary
   filterDefinitions: SearchFilterDefinitionDictionary
-  lsKey: string
   operatorDefinitions: SearchOperatorDefinitionDictionary
-  storedSearch: StoredSearch
   studioSchema: Schema
-  version: number
+  storedSearch: StoredSearch
+  setStoredSearch: (_value: StoredSearch) => void
 }): StoredSearch {
   // Obtain all 'searchable' type names – defined as a type that exists in
   // the current schema and also visible to omnisearch.
@@ -338,8 +291,8 @@ function sanitizeStoredSearch({
   }
 
   if (newStoredSearch.recentSearches.length < storedSearch.recentSearches.length) {
-    window.localStorage.setItem(lsKey, JSON.stringify(newStoredSearch))
+    setStoredSearch(newStoredSearch)
   }
 
-  return getRecentStoredSearch(lsKey, version)
+  return newStoredSearch
 }

packages/sanity/src/core/studio/components/navbar/search/datastores/recentSearches.test.tsx

@@ -0,0 +1,69 @@
+import {useCallback, useEffect, useMemo, useState} from 'react'
+import {map, startWith} from 'rxjs/operators'
+
+import {useClient} from '../../../../../hooks'
+import {useCurrentUser, useKeyValueStore} from '../../../../../store'
+import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../../../studioClient'
+
+export const RECENT_SEARCH_VERSION = 2
+const STORED_SEARCHES_NAMESPACE = 'search::recent'
+
+interface StoredSearch {
+  version: number
+  recentSearches: any[]
+}
+
+const defaultValue: StoredSearch = {
+  version: RECENT_SEARCH_VERSION,
+  recentSearches: [],
+}
+
+export function useStoredSearch(): [StoredSearch, (_value: StoredSearch) => void] {
+  const keyValueStore = useKeyValueStore()
+  const client = useClient(DEFAULT_STUDIO_CLIENT_OPTIONS)
+  const currentUser = useCurrentUser()
+  const {dataset, projectId} = client.config()
+
+  const keyValueStoreKey = useMemo(
+    () => `${STORED_SEARCHES_NAMESPACE}__${projectId}:${dataset}:${currentUser?.id}`,
+    [currentUser, dataset, projectId],
+  )
+
+  const [value, setValue] = useState<StoredSearch>(defaultValue)
+
+  const settings = useMemo(() => {
+    return keyValueStore.getKey(keyValueStoreKey)
+  }, [keyValueStore, keyValueStoreKey])
+
+  useEffect(() => {
+    const sub = settings
+      .pipe(
+        startWith(defaultValue as any),
+        map((data: StoredSearch) => {
+          // Check if the version matches RECENT_SEARCH_VERSION
+          if (data?.version !== RECENT_SEARCH_VERSION) {
+            // If not, return the default object and mutate the store (per original verifySearchVersionNumber logic)
+            keyValueStore.setKey(keyValueStoreKey, defaultValue as any)
+            return defaultValue
+          }
+          // Otherwise, return the data as is
+          return data
+        }),
+      )
+      .subscribe({
+        next: setValue,
+      })
+
+    return () => sub?.unsubscribe()
+  }, [settings, keyValueStore, keyValueStoreKey])
+
+  const set = useCallback(
+    (newValue: StoredSearch) => {
+      setValue(newValue)
+      keyValueStore.setKey(keyValueStoreKey, newValue as any)
+    },
+    [keyValueStore, keyValueStoreKey],
+  )
+
+  return useMemo(() => [value, set], [set, value])
+}

packages/sanity/src/core/studio/components/navbar/search/datastores/recentSearches.ts

@@ -3,34 +3,42 @@ import {test} from '@sanity/test'
 
 test('searching creates saved searches', async ({page, createDraftDocument, baseURL}) => {
   await createDraftDocument('/test/content/book')
+
   await page.getByTestId('field-title').getByTestId('string-input').fill('A searchable title')
   await page.getByTestId('studio-search').click()
 
-  await page.getByPlaceholder('Search', {exact: true}).fill('A search')
+  await page.getByPlaceholder('Search', {exact: true}).fill('A se')
   await page.getByTestId('search-results').isVisible()
   await page.getByTestId('search-results').click()
 
+  //search query should be saved
   const localStorage = await page.evaluate(() => window.localStorage)
   const keyMatch = Object.keys(localStorage).find((key) => key.startsWith('search::recent'))
   const savedSearches = JSON.parse(localStorage[keyMatch!]).recentSearches
-  expect(savedSearches[0].terms.query).toBe('A search')
+  expect(savedSearches[0].terms.query).toBe('A se')
 
+  //search query should be saved after browsing
   await page.goto('https://example.com')
   await page.goto(baseURL ?? '/test/content')
   const postNavigationLocalStorage = await page.evaluate(() => window.localStorage)
-
-  //also include going to other studio / project id?
   const postNavigationSearches = JSON.parse(postNavigationLocalStorage[keyMatch!]).recentSearches
-  expect(postNavigationSearches[0].terms.query).toBe('A search')
+  expect(postNavigationSearches[0].terms.query).toBe('A se')
 
+  //search should save multiple queries
   await page.getByTestId('studio-search').click()
+  await page.getByPlaceholder('Search', {exact: true}).fill('A search')
+  await page.getByTestId('search-results').isVisible()
+  await page.getByTestId('search-results').click()
 
+  //search queries should stack, most recent first
+  await page.getByTestId('studio-search').click()
   await page.getByPlaceholder('Search', {exact: true}).fill('A searchable')
   await page.getByTestId('search-results').isVisible()
   await page.getByTestId('search-results').click()
 
   const secondSearchStorage = await page.evaluate(() => window.localStorage)
-
   const secondSearches = JSON.parse(secondSearchStorage[keyMatch!]).recentSearches
   expect(secondSearches[0].terms.query).toBe('A searchable')
+  expect(secondSearches[1].terms.query).toBe('A search')
+  expect(secondSearches[2].terms.query).toBe('A se')
 })