sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: migrate to immich/ui confirm modal (#20114)

pull/20116/head
Daniel Dietzler 2025-07-23 22:56:56 +07:00 committed by GitHub
parent bc8cb9b671
commit c1c9f30ea4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 15 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/package-lock.json generated
Unescape Escape View File

@ -11,7 +11,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.23.2",
"@immich/ui": "^0.23.5",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",
@ -1357,9 +1357,9 @@
"link": true
},
"node_modules/@immich/ui": {
"version": "0.23.3",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.23.3.tgz",
"integrity": "sha512-YbYJSv3HqDu2+6MmiHhLThSessZ6HkoVOWun/ZoGb8mKj5x/ZZ4AyXGPIqbyKTamsjzbcD9FInij70G+m4egkg==",
"version": "0.23.5",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.23.5.tgz",
"integrity": "sha512-1wlFMmfDmtGC+Kcc8cYTT00mQaSumR41KEOOOmVn5Rw/8z9pUhpNY8mGl1AxY4qhtnaz+G3dH6vowYzL23D+YQ==",
"license": "GNU Affero General Public License version 3",
"dependencies": {
"@mdi/js": "^7.4.47",

2
web/package.json
Unescape Escape View File

@ -28,7 +28,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.23.2",
"@immich/ui": "^0.23.5",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",

3
web/src/lib/components/asset-viewer/editor/editor-panel.svelte
Unescape Escape View File

@ -1,10 +1,9 @@
<script lang="ts">
import { shortcut } from '$lib/actions/shortcut';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
import { websocketEvents } from '$lib/stores/websocket';
import { type AssetResponseDto } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { ConfirmModal, IconButton } from '@immich/ui';
import { mdiClose } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';

3
web/src/lib/components/photos-page/delete-asset-dialog.svelte
Unescape Escape View File

@ -1,8 +1,7 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { showDeleteModal } from '$lib/stores/preferences.store';
import { Checkbox, Label } from '@immich/ui';
import { Checkbox, ConfirmModal, Label } from '@immich/ui';
import { mdiDeleteForeverOutline } from '@mdi/js';
import { t } from 'svelte-i18n';

4
web/src/lib/components/shared-components/change-date.spec.ts
Unescape Escape View File

@ -12,8 +12,8 @@ describe('ChangeDate component', () => {
const getDateInput = () => screen.getByLabelText('date_and_time') as HTMLInputElement;
const getTimeZoneInput = () => screen.getByLabelText('timezone') as HTMLInputElement;
const getCancelButton = () => screen.getByText('cancel');
const getConfirmButton = () => screen.getByText('confirm');
const getCancelButton = () => screen.getByText('Cancel');
const getConfirmButton = () => screen.getByText('Confirm');
beforeEach(() => {
vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());

4
web/src/lib/components/shared-components/change-date.svelte
Unescape Escape View File

@ -1,5 +1,5 @@
<script lang="ts">
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { ConfirmModal } from '@immich/ui';
import { mdiCalendarEditOutline } from '@mdi/js';
import { DateTime, Duration } from 'luxon';
import { t } from 'svelte-i18n';
@ -184,8 +184,6 @@
disabled={!date.isValid}
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
>
<!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
<!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
{#snippet promptSnippet()}
<div class="flex flex-col text-start gap-2">
<div class="flex flex-col">

2
web/src/lib/components/shared-components/change-location.svelte
Unescape Escape View File

@ -6,11 +6,11 @@
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import type Map from '$lib/components/shared-components/map/map.svelte';
import { timeDebounceOnSearch, timeToLoadTheMap } from '$lib/constants';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { lastChosenLocation } from '$lib/stores/asset-editor.store';
import { delay } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
import { ConfirmModal } from '@immich/ui';
import { mdiMapMarkerMultipleOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { get } from 'svelte/store';

2
web/src/lib/managers/modal-manager.svelte.ts
Unescape Escape View File

@ -1,4 +1,4 @@
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { ConfirmModal } from '@immich/ui';
import { mount, unmount, type Component, type ComponentProps } from 'svelte';
type OnCloseData<T> = T extends { onClose: (data?: infer R) => void }

3
web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte
Unescape Escape View File

@ -1,6 +1,5 @@
<script lang="ts">
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { Input } from '@immich/ui';
import { ConfirmModal, Input } from '@immich/ui';
import { mdiText } from '@mdi/js';
import { t } from 'svelte-i18n';

52
web/src/lib/modals/ConfirmModal.svelte
Unescape Escape View File

@ -1,52 +0,0 @@
<script lang="ts">
import { Button, HStack, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
interface Props {
title?: string;
prompt?: string;
confirmText?: string;
confirmColor?: Color;
disabled?: boolean;
size?: 'small' | 'medium';
icon?: string;
onClose: (confirmed: boolean) => void;
promptSnippet?: Snippet;
}
let {
title = $t('confirm'),
prompt = $t('are_you_sure_to_do_this'),
confirmText = $t('confirm'),
confirmColor = 'danger',
disabled = false,
size = 'small',
icon = undefined,
onClose,
promptSnippet,
}: Props = $props();
const handleConfirm = () => {
onClose(true);
};
</script>
<Modal {title} {icon} onClose={() => onClose(false)} {size}>
<ModalBody>
{#if promptSnippet}{@render promptSnippet()}{:else}
<p>{prompt}</p>
{/if}
</ModalBody>
<ModalFooter>
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
{$t('cancel')}
</Button>
<Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
{confirmText}
</Button>
</HStack>
</ModalFooter>
</Modal>

2
web/src/lib/modals/JobCreateModal.svelte
Unescape Escape View File

@ -4,9 +4,9 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { createJob, ManualJobName } from '@immich/sdk';
import { ConfirmModal } from '@immich/ui';
import { t } from 'svelte-i18n';
type Props = { onClose: (confirmed: boolean) => void };

3
web/src/lib/modals/UserDeleteConfirmModal.svelte
Unescape Escape View File

@ -1,10 +1,9 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
import { serverConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
import { Checkbox, Label } from '@immich/ui';
import { Checkbox, ConfirmModal, Label } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {