diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index 40424749e0..70350a35b7 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/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 [];
}
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index 767b0e608d..2dc358bad3 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/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());
- $savedSearchTerms = [saveValue, ...filteredSearchTerms];
+ const filteredSearchTerms = searchStore.savedSearchTerms.filter(
+ (item) => item.toLowerCase() !== saveValue.toLowerCase(),
+ );
+ searchStore.savedSearchTerms = [saveValue, ...filteredSearchTerms];
- if ($savedSearchTerms.length > 5) {
- $savedSearchTerms = $savedSearchTerms.slice(0, 5);
+ if (searchStore.savedSearchTerms.length > 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) {
- $preventRaceConditionSearchBar = true;
+ if (searchStore.isSearchEnabled) {
+ 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:$).*$"
diff --git a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte b/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
index 92a2f8847e..a6188e46a9 100644
--- a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
+++ b/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(() => {
diff --git a/web/src/lib/stores/search.store.ts b/web/src/lib/stores/search.store.ts
deleted file mode 100644
index f8716ed58b..0000000000
--- a/web/src/lib/stores/search.store.ts
+++ /dev/null
@@ -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);
diff --git a/web/src/lib/stores/search.svelte.ts b/web/src/lib/stores/search.svelte.ts
new file mode 100644
index 0000000000..816c5c56e1
--- /dev/null
+++ b/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();
diff --git a/web/src/lib/utils/auth.ts b/web/src/lib/utils/auth.ts
index 4299bfacae..22b92dd988 100644
--- a/web/src/lib/utils/auth.ts
+++ b/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();
}
};
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index c750f02aed..dad0cbb290 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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(() => {