diff --git a/web/src/lib/components/faces-page/edit-name-input.svelte b/web/src/lib/components/faces-page/edit-name-input.svelte
index f01ecd67e7453d..f650e54d452bed 100644
--- a/web/src/lib/components/faces-page/edit-name-input.svelte
+++ b/web/src/lib/components/faces-page/edit-name-input.svelte
@@ -1,29 +1,23 @@
0
? 'rounded-t-lg dark:border-immich-dark-gray'
: 'rounded-lg'} bg-gray-100 p-2 dark:bg-gray-700"
>
@@ -33,13 +27,13 @@
autocomplete="off"
on:submit|preventDefault={() => dispatch('change', name)}
>
-
dispatch('input')}
+
diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index e8287991bbd3d2..8daac796d8173d 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -1,5 +1,4 @@
- {
- people = peopleCopy;
- }}
- on:search={({ detail }) => searchPeople(detail.force ?? false)}
+ bind:searchName={name}
+ bind:searchedPeopleLocal={people}
+ onReset={() => (people = peopleCopy)}
/>
@@ -69,7 +38,7 @@
style:max-height={screenHeight - 400 + 'px'}
>
- {#each people as person (person.id)}
+ {#each showPeople as person (person.id)}
{
diff --git a/web/src/lib/components/faces-page/people-search.svelte b/web/src/lib/components/faces-page/people-search.svelte
new file mode 100644
index 00000000000000..3a9f28d5fbce99
--- /dev/null
+++ b/web/src/lib/components/faces-page/people-search.svelte
@@ -0,0 +1,100 @@
+
+
+{#if type === 'searchBar'}
+ handleSearch(detail.force ?? false)}
+ />
+{:else}
+ handleSearch(false)}
+ use:initInput
+ />
+{/if}
diff --git a/web/src/lib/components/faces-page/show-hide.svelte b/web/src/lib/components/faces-page/show-hide.svelte
index b7ab80f3f109d8..aee90bdbe7a3a5 100644
--- a/web/src/lib/components/faces-page/show-hide.svelte
+++ b/web/src/lib/components/faces-page/show-hide.svelte
@@ -2,11 +2,11 @@
import { fly } from 'svelte/transition';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { quintOut } from 'svelte/easing';
- import IconButton from '../elements/buttons/icon-button.svelte';
import { createEventDispatcher } from 'svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
import { locale } from '$lib/stores/preferences.store';
+ import Button from '$lib/components/elements/buttons/button.svelte';
const dispatch = createEventDispatcher<{
close: void;
@@ -45,7 +45,7 @@
/>
{#if !showLoadingSpinner}
-
dispatch('done')}>Done
+
{:else}
{/if}
diff --git a/web/src/lib/components/shared-components/change-date.svelte b/web/src/lib/components/shared-components/change-date.svelte
index 594b81ae0dc512..efe33113d2ae6b 100644
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/web/src/lib/components/shared-components/change-date.svelte
@@ -54,46 +54,38 @@
dispatch('confirm', { newDateValue: value, keepTimeUnchanged });
}
};
-
- const handleKeydown = (event: KeyboardEvent) => {
- if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
- event.stopPropagation();
- }
- };
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index 57b2aabb490b2b..e9a2b01307de67 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -23,7 +23,7 @@
let suggestedPlaces: PlacesResponseDto[] = [];
let searchWord: string;
let latestSearchTimeout: number;
- let showSpinner = false;
+ let showLoadingSpinner = false;
let suggestionContainer: HTMLDivElement;
let hideSuggestion = false;
let addClipMapMarker: (long: number, lat: number) => void;
@@ -74,14 +74,14 @@
if (latestSearchTimeout) {
clearTimeout(latestSearchTimeout);
}
- showSpinner = true;
+ showLoadingSpinner = true;
const searchTimeout = window.setTimeout(() => {
searchPlaces({ name: searchWord })
.then((searchResult) => {
// skip result when a newer search is happening
if (latestSearchTimeout === searchTimeout) {
places = searchResult;
- showSpinner = false;
+ showLoadingSpinner = false;
}
})
.catch((error) => {
@@ -89,7 +89,7 @@
if (latestSearchTimeout === searchTimeout) {
places = [];
handleError(error, "Can't search places");
- showSpinner = false;
+ showLoadingSpinner = false;
}
});
}, timeDebounceOnSearch);
@@ -121,7 +121,7 @@
{
suggestedPlaces = [];
}}
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index 0e8469fd2813ca..cb43021cafb770 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -14,11 +14,11 @@
import Icon from '$lib/components/elements/icon.svelte';
import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
import { createEventDispatcher, tick } from 'svelte';
- import IconButton from '../elements/buttons/icon-button.svelte';
import type { FormEventHandler } from 'svelte/elements';
import { shortcuts } from '$lib/utils/shortcut';
import { clickOutside } from '$lib/utils/click-outside';
import { focusOutside } from '$lib/utils/focus-outside';
+ import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
/**
* Unique identifier for the combobox.
@@ -199,9 +199,7 @@
class:pointer-events-none={!selectedOption}
>
{#if selectedOption}
-
-
-
+
{:else if !isOpen}
{/if}
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index a35a544d5bd106..176255ad09170d 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -45,6 +45,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
- import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
@@ -18,6 +17,7 @@
import ThemeButton from '../theme-button.svelte';
import UserAvatar from '../user-avatar.svelte';
import AccountInfoPanel from './account-info-panel.svelte';
+ import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
export let showUploadButton = true;
@@ -58,12 +58,8 @@
{#if $featureFlags.search}
-
-
-
-
-
-
+
+
{/if}
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 8b88dfdbb64a70..aa84062bb76943 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,11 +1,9 @@
{#if !$colorTheme.system}
-
- {#if $colorTheme.value === Theme.LIGHT}
-
- {:else}
-
- {/if}
-
+
{/if}
diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index e5cb25793e7746..356ea888a41bd8 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -81,6 +81,6 @@ export function navigate(change: T): Promise {
export const clearQueryParam = async (queryParam: string, url: URL) => {
if (url.searchParams.has(queryParam)) {
url.searchParams.delete(queryParam);
- await goto(url);
+ await goto(url, { keepFocus: true });
}
};
diff --git a/web/src/lib/utils/shortcut.ts b/web/src/lib/utils/shortcut.ts
index f8ca467d129e38..fca1ed7ef8f205 100644
--- a/web/src/lib/utils/shortcut.ts
+++ b/web/src/lib/utils/shortcut.ts
@@ -20,7 +20,7 @@ export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
return false;
}
const type = (event.target as HTMLInputElement).type;
- return ['textarea', 'text'].includes(type);
+ return ['textarea', 'text', 'date', 'datetime-local'].includes(type);
};
export const matchesShortcut = (event: KeyboardEvent, shortcut: Shortcut) => {
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 5fe0691b16a0b4..7369779ab3beaa 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -29,7 +29,7 @@
/>
-
+
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 2451f118c94e11..d4eb6e17420a0d 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -3,11 +3,9 @@
import { page } from '$app/stores';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
- import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import PeopleCard from '$lib/components/faces-page/people-card.svelte';
- import SearchBar from '$lib/components/elements/search-bar.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import ShowHide from '$lib/components/faces-page/show-hide.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@@ -16,16 +14,9 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
- import {
- ActionQueryParameterValue,
- AppRoute,
- maximumLengthSearchPeople,
- QueryParameter,
- timeBeforeShowLoadingSpinner,
- } from '$lib/constants';
+ import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
- import { searchNameLocal } from '$lib/utils/person';
import { shortcut } from '$lib/utils/shortcut';
import {
getPerson,
@@ -41,6 +32,8 @@
import type { PageData } from './$types';
import { locale } from '$lib/stores/preferences.store';
import { clearQueryParam } from '$lib/utils/navigation';
+ import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+ import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
export let data: PageData;
@@ -52,10 +45,7 @@
let initialHiddenValues: Record