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

fix(web): reset search suggestions after logout
This commit is contained in:
Ben 2025-04-10 16:34:45 -04:00 committed by GitHub
parent 75c83cb704
commit 92f0973a46
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 41 additions and 28 deletions

View file

@ -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:$).*$"

View file

@ -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(() => {