fix(web): reset search history after logout (#17534)

fix(web): reset search suggestions after logout

web/src/lib/components/photos-page/asset-grid.svelte

@@ -6,7 +6,7 @@
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetBucket, assetsSnapshot, AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { isSearchEnabled } from '$lib/stores/search.store';
+  import { searchStore } from '$lib/stores/search.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets, updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
@@ -425,7 +425,7 @@
   };
 
   const onKeyDown = (event: KeyboardEvent) => {
-    if ($isSearchEnabled) {
+    if (searchStore.isSearchEnabled) {
       return;
     }
 
@@ -436,7 +436,7 @@
   };
 
   const onKeyUp = (event: KeyboardEvent) => {
-    if ($isSearchEnabled) {
+    if (searchStore.isSearchEnabled) {
       return;
     }
 
@@ -625,7 +625,7 @@
 
   let shortcutList = $derived(
     (() => {
-      if ($isSearchEnabled || $showAssetViewer) {
+      if (searchStore.isSearchEnabled || $showAssetViewer) {
         return [];
       }
 

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { AppRoute } from '$lib/constants';
   import { goto } from '$app/navigation';
-  import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
+  import { searchStore } from '$lib/stores/search.svelte';
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
   import SearchHistoryBox from './search-history-box.svelte';
   import SearchFilterModal from './search-filter-modal.svelte';
@@ -40,41 +40,43 @@
 
     closeDropdown();
     showFilter = false;
-    $isSearchEnabled = false;
+    searchStore.isSearchEnabled = false;
     await goto(`${AppRoute.SEARCH}?${params}`);
   };
 
   const clearSearchTerm = (searchTerm: string) => {
     input?.focus();
-    $savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchTerm);
+    searchStore.savedSearchTerms = searchStore.savedSearchTerms.filter((item) => item !== searchTerm);
   };
 
   const saveSearchTerm = (saveValue: string) => {
-    const filteredSearchTerms = $savedSearchTerms.filter((item) => item.toLowerCase() !== saveValue.toLowerCase());
+    const filteredSearchTerms = searchStore.savedSearchTerms.filter(
-    $savedSearchTerms = [saveValue, ...filteredSearchTerms];
+      (item) => item.toLowerCase() !== saveValue.toLowerCase(),
+    );
+    searchStore.savedSearchTerms = [saveValue, ...filteredSearchTerms];
 
-    if ($savedSearchTerms.length > 5) {
+    if (searchStore.savedSearchTerms.length > 5) {
-      $savedSearchTerms = $savedSearchTerms.slice(0, 5);
+      searchStore.savedSearchTerms = searchStore.savedSearchTerms.slice(0, 5);
     }
   };
 
   const clearAllSearchTerms = () => {
     input?.focus();
-    $savedSearchTerms = [];
+    searchStore.savedSearchTerms = [];
   };
 
   const onFocusIn = () => {
-    $isSearchEnabled = true;
+    searchStore.isSearchEnabled = true;
   };
 
   const onFocusOut = () => {
     const focusOutTimer = setTimeout(() => {
-      if ($isSearchEnabled) {
+      if (searchStore.isSearchEnabled) {
-        $preventRaceConditionSearchBar = true;
+        searchStore.preventRaceConditionSearchBar = true;
       }
 
       closeDropdown();
-      $isSearchEnabled = false;
+      searchStore.isSearchEnabled = false;
       showFilter = false;
     }, 100);
 
@@ -225,7 +227,9 @@
         class="w-full transition-all border-2 px-14 py-4 max-md:py-2 text-immich-fg/75 dark:text-immich-dark-fg
         {grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'}
         {showSuggestions && isSearchSuggestions ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'}
-        {$isSearchEnabled && !showFilter ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}"
+        {searchStore.isSearchEnabled && !showFilter
+          ? 'border-gray-200 dark:border-gray-700 bg-white'
+          : 'border-transparent'}"
         placeholder={$t('search_your_photos')}
         required
         pattern="^(?!m:$).*$"

web/src/lib/components/shared-components/search-bar/search-history-box.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import { savedSearchTerms } from '$lib/stores/search.store';
+  import { searchStore } from '$lib/stores/search.svelte';
   import { mdiMagnify, mdiClose } from '@mdi/js';
   import { fly } from 'svelte/transition';
   import { t } from 'svelte-i18n';
@@ -29,7 +29,7 @@
   }: Props = $props();
 
   let filteredSearchTerms = $derived(
-    $savedSearchTerms.filter((term) => term.toLowerCase().includes(searchQuery.toLowerCase())),
+    searchStore.savedSearchTerms.filter((term) => term.toLowerCase().includes(searchQuery.toLowerCase())),
   );
 
   $effect(() => {

web/src/lib/stores/search.store.ts

@@ -1,6 +0,0 @@
-import { persisted } from 'svelte-persisted-store';
-import { writable } from 'svelte/store';
-
-export const savedSearchTerms = persisted<string[]>('search-terms', [], {});
-export const isSearchEnabled = writable<boolean>(false);
-export const preventRaceConditionSearchBar = writable<boolean>(false);

web/src/lib/stores/search.svelte.ts

@@ -0,0 +1,13 @@
+class SearchStore {
+  savedSearchTerms = $state<string[]>([]);
+  isSearchEnabled = $state(false);
+  preventRaceConditionSearchBar = $state(false);
+
+  clearCache() {
+    this.savedSearchTerms = [];
+    this.isSearchEnabled = false;
+    this.preventRaceConditionSearchBar = false;
+  }
+}
+
+export const searchStore = new SearchStore();

web/src/lib/utils/auth.ts

@@ -3,6 +3,7 @@ import { goto } from '$app/navigation';
 import { foldersStore } from '$lib/stores/folders.svelte';
 import { memoryStore } from '$lib/stores/memory.store.svelte';
 import { purchaseStore } from '$lib/stores/purchase.store';
+import { searchStore } from '$lib/stores/search.svelte';
 import { preferences as preferences$, resetSavedUser, user as user$ } from '$lib/stores/user.store';
 import { resetUserInteraction, userInteraction } from '$lib/stores/user.svelte';
 import { getAboutInfo, getMyPreferences, getMyUser, getStorage } from '@immich/sdk';
@@ -103,5 +104,6 @@ export const handleLogout = async (redirectUri: string) => {
     resetUserInteraction();
     foldersStore.clearCache();
     memoryStore.clearCache();
+    searchStore.clearCache();
   }
 };

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -19,7 +19,7 @@
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
+  import { searchStore } from '$lib/stores/search.svelte';
   import { shortcut } from '$lib/actions/shortcut';
   import {
     type AlbumResponseDto,
@@ -88,10 +88,10 @@
       assetInteraction.selectedAssets = [];
       return;
     }
-    if (!$preventRaceConditionSearchBar) {
+    if (!searchStore.preventRaceConditionSearchBar) {
       handlePromiseError(goto(previousRoute));
     }
-    $preventRaceConditionSearchBar = false;
+    searchStore.preventRaceConditionSearchBar = false;
   };
 
   $effect(() => {