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

feat: toasts (#23298)

pull/23331/head
Jason Rasmussen 2025-10-28 15:09:11 -04:00 committed by GitHub
parent 106effca2e
commit 52596255c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
80 changed files with 341 additions and 1069 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/src/web/specs/asset-viewer/navbar.e2e-spec.ts
View File

@ -59,7 +59,7 @@ test.describe('Asset Viewer Navbar', () => {
await page.goto(`/photos/${asset.id}`);
await page.waitForSelector('#immich-asset-viewer');
await page.keyboard.press('f');
await expect(page.locator('#notification-list').getByTestId('message')).toHaveText('Added to favorites');
await expect(page.getByText('Added to favorites')).toBeVisible();
});
});
});

2
e2e/src/web/specs/asset-viewer/slideshow.e2e-spec.ts
View File

@ -51,6 +51,6 @@ test.describe('Slideshow', () => {
await expect(page.getByRole('button', { name: 'Exit Slideshow' })).toBeVisible();
await page.keyboard.press('f');
await expect(page.locator('#notification-list')).not.toBeVisible();
await expect(page.getByText('Added to favorites')).not.toBeVisible();
});
});

2
i18n/en.json
View File

@ -906,7 +906,6 @@
"edit_tag": "Edit tag",
"edit_title": "Edit Title",
"edit_user": "Edit user",
"edited": "Edited",
"editor": "Editor",
"editor_close_without_save_prompt": "The changes will not be saved",
"editor_close_without_save_title": "Close editor?",
@ -1717,6 +1716,7 @@
"running": "Running",
"save": "Save",
"save_to_gallery": "Save to gallery",
"saved": "Saved",
"saved_api_key": "Saved API Key",
"saved_profile": "Saved profile",
"saved_settings": "Saved settings",

10
pnpm-lock.yaml
View File

@ -684,8 +684,8 @@ importers:
specifier: file:../open-api/typescript-sdk
version: link:../open-api/typescript-sdk
'@immich/ui':
specifier: ^0.37.1
version: 0.37.1(@internationalized/date@3.8.2)(svelte@5.40.1)
specifier: ^0.39.1
version: 0.39.1(@internationalized/date@3.8.2)(svelte@5.40.1)
'@mapbox/mapbox-gl-rtl-text':
specifier: 0.2.3
version: 0.2.3(mapbox-gl@1.13.3)
@ -2732,8 +2732,8 @@ packages:
'@immich/justified-layout-wasm@0.4.3':
resolution: {integrity: sha512-fpcQ7zPhP3Cp1bEXhONVYSUeIANa2uzaQFGKufUZQo5FO7aFT77szTVChhlCy4XaVy5R4ZvgSkA/1TJmeORz7Q==}
'@immich/ui@0.37.1':
resolution: {integrity: sha512-8S9KsyqyRcNgRHeBU8G3qMQ7D7fN4u9I31jjRc9c3s2tkiYucASofPJdcFdmGZnKLX5fIj+yofxiNZV9tVitOg==}
'@immich/ui@0.39.1':
resolution: {integrity: sha512-sal9VyFcmLRHE+NJh122dnmjfwlPOeZCi3yIsDzuI5xNMEUtNJ8MlXRE7hgrKU3FOLmy2QLhcI+oEJchCT+Ibg==}
peerDependencies:
svelte: ^5.0.0
@ -14190,7 +14190,7 @@ snapshots:
'@immich/justified-layout-wasm@0.4.3': {}
'@immich/ui@0.37.1(@internationalized/date@3.8.2)(svelte@5.40.1)':
'@immich/ui@0.39.1(@internationalized/date@3.8.2)(svelte@5.40.1)':
dependencies:
'@mdi/js': 7.4.47
bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.40.1)

2
web/package.json
View File

@ -28,7 +28,7 @@
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/justified-layout-wasm": "^0.4.3",
"@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.37.1",
"@immich/ui": "^0.39.1",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",

33
web/src/lib/components/ToastAction.svelte Normal file
View File

@ -0,0 +1,33 @@
<script lang="ts">
import { Button, ToastContainer, ToastContent, type Color, type IconLike } from '@immich/ui';
type Props = {
onClose?: () => void;
color?: Color;
title: string;
icon?: IconLike | false;
description: string;
button?: {
text: string;
color?: Color;
onClick: () => void;
};
};
const { onClose, title, description, color, icon, button }: Props = $props();
const onClick = () => {
button?.onClick();
onClose?.();
};
</script>
<ToastContainer {color}>
<ToastContent {color} {title} {description} {onClose} {icon}>
{#if button}
<div class="flex justify-end gap-2 px-2 pb-2">
<Button color={button.color ?? 'secondary'} size="small" onclick={onClick}>{button.text}</Button>
</div>
{/if}
</ToastContent>
</ToastContainer>

21
web/src/lib/components/admin-settings/AdminSettings.svelte
View File

@ -1,15 +1,12 @@
<script lang="ts">
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { retrieveServerConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
import { retrieveServerConfig } from '$lib/stores/server-config.store';
import { toastManager } from '@immich/ui';
import { cloneDeep, isEqual } from 'lodash-es';
import { onMount } from 'svelte';
import type { SettingsResetOptions } from './admin-settings';
import { t } from 'svelte-i18n';
import type { SettingsResetOptions } from './admin-settings';
interface Props {
config: SystemConfigDto;
@ -41,7 +38,7 @@
config = cloneDeep(newConfig);
savedConfig = cloneDeep(newConfig);
notificationController.show({ message: $t('settings_saved'), type: NotificationType.Info });
toastManager.success($t('settings_saved'));
await retrieveServerConfig();
} catch (error) {
@ -56,10 +53,7 @@
config = { ...config, [key]: resetConfig[key] };
}
notificationController.show({
message: $t('admin.reset_settings_to_recent_saved'),
type: NotificationType.Info,
});
toastManager.info($t('admin.reset_settings_to_recent_saved'));
};
const resetToDefault = (configKeys: Array<keyof SystemConfigDto>) => {
@ -71,10 +65,7 @@
config = { ...config, [key]: defaultConfig[key] };
}
notificationController.show({
message: $t('admin.reset_settings_to_default'),
type: NotificationType.Info,
});
toastManager.info($t('admin.reset_settings_to_default'));
};
onMount(async () => {

8
web/src/lib/components/admin-settings/AuthSettings.svelte
View File

@ -1,8 +1,4 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
@ -13,7 +9,7 @@
import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { OAuthTokenEndpointAuthMethod, unlinkAllOAuthAccountsAdmin, type SystemConfigDto } from '@immich/sdk';
import { Button, modalManager, Text } from '@immich/ui';
import { Button, modalManager, Text, toastManager } from '@immich/ui';
import { mdiRestart } from '@mdi/js';
import { isEqual } from 'lodash-es';
import { t } from 'svelte-i18n';
@ -65,7 +61,7 @@
try {
await unlinkAllOAuthAccountsAdmin({});
notificationController.show({ message: $t('success'), type: NotificationType.Info });
toastManager.success({});
} catch (error) {
handleError(error, $t('errors.something_went_wrong'));
}

11
web/src/lib/components/admin-settings/NotificationSettings.svelte
View File

@ -1,9 +1,5 @@
<script lang="ts">
import TemplateSettings from '$lib/components/admin-settings/TemplateSettings.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
@ -12,7 +8,7 @@
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { sendTestEmailAdmin, type SystemConfigDto } from '@immich/sdk';
import { Button, LoadingSpinner } from '@immich/ui';
import { Button, LoadingSpinner, toastManager } from '@immich/ui';
import { isEqual } from 'lodash-es';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
@ -55,10 +51,7 @@
},
});
notificationController.show({
type: NotificationType.Info,
message: $t('admin.notification_email_test_email_sent', { values: { email: $user.email } }),
});
toastManager.success($t('admin.notification_email_test_email_sent', { values: { email: $user.email } }));
if (!disabled) {
onSave({ notifications: config.notifications });

32
web/src/lib/components/album-page/albums-list.svelte
View File

@ -5,10 +5,7 @@
import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import ToastAction from '$lib/components/ToastAction.svelte';
import { AppRoute } from '$lib/constants';
import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
@ -38,7 +35,7 @@
import { handleError } from '$lib/utils/handle-error';
import { normalizeSearchString } from '$lib/utils/string-utils';
import { addUsersToAlbum, deleteAlbum, isHttpError, type AlbumResponseDto, type AlbumUserAddDto } from '@immich/sdk';
import { modalManager } from '@immich/ui';
import { modalManager, toastManager } from '@immich/ui';
import { mdiDeleteOutline, mdiDownload, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
import { groupBy } from 'lodash-es';
import { onMount, type Snippet } from 'svelte';
@ -280,11 +277,8 @@
try {
await handleDeleteAlbum(albumToDelete);
} catch {
notificationController.show({
message: $t('errors.unable_to_delete_album'),
type: NotificationType.Error,
});
} catch (error) {
handleError(error, $t('errors.unable_to_delete_album'));
} finally {
albumToDelete = null;
}
@ -310,13 +304,17 @@
};
const successEditAlbumInfo = (album: AlbumResponseDto) => {
notificationController.show({
message: $t('album_info_updated'),
type: NotificationType.Info,
button: {
text: $t('view_album'),
onClick() {
return goto(resolve(`${AppRoute.ALBUMS}/${album.id}`));
toastManager.custom({
component: ToastAction,
props: {
color: 'primary',
title: $t('success'),
description: $t('album_info_updated'),
button: {
text: $t('view_album'),
onClick() {
return goto(resolve(`${AppRoute.ALBUMS}/${album.id}`));
},
},
},
});

18
web/src/lib/components/asset-viewer/actions/delete-action.svelte
View File

@ -1,10 +1,6 @@
<script lang="ts">
import { shortcuts } from '$lib/actions/shortcut';
import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AssetAction } from '$lib/constants';
import Portal from '$lib/elements/Portal.svelte';
import { showDeleteModal } from '$lib/stores/preferences.store';
@ -12,7 +8,7 @@
import { handleError } from '$lib/utils/handle-error';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { IconButton, toastManager } from '@immich/ui';
import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { OnAction, PreAction } from './action';
@ -46,11 +42,7 @@
preAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });
await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
onAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });
notificationController.show({
message: $t('moved_to_trash'),
type: NotificationType.Info,
});
toastManager.success($t('moved_to_trash'));
} catch (error) {
handleError(error, $t('errors.unable_to_trash_asset'));
}
@ -61,11 +53,7 @@
preAction({ type: AssetAction.DELETE, asset: toTimelineAsset(asset) });
await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
onAction({ type: AssetAction.DELETE, asset: toTimelineAsset(asset) });
notificationController.show({
message: $t('permanently_deleted_asset'),
type: NotificationType.Info,
});
toastManager.success($t('permanently_deleted_asset'));
} catch (error) {
handleError(error, $t('errors.unable_to_delete_asset'));
} finally {

11
web/src/lib/components/asset-viewer/actions/favorite-action.svelte
View File

@ -1,17 +1,13 @@
<script lang="ts">
import { shortcut } from '$lib/actions/shortcut';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AssetAction } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
import { IconButton, toastManager } from '@immich/ui';
import { mdiHeart, mdiHeartOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { OnAction } from './action';
import { IconButton } from '@immich/ui';
interface Props {
asset: AssetResponseDto;
@ -36,10 +32,7 @@
asset: toTimelineAsset(asset),
});
notificationController.show({
type: NotificationType.Info,
message: asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
});
toastManager.success(asset.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'));
} catch (error) {
handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: asset.isFavorite } }));
}

