github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-05-18 03:10:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: toasts (#23298)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-10-28 15:09:11 -04:00
committed by GitHub
parent 106effca2e
commit 52596255c8
80 changed files with 341 additions and 1069 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/ToastAction.svelte
+33
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>
web/src/lib/components/admin-settings/AdminSettings.svelte
+6 -15
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 () => {
web/src/lib/components/admin-settings/AuthSettings.svelte
+2 -6
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'));
}
web/src/lib/components/admin-settings/NotificationSettings.svelte
+2 -9
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 });
web/src/lib/components/album-page/albums-list.svelte
+15 -17
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}`));
},
},
},
});
web/src/lib/components/asset-viewer/actions/delete-action.svelte
+3 -15
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 {
web/src/lib/components/asset-viewer/actions/favorite-action.svelte
+2 -9
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 } }));
}
web/src/lib/components/asset-viewer/actions/restore-action.svelte
+2 -10
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'));
}
web/src/lib/components/asset-viewer/actions/set-album-cover-action.svelte
+2 -9
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'));
}
web/src/lib/components/asset-viewer/actions/set-person-featured-action.svelte
+2 -5
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'));
}
web/src/lib/components/asset-viewer/activity-viewer.svelte
+2 -6
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'));
}
web/src/lib/components/asset-viewer/asset-viewer.svelte
+2 -2
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'));
}
web/src/lib/components/asset-viewer/detail-panel-description.svelte
+3 -9
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'));
}
web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
+2 -5
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;
}
web/src/lib/components/asset-viewer/photo-viewer.svelte
+2 -3
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'));
}
web/src/lib/components/faces-page/manage-people-visibility.spec.ts
+6 -3
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],
web/src/lib/components/faces-page/manage-people-visibility.svelte
+3 -13
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) {
web/src/lib/components/faces-page/merge-face-selector.svelte
+3 -10
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'));
web/src/lib/components/faces-page/person-side-panel.svelte
+2 -6
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'));
}
web/src/lib/components/faces-page/unmerge-face-selector.svelte
+5 -11
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(
web/src/lib/components/forms/library-import-paths-form.svelte
+4 -11
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 } }));
}
};
web/src/lib/components/forms/library-scan-settings-form.svelte
+1 -1
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>;
web/src/lib/components/jobs/JobsPanel.svelte
+2 -9
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;
}
}
web/src/lib/components/memory-page/memory-viewer.svelte
+3 -10
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);
};
web/src/lib/components/share-page/individual-shared-viewer.svelte
+2 -6
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'));
}
web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
+2 -7
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'));
}
web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts
-86
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>',
);
});
});
web/src/lib/components/shared-components/notification/__tests__/notification-component-test.svelte
-9
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>
web/src/lib/components/shared-components/notification/__tests__/notification-list.spec.ts
-41
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);
});
});
web/src/lib/components/shared-components/notification/notification-card.svelte
-125
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>
web/src/lib/components/shared-components/notification/notification-list.svelte
-25
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>
web/src/lib/components/shared-components/notification/notification.ts
-87
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();
web/src/lib/components/shared-components/upload-panel.svelte
+4 -14
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();
}}
web/src/lib/components/timeline/actions/AssetJobActions.svelte
+2 -5
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'));
web/src/lib/components/timeline/actions/FavoriteAction.svelte
+4 -9
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) {
web/src/lib/components/timeline/actions/RemoveFromAlbumAction.svelte
+4 -14
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>
web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte
+2 -8
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'));
web/src/lib/components/timeline/actions/RestoreAction.svelte
+2 -11
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'));
web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte
+2 -11
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 {
web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
+2 -11
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) {
web/src/lib/components/user-settings-page/change-password-settings.svelte
+4 -14
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'));
}
};
web/src/lib/components/user-settings-page/device-list.svelte
+4 -8
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 {
web/src/lib/components/user-settings-page/download-settings.svelte
+3 -7
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'));
}
web/src/lib/components/user-settings-page/feature-settings.svelte
+3 -7
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'));
}
web/src/lib/components/user-settings-page/notifications-settings.svelte
+5 -10
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'));
}
web/src/lib/components/user-settings-page/oauth-settings.svelte
+4 -13
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'));
}
web/src/lib/components/user-settings-page/partner-settings.svelte
+1 -1
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;
web/src/lib/components/user-settings-page/user-api-key-list.svelte
+4 -11
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 {
web/src/lib/components/user-settings-page/user-profile-settings.svelte
+3 -10
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'));
}