fix: web import ordering (#32995)

2026-11-06 21:34:27 +03:00
1 parent 768dbe8259
commit d569e28d01
@@ -1,9 +1,11 @@
 {
  "importOrder": ["<THIRD_PARTY_MODULES>", "<BUILTIN_MODULES>", "^\\$(.*)$", "^#test-data(.*)$", "^[./]"],
-  "importOrderSeparation": false,
+  "importOrderCaseSensitive": true,
+  "importOrderSafeSideEffects": [".*"],
+  "importOrderTypeScriptVersion": "6.0.0",
  "jsonRecursiveSort": true,
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
-  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-svelte", "prettier-plugin-sort-json"],
+  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-svelte", "prettier-plugin-sort-json"],
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
@@ -83,6 +83,7 @@
  },
  "devDependencies": {
    "@eslint/js": "^10.0.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
    "@koddsson/eslint-plugin-tscompat": "^0.4.0",
    "@playwright/test": "1.64.1",
    "@socket.io/component-emitter": "^3.1.0",
@@ -91,7 +92,6 @@
    "@sveltejs/kit": "^3.0.0",
    "@sveltejs/vite-plugin-svelte": "7.3.1",
    "@tailwindcss/vite": "^4.2.4",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
    "@types/chromecast-caf-sender": "^1.0.11",
    "@types/dom-to-image": "^2.6.7",
    "@types/justified-layout": "^4.1.4",
@@ -3,7 +3,7 @@ import { readPreloadedQuery } from '#lib/queries/client.ts';
 import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
 import { Route } from '#lib/route.ts';
 import { copyToClipboard } from '#lib/utils.ts';
-import { defaultProvider, screencastManager, themeManager, ThemePreference, type ActionItem } from '@immich/ui';
+import { ThemePreference, defaultProvider, screencastManager, themeManager, type ActionItem } from '@immich/ui';
 import {
  mdiAccountMultipleOutline,
  mdiAccountOutline,
@@ -51,11 +51,12 @@

 <script lang="ts">
  import AlphaBackground from '#lib/components/AlphaBackground.svelte';
-  import BrokenAsset from '#lib/components/assets/BrokenAsset.svelte';
  import DelayedLoadingSpinner from '#lib/components/DelayedLoadingSpinner.svelte';
  import ImageLayer from '#lib/components/ImageLayer.svelte';
  import Thumbhash from '#lib/components/Thumbhash.svelte';
+  import BrokenAsset from '#lib/components/assets/BrokenAsset.svelte';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
  import { getAssetUrls } from '#lib/utils.ts';
  import { AdaptiveImageLoader, type QualityList } from '#lib/utils/adaptive-image-loader.svelte.ts';
  import { scaleToCover, scaleToFit, type Size } from '#lib/utils/container-utils.ts';
@@ -63,7 +64,6 @@
  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
  import type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
  import { untrack, type Snippet } from 'svelte';
-  import { languageManager } from '#lib/managers/language-manager.svelte.ts';

  type Props = {
    asset: AssetResponseDto;
@@ -1,7 +1,7 @@
 <script lang="ts">
  import AlbumThumbnail from '#lib/components/album-page/AlbumThumbnail.svelte';
-  import { Button, Text, Label, modalManager } from '@immich/ui';
  import AlbumPickerModal from '#lib/modals/AlbumPickerModal.svelte';
+  import { Button, Label, Text, modalManager } from '@immich/ui';
  import { t } from 'svelte-i18n';

  type Props = {
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Button, DatePicker, Field } from '@immich/ui';
  import { locale } from '#lib/stores/preferences.store.ts';
+  import { Button, DatePicker, Field } from '@immich/ui';
  import { DateTime, Duration } from 'luxon';
  import { t } from 'svelte-i18n';

@@ -6,15 +6,15 @@
  import FormatMessage from '#lib/elements/FormatMessage.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
+  import StorageTemplateVariablesModal from '#lib/modals/StorageTemplateVariablesModal.svelte';
  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
  import { getAdminConfigQuery, updateAdminConfigMutation } from '#lib/queries/config-admin.query.ts';
-  import StorageTemplateVariablesModal from '#lib/modals/StorageTemplateVariablesModal.svelte';
  import { Route } from '#lib/route.ts';
  import { getStorageTemplateOptions, type SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
-  import { cloneDeep } from 'lodash-es';
-  import { Code, Heading, IconButton, Link, modalManager, Text } from '@immich/ui';
+  import { Code, Heading, IconButton, Link, Text, modalManager } from '@immich/ui';
  import { mdiInformationOutline } from '@mdi/js';
  import handlebar from 'handlebars';
+  import { cloneDeep } from 'lodash-es';
  import * as luxon from 'luxon';
  import { onDestroy } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -4,7 +4,7 @@
  import { Route } from '#lib/route.ts';
  import { getAlbumActions } from '#lib/services/album.service.ts';
  import { albumViewSettings } from '#lib/stores/preferences.store.ts';
-  import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '#lib/utils/album-utils.ts';
+  import { isAlbumGroupCollapsed, toggleAlbumGroupCollapsing, type AlbumGroup } from '#lib/utils/album-utils.ts';
  import type { AlbumResponseDto } from '@immich/sdk';
  import { Icon, menuManager, type ActionItem } from '@immich/ui';
  import { mdiChevronRight } from '@mdi/js';
@@ -2,7 +2,7 @@
  import AlbumCover from '#lib/components/album-page/AlbumCover.svelte';
  import { getAlbumQuery } from '#lib/queries/album.query.ts';
  import { queryClient } from '#lib/queries/client.ts';
-  import { IconButton, Text, LoadingSpinner } from '@immich/ui';
+  import { IconButton, LoadingSpinner, Text } from '@immich/ui';
  import { mdiTrashCanOutline } from '@mdi/js';
  import { createQuery } from '@tanstack/svelte-query';
  import { t } from 'svelte-i18n';
@@ -1,13 +1,15 @@
 <script lang="ts">
  import { shortcut } from '#lib/actions/shortcut.ts';
  import AlbumMap from '#lib/components/album-page/AlbumMap.svelte';
-  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
-  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
  import Timeline from '#lib/components/timeline/Timeline.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';
  import { handleDownloadAlbum } from '#lib/services/album.service.ts';
  import { getGlobalActions } from '#lib/services/app.service.ts';
  import { dragAndDropFilesStore } from '#lib/stores/drag-and-drop-files.store.ts';
@@ -22,8 +24,6 @@
  import ControlAppBar from '../shared-components/ControlAppBar.svelte';
  import ThemeButton from '../shared-components/ThemeButton.svelte';
  import AlbumSummary from './AlbumSummary.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.ts';
-  import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';

  const query = createPreloadedQuery(getPublicConfigQuery);
  const publicConfig = $derived(query.data);
@@ -8,8 +8,8 @@
    AlbumGroupBy,
    AlbumSortBy,
    AlbumViewMode,
-    locale,
    SortOrder,
+    locale,
    type AlbumViewSettings,
  } from '#lib/stores/preferences.store.ts';
  import {
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { albumViewSettings, SortOrder, AlbumSortBy } from '#lib/stores/preferences.store.ts';
+  import { AlbumSortBy, SortOrder, albumViewSettings } from '#lib/stores/preferences.store.ts';
  import type { AlbumSortOptionMetadata } from '#lib/utils/album-utils.ts';
  import { t } from 'svelte-i18n';

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import { dateFormats } from '#lib/constants.ts';
  import Portal from '#lib/elements/Portal.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
@@ -10,6 +9,7 @@
  import { Icon, menuManager } from '@immich/ui';
  import { mdiShareVariantOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';

  type Props = {
    album: AlbumResponseDto;
@@ -1,18 +1,17 @@
 <script lang="ts">
-  import { browser } from '$app/env';
  import { focusTrap } from '#lib/actions/focus-trap.ts';
  import { shortcuts } from '#lib/actions/shortcut.ts';
-  import type { Action, OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.ts';
-  import NextAssetAction from '#lib/components/asset-viewer/actions/NextAssetAction.svelte';
-  import PreviousAssetAction from '#lib/components/asset-viewer/actions/PreviousAssetAction.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
  import AssetViewerNavBar from '#lib/components/asset-viewer/AssetViewerNavBar.svelte';
  import { preloadManager } from '#lib/components/asset-viewer/PreloadManager.svelte.ts';
-  import OnEvents from '#lib/components/OnEvents.svelte';
+  import NextAssetAction from '#lib/components/asset-viewer/actions/NextAssetAction.svelte';
+  import PreviousAssetAction from '#lib/components/asset-viewer/actions/PreviousAssetAction.svelte';
+  import type { Action, OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.ts';
  import { AssetAction, ProjectionType } from '#lib/constants.ts';
  import { activityManager } from '#lib/managers/activity-manager.svelte.ts';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
-  import { editManager, EditToolType } from '#lib/managers/edit/edit-manager.svelte.ts';
+  import { EditToolType, editManager } from '#lib/managers/edit/edit-manager.svelte.ts';
  import { eventManager } from '#lib/managers/event-manager.svelte.ts';
  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
  import { getAssetActions } from '#lib/services/asset.service.ts';
@@ -24,8 +23,8 @@
  import type { OnUndoDelete } from '#lib/utils/actions.ts';
  import { navigateToAsset } from '#lib/utils/asset-utils.ts';
  import { handleError } from '#lib/utils/handle-error.ts';
-  import { navigate } from '#lib/utils/navigation.ts';
  import { InvocationTracker } from '#lib/utils/invocationTracker.ts';
+  import { navigate } from '#lib/utils/navigation.ts';
  import { SlideshowHistory } from '#lib/utils/slideshow-history.ts';
  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
  import {
@@ -42,18 +41,19 @@
  import type { SwipeCustomEvent } from 'svelte-gestures';
  import { t } from 'svelte-i18n';
  import { fly } from 'svelte/transition';
+  import { browser } from '$app/env';
  import Thumbnail from '../assets/thumbnail/Thumbnail.svelte';
  import ActivityStatus from './ActivityStatus.svelte';
  import ActivityViewer from './ActivityViewer.svelte';
  import DetailPanel from './DetailPanel.svelte';
-  import EditorPanel from './editor/EditorPanel.svelte';
-  import CropArea from './editor/transform-tool/CropArea.svelte';
  import ImagePanoramaViewer from './ImagePanoramaViewer.svelte';
  import OcrButton from './OcrButton.svelte';
  import PhotoViewer from './PhotoViewer.svelte';
  import SlideshowBar from './SlideshowBar.svelte';
  import SlideshowMetadataOverlay from './SlideshowMetadataOverlay.svelte';
  import VideoViewer from './VideoWrapperViewer.svelte';
+  import EditorPanel from './editor/EditorPanel.svelte';
+  import CropArea from './editor/transform-tool/CropArea.svelte';

  export type AssetCursor = {
    current: AssetResponseDto;
@@ -1,11 +1,11 @@
 <script lang="ts">
  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
-  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.ts';
+  import LoadingDots from '#lib/components/LoadingDots.svelte';
  import ArchiveAction from '#lib/components/asset-viewer/actions/ArchiveAction.svelte';
  import DeleteAction from '#lib/components/asset-viewer/actions/DeleteAction.svelte';
  import RestoreAction from '#lib/components/asset-viewer/actions/RestoreAction.svelte';
  import SetVisibilityAction from '#lib/components/asset-viewer/actions/SetVisibilityAction.svelte';
-  import LoadingDots from '#lib/components/LoadingDots.svelte';
+  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.ts';
  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
@@ -1,35 +1,35 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import DetailPanelDate from '#lib/components/asset-viewer/DetailPanelDate.svelte';
  import DetailPanelDescription from '#lib/components/asset-viewer/DetailPanelDescription.svelte';
  import DetailPanelLocation from '#lib/components/asset-viewer/DetailPanelLocation.svelte';
+  import DetailPanelPeople from '#lib/components/asset-viewer/DetailPanelPeople.svelte';
  import DetailPanelRating from '#lib/components/asset-viewer/DetailPanelStarRating.svelte';
  import DetailPanelTags from '#lib/components/asset-viewer/DetailPanelTags.svelte';
  import { timeToLoadTheMap } from '#lib/constants.ts';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { getAlbumsByAssetQuery } from '#lib/queries/album.query.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';
  import { Route } from '#lib/route.ts';
+  import { faceManager } from '#lib/stores/face.svelte.ts';
  import { locale } from '#lib/stores/preferences.store.ts';
  import { getAssetMediaUrl } from '#lib/utils.ts';
  import { delay, getDimensions } from '#lib/utils/asset-utils.ts';
  import { getByteUnitString } from '#lib/utils/byte-units.ts';
+  import { getCameraName } from '#lib/utils/camera-utils.ts';
  import { getParentPath } from '#lib/utils/tree-utils.ts';
  import { AssetMediaSize, getAssetInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
-  import { createQuery } from '@tanstack/svelte-query';
  import { Icon, IconButton, Link, LoadingSpinner, Text } from '@immich/ui';
  import { mdiCamera, mdiCameraIris, mdiClose, mdiImageOutline, mdiInformationOutline } from '@mdi/js';
+  import { createQuery } from '@tanstack/svelte-query';
  import { onDestroy } from 'svelte';
  import { t } from 'svelte-i18n';
  import { slide } from 'svelte/transition';
+  import { goto } from '$app/navigation';
  import PersonSidePanel from '../faces-page/PersonSidePanel.svelte';
  import UserAvatar from '../shared-components/UserAvatar.svelte';
  import AlbumListItemDetails from './AlbumListItemDetails.svelte';
-  import DetailPanelPeople from '#lib/components/asset-viewer/DetailPanelPeople.svelte';
-  import { faceManager } from '#lib/stores/face.svelte.ts';
-  import { getAlbumsByAssetQuery } from '#lib/queries/album.query.ts';
-  import { createPreloadedQuery } from '#lib/queries/client.ts';
-  import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';
-  import { getCameraName } from '#lib/utils/camera-utils.ts';

  const query = createPreloadedQuery(getPublicConfigQuery);
  const publicConfig = $derived(query.data);
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
-  import type { OcrBox } from '#lib/utils/ocr-utils.ts';
-  import { calculateBoundingBoxMatrix, calculateFittedFontSize } from '#lib/utils/ocr-utils.ts';
+  import { calculateBoundingBoxMatrix, calculateFittedFontSize, type OcrBox } from '#lib/utils/ocr-utils.ts';

  type Props = {
    ocrBox: OcrBox;
@@ -2,10 +2,10 @@
  import { shortcuts } from '#lib/actions/shortcut.ts';
  import { zoomImageAction } from '#lib/actions/zoom-image.ts';
  import AdaptiveImage from '#lib/components/AdaptiveImage.svelte';
-  import FaceEditor from '#lib/components/asset-viewer/face-editor/FaceEditor.svelte';
-  import OcrBoundingBox from '#lib/components/asset-viewer/OcrBoundingBox.svelte';
  import AssetViewerEvents from '#lib/components/AssetViewerEvents.svelte';
  import Thumbhash from '#lib/components/Thumbhash.svelte';
+  import OcrBoundingBox from '#lib/components/asset-viewer/OcrBoundingBox.svelte';
+  import FaceEditor from '#lib/components/asset-viewer/face-editor/FaceEditor.svelte';
  import { assetViewerManager, type Faces } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { castManager } from '#lib/managers/cast-manager.svelte.ts';
  import { faceManager } from '#lib/stores/face.svelte.ts';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { castManager, CastState } from '#lib/managers/cast-manager.svelte.ts';
+  import { CastState, castManager } from '#lib/managers/cast-manager.svelte.ts';
  import { handleError } from '#lib/utils/handle-error.ts';
  import { Icon, IconButton, LoadingSpinner } from '@immich/ui';
  import { mdiCastConnected, mdiPause, mdiPlay } from '@mdi/js';
@@ -1,10 +1,10 @@
 <script lang="ts">
  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
  import { Icon } from '@immich/ui';
-  import { mdiChevronRight, mdiChevronLeft } from '@mdi/js';
+  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import NavigationArea from '../NavigationArea.svelte';
-  import { languageManager } from '#lib/managers/language-manager.svelte.ts';

  interface Props {
    onNextAsset: () => void;
@@ -1,10 +1,10 @@
 <script lang="ts">
  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
  import { Icon } from '@immich/ui';
  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import NavigationArea from '../NavigationArea.svelte';
-  import { languageManager } from '#lib/managers/language-manager.svelte.ts';

  interface Props {
    onPreviousAsset: () => void;
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { shortcuts } from '#lib/actions/shortcut.ts';
-  import { editManager, EditToolType } from '#lib/managers/edit/edit-manager.svelte.ts';
+  import { EditToolType, editManager } from '#lib/managers/edit/edit-manager.svelte.ts';
  import { websocketEvents } from '#lib/stores/websocket.ts';
  import { getAssetEdits, type AssetResponseDto } from '@immich/sdk';
  import { Button, HStack, IconButton } from '@immich/ui';
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import BrokenAsset from '#lib/components/assets/BrokenAsset.svelte';
  import Image from '#lib/components/Image.svelte';
+  import BrokenAsset from '#lib/components/assets/BrokenAsset.svelte';
  import { Icon } from '@immich/ui';
  import { mdiEyeOffOutline } from '@mdi/js';
  import type { ClassValue } from 'svelte/elements';
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Thumbhash from '#lib/components/Thumbhash.svelte';
  import { ProjectionType } from '#lib/constants.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
@@ -24,9 +25,9 @@
  import { onMount } from 'svelte';
  import type { ClassValue } from 'svelte/elements';
  import { fade } from 'svelte/transition';
-  import Thumbhash from '#lib/components/Thumbhash.svelte';
  import ImageThumbnail from './ImageThumbnail.svelte';
  import VideoThumbnail from './VideoThumbnail.svelte';
+
  interface Props {
    asset: TimelineAsset;
    groupIndex?: number;
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { Card, CardBody, CardHeader, Heading, immichLogo, Logo, VStack } from '@immich/ui';
+  import { Card, CardBody, CardHeader, Heading, Logo, VStack, immichLogo } from '@immich/ui';
  import type { Snippet } from 'svelte';
+
  interface Props {
    title?: string;
    children?: Snippet;
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import MaintenanceBackupCard from '#lib/components/maintenance/MaintenanceBackupCard.svelte';
  import OnEvents from '#lib/components/OnEvents.svelte';
+  import MaintenanceBackupCard from '#lib/components/maintenance/MaintenanceBackupCard.svelte';
  import { getDatabaseBackupActions, handleRestoreDatabaseBackup } from '#lib/services/database-backups.service.ts';
  import { Button, ContextMenuButton } from '@immich/ui';
  import { t } from 'svelte-i18n';
@@ -1,10 +1,9 @@
 <script lang="ts">
  import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
-  import MaintenanceBackupEntry from '#lib/components/maintenance/MaintenanceBackupEntry.svelte';
  import OnEvents from '#lib/components/OnEvents.svelte';
+  import MaintenanceBackupEntry from '#lib/components/maintenance/MaintenanceBackupEntry.svelte';
  import { getDatabaseBackupDateTime, handleUploadDatabaseBackup } from '#lib/services/database-backups.service.ts';
-  import type { DatabaseBackupDto } from '@immich/sdk';
-  import { listDatabaseBackups } from '@immich/sdk';
+  import { listDatabaseBackups, type DatabaseBackupDto } from '@immich/sdk';
  import { Card, CardBody, HStack, Icon, ProgressBar, Stack, Text } from '@immich/ui';
  import { mdiCalendar, mdiTrayArrowUp } from '@mdi/js';
  import { DateTime } from 'luxon';
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { page } from '$app/state';
  import { t } from 'svelte-i18n';
+  import { page } from '$app/state';
 </script>

 <svelte:head>
@@ -8,7 +8,7 @@
  import { setSharedLink } from '#lib/utils.ts';
  import { handleError } from '#lib/utils/handle-error.ts';
  import { navigate } from '#lib/utils/navigation.ts';
-  import { sharedLinkLogin, SharedLinkType, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+  import { SharedLinkType, sharedLinkLogin, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
  import { Button, Logo, PasswordInput } from '@immich/ui';
  import { onDestroy, tick } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import type { Action } from '#lib/components/asset-viewer/actions/action.ts';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
  import RemoveFromSharedLink from '#lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte';
-  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
  import { AssetAction } from '#lib/constants.ts';
  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
@@ -20,6 +19,7 @@
  import { IconButton, Logo, toastManager } from '@immich/ui';
  import { mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
  import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';
  import ControlAppBar from '../shared-components/ControlAppBar.svelte';
  import GalleryViewer from '../shared-components/gallery-viewer/GalleryViewer.svelte';

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { themeManager, ThemePreference, ThemeSwitcher } from '@immich/ui';
+  import { ThemePreference, ThemeSwitcher, themeManager } from '@immich/ui';
 </script>

 {#if themeManager.preference !== ThemePreference.System}
@@ -1,7 +1,7 @@
 import {
-  type AlbumModalRow,
  AlbumModalRowConverter,
  AlbumModalRowType,
+  type AlbumModalRow,
 } from '#lib/components/shared-components/album-selection/album-selection-utils.ts';
 import { AlbumSortBy, SortOrder } from '#lib/stores/preferences.store.ts';
 import { factory } from '#test/unit/factories.ts';
@@ -1,6 +1,9 @@
 <script lang="ts">
-  import type { Shortcut } from '#lib/actions/shortcut.ts';
-  import { shortcut as bindShortcut, shortcutLabel as computeShortcutLabel } from '#lib/actions/shortcut.ts';
+  import {
+    shortcut as bindShortcut,
+    shortcutLabel as computeShortcutLabel,
+    type Shortcut,
+  } from '#lib/actions/shortcut.ts';
  import { optionClickCallbackStore, selectedIdStore } from '#lib/stores/context-menu.store.ts';
  import { Icon, type IconLike } from '@immich/ui';

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.ts';
-  import type { Action } from '#lib/components/asset-viewer/actions/action.ts';
  import type { AssetCursor } from '#lib/components/asset-viewer/AssetViewer.svelte';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.ts';
  import Thumbnail from '#lib/components/assets/thumbnail/Thumbnail.svelte';
  import { AssetAction } from '#lib/constants.ts';
  import Portal from '#lib/elements/Portal.svelte';
@@ -28,6 +27,7 @@
  import { modalManager } from '@immich/ui';
  import { debounce } from 'lodash-es';
  import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';

  const {
    TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
@@ -5,12 +5,12 @@
  import HelpAndFeedbackModal from '#lib/modals/HelpAndFeedbackModal.svelte';
  import { getAboutInfoQuery } from '#lib/queries/server-info.query.ts';
  import { Route } from '#lib/route.ts';
-  import { page } from '$app/state';
  import { Button, Icon, IconButton, modalManager } from '@immich/ui';
  import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
  import { createQuery } from '@tanstack/svelte-query';
  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';
+  import { page } from '$app/state';
  import UserAvatar from '../UserAvatar.svelte';

  type Props = {
@@ -3,21 +3,21 @@
 </script>

 <script lang="ts">
-  import { page } from '$app/state';
  import { clickOutside } from '#lib/actions/click-outside.ts';
  import NotificationPanel from '#lib/components/shared-components/navigation-bar/NotificationPanel.svelte';
  import SearchBar from '#lib/components/shared-components/search-bar/SearchBar.svelte';
  import SkipLink from '#lib/elements/SkipLink.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { getNotificationsQuery } from '#lib/queries/notification.query.ts';
  import { Route } from '#lib/route.ts';
  import { getGlobalActions } from '#lib/services/app.service.ts';
  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
  import { sidebarStore } from '#lib/stores/sidebar.svelte.ts';
-  import { getNotificationsQuery } from '#lib/queries/notification.query.ts';
  import { ActionButton, Button, IconButton, Logo } from '@immich/ui';
-  import { createQuery } from '@tanstack/svelte-query';
  import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
+  import { createQuery } from '@tanstack/svelte-query';
  import { t } from 'svelte-i18n';
+  import { page } from '$app/state';
  import ThemeButton from '../ThemeButton.svelte';
  import UserAvatar from '../UserAvatar.svelte';
  import AccountInfoPanel from './AccountInfoPanel.svelte';
@@ -1,15 +1,14 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import { focusTrap } from '#lib/actions/focus-trap.ts';
  import NotificationItem from '#lib/components/shared-components/navigation-bar/NotificationItem.svelte';
  import { OpenQueryParam } from '#lib/constants.ts';
-  import { Route } from '#lib/route.ts';
  import { executeMutation } from '#lib/queries/client.ts';
  import {
    getNotificationsQuery,
    updateNotificationMutation,
    updateNotificationsMutation,
  } from '#lib/queries/notification.query.ts';
+  import { Route } from '#lib/route.ts';
  import { NotificationType, type NotificationDto } from '@immich/sdk';
  import { Button, Icon, Scrollable, Stack, Text } from '@immich/ui';
  import { mdiBellOutline, mdiCheckAll } from '@mdi/js';
@@ -17,6 +16,7 @@
  import { t } from 'svelte-i18n';
  import { flip } from 'svelte/animate';
  import { fade } from 'svelte/transition';
+  import { goto } from '$app/navigation';

  const query = createQuery(getNotificationsQuery);
  const notifications = $derived(query.data ?? []);
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { ProgressBarStatus } from '#lib/constants.ts';
  import { handlePromiseError } from '#lib/utils.ts';
-
  import { onMount } from 'svelte';
  import { tweened } from 'svelte/motion';

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { Button } from '@immich/ui';
+  import { Button, type ButtonProps } from '@immich/ui';
  import { mdiCheck } from '@mdi/js';
  import type { Snippet } from 'svelte';
-  import type { ButtonProps } from '@immich/ui';

  type Props = {
    active: boolean;
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import SearchButton from './SearchButton.svelte';
  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
  import { Text } from '@immich/ui';
  import { t } from 'svelte-i18n';
+  import SearchButton from './SearchButton.svelte';

  let filters = $derived(searchManager.filter.display);
 </script>
@@ -2,7 +2,7 @@
  import Combobox, { asComboboxOptions, asSelectedOption } from '#lib/components/shared-components/Combobox.svelte';
  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
  import { handlePromiseError } from '#lib/utils.ts';
-  import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
+  import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
  import { Text } from '@immich/ui';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -1,8 +1,8 @@
 <script lang="ts">
  import { MediaType } from '#lib/constants.ts';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
  import { Text } from '@immich/ui';
  import { t } from 'svelte-i18n';
-  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
  import SearchButton from './SearchButton.svelte';

  let filteredMedia = $derived(searchManager.filter.mediaType);
@@ -3,9 +3,9 @@
  import { defaultLang } from '#lib/constants.ts';
  import { lang } from '#lib/stores/preferences.store.ts';
  import { convertBCP47, getClosestAvailableLocale, langCodes, langs } from '#lib/utils/i18n.ts';
-  import { refreshAll } from '$app/navigation';
  import { Label, Text } from '@immich/ui';
  import { locale as i18nLocale, t } from 'svelte-i18n';
+  import { refreshAll } from '$app/navigation';

  interface Props {
    showSettingDescription?: boolean;
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { ImmichBackupsSidebarItem } from '@futo-org/backups-orchestrator-ui';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { hideBackupsReminder } from '#lib/stores/preferences.store.ts';
+  import { ImmichBackupsSidebarItem } from '@futo-org/backups-orchestrator-ui';
  import PurchaseInfo from './PurchaseInfo.svelte';
  import ServerStatus from './ServerStatus.svelte';
  import StorageSpace from './StorageSpace.svelte';
-  import { Route } from '#lib/route.ts';
-  import { hideBackupsReminder } from '#lib/stores/preferences.store.ts';
 </script>

 <div class="ms-4 mt-auto overflow-hidden rounded-lg">
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import { OpenQueryParam } from '#lib/constants.ts';
  import Portal from '#lib/elements/Portal.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
@@ -9,11 +8,12 @@
  import { handleError } from '#lib/utils/handle-error.ts';
  import { getButtonVisibility } from '#lib/utils/purchase-utils.ts';
  import { updateMyPreferences } from '@immich/sdk';
-  import { Button, Icon, IconButton, Logo, modalManager, SupporterBadge } from '@immich/ui';
+  import { Button, Icon, IconButton, Logo, SupporterBadge, modalManager } from '@immich/ui';
  import { mdiClose, mdiInformationOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import { SvelteDate } from 'svelte/reactivity';
  import { fade } from 'svelte/transition';
+  import { goto } from '$app/navigation';

  let showMessage = $state(false);
  let hoverMessage = $state(false);
@@ -6,9 +6,9 @@
  import { websocketStore } from '#lib/stores/websocket.ts';
  import { semverToName } from '#lib/utils.ts';
  import { type ReleaseEventV1 } from '@immich/sdk';
-  import { Icon, modalManager, Text } from '@immich/ui';
-  import { createQuery } from '@tanstack/svelte-query';
+  import { Icon, Text, modalManager } from '@immich/ui';
  import { mdiAlert, mdiNewBox } from '@mdi/js';
+  import { createQuery } from '@tanstack/svelte-query';
  import { t } from 'svelte-i18n';

  const { serverVersion, connected } = websocketStore;
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
-  import { locale } from '#lib/stores/preferences.store.ts';
  import { getStorageQuery } from '#lib/queries/server-info.query.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
  import { getByteUnitString } from '#lib/utils/byte-units.ts';
  import { LoadingSpinner, Meter } from '@immich/ui';
  import { createQuery } from '@tanstack/svelte-query';
@@ -5,6 +5,8 @@
  import RecentAlbums from '#lib/components/shared-components/side-bar/RecentAlbums.svelte';
  import Sidebar from '#lib/components/sidebar/Sidebar.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
  import { Route } from '#lib/route.ts';
  import { recentAlbumsDropdown } from '#lib/stores/preferences.store.ts';
  import { NavbarGroup, NavbarItem } from '@immich/ui';
@@ -38,8 +40,6 @@
  } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import { fly } from 'svelte/transition';
-  import { createPreloadedQuery } from '#lib/queries/client.ts';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';

  const query = createPreloadedQuery(getUserConfigQuery);
  const config = $derived(query.data);
@@ -1,7 +1,7 @@
 <script lang="ts">
+  import type { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.ts';
  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
  import type { ViewerAsset } from '#lib/managers/timeline-manager/viewer-asset.svelte.ts';
-  import type { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.ts';
  import { uploadAssetsStore } from '#lib/stores/upload.ts';
  import type { CommonPosition } from '#lib/utils/layout-utils.ts';
  import type { Snippet } from 'svelte';
@@ -1,11 +1,11 @@
 <script lang="ts">
  import AssetLayout from '#lib/components/timeline/AssetLayout.svelte';
+  import type { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.ts';
  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
  import { TimelineDay } from '#lib/managers/timeline-manager/timeline-day.svelte.ts';
  import type { TimelineMonth } from '#lib/managers/timeline-manager/timeline-month.svelte.ts';
  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
  import { assetsSnapshot, filterIsInOrNearViewport } from '#lib/managers/timeline-manager/utils.svelte.ts';
-  import type { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.ts';
  import { uploadAssetsStore } from '#lib/stores/upload.ts';
  import type { CommonPosition } from '#lib/utils/layout-utils.ts';
  import { fromTimelinePlainDate, getDateLocaleString } from '#lib/utils/timeline-util.ts';
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate } from '$app/navigation';
-  import { page } from '$app/state';
  import Thumbnail from '#lib/components/assets/thumbnail/Thumbnail.svelte';
  import Month from '#lib/components/timeline/Month.svelte';
  import Scrubber from '#lib/components/timeline/Scrubber.svelte';
@@ -13,10 +11,10 @@
  import Skeleton from '#lib/elements/Skeleton.svelte';
  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
-  import type { TimelineDay } from '#lib/managers/timeline-manager/timeline-day.svelte.ts';
  import { isIntersecting } from '#lib/managers/timeline-manager/internal/intersection-support.svelte.ts';
-  import type { TimelineMonth } from '#lib/managers/timeline-manager/timeline-month.svelte.ts';
+  import type { TimelineDay } from '#lib/managers/timeline-manager/timeline-day.svelte.ts';
  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+  import type { TimelineMonth } from '#lib/managers/timeline-manager/timeline-month.svelte.ts';
  import type {
    TimelineAsset,
    TimelineManagerOptions,
@@ -31,6 +29,8 @@
  import { DateTime } from 'luxon';
  import { onDestroy, onMount, tick, type Snippet } from 'svelte';
  import type { UpdatePayload } from 'vite';
+  import { afterNavigate, beforeNavigate } from '$app/navigation';
+  import { page } from '$app/state';

  interface Props {
    isSelectionMode?: boolean;
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Action } from '#lib/components/asset-viewer/actions/action.ts';
-  import type { AssetCursor } from '#lib/components/asset-viewer/AssetViewer.svelte';
  import OnEvents from '#lib/components/OnEvents.svelte';
+  import type { AssetCursor } from '#lib/components/asset-viewer/AssetViewer.svelte';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.ts';
  import { AssetAction } from '#lib/constants.ts';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.ts';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
@@ -14,7 +14,7 @@
  import { handleErrorAsync } from '#lib/utils/handle-error.ts';
  import { navigate } from '#lib/utils/navigation.ts';
  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
-  import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto, getAssetInfo } from '@immich/sdk';
+  import { getAssetInfo, type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
  import { onDestroy, onMount } from 'svelte';
  import { t } from 'svelte-i18n';

@@ -4,7 +4,7 @@
  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
  import AssetDeleteConfirmModal from '#lib/modals/AssetDeleteConfirmModal.svelte';
  import { showDeleteModal } from '#lib/stores/preferences.store.ts';
-  import { type OnDelete, type OnUndoDelete, deleteAssets } from '#lib/utils/actions.ts';
+  import { deleteAssets, type OnDelete, type OnUndoDelete } from '#lib/utils/actions.ts';
  import { IconButton, modalManager } from '@immich/ui';
  import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
  import { t } from 'svelte-i18n';
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { shortcut } from '#lib/actions/shortcut.ts';
-
  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
@@ -21,8 +21,8 @@
  import { handlePromiseError } from '#lib/utils.ts';
  import { deleteAssets } from '#lib/utils/actions.ts';
  import { selectAllAssets } from '#lib/utils/asset-utils.ts';
-  import { goto } from '$app/navigation';
  import { isModalOpen, modalManager } from '@immich/ui';
+  import { goto } from '$app/navigation';

  type Props = {
    timelineManager: TimelineManager;
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { t } from 'svelte-i18n';
  import { Duration } from 'luxon';
+  import { t } from 'svelte-i18n';

  interface Props {
    value: number;
@@ -2,12 +2,12 @@ import { authManager } from '#lib/managers/auth-manager.svelte.ts';
 import { handlePromiseError } from '#lib/utils.ts';
 import { handleError } from '#lib/utils/handle-error.ts';
 import {
+  ReactionLevel,
+  ReactionType,
  createActivity,
  deleteActivity,
  getActivities,
  getActivityStatistics,
-  ReactionLevel,
-  ReactionType,
  type ActivityCreateDto,
  type ActivityResponseDto,
 } from '@immich/sdk';
@@ -2,6 +2,7 @@ import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
 import { BaseEventManager } from '#lib/utils/base-event-manager.svelte.ts';
 import type { TreeNode } from '#lib/utils/tree-utils.ts';
 import type {
+  AdminConfigDto,
  AlbumResponseDto,
  AlbumUserRole,
  ApiKeyResponseDto,
@@ -14,7 +15,6 @@ import type {
  QueueResponseDto,
  ReleaseEventV1,
  StackResponseDto,
-  AdminConfigDto,
  TagResponseDto,
  UserAdminResponseDto,
 } from '@immich/sdk';
@@ -7,15 +7,15 @@ import { Route } from '#lib/route.ts';
 import { memoryLaneTitle } from '#lib/utils.ts';
 import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
 import {
-  type AssetResponseDto,
  MemorySearchOrder,
  MemoryType,
  deleteMemory,
-  type MemoryResponseDto,
+  memoriesStatistics,
  removeMemoryAssets,
  searchMemories,
  updateMemory,
-  memoriesStatistics,
+  type AssetResponseDto,
+  type MemoryResponseDto,
 } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 import { isEqual, omitBy } from 'lodash-es';
@@ -1,5 +1,8 @@
-import type { CommonLayoutOptions, CommonPosition } from '#lib/utils/layout-utils.ts';
-import { getJustifiedLayoutFromAssets } from '#lib/utils/layout-utils.ts';
+import {
+  getJustifiedLayoutFromAssets,
+  type CommonLayoutOptions,
+  type CommonPosition,
+} from '#lib/utils/layout-utils.ts';
 import { getOrderingDate, plainDateTimeCompare } from '#lib/utils/timeline-util.ts';
 import { TUNABLES } from '#lib/utils/tunables.ts';
 import { AssetOrder, AssetOrderBy } from '@immich/sdk';
@@ -8,15 +8,15 @@ import { handleError } from '#lib/utils/handle-error.ts';
 import {
  formatGroupTitle,
  formatTimelineMonthTitle,
+  fromISODateTimeUTC,
  fromTimelinePlainDate,
  fromTimelinePlainDateTime,
  fromTimelinePlainYearMonth,
+  getOrderingDate,
  getTimes,
  setDifference,
  type TimelineDateTime,
  type TimelineYearMonth,
-  getOrderingDate,
-  fromISODateTimeUTC,
 } from '#lib/utils/timeline-util.ts';
 import { AssetOrder, AssetOrderBy, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import AlbumSharedLink from '#lib/components/album-page/AlbumSharedLink.svelte';
  import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
+  import AlbumSharedLink from '#lib/components/album-page/AlbumSharedLink.svelte';
  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
+  import { getAlbumQuery, updateAlbumInfoMutation } from '#lib/queries/album.query.ts';
+  import { executeMutation, queryClient } from '#lib/queries/client.ts';
+  import { getAllSharedLinksQuery } from '#lib/queries/shared-link.query.ts';
  import {
    getAlbumActions,
    handleRemoveUserFromAlbum,
    handleUpdateUserAlbumRole,
  } from '#lib/services/album.service.ts';
-  import { getAlbumQuery, updateAlbumInfoMutation } from '#lib/queries/album.query.ts';
-  import { executeMutation, queryClient } from '#lib/queries/client.ts';
-  import { getAllSharedLinksQuery } from '#lib/queries/shared-link.query.ts';
  import {
    AlbumUserRole,
    AssetOrder,
@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { appStoreBadge, BasicModal, Button, Constants, playStoreBadge } from '@immich/ui';
+  import { BasicModal, Button, Constants, appStoreBadge, playStoreBadge } from '@immich/ui';
  import { mdiOpenInNew } from '@mdi/js';
  import { t } from 'svelte-i18n';
+
  type Props = {
    onClose: () => void;
  };
@@ -2,7 +2,7 @@
  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { handleError } from '#lib/utils/handle-error.ts';
-  import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
+  import { UserAvatarColor, deleteProfileImage, updateMyUser } from '@immich/sdk';
  import { Modal, ModalBody, toastManager } from '@immich/ui';
  import { t } from 'svelte-i18n';

@@ -4,7 +4,7 @@
  import { type ServerAboutResponseDto } from '@immich/sdk';
  import { Heading, Icon, Link, Modal, ModalBody, Stack, Text } from '@immich/ui';
  import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
-  import { type SimpleIcon, siDiscord } from 'simple-icons';
+  import { siDiscord, type SimpleIcon } from 'simple-icons';
  import { t } from 'svelte-i18n';

  type Props = {
@@ -2,8 +2,9 @@
  import { createApiKeyMutation } from '#lib/queries/api-key.query.ts';
  import { executeMutation } from '#lib/queries/client.ts';
  import { Permission } from '@immich/sdk';
-  import { Button, Field, Input, Modal, ModalBody, obtainiumBadge, Select, Text } from '@immich/ui';
+  import { Button, Field, Input, Modal, ModalBody, Select, Text, obtainiumBadge } from '@immich/ui';
  import { t } from 'svelte-i18n';
+
  let inputUrl = $state(location.origin);
  let inputApiKey = $state('');
  let archVariant = $state('');
@@ -1,7 +1,7 @@
 <script lang="ts">
  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
-  import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
+  import { PartnerDirection, getPartners, searchUsers, type UserResponseDto } from '@immich/sdk';
  import { Button, ListButton, LoadingSpinner, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
  import { t } from 'svelte-i18n';

@@ -4,7 +4,7 @@
  import type { PeopleFilter } from '#lib/types.ts';
  import { handleError } from '#lib/utils/handle-error.ts';
  import { getClusterGroupUsers, type UserResponseDto } from '@immich/sdk';
-  import { Button, Checkbox, FormModal, Label, modalManager, Stack, Text } from '@immich/ui';
+  import { Button, Checkbox, FormModal, Label, Stack, Text, modalManager } from '@immich/ui';
  import { mdiClose, mdiTune } from '@mdi/js';
  import { onMount, untrack } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -12,10 +12,10 @@
    Field,
    FormModal,
    LoadingSpinner,
-    modalManager,
    Select,
    Switch,
    Text,
+    modalManager,
    type ActionItem,
  } from '@immich/ui';
  import { mdiAccountMultipleOutline, mdiPencilOutline } from '@mdi/js';
@@ -6,9 +6,9 @@
  import { getPersonUserActions, getPersonUsersActions } from '#lib/services/person-user.service.ts';
  import { handleError } from '#lib/utils/handle-error.ts';
  import {
+    SharingDirection,
    getClusterGroupUsers,
    getUsersForPeople,
-    SharingDirection,
    type PersonResponseDto,
    type UserResponseDto,
  } from '@immich/sdk';
@@ -2,7 +2,7 @@
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { handleUpdatePerson } from '#lib/services/person.service.ts';
  import { PersonUpdateStrategy, type PersonResponseDto } from '@immich/sdk';
-  import { Checkbox, DatePicker, Field, FormModal, HelperText, HStack, Input, Label, Stack } from '@immich/ui';
+  import { Checkbox, DatePicker, Field, FormModal, HStack, HelperText, Input, Label, Stack } from '@immich/ui';
  import { mdiPencilOutline } from '@mdi/js';
  import { DateTime } from 'luxon';
  import { t } from 'svelte-i18n';
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
  import { handleResetPinCode } from '#lib/services/user.service.ts';
  import { BasicModal, Field, FormModal, HelperText, PasswordInput, Stack, type ModalSize } from '@immich/ui';
  import { mdiLockReset } from '@mdi/js';
  import { t } from 'svelte-i18n';
-  import { createPreloadedQuery } from '#lib/queries/client.ts';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';

  const query = createPreloadedQuery(getUserConfigQuery);
  const config = $derived(query.data);
@@ -1,10 +1,10 @@
 <script lang="ts">
+  import { queryClient } from '#lib/queries/client.ts';
+  import { searchPluginMethodsQuery } from '#lib/queries/plugin.query.ts';
  import { WorkflowTrigger, type PluginMethodResponseDto } from '@immich/sdk';
  import { Badge, BasicModal, ListButton, LoadingSpinner, Stack, Text } from '@immich/ui';
  import { createQuery } from '@tanstack/svelte-query';
  import { t } from 'svelte-i18n';
-  import { queryClient } from '#lib/queries/client.ts';
-  import { searchPluginMethodsQuery } from '#lib/queries/plugin.query.ts';

  type Props = {
    trigger: WorkflowTrigger;
@@ -1,7 +1,6 @@
 <script lang="ts">
  import PurchaseActivationSuccess from '#lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
  import PurchaseContent from '#lib/components/shared-components/purchasing/PurchaseContent.svelte';
-
  import { Modal, ModalBody } from '@immich/ui';

  interface Props {
@@ -1,12 +1,12 @@
 <script lang="ts">
  import FormatMessage from '#lib/elements/FormatMessage.svelte';
  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
  import { deleteUserAdminMutation } from '#lib/queries/user-admin.query.ts';
  import { type UserAdminResponseDto } from '@immich/sdk';
  import { Alert, Checkbox, ConfirmModal, Field, Input, Label, Text } from '@immich/ui';
  import { mdiTrashCanOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';

  const query = createPreloadedQuery(getUserConfigQuery);
  const config = $derived(query.data);
@@ -4,7 +4,7 @@
  import { type JSONSchemaProperty, type SchemaConfig } from '#lib/types.ts';
  import { getWorkflowDefaultConfig } from '#lib/utils/workflow.ts';
  import { WorkflowTrigger, type PluginMethodResponseDto, type WorkflowStepDto } from '@immich/sdk';
-  import { FormModal, IconButton, modalManager, Stack, Text, Textarea } from '@immich/ui';
+  import { FormModal, IconButton, Stack, Text, Textarea, modalManager } from '@immich/ui';
  import { mdiPencilOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import { executeMutation } from '#lib/queries/client.ts';
  import { createWorkflowMutation } from '#lib/queries/workflow.query.ts';
  import { Route } from '#lib/route.ts';
  import { WorkflowTrigger, type WorkflowResponseDto } from '@immich/sdk';
  import { Field, FormModal, Input, Textarea, VStack } from '@immich/ui';
  import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';

  type Props = {
    workflow: WorkflowResponseDto;
@@ -5,7 +5,7 @@
  import { type JSONSchemaProperty, type SchemaConfig } from '#lib/types.ts';
  import { getWorkflowDefaultConfig } from '#lib/utils/workflow.ts';
  import { WorkflowTrigger, type WorkflowStepDto } from '@immich/sdk';
-  import { Button, FormModal, modalManager, Stack, Text, Textarea } from '@immich/ui';
+  import { Button, FormModal, Stack, Text, Textarea, modalManager } from '@immich/ui';
  import { mdiPencilOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';

@@ -1,28 +1,28 @@
 <script lang="ts">
-  import { type WorkflowLogEntryDto, type WorkflowResponseDto, WorkflowResult, getWorkflowLogs } from '@immich/sdk';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { updateWorkflowMutation } from '#lib/queries/workflow.query.ts';
+  import { Route } from '#lib/route.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { WorkflowResult, getWorkflowLogs, type WorkflowLogEntryDto, type WorkflowResponseDto } from '@immich/sdk';
  import {
-    Modal,
-    ModalBody,
-    Table,
-    TableHeader,
-    TableHeading,
-    TableBody,
-    TableRow,
-    TableCell,
+    Button,
    HStack,
    Icon,
-    VStack,
-    Button,
+    Modal,
+    ModalBody,
    Select,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeading,
+    TableRow,
+    VStack,
    type SelectOption,
  } from '@immich/ui';
  import { mdiHistory, mdiOpenInNew } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import { locale } from '#lib/stores/preferences.store.ts';
  import { DateTime } from 'luxon';
-  import { Route } from '#lib/route.ts';
-  import { executeMutation } from '#lib/queries/client.ts';
-  import { updateWorkflowMutation } from '#lib/queries/workflow.query.ts';
+  import { t } from 'svelte-i18n';

  type Props = {
    workflow: WorkflowResponseDto;
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
  import { executeMutation } from '#lib/queries/client.ts';
  import { createWorkflowMutation } from '#lib/queries/workflow.query.ts';
@@ -8,6 +7,7 @@
  import { Badge, FormModal, Icon, ListButton, Text } from '@immich/ui';
  import { mdiFlashOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';

  type Props = {
    onClose: () => void;
@@ -4,11 +4,11 @@ import { asMutation, queryClient } from '#lib/queries/client.ts';
 import { Route } from '#lib/route.ts';
 import { getFormatter } from '#lib/utils/i18n.ts';
 import {
+  AlbumUserRole,
+  BulkIdErrorReason,
  addAssetsToAlbum,
  addAssetsToAlbums,
  addUsersToAlbum,
-  AlbumUserRole,
-  BulkIdErrorReason,
  createAlbum,
  deleteAlbum,
  getAlbumInfo,
@@ -5,12 +5,12 @@ import { handleError } from '#lib/utils/handle-error.ts';
 import { getFormatter } from '#lib/utils/i18n.ts';
 import { toastManager } from '@immich/ui';
 import {
-  createQuery,
-  hashKey,
  MutationCache,
-  mutationOptions,
  MutationObserver,
  QueryClient,
+  createQuery,
+  hashKey,
+  mutationOptions,
  type CreateMutationOptions,
  type DefaultError,
  type DefinedCreateQueryResult,
@@ -1,4 +1,4 @@
-import { asMutation, MutationCancelledError, queryClient } from '#lib/queries/client.ts';
+import { MutationCancelledError, asMutation, queryClient } from '#lib/queries/client.ts';
 import {
  deletePasskey,
  finishAuthentication,
@@ -1,5 +1,5 @@
 import { OpenQueryParam, type SharedLinkTab } from '#lib/constants.ts';
-import { getBaseUrl, IntegrityReport, QueueName, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
+import { IntegrityReport, QueueName, getBaseUrl, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
 import { omitBy } from 'lodash-es';

 const asQueueSlug = (name: QueueName) => {
@@ -21,7 +21,9 @@ import { getFormatter } from '#lib/utils/i18n.ts';
 import { AlbumUserRole, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import {
+  mdiCogOutline,
  mdiDownload,
+  mdiExitToApp,
  mdiImageOutline,
  mdiLink,
  mdiPlus,
@@ -29,9 +31,7 @@ import {
  mdiRenameOutline,
  mdiShareVariantOutline,
  mdiTrashCanOutline,
-  mdiExitToApp,
  mdiUpload,
-  mdiCogOutline,
 } from '@mdi/js';
 import { type MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
@@ -13,8 +13,7 @@ import { executeMutation, readPreloadedQuery } from '#lib/queries/client.ts';
 import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
 import { Route } from '#lib/route.ts';
 import { SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.ts';
-import { getAssetMediaUrl, getSharedLink, sleep } from '#lib/utils.ts';
-import { downloadUrl } from '#lib/utils.ts';
+import { downloadUrl, getAssetMediaUrl, getSharedLink, sleep } from '#lib/utils.ts';
 import type { OnFavorite } from '#lib/utils/actions.ts';
 import { handleError } from '#lib/utils/handle-error.ts';
 import { getFormatter } from '#lib/utils/i18n.ts';
@@ -63,8 +62,7 @@ import {
  mdiTagPlusOutline,
  mdiTune,
 } from '@mdi/js';
-import type { MessageFormatter } from 'svelte-i18n';
-import { t } from 'svelte-i18n';
+import { t, type MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';
 import { goto } from '$app/navigation';

@@ -4,10 +4,10 @@ import { openFilePicker } from '#lib/utils/file-uploader.ts';
 import { handleError } from '#lib/utils/handle-error.ts';
 import { getFormatter } from '#lib/utils/i18n.ts';
 import {
+  MaintenanceAction,
  deleteDatabaseBackup,
  getBaseUrl,
  listDatabaseBackups,
-  MaintenanceAction,
  setMaintenanceMode,
  type DatabaseBackupDto,
  type DatabaseBackupUploadDto,
@@ -2,7 +2,7 @@ import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import { Route } from '#lib/route.ts';
 import { handleError } from '#lib/utils/handle-error.ts';
 import { getFormatter } from '#lib/utils/i18n.ts';
-import { createJob, deleteIntegrityReport, IntegrityReport, ManualJobName } from '@immich/sdk';
+import { IntegrityReport, ManualJobName, createJob, deleteIntegrityReport } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiDownload, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
@@ -5,8 +5,8 @@ import PersonEditModal from '#lib/modals/PersonEditModal.svelte';
 import { handleError } from '#lib/utils/handle-error.ts';
 import { getFormatter } from '#lib/utils/i18n.ts';
 import {
-  getPerson,
  PersonUpdateStrategy,
+  getPerson,
  updatePerson,
  type AssetResponseDto,
  type PersonResponseDto,
@@ -7,10 +7,10 @@ import type { HeaderButtonActionItem } from '#lib/types.ts';
 import { handleError } from '#lib/utils/handle-error.ts';
 import { getFormatter } from '#lib/utils/i18n.ts';
 import {
-  emptyQueue,
-  getQueue,
  QueueCommand,
  QueueName,
+  emptyQueue,
+  getQueue,
  runQueueCommandLegacy,
  updateQueue,
  type QueueResponseDto,
@@ -1,7 +1,7 @@
 import { Route } from '#lib/route.ts';
 import { maintenanceStore } from '#lib/stores/maintenance.store.ts';
 import { websocketStore } from '#lib/stores/websocket.ts';
-import { getMaintenanceStatus, MaintenanceAction, maintenanceLogin } from '@immich/sdk';
+import { MaintenanceAction, getMaintenanceStatus, maintenanceLogin } from '@immich/sdk';

 export function maintenanceCreateUrl(url: URL) {
  return new URL(Route.maintenanceMode({ continue: url.pathname + url.search }), url.origin).href;
@@ -1,7 +1,7 @@
 import type { AssetDescriptor, TimelineAsset, ViewportTopMonth } from '#lib/managers/timeline-manager/types.ts';
 import { locale } from '#lib/stores/preferences.store.ts';
 import { getAssetRatio } from '#lib/utils/asset-utils.ts';
-import { AssetTypeEnum, AssetOrderBy, type AssetResponseDto } from '@immich/sdk';
+import { AssetOrderBy, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
 import { DateTime, type LocaleOptions } from 'luxon';
 import { SvelteSet } from 'svelte/reactivity';
 import { get } from 'svelte/store';
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { page } from '$app/state';
-  import UploadCover from './DragAndDropUploadOverlay.svelte';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import type { Snippet } from 'svelte';
+  import { page } from '$app/state';
+  import UploadCover from './DragAndDropUploadOverlay.svelte';
+
  interface Props {
    children?: Snippet;
  }
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { page } from '$app/state';
  import { shouldIgnoreEvent } from '#lib/actions/shortcut.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { dragAndDropFilesStore } from '#lib/stores/drag-and-drop-files.store.ts';
@@ -8,6 +7,7 @@
  import { Logo } from '@immich/ui';
  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';
+  import { page } from '$app/state';

  let albumId = $derived(isAlbumsRoute(page.route?.id) ? page.params.albumId : undefined);
  let isInLockedFolder = $derived(isLockedFolderRoute(page.route.id));
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { scrollMemory } from '#lib/actions/scroll-memory.svelte.ts';
-  import AlbumsControls from './AlbumsControls.svelte';
  import Albums from '#lib/components/album-page/AlbumsList.svelte';
  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
@@ -13,6 +12,7 @@
  import { createAlbumAndRedirect } from '#lib/utils/album-utils.ts';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
+  import AlbumsControls from './AlbumsControls.svelte';

  interface Props {
    data: PageData;
@@ -7,12 +7,10 @@
    AlbumGroupBy,
    AlbumSortBy,
    AlbumViewMode,
-    albumViewSettings,
    SortOrder,
+    albumViewSettings,
  } from '#lib/stores/preferences.store.ts';
  import {
-    type AlbumGroupOptionMetadata,
-    type AlbumSortOptionMetadata,
    collapseAllAlbumGroups,
    createAlbumAndRedirect,
    expandAllAlbumGroups,
@@ -22,6 +20,8 @@
    getSelectedAlbumGroupOption,
    groupOptionsMetadata,
    sortOptionsMetadata,
+    type AlbumGroupOptionMetadata,
+    type AlbumSortOptionMetadata,
  } from '#lib/utils/album-utils.ts';
  import { Button, IconButton, Text } from '@immich/ui';
  import {
@@ -1,16 +1,18 @@
 <script lang="ts">
-  import { goto, onNavigate } from '$app/navigation';
  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.svelte.ts';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
  import AlbumMap from '#lib/components/album-page/AlbumMap.svelte';
  import AlbumSummary from '#lib/components/album-page/AlbumSummary.svelte';
  import ActivityStatus from '#lib/components/asset-viewer/ActivityStatus.svelte';
  import ActivityViewer from '#lib/components/asset-viewer/ActivityViewer.svelte';
-  import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
-  import OnEvents from '#lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '#lib/components/timeline/Timeline.svelte';
  import ChangeDate from '#lib/components/timeline/actions/ChangeDateAction.svelte';
  import ChangeDescription from '#lib/components/timeline/actions/ChangeDescriptionAction.svelte';
  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
@@ -19,27 +21,32 @@
  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
  import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
-  import Timeline from '#lib/components/timeline/Timeline.svelte';
  import { AlbumPageViewMode } from '#lib/constants.ts';
  import { activityManager } from '#lib/managers/activity-manager.svelte.ts';
-  import { assetMultiSelectManager, AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { AssetMultiSelectManager, assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import {
+    deleteAlbumMutation,
+    getAlbumInfoQuery,
+    invalidateAlbum,
+    updateAlbumInfoMutation,
+  } from '#lib/queries/album.query.ts';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
  import { Route } from '#lib/route.ts';
  import { getAlbumActions, getAlbumAssetsActions, isAlbumEditor, isAlbumOwner } from '#lib/services/album.service.ts';
  import { getGlobalActions } from '#lib/services/app.service.ts';
  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.ts';
  import { handlePromiseError } from '#lib/utils.ts';
+  import { delay } from '#lib/utils/asset-utils.ts';
  import { handleError } from '#lib/utils/handle-error.ts';
  import { isAlbumsRoute, navigate, type AssetGridRouteSearchParams } from '#lib/utils/navigation.ts';
  import { AlbumUserRole, AssetVisibility } from '@immich/sdk';
-
  import { ActionButton, CommandPaletteDefaultProvider, Icon, IconButton } from '@immich/ui';
-
  import {
    mdiAccountEye,
    mdiAccountEyeOutline,
@@ -55,19 +62,10 @@
  import { onDestroy } from 'svelte';
  import { t } from 'svelte-i18n';
  import { fly } from 'svelte/transition';
+  import { goto, onNavigate } from '$app/navigation';
  import type { PageProps } from './$types';
  import AlbumDescription from './AlbumDescription.svelte';
  import AlbumTitle from './AlbumTitle.svelte';
-  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
-  import { delay } from '#lib/utils/asset-utils.ts';
-  import {
-    deleteAlbumMutation,
-    getAlbumInfoQuery,
-    invalidateAlbum,
-    updateAlbumInfoMutation,
-  } from '#lib/queries/album.query.ts';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';

  let { params }: PageProps = $props();

@@ -1,16 +1,15 @@
 <script lang="ts">
  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
-  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '#lib/components/timeline/Timeline.svelte';
  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
-  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
-  import Timeline from '#lib/components/timeline/Timeline.svelte';
-  import { AssetAction } from '#lib/constants.ts';
-
  import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import { AssetAction } from '#lib/constants.ts';
  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
  import LicenseActivationSuccess from '#lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
  import LicenseContent from '#lib/components/shared-components/purchasing/PurchaseContent.svelte';
-  import SupporterBadge from './SupporterBadge.svelte';
  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { Route } from '#lib/route.ts';
  import { Alert, Container, Stack } from '@immich/ui';
  import { mdiAlertCircleOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
+  import { goto } from '$app/navigation';
  import type { PageData } from './$types';
+  import SupporterBadge from './SupporterBadge.svelte';

  interface Props {
    data: PageData;
@@ -1,22 +1,22 @@
 <script lang="ts">
+  import OnEvents from '#lib/components/OnEvents.svelte';
  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
  import PersonIndicator from '#lib/components/faces-page/PersonIndicator.svelte';
  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
-  import OnEvents from '#lib/components/OnEvents.svelte';
+  import MemoryCard from '#lib/components/memories/MemoryCard.svelte';
  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
  import SingleGridRow from '#lib/components/shared-components/SingleGridRow.svelte';
+  import Portal from '#lib/elements/Portal.svelte';
  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
  import { Route } from '#lib/route.ts';
  import { getAssetMediaUrl, getPeopleThumbnailUrl, memoryLaneTitle } from '#lib/utils.ts';
-  import { getAssetInfo, AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
-  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
-  import MemoryCard from '#lib/components/memories/MemoryCard.svelte';
+  import { getAltText } from '#lib/utils/thumbnail-util.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
+  import { AssetMediaSize, getAssetInfo, type SearchExploreResponseDto } from '@immich/sdk';
  import { ImageCarousel } from '@immich/ui';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
-  import { getAltText } from '#lib/utils/thumbnail-util.ts';
-  import Portal from '#lib/elements/Portal.svelte';

  interface Props {
    data: PageData;