12
web/src/lib/components/asset-viewer/actions/restore-action.svelte
View File

@ -1,13 +1,10 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { AssetAction } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { mdiHistory } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { OnAction } from './action';
@ -23,13 +20,8 @@
try {
await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
asset.isTrashed = false;
onAction({ type: AssetAction.RESTORE, asset: toTimelineAsset(asset) });
notificationController.show({
type: NotificationType.Info,
message: $t('restored_asset'),
});
toastManager.success($t('restored_asset'));
} catch (error) {
handleError(error, $t('errors.unable_to_restore_assets'));
}

11
web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte
View File

@ -1,11 +1,8 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { mdiImageOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -24,11 +21,7 @@
albumThumbnailAssetId: asset.id,
},
});
notificationController.show({
type: NotificationType.Info,
message: $t('album_cover_updated'),
timeout: 1500,
});
toastManager.success($t('album_cover_updated'));
} catch (error) {
handleError(error, $t('errors.unable_to_update_album_cover'));
}

7
web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte
View File

@ -1,12 +1,9 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { AssetAction } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { updatePerson, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { mdiFaceManProfile } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { OnAction } from './action';
@ -34,7 +31,7 @@
person,
});
notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
toastManager.success($t('feature_photo_updated'));
} catch (error) {
handleError(error, $t('errors.unable_to_set_feature_photo'));
}

8
web/src/lib/components/asset-viewer/activity-viewer.svelte
View File

@ -12,11 +12,10 @@
import { handleError } from '$lib/utils/handle-error';
import { isTenMinutesApart } from '$lib/utils/timesince';
import { ReactionType, type ActivityResponseDto, type AssetTypeEnum, type UserResponseDto } from '@immich/sdk';
import { Icon, IconButton, LoadingSpinner } from '@immich/ui';
import { Icon, IconButton, LoadingSpinner, toastManager } from '@immich/ui';
import { mdiClose, mdiDeleteOutline, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
import * as luxon from 'luxon';
import { t } from 'svelte-i18n';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import UserAvatar from '../shared-components/user-avatar.svelte';
const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
@ -75,10 +74,7 @@
[ReactionType.Comment]: $t('comment_deleted'),
[ReactionType.Like]: $t('like_deleted'),
};
notificationController.show({
message: deleteMessages[reaction.type],
type: NotificationType.Info,
});
toastManager.success(deleteMessages[reaction.type]);
} catch (error) {
handleError(error, $t('errors.unable_to_remove_reaction'));
}

4
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -31,11 +31,11 @@
type PersonResponseDto,
type StackResponseDto,
} from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { onDestroy, onMount, untrack } from 'svelte';
import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import ActivityStatus from './activity-status.svelte';
import ActivityViewer from './activity-viewer.svelte';
import DetailPanel from './detail-panel.svelte';
@ -275,7 +275,7 @@
const handleRunJob = async (name: AssetJobName) => {
try {
await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
notificationController.show({ type: NotificationType.Info, message: $getAssetJobMessage(name) });
toastManager.success($getAssetJobMessage(name));
} catch (error) {
handleError(error, $t('errors.unable_to_submit_job'));
}

12
web/src/lib/components/asset-viewer/detail-panel-description.svelte
View File

@ -1,11 +1,8 @@
<script lang="ts">
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
import { handleError } from '$lib/utils/handle-error';
import { updateAsset, type AssetResponseDto } from '@immich/sdk';
import AutogrowTextarea from '$lib/components/shared-components/autogrow-textarea.svelte';
import { toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
@ -23,10 +20,7 @@
asset.exifInfo = { ...asset.exifInfo, description: newDescription };
notificationController.show({
type: NotificationType.Info,
message: $t('asset_description_updated'),
});
toastManager.success($t('asset_description_updated'));
} catch (error) {
handleError(error, $t('cannot_update_the_description'));
}

7
web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
View File

@ -1,12 +1,11 @@
<script lang="ts">
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import { notificationController } from '$lib/components/shared-components/notification/notification';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
import { Button, Input, modalManager } from '@immich/ui';
import { Button, Input, modalManager, toastManager } from '@immich/ui';
import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -278,9 +277,7 @@
try {
const data = getFaceCroppedCoordinates();
if (!data) {
notificationController.show({
message: $t('error_tag_face_bounding_box'),
});
toastManager.warning($t('error_tag_face_bounding_box'));
return;
}

5
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@ -20,12 +20,11 @@
import { getAltText } from '$lib/utils/thumbnail-util';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
import { LoadingSpinner } from '@immich/ui';
import { LoadingSpinner, toastManager } from '@immich/ui';
import { onDestroy, onMount } from 'svelte';
import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
interface Props {
asset: AssetResponseDto;
@ -98,7 +97,7 @@
try {
await copyImageToClipboard($photoViewerImgElement);
notificationController.show({ type: NotificationType.Info, message: $t('copied_image_to_clipboard') });
toastManager.info($t('copied_image_to_clipboard'));
} catch (error) {
handleError(error, $t('copy_error'));
}

9
web/src/lib/components/faces-page/manage-people-visibility.spec.ts
View File

@ -45,7 +45,8 @@ describe('ManagePeopleVisibility Component', () => {
expect(sdkMock.updatePeople).not.toHaveBeenCalled();
});
it('hides unnamed people on first button press', () => {
// svelte animations require a real browser
it.skip('hides unnamed people on first button press', () => {
const { getByText, getByTitle } = render(ManagePeopleVisibility, {
props: {
people: [personVisible, personHidden, personWithoutName],
@ -65,7 +66,8 @@ describe('ManagePeopleVisibility Component', () => {
});
});
it('hides all people on second button press', async () => {
// svelte animations require a real browser
it.skip('hides all people on second button press', async () => {
const { getByText, getByTitle } = render(ManagePeopleVisibility, {
props: {
people: [personVisible, personHidden, personWithoutName],
@ -90,7 +92,8 @@ describe('ManagePeopleVisibility Component', () => {
});
});
it('shows all people on third button press', async () => {
// svelte animations require a real browser
it.skip('shows all people on third button press', async () => {
const { getByText, getByTitle } = render(ManagePeopleVisibility, {
props: {
people: [personVisible, personHidden, personWithoutName],

16
web/src/lib/components/faces-page/manage-people-visibility.svelte
View File

@ -2,16 +2,12 @@
import { shortcut } from '$lib/actions/shortcut';
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { ToggleVisibility } from '$lib/constants';
import { locale } from '$lib/stores/preferences.store';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { updatePeople, type PersonResponseDto } from '@immich/sdk';
import { Button, IconButton } from '@immich/ui';
import { Button, IconButton, toastManager } from '@immich/ui';
import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -74,15 +70,9 @@
const successCount = results.filter(({ success }) => success).length;
const failCount = results.length - successCount;
if (failCount > 0) {
notificationController.show({
type: NotificationType.Error,
message: $t('errors.unable_to_change_visibility', { values: { count: failCount } }),
});
toastManager.warning($t('errors.unable_to_change_visibility', { values: { count: failCount } }));
}
notificationController.show({
type: NotificationType.Info,
message: $t('visibility_changed', { values: { count: successCount } }),
});
toastManager.success($t('visibility_changed', { values: { count: successCount } }));
}
for (const person of people) {

13
web/src/lib/components/faces-page/merge-face-selector.svelte
View File

@ -4,7 +4,7 @@
import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { getAllPeople, getPerson, mergePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, Icon, IconButton, modalManager } from '@immich/ui';
import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -12,7 +12,6 @@
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import FaceThumbnail from './face-thumbnail.svelte';
import PeopleList from './people-list.svelte';
@ -51,10 +50,7 @@
}
if (selectedPeople.length >= 5) {
notificationController.show({
message: $t('merge_people_limit'),
type: NotificationType.Info,
});
toastManager.warning($t('merge_people_limit'));
return;
}
@ -78,10 +74,7 @@
});
const mergedPerson = await getPerson({ id: person.id });
const count = results.filter(({ success }) => success).length;
notificationController.show({
message: $t('merged_people_count', { values: { count } }),
type: NotificationType.Info,
});
toastManager.success($t('merged_people_count', { values: { count } }));
onMerge(mergedPerson);
} catch (error) {
handleError(error, $t('cannot_merge_people'));

8
web/src/lib/components/faces-page/person-side-panel.svelte
View File

@ -17,14 +17,13 @@
type AssetFaceResponseDto,
type PersonResponseDto,
} from '@immich/sdk';
import { Icon, IconButton, LoadingSpinner, modalManager } from '@immich/ui';
import { Icon, IconButton, LoadingSpinner, modalManager, toastManager } from '@immich/ui';
import { mdiAccountOff, mdiArrowLeftThin, mdiPencil, mdiRestart, mdiTrashCan } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { linear } from 'svelte/easing';
import { fly } from 'svelte/transition';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import AssignFaceSidePanel from './assign-face-side-panel.svelte';
interface Props {
@ -127,10 +126,7 @@
}
}
notificationController.show({
message: $t('people_edits_count', { values: { count: numberOfChanges } }),
type: NotificationType.Info,
});
toastManager.success($t('people_edits_count', { values: { count: numberOfChanges } }));
} catch (error) {
handleError(error, $t('errors.cant_apply_changes'));
}

16
web/src/lib/components/faces-page/unmerge-face-selector.svelte
View File

@ -8,14 +8,13 @@
type AssetFaceUpdateItem,
type PersonResponseDto,
} from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, toastManager } from '@immich/ui';
import { mdiMerge, mdiPlus } from '@mdi/js';
import { onMount, type Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import FaceThumbnail from './face-thumbnail.svelte';
import PeopleList from './people-list.svelte';
@ -72,11 +71,7 @@
disableButtons = true;
const data = await createPerson({ personCreateDto: {} });
await reassignFaces({ id: data.id, assetFaceUpdateDto: { data: selectedPeople } });
notificationController.show({
message: $t('reassigned_assets_to_new_person', { values: { count: assetIds.length } }),
type: NotificationType.Info,
});
toastManager.success($t('reassigned_assets_to_new_person', { values: { count: assetIds.length } }));
} catch (error) {
handleError(error, $t('errors.unable_to_reassign_assets_new_person'));
} finally {
@ -93,12 +88,11 @@
disableButtons = true;
if (selectedPerson) {
await reassignFaces({ id: selectedPerson.id, assetFaceUpdateDto: { data: selectedPeople } });
notificationController.show({
message: $t('reassigned_assets_to_existing_person', {
toastManager.success(
$t('reassigned_assets_to_existing_person', {
values: { count: assetIds.length, name: selectedPerson.name || null },
}),
type: NotificationType.Info,
});
);
}
} catch (error) {
handleError(

15
web/src/lib/components/forms/library-import-paths-form.svelte
View File

@ -1,13 +1,12 @@
<script lang="ts">
import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
import { validate, type LibraryResponseDto } from '@immich/sdk';
import { Button, Icon, IconButton, modalManager } from '@immich/ui';
import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { handleError } from '../../utils/handle-error';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
interface Props {
library: LibraryResponseDto;
@ -50,16 +49,10 @@
}
if (failedPaths === 0) {
if (notifyIfSuccessful) {
notificationController.show({
message: $t('admin.paths_validated_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('admin.paths_validated_successfully'));
}
} else {
notificationController.show({
message: $t('errors.paths_validation_failed', { values: { paths: failedPaths } }),
type: NotificationType.Warning,
});
toastManager.warning($t('errors.paths_validation_failed', { values: { paths: failedPaths } }));
}
};

2
web/src/lib/components/forms/library-scan-settings-form.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts">
import LibraryExclusionPatternModal from '$lib/modals/LibraryExclusionPatternModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { type LibraryResponseDto } from '@immich/sdk';
import { Button, IconButton, modalManager } from '@immich/ui';
import { mdiPencilOutline } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { handleError } from '../../utils/handle-error';
interface Props {
library: Partial<LibraryResponseDto>;

11
web/src/lib/components/jobs/JobsPanel.svelte
View File

@ -1,13 +1,9 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { featureFlags } from '$lib/stores/server-config.store';
import { getJobName } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { JobCommand, JobName, sendJobCommand, type AllJobStatusResponseDto, type JobCommandDto } from '@immich/sdk';
import { modalManager } from '@immich/ui';
import { modalManager, toastManager } from '@immich/ui';
import {
mdiContentDuplicate,
mdiFaceRecognition,
@ -164,10 +160,7 @@
switch (jobCommand.command) {
case JobCommand.Empty: {
notificationController.show({
message: $t('admin.cleared_jobs', { values: { job: title } }),
type: NotificationType.Info,
});
toastManager.success($t('admin.cleared_jobs', { values: { job: title } }));
break;
}
}

13
web/src/lib/components/memory-page/memory-viewer.svelte
View File

@ -10,10 +10,6 @@
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@ -37,7 +33,7 @@
import { cancelMultiselect } from '$lib/utils/asset-utils';
import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
import { AssetMediaSize, getAssetInfo } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { IconButton, toastManager } from '@immich/ui';
import {
mdiCardsOutline,
mdiChevronDown,
@ -205,7 +201,7 @@
}
await memoryStore.deleteMemory(current.memory.id);
notificationController.show({ message: $t('removed_memory'), type: NotificationType.Info });
toastManager.success($t('removed_memory'));
init(page);
};
@ -216,10 +212,7 @@
const newSavedState = !current.memory.isSaved;
await memoryStore.updateMemorySaved(current.memory.id, newSavedState);
notificationController.show({
message: newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'),
type: NotificationType.Info,
});
toastManager.success(newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'));
init(page);
};

8
web/src/lib/components/share-page/individual-shared-viewer.svelte
View File

@ -16,12 +16,11 @@
import { handleError } from '$lib/utils/handle-error';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import { addSharedLinkAssets, getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { IconButton, toastManager } from '@immich/ui';
import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
import { t } from 'svelte-i18n';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
interface Props {
sharedLink: SharedLinkResponseDto;
@ -62,10 +61,7 @@
const added = data.filter((item) => item.success).length;
notificationController.show({
message: $t('assets_added_count', { values: { count: added } }),
type: NotificationType.Info,
});
toastManager.success($t('assets_added_count', { values: { count: added } }));
} catch (error) {
handleError(error, $t('errors.unable_to_add_assets_to_shared_link'));
}

9
web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
View File

@ -2,15 +2,10 @@
import { goto } from '$app/navigation';
import { focusTrap } from '$lib/actions/focus-trap';
import NotificationItem from '$lib/components/shared-components/navigation-bar/notification-item.svelte';
import {
notificationController,
NotificationType as WebNotificationType,
} from '$lib/components/shared-components/notification/notification';
import { notificationManager } from '$lib/stores/notification-manager.svelte';
import { handleError } from '$lib/utils/handle-error';
import { NotificationType, type NotificationDto } from '@immich/sdk';
import { Button, Icon, Scrollable, Stack, Text } from '@immich/ui';
import { Button, Icon, Scrollable, Stack, Text, toastManager } from '@immich/ui';
import { mdiBellOutline, mdiCheckAll } from '@mdi/js';
import { t } from 'svelte-i18n';
import { flip } from 'svelte/animate';
@ -29,7 +24,7 @@
const markAllAsRead = async () => {
try {
await notificationManager.markAllAsRead();
notificationController.show({ message: $t('marked_all_as_read'), type: WebNotificationType.Info });
toastManager.info($t('marked_all_as_read'));
} catch (error) {
handleError(error, $t('errors.failed_to_update_notification_status'));
}

86
web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
View File

@ -1,86 +0,0 @@
import NotificationComponentTest from '$lib/components/shared-components/notification/__tests__/notification-component-test.svelte';
import '@testing-library/jest-dom';
import { cleanup, render, type RenderResult } from '@testing-library/svelte';
import { NotificationType } from '../notification';
import NotificationCard from '../notification-card.svelte';
describe('NotificationCard component', () => {
let sut: RenderResult<typeof NotificationCard>;
it('disposes timeout if already removed from the DOM', () => {
vi.spyOn(globalThis, 'clearTimeout');
sut = render(NotificationCard, {
notification: {
id: 1234,
message: 'Notification message',
timeout: 1000,
type: NotificationType.Info,
action: { type: 'discard' },
},
});
cleanup();
expect(globalThis.clearTimeout).toHaveBeenCalledTimes(1);
});
it('shows message and title', () => {
sut = render(NotificationCard, {
notification: {
id: 1234,
message: 'Notification message',
timeout: 1000,
type: NotificationType.Info,
action: { type: 'discard' },
},
});
expect(sut.getByTestId('title')).toHaveTextContent('info');
expect(sut.getByTestId('message')).toHaveTextContent('Notification message');
});
it('makes all buttons non-focusable and hidden from screen readers', () => {
sut = render(NotificationCard, {
notification: {
id: 1234,
message: 'Notification message',
timeout: 1000,
type: NotificationType.Info,
action: { type: 'discard' },
button: {
text: 'button',
onClick: vi.fn(),
},
},
});
const buttons = sut.container.querySelectorAll('button');
expect(buttons).toHaveLength(2);
for (const button of buttons) {
expect(button.getAttribute('tabindex')).toBe('-1');
expect(button.getAttribute('aria-hidden')).toBe('true');
}
});
it('shows title and renders component', () => {
sut = render(NotificationCard, {
notification: {
id: 1234,
type: NotificationType.Info,
timeout: 1,
action: { type: 'discard' },
component: {
type: NotificationComponentTest,
props: {
href: 'link',
},
},
},
});
expect(sut.getByTestId('title')).toHaveTextContent('info');
expect(sut.getByTestId('message').innerHTML.replaceAll('<!---->', '')).toEqual(
'Notification <b>message</b> with <a href="link">link</a>',
);
});
});

9
web/src/lib/components/shared-components/notification/__tests__/notification-component-test.svelte
View File

@ -1,9 +0,0 @@
<script lang="ts">
interface Props {
href: string;
}
let { href }: Props = $props();
</script>
Notification <b>message</b> with <a {href}>link</a>

41
web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts
View File

@ -1,41 +0,0 @@
import { getAnimateMock } from '$lib/__mocks__/animate.mock';
import '@testing-library/jest-dom';
import { render, waitFor, type RenderResult } from '@testing-library/svelte';
import { get } from 'svelte/store';
import { NotificationType, notificationController } from '../notification';
import NotificationList from '../notification-list.svelte';
function _getNotificationListElement(): HTMLAnchorElement | null {
return document.body.querySelector('#notification-list');
}
describe('NotificationList component', () => {
beforeAll(() => {
Element.prototype.animate = getAnimateMock();
});
afterAll(() => {
vi.unstubAllGlobals();
});
it('shows a notification when added and closes it automatically after the delay timeout', async () => {
const sut: RenderResult<NotificationList> = render(NotificationList, { intro: false });
const status = await sut.findAllByRole('status');
expect(status).toHaveLength(1);
expect(_getNotificationListElement()).not.toBeInTheDocument();
notificationController.show({
message: 'Notification',
type: NotificationType.Info,
timeout: 1,
});
await waitFor(() => expect(_getNotificationListElement()).toBeInTheDocument());
await waitFor(() => expect(_getNotificationListElement()?.children).toHaveLength(1));
expect(get(notificationController.notificationList)).toHaveLength(1);
await waitFor(() => expect(_getNotificationListElement()).not.toBeInTheDocument());
expect(get(notificationController.notificationList)).toHaveLength(0);
});
});

125
web/src/lib/components/shared-components/notification/notification-card.svelte
View File

@ -1,125 +0,0 @@
<script lang="ts">
import {
isComponentNotification,
notificationController,
NotificationType,
type ComponentNotification,
type Notification,
} from '$lib/components/shared-components/notification/notification';
import { Button, Icon, IconButton, type Color } from '@immich/ui';
import { mdiCloseCircleOutline, mdiInformationOutline, mdiWindowClose } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
interface Props {
notification: Notification | ComponentNotification;
}
let { notification }: Props = $props();
let icon = $derived(notification.type === NotificationType.Error ? mdiCloseCircleOutline : mdiInformationOutline);
let hoverStyle = $derived(notification.action.type === 'discard' ? 'hover:cursor-pointer' : '');
const backgroundColor: Record<NotificationType, string> = {
[NotificationType.Info]: '#E0E2F0',
[NotificationType.Error]: '#FBE8E6',
[NotificationType.Warning]: '#FFF6DC',
};
const borderColor: Record<NotificationType, string> = {
[NotificationType.Info]: '#D8DDFF',
[NotificationType.Error]: '#F0E8E7',
[NotificationType.Warning]: '#FFE6A5',
};
const primaryColor: Record<NotificationType, string> = {
[NotificationType.Info]: '#4250AF',
[NotificationType.Error]: '#E64132',
[NotificationType.Warning]: '#D08613',
};
const colors: Record<NotificationType, Color> = {
[NotificationType.Info]: 'primary',
[NotificationType.Error]: 'danger',
[NotificationType.Warning]: 'warning',
};
onMount(() => {
const timeoutId = setTimeout(discard, notification.timeout);
return () => clearTimeout(timeoutId);
});
const discard = () => {
notificationController.removeNotificationById(notification.id);
};
const handleClick = () => {
if (notification.action.type === 'discard') {
discard();
}
};
const handleButtonClick = () => {
const button = notification.button;
if (button) {
discard();
return notification.button?.onClick();
}
};
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
transition:fade={{ duration: 250 }}
style:background-color={backgroundColor[notification.type]}
style:border-color={borderColor[notification.type]}
class="border mb-4 min-h-[80px] w-[300px] rounded-2xl p-4 shadow-md {hoverStyle}"
onclick={handleClick}
onkeydown={handleClick}
>
<div class="flex justify-between">
<div class="flex place-items-center gap-2">
<Icon {icon} color={primaryColor[notification.type]} size="20" />
<h2 style:color={primaryColor[notification.type]} class="font-medium" data-testid="title">
{#if notification.type == NotificationType.Error}{$t('error')}
{:else if notification.type == NotificationType.Warning}{$t('warning')}
{:else if notification.type == NotificationType.Info}{$t('info')}{/if}
</h2>
</div>
<IconButton
variant="ghost"
shape="round"
color="secondary"
icon={mdiWindowClose}
aria-label={$t('close')}
class="dark:text-immich-dark-gray"
size="medium"
onclick={discard}
aria-hidden={true}
tabindex={-1}
/>
</div>
<p class="whitespace-pre-wrap ps-[28px] pe-[16px] text-sm text-black/80" data-testid="message">
{#if isComponentNotification(notification)}
<notification.component.type {...notification.component.props} />
{:else}
{notification.message}
{/if}
</p>
{#if notification.button}
<p class="ps-[28px] mt-2.5 light text-light">
<Button
size="small"
color={colors[notification.type]}
onclick={handleButtonClick}
aria-hidden="true"
tabindex={-1}
>
{notification.button.text}
</Button>
</p>
{/if}
</div>

25
web/src/lib/components/shared-components/notification/notification-list.svelte
View File

@ -1,25 +0,0 @@
<script lang="ts">
import Portal from '$lib/elements/Portal.svelte';
import { t } from 'svelte-i18n';
import { flip } from 'svelte/animate';
import { quintOut } from 'svelte/easing';
import { fade } from 'svelte/transition';
import { notificationController } from './notification';
import NotificationCard from './notification-card.svelte';
const { notificationList } = notificationController;
</script>
<Portal>
<div role="status" aria-relevant="additions" aria-label={$t('notifications')}>
{#if $notificationList.length > 0}
<section transition:fade={{ duration: 250 }} id="notification-list" class="fixed end-5 top-[80px]">
{#each $notificationList as notification (notification.id)}
<div animate:flip={{ duration: 250, easing: quintOut }}>
<NotificationCard {notification} />
</div>
{/each}
</section>
{/if}
</div>
</Portal>

87
web/src/lib/components/shared-components/notification/notification.ts
View File

@ -1,87 +0,0 @@
import type { Component as ComponentType } from 'svelte';
import { writable } from 'svelte/store';
export enum NotificationType {
Info = 'Info',
Error = 'Error',
Warning = 'Warning',
}
export type NotificationButton = {
text: string;
onClick: () => unknown;
};
export type Notification = {
id: number;
type: NotificationType;
message: string;
/** The action to take when the notification is clicked */
action: NotificationAction;
button?: NotificationButton;
/** Timeout in milliseconds */
timeout: number;
};
type DiscardAction = { type: 'discard' };
type NoopAction = { type: 'noop' };
export type NotificationAction = DiscardAction | NoopAction;
type Props = Record<string, unknown>;
type Component<T extends Props> = {
type: ComponentType<T>;
props: T;
};
type BaseNotificationOptions<T, R extends keyof T> = Partial<Omit<T, 'id'>> & Pick<T, R>;
export type NotificationOptions = BaseNotificationOptions<Notification, 'message'>;
export type ComponentNotificationOptions<T extends Props> = BaseNotificationOptions<
ComponentNotification<T>,
'component'
>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type ComponentNotification<T extends Props = any> = Omit<Notification, 'message'> & {
component: Component<T>;
};
export const isComponentNotification = <T extends Props>(
notification: Notification | ComponentNotification<T>,
): notification is ComponentNotification<T> => {
return 'component' in notification;
};
function createNotificationList() {
const notificationList = writable<(Notification | ComponentNotification)[]>([]);
let count = 1;
const show = <T>(options: T extends Props ? ComponentNotificationOptions<T> : NotificationOptions) => {
notificationList.update((currentList) => {
currentList.push({
id: count++,
type: NotificationType.Info,
action: {
type: options.button ? 'noop' : 'discard',
},
timeout: 3000,
...options,
});
return currentList;
});
};
const removeNotificationById = (id: number) => {
notificationList.update((currentList) => currentList.filter((n) => n.id !== id));
};
return {
show,
removeNotificationById,
notificationList,
};
}
export const notificationController = createNotificationList();

18
web/src/lib/components/shared-components/upload-panel.svelte
View File

@ -2,12 +2,11 @@
import { locale } from '$lib/stores/preferences.store';
import { uploadAssetsStore } from '$lib/stores/upload';
import { uploadExecutionQueue } from '$lib/utils/file-uploader';
import { Icon, IconButton } from '@immich/ui';
import { Icon, IconButton, toastManager } from '@immich/ui';
import { mdiCancel, mdiCloudUploadOutline, mdiCog, mdiWindowMinimize } from '@mdi/js';
import { t } from 'svelte-i18n';
import { quartInOut } from 'svelte/easing';
import { fade, scale } from 'svelte/transition';
import { notificationController, NotificationType } from './notification/notification';
import UploadAssetPreview from './upload-asset-preview.svelte';
let showDetail = $state(false);
@ -29,21 +28,12 @@
out:fade={{ duration: 250 }}
onoutroend={() => {
if ($stats.errors > 0) {
notificationController.show({
message: $t('upload_errors', { values: { count: $stats.errors } }),
type: NotificationType.Warning,
});
toastManager.danger($t('upload_errors', { values: { count: $stats.errors } }));
} else if ($stats.success > 0) {
notificationController.show({
message: $t('upload_success'),
type: NotificationType.Info,
});
toastManager.success($t('upload_success'));
}
if ($stats.duplicates > 0) {
notificationController.show({
message: $t('upload_skipped_duplicates', { values: { count: $stats.duplicates } }),
type: NotificationType.Warning,
});
toastManager.warning($t('upload_skipped_duplicates', { values: { count: $stats.duplicates } }));
}
uploadAssetsStore.reset();
}}

7
web/src/lib/components/timeline/actions/AssetJobActions.svelte
View File

@ -1,13 +1,10 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { AssetJobName, runAssetJobs } from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
@ -25,7 +22,7 @@
try {
const ids = [...getOwnedAssets()].map(({ id }) => id);
await runAssetJobs({ assetJobsDto: { assetIds: ids, name } });
notificationController.show({ message: $getAssetJobMessage(name), type: NotificationType.Info });
toastManager.success($getAssetJobMessage(name));
clearSelect();
} catch (error) {
handleError(error, $t('errors.unable_to_submit_job'));

13
web/src/lib/components/timeline/actions/FavoriteAction.svelte
View File

@ -1,14 +1,10 @@
<script lang="ts">
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
import type { OnFavorite } from '$lib/utils/actions';
import { handleError } from '$lib/utils/handle-error';
import { updateAssets } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { IconButton, toastManager } from '@immich/ui';
import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -46,12 +42,11 @@
onFavorite?.(ids, isFavorite);
notificationController.show({
message: isFavorite
toastManager.success(
isFavorite
? $t('added_to_favorites_count', { values: { count: ids.length } })
: $t('removed_from_favorites_count', { values: { count: ids.length } }),
type: NotificationType.Info,
});
);
clearSelect();
} catch (error) {

18
web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
View File

@ -1,11 +1,8 @@
<script lang="ts">
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
import { handleError } from '$lib/utils/handle-error';
import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
import { IconButton, modalManager } from '@immich/ui';
import { IconButton, modalManager, toastManager } from '@immich/ui';
import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
@ -41,18 +38,11 @@
onRemove?.(ids);
const count = results.filter(({ success }) => success).length;
notificationController.show({
type: NotificationType.Info,
message: $t('assets_removed_count', { values: { count } }),
});
toastManager.success($t('assets_removed_count', { values: { count } }));
clearSelect();
} catch (error) {
console.error('Error [album-viewer] [removeAssetFromAlbum]', error);
notificationController.show({
type: NotificationType.Error,
message: $t('errors.error_removing_assets_from_album'),
});
handleError(error, $t('errors.error_removing_assets_from_album'));
}
};
</script>

10
web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte
View File

@ -3,10 +3,9 @@
import { authManager } from '$lib/managers/auth-manager.svelte';
import { handleError } from '$lib/utils/handle-error';
import { removeSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
import { IconButton, modalManager } from '@immich/ui';
import { IconButton, modalManager, toastManager } from '@immich/ui';
import { mdiDeleteOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { NotificationType, notificationController } from '../../shared-components/notification/notification';
interface Props {
sharedLink: SharedLinkResponseDto;
@ -45,12 +44,7 @@
}
const count = results.filter((item) => item.success).length;
notificationController.show({
type: NotificationType.Info,
message: $t('assets_removed_count', { values: { count } }),
});
toastManager.success($t('assets_removed_count', { values: { count } }));
clearSelect();
} catch (error) {
handleError(error, $t('errors.unable_to_remove_assets_from_shared_link'));

13
web/src/lib/components/timeline/actions/RestoreAction.svelte
View File

@ -1,13 +1,9 @@
<script lang="ts">
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
import type { OnRestore } from '$lib/utils/actions';
import { handleError } from '$lib/utils/handle-error';
import { restoreAssets } from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, toastManager } from '@immich/ui';
import { mdiHistory } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -28,12 +24,7 @@
const ids = [...getAssets()].map((a) => a.id);
await restoreAssets({ bulkIdsDto: { ids } });
onRestore?.(ids);
notificationController.show({
message: $t('assets_restored_count', { values: { count: ids.length } }),
type: NotificationType.Info,
});
toastManager.success($t('assets_restored_count', { values: { count: ids.length } }));
clearSelect();
} catch (error) {
handleError(error, $t('errors.unable_to_restore_assets'));

13
web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
View File

@ -1,12 +1,8 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
import { handleError } from '$lib/utils/handle-error';
import { changePinCode } from '@immich/sdk';
import { Button, Heading, Text } from '@immich/ui';
import { Button, Heading, Text, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
@ -31,13 +27,8 @@
isLoading = true;
try {
await changePinCode({ pinCodeChangeDto: { pinCode: currentPinCode, newPinCode } });
resetForm();
notificationController.show({
message: $t('pin_code_changed_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('pin_code_changed_successfully'));
} catch (error) {
handleError(error, $t('unable_to_change_pin_code'));
} finally {

13
web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
View File

@ -1,12 +1,8 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
import { handleError } from '$lib/utils/handle-error';
import { setupPinCode } from '@immich/sdk';
import { Button, Heading } from '@immich/ui';
import { Button, Heading, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
@ -30,12 +26,7 @@
isLoading = true;
try {
await setupPinCode({ pinCodeSetupDto: { pinCode: newPinCode } });
notificationController.show({
message: $t('pin_code_setup_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('pin_code_setup_successfully'));
onCreated?.(newPinCode);
resetForm();
} catch (error) {

18
web/src/lib/components/user-settings-page/change-password-settings.svelte
View File

@ -1,14 +1,10 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { changePassword } from '@immich/sdk';
import { Button } from '@immich/ui';
import type { HttpError } from '@sveltejs/kit';
import { Button, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
@ -21,20 +17,14 @@
try {
await changePassword({ changePasswordDto: { password, newPassword, invalidateSessions } });
notificationController.show({
message: $t('updated_password'),
type: NotificationType.Info,
});
toastManager.success($t('updated_password'));
password = '';
newPassword = '';
confirmPassword = '';
} catch (error) {
console.error('Error [user-profile] [changePassword]', error);
notificationController.show({
message: (error as HttpError)?.body?.message || $t('errors.unable_to_change_password'),
type: NotificationType.Error,
});
handleError(error, $t('errors.unable_to_change_password'));
}
};

12
web/src/lib/components/user-settings-page/device-list.svelte
View File

@ -1,9 +1,8 @@
<script lang="ts">
import { handleError } from '$lib/utils/handle-error';
import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
import { Button, modalManager } from '@immich/ui';
import { Button, modalManager, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { handleError } from '../../utils/handle-error';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
import DeviceCard from './device-card.svelte';
interface Props {
@ -25,7 +24,7 @@
try {
await deleteSession({ id: device.id });
notificationController.show({ message: $t('logged_out_device'), type: NotificationType.Info });
toastManager.success($t('logged_out_device'));
} catch (error) {
handleError(error, $t('errors.unable_to_log_out_device'));
} finally {
@ -41,10 +40,7 @@
try {
await deleteAllSessions();
notificationController.show({
message: $t('logged_out_all_devices'),
type: NotificationType.Info,
});
toastManager.success($t('logged_out_all_devices'));
} catch (error) {
handleError(error, $t('errors.unable_to_log_out_all_devices'));
} finally {

10
web/src/lib/components/user-settings-page/download-settings.svelte
View File

@ -1,18 +1,14 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { preferences } from '$lib/stores/user.store';
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
import { handleError } from '$lib/utils/handle-error';
import { updateMyPreferences } from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
let archiveSize = $state(convertFromBytes($preferences?.download?.archiveSize || 4, ByteUnit.GiB));
let includeEmbeddedVideos = $state($preferences?.download?.includeEmbeddedVideos || false);
@ -29,7 +25,7 @@
});
$preferences = newPreferences;
notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
toastManager.success($t('saved_settings'));
} catch (error) {
handleError(error, $t('errors.unable_to_update_settings'));
}

10
web/src/lib/components/user-settings-page/feature-settings.svelte
View File

@ -1,17 +1,13 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { AssetOrder, updateMyPreferences } from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
// Albums
let defaultAssetOrder = $state($preferences?.albums?.defaultAssetOrder ?? AssetOrder.Desc);
@ -58,7 +54,7 @@
$preferences = { ...data };
notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
toastManager.success($t('saved_settings'));
} catch (error) {
handleError(error, $t('errors.unable_to_update_settings'));
}

15
web/src/lib/components/user-settings-page/notifications-settings.svelte
View File

@ -1,16 +1,11 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { updateMyPreferences } from '@immich/sdk';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { updateMyPreferences } from '@immich/sdk';
import { Button, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { Button } from '@immich/ui';
import { fade } from 'svelte/transition';
let emailNotificationsEnabled = $state($preferences?.emailNotifications?.enabled ?? true);
let albumInviteNotificationEnabled = $state($preferences?.emailNotifications?.albumInvite ?? true);
@ -32,7 +27,7 @@
$preferences.emailNotifications.albumInvite = data.emailNotifications.albumInvite;
$preferences.emailNotifications.albumUpdate = data.emailNotifications.albumUpdate;
notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
toastManager.success($t('saved_settings'));
} catch (error) {
handleError(error, $t('errors.unable_to_update_settings'));
}

17
web/src/lib/components/user-settings-page/oauth-settings.svelte
View File

@ -2,13 +2,12 @@
import { goto } from '$app/navigation';
import { featureFlags } from '$lib/stores/server-config.store';
import { oauth } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { type UserAdminResponseDto } from '@immich/sdk';
import { Button, LoadingSpinner } from '@immich/ui';
import { Button, LoadingSpinner, toastManager } from '@immich/ui';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
interface Props {
user: UserAdminResponseDto;
@ -22,13 +21,8 @@
if (oauth.isCallback(globalThis.location)) {
try {
loading = true;
user = await oauth.link(globalThis.location);
notificationController.show({
message: $t('linked_oauth_account'),
type: NotificationType.Info,
});
toastManager.success($t('linked_oauth_account'));
} catch (error) {
handleError(error, $t('errors.unable_to_link_oauth_account'));
} finally {
@ -42,10 +36,7 @@
const handleUnlink = async () => {
try {
user = await oauth.unlink();
notificationController.show({
message: $t('unlinked_oauth_account'),
type: NotificationType.Info,
});
toastManager.success($t('unlinked_oauth_account'));
} catch (error) {
handleError(error, $t('errors.unable_to_unlink_account'));
}

2
web/src/lib/components/user-settings-page/partner-settings.svelte
View File

@ -2,6 +2,7 @@
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import PartnerSelectionModal from '$lib/modals/PartnerSelectionModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import {
createPartner,
getPartners,
@ -15,7 +16,6 @@
import { mdiCheck, mdiClose } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { handleError } from '../../utils/handle-error';
interface PartnerSharing {
user: UserResponseDto;

15
web/src/lib/components/user-settings-page/user-api-key-list.svelte
View File

@ -3,13 +3,12 @@
import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
import { locale } from '$lib/stores/preferences.store';
import { handleError } from '$lib/utils/handle-error';
import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
import { Button, IconButton, modalManager } from '@immich/ui';
import { Button, IconButton, modalManager, toastManager } from '@immich/ui';
import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import { notificationController, NotificationType } from '../shared-components/notification/notification';
interface Props {
keys: ApiKeyResponseDto[];
@ -61,10 +60,7 @@
try {
await updateApiKey({ id: key.id, apiKeyUpdateDto: { name: result.name, permissions: result.permissions } });
notificationController.show({
message: $t('saved_api_key'),
type: NotificationType.Info,
});
toastManager.success($t('saved_api_key'));
} catch (error) {
handleError(error, $t('errors.unable_to_save_api_key'));
} finally {
@ -80,10 +76,7 @@
try {
await deleteApiKey({ id: key.id });
notificationController.show({
message: $t('removed_api_key', { values: { name: key.name } }),
type: NotificationType.Info,
});
toastManager.success($t('removed_api_key', { values: { name: key.name } }));
} catch (error) {
handleError(error, $t('errors.unable_to_remove_api_key'));
} finally {

13
web/src/lib/components/user-settings-page/user-profile-settings.svelte
View File

@ -1,18 +1,14 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { SettingInputFieldType } from '$lib/constants';
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { updateMyUser } from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, toastManager } from '@immich/ui';
import { cloneDeep } from 'lodash-es';
import { t } from 'svelte-i18n';
import { createBubbler, preventDefault } from 'svelte/legacy';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
let editedUser = $state(cloneDeep($user));
const bubble = createBubbler();
@ -29,10 +25,7 @@
Object.assign(editedUser, data);
$user = data;
notificationController.show({
message: $t('saved_profile'),
type: NotificationType.Info,
});
toastManager.success($t('saved_profile'));
} catch (error) {
handleError(error, $t('errors.unable_to_save_profile'));
}

15
web/src/lib/modals/AlbumOptionsModal.svelte
View File

@ -14,11 +14,10 @@
type AlbumResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { Icon, Modal, ModalBody, modalManager } from '@immich/ui';
import { Icon, Modal, ModalBody, modalManager, toastManager } from '@immich/ui';
import { mdiArrowDownThin, mdiArrowUpThin, mdiDotsVertical, mdiPlus } from '@mdi/js';
import { findKey } from 'lodash-es';
import { t } from 'svelte-i18n';
import { notificationController, NotificationType } from '../components/shared-components/notification/notification';
import SettingDropdown from '../components/shared-components/settings/setting-dropdown.svelte';
interface Props {
@ -68,10 +67,7 @@
},
});
notificationController.show({
type: NotificationType.Info,
message: $t('activity_changed', { values: { enabled: album.isActivityEnabled } }),
});
toastManager.success($t('activity_changed', { values: { enabled: album.isActivityEnabled } }));
} catch (error) {
handleError(error, $t('errors.cant_change_activity', { values: { enabled: album.isActivityEnabled } }));
}
@ -91,10 +87,7 @@
try {
await removeUserFromAlbum({ id: album.id, userId: user.id });
onClose({ action: 'refreshAlbum' });
notificationController.show({
type: NotificationType.Info,
message: $t('album_user_removed', { values: { user: user.name } }),
});
toastManager.success($t('album_user_removed', { values: { user: user.name } }));
} catch (error) {
handleError(error, $t('errors.unable_to_remove_album_users'));
}
@ -107,7 +100,7 @@
values: { user: user.name, role: role == AlbumUserRole.Viewer ? $t('role_viewer') : $t('role_editor') },
});
onClose({ action: 'refreshAlbum' });
notificationController.show({ type: NotificationType.Info, message });
toastManager.success(message);
} catch (error) {
handleError(error, $t('errors.unable_to_change_album_user_role'));
}

17
web/src/lib/modals/AlbumUsersModal.svelte
View File

@ -1,10 +1,6 @@
<script lang="ts">
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { handleError } from '$lib/utils/handle-error';
import {
@ -15,7 +11,7 @@
type AlbumResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { Button, Modal, ModalBody, Text, modalManager } from '@immich/ui';
import { Button, Modal, ModalBody, Text, modalManager, toastManager } from '@immich/ui';
import { mdiDotsVertical } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -80,21 +76,20 @@
userId === 'me'
? $t('album_user_left', { values: { album: album.albumName } })
: $t('album_user_removed', { values: { user: user.name } });
notificationController.show({ type: NotificationType.Info, message });
toastManager.success(message);
onClose(true);
} catch (error) {
handleError(error, $t('errors.unable_to_remove_album_users'));
}
};
const handleSetReadonly = async (user: UserResponseDto, role: AlbumUserRole) => {
const handleChangeRole = async (user: UserResponseDto, role: AlbumUserRole) => {
try {
await updateAlbumUser({ id: album.id, userId: user.id, updateAlbumUserDto: { role } });
const message = $t('user_role_set', {
values: { user: user.name, role: role == AlbumUserRole.Viewer ? $t('role_viewer') : $t('role_editor') },
});
notificationController.show({ type: NotificationType.Info, message });
toastManager.success(message);
onClose(true);
} catch (error) {
handleError(error, $t('errors.unable_to_change_album_user_role'));
@ -131,10 +126,10 @@
{#if isOwned}
<ButtonContextMenu icon={mdiDotsVertical} size="medium" title={$t('options')}>
{#if role === AlbumUserRole.Viewer}
<MenuOption onClick={() => handleSetReadonly(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
<MenuOption onClick={() => handleChangeRole(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
{:else}
<MenuOption
onClick={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
onClick={() => handleChangeRole(user, AlbumUserRole.Viewer)}
text={$t('disallow_edits')}
/>
{/if}

30
web/src/lib/modals/ApiKeyModal.svelte
View File

@ -1,11 +1,19 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
import { Permission } from '@immich/sdk';
import { Button, Checkbox, Field, HStack, IconButton, Input, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
import {
Button,
Checkbox,
Field,
HStack,
IconButton,
Input,
Label,
Modal,
ModalBody,
ModalFooter,
toastManager,
} from '@immich/ui';
import { mdiClose, mdiKeyVariant } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -60,16 +68,10 @@
};
const handleSubmit = () => {
if (!apiKey.name) {
notificationController.show({
message: $t('api_key_empty'),
type: NotificationType.Warning,
});
if (!name) {
toastManager.warning($t('api_key_empty'));
} else if (selectedItems.length === 0) {
notificationController.show({
message: $t('permission_empty'),
type: NotificationType.Warning,
});
toastManager.warning($t('permission_empty'));
} else {
if (selectAllItems) {
onClose({ name, permissions: [Permission.All] });

8
web/src/lib/modals/AvatarEditModal.svelte
View File

@ -1,13 +1,9 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
import { Modal, ModalBody } from '@immich/ui';
import { Modal, ModalBody, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
@ -24,7 +20,7 @@
await deleteProfileImage();
}
notificationController.show({ message: $t('saved_profile'), type: NotificationType.Info });
toastManager.success($t('saved_profile'));
$user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
onClose();

8
web/src/lib/modals/JobCreateModal.svelte
View File

@ -1,12 +1,8 @@
<script lang="ts">
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { createJob, ManualJobName } from '@immich/sdk';
import { ConfirmModal } from '@immich/ui';
import { ConfirmModal, toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
type Props = { onClose: (confirmed: boolean) => void };
@ -36,7 +32,7 @@
try {
await createJob({ jobCreateDto: { name: selectedJob.value as ManualJobName } });
notificationController.show({ message: $t('admin.job_created'), type: NotificationType.Info });
toastManager.success($t('admin.job_created'));
onClose(true);
} catch (error) {
handleError(error, $t('errors.unable_to_submit_job'));

8
web/src/lib/modals/PersonEditBirthDateModal.svelte
View File

@ -1,12 +1,8 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import DateInput from '$lib/elements/DateInput.svelte';
import { handleError } from '$lib/utils/handle-error';
import { updatePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import { mdiCake } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -27,7 +23,7 @@
personUpdateDto: { birthDate },
});
notificationController.show({ message: $t('date_of_birth_saved'), type: NotificationType.Info });
toastManager.success($t('date_of_birth_saved'));
onClose(updatedPerson);
} catch (error) {
handleError(error, $t('errors.unable_to_save_date_of_birth'));

12
web/src/lib/modals/PersonMergeSuggestionModal.svelte
View File

@ -1,12 +1,8 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { mergePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, HStack, Icon, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Icon, IconButton, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import { mdiArrowLeft, mdiCallMerge, mdiSwapHorizontal } from '@mdi/js';
import { onMount, tick } from 'svelte';
import { t } from 'svelte-i18n';
@ -42,11 +38,7 @@
id: personToBeMergedInto.id,
mergePersonDto: { ids: [personToMerge.id] },
});
notificationController.show({
message: $t('merge_people_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('merge_people_successfully'));
onClose([personToMerge, personToBeMergedInto]);
} catch (error) {
handleError(error, $t('errors.unable_to_save_name'));

7
web/src/lib/modals/PinCodeResetModal.svelte
View File

@ -1,8 +1,4 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { featureFlags } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import { resetPinCode } from '@immich/sdk';
@ -17,6 +13,7 @@
PasswordInput,
Stack,
Text,
toastManager,
} from '@immich/ui';
import { mdiLockReset } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -33,7 +30,7 @@
const handleReset = async () => {
try {
await resetPinCode({ pinCodeResetDto: { password } });
notificationController.show({ message: $t('pin_code_reset_successfully'), type: NotificationType.Info });
toastManager.success($t('pin_code_reset_successfully'));
onClose(true);
} catch (error) {
handleError(error, $t('errors.failed_to_reset_pin_code'));

15
web/src/lib/modals/ProfileImageCropperModal.svelte
View File

@ -2,12 +2,11 @@
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import domtoimage from 'dom-to-image';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import PhotoViewer from '../components/asset-viewer/photo-viewer.svelte';
import { NotificationType, notificationController } from '../components/shared-components/notification/notification';
interface Props {
asset: AssetResponseDto;
@ -65,20 +64,12 @@
});
if (await hasTransparentPixels(blob)) {
notificationController.show({
type: NotificationType.Error,
message: $t('errors.profile_picture_transparent_pixels'),
timeout: 3000,
});
toastManager.danger($t('errors.profile_picture_transparent_pixels'));
return;
}
const file = new File([blob], 'profile-picture.png', { type: 'image/png' });
const { profileImagePath, profileChangedAt } = await createProfileImage({ createProfileImageDto: { file } });
notificationController.show({
type: NotificationType.Info,
message: $t('profile_picture_set'),
timeout: 3000,
});
toastManager.success($t('profile_picture_set'));
$user.profileImagePath = profileImagePath;
$user.profileChangedAt = profileChangedAt;
} catch (error) {

19
web/src/lib/modals/SharedLinkCreateModal.svelte
View File

@ -3,11 +3,21 @@
import { locale } from '$lib/stores/preferences.store';
import { handleError } from '$lib/utils/handle-error';
import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
import { Button, Field, Input, Modal, ModalBody, ModalFooter, PasswordInput, Switch, Text } from '@immich/ui';
import {
Button,
Field,
Input,
Modal,
ModalBody,
ModalFooter,
PasswordInput,
Switch,
Text,
toastManager,
} from '@immich/ui';
import { mdiLink } from '@mdi/js';
import { DateTime, Duration } from 'luxon';
import { t } from 'svelte-i18n';
import { NotificationType, notificationController } from '../components/shared-components/notification/notification';
interface Props {
onClose: (sharedLink?: SharedLinkResponseDto) => void;
@ -116,10 +126,7 @@
},
});
notificationController.show({
type: NotificationType.Info,
message: $t('edited'),
});
toastManager.success($t('saved'));
onClose(updatedLink);
} catch (error) {

11
web/src/lib/modals/TagCreateModal.svelte
View File

@ -1,13 +1,9 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { SettingInputFieldType } from '$lib/constants';
import type { TreeNode } from '$lib/utils/tree-utils';
import { upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import { mdiTag } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -27,10 +23,7 @@
return;
}
notificationController.show({
message: $t('tag_created', { values: { tag: tag.value } }),
type: NotificationType.Info,
});
toastManager.success($t('tag_created', { values: { tag: tag.value } }));
onClose(tag);
};

11
web/src/lib/modals/TagEditModal.svelte
View File

@ -1,13 +1,9 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { SettingInputFieldType } from '$lib/constants';
import type { TreeNode } from '$lib/utils/tree-utils';
import { updateTag, type TagResponseDto } from '@immich/sdk';
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { Button, HStack, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
import { mdiTag } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -27,10 +23,7 @@
const updatedTag = await updateTag({ id: tag.id, tagUpdateDto: { color: tagColor } });
notificationController.show({
message: $t('tag_updated', { values: { tag: tag.value } }),
type: NotificationType.Info,
});
toastManager.success($t('tag_updated', { values: { tag: tag.value } }));
onClose(updatedTag);
};

4
web/src/lib/utils.ts
View File

@ -1,4 +1,3 @@
import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
import { defaultLang, langs, locales } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { lang } from '$lib/stores/preferences.store';
@ -25,6 +24,7 @@ import {
type SharedLinkResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiHeadSyncOutline, mdiImageRefreshOutline } from '@mdi/js';
import { init, register, t } from 'svelte-i18n';
import { derived, get } from 'svelte/store';
@ -263,7 +263,7 @@ export const copyToClipboard = async (secret: string) => {
try {
await navigator.clipboard.writeText(secret);
notificationController.show({ message: $t('copied_to_clipboard'), type: NotificationType.Info });
toastManager.info($t('copied_to_clipboard'));
} catch (error) {
handleError(error, $t('errors.unable_to_copy_to_clipboard'));
}

35
web/src/lib/utils/actions.ts
View File

@ -1,8 +1,9 @@
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
import ToastAction from '$lib/components/ToastAction.svelte';
import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
import type { StackResponse } from '$lib/utils/asset-utils';
import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets } from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { t } from 'svelte-i18n';
import { get } from 'svelte/store';
import { handleError } from './handle-error';
@ -31,17 +32,27 @@ export const deleteAssets = async (
await deleteBulk({ assetBulkDeleteDto: { ids, force } });
onAssetDelete(ids);
notificationController.show({
message: force
? $t('assets_permanently_deleted_count', { values: { count: ids.length } })
: $t('assets_trashed_count', { values: { count: ids.length } }),
type: NotificationType.Info,
...(onUndoDelete &&
!force && {
button: { text: $t('undo'), onClick: () => undoDeleteAssets(onUndoDelete, assets) },
timeout: 5000,
}),
});
toastManager.custom(
{
component: ToastAction,
props: {
title: $t('success'),
description: force
? $t('assets_permanently_deleted_count')
: $t('assets_trashed_count', { values: { count: ids.length } }),
color: 'success',
button:
onUndoDelete && !force
? {
color: 'secondary',
text: $t('undo'),
onClick: () => undoDeleteAssets(onUndoDelete, assets),
}
: undefined,
},
},
{ timeout: 5000 },
);
} catch (error) {
handleError(error, $t('errors.unable_to_delete_assets'));
}

123
web/src/lib/utils/asset-utils.ts
View File

@ -1,5 +1,5 @@
import { goto } from '$app/navigation';
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
import ToastAction from '$lib/components/ToastAction.svelte';
import { AppRoute } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { downloadManager } from '$lib/managers/download-manager.svelte';
@ -39,6 +39,7 @@ import {
type UserPreferencesResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { toastManager } from '@immich/ui';
import { DateTime } from 'luxon';
import { t } from 'svelte-i18n';
import { get } from 'svelte/store';
@ -57,23 +58,29 @@ export const addAssetsToAlbum = async (albumId: string, assetIds: string[], show
const $t = get(t);
if (showNotification) {
let message = $t('assets_cannot_be_added_to_album_count', { values: { count: assetIds.length } });
let description = $t('assets_cannot_be_added_to_album_count', { values: { count: assetIds.length } });
if (count > 0) {
message = $t('assets_added_to_album_count', { values: { count } });
description = $t('assets_added_to_album_count', { values: { count } });
} else if (duplicateErrorCount > 0) {
message = $t('assets_were_part_of_album_count', { values: { count: duplicateErrorCount } });
description = $t('assets_were_part_of_album_count', { values: { count: duplicateErrorCount } });
}
notificationController.show({
type: NotificationType.Info,
timeout: 5000,
message,
button: {
text: $t('view_album'),
onClick() {
return goto(`${AppRoute.ALBUMS}/${albumId}`);
toastManager.custom(
{
component: ToastAction,
props: {
title: $t('info'),
color: 'info',
description,
button: {
text: $t('view_album'),
onClick() {
return goto(`${AppRoute.ALBUMS}/${albumId}`);
},
},
},
},
});
{ timeout: 5000 },
);
}
};
@ -94,31 +101,16 @@ export const addAssetsToAlbums = async (albumIds: string[], assetIds: string[],
const $t = get(t);
if (result.error === BulkIdErrorReason.Duplicate) {
notificationController.show({
type: NotificationType.Info,
timeout: 5000,
message: $t('assets_were_part_of_albums_count', { values: { count: assetIds.length } }),
});
toastManager.info($t('assets_were_part_of_albums_count', { values: { count: assetIds.length } }));
return result;
}
if (result.error) {
notificationController.show({
type: NotificationType.Info,
timeout: 5000,
message: $t('assets_cannot_be_added_to_albums', { values: { count: assetIds.length } }),
});
toastManager.warning($t('assets_cannot_be_added_to_albums', { values: { count: assetIds.length } }));
return result;
}
notificationController.show({
type: NotificationType.Info,
timeout: 5000,
message: $t('assets_added_to_albums_count', {
values: {
albumTotal: albumIds.length,
assetTotal: assetIds.length,
},
}),
});
toastManager.success(
$t('assets_added_to_albums_count', { values: { albumTotal: albumIds.length, assetTotal: assetIds.length } }),
);
return result;
}
};
@ -136,10 +128,7 @@ export const tagAssets = async ({
if (showNotification) {
const $t = await getFormatter();
notificationController.show({
message: $t('tagged_assets', { values: { count: assetIds.length } }),
type: NotificationType.Info,
});
toastManager.success($t('tagged_assets', { values: { count: assetIds.length } }));
}
return assetIds;
@ -160,10 +149,7 @@ export const removeTag = async ({
if (showNotification) {
const $t = await getFormatter();
notificationController.show({
message: $t('removed_tagged_assets', { values: { count: assetIds.length } }),
type: NotificationType.Info,
});
toastManager.success($t('removed_tagged_assets', { values: { count: assetIds.length } }));
}
return assetIds;
@ -286,11 +272,7 @@ export const downloadFile = async (asset: AssetResponseDto) => {
}
try {
notificationController.show({
type: NotificationType.Info,
message: $t('downloading_asset_filename', { values: { filename: asset.originalFileName } }),
});
toastManager.success($t('downloading_asset_filename', { values: { filename: asset.originalFileName } }));
downloadUrl(getBaseUrl() + `/assets/${id}/original` + (queryParams ? `?${queryParams}` : ''), filename);
} catch (error) {
handleError(error, $t('errors.error_downloading', { values: { filename } }));
@ -411,10 +393,7 @@ export const getOwnedAssetsWithWarning = (assets: TimelineAsset[], user: UserRes
const numberOfIssues = [...assets].filter((a) => user && a.ownerId !== user.id).length;
if (numberOfIssues > 0) {
const $t = get(t);
notificationController.show({
message: $t('errors.cant_change_metadata_assets_count', { values: { count: numberOfIssues } }),
type: NotificationType.Warning,
});
toastManager.warning($t('errors.cant_change_metadata_assets_count', { values: { count: numberOfIssues } }));
}
return ids;
};
@ -434,12 +413,16 @@ export const stackAssets = async (assets: { id: string }[], showNotification = t
try {
const stack = await createStack({ stackCreateDto: { assetIds: assets.map(({ id }) => id) } });
if (showNotification) {
notificationController.show({
message: $t('stacked_assets_count', { values: { count: stack.assets.length } }),
type: NotificationType.Info,
button: {
text: $t('view_stack'),
onClick: () => navigate({ targetRoute: 'current', assetId: stack.primaryAssetId }),
toastManager.custom({
component: ToastAction,
props: {
title: $t('success'),
description: $t('stacked_assets_count', { values: { count: stack.assets.length } }),
color: 'success',
button: {
text: $t('view_stack'),
onClick: () => navigate({ targetRoute: 'current', assetId: stack.primaryAssetId }),
},
},
});
}
@ -468,10 +451,7 @@ export const deleteStack = async (stackIds: string[]) => {
await deleteStacks({ bulkIdsDto: { ids: [...ids] } });
notificationController.show({
type: NotificationType.Info,
message: $t('unstacked_assets_count', { values: { count } }),
});
toastManager.success($t('unstacked_assets_count', { values: { count } }));
const assets = stacks.flatMap((stack) => stack.assets);
for (const asset of assets) {
@ -492,10 +472,7 @@ export const keepThisDeleteOthers = async (keepAsset: AssetResponseDto, stack: S
await deleteAssets({ assetBulkDeleteDto: { ids: assetsToDeleteIds } });
await deleteStacks({ bulkIdsDto: { ids: [stack.id] } });
notificationController.show({
type: NotificationType.Info,
message: $t('kept_this_deleted_others', { values: { count: assetsToDeleteIds.length } }),
});
toastManager.success($t('kept_this_deleted_others', { values: { count: assetsToDeleteIds.length } }));
keepAsset.stack = null;
return keepAsset;
@ -548,11 +525,7 @@ export const toggleArchive = async (asset: AssetResponseDto) => {
});
asset.isArchived = data.isArchived;
notificationController.show({
type: NotificationType.Info,
message: asset.isArchived ? $t(`added_to_archive`) : $t(`removed_from_archive`),
});
toastManager.success(asset.isArchived ? $t(`added_to_archive`) : $t(`removed_from_archive`));
} catch (error) {
handleError(error, $t('errors.unable_to_add_remove_archive', { values: { archived: asset.isArchived } }));
}
@ -571,13 +544,11 @@ export const archiveAssets = async (assets: { id: string }[], visibility: AssetV
});
}
notificationController.show({
message:
visibility === AssetVisibility.Archive
? $t('archived_count', { values: { count: ids.length } })
: $t('unarchived_count', { values: { count: ids.length } }),
type: NotificationType.Info,
});
toastManager.success(
visibility === AssetVisibility.Archive
? $t('archived_count', { values: { count: ids.length } })
: $t('unarchived_count', { values: { count: ids.length } }),
);
} catch (error) {
handleError(
error,

4
web/src/lib/utils/handle-error.ts
View File

@ -1,5 +1,5 @@
import { isHttpError } from '@immich/sdk';
import { notificationController, NotificationType } from '../components/shared-components/notification/notification';
import { toastManager } from '@immich/ui';
export function getServerErrorMessage(error: unknown) {
if (!isHttpError(error)) {
@ -34,7 +34,7 @@ export function handleError(error: unknown, message: string) {
const errorMessage = serverMessage || message;
notificationController.show({ message: errorMessage, type: NotificationType.Error });
toastManager.danger(errorMessage);
return errorMessage;
} catch (error) {

16
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -11,10 +11,6 @@
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
@ -68,7 +64,7 @@
updateAlbumInfo,
type AlbumUserAddDto,
} from '@immich/sdk';
import { Button, Icon, IconButton, modalManager } from '@immich/ui';
import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
import {
mdiArrowLeft,
mdiCogOutline,
@ -189,10 +185,7 @@
});
const count = results.filter(({ success }) => success).length;
notificationController.show({
type: NotificationType.Info,
message: $t('assets_added_count', { values: { count } }),
});
toastManager.success($t('assets_added_count', { values: { count } }));
await refreshAlbum();
@ -304,10 +297,7 @@
albumThumbnailAssetId: assetId,
},
});
notificationController.show({
type: NotificationType.Info,
message: $t('album_cover_updated'),
});
toastManager.success($t('album_cover_updated'));
} catch (error) {
handleError(error, $t('errors.unable_to_update_album_cover'));
}

21
web/src/routes/(user)/people/+page.svelte
View File

@ -9,10 +9,6 @@
import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { ActionQueryParameterValue, AppRoute, QueryParameter, SessionStorageKey } from '$lib/constants';
import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
@ -22,7 +18,7 @@
import { handleError } from '$lib/utils/handle-error';
import { clearQueryParam } from '$lib/utils/navigation';
import { getAllPeople, getPerson, searchPerson, updatePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, Icon, modalManager } from '@immich/ui';
import { Button, Icon, modalManager, toastManager } from '@immich/ui';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -161,10 +157,7 @@
break;
}
}
notificationController.show({
message: $t('change_name_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('change_name_successfully'));
} catch (error) {
handleError(error, $t('errors.unable_to_save_name'));
}
@ -185,10 +178,7 @@
return person;
});
notificationController.show({
message: $t('changed_visibility_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('changed_visibility_successfully'));
} catch (error) {
handleError(error, $t('errors.unable_to_hide_person'));
}
@ -208,10 +198,7 @@
return person;
});
notificationController.show({
message: updatedPerson.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
type: NotificationType.Info,
});
toastManager.success(updatedPerson.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'));
} catch (error) {
handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: detail.isFavorite } }));
}

24
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -11,10 +11,6 @@
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@ -49,7 +45,7 @@
updatePerson,
type PersonResponseDto,
} from '@immich/sdk';
import { LoadingSpinner, modalManager } from '@immich/ui';
import { LoadingSpinner, modalManager, toastManager } from '@immich/ui';
import {
mdiAccountBoxOutline,
mdiAccountMultipleCheckOutline,
@ -165,10 +161,7 @@
personUpdateDto: { isHidden: !person.isHidden },
});
notificationController.show({
message: $t('changed_visibility_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('changed_visibility_successfully'));
await goto(previousRoute);
} catch (error) {
@ -186,10 +179,7 @@
// Invalidate to reload the page data and have the favorite status updated
await invalidateAll();
notificationController.show({
message: updatedPerson.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'),
type: NotificationType.Info,
});
toastManager.success(updatedPerson.isFavorite ? $t('added_to_favorites') : $t('removed_from_favorites'));
} catch (error) {
handleError(error, $t('errors.unable_to_add_remove_favorites', { values: { favorite: person.isFavorite } }));
}
@ -208,7 +198,7 @@
}
try {
person = await updatePerson({ id: person.id, personUpdateDto: { featureFaceAssetId: asset.id } });
notificationController.show({ message: $t('feature_photo_updated'), type: NotificationType.Info });
toastManager.success($t('feature_photo_updated'));
} catch (error) {
handleError(error, $t('errors.unable_to_set_feature_photo'));
}
@ -270,11 +260,7 @@
try {
person = await updatePerson({ id: person.id, personUpdateDto: { name: personName } });
notificationController.show({
message: $t('change_name_successfully'),
type: NotificationType.Info,
});
toastManager.success($t('change_name_successfully'));
} catch (error) {
handleError(error, $t('errors.unable_to_save_name'));
}

8
web/src/routes/(user)/shared-links/[[id=id]]/+page.svelte
View File

@ -2,17 +2,13 @@
import { goto } from '$app/navigation';
import { page } from '$app/state';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
import { AppRoute } from '$lib/constants';
import GroupTab from '$lib/elements/GroupTab.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
import { handleError } from '$lib/utils/handle-error';
import { getAllSharedLinks, removeSharedLink, SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
import { modalManager } from '@immich/ui';
import { modalManager, toastManager } from '@immich/ui';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
@ -47,7 +43,7 @@
try {
await removeSharedLink({ id });
notificationController.show({ message: $t('deleted_shared_link'), type: NotificationType.Info });
toastManager.success($t('deleted_shared_link'));
await refresh();
} catch (error) {
handleError(error, $t('errors.unable_to_delete_shared_link'));

17
web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -3,10 +3,6 @@
import empty3Url from '$lib/assets/empty-3.svg';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
import RestoreAssets from '$lib/components/timeline/actions/RestoreAction.svelte';
import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
@ -19,7 +15,7 @@
import { handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { emptyTrash, restoreTrash } from '@immich/sdk';
import { Button, HStack, modalManager, Text } from '@immich/ui';
import { Button, HStack, modalManager, Text, toastManager } from '@immich/ui';
import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
@ -47,11 +43,7 @@
try {
const { count } = await emptyTrash();
notificationController.show({
message: $t('assets_permanently_deleted_count', { values: { count } }),
type: NotificationType.Info,
});
toastManager.success($t('assets_permanently_deleted_count', { values: { count } }));
} catch (error) {
handleError(error, $t('errors.unable_to_empty_trash'));
}
@ -64,10 +56,7 @@
}
try {
const { count } = await restoreTrash();
notificationController.show({
message: $t('assets_restored_count', { values: { count } }),
type: NotificationType.Info,
});
toastManager.success($t('assets_restored_count', { values: { count } }));
// reset asset grid (TODO fix in asset store that it should reset when it is empty)
// note - this is still a problem, but updateOptions with the same value will not

21
web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -3,10 +3,6 @@
import { page } from '$app/state';
import { shortcuts } from '$lib/actions/shortcut';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
import { AppRoute } from '$lib/constants';
import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
@ -19,7 +15,7 @@
import { handleError } from '$lib/utils/handle-error';
import type { AssetResponseDto } from '@immich/sdk';
import { deleteAssets, deleteDuplicates, updateAssets } from '@immich/sdk';
import { Button, HStack, IconButton, modalManager, Text } from '@immich/ui';
import { Button, HStack, IconButton, modalManager, Text, toastManager } from '@immich/ui';
import {
mdiCheckOutline,
mdiChevronLeft,
@ -96,12 +92,10 @@
return;
}
notificationController.show({
message: $featureFlags.trash
? $t('assets_moved_to_trash_count', { values: { count: trashedCount } })
: $t('permanently_deleted_assets_count', { values: { count: trashedCount } }),
type: NotificationType.Info,
});
const message = $featureFlags.trash
? $t('assets_moved_to_trash_count', { values: { count: trashedCount } })
: $t('permanently_deleted_assets_count', { values: { count: trashedCount } });
toastManager.success(message);
};
const handleResolve = async (duplicateId: string, duplicateAssetIds: string[], trashIds: string[]) => {
@ -173,10 +167,7 @@
duplicates = [];
notificationController.show({
message: $t('resolved_all_duplicates'),
type: NotificationType.Info,
});
toastManager.success($t('resolved_all_duplicates'));
page.url.searchParams.delete('index');
await goto(`${AppRoute.DUPLICATES}`);
},

6
web/src/routes/+layout.svelte
View File

@ -6,7 +6,6 @@
import ErrorLayout from '$lib/components/layouts/ErrorLayout.svelte';
import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
import { eventManager } from '$lib/managers/event-manager.svelte';
import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
@ -38,6 +37,10 @@
hide_password: $t('hide_password'),
confirm: $t('confirm'),
cancel: $t('cancel'),
toast_success_title: $t('success'),
toast_info_title: $t('info'),
toast_warning_title: $t('warning'),
toast_danger_title: $t('error'),
});
});
@ -155,4 +158,3 @@
<DownloadPanel />
<UploadPanel />
<NotificationList />

23
web/src/routes/admin/library-management/+page.svelte
View File

@ -5,10 +5,6 @@
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
@ -30,7 +26,7 @@
type LibraryStatsResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { Button, LoadingSpinner, modalManager, Text } from '@immich/ui';
import { Button, LoadingSpinner, modalManager, Text, toastManager } from '@immich/ui';
import { mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -92,10 +88,7 @@
let createdLibrary: LibraryResponseDto | undefined;
try {
createdLibrary = await createLibrary({ createLibraryDto: { ownerId } });
notificationController.show({
message: $t('admin.library_created', { values: { library: createdLibrary.name } }),
type: NotificationType.Info,
});
toastManager.success($t('admin.library_created', { values: { library: createdLibrary.name } }));
} catch (error) {
handleError(error, $t('errors.unable_to_create_library'));
} finally {
@ -160,10 +153,7 @@
try {
await sendJobCommand({ id: JobName.Library, jobCommandDto: { command: JobCommand.Start } });
notificationController.show({
message: $t('admin.refreshing_all_libraries'),
type: NotificationType.Info,
});
toastManager.info($t('admin.refreshing_all_libraries'));
} catch (error) {
handleError(error, $t('errors.unable_to_scan_libraries'));
}
@ -172,10 +162,7 @@
const handleScan = async (libraryId: string) => {
try {
await scanLibrary({ id: libraryId });
notificationController.show({
message: $t('admin.scanning_library'),
type: NotificationType.Info,
});
toastManager.info($t('admin.scanning_library'));
} catch (error) {
handleError(error, $t('errors.unable_to_scan_library'));
}
@ -244,7 +231,7 @@
try {
await deleteLibrary({ id: library.id });
notificationController.show({ message: $t('admin.library_deleted'), type: NotificationType.Info });
toastManager.success($t('admin.library_deleted'));
} catch (error) {
handleError(error, $t('errors.unable_to_remove_library'));
} finally {

11
web/src/routes/admin/users/+page.svelte
View File

@ -1,10 +1,6 @@
<script lang="ts">
import { page } from '$app/stores';
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
import {
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
@ -15,7 +11,7 @@
import { websocketEvents } from '$lib/stores/websocket';
import { getByteUnitString } from '$lib/utils/byte-units';
import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
import { Button, HStack, Icon, IconButton, Text, modalManager } from '@immich/ui';
import { Button, HStack, Icon, IconButton, Text, modalManager, toastManager } from '@immich/ui';
import { mdiDeleteRestore, mdiEyeOutline, mdiInfinity, mdiPlusBoxOutline, mdiTrashCanOutline } from '@mdi/js';
import { DateTime } from 'luxon';
import { onMount } from 'svelte';
@ -38,10 +34,7 @@
const user = allUsers.find(({ id }) => id === userId);
if (user) {
allUsers = allUsers.filter((user) => user.id !== userId);
notificationController.show({
type: NotificationType.Info,
message: $t('admin.user_successfully_removed', { values: { email: user.email } }),
});
toastManager.success($t('admin.user_successfully_removed', { values: { email: user.email } }));
}
};

8
web/src/routes/admin/users/[id]/+page.svelte
View File

@ -1,10 +1,6 @@
<script lang="ts">
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
@ -34,6 +30,7 @@
modalManager,
Stack,
Text,
toastManager,
} from '@immich/ui';
import {
mdiAccountOutline,
@ -148,8 +145,7 @@
try {
await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
notificationController.show({ type: NotificationType.Info, message: $t('pin_code_reset_successfully') });
toastManager.success($t('pin_code_reset_successfully'));
} catch (error) {
handleError(error, $t('errors.unable_to_reset_pin_code'));
}