diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index e2bdac7a8..eb05812cc 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -34,7 +34,7 @@ type NestedKeys<T, K = keyof T> = K extends keyof T & string
   : never;
 
 declare module 'svelte-i18n' {
-  import type { InterpolationValues } from '#lib/elements/format-message.js';
+  import type { InterpolationValues } from '#lib/elements/format-message.ts';
   import type { Readable } from 'svelte/store';
 
   type Translations = NestedKeys<typeof en>;
diff --git a/web/src/lib/actions/__test__/FocusTrap.spec.ts b/web/src/lib/actions/__test__/FocusTrap.spec.ts
index b8a0da845..c146c6a6b 100644
--- a/web/src/lib/actions/__test__/FocusTrap.spec.ts
+++ b/web/src/lib/actions/__test__/FocusTrap.spec.ts
@@ -1,5 +1,5 @@
 import FocusTrapTest from '#lib/actions/__test__/FocusTrapTest.svelte';
-import { setDefaultTabbleOptions } from '#lib/utils/focus-util.js';
+import { setDefaultTabbleOptions } from '#lib/utils/focus-util.ts';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { tick } from 'svelte';
diff --git a/web/src/lib/actions/__test__/FocusTrapTest.svelte b/web/src/lib/actions/__test__/FocusTrapTest.svelte
index f24adb465..6d20a05ab 100644
--- a/web/src/lib/actions/__test__/FocusTrapTest.svelte
+++ b/web/src/lib/actions/__test__/FocusTrapTest.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { focusTrap } from '#lib/actions/focus-trap.js';
+  import { focusTrap } from '#lib/actions/focus-trap.ts';
 
   interface Props {
     show: boolean;
diff --git a/web/src/lib/actions/click-outside.ts b/web/src/lib/actions/click-outside.ts
index 0ed684419..526f238f3 100644
--- a/web/src/lib/actions/click-outside.ts
+++ b/web/src/lib/actions/click-outside.ts
@@ -1,4 +1,4 @@
-import { matchesShortcut } from '#lib/actions/shortcut.js';
+import { matchesShortcut } from '#lib/actions/shortcut.ts';
 import type { ActionReturn } from 'svelte/action';
 
 interface Options {
diff --git a/web/src/lib/actions/context-menu-navigation.ts b/web/src/lib/actions/context-menu-navigation.ts
index 5e4f1713f..ea4cf110a 100644
--- a/web/src/lib/actions/context-menu-navigation.ts
+++ b/web/src/lib/actions/context-menu-navigation.ts
@@ -1,4 +1,4 @@
-import { shortcuts } from '#lib/actions/shortcut.js';
+import { shortcuts } from '#lib/actions/shortcut.ts';
 import { tick } from 'svelte';
 import type { Action } from 'svelte/action';
 
diff --git a/web/src/lib/actions/focus-trap.ts b/web/src/lib/actions/focus-trap.ts
index 2e29f7620..607ed2ac4 100644
--- a/web/src/lib/actions/focus-trap.ts
+++ b/web/src/lib/actions/focus-trap.ts
@@ -1,4 +1,4 @@
-import { getTabbable } from '#lib/utils/focus-util.js';
+import { getTabbable } from '#lib/utils/focus-util.ts';
 import { tick } from 'svelte';
 
 interface Options {
diff --git a/web/src/lib/actions/image-loader.svelte.ts b/web/src/lib/actions/image-loader.svelte.ts
index bd9defa37..f9cb76588 100644
--- a/web/src/lib/actions/image-loader.svelte.ts
+++ b/web/src/lib/actions/image-loader.svelte.ts
@@ -1,4 +1,4 @@
-import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.ts';
 
 export function loadImage(src: string, onLoad: () => void, onError: () => void, onStart?: () => void) {
   let destroyed = false;
diff --git a/web/src/lib/actions/list-navigation.ts b/web/src/lib/actions/list-navigation.ts
index 4b73101c1..8c373753a 100644
--- a/web/src/lib/actions/list-navigation.ts
+++ b/web/src/lib/actions/list-navigation.ts
@@ -1,4 +1,4 @@
-import { shortcuts } from '#lib/actions/shortcut.js';
+import { shortcuts } from '#lib/actions/shortcut.ts';
 import type { Action } from 'svelte/action';
 
 /**
diff --git a/web/src/lib/actions/scroll-memory.ts b/web/src/lib/actions/scroll-memory.ts
index 20daba721..2b29caabf 100644
--- a/web/src/lib/actions/scroll-memory.ts
+++ b/web/src/lib/actions/scroll-memory.ts
@@ -1,5 +1,5 @@
-import { SessionStorageKey } from '#lib/constants.js';
-import { handlePromiseError } from '#lib/utils.js';
+import { SessionStorageKey } from '#lib/constants.ts';
+import { handlePromiseError } from '#lib/utils.ts';
 import { navigating } from '$app/state';
 
 interface Options {
diff --git a/web/src/lib/actions/zoom-image.ts b/web/src/lib/actions/zoom-image.ts
index 451b8370d..c6d6d66e6 100644
--- a/web/src/lib/actions/zoom-image.ts
+++ b/web/src/lib/actions/zoom-image.ts
@@ -1,4 +1,4 @@
-import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
 import { createZoomImageWheel } from '@zoom-image/core';
 
 // Minimal touch shape — avoids importing DOM TouchEvent which isn't available in all TS targets.
diff --git a/web/src/lib/commands.ts b/web/src/lib/commands.ts
index 9e428d449..a6814e71f 100644
--- a/web/src/lib/commands.ts
+++ b/web/src/lib/commands.ts
@@ -1,8 +1,8 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { readPreloadedQuery } from '#lib/queries/client.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { Route } from '#lib/route.js';
-import { copyToClipboard } from '#lib/utils.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+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 {
   mdiAccountMultipleOutline,
diff --git a/web/src/lib/components/ActionMenuItem.svelte b/web/src/lib/components/ActionMenuItem.svelte
index 7ff5312f2..424d79f39 100644
--- a/web/src/lib/components/ActionMenuItem.svelte
+++ b/web/src/lib/components/ActionMenuItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { isEnabled } from '#lib/utils.js';
+  import { isEnabled } from '#lib/utils.ts';
   import { type ActionItem } from '@immich/ui';
 
   type Props = {
diff --git a/web/src/lib/components/AdaptiveImage.svelte b/web/src/lib/components/AdaptiveImage.svelte
index 2ecccced0..6b3896de1 100644
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import { TUNABLES } from '#lib/utils/tunables.js';
+  import { TUNABLES } from '#lib/utils/tunables.ts';
 
   // Chrome renders HDR images with normally invisible seam lines in a regular
   // grid pattern. When the user pinch/scroll zooms, these seams become visible
@@ -55,15 +55,15 @@
   import DelayedLoadingSpinner from '#lib/components/DelayedLoadingSpinner.svelte';
   import ImageLayer from '#lib/components/ImageLayer.svelte';
   import Thumbhash from '#lib/components/Thumbhash.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { getAssetUrls } from '#lib/utils.js';
-  import { AdaptiveImageLoader, type QualityList } from '#lib/utils/adaptive-image-loader.svelte.js';
-  import { scaleToCover, scaleToFit, type Size } from '#lib/utils/container-utils.js';
-  import { getAltText } from '#lib/utils/thumbnail-util.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-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';
+  import { getAltText } from '#lib/utils/thumbnail-util.ts';
+  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.js';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
 
   type Props = {
     asset: AssetResponseDto;
diff --git a/web/src/lib/components/AssetViewerEvents.svelte b/web/src/lib/components/AssetViewerEvents.svelte
index f51c6deb6..d356a2626 100644
--- a/web/src/lib/components/AssetViewerEvents.svelte
+++ b/web/src/lib/components/AssetViewerEvents.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { assetViewerManager, type Events } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import type { EventCallback, EventMap } from '#lib/utils/base-event-manager.svelte.js';
+  import { assetViewerManager, type Events } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import type { EventCallback, EventMap } from '#lib/utils/base-event-manager.svelte.ts';
   import { onMount } from 'svelte';
 
   type Props = {
diff --git a/web/src/lib/components/BreadcrumbActionPage.svelte b/web/src/lib/components/BreadcrumbActionPage.svelte
index 3fd17a868..d30acfb65 100644
--- a/web/src/lib/components/BreadcrumbActionPage.svelte
+++ b/web/src/lib/components/BreadcrumbActionPage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { HeaderButtonActionItem } from '#lib/types.js';
+  import type { HeaderButtonActionItem } from '#lib/types.ts';
   import {
     Breadcrumbs,
     Button,
diff --git a/web/src/lib/components/CalendarHeatmap.svelte b/web/src/lib/components/CalendarHeatmap.svelte
index 9b92c59c8..6e90f0005 100644
--- a/web/src/lib/components/CalendarHeatmap.svelte
+++ b/web/src/lib/components/CalendarHeatmap.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import type { CalendarHeatmapResponseDto } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { DateTime, Info } from 'luxon';
diff --git a/web/src/lib/components/HeaderActionButton.svelte b/web/src/lib/components/HeaderActionButton.svelte
index c214fed94..9ff90d21c 100644
--- a/web/src/lib/components/HeaderActionButton.svelte
+++ b/web/src/lib/components/HeaderActionButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { HeaderButtonActionItem } from '#lib/types.js';
+  import type { HeaderButtonActionItem } from '#lib/types.ts';
   import { Button, type Variants } from '@immich/ui';
 
   type Props = {
diff --git a/web/src/lib/components/Image.spec.ts b/web/src/lib/components/Image.spec.ts
index bd4453815..058dc97de 100644
--- a/web/src/lib/components/Image.spec.ts
+++ b/web/src/lib/components/Image.spec.ts
@@ -1,5 +1,5 @@
 import Image from '#lib/components/Image.svelte';
-import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.ts';
 import { fireEvent, render } from '@testing-library/svelte';
 
 vi.mock('#lib/utils/sw-messaging.js', () => ({
diff --git a/web/src/lib/components/Image.svelte b/web/src/lib/components/Image.svelte
index 039876d15..dcab91127 100644
--- a/web/src/lib/components/Image.svelte
+++ b/web/src/lib/components/Image.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { isFirefox } from '#lib/utils/asset-utils.js';
-  import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
+  import { isFirefox } from '#lib/utils/asset-utils.ts';
+  import { cancelImageUrl } from '#lib/utils/sw-messaging.ts';
   import { onDestroy, untrack } from 'svelte';
   import type { HTMLImgAttributes } from 'svelte/elements';
 
diff --git a/web/src/lib/components/ImageLayer.svelte b/web/src/lib/components/ImageLayer.svelte
index aa3af8c1d..8301f3d93 100644
--- a/web/src/lib/components/ImageLayer.svelte
+++ b/web/src/lib/components/ImageLayer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Image from '#lib/components/Image.svelte';
-  import type { AdaptiveImageLoader, ImageQuality } from '#lib/utils/adaptive-image-loader.svelte.js';
+  import type { AdaptiveImageLoader, ImageQuality } from '#lib/utils/adaptive-image-loader.svelte.ts';
 
   type Props = {
     adaptiveImageLoader: AdaptiveImageLoader;
diff --git a/web/src/lib/components/OnEvents.svelte b/web/src/lib/components/OnEvents.svelte
index 81179941b..b1142bbed 100644
--- a/web/src/lib/components/OnEvents.svelte
+++ b/web/src/lib/components/OnEvents.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { eventManager, type Events } from '#lib/managers/event-manager.svelte.js';
-  import type { EventCallback, EventMap } from '#lib/utils/base-event-manager.svelte.js';
+  import { eventManager, type Events } from '#lib/managers/event-manager.svelte.ts';
+  import type { EventCallback, EventMap } from '#lib/utils/base-event-manager.svelte.ts';
   import { onMount } from 'svelte';
 
   type Props = {
diff --git a/web/src/lib/components/SchemaConfiguration.svelte b/web/src/lib/components/SchemaConfiguration.svelte
index 3ded60fe8..2ab67dd2e 100644
--- a/web/src/lib/components/SchemaConfiguration.svelte
+++ b/web/src/lib/components/SchemaConfiguration.svelte
@@ -2,7 +2,7 @@
   import SchemaAlbumPicker from '#lib/components/SchemaAlbumPicker.svelte';
   import Self from '#lib/components/SchemaConfiguration.svelte';
   import SchemaTagPicker from '#lib/components/SchemaTagPicker.svelte';
-  import type { JSONSchemaProperty, SchemaConfig } from '#lib/types.js';
+  import type { JSONSchemaProperty, SchemaConfig } from '#lib/types.ts';
   import {
     CodeBlock,
     Field,
diff --git a/web/src/lib/components/SharedLinkExpiration.svelte b/web/src/lib/components/SharedLinkExpiration.svelte
index cca92ff0b..8c9353a17 100644
--- a/web/src/lib/components/SharedLinkExpiration.svelte
+++ b/web/src/lib/components/SharedLinkExpiration.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button, DatePicker, Field } from '@immich/ui';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/Thumbhash.svelte b/web/src/lib/components/Thumbhash.svelte
index f8390f079..13316de9e 100644
--- a/web/src/lib/components/Thumbhash.svelte
+++ b/web/src/lib/components/Thumbhash.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { decodeBase64 } from '#lib/utils.js';
-  import { TUNABLES } from '#lib/utils/tunables.js';
+  import { decodeBase64 } from '#lib/utils.ts';
+  import { TUNABLES } from '#lib/utils/tunables.ts';
   import type { HTMLCanvasAttributes } from 'svelte/elements';
   import { fade } from 'svelte/transition';
   import { thumbHashToRGBA } from 'thumbhash';
diff --git a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
index 138e022ee..e709306f5 100644
--- a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
+++ b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
@@ -2,14 +2,14 @@
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getAdminConfigQuery, updateAdminConfigMutation } from '#lib/queries/config-admin.query.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
+  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.js';
+  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';
diff --git a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
index b1fb2efcc..d4d703f01 100644
--- a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+++ b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import type { SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
   import { Card, CardBody, CardHeader, Heading, Text } from '@immich/ui';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/components/album-page/AlbumCard.svelte b/web/src/lib/components/album-page/AlbumCard.svelte
index 89f064b81..5c22e8366 100644
--- a/web/src/lib/components/album-page/AlbumCard.svelte
+++ b/web/src/lib/components/album-page/AlbumCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AlbumCover from '#lib/components/album-page/AlbumCover.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { getShortDateRange } from '#lib/utils/date-time.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { getShortDateRange } from '#lib/utils/date-time.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { ContextMenuButton, type MenuItems } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/album-page/AlbumCardGroup.svelte b/web/src/lib/components/album-page/AlbumCardGroup.svelte
index b30f600ba..40d30463d 100644
--- a/web/src/lib/components/album-page/AlbumCardGroup.svelte
+++ b/web/src/lib/components/album-page/AlbumCardGroup.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import AlbumCard from '#lib/components/album-page/AlbumCard.svelte';
   import Portal from '#lib/elements/Portal.svelte';
-  import { Route } from '#lib/route.js';
-  import { getAlbumActions } from '#lib/services/album.service.js';
-  import { albumViewSettings } from '#lib/stores/preferences.store.js';
-  import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '#lib/utils/album-utils.js';
+  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 type { AlbumResponseDto } from '@immich/sdk';
   import { Icon, menuManager, type ActionItem } from '@immich/ui';
   import { mdiChevronRight } from '@mdi/js';
diff --git a/web/src/lib/components/album-page/AlbumCover.svelte b/web/src/lib/components/album-page/AlbumCover.svelte
index 5c34a1fa7..8b97b89f0 100644
--- a/web/src/lib/components/album-page/AlbumCover.svelte
+++ b/web/src/lib/components/album-page/AlbumCover.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AssetCover from '#lib/components/sharedlinks-page/covers/AssetCover.svelte';
   import NoCover from '#lib/components/sharedlinks-page/covers/NoCover.svelte';
-  import { getAssetMediaUrl } from '#lib/utils.js';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/album-page/AlbumMap.svelte b/web/src/lib/components/album-page/AlbumMap.svelte
index ae1cc385f..d0e299b7c 100644
--- a/web/src/lib/components/album-page/AlbumMap.svelte
+++ b/web/src/lib/components/album-page/AlbumMap.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
   import MapModal from '#lib/modals/MapModal.svelte';
-  import { getAlbumMapMarkersQuery } from '#lib/queries/album.query.js';
-  import { navigate } from '#lib/utils/navigation.js';
+  import { getAlbumMapMarkersQuery } from '#lib/queries/album.query.ts';
+  import { navigate } from '#lib/utils/navigation.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiMapOutline } from '@mdi/js';
diff --git a/web/src/lib/components/album-page/AlbumSharedLink.svelte b/web/src/lib/components/album-page/AlbumSharedLink.svelte
index 279e21a5d..f6a9068a8 100644
--- a/web/src/lib/components/album-page/AlbumSharedLink.svelte
+++ b/web/src/lib/components/album-page/AlbumSharedLink.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getSharedLinkActions } from '#lib/services/shared-link.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { getSharedLinkActions } from '#lib/services/shared-link.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
   import { ActionButton, Text } from '@immich/ui';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/components/album-page/AlbumSummary.svelte b/web/src/lib/components/album-page/AlbumSummary.svelte
index a1b17a326..81a6e0954 100644
--- a/web/src/lib/components/album-page/AlbumSummary.svelte
+++ b/web/src/lib/components/album-page/AlbumSummary.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getAlbumDateRange } from '#lib/utils/date-time.js';
+  import { getAlbumDateRange } from '#lib/utils/date-time.ts';
   import type { AlbumResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/album-page/AlbumThumbnail.svelte b/web/src/lib/components/album-page/AlbumThumbnail.svelte
index d46cc4df3..75ad60924 100644
--- a/web/src/lib/components/album-page/AlbumThumbnail.svelte
+++ b/web/src/lib/components/album-page/AlbumThumbnail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AlbumCover from '#lib/components/album-page/AlbumCover.svelte';
-  import { getAlbumQuery } from '#lib/queries/album.query.js';
-  import { queryClient } from '#lib/queries/client.js';
+  import { getAlbumQuery } from '#lib/queries/album.query.ts';
+  import { queryClient } from '#lib/queries/client.ts';
   import { IconButton, Text, LoadingSpinner } from '@immich/ui';
   import { mdiTrashCanOutline } from '@mdi/js';
   import { createQuery } from '@tanstack/svelte-query';
diff --git a/web/src/lib/components/album-page/AlbumViewer.svelte b/web/src/lib/components/album-page/AlbumViewer.svelte
index 6b1209d55..c7ff5f513 100644
--- a/web/src/lib/components/album-page/AlbumViewer.svelte
+++ b/web/src/lib/components/album-page/AlbumViewer.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
+  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 { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { handleDownloadAlbum } from '#lib/services/album.service.js';
-  import { getGlobalActions } from '#lib/services/app.service.js';
-  import { dragAndDropFilesStore } from '#lib/stores/drag-and-drop-files.store.js';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { fileUploadHandler, openFileUploadDialog } from '#lib/utils/file-uploader.js';
+  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 { 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';
+  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
+  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { fileUploadHandler, openFileUploadDialog } from '#lib/utils/file-uploader.ts';
   import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
   import { ActionButton, IconButton, Logo } from '@immich/ui';
   import { mdiDownload, mdiFileImagePlusOutline, mdiPresentationPlay } from '@mdi/js';
@@ -22,8 +22,8 @@
   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.js';
-  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
+  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);
diff --git a/web/src/lib/components/album-page/AlbumsList.svelte b/web/src/lib/components/album-page/AlbumsList.svelte
index 0212c8c0a..432e0484b 100644
--- a/web/src/lib/components/album-page/AlbumsList.svelte
+++ b/web/src/lib/components/album-page/AlbumsList.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import AlbumCardGroup from '#lib/components/album-page/AlbumCardGroup.svelte';
   import AlbumsTable from '#lib/components/album-page/AlbumsTable.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleDeleteAlbum, isAlbumOwner } from '#lib/services/album.service.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleDeleteAlbum, isAlbumOwner } from '#lib/services/album.service.ts';
   import {
     AlbumFilter,
     AlbumGroupBy,
@@ -11,14 +11,14 @@
     locale,
     SortOrder,
     type AlbumViewSettings,
-  } from '#lib/stores/preferences.store.js';
+  } from '#lib/stores/preferences.store.ts';
   import {
     getSelectedAlbumGroupOption,
     sortAlbums,
     stringToSortOrder,
     type AlbumGroup,
-  } from '#lib/utils/album-utils.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  } from '#lib/utils/album-utils.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { groupBy } from 'lodash-es';
   import { onMount, type Snippet } from 'svelte';
diff --git a/web/src/lib/components/album-page/AlbumsTable.svelte b/web/src/lib/components/album-page/AlbumsTable.svelte
index 75418d904..550476b8a 100644
--- a/web/src/lib/components/album-page/AlbumsTable.svelte
+++ b/web/src/lib/components/album-page/AlbumsTable.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import AlbumTableHeader from '#lib/components/album-page/AlbumsTableHeader.svelte';
   import AlbumTableRow from '#lib/components/album-page/AlbumsTableRow.svelte';
-  import { AlbumGroupBy, albumViewSettings } from '#lib/stores/preferences.store.js';
+  import { AlbumGroupBy, albumViewSettings } from '#lib/stores/preferences.store.ts';
   import {
     isAlbumGroupCollapsed,
     sortOptionsMetadata,
     toggleAlbumGroupCollapsing,
     type AlbumGroup,
-  } from '#lib/utils/album-utils.js';
+  } from '#lib/utils/album-utils.ts';
   import { Icon } from '@immich/ui';
   import { mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/album-page/AlbumsTableHeader.svelte b/web/src/lib/components/album-page/AlbumsTableHeader.svelte
index 038d38944..09f455941 100644
--- a/web/src/lib/components/album-page/AlbumsTableHeader.svelte
+++ b/web/src/lib/components/album-page/AlbumsTableHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { albumViewSettings, SortOrder, AlbumSortBy } from '#lib/stores/preferences.store.js';
-  import type { AlbumSortOptionMetadata } from '#lib/utils/album-utils.js';
+  import { albumViewSettings, SortOrder, AlbumSortBy } from '#lib/stores/preferences.store.ts';
+  import type { AlbumSortOptionMetadata } from '#lib/utils/album-utils.ts';
   import { t } from 'svelte-i18n';
 
   interface Props {
diff --git a/web/src/lib/components/album-page/AlbumsTableRow.svelte b/web/src/lib/components/album-page/AlbumsTableRow.svelte
index 8c81438ad..9474c0786 100644
--- a/web/src/lib/components/album-page/AlbumsTableRow.svelte
+++ b/web/src/lib/components/album-page/AlbumsTableRow.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { dateFormats } from '#lib/constants.js';
+  import { dateFormats } from '#lib/constants.ts';
   import Portal from '#lib/elements/Portal.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { getAlbumActions } from '#lib/services/album.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAlbumActions } from '#lib/services/album.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { AlbumUserRole, type AlbumResponseDto } from '@immich/sdk';
   import { Icon, menuManager } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
diff --git a/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts b/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
index 8e00a39f3..335baa184 100644
--- a/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
@@ -1,4 +1,4 @@
-import { sdkMock } from '#lib/__mocks__/sdk.mock.js';
+import { sdkMock } from '#lib/__mocks__/sdk.mock.ts';
 import '@testing-library/jest-dom';
 import { render, waitFor, type RenderResult } from '@testing-library/svelte';
 import { init, register, waitLocale } from 'svelte-i18n';
diff --git a/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts b/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
index 65c93825e..af434b0e6 100644
--- a/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
@@ -1,5 +1,5 @@
 import AlbumCover from '#lib/components/album-page/AlbumCover.svelte';
-import { getAssetMediaUrl } from '#lib/utils.js';
+import { getAssetMediaUrl } from '#lib/utils.ts';
 import { render } from '@testing-library/svelte';
 import { albumFactory } from '#test-data/factories/album-factory';
 
diff --git a/web/src/lib/components/asset-viewer/ActivityStatus.svelte b/web/src/lib/components/asset-viewer/ActivityStatus.svelte
index de6b12093..00e0de56b 100644
--- a/web/src/lib/components/asset-viewer/ActivityStatus.svelte
+++ b/web/src/lib/components/asset-viewer/ActivityStatus.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import type { ActivityResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { mdiCommentOutline, mdiThumbUp, mdiThumbUpOutline } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/ActivityViewer.svelte b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
index 2295b8e0c..a9db0160f 100644
--- a/web/src/lib/components/asset-viewer/ActivityViewer.svelte
+++ b/web/src/lib/components/asset-viewer/ActivityViewer.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
-  import { timeBeforeShowLoadingSpinner } from '#lib/constants.js';
-  import { activityManager } from '#lib/managers/activity-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
-  import { getAssetType } from '#lib/utils/asset-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { isTenMinutesApart } from '#lib/utils/timesince.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
+  import { timeBeforeShowLoadingSpinner } 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 { Route } from '#lib/route.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
+  import { getAssetType } from '#lib/utils/asset-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { isTenMinutesApart } from '#lib/utils/timesince.ts';
   import { ReactionType, type ActivityResponseDto, type AlbumUserResponseDto, type AssetTypeEnum } from '@immich/sdk';
   import { ContextMenuButton, Icon, IconButton, LoadingSpinner, Textarea, toastManager } from '@immich/ui';
   import { mdiClose, mdiSend, mdiThumbUp, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/AlbumListItem.svelte b/web/src/lib/components/asset-viewer/AlbumListItem.svelte
index 5e5e9ac9e..534f69d81 100644
--- a/web/src/lib/components/asset-viewer/AlbumListItem.svelte
+++ b/web/src/lib/components/asset-viewer/AlbumListItem.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { SCROLL_PROPERTIES } from '#lib/components/shared-components/album-selection/album-selection-utils.js';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { SCROLL_PROPERTIES } from '#lib/components/shared-components/album-selection/album-selection-utils.ts';
+  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/AssetViewer.spec.ts b/web/src/lib/components/asset-viewer/AssetViewer.spec.ts
index 01a8f5d64..9b38701e7 100644
--- a/web/src/lib/components/asset-viewer/AssetViewer.spec.ts
+++ b/web/src/lib/components/asset-viewer/AssetViewer.spec.ts
@@ -1,7 +1,7 @@
-import { getAnimateMock } from '#lib/__mocks__/animate.mock.js';
-import { getResizeObserverMock } from '#lib/__mocks__/resize-observer.mock.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
+import { getAnimateMock } from '#lib/__mocks__/animate.mock.ts';
+import { getResizeObserverMock } from '#lib/__mocks__/resize-observer.mock.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.ts';
 import { renderWithTooltips } from '#tests/helpers';
 import { updateAsset } from '@immich/sdk';
 import { fireEvent, waitFor } from '@testing-library/svelte';
diff --git a/web/src/lib/components/asset-viewer/AssetViewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte
index ea6a4bed4..703007ac4 100644
--- a/web/src/lib/components/asset-viewer/AssetViewer.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewer.svelte
@@ -1,33 +1,33 @@
 <script lang="ts">
   import { browser } from '$app/env';
-  import { focusTrap } from '#lib/actions/focus-trap.js';
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import type { Action, OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.js';
+  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 AssetViewerNavBar from '#lib/components/asset-viewer/AssetViewerNavBar.svelte';
-  import { preloadManager } from '#lib/components/asset-viewer/PreloadManager.svelte.js';
+  import { preloadManager } from '#lib/components/asset-viewer/PreloadManager.svelte.ts';
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { AssetAction, ProjectionType } from '#lib/constants.js';
-  import { activityManager } from '#lib/managers/activity-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { editManager, EditToolType } from '#lib/managers/edit/edit-manager.svelte.js';
-  import { eventManager } from '#lib/managers/event-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { getAssetActions } from '#lib/services/asset.service.js';
-  import { faceManager } from '#lib/stores/face.svelte.js';
-  import { ocrManager } from '#lib/stores/ocr.svelte.js';
-  import { alwaysLoadOriginalVideo } from '#lib/stores/preferences.store.js';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
-  import { getSharedLink, handlePromiseError } from '#lib/utils.js';
-  import type { OnUndoDelete } from '#lib/utils/actions.js';
-  import { navigateToAsset } from '#lib/utils/asset-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { navigate } from '#lib/utils/navigation.js';
-  import { InvocationTracker } from '#lib/utils/invocationTracker.js';
-  import { SlideshowHistory } from '#lib/utils/slideshow-history.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  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 { 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';
+  import { faceManager } from '#lib/stores/face.svelte.ts';
+  import { ocrManager } from '#lib/stores/ocr.svelte.ts';
+  import { alwaysLoadOriginalVideo } from '#lib/stores/preferences.store.ts';
+  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.ts';
+  import { getSharedLink, handlePromiseError } from '#lib/utils.ts';
+  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 { SlideshowHistory } from '#lib/utils/slideshow-history.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import {
     AssetTypeEnum,
     getAssetInfo,
diff --git a/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts b/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
index ddae3e68f..5567a35c1 100644
--- a/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
+++ b/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
@@ -1,7 +1,7 @@
-import { getResizeObserverMock } from '#lib/__mocks__/resize-observer.mock.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+import { getResizeObserverMock } from '#lib/__mocks__/resize-observer.mock.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
 import { renderWithTooltips } from '#tests/helpers';
 import type { UserConfigDto } from '@immich/sdk';
 import '@testing-library/jest-dom';
diff --git a/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte b/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
index 934a3e770..63865f7ae 100644
--- a/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
+++ b/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
   import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
-  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.js';
+  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.ts';
   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 ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
-  import { getAlbumAssetActions } from '#lib/services/album.service.js';
-  import { getGlobalActions } from '#lib/services/app.service.js';
-  import { getAssetActions } from '#lib/services/asset.service.js';
-  import { getPersonAssetActions } from '#lib/services/person.service.js';
-  import { getStackActions } from '#lib/services/stack.service.js';
-  import { getSharedLink, withoutIcons } from '#lib/utils.js';
-  import type { OnUndoDelete } from '#lib/utils/actions.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
+  import { getAlbumAssetActions } from '#lib/services/album.service.ts';
+  import { getGlobalActions } from '#lib/services/app.service.ts';
+  import { getAssetActions } from '#lib/services/asset.service.ts';
+  import { getPersonAssetActions } from '#lib/services/person.service.ts';
+  import { getStackActions } from '#lib/services/stack.service.ts';
+  import { getSharedLink, withoutIcons } from '#lib/utils.ts';
+  import type { OnUndoDelete } from '#lib/utils/actions.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import {
     AssetTypeEnum,
     AssetVisibility,
diff --git a/web/src/lib/components/asset-viewer/DetailPanel.svelte b/web/src/lib/components/asset-viewer/DetailPanel.svelte
index 4d4d2729f..e1e8981ad 100644
--- a/web/src/lib/components/asset-viewer/DetailPanel.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanel.svelte
@@ -5,15 +5,15 @@
   import DetailPanelLocation from '#lib/components/asset-viewer/DetailPanelLocation.svelte';
   import DetailPanelRating from '#lib/components/asset-viewer/DetailPanelStarRating.svelte';
   import DetailPanelTags from '#lib/components/asset-viewer/DetailPanelTags.svelte';
-  import { timeToLoadTheMap } from '#lib/constants.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
-  import { delay, getDimensions } from '#lib/utils/asset-utils.js';
-  import { getByteUnitString } from '#lib/utils/byte-units.js';
-  import { getParentPath } from '#lib/utils/tree-utils.js';
+  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 { Route } from '#lib/route.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 { 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';
@@ -25,10 +25,10 @@
   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.js';
-  import { getAlbumsByAssetQuery } from '#lib/queries/album.query.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
+  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';
 
   const query = createPreloadedQuery(getPublicConfigQuery);
   const publicConfig = $derived(query.data);
diff --git a/web/src/lib/components/asset-viewer/DetailPanelDate.svelte b/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
index 8b071e322..b5626c33b 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import AssetChangeDateModal from '#lib/modals/AssetChangeDateModal.svelte';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { type AssetResponseDto } from '@immich/sdk';
   import { Icon, modalManager } from '@immich/ui';
   import { mdiCalendar, mdiPencil } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
index 0a1047684..cbd8c18c0 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
   import { Textarea, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte b/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
index 9005bf46d..b8a0a7035 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelLocation.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import GeolocationPointPickerModal from '#lib/modals/GeolocationPointPickerModal.svelte';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
   import { Icon, modalManager } from '@immich/ui';
   import { mdiMapMarkerOutline, mdiPencil } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte b/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte
index 07397bad0..0fbd5fac8 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelPeople.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { faceManager } from '#lib/stores/face.svelte.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
+  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 { faceManager } from '#lib/stores/face.svelte.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
   import { type AssetResponseDto } from '@immich/sdk';
   import { IconButton, Text } from '@immich/ui';
   import { mdiEye, mdiEyeOff, mdiPencil, mdiPlus } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/DetailPanelStarRating.svelte b/web/src/lib/components/asset-viewer/DetailPanelStarRating.svelte
index ad6f1b8ab..276545666 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelStarRating.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelStarRating.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import StarRating, { type Rating } from '#lib/elements/StarRating.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/asset-viewer/DetailPanelTags.svelte b/web/src/lib/components/asset-viewer/DetailPanelTags.svelte
index 4f56d22c3..fd2cffafe 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelTags.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelTags.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetActions } from '#lib/services/asset.service.js';
-  import { removeTag } from '#lib/utils/asset-utils.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAssetActions } from '#lib/services/asset.service.ts';
+  import { removeTag } from '#lib/utils/asset-utils.ts';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
   import { Badge, Link, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte b/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
index ef04644b0..88f01e09a 100644
--- a/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
+++ b/web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { getAssetUrl } from '#lib/utils.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { getAssetUrl } from '#lib/utils.ts';
   import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte b/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
index 28b92c2d3..2f25e5e56 100644
--- a/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
+++ b/web/src/lib/components/asset-viewer/OcrBoundingBox.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import type { OcrBox } from '#lib/utils/ocr-utils.js';
-  import { calculateBoundingBoxMatrix, calculateFittedFontSize } from '#lib/utils/ocr-utils.js';
+  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';
 
   type Props = {
     ocrBox: OcrBox;
diff --git a/web/src/lib/components/asset-viewer/OcrButton.svelte b/web/src/lib/components/asset-viewer/OcrButton.svelte
index ef5f66fcc..f20f55071 100644
--- a/web/src/lib/components/asset-viewer/OcrButton.svelte
+++ b/web/src/lib/components/asset-viewer/OcrButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ocrManager } from '#lib/stores/ocr.svelte.js';
+  import { ocrManager } from '#lib/stores/ocr.svelte.ts';
   import { IconButton } from '@immich/ui';
   import { mdiTextRecognition } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte b/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
index 00a1ab15a..b93b3d8e5 100644
--- a/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoSphereViewerAdapter.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
   import AssetViewerEvents from '#lib/components/AssetViewerEvents.svelte';
-  import { assetViewerManager, type Faces } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { ocrManager, type OcrBoundingBox } from '#lib/stores/ocr.svelte.js';
-  import { alwaysLoadOriginalFile } from '#lib/stores/preferences.store.js';
-  import { calculateBoundingBoxMatrix, getOcrBoundingBoxes, type Point } from '#lib/utils/ocr-utils.js';
+  import { assetViewerManager, type Faces } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { ocrManager, type OcrBoundingBox } from '#lib/stores/ocr.svelte.ts';
+  import { alwaysLoadOriginalFile } from '#lib/stores/preferences.store.ts';
+  import { calculateBoundingBoxMatrix, getOcrBoundingBoxes, type Point } from '#lib/utils/ocr-utils.ts';
   import {
     EquirectangularAdapter,
     Viewer,
diff --git a/web/src/lib/components/asset-viewer/PhotoViewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
index 270635248..f14934413 100644
--- a/web/src/lib/components/asset-viewer/PhotoViewer.svelte
+++ b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import { zoomImageAction } from '#lib/actions/zoom-image.js';
+  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 { assetViewerManager, type Faces } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { castManager } from '#lib/managers/cast-manager.svelte.js';
-  import { faceManager } from '#lib/stores/face.svelte.js';
-  import { ocrManager } from '#lib/stores/ocr.svelte.js';
-  import { SlideshowLook, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { canCopyImageToClipboard, copyImageToClipboard } from '#lib/utils/asset-utils.js';
-  import { getNaturalSize, scaleToFit, type Size } from '#lib/utils/container-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { getOcrBoundingBoxes } from '#lib/utils/ocr-utils.js';
-  import { getBoundingBox, type BoundingBox } from '#lib/utils/people-utils.js';
+  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';
+  import { ocrManager } from '#lib/stores/ocr.svelte.ts';
+  import { SlideshowLook, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { canCopyImageToClipboard, copyImageToClipboard } from '#lib/utils/asset-utils.ts';
+  import { getNaturalSize, scaleToFit, type Size } from '#lib/utils/container-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { getOcrBoundingBoxes } from '#lib/utils/ocr-utils.ts';
+  import { getBoundingBox, type BoundingBox } from '#lib/utils/people-utils.ts';
   import { type SharedLinkResponseDto } from '@immich/sdk';
   import { toastManager } from '@immich/ui';
   import { onDestroy, untrack } from 'svelte';
diff --git a/web/src/lib/components/asset-viewer/PreloadManager.svelte.ts b/web/src/lib/components/asset-viewer/PreloadManager.svelte.ts
index ec9ed17ec..f1836b64a 100644
--- a/web/src/lib/components/asset-viewer/PreloadManager.svelte.ts
+++ b/web/src/lib/components/asset-viewer/PreloadManager.svelte.ts
@@ -1,6 +1,6 @@
-import { loadImage } from '#lib/actions/image-loader.svelte.js';
-import { getAssetUrls } from '#lib/utils.js';
-import { AdaptiveImageLoader, type QualityList } from '#lib/utils/adaptive-image-loader.svelte.js';
+import { loadImage } from '#lib/actions/image-loader.svelte.ts';
+import { getAssetUrls } from '#lib/utils.ts';
+import { AdaptiveImageLoader, type QualityList } from '#lib/utils/adaptive-image-loader.svelte.ts';
 import type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
 
 type AssetCursor = {
diff --git a/web/src/lib/components/asset-viewer/SlideshowBar.svelte b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
index 054c8929e..98fecca24 100644
--- a/web/src/lib/components/asset-viewer/SlideshowBar.svelte
+++ b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.js';
+  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.ts';
   import ProgressBar from '#lib/components/shared-components/progress-bar/ProgressBar.svelte';
-  import { ProgressBarStatus } from '#lib/constants.js';
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
+  import { ProgressBarStatus } from '#lib/constants.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
   import SlideshowSettingsModal from '#lib/modals/SlideshowSettingsModal.svelte';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
+  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.ts';
   import { AssetTypeEnum } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/SlideshowMetadataOverlay.svelte b/web/src/lib/components/asset-viewer/SlideshowMetadataOverlay.svelte
index 5b675400b..be041a802 100644
--- a/web/src/lib/components/asset-viewer/SlideshowMetadataOverlay.svelte
+++ b/web/src/lib/components/asset-viewer/SlideshowMetadataOverlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { SlideshowMetadataOverlayMode, slideshowStore } from '#lib/stores/slideshow.store.js';
-  import { fromISODateTime, fromISODateTimeUTC } from '#lib/utils/timeline-util.js';
+  import { SlideshowMetadataOverlayMode, slideshowStore } from '#lib/stores/slideshow.store.ts';
+  import { fromISODateTime, fromISODateTimeUTC } from '#lib/utils/timeline-util.ts';
   import type { AssetResponseDto } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte b/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
index b1fdd0add..7a48c5250 100644
--- a/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoNativeViewer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import FaceEditor from '#lib/components/asset-viewer/face-editor/FaceEditor.svelte';
   import VideoRemoteViewer from '#lib/components/asset-viewer/VideoRemoteViewer.svelte';
-  import { assetViewerFadeDuration } from '#lib/constants.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { castManager } from '#lib/managers/cast-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { mediaCapabilitiesManager } from '#lib/managers/media-capabilities-manager.svelte.js';
-  import { autoPlayVideo, lang, loopVideo as loopVideoPreference } from '#lib/stores/preferences.store.js';
-  import { getAssetHlsSessionUrl, getAssetHlsUrl, getAssetMediaUrl, getAssetPlaybackUrl } from '#lib/utils.js';
+  import { assetViewerFadeDuration } from '#lib/constants.ts';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { castManager } from '#lib/managers/cast-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { mediaCapabilitiesManager } from '#lib/managers/media-capabilities-manager.svelte.ts';
+  import { autoPlayVideo, lang, loopVideo as loopVideoPreference } from '#lib/stores/preferences.store.ts';
+  import { getAssetHlsSessionUrl, getAssetHlsUrl, getAssetMediaUrl, getAssetPlaybackUrl } from '#lib/utils.ts';
   import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
   import { Icon, LoadingSpinner, shortcuts } from '@immich/ui';
   import {
@@ -44,8 +44,8 @@
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import './immich-time-range';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
+  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);
diff --git a/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte b/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
index 91a3e0653..b6b51dc01 100644
--- a/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getAssetPlaybackUrl, getAssetUrl } from '#lib/utils.js';
+  import { getAssetPlaybackUrl, getAssetUrl } from '#lib/utils.ts';
   import type { AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte b/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
index bc5ba8cee..5386d445e 100644
--- a/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoRemoteViewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { castManager, CastState } from '#lib/managers/cast-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { castManager, CastState } 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';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte b/web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte
index 8e0a136a9..b7b49eaac 100644
--- a/web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte
+++ b/web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import VideoNativeViewer from '#lib/components/asset-viewer/VideoNativeViewer.svelte';
   import VideoPanoramaViewer from '#lib/components/asset-viewer/VideoPanoramaViewer.svelte';
-  import { ProjectionType } from '#lib/constants.js';
+  import { ProjectionType } from '#lib/constants.ts';
   import type { AssetResponseDto } from '@immich/sdk';
 
   interface Props {
diff --git a/web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte b/web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte
index 59bc25d77..d8513a0c6 100644
--- a/web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte
+++ b/web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
-  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
+  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.ts';
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { AssetAction } from '#lib/constants.js';
-  import { toggleArchive } from '#lib/utils/asset-utils.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { AssetAction } from '#lib/constants.ts';
+  import { toggleArchive } from '#lib/utils/asset-utils.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import type { AssetResponseDto } from '@immich/sdk';
   import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/actions/DeleteAction.svelte b/web/src/lib/components/asset-viewer/actions/DeleteAction.svelte
index 5b9dc8717..ab3304ed5 100644
--- a/web/src/lib/components/asset-viewer/actions/DeleteAction.svelte
+++ b/web/src/lib/components/asset-viewer/actions/DeleteAction.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import { AssetAction } from '#lib/constants.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { AssetAction } from '#lib/constants.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import AssetDeleteConfirmModal from '#lib/modals/AssetDeleteConfirmModal.svelte';
-  import { showDeleteModal } from '#lib/stores/preferences.store.js';
-  import { deleteAssets as deleteAssetsUtil, type OnUndoDelete } from '#lib/utils/actions.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { showDeleteModal } from '#lib/stores/preferences.store.ts';
+  import { deleteAssets as deleteAssetsUtil, type OnUndoDelete } from '#lib/utils/actions.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
   import { IconButton, modalManager, toastManager } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte b/web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte
index b4fb9c768..33eed740e 100644
--- a/web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte
+++ b/web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
   import { Icon } from '@immich/ui';
   import { mdiChevronRight, mdiChevronLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import NavigationArea from '../NavigationArea.svelte';
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
 
   interface Props {
     onNextAsset: () => void;
diff --git a/web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte b/web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte
index b5f34720a..ecd041773 100644
--- a/web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte
+++ b/web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { shortcuts } from '#lib/actions/shortcut.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.js';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
 
   interface Props {
     onPreviousAsset: () => void;
diff --git a/web/src/lib/components/asset-viewer/actions/RestoreAction.svelte b/web/src/lib/components/asset-viewer/actions/RestoreAction.svelte
index f010b21c3..00a52ce66 100644
--- a/web/src/lib/components/asset-viewer/actions/RestoreAction.svelte
+++ b/web/src/lib/components/asset-viewer/actions/RestoreAction.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { AssetAction } from '#lib/constants.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { AssetAction } from '#lib/constants.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
   import { toastManager } from '@immich/ui';
   import { mdiHistory } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte b/web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte
index 942565f7b..229b37481 100644
--- a/web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte
+++ b/web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { AssetAction } from '#lib/constants.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { AssetAction } from '#lib/constants.ts';
+  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { AssetVisibility, updateAssets } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
   import { mdiLockOpenVariantOutline, mdiLockOutline } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/actions/action.ts b/web/src/lib/components/asset-viewer/actions/action.ts
index 91c417ba6..c59320b5c 100644
--- a/web/src/lib/components/asset-viewer/actions/action.ts
+++ b/web/src/lib/components/asset-viewer/actions/action.ts
@@ -1,5 +1,5 @@
-import type { AssetAction } from '#lib/constants.js';
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+import type { AssetAction } from '#lib/constants.ts';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
 
 type ActionMap = {
   [AssetAction.ARCHIVE]: { asset: TimelineAsset };
diff --git a/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte b/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
index 63e620539..04d0cd959 100644
--- a/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
+++ b/web/src/lib/components/asset-viewer/editor/EditorPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import { editManager, EditToolType } from '#lib/managers/edit/edit-manager.svelte.js';
-  import { websocketEvents } from '#lib/stores/websocket.js';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { editManager, EditToolType } 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';
   import { mdiClose } from '@mdi/js';
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
index 5036e1778..0dfa77fdc 100644
--- a/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
+++ b/web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { ResizeBoundary, transformManager } from '#lib/managers/edit/transform-manager.svelte.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
-  import { getAltText } from '#lib/utils/thumbnail-util.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { ResizeBoundary, transformManager } from '#lib/managers/edit/transform-manager.svelte.ts';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
+  import { getAltText } from '#lib/utils/thumbnail-util.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import { onMount } from 'svelte';
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
index 12d35f0d4..dce3f7764 100644
--- a/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
+++ b/web/src/lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import { transformManager } from '#lib/managers/edit/transform-manager.svelte.js';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { transformManager } from '#lib/managers/edit/transform-manager.svelte.ts';
   import { Button, HStack, IconButton } from '@immich/ui';
   import { mdiFlipHorizontal, mdiFlipVertical, mdiRotateLeft, mdiRotateRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte b/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
index c734833ad..d0a7a43d5 100644
--- a/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
+++ b/web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
   import FaceCreateTagModal from '#lib/modals/CreateFaceModal.svelte';
-  import { faceManager } from '#lib/stores/face.svelte.js';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
-  import { getNaturalSize, scaleToFit } from '#lib/utils/container-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { faceManager } from '#lib/stores/face.svelte.ts';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
+  import { getNaturalSize, scaleToFit } from '#lib/utils/container-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index 4d836524b..10b53e3c0 100644
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { ProjectionType } from '#lib/constants.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { locale, playVideoThumbnailOnHover } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl, getAssetPlaybackUrl } from '#lib/utils.js';
-  import { moveFocus } from '#lib/utils/focus-util.js';
-  import { currentUrlReplaceAssetId } from '#lib/utils/navigation.js';
-  import { getAltText } from '#lib/utils/thumbnail-util.js';
+  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';
+  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
+  import { locale, playVideoThumbnailOnHover } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl, getAssetPlaybackUrl } from '#lib/utils.ts';
+  import { moveFocus } from '#lib/utils/focus-util.ts';
+  import { currentUrlReplaceAssetId } from '#lib/utils/navigation.ts';
+  import { getAltText } from '#lib/utils/thumbnail-util.ts';
   import { AssetMediaSize, AssetVisibility, type UserResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import {
diff --git a/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts b/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
index ee0d4ba64..ffe24f238 100644
--- a/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
+++ b/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
@@ -1,6 +1,6 @@
-import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.ts';
 import Thumbnail from '#lib/components/assets/thumbnail/Thumbnail.svelte';
-import { getTabbable } from '#lib/utils/focus-util.js';
+import { getTabbable } from '#lib/utils/focus-util.ts';
 import { render } from '@testing-library/svelte';
 import { assetFactory } from '#test-data/factories/asset-factory';
 
diff --git a/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
index dbc41e919..d0cfe5146 100644
--- a/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
+++ b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import SearchPeople from '#lib/components/faces-page/PeopleSearch.svelte';
-  import { timeBeforeShowLoadingSpinner } from '#lib/constants.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { getPeopleThumbnailUrl, handlePromiseError } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { zoomImageToBase64 } from '#lib/utils/people-utils.js';
-  import { getPersonNameWithHiddenValue } from '#lib/utils/person.js';
+  import { timeBeforeShowLoadingSpinner } from '#lib/constants.ts';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { getPeopleThumbnailUrl, handlePromiseError } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { zoomImageToBase64 } from '#lib/utils/people-utils.ts';
+  import { getPersonNameWithHiddenValue } from '#lib/utils/person.ts';
   import { AssetTypeEnum, getAllPeople, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { IconButton, LoadingSpinner } from '@immich/ui';
   import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
diff --git a/web/src/lib/components/faces-page/PeopleSearch.svelte b/web/src/lib/components/faces-page/PeopleSearch.svelte
index eac9a4e05..70d55792d 100644
--- a/web/src/lib/components/faces-page/PeopleSearch.svelte
+++ b/web/src/lib/components/faces-page/PeopleSearch.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { initInput } from '#lib/actions/focus.js';
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '#lib/constants.js';
+  import { initInput } from '#lib/actions/focus.ts';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '#lib/constants.ts';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { searchNameLocal } from '#lib/utils/person.js';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { searchNameLocal } from '#lib/utils/person.ts';
   import { searchPerson, type PersonResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/faces-page/PersonSidePanel.svelte b/web/src/lib/components/faces-page/PersonSidePanel.svelte
index b04bdc9f6..06e24dd51 100644
--- a/web/src/lib/components/faces-page/PersonSidePanel.svelte
+++ b/web/src/lib/components/faces-page/PersonSidePanel.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { timeBeforeShowLoadingSpinner } from '#lib/constants.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { eventManager } from '#lib/managers/event-manager.svelte.js';
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
-  import { getPeopleThumbnailUrl, handlePromiseError } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { zoomImageToBase64 } from '#lib/utils/people-utils.js';
-  import { getPersonNameWithHiddenValue } from '#lib/utils/person.js';
+  import { timeBeforeShowLoadingSpinner } from '#lib/constants.ts';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
+  import { getPeopleThumbnailUrl, handlePromiseError } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { zoomImageToBase64 } from '#lib/utils/people-utils.ts';
+  import { getPersonNameWithHiddenValue } from '#lib/utils/person.ts';
   import {
     AssetTypeEnum,
     createPerson,
diff --git a/web/src/lib/components/layouts/AdminPageLayout.svelte b/web/src/lib/components/layouts/AdminPageLayout.svelte
index 536596e83..03fa0d5fc 100644
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.svelte
@@ -2,9 +2,9 @@
   import BreadcrumbActionPage from '#lib/components/BreadcrumbActionPage.svelte';
   import NavigationBar from '#lib/components/shared-components/navigation-bar/NavigationBar.svelte';
   import BottomInfo from '#lib/components/shared-components/side-bar/BottomInfo.svelte';
-  import { Route } from '#lib/route.js';
-  import { sidebarStore } from '#lib/stores/sidebar.svelte.js';
-  import type { HeaderButtonActionItem } from '#lib/types.js';
+  import { Route } from '#lib/route.ts';
+  import { sidebarStore } from '#lib/stores/sidebar.svelte.ts';
+  import type { HeaderButtonActionItem } from '#lib/types.ts';
   import { AppShell, AppShellHeader, AppShellSidebar, MenuItemType, NavbarItem, type BreadcrumbItem } from '@immich/ui';
   import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiTrayFull, mdiWrench } from '@mdi/js';
   import type { Snippet } from 'svelte';
diff --git a/web/src/lib/components/layouts/UserPageLayout.svelte b/web/src/lib/components/layouts/UserPageLayout.svelte
index b5eb3b1be..fc364c1f7 100644
--- a/web/src/lib/components/layouts/UserPageLayout.svelte
+++ b/web/src/lib/components/layouts/UserPageLayout.svelte
@@ -3,11 +3,11 @@
 </script>
 
 <script lang="ts">
-  import { useActions, type ActionArray } from '#lib/actions/use-actions.js';
+  import { useActions, type ActionArray } from '#lib/actions/use-actions.ts';
   import NavigationBar from '#lib/components/shared-components/navigation-bar/NavigationBar.svelte';
   import UserSidebar from '#lib/components/shared-components/side-bar/UserSidebar.svelte';
-  import type { HeaderButtonActionItem } from '#lib/types.js';
-  import { openFileUploadDialog } from '#lib/utils/file-uploader.js';
+  import type { HeaderButtonActionItem } from '#lib/types.ts';
+  import { openFileUploadDialog } from '#lib/utils/file-uploader.ts';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/maintenance/MaintenanceBackupEntry.spec.ts b/web/src/lib/components/maintenance/MaintenanceBackupEntry.spec.ts
index f97d56376..af612c9e5 100644
--- a/web/src/lib/components/maintenance/MaintenanceBackupEntry.spec.ts
+++ b/web/src/lib/components/maintenance/MaintenanceBackupEntry.spec.ts
@@ -1,4 +1,4 @@
-import { locale } from '#lib/stores/preferences.store.js';
+import { locale } from '#lib/stores/preferences.store.ts';
 import { renderWithTooltips } from '#tests/helpers';
 import { screen } from '@testing-library/svelte';
 import { DateTime } from 'luxon';
diff --git a/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte b/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte
index e2939b070..71e148214 100644
--- a/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte
+++ b/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { BackupFileStatus } from '#lib/constants.js';
-  import { getDatabaseBackupActions, handleRestoreDatabaseBackup } from '#lib/services/database-backups.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getBytesWithUnit } from '#lib/utils/byte-units.js';
+  import { BackupFileStatus } from '#lib/constants.ts';
+  import { getDatabaseBackupActions, handleRestoreDatabaseBackup } from '#lib/services/database-backups.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getBytesWithUnit } from '#lib/utils/byte-units.ts';
   import { Button, Card, CardBody, ContextMenuButton, HStack, Icon, Stack, Text } from '@immich/ui';
   import { mdiAlertCircle, mdiCheckCircle, mdiDatabaseRefreshOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte b/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
index a38355dcc..30a9ac9fe 100644
--- a/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
+++ b/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
@@ -2,7 +2,7 @@
   import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
   import MaintenanceBackupEntry from '#lib/components/maintenance/MaintenanceBackupEntry.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { handleUploadDatabaseBackup } from '#lib/services/database-backups.service.js';
+  import { handleUploadDatabaseBackup } from '#lib/services/database-backups.service.ts';
   import type { DatabaseBackupDto } from '@immich/sdk';
   import { listDatabaseBackups } from '@immich/sdk';
   import { Card, CardBody, HStack, Icon, ProgressBar, Stack, Text } from '@immich/ui';
diff --git a/web/src/lib/components/maintenance/integrity/IntegrityReportTableItem.svelte b/web/src/lib/components/maintenance/integrity/IntegrityReportTableItem.svelte
index 8adc12adc..bb4342df3 100644
--- a/web/src/lib/components/maintenance/integrity/IntegrityReportTableItem.svelte
+++ b/web/src/lib/components/maintenance/integrity/IntegrityReportTableItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { getIntegrityReportItemActions } from '#lib/services/integrity.service.js';
+  import { getIntegrityReportItemActions } from '#lib/services/integrity.service.ts';
   import type { IntegrityReport } from '@immich/sdk';
   import { ContextMenuButton, TableCell, TableRow } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/pages/SharedLinkPage.svelte b/web/src/lib/components/pages/SharedLinkPage.svelte
index a5c0508da..13724a6be 100644
--- a/web/src/lib/components/pages/SharedLinkPage.svelte
+++ b/web/src/lib/components/pages/SharedLinkPage.svelte
@@ -3,11 +3,11 @@
   import IndividualSharedViewer from '#lib/components/share-page/IndividualSharedViewer.svelte';
   import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
   import ThemeButton from '#lib/components/shared-components/ThemeButton.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { setSharedLink } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { navigate } from '#lib/utils/navigation.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  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 { Button, Logo, PasswordInput } from '@immich/ui';
   import { onDestroy, tick } from 'svelte';
diff --git a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
index 7acc237eb..81a8510e8 100644
--- a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
+++ b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ByteUnit } from '#lib/utils/byte-units.js';
+  import { ByteUnit } from '#lib/utils/byte-units.ts';
   import { Icon, Text } from '@immich/ui';
   import type { Snippet } from 'svelte';
 
diff --git a/web/src/lib/components/share-page/IndividualSharedViewer.svelte b/web/src/lib/components/share-page/IndividualSharedViewer.svelte
index 59b7e80c0..dcbff1c31 100644
--- a/web/src/lib/components/share-page/IndividualSharedViewer.svelte
+++ b/web/src/lib/components/share-page/IndividualSharedViewer.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.ts';
   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.js';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import type { Viewport } from '#lib/managers/timeline-manager/types.js';
-  import { Route } from '#lib/route.js';
-  import { dragAndDropFilesStore } from '#lib/stores/drag-and-drop-files.store.js';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { downloadArchive } from '#lib/utils/asset-utils.js';
-  import { fileUploadHandler, openFileUploadDialog } from '#lib/utils/file-uploader.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  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';
+  import type { Viewport } from '#lib/managers/timeline-manager/types.ts';
+  import { Route } from '#lib/route.ts';
+  import { dragAndDropFilesStore } from '#lib/stores/drag-and-drop-files.store.ts';
+  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { downloadArchive } from '#lib/utils/asset-utils.ts';
+  import { fileUploadHandler, openFileUploadDialog } from '#lib/utils/file-uploader.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
   import { IconButton, Logo, toastManager } from '@immich/ui';
   import { mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
diff --git a/web/src/lib/components/shared-components/Combobox.svelte b/web/src/lib/components/shared-components/Combobox.svelte
index 2e53dc538..5db911fd5 100644
--- a/web/src/lib/components/shared-components/Combobox.svelte
+++ b/web/src/lib/components/shared-components/Combobox.svelte
@@ -20,9 +20,9 @@
 </script>
 
 <script lang="ts">
-  import { focusOutside } from '#lib/actions/focus-outside.js';
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import { generateId } from '#lib/utils/generate-id.js';
+  import { focusOutside } from '#lib/actions/focus-outside.ts';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { generateId } from '#lib/utils/generate-id.ts';
   import { Icon, IconButton, Label } from '@immich/ui';
   import { mdiChevronDown, mdiClose, mdiMagnify } from '@mdi/js';
   import { onMount, tick } from 'svelte';
diff --git a/web/src/lib/components/shared-components/CoordinatesInput.svelte b/web/src/lib/components/shared-components/CoordinatesInput.svelte
index a88180d84..83d9bd46d 100644
--- a/web/src/lib/components/shared-components/CoordinatesInput.svelte
+++ b/web/src/lib/components/shared-components/CoordinatesInput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import NumberRangeInput from '#lib/components/shared-components/NumberRangeInput.svelte';
-  import { generateId } from '#lib/utils/generate-id.js';
+  import { generateId } from '#lib/utils/generate-id.ts';
   import { convert } from 'geo-coordinates-parser';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/shared-components/UserAvatar.svelte b/web/src/lib/components/shared-components/UserAvatar.svelte
index 5e4f1c156..e3e1edf50 100644
--- a/web/src/lib/components/shared-components/UserAvatar.svelte
+++ b/web/src/lib/components/shared-components/UserAvatar.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-  import { getProfileImageUrl } from '#lib/utils.js';
+  import { getProfileImageUrl } from '#lib/utils.ts';
   import { type UserAvatarColor } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte b/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
index f7168d0c7..fd708c37a 100644
--- a/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
+++ b/web/src/lib/components/shared-components/album-selection/NewAlbumListItem.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SCROLL_PROPERTIES } from '#lib/components/shared-components/album-selection/album-selection-utils.js';
+  import { SCROLL_PROPERTIES } from '#lib/components/shared-components/album-selection/album-selection-utils.ts';
   import { Icon } from '@immich/ui';
   import { mdiPlus } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/album-selection/album-selection-utils.spec.ts b/web/src/lib/components/shared-components/album-selection/album-selection-utils.spec.ts
index 5f137b03e..352ddc8b9 100644
--- a/web/src/lib/components/shared-components/album-selection/album-selection-utils.spec.ts
+++ b/web/src/lib/components/shared-components/album-selection/album-selection-utils.spec.ts
@@ -2,8 +2,8 @@ import {
   type AlbumModalRow,
   AlbumModalRowConverter,
   AlbumModalRowType,
-} from '#lib/components/shared-components/album-selection/album-selection-utils.js';
-import { AlbumSortBy, SortOrder } from '#lib/stores/preferences.store.js';
+} from '#lib/components/shared-components/album-selection/album-selection-utils.ts';
+import { AlbumSortBy, SortOrder } from '#lib/stores/preferences.store.ts';
 import type { AlbumResponseDto } from '@immich/sdk';
 import { albumFactory } from '#test-data/factories/album-factory';
 
diff --git a/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts b/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts
index 97fb9705f..e6ff6712e 100644
--- a/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts
+++ b/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts
@@ -1,5 +1,5 @@
-import { sortAlbums } from '#lib/utils/album-utils.js';
-import { normalizeSearchString } from '#lib/utils/string-utils.js';
+import { sortAlbums } from '#lib/utils/album-utils.ts';
+import { normalizeSearchString } from '#lib/utils/string-utils.ts';
 import type { AlbumResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
diff --git a/web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte b/web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte
index 3de1d5e95..5a469df68 100644
--- a/web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { contextMenuNavigation } from '#lib/actions/context-menu-navigation.js';
-  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { contextMenuNavigation } from '#lib/actions/context-menu-navigation.ts';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
   import ContextMenu from '#lib/components/shared-components/context-menu/ContextMenu.svelte';
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
-  import { optionClickCallbackStore, selectedIdStore } from '#lib/stores/context-menu.store.js';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
+  import { optionClickCallbackStore, selectedIdStore } from '#lib/stores/context-menu.store.ts';
   import {
     getContextMenuPositionFromBoundingRect,
     getContextMenuPositionFromEvent,
     type Align,
-  } from '#lib/utils/context-menu.js';
-  import { generateId } from '#lib/utils/generate-id.js';
+  } from '#lib/utils/context-menu.ts';
+  import { generateId } from '#lib/utils/generate-id.ts';
   import { IconButton, type Color, type Size, type Variants } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
diff --git a/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte b/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
index a2389f096..03c7896d6 100644
--- a/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/ContextMenu.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { clickOutside } from '#lib/actions/click-outside.js';
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
+  import { clickOutside } from '#lib/actions/click-outside.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
   import type { Snippet } from 'svelte';
 
   interface Props {
diff --git a/web/src/lib/components/shared-components/context-menu/MenuOption.svelte b/web/src/lib/components/shared-components/context-menu/MenuOption.svelte
index a239bb1f7..f8c9de7bd 100644
--- a/web/src/lib/components/shared-components/context-menu/MenuOption.svelte
+++ b/web/src/lib/components/shared-components/context-menu/MenuOption.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { Shortcut } from '#lib/actions/shortcut.js';
-  import { shortcut as bindShortcut, shortcutLabel as computeShortcutLabel } from '#lib/actions/shortcut.js';
-  import { optionClickCallbackStore, selectedIdStore } from '#lib/stores/context-menu.store.js';
-  import { generateId } from '#lib/utils/generate-id.js';
+  import type { Shortcut } from '#lib/actions/shortcut.ts';
+  import { shortcut as bindShortcut, shortcutLabel as computeShortcutLabel } from '#lib/actions/shortcut.ts';
+  import { optionClickCallbackStore, selectedIdStore } from '#lib/stores/context-menu.store.ts';
+  import { generateId } from '#lib/utils/generate-id.ts';
   import { Icon, type IconLike } from '@immich/ui';
 
   interface Props {
diff --git a/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
index 9e670d730..d1bdeb33e 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.js';
-  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  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 Thumbnail from '#lib/components/assets/thumbnail/Thumbnail.svelte';
-  import { AssetAction } from '#lib/constants.js';
+  import { AssetAction } from '#lib/constants.ts';
   import Portal from '#lib/elements/Portal.svelte';
-  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
-  import type { TimelineAsset, Viewport } from '#lib/managers/timeline-manager/types.js';
+  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
+  import type { TimelineAsset, Viewport } from '#lib/managers/timeline-manager/types.ts';
   import AssetDeleteConfirmModal from '#lib/modals/AssetDeleteConfirmModal.svelte';
   import ShortcutsModal from '#lib/modals/ShortcutsModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.js';
-  import { showDeleteModal } from '#lib/stores/preferences.store.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { deleteAssets } from '#lib/utils/actions.js';
-  import { archiveAssets, getNextAsset, getPreviousAsset, navigateToAsset } from '#lib/utils/asset-utils.js';
-  import { moveFocus } from '#lib/utils/focus-util.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { getJustifiedLayoutFromAssets } from '#lib/utils/layout-utils.js';
-  import { navigate } from '#lib/utils/navigation.js';
-  import { isTimelineAsset, toTimelineAsset } from '#lib/utils/timeline-util.js';
-  import { TUNABLES } from '#lib/utils/tunables.js';
+  import { Route } from '#lib/route.ts';
+  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.ts';
+  import { showDeleteModal } from '#lib/stores/preferences.store.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { deleteAssets } from '#lib/utils/actions.ts';
+  import { archiveAssets, getNextAsset, getPreviousAsset, navigateToAsset } from '#lib/utils/asset-utils.ts';
+  import { moveFocus } from '#lib/utils/focus-util.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { getJustifiedLayoutFromAssets } from '#lib/utils/layout-utils.ts';
+  import { navigate } from '#lib/utils/navigation.ts';
+  import { isTimelineAsset, toTimelineAsset } from '#lib/utils/timeline-util.ts';
+  import { TUNABLES } from '#lib/utils/tunables.ts';
   import { AssetVisibility, type AssetResponseDto } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
   import { debounce } from 'lodash-es';
diff --git a/web/src/lib/components/shared-components/map/Map.svelte b/web/src/lib/components/shared-components/map/Map.svelte
index 6bc2713d0..6f659d122 100644
--- a/web/src/lib/components/shared-components/map/Map.svelte
+++ b/web/src/lib/components/shared-components/map/Map.svelte
@@ -11,10 +11,10 @@
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
   import MapSettingsModal from '#lib/modals/MapSettingsModal.svelte';
-  import { mapSettings } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl, handlePromiseError } from '#lib/utils.js';
+  import { mapSettings } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl, handlePromiseError } from '#lib/utils.ts';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
   import { Alert, Container, Icon, modalManager, Text, Theme, themeManager } from '@immich/ui';
   import { mdiCog, mdiImageMultiple, mdiMap, mdiMapMarker } from '@mdi/js';
@@ -47,8 +47,8 @@
     ScaleControl,
   } from 'svelte-maplibre';
   import type { SelectionBBox } from './types';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
+  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);
diff --git a/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte b/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
index 8d1c6abb7..6c4569efb 100644
--- a/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { focusTrap } from '#lib/actions/focus-trap.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { focusTrap } from '#lib/actions/focus-trap.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import AvatarEditModal from '#lib/modals/AvatarEditModal.svelte';
   import HelpAndFeedbackModal from '#lib/modals/HelpAndFeedbackModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { getAboutInfoQuery } from '#lib/queries/server-info.query.js';
+  import { Route } from '#lib/route.ts';
+  import { getAboutInfoQuery } from '#lib/queries/server-info.query.ts';
   import { Button, Icon, IconButton, modalManager } from '@immich/ui';
   import { createQuery } from '@tanstack/svelte-query';
   import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
diff --git a/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte b/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
index 59e3320b1..0f320c647 100644
--- a/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte
@@ -4,16 +4,16 @@
 
 <script lang="ts">
   import { page } from '$app/state';
-  import { clickOutside } from '#lib/actions/click-outside.js';
+  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.js';
-  import { Route } from '#lib/route.js';
-  import { getGlobalActions } from '#lib/services/app.service.js';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { sidebarStore } from '#lib/stores/sidebar.svelte.js';
-  import { getNotificationsQuery } from '#lib/queries/notification.query.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.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';
diff --git a/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte b/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
index 28496588b..4ada6f640 100644
--- a/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/NotificationPanel.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { focusTrap } from '#lib/actions/focus-trap.js';
+  import { focusTrap } from '#lib/actions/focus-trap.ts';
   import NotificationItem from '#lib/components/shared-components/navigation-bar/NotificationItem.svelte';
-  import { OpenQueryParam } from '#lib/constants.js';
-  import { Route } from '#lib/route.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  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.js';
+  } from '#lib/queries/notification.query.ts';
   import { NotificationType, type NotificationDto } from '@immich/sdk';
   import { Button, Icon, Scrollable, Stack, Text } from '@immich/ui';
   import { mdiBellOutline, mdiCheckAll } from '@mdi/js';
diff --git a/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte b/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
index 1fd175391..c02befddf 100644
--- a/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
+++ b/web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ProgressBarStatus } from '#lib/constants.js';
-  import { handlePromiseError } from '#lib/utils.js';
+  import { ProgressBarStatus } from '#lib/constants.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
 
   import { onMount } from 'svelte';
   import { tweened } from 'svelte/motion';
diff --git a/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte b/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
index 8f8b6f5d7..baf8bbe18 100644
--- a/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
+++ b/web/src/lib/components/shared-components/purchasing/IndividualPurchaseOptionCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ImmichProduct } from '#lib/constants.js';
-  import { getLicenseLink as getProductLink } from '#lib/utils/license-utils.js';
+  import { ImmichProduct } from '#lib/constants.ts';
+  import { getLicenseLink as getProductLink } from '#lib/utils/license-utils.ts';
   import { Button, Icon } from '@immich/ui';
   import { mdiAccount, mdiCheckCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte b/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
index 7087e333e..766211f28 100644
--- a/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
+++ b/web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { setSupportBadgeVisibility } from '#lib/utils/purchase-utils.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { setSupportBadgeVisibility } from '#lib/utils/purchase-utils.ts';
   import { Button, Icon } from '@immich/ui';
   import { mdiPartyPopper } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte b/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
index 5496468b7..4c11c0571 100644
--- a/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
+++ b/web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { activateProduct, getActivationKey } from '#lib/utils/license-utils.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { activateProduct, getActivationKey } from '#lib/utils/license-utils.ts';
   import { Button, Heading, LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import UserPurchaseOptionCard from './IndividualPurchaseOptionCard.svelte';
diff --git a/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte b/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
index f8209bc70..3d442e5f6 100644
--- a/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
+++ b/web/src/lib/components/shared-components/purchasing/ServerPurchaseOptionCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ImmichProduct } from '#lib/constants.js';
-  import { getLicenseLink } from '#lib/utils/license-utils.js';
+  import { ImmichProduct } from '#lib/constants.ts';
+  import { getLicenseLink } from '#lib/utils/license-utils.ts';
   import { Button, Icon } from '@immich/ui';
   import { mdiCheckCircleOutline, mdiServer } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/search-bar/SearchBar.svelte b/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
index caf4534e9..cde5fa30b 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchBar.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { focusOutside } from '#lib/actions/focus-outside.js';
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import { Route } from '#lib/route.js';
-  import { searchStore } from '#lib/stores/search.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { generateId } from '#lib/utils/generate-id.js';
+  import { focusOutside } from '#lib/actions/focus-outside.ts';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { Route } from '#lib/route.ts';
+  import { searchStore } from '#lib/stores/search.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { generateId } from '#lib/utils/generate-id.ts';
   import { IconButton } from '@immich/ui';
   import { mdiClose, mdiMagnify } from '@mdi/js';
   import { onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import SearchFilters from './SearchFilters.svelte';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
   import { getSearchTypePlaceholder, isPopoverContent } from './search-bar-utils';
 
   type Props = {
diff --git a/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
index 197b9a04c..a2e5eb121 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Combobox, { asComboboxOptions, asSelectedOption } from '#lib/components/shared-components/Combobox.svelte';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/search-bar/SearchDateSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchDateSection.svelte
index effb70dd6..e89af2dac 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchDateSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchDateSection.svelte
@@ -3,7 +3,7 @@
   import { DatePicker, Text } from '@immich/ui';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
   import SearchButton from './SearchButton.svelte';
 
   let filters = $derived(searchManager.filter.date);
diff --git a/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte b/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
index 39221503c..4e68f6a06 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchDisplaySection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import SearchButton from './SearchButton.svelte';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/shared-components/search-bar/SearchFilters.svelte b/web/src/lib/components/shared-components/search-bar/SearchFilters.svelte
index 9aaeb181a..9cd5d1062 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchFilters.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchFilters.svelte
@@ -24,7 +24,7 @@
   import SearchTextSection from './SearchTextSection.svelte';
   import SearchDisplaySection from './SearchDisplaySection.svelte';
   import SearchRatingsSection from './SearchRatingsSection.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import {
     getPeople,
     getSearchDatePreset,
@@ -36,7 +36,7 @@
     getSearchTypeTitle,
   } from './search-bar-utils';
   import { onMount } from 'svelte';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
   import SearchButton from './SearchButton.svelte';
 
   interface Props {
diff --git a/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte b/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte
index 6c1ddd205..ed3c4026b 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
-  import { searchStore } from '#lib/stores/search.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
+  import { searchStore } from '#lib/stores/search.svelte.ts';
   import { Icon, IconButton, Text } from '@immich/ui';
   import { mdiClockOutline, mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
index a75170d12..cd9bf14b2 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Combobox, { asComboboxOptions, asSelectedOption } from '#lib/components/shared-components/Combobox.svelte';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
   import { Text } from '@immich/ui';
   import { onMount } from 'svelte';
diff --git a/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
index 76ef67f2a..af4f0bdfc 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchMediaSection.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { MediaType } from '#lib/constants.js';
+  import { MediaType } from '#lib/constants.ts';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
   import SearchButton from './SearchButton.svelte';
 
   let filteredMedia = $derived(searchManager.filter.mediaType);
diff --git a/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
index 809ffa449..4e5f6f677 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
@@ -3,12 +3,12 @@
   import { getPeople, getSearchPeopleTitle } from './search-bar-utils';
   import SingleGridRow from '#lib/components/shared-components/SingleGridRow.svelte';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
   import { type PersonResponseDto } from '@immich/sdk';
   import { Button, Icon, LoadingSpinner, Text } from '@immich/ui';
   import { mdiArrowRight, mdiCheck, mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
 
   interface Props {
     title: string | undefined;
diff --git a/web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte
index d42b8db8b..ca03a8d3c 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import SearchButton from './SearchButton.svelte';
diff --git a/web/src/lib/components/shared-components/search-bar/SearchTagsSection.spec.ts b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.spec.ts
index 3d4414283..af4e3c1b6 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchTagsSection.spec.ts
+++ b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.spec.ts
@@ -1,8 +1,8 @@
-import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
-import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.js';
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.ts';
+import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.ts';
 import SearchTagsSection from '#lib/components/shared-components/search-bar/SearchTagsSection.svelte';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { searchManager } from '#lib/managers/search-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { searchManager } from '#lib/managers/search-manager.svelte.ts';
 import type { TagResponseDto } from '@immich/sdk';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
diff --git a/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
index e8e44af49..fae0b38c7 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Combobox, { type ComboBoxOption } from '#lib/components/shared-components/Combobox.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
   import { Button, Text } from '@immich/ui';
   import { onMount } from 'svelte';
@@ -9,7 +9,7 @@
   import { mdiClose } from '@mdi/js';
   import SearchButton from './SearchButton.svelte';
   import { getSearchTagsTitle } from './search-bar-utils';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
 
   interface Props {
     title: string | undefined;
diff --git a/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte b/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
index 339927bac..d7768a126 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchTextSection.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { getSearchTypeTitle } from './search-bar-utils';
   import SearchButton from './SearchButton.svelte';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar-utils.spec.ts b/web/src/lib/components/shared-components/search-bar/search-bar-utils.spec.ts
index 30af0089c..e2e0fcffd 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar-utils.spec.ts
+++ b/web/src/lib/components/shared-components/search-bar/search-bar-utils.spec.ts
@@ -1,4 +1,4 @@
-import { isPopoverContent } from '#lib/components/shared-components/search-bar/search-bar-utils.js';
+import { isPopoverContent } from '#lib/components/shared-components/search-bar/search-bar-utils.ts';
 
 describe('isPopoverContent', () => {
   const focusOutEventTo = (relatedTarget: EventTarget | null) => new FocusEvent('focusout', { relatedTarget });
diff --git a/web/src/lib/components/shared-components/search-bar/search-bar-utils.ts b/web/src/lib/components/shared-components/search-bar/search-bar-utils.ts
index 4b9843799..ffb5b916d 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar-utils.ts
+++ b/web/src/lib/components/shared-components/search-bar/search-bar-utils.ts
@@ -1,5 +1,5 @@
-import { MediaType } from '#lib/constants.js';
-import { handleError } from '#lib/utils/handle-error.js';
+import { MediaType } from '#lib/constants.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
 import { getAllPeople, type PersonResponseDto, type TagResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/settings/SettingAccordion.svelte b/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
index 5beaafe8a..577031e2c 100755
--- a/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { accordionManager } from '#lib/managers/accordion-manager.svelte.js';
+  import { accordionManager } from '#lib/managers/accordion-manager.svelte.ts';
   import { Icon } from '@immich/ui';
   import { onDestroy, type Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
diff --git a/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts b/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
index ed5144cf5..ff9a8ff90 100644
--- a/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
+++ b/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
@@ -1,4 +1,4 @@
-import { SettingInputFieldType } from '#lib/constants.js';
+import { SettingInputFieldType } from '#lib/constants.ts';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import SettingInputField from './SettingInputField.svelte';
diff --git a/web/src/lib/components/shared-components/settings/SettingInputField.svelte b/web/src/lib/components/shared-components/settings/SettingInputField.svelte
index afa2ad45a..58f6bf10b 100644
--- a/web/src/lib/components/shared-components/settings/SettingInputField.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingInputField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import { PasswordInput } from '@immich/ui';
   import { onMount, tick, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/settings/SettingSwitch.svelte b/web/src/lib/components/shared-components/settings/SettingSwitch.svelte
index edff338f0..51690f354 100644
--- a/web/src/lib/components/shared-components/settings/SettingSwitch.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingSwitch.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { generateId } from '#lib/utils/generate-id.js';
+  import { generateId } from '#lib/utils/generate-id.ts';
   import { Switch } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte b/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
index 5f2f9209d..84ee9c537 100644
--- a/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import Combobox from '#lib/components/shared-components/Combobox.svelte';
-  import { defaultLang } from '#lib/constants.js';
-  import { lang } from '#lib/stores/preferences.store.js';
-  import { convertBCP47, getClosestAvailableLocale, langCodes, langs } from '#lib/utils/i18n.js';
+  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';
diff --git a/web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte b/web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte
index e8fa8660d..fe115422b 100644
--- a/web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte
+++ b/web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
   import {
     getAdminConfigDefaultsQuery,
     getAdminConfigQuery,
     updateAdminConfigMutation,
-  } from '#lib/queries/config-admin.query.js';
+  } from '#lib/queries/config-admin.query.ts';
   import type { AdminConfigDto } from '@immich/sdk';
   import { Button, toastManager } from '@immich/ui';
   import { createMutation } from '@tanstack/svelte-query';
diff --git a/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte b/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
index 6db874dbc..e3f2c5e28 100644
--- a/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
+++ b/web/src/lib/components/shared-components/side-bar/PurchaseInfo.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { OpenQueryParam } from '#lib/constants.js';
+  import { OpenQueryParam } from '#lib/constants.ts';
   import Portal from '#lib/elements/Portal.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import PurchaseModal from '#lib/modals/PurchaseModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { getAccountAge } from '#lib/utils/auth.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { getButtonVisibility } from '#lib/utils/purchase-utils.js';
+  import { Route } from '#lib/route.ts';
+  import { getAccountAge } from '#lib/utils/auth.ts';
+  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 { mdiClose, mdiInformationOutline } from '@mdi/js';
diff --git a/web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts b/web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts
index 34a31c25d..4d948ce9a 100644
--- a/web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts
+++ b/web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts
@@ -1,4 +1,4 @@
-import { sdkMock } from '#lib/__mocks__/sdk.mock.js';
+import { sdkMock } from '#lib/__mocks__/sdk.mock.ts';
 import RecentAlbums from '#lib/components/shared-components/side-bar/RecentAlbums.svelte';
 import { render, screen } from '@testing-library/svelte';
 import { albumFactory } from '#test-data/factories/album-factory';
diff --git a/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte b/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
index 7603f01d1..6ab544475 100644
--- a/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
+++ b/web/src/lib/components/shared-components/side-bar/RecentAlbums.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { getRecentAlbumsQuery } from '#lib/queries/album.query.js';
-  import { queryClient } from '#lib/queries/client.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
+  import { getRecentAlbumsQuery } from '#lib/queries/album.query.ts';
+  import { queryClient } from '#lib/queries/client.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
   import { createQuery } from '@tanstack/svelte-query';
 
   const query = createQuery(getRecentAlbumsQuery, () => queryClient);
diff --git a/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte b/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
index 3594261ab..fe781b843 100644
--- a/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
+++ b/web/src/lib/components/shared-components/side-bar/ServerStatus.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { releaseManager } from '#lib/managers/release-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { releaseManager } from '#lib/managers/release-manager.svelte.ts';
   import ServerAboutModal from '#lib/modals/ServerAboutModal.svelte';
-  import { getAboutInfoQuery, getVersionHistoryQuery } from '#lib/queries/server-info.query.js';
-  import { websocketStore } from '#lib/stores/websocket.js';
-  import { semverToName } from '#lib/utils.js';
+  import { getAboutInfoQuery, getVersionHistoryQuery } from '#lib/queries/server-info.query.ts';
+  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';
diff --git a/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte b/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
index 508f2067f..11af323d2 100644
--- a/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
+++ b/web/src/lib/components/shared-components/side-bar/StorageSpace.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getStorageQuery } from '#lib/queries/server-info.query.js';
-  import { getByteUnitString } from '#lib/utils/byte-units.js';
+  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 { getByteUnitString } from '#lib/utils/byte-units.ts';
   import { LoadingSpinner, Meter } from '@immich/ui';
   import { createQuery } from '@tanstack/svelte-query';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte b/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
index 21f594bc3..de5e7a20b 100644
--- a/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
@@ -2,9 +2,9 @@
   import BottomInfo from '#lib/components/shared-components/side-bar/BottomInfo.svelte';
   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.js';
-  import { Route } from '#lib/route.js';
-  import { recentAlbumsDropdown } from '#lib/stores/preferences.store.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { recentAlbumsDropdown } from '#lib/stores/preferences.store.ts';
   import { NavbarGroup, NavbarItem } from '@immich/ui';
   import {
     mdiAccount,
@@ -36,8 +36,8 @@
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/lib/components/shared-components/tree/Tree.svelte b/web/src/lib/components/shared-components/tree/Tree.svelte
index 106de776a..6e0382306 100644
--- a/web/src/lib/components/shared-components/tree/Tree.svelte
+++ b/web/src/lib/components/shared-components/tree/Tree.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import TreeItems from '#lib/components/shared-components/tree/TreeItems.svelte';
-  import { TreeNode } from '#lib/utils/tree-utils.js';
+  import { TreeNode } from '#lib/utils/tree-utils.ts';
   import { Icon } from '@immich/ui';
   import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
 
diff --git a/web/src/lib/components/shared-components/tree/TreeBreadcrumbs.svelte b/web/src/lib/components/shared-components/tree/TreeBreadcrumbs.svelte
index f663c2146..19d1bf631 100644
--- a/web/src/lib/components/shared-components/tree/TreeBreadcrumbs.svelte
+++ b/web/src/lib/components/shared-components/tree/TreeBreadcrumbs.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TreeNode } from '#lib/utils/tree-utils.js';
+  import { TreeNode } from '#lib/utils/tree-utils.ts';
   import { Breadcrumbs, ControlBar, ControlBarHeader, IconButton } from '@immich/ui';
   import { mdiArrowUpLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte b/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
index 1dd068e74..ff75e0b83 100644
--- a/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
+++ b/web/src/lib/components/shared-components/tree/TreeItemThumbnails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { TreeNode } from '#lib/utils/tree-utils.js';
+  import type { TreeNode } from '#lib/utils/tree-utils.ts';
   import { Icon } from '@immich/ui';
 
   interface Props {
diff --git a/web/src/lib/components/shared-components/tree/TreeItems.svelte b/web/src/lib/components/shared-components/tree/TreeItems.svelte
index 83cbfa1f5..a263882b3 100644
--- a/web/src/lib/components/shared-components/tree/TreeItems.svelte
+++ b/web/src/lib/components/shared-components/tree/TreeItems.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Tree from '#lib/components/shared-components/tree/Tree.svelte';
-  import { type TreeNode } from '#lib/utils/tree-utils.js';
+  import { type TreeNode } from '#lib/utils/tree-utils.ts';
 
   interface Props {
     tree: TreeNode;
diff --git a/web/src/lib/components/sidebar/Sidebar.svelte b/web/src/lib/components/sidebar/Sidebar.svelte
index 283cce759..4860ee256 100644
--- a/web/src/lib/components/sidebar/Sidebar.svelte
+++ b/web/src/lib/components/sidebar/Sidebar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { clickOutside } from '#lib/actions/click-outside.js';
-  import { focusTrap } from '#lib/actions/focus-trap.js';
+  import { clickOutside } from '#lib/actions/click-outside.ts';
+  import { focusTrap } from '#lib/actions/focus-trap.ts';
   import { menuButtonId } from '#lib/components/shared-components/navigation-bar/NavigationBar.svelte';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { sidebarStore } from '#lib/stores/sidebar.svelte.js';
+  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
+  import { sidebarStore } from '#lib/stores/sidebar.svelte.ts';
   import { onMount, type Snippet } from 'svelte';
 
   interface Props {
diff --git a/web/src/lib/components/timeline/AssetLayout.svelte b/web/src/lib/components/timeline/AssetLayout.svelte
index ddd7952ac..b29e25f49 100644
--- a/web/src/lib/components/timeline/AssetLayout.svelte
+++ b/web/src/lib/components/timeline/AssetLayout.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import type { ViewerAsset } from '#lib/managers/timeline-manager/viewer-asset.svelte.js';
-  import type { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.js';
-  import { uploadAssetsStore } from '#lib/stores/upload.js';
-  import type { CommonPosition } from '#lib/utils/layout-utils.js';
+  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';
   import { flip } from 'svelte/animate';
   import { scale } from 'svelte/transition';
diff --git a/web/src/lib/components/timeline/AssetSelectControlBar.svelte b/web/src/lib/components/timeline/AssetSelectControlBar.svelte
index 5fa9e68a8..05cecf82e 100644
--- a/web/src/lib/components/timeline/AssetSelectControlBar.svelte
+++ b/web/src/lib/components/timeline/AssetSelectControlBar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
   import { mdiClose } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/timeline/Month.svelte b/web/src/lib/components/timeline/Month.svelte
index 5cc390e69..218f335d5 100644
--- a/web/src/lib/components/timeline/Month.svelte
+++ b/web/src/lib/components/timeline/Month.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import AssetLayout from '#lib/components/timeline/AssetLayout.svelte';
-  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineDay } from '#lib/managers/timeline-manager/timeline-day.svelte.js';
-  import type { TimelineMonth } from '#lib/managers/timeline-manager/timeline-month.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { assetsSnapshot, filterIsInOrNearViewport } from '#lib/managers/timeline-manager/utils.svelte.js';
-  import type { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.js';
-  import { uploadAssetsStore } from '#lib/stores/upload.js';
-  import type { CommonPosition } from '#lib/utils/layout-utils.js';
-  import { fromTimelinePlainDate, getDateLocaleString } from '#lib/utils/timeline-util.js';
+  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';
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
   import type { Snippet } from 'svelte';
diff --git a/web/src/lib/components/timeline/Scrubber.svelte b/web/src/lib/components/timeline/Scrubber.svelte
index dfe5296b2..0974b6ed4 100644
--- a/web/src/lib/components/timeline/Scrubber.svelte
+++ b/web/src/lib/components/timeline/Scrubber.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import type { ScrubberMonth, ViewportTopMonth } from '#lib/managers/timeline-manager/types.js';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { getTabbable } from '#lib/utils/focus-util.js';
-  import { type ScrubberListener } from '#lib/utils/timeline-util.js';
+  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+  import type { ScrubberMonth, ViewportTopMonth } from '#lib/managers/timeline-manager/types.ts';
+  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
+  import { getTabbable } from '#lib/utils/focus-util.ts';
+  import { type ScrubberListener } from '#lib/utils/timeline-util.ts';
   import { Icon } from '@immich/ui';
   import { mdiPlay } from '@mdi/js';
   import { clamp } from 'lodash-es';
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index 03e490bf1..25412a36f 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -6,27 +6,27 @@
   import Scrubber from '#lib/components/timeline/Scrubber.svelte';
   import TimelineAssetViewer from '#lib/components/timeline/TimelineAssetViewer.svelte';
   import TimelineKeyboardActions from '#lib/components/timeline/actions/TimelineKeyboardActions.svelte';
-  import { focusAsset } from '#lib/components/timeline/actions/focus-actions.js';
-  import { AssetAction } from '#lib/constants.js';
+  import { focusAsset } from '#lib/components/timeline/actions/focus-actions.ts';
+  import { AssetAction } from '#lib/constants.ts';
   import HotModuleReload from '#lib/elements/HotModuleReload.svelte';
   import Portal from '#lib/elements/Portal.svelte';
   import Skeleton from '#lib/elements/Skeleton.svelte';
-  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import type { TimelineDay } from '#lib/managers/timeline-manager/timeline-day.svelte.js';
-  import { isIntersecting } from '#lib/managers/timeline-manager/internal/intersection-support.svelte.js';
-  import type { TimelineMonth } from '#lib/managers/timeline-manager/timeline-month.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
+  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 { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
   import type {
     TimelineAsset,
     TimelineManagerOptions,
     ViewportTopMonth,
-  } from '#lib/managers/timeline-manager/types.js';
-  import { assetsSnapshot } from '#lib/managers/timeline-manager/utils.svelte.js';
-  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.js';
-  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
-  import { isAssetViewerRoute, navigate } from '#lib/utils/navigation.js';
-  import { getTimes, type ScrubberListener } from '#lib/utils/timeline-util.js';
+  } from '#lib/managers/timeline-manager/types.ts';
+  import { assetsSnapshot } from '#lib/managers/timeline-manager/utils.svelte.ts';
+  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.ts';
+  import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
+  import { isAssetViewerRoute, navigate } from '#lib/utils/navigation.ts';
+  import { getTimes, type ScrubberListener } from '#lib/utils/timeline-util.ts';
   import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
   import { onDestroy, onMount, tick, type Snippet } from 'svelte';
diff --git a/web/src/lib/components/timeline/TimelineAssetViewer.svelte b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
index 2a3687117..8caa41381 100644
--- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte
+++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  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 { AssetAction } from '#lib/constants.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { websocketEvents } from '#lib/stores/websocket.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { navigateToAsset } from '#lib/utils/asset-utils.js';
-  import { handleErrorAsync } from '#lib/utils/handle-error.js';
-  import { navigate } from '#lib/utils/navigation.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  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 { 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 { websocketEvents } from '#lib/stores/websocket.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { navigateToAsset } from '#lib/utils/asset-utils.ts';
+  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 { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/timeline/actions/ArchiveAction.svelte b/web/src/lib/components/timeline/actions/ArchiveAction.svelte
index e0dc8c506..36c008730 100644
--- a/web/src/lib/components/timeline/actions/ArchiveAction.svelte
+++ b/web/src/lib/components/timeline/actions/ArchiveAction.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import type { OnArchive } from '#lib/utils/actions.js';
-  import { archiveAssets } from '#lib/utils/asset-utils.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import type { OnArchive } from '#lib/utils/actions.ts';
+  import { archiveAssets } from '#lib/utils/asset-utils.ts';
   import { AssetVisibility } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
   import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline, mdiTimerSand } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/ChangeDateAction.svelte b/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
index 543d930e6..aeb4cdd60 100644
--- a/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
+++ b/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
   import AssetSelectionChangeDateModal from '#lib/modals/AssetSelectionChangeDateModal.svelte';
-  import { fromTimelinePlainDateTime } from '#lib/utils/timeline-util.js';
+  import { fromTimelinePlainDateTime } from '#lib/utils/timeline-util.ts';
   import { modalManager } from '@immich/ui';
   import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte b/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte
index d83228bbc..385ae4f90 100644
--- a/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte
+++ b/web/src/lib/components/timeline/actions/ChangeDescriptionAction.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import AssetUpdateDescriptionConfirmModal from '#lib/modals/AssetUpdateDescriptionConfirmModal.svelte';
-  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAssets } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
   import { mdiText } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte b/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte
index c701ade20..15988cc5c 100644
--- a/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte
+++ b/web/src/lib/components/timeline/actions/ChangeLocationAction.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import GeolocationPointPickerModal from '#lib/modals/GeolocationPointPickerModal.svelte';
-  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAssets } from '@immich/sdk';
   import { modalManager, toastManager } from '@immich/ui';
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte b/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte
index fd8356723..216c28a6f 100644
--- a/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte
+++ b/web/src/lib/components/timeline/actions/DeleteAssetsAction.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import AssetDeleteConfirmModal from '#lib/modals/AssetDeleteConfirmModal.svelte';
-  import { showDeleteModal } from '#lib/stores/preferences.store.js';
-  import { type OnDelete, type OnUndoDelete, deleteAssets } from '#lib/utils/actions.js';
+  import { showDeleteModal } from '#lib/stores/preferences.store.ts';
+  import { type OnDelete, type OnUndoDelete, deleteAssets } from '#lib/utils/actions.ts';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/timeline/actions/DownloadAction.svelte b/web/src/lib/components/timeline/actions/DownloadAction.svelte
index 119120723..e757e783f 100644
--- a/web/src/lib/components/timeline/actions/DownloadAction.svelte
+++ b/web/src/lib/components/timeline/actions/DownloadAction.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
+  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.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleDownloadAsset } from '#lib/services/asset.service.js';
-  import { downloadArchive } from '#lib/utils/asset-utils.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleDownloadAsset } from '#lib/services/asset.service.ts';
+  import { downloadArchive } from '#lib/utils/asset-utils.ts';
   import { getAssetInfo } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
   import { mdiDownload } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/FavoriteAction.svelte b/web/src/lib/components/timeline/actions/FavoriteAction.svelte
index e64c9bf19..4b40eebcc 100644
--- a/web/src/lib/components/timeline/actions/FavoriteAction.svelte
+++ b/web/src/lib/components/timeline/actions/FavoriteAction.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import type { OnFavorite } from '#lib/utils/actions.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import type { OnFavorite } from '#lib/utils/actions.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAssets } from '@immich/sdk';
   import { IconButton, toastManager } from '@immich/ui';
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte b/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte
index cdaf40300..9fedd8389 100644
--- a/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte
+++ b/web/src/lib/components/timeline/actions/LinkLivePhotoAction.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import type { OnLink, OnUnlink } from '#lib/utils/actions.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import type { OnLink, OnUnlink } from '#lib/utils/actions.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { getAssetInfo, updateAsset } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
   import { mdiLinkOff, mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte b/web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte
index 9ad4c1305..ddbda3252 100644
--- a/web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte
+++ b/web/src/lib/components/timeline/actions/RemoveFromSharedLinkAction.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { executeMutation } from '#lib/queries/client.js';
-  import { removeSharedLinkAssetsMutation } from '#lib/queries/shared-link.query.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { removeSharedLinkAssetsMutation } from '#lib/queries/shared-link.query.ts';
   import { type SharedLinkResponseDto } from '@immich/sdk';
   import { IconButton, modalManager, toastManager } from '@immich/ui';
   import { mdiDeleteOutline } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/SelectAllAction.svelte b/web/src/lib/components/timeline/actions/SelectAllAction.svelte
index cbc6b0879..444a0727a 100644
--- a/web/src/lib/components/timeline/actions/SelectAllAction.svelte
+++ b/web/src/lib/components/timeline/actions/SelectAllAction.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { selectAllAssets } from '#lib/utils/asset-utils.js';
+  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+  import { selectAllAssets } from '#lib/utils/asset-utils.ts';
   import { Button, IconButton } from '@immich/ui';
   import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte b/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte
index c4d4b48ca..a559e9425 100644
--- a/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte
+++ b/web/src/lib/components/timeline/actions/SetVisibilityAction.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import type { OnSetVisibility } from '#lib/utils/actions.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import type { OnSetVisibility } from '#lib/utils/actions.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { AssetVisibility, updateAssets } from '@immich/sdk';
   import { Button, modalManager } from '@immich/ui';
   import { mdiLockOpenVariantOutline, mdiLockOutline } from '@mdi/js';
diff --git a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
index 5c95015de..3daaf8cc6 100644
--- a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
+++ b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.js';
+  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.ts';
   import {
     setFocusToAsset as setFocusAssetInit,
     setFocusTo as setFocusToInit,
-  } from '#lib/components/timeline/actions/focus-actions.js';
-  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { eventManager } from '#lib/managers/event-manager.svelte.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+  } from '#lib/components/timeline/actions/focus-actions.ts';
+  import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-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 AssetDeleteConfirmModal from '#lib/modals/AssetDeleteConfirmModal.svelte';
   import NavigateToDateModal from '#lib/modals/NavigateToDateModal.svelte';
   import ShortcutsModal from '#lib/modals/ShortcutsModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { handleStack } from '#lib/services/stack.service.js';
-  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.js';
-  import { showDeleteModal } from '#lib/stores/preferences.store.js';
-  import { searchStore } from '#lib/stores/search.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { deleteAssets } from '#lib/utils/actions.js';
-  import { archiveAssets, selectAllAssets } from '#lib/utils/asset-utils.js';
+  import { Route } from '#lib/route.ts';
+  import { handleStack } from '#lib/services/stack.service.ts';
+  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.ts';
+  import { showDeleteModal } from '#lib/stores/preferences.store.ts';
+  import { searchStore } from '#lib/stores/search.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { deleteAssets } from '#lib/utils/actions.ts';
+  import { archiveAssets, selectAllAssets } from '#lib/utils/asset-utils.ts';
   import { AssetVisibility } from '@immich/sdk';
   import { isModalOpen, modalManager } from '@immich/ui';
 
diff --git a/web/src/lib/components/timeline/actions/focus-actions.ts b/web/src/lib/components/timeline/actions/focus-actions.ts
index 7dcd37ea3..85c417fcd 100644
--- a/web/src/lib/components/timeline/actions/focus-actions.ts
+++ b/web/src/lib/components/timeline/actions/focus-actions.ts
@@ -1,7 +1,7 @@
-import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { moveFocus } from '#lib/utils/focus-util.js';
-import { InvocationTracker } from '#lib/utils/invocationTracker.js';
+import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+import { moveFocus } from '#lib/utils/focus-util.ts';
+import { InvocationTracker } from '#lib/utils/invocationTracker.ts';
 import { tick } from 'svelte';
 
 const tracker = new InvocationTracker();
diff --git a/web/src/lib/components/user-settings-page/DeviceCard.svelte b/web/src/lib/components/user-settings-page/DeviceCard.svelte
index d037905e3..de111ea4d 100644
--- a/web/src/lib/components/user-settings-page/DeviceCard.svelte
+++ b/web/src/lib/components/user-settings-page/DeviceCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import type { SessionResponseDto } from '@immich/sdk';
   import { Icon, IconButton } from '@immich/ui';
   import {
diff --git a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
index 074ab3ad3..c5342479c 100644
--- a/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
+++ b/web/src/lib/components/user-settings-page/PinCodeCreateForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { setupPinCode } from '@immich/sdk';
   import { Button, Field, Heading, PinInput, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/elements/Dropdown.svelte b/web/src/lib/elements/Dropdown.svelte
index 09b924480..ac8556108 100644
--- a/web/src/lib/elements/Dropdown.svelte
+++ b/web/src/lib/elements/Dropdown.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts" generics="T">
-  import { clickOutside } from '#lib/actions/click-outside.js';
+  import { clickOutside } from '#lib/actions/click-outside.ts';
   import { Button, Icon, Text } from '@immich/ui';
   import { mdiCheck } from '@mdi/js';
   import { isEqual } from 'lodash-es';
diff --git a/web/src/lib/elements/FormatMessage.svelte b/web/src/lib/elements/FormatMessage.svelte
index b395fe983..93f0f558c 100644
--- a/web/src/lib/elements/FormatMessage.svelte
+++ b/web/src/lib/elements/FormatMessage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { InterpolationValues } from '#lib/elements/format-message.js';
+  import type { InterpolationValues } from '#lib/elements/format-message.ts';
   import {
     TYPE,
     type MessageFormatElement,
diff --git a/web/src/lib/elements/GroupTab.svelte b/web/src/lib/elements/GroupTab.svelte
index 25b770a05..9e45805eb 100644
--- a/web/src/lib/elements/GroupTab.svelte
+++ b/web/src/lib/elements/GroupTab.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { generateId } from '#lib/utils/generate-id.js';
+  import { generateId } from '#lib/utils/generate-id.ts';
 
   interface Props {
     filters: string[];
diff --git a/web/src/lib/elements/Portal.svelte b/web/src/lib/elements/Portal.svelte
index a811c136f..864922728 100644
--- a/web/src/lib/elements/Portal.svelte
+++ b/web/src/lib/elements/Portal.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import { handlePromiseError } from '#lib/utils.js';
+  import { handlePromiseError } from '#lib/utils.ts';
   import { tick, type Snippet } from 'svelte';
 
   /**
diff --git a/web/src/lib/elements/SkipLink.svelte b/web/src/lib/elements/SkipLink.svelte
index 08d35260f..599b6a472 100644
--- a/web/src/lib/elements/SkipLink.svelte
+++ b/web/src/lib/elements/SkipLink.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getTabbable } from '#lib/utils/focus-util.js';
+  import { getTabbable } from '#lib/utils/focus-util.ts';
   import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/elements/StarRating.svelte b/web/src/lib/elements/StarRating.svelte
index b1319c405..a81b08988 100644
--- a/web/src/lib/elements/StarRating.svelte
+++ b/web/src/lib/elements/StarRating.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { focusOutside } from '#lib/actions/focus-outside.js';
-  import { shortcuts } from '#lib/actions/shortcut.js';
-  import { generateId } from '#lib/utils/generate-id.js';
+  import { focusOutside } from '#lib/actions/focus-outside.ts';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
+  import { generateId } from '#lib/utils/generate-id.ts';
   import { Icon } from '@immich/ui';
   import { mdiStar, mdiStarOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/i18n.spec.ts b/web/src/lib/i18n.spec.ts
index 7845ed846..0c4e4f49c 100644
--- a/web/src/lib/i18n.spec.ts
+++ b/web/src/lib/i18n.spec.ts
@@ -1,4 +1,4 @@
-import { getClosestAvailableLocale, langs } from '#lib/utils/i18n.js';
+import { getClosestAvailableLocale, langs } from '#lib/utils/i18n.ts';
 import { readFileSync, readdirSync } from 'node:fs';
 
 describe('i18n', () => {
diff --git a/web/src/lib/managers/AssetCacheManager.svelte.ts b/web/src/lib/managers/AssetCacheManager.svelte.ts
index 9d0b85165..d9a660bff 100644
--- a/web/src/lib/managers/AssetCacheManager.svelte.ts
+++ b/web/src/lib/managers/AssetCacheManager.svelte.ts
@@ -1,5 +1,5 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import { getAssetInfo, getAssetOcr, getFaces } from '@immich/sdk';
 
 const defaultSerializer = <K>(params: K) => JSON.stringify(params);
diff --git a/web/src/lib/managers/accordion-manager.svelte.ts b/web/src/lib/managers/accordion-manager.svelte.ts
index b8577fe74..8df198390 100644
--- a/web/src/lib/managers/accordion-manager.svelte.ts
+++ b/web/src/lib/managers/accordion-manager.svelte.ts
@@ -1,5 +1,5 @@
-import { QueryParameter } from '#lib/constants.js';
-import { handlePromiseError } from '#lib/utils.js';
+import { QueryParameter } from '#lib/constants.ts';
+import { handlePromiseError } from '#lib/utils.ts';
 import { SvelteSet, SvelteURLSearchParams } from 'svelte/reactivity';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
diff --git a/web/src/lib/managers/activity-manager.svelte.spec.ts b/web/src/lib/managers/activity-manager.svelte.spec.ts
index 52bb2a3f8..0d2b388f8 100644
--- a/web/src/lib/managers/activity-manager.svelte.spec.ts
+++ b/web/src/lib/managers/activity-manager.svelte.spec.ts
@@ -1,4 +1,4 @@
-import { activityManager } from '#lib/managers/activity-manager.svelte.js';
+import { activityManager } from '#lib/managers/activity-manager.svelte.ts';
 import {
   deleteActivity,
   getActivities,
diff --git a/web/src/lib/managers/activity-manager.svelte.ts b/web/src/lib/managers/activity-manager.svelte.ts
index 56152be2e..d22f57307 100644
--- a/web/src/lib/managers/activity-manager.svelte.ts
+++ b/web/src/lib/managers/activity-manager.svelte.ts
@@ -1,6 +1,6 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { handlePromiseError } from '#lib/utils.js';
-import { handleError } from '#lib/utils/handle-error.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { handlePromiseError } from '#lib/utils.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
 import {
   createActivity,
   deleteActivity,
diff --git a/web/src/lib/managers/asset-multi-select-manager.svelte.spec.ts b/web/src/lib/managers/asset-multi-select-manager.svelte.spec.ts
index eeec36d7e..fc938e533 100644
--- a/web/src/lib/managers/asset-multi-select-manager.svelte.spec.ts
+++ b/web/src/lib/managers/asset-multi-select-manager.svelte.spec.ts
@@ -1,5 +1,5 @@
-import { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
 import { AssetVisibility } from '@immich/sdk';
 import { timelineAssetFactory } from '#test-data/factories/asset-factory';
 import { preferencesFactory } from '#test-data/factories/preferences-factory';
diff --git a/web/src/lib/managers/asset-multi-select-manager.svelte.ts b/web/src/lib/managers/asset-multi-select-manager.svelte.ts
index acbe579bd..bad76d96b 100644
--- a/web/src/lib/managers/asset-multi-select-manager.svelte.ts
+++ b/web/src/lib/managers/asset-multi-select-manager.svelte.ts
@@ -1,6 +1,6 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
 import { AssetVisibility } from '@immich/sdk';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
diff --git a/web/src/lib/managers/asset-viewer-manager.svelte.ts b/web/src/lib/managers/asset-viewer-manager.svelte.ts
index 271bb3ebc..49a0d6fa4 100644
--- a/web/src/lib/managers/asset-viewer-manager.svelte.ts
+++ b/web/src/lib/managers/asset-viewer-manager.svelte.ts
@@ -1,9 +1,9 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.js';
-import type { ImageLoaderStatus } from '#lib/utils/adaptive-image-loader.svelte.js';
-import { canCopyImageToClipboard } from '#lib/utils/asset-utils.js';
-import { BaseEventManager } from '#lib/utils/base-event-manager.svelte.js';
-import type { AssetGridRouteSearchParams } from '#lib/utils/navigation.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.ts';
+import type { ImageLoaderStatus } from '#lib/utils/adaptive-image-loader.svelte.ts';
+import { canCopyImageToClipboard } from '#lib/utils/asset-utils.ts';
+import { BaseEventManager } from '#lib/utils/base-event-manager.svelte.ts';
+import type { AssetGridRouteSearchParams } from '#lib/utils/navigation.ts';
 import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
 import type { ZoomImageWheelState } from '@zoom-image/core';
 import { cubicOut } from 'svelte/easing';
diff --git a/web/src/lib/managers/auth-manager.svelte.ts b/web/src/lib/managers/auth-manager.svelte.ts
index b58bb2507..e7b575418 100644
--- a/web/src/lib/managers/auth-manager.svelte.ts
+++ b/web/src/lib/managers/auth-manager.svelte.ts
@@ -1,10 +1,10 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { getAboutInfoQuery } from '#lib/queries/server-info.query.js';
-import { Route } from '#lib/route.js';
-import { isSharedLinkRoute } from '#lib/utils/navigation.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
+import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
+import { getAboutInfoQuery } from '#lib/queries/server-info.query.ts';
+import { Route } from '#lib/route.ts';
+import { isSharedLinkRoute } from '#lib/utils/navigation.ts';
 import {
   getMyPreferences,
   getMyUser,
diff --git a/web/src/lib/managers/cast-manager.svelte.ts b/web/src/lib/managers/cast-manager.svelte.ts
index 3c3e75852..bed620d4f 100644
--- a/web/src/lib/managers/cast-manager.svelte.ts
+++ b/web/src/lib/managers/cast-manager.svelte.ts
@@ -1,5 +1,5 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { GCastDestination } from '#lib/utils/cast/gcast-destination.svelte.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { GCastDestination } from '#lib/utils/cast/gcast-destination.svelte.ts';
 import { createSession, type SessionCreateResponseDto } from '@immich/sdk';
 import { DateTime, Duration } from 'luxon';
 
diff --git a/web/src/lib/managers/edit/edit-manager.svelte.ts b/web/src/lib/managers/edit/edit-manager.svelte.ts
index 830bb7fe7..b492b0dad 100644
--- a/web/src/lib/managers/edit/edit-manager.svelte.ts
+++ b/web/src/lib/managers/edit/edit-manager.svelte.ts
@@ -1,8 +1,8 @@
 import TransformTool from '#lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte';
-import { transformManager } from '#lib/managers/edit/transform-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { waitForWebsocketEvent } from '#lib/stores/websocket.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { transformManager } from '#lib/managers/edit/transform-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { waitForWebsocketEvent } from '#lib/stores/websocket.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { editAsset, removeAssetEdits, type AssetEditsCreateDto, type AssetResponseDto } from '@immich/sdk';
 import { ConfirmModal, modalManager, toastManager } from '@immich/ui';
 import { mdiCropRotate } from '@mdi/js';
diff --git a/web/src/lib/managers/edit/transform-manager.svelte.ts b/web/src/lib/managers/edit/transform-manager.svelte.ts
index 8a5924edf..7616a16a6 100644
--- a/web/src/lib/managers/edit/transform-manager.svelte.ts
+++ b/web/src/lib/managers/edit/transform-manager.svelte.ts
@@ -1,8 +1,8 @@
-import { type EditActions, type EditToolManager } from '#lib/managers/edit/edit-manager.svelte.js';
-import { getAssetMediaUrl } from '#lib/utils.js';
-import { getDimensions } from '#lib/utils/asset-utils.js';
-import { normalizeTransformEdits } from '#lib/utils/editor.js';
-import { handleError } from '#lib/utils/handle-error.js';
+import { type EditActions, type EditToolManager } from '#lib/managers/edit/edit-manager.svelte.ts';
+import { getAssetMediaUrl } from '#lib/utils.ts';
+import { getDimensions } from '#lib/utils/asset-utils.ts';
+import { normalizeTransformEdits } from '#lib/utils/editor.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
 import { AssetEditAction, AssetMediaSize, MirrorAxis, type AssetResponseDto, type CropParameters } from '@immich/sdk';
 import { clamp } from 'lodash-es';
 import { tick } from 'svelte';
diff --git a/web/src/lib/managers/event-manager.svelte.ts b/web/src/lib/managers/event-manager.svelte.ts
index 3d900177d..a56ab3042 100644
--- a/web/src/lib/managers/event-manager.svelte.ts
+++ b/web/src/lib/managers/event-manager.svelte.ts
@@ -1,6 +1,6 @@
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { BaseEventManager } from '#lib/utils/base-event-manager.svelte.js';
-import type { TreeNode } from '#lib/utils/tree-utils.js';
+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 {
   AlbumResponseDto,
   AlbumUserRole,
diff --git a/web/src/lib/managers/feature-flags-manager.svelte.ts b/web/src/lib/managers/feature-flags-manager.svelte.ts
index 29ef84b6b..2cc8a5e2f 100644
--- a/web/src/lib/managers/feature-flags-manager.svelte.ts
+++ b/web/src/lib/managers/feature-flags-manager.svelte.ts
@@ -1,4 +1,4 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import { getServerFeatures, type ServerFeaturesDto } from '@immich/sdk';
 
 class FeatureFlagsManager {
diff --git a/web/src/lib/managers/geolocation.manager.svelte.ts b/web/src/lib/managers/geolocation.manager.svelte.ts
index e88a148bc..a867405dc 100644
--- a/web/src/lib/managers/geolocation.manager.svelte.ts
+++ b/web/src/lib/managers/geolocation.manager.svelte.ts
@@ -1,4 +1,4 @@
-import type { LatLng } from '#lib/types.js';
+import type { LatLng } from '#lib/types.ts';
 
 class GeolocationManager {
   #lastPoint = $state<LatLng>();
diff --git a/web/src/lib/managers/language-manager.svelte.ts b/web/src/lib/managers/language-manager.svelte.ts
index 29e16e076..8fa7fc375 100644
--- a/web/src/lib/managers/language-manager.svelte.ts
+++ b/web/src/lib/managers/language-manager.svelte.ts
@@ -1,6 +1,6 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { lang } from '#lib/stores/preferences.store.js';
-import { langs } from '#lib/utils/i18n.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { lang } from '#lib/stores/preferences.store.ts';
+import { langs } from '#lib/utils/i18n.ts';
 
 class LanguageManager {
   constructor() {
diff --git a/web/src/lib/managers/memory-manager.svelte.ts b/web/src/lib/managers/memory-manager.svelte.ts
index b6b701be5..573052923 100644
--- a/web/src/lib/managers/memory-manager.svelte.ts
+++ b/web/src/lib/managers/memory-manager.svelte.ts
@@ -1,11 +1,11 @@
-import { QueryParameter } from '#lib/constants.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.js';
-import { Route } from '#lib/route.js';
-import { memoryLaneTitle } from '#lib/utils.js';
-import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+import { QueryParameter } from '#lib/constants.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.ts';
+import { Route } from '#lib/route.ts';
+import { memoryLaneTitle } from '#lib/utils.ts';
+import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
 import {
   type AssetResponseDto,
   MemorySearchOrder,
diff --git a/web/src/lib/managers/plugin-manager.svelte.ts b/web/src/lib/managers/plugin-manager.svelte.ts
index 6fdf0e5da..513d4f483 100644
--- a/web/src/lib/managers/plugin-manager.svelte.ts
+++ b/web/src/lib/managers/plugin-manager.svelte.ts
@@ -1,8 +1,8 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { searchPluginMethodsQuery, searchPluginTemplatesQuery } from '#lib/queries/plugin.query.js';
-import { getWorkflowTriggersQuery } from '#lib/queries/workflow.query.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { searchPluginMethodsQuery, searchPluginTemplatesQuery } from '#lib/queries/plugin.query.ts';
+import { getWorkflowTriggersQuery } from '#lib/queries/workflow.query.ts';
 import {
   WorkflowTrigger,
   type PluginMethodResponseDto,
diff --git a/web/src/lib/managers/queue-manager.svelte.ts b/web/src/lib/managers/queue-manager.svelte.ts
index b001dbb9f..c93f2c347 100644
--- a/web/src/lib/managers/queue-manager.svelte.ts
+++ b/web/src/lib/managers/queue-manager.svelte.ts
@@ -1,5 +1,5 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import type { QueueSnapshot } from '#lib/types.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import type { QueueSnapshot } from '#lib/types.ts';
 import { getQueues, type QueueResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
 
diff --git a/web/src/lib/managers/release-manager.svelte.ts b/web/src/lib/managers/release-manager.svelte.ts
index 1ae719858..f9f4e4965 100644
--- a/web/src/lib/managers/release-manager.svelte.ts
+++ b/web/src/lib/managers/release-manager.svelte.ts
@@ -1,4 +1,4 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import type { ReleaseEventV1 } from '@immich/sdk';
 
 class ReleaseManager {
diff --git a/web/src/lib/managers/search-manager.svelte.spec.ts b/web/src/lib/managers/search-manager.svelte.spec.ts
index 879463ec8..64dc5e13b 100644
--- a/web/src/lib/managers/search-manager.svelte.spec.ts
+++ b/web/src/lib/managers/search-manager.svelte.spec.ts
@@ -1,4 +1,4 @@
-import { searchManager } from '#lib/managers/search-manager.svelte.js';
+import { searchManager } from '#lib/managers/search-manager.svelte.ts';
 
 describe('SearchManager', () => {
   beforeEach(() => {
diff --git a/web/src/lib/managers/search-manager.svelte.ts b/web/src/lib/managers/search-manager.svelte.ts
index ab6cfb0b8..b6bae00aa 100644
--- a/web/src/lib/managers/search-manager.svelte.ts
+++ b/web/src/lib/managers/search-manager.svelte.ts
@@ -1,7 +1,7 @@
-import { MediaType, QueryType, validQueryTypes } from '#lib/constants.js';
-import { Route } from '#lib/route.js';
-import type { SearchFilter } from '#lib/types.js';
-import { asLocalTimeISO, parseUtcDate } from '#lib/utils/date-time.js';
+import { MediaType, QueryType, validQueryTypes } from '#lib/constants.ts';
+import { Route } from '#lib/route.ts';
+import type { SearchFilter } from '#lib/types.ts';
+import { asLocalTimeISO, parseUtcDate } from '#lib/utils/date-time.ts';
 import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
 import type { DateTime } from 'luxon';
 import { SvelteSet } from 'svelte/reactivity';
diff --git a/web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts b/web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts
index 2191e5573..2060feeb6 100644
--- a/web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts
@@ -1,4 +1,4 @@
-import { setDifference, type TimelineDate } from '#lib/utils/timeline-util.js';
+import { setDifference, type TimelineDate } from '#lib/utils/timeline-util.ts';
 import { AssetOrder } from '@immich/sdk';
 import type { TimelineDay } from './timeline-day.svelte';
 import type { TimelineMonth } from './timeline-month.svelte';
diff --git a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
index f98f1d3df..e3a23a895 100644
--- a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
@@ -1,4 +1,4 @@
-import { TUNABLES } from '#lib/utils/tunables.js';
+import { TUNABLES } from '#lib/utils/tunables.ts';
 import { TimelineManager } from '../timeline-manager.svelte';
 import type { TimelineMonth } from '../timeline-month.svelte';
 
diff --git a/web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts b/web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts
index 4b68ca0eb..64bd2f162 100644
--- a/web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts
@@ -1,5 +1,5 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { toISOYearMonthUTC } from '#lib/utils/timeline-util.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { toISOYearMonthUTC } from '#lib/utils/timeline-util.ts';
 import { getTimeBucket } from '@immich/sdk';
 import { TimelineManager } from '../timeline-manager.svelte';
 import type { TimelineMonth } from '../timeline-month.svelte';
diff --git a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
index 8534005f8..ad7a626ed 100644
--- a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
@@ -1,4 +1,4 @@
-import { getOrderingDate, plainDateTimeCompare, type TimelineYearMonth } from '#lib/utils/timeline-util.js';
+import { getOrderingDate, plainDateTimeCompare, type TimelineYearMonth } from '#lib/utils/timeline-util.ts';
 import { AssetOrder, AssetOrderBy, type AssetResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import { TimelineManager } from '../timeline-manager.svelte';
diff --git a/web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts b/web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts
index 1ce408e85..5e90074ab 100644
--- a/web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts
@@ -1,7 +1,7 @@
-import type { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-import type { PendingChange, TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { websocketEvents } from '#lib/stores/websocket.js';
-import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+import type { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+import type { PendingChange, TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+import { websocketEvents } from '#lib/stores/websocket.ts';
+import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
 import { throttle } from 'lodash-es';
 import type { Unsubscriber } from 'svelte/store';
 
diff --git a/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts b/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts
index e1331f99b..1ca5baed0 100644
--- a/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts
@@ -1,7 +1,7 @@
-import type { CommonLayoutOptions, CommonPosition } from '#lib/utils/layout-utils.js';
-import { getJustifiedLayoutFromAssets } from '#lib/utils/layout-utils.js';
-import { getOrderingDate, plainDateTimeCompare } from '#lib/utils/timeline-util.js';
-import { TUNABLES } from '#lib/utils/tunables.js';
+import type { CommonLayoutOptions, CommonPosition } from '#lib/utils/layout-utils.ts';
+import { getJustifiedLayoutFromAssets } 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';
 import { SvelteSet } from 'svelte/reactivity';
 import type { TimelineMonth } from './timeline-month.svelte';
diff --git a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
index 20eec0703..5c50d65ff 100644
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
@@ -1,8 +1,8 @@
-import { sdkMock } from '#lib/__mocks__/sdk.mock.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { getTimelineMonthByDate } from '#lib/managers/timeline-manager/internal/search-support.svelte.js';
-import { AbortError } from '#lib/utils.js';
-import { fromISODateTimeUTCToObject } from '#lib/utils/timeline-util.js';
+import { sdkMock } from '#lib/__mocks__/sdk.mock.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { getTimelineMonthByDate } from '#lib/managers/timeline-manager/internal/search-support.svelte.ts';
+import { AbortError } from '#lib/utils.ts';
+import { fromISODateTimeUTCToObject } from '#lib/utils/timeline-util.ts';
 import { AssetOrderBy, AssetVisibility, type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { tick } from 'svelte';
 import { assetFactory, timelineAssetFactory, toResponseDto } from '#test-data/factories/asset-factory';
diff --git a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
index 838044da5..9a761ae29 100644
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -1,10 +1,10 @@
-import { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { GroupInsertionCache } from '#lib/managers/timeline-manager/group-insertion-cache.svelte.js';
-import { updateTimelineMonthViewportProximity } from '#lib/managers/timeline-manager/internal/intersection-support.svelte.js';
-import { updateGeometry } from '#lib/managers/timeline-manager/internal/layout-support.svelte.js';
-import { loadFromTimeBuckets } from '#lib/managers/timeline-manager/internal/load-support.svelte.js';
+import { VirtualScrollManager } from '#lib/managers/VirtualScrollManager/VirtualScrollManager.svelte.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { GroupInsertionCache } from '#lib/managers/timeline-manager/group-insertion-cache.svelte.ts';
+import { updateTimelineMonthViewportProximity } from '#lib/managers/timeline-manager/internal/intersection-support.svelte.ts';
+import { updateGeometry } from '#lib/managers/timeline-manager/internal/layout-support.svelte.ts';
+import { loadFromTimeBuckets } from '#lib/managers/timeline-manager/internal/load-support.svelte.ts';
 import {
   findClosestTimelineMonthForDate,
   findTimelineMonthForAsset as findTimelineMonthForAssetUtil,
@@ -12,11 +12,11 @@ import {
   getAssetWithOffset,
   getTimelineMonthByDate,
   retrieveRange as retrieveRangeUtil,
-} from '#lib/managers/timeline-manager/internal/search-support.svelte.js';
-import { WebsocketSupport } from '#lib/managers/timeline-manager/internal/websocket-support.svelte.js';
-import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.js';
-import { updateStackedAssetInTimeline } from '#lib/utils/actions.js';
-import { CancellableTask } from '#lib/utils/cancellable-task.js';
+} from '#lib/managers/timeline-manager/internal/search-support.svelte.ts';
+import { WebsocketSupport } from '#lib/managers/timeline-manager/internal/websocket-support.svelte.ts';
+import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.ts';
+import { updateStackedAssetInTimeline } from '#lib/utils/actions.ts';
+import { CancellableTask } from '#lib/utils/cancellable-task.ts';
 import {
   getOrderingDate,
   isAssetResponseDto,
@@ -24,7 +24,7 @@ import {
   toTimelineAsset,
   type TimelineDateTime,
   type TimelineYearMonth,
-} from '#lib/utils/timeline-util.js';
+} from '#lib/utils/timeline-util.ts';
 import { AssetOrder, AssetOrderBy, getAssetInfo, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
 import { clamp, isEqual } from 'lodash-es';
 import { SvelteDate, SvelteSet } from 'svelte/reactivity';
diff --git a/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts b/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts
index c9bae5424..9c6b7a74a 100644
--- a/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts
@@ -2,9 +2,9 @@ import {
   ViewportProximity,
   isInOrNearViewport as isInOrNearViewportUtil,
   isInViewport as isInViewportUtil,
-} from '#lib/managers/timeline-manager/internal/intersection-support.svelte.js';
-import { CancellableTask } from '#lib/utils/cancellable-task.js';
-import { handleError } from '#lib/utils/handle-error.js';
+} from '#lib/managers/timeline-manager/internal/intersection-support.svelte.ts';
+import { CancellableTask } from '#lib/utils/cancellable-task.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
 import {
   formatGroupTitle,
   formatTimelineMonthTitle,
@@ -17,7 +17,7 @@ import {
   type TimelineYearMonth,
   getOrderingDate,
   fromISODateTimeUTC,
-} from '#lib/utils/timeline-util.js';
+} from '#lib/utils/timeline-util.ts';
 import { AssetOrder, AssetOrderBy, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { SvelteSet } from 'svelte/reactivity';
diff --git a/web/src/lib/managers/timeline-manager/types.ts b/web/src/lib/managers/timeline-manager/types.ts
index 7e87a6006..cb9f03cc4 100644
--- a/web/src/lib/managers/timeline-manager/types.ts
+++ b/web/src/lib/managers/timeline-manager/types.ts
@@ -1,4 +1,4 @@
-import type { TimelineDate, TimelineDateTime, TimelineYearMonth } from '#lib/utils/timeline-util.js';
+import type { TimelineDate, TimelineDateTime, TimelineYearMonth } from '#lib/utils/timeline-util.ts';
 import type { AssetStackResponseDto, AssetVisibility } from '@immich/sdk';
 
 export type ViewportTopMonth = TimelineYearMonth | undefined | 'lead-in' | 'lead-out';
diff --git a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
index a007cdb2b..4ad157a31 100644
--- a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
@@ -1,4 +1,4 @@
-import type { CommonPosition } from '#lib/utils/layout-utils.js';
+import type { CommonPosition } from '#lib/utils/layout-utils.ts';
 import type { TimelineAsset } from './types';
 
 export class ViewerAsset {
diff --git a/web/src/lib/managers/upload-manager.svelte.ts b/web/src/lib/managers/upload-manager.svelte.ts
index 91e7411c6..ba09d6d32 100644
--- a/web/src/lib/managers/upload-manager.svelte.ts
+++ b/web/src/lib/managers/upload-manager.svelte.ts
@@ -1,6 +1,6 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { uploadAssetsStore } from '#lib/stores/upload.js';
-import { cancelUploadRequests } from '#lib/utils.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { uploadAssetsStore } from '#lib/stores/upload.ts';
+import { cancelUploadRequests } from '#lib/utils.ts';
 import { getSupportedMediaTypes, type ServerMediaTypesResponseDto } from '@immich/sdk';
 
 class UploadManager {
diff --git a/web/src/lib/managers/user-preferences-manager.svelte.ts b/web/src/lib/managers/user-preferences-manager.svelte.ts
index 607145afa..dbab24f50 100644
--- a/web/src/lib/managers/user-preferences-manager.svelte.ts
+++ b/web/src/lib/managers/user-preferences-manager.svelte.ts
@@ -1,4 +1,4 @@
-import { PersistedLocalStorage } from '#lib/utils/persisted.js';
+import { PersistedLocalStorage } from '#lib/utils/persisted.ts';
 import { isEqual } from 'lodash-es';
 
 export type MemoriesPreferences = {
diff --git a/web/src/lib/modals/AddUsersModal.svelte b/web/src/lib/modals/AddUsersModal.svelte
index 030688af5..8da141036 100644
--- a/web/src/lib/modals/AddUsersModal.svelte
+++ b/web/src/lib/modals/AddUsersModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { initInput } from '#lib/actions/focus.js';
+  import { initInput } from '#lib/actions/focus.ts';
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { searchUsers, type UserResponseDto } from '@immich/sdk';
   import { FormModal, ListButton, LoadingSpinner, Stack, Text } from '@immich/ui';
   import { sortBy } from 'lodash-es';
diff --git a/web/src/lib/modals/AlbumEditModal.svelte b/web/src/lib/modals/AlbumEditModal.svelte
index e6e0d6281..d1f310017 100644
--- a/web/src/lib/modals/AlbumEditModal.svelte
+++ b/web/src/lib/modals/AlbumEditModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AlbumCover from '#lib/components/album-page/AlbumCover.svelte';
-  import { updateAlbumInfoMutation } from '#lib/queries/album.query.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  import { updateAlbumInfoMutation } from '#lib/queries/album.query.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { Field, FormModal, Input, Textarea } from '@immich/ui';
   import { mdiRenameOutline } from '@mdi/js';
diff --git a/web/src/lib/modals/AlbumOptionsModal.svelte b/web/src/lib/modals/AlbumOptionsModal.svelte
index 89697a816..8ff4e2ba6 100644
--- a/web/src/lib/modals/AlbumOptionsModal.svelte
+++ b/web/src/lib/modals/AlbumOptionsModal.svelte
@@ -6,10 +6,10 @@
     getAlbumActions,
     handleRemoveUserFromAlbum,
     handleUpdateUserAlbumRole,
-  } from '#lib/services/album.service.js';
-  import { getAlbumQuery, updateAlbumInfoMutation } from '#lib/queries/album.query.js';
-  import { executeMutation, queryClient } from '#lib/queries/client.js';
-  import { getAllSharedLinksQuery } from '#lib/queries/shared-link.query.js';
+  } 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,
diff --git a/web/src/lib/modals/AlbumPickerModal.spec.ts b/web/src/lib/modals/AlbumPickerModal.spec.ts
index aa5af952c..e1692531a 100644
--- a/web/src/lib/modals/AlbumPickerModal.spec.ts
+++ b/web/src/lib/modals/AlbumPickerModal.spec.ts
@@ -1,7 +1,7 @@
-import { getAnimateMock } from '#lib/__mocks__/animate.mock.js';
-import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
-import { sdkMock } from '#lib/__mocks__/sdk.mock.js';
-import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.js';
+import { getAnimateMock } from '#lib/__mocks__/animate.mock.ts';
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.ts';
+import { sdkMock } from '#lib/__mocks__/sdk.mock.ts';
+import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.ts';
 import { render, screen, waitFor } from '@testing-library/svelte';
 import { init, register, waitLocale } from 'svelte-i18n';
 import AlbumPickerModal from './AlbumPickerModal.svelte';
diff --git a/web/src/lib/modals/AlbumPickerModal.svelte b/web/src/lib/modals/AlbumPickerModal.svelte
index 58ddcbb46..5bf9ec914 100644
--- a/web/src/lib/modals/AlbumPickerModal.svelte
+++ b/web/src/lib/modals/AlbumPickerModal.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { initInput } from '#lib/actions/focus.js';
+  import { initInput } from '#lib/actions/focus.ts';
   import {
     AlbumModalRowConverter,
     AlbumModalRowType,
     isSelectableRowType,
-  } from '#lib/components/shared-components/album-selection/album-selection-utils.js';
-  import { createAlbumMutation, getAllAlbumsQuery, getRecentAlbumsQuery } from '#lib/queries/album.query.js';
-  import { executeMutation, queryClient } from '#lib/queries/client.js';
-  import { albumViewSettings } from '#lib/stores/preferences.store.js';
+  } from '#lib/components/shared-components/album-selection/album-selection-utils.ts';
+  import { createAlbumMutation, getAllAlbumsQuery, getRecentAlbumsQuery } from '#lib/queries/album.query.ts';
+  import { executeMutation, queryClient } from '#lib/queries/client.ts';
+  import { albumViewSettings } from '#lib/stores/preferences.store.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { Button, Icon, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
   import { mdiKeyboardReturn } from '@mdi/js';
diff --git a/web/src/lib/modals/ApiKeyCreateModal.svelte b/web/src/lib/modals/ApiKeyCreateModal.svelte
index 44e36f5fc..03da8123b 100644
--- a/web/src/lib/modals/ApiKeyCreateModal.svelte
+++ b/web/src/lib/modals/ApiKeyCreateModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import ApiKeyPermissionsPicker from '#lib/components/ApiKeyPermissionsPicker.svelte';
   import ApiKeySecretModal from '#lib/modals/ApiKeySecretModal.svelte';
-  import { createApiKeyMutation } from '#lib/queries/api-key.query.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  import { createApiKeyMutation } from '#lib/queries/api-key.query.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
   import { Permission } from '@immich/sdk';
   import { Field, FormModal, Input, modalManager, toastManager } from '@immich/ui';
   import { mdiKeyVariant } from '@mdi/js';
diff --git a/web/src/lib/modals/ApiKeySecretModal.svelte b/web/src/lib/modals/ApiKeySecretModal.svelte
index 056a9d578..a58a83d97 100644
--- a/web/src/lib/modals/ApiKeySecretModal.svelte
+++ b/web/src/lib/modals/ApiKeySecretModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { copyToClipboard } from '#lib/utils.js';
+  import { copyToClipboard } from '#lib/utils.ts';
   import { Button, HStack, Modal, ModalBody, ModalFooter, Text, Textarea } from '@immich/ui';
   import { mdiKeyVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/ApiKeyUpdateModal.svelte b/web/src/lib/modals/ApiKeyUpdateModal.svelte
index e50da2a72..7561e80ad 100644
--- a/web/src/lib/modals/ApiKeyUpdateModal.svelte
+++ b/web/src/lib/modals/ApiKeyUpdateModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import ApiKeyPermissionsPicker from '#lib/components/ApiKeyPermissionsPicker.svelte';
-  import { updateApiKeyMutation } from '#lib/queries/api-key.query.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  import { updateApiKeyMutation } from '#lib/queries/api-key.query.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
   import { Permission } from '@immich/sdk';
   import { Field, FormModal, Input, toastManager } from '@immich/ui';
   import { mdiKeyVariant } from '@mdi/js';
diff --git a/web/src/lib/modals/AssetAddToAlbumModal.svelte b/web/src/lib/modals/AssetAddToAlbumModal.svelte
index 80e9ff20a..685ab40be 100644
--- a/web/src/lib/modals/AssetAddToAlbumModal.svelte
+++ b/web/src/lib/modals/AssetAddToAlbumModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AlbumPickerModal from '#lib/modals/AlbumPickerModal.svelte';
-  import { addAssetsToAlbumsMutation } from '#lib/queries/album.query.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  import { addAssetsToAlbumsMutation } from '#lib/queries/album.query.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
   import { type AlbumResponseDto } from '@immich/sdk';
 
   type Props = {
diff --git a/web/src/lib/modals/AssetChangeDateModal.spec.ts b/web/src/lib/modals/AssetChangeDateModal.spec.ts
index 46ebb1106..3c1d5e2ad 100644
--- a/web/src/lib/modals/AssetChangeDateModal.spec.ts
+++ b/web/src/lib/modals/AssetChangeDateModal.spec.ts
@@ -1,6 +1,6 @@
-import { getAnimateMock } from '#lib/__mocks__/animate.mock.js';
-import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
-import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.js';
+import { getAnimateMock } from '#lib/__mocks__/animate.mock.ts';
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.ts';
+import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.ts';
 import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import { DateTime } from 'luxon';
 import { afterAll, beforeEach, describe, expect, test, vi } from 'vitest';
diff --git a/web/src/lib/modals/AssetChangeDateModal.svelte b/web/src/lib/modals/AssetChangeDateModal.svelte
index 7372acec3..d3e5a8699 100644
--- a/web/src/lib/modals/AssetChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetChangeDateModal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import Combobox from '#lib/components/shared-components/Combobox.svelte';
   import DateInput from '#lib/elements/DateInput.svelte';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { getPreferredTimeZone, getTimezones, toIsoDate } from '#lib/modals/timezone-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import { getPreferredTimeZone, getTimezones, toIsoDate } from '#lib/modals/timezone-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAsset } from '@immich/sdk';
   import { FormModal, Label } from '@immich/ui';
   import { mdiCalendarEdit } from '@mdi/js';
diff --git a/web/src/lib/modals/AssetDeleteConfirmModal.svelte b/web/src/lib/modals/AssetDeleteConfirmModal.svelte
index 0ff0e8e1a..87e4e9cd3 100644
--- a/web/src/lib/modals/AssetDeleteConfirmModal.svelte
+++ b/web/src/lib/modals/AssetDeleteConfirmModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { showDeleteModal } from '#lib/stores/preferences.store.js';
+  import { showDeleteModal } from '#lib/stores/preferences.store.ts';
   import { Checkbox, ConfirmModal, Label } from '@immich/ui';
   import { mdiDeleteForeverOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts b/web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts
index 128c61135..da90a5a86 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts
+++ b/web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts
@@ -1,9 +1,9 @@
-import { getAnimateMock } from '#lib/__mocks__/animate.mock.js';
-import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
-import { sdkMock } from '#lib/__mocks__/sdk.mock.js';
-import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { calcNewDate } from '#lib/modals/timezone-utils.js';
+import { getAnimateMock } from '#lib/__mocks__/animate.mock.ts';
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.ts';
+import { sdkMock } from '#lib/__mocks__/sdk.mock.ts';
+import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { calcNewDate } from '#lib/modals/timezone-utils.ts';
 import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { DateTime } from 'luxon';
diff --git a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
index 3b89c2142..bbd1f50bc 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
@@ -2,11 +2,11 @@
   import Combobox from '#lib/components/shared-components/Combobox.svelte';
   import DateInput from '#lib/elements/DateInput.svelte';
   import DurationInput from '#lib/elements/DurationInput.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { getPreferredTimeZone, getTimezones, toIsoDate, type ZoneOption } from '#lib/modals/timezone-utils.js';
-  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import { getPreferredTimeZone, getTimezones, toIsoDate, type ZoneOption } from '#lib/modals/timezone-utils.ts';
+  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateAssets } from '@immich/sdk';
   import { Field, FormModal, Label, Switch } from '@immich/ui';
   import { mdiCalendarEdit } from '@mdi/js';
diff --git a/web/src/lib/modals/AssetTagModal.svelte b/web/src/lib/modals/AssetTagModal.svelte
index 801e302b7..7422f5bfc 100644
--- a/web/src/lib/modals/AssetTagModal.svelte
+++ b/web/src/lib/modals/AssetTagModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { handleTagAssets } from '#lib/services/asset.service.js';
+  import { handleTagAssets } from '#lib/services/asset.service.ts';
   import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
   import { FormModal } from '@immich/ui';
   import { mdiTag } from '@mdi/js';
diff --git a/web/src/lib/modals/AvatarEditModal.svelte b/web/src/lib/modals/AvatarEditModal.svelte
index acde845c8..b12c69fd5 100644
--- a/web/src/lib/modals/AvatarEditModal.svelte
+++ b/web/src/lib/modals/AvatarEditModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  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 { Modal, ModalBody, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/CreateFaceModal.svelte b/web/src/lib/modals/CreateFaceModal.svelte
index e48a0b822..a42e6b451 100644
--- a/web/src/lib/modals/CreateFaceModal.svelte
+++ b/web/src/lib/modals/CreateFaceModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { delay } from '#lib/utils/asset-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { delay } from '#lib/utils/asset-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { createFace, createPerson } from '@immich/sdk';
   import { Field, FormModal, Input, LoadingSpinner, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/GeolocationPointPickerModal.svelte b/web/src/lib/modals/GeolocationPointPickerModal.svelte
index 3c4d3c52c..d9fc7ee6a 100644
--- a/web/src/lib/modals/GeolocationPointPickerModal.svelte
+++ b/web/src/lib/modals/GeolocationPointPickerModal.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { isDefined } from '#lib';
-  import { clickOutside } from '#lib/actions/click-outside.js';
-  import { listNavigation } from '#lib/actions/list-navigation.js';
+  import { clickOutside } from '#lib/actions/click-outside.ts';
+  import { listNavigation } from '#lib/actions/list-navigation.ts';
   import CoordinatesInput from '#lib/components/shared-components/CoordinatesInput.svelte';
   import type Map from '#lib/components/shared-components/map/Map.svelte';
-  import { timeDebounceOnSearch, timeToLoadTheMap } from '#lib/constants.js';
+  import { timeDebounceOnSearch, timeToLoadTheMap } from '#lib/constants.ts';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { geolocationManager } from '#lib/managers/geolocation.manager.svelte.js';
-  import type { LatLng } from '#lib/types.js';
-  import { delay } from '#lib/utils/asset-utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { geolocationManager } from '#lib/managers/geolocation.manager.svelte.ts';
+  import type { LatLng } from '#lib/types.ts';
+  import { delay } from '#lib/utils/asset-utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
   import { ConfirmModal, LoadingSpinner } from '@immich/ui';
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
diff --git a/web/src/lib/modals/GeolocationUpdateConfirmModal.svelte b/web/src/lib/modals/GeolocationUpdateConfirmModal.svelte
index a7e235ff4..00ff5b31d 100644
--- a/web/src/lib/modals/GeolocationUpdateConfirmModal.svelte
+++ b/web/src/lib/modals/GeolocationUpdateConfirmModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import type { LatLng } from '#lib/types.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import type { LatLng } from '#lib/types.ts';
   import { Alert, ConfirmModal } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/modals/JobCreateModal.svelte b/web/src/lib/modals/JobCreateModal.svelte
index 82803260c..53de4a554 100644
--- a/web/src/lib/modals/JobCreateModal.svelte
+++ b/web/src/lib/modals/JobCreateModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Combobox, { type ComboBoxOption } from '#lib/components/shared-components/Combobox.svelte';
-  import { handleCreateJob } from '#lib/services/job.service.js';
+  import { handleCreateJob } from '#lib/services/job.service.ts';
   import { ManualJobName } from '@immich/sdk';
   import { FormModal } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/LibraryExclusionPatternAddModal.svelte b/web/src/lib/modals/LibraryExclusionPatternAddModal.svelte
index 71fa47179..154c47219 100644
--- a/web/src/lib/modals/LibraryExclusionPatternAddModal.svelte
+++ b/web/src/lib/modals/LibraryExclusionPatternAddModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { executeMutation } from '#lib/queries/client.js';
-  import { updateLibraryMutation } from '#lib/queries/library.query.js';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { updateLibraryMutation } from '#lib/queries/library.query.ts';
   import type { LibraryResponseDto } from '@immich/sdk';
   import { Field, FormModal, HelperText, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
diff --git a/web/src/lib/modals/LibraryExclusionPatternEditModal.svelte b/web/src/lib/modals/LibraryExclusionPatternEditModal.svelte
index 77f31a3ee..2e83eb2b8 100644
--- a/web/src/lib/modals/LibraryExclusionPatternEditModal.svelte
+++ b/web/src/lib/modals/LibraryExclusionPatternEditModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { executeMutation } from '#lib/queries/client.js';
-  import { updateLibraryMutation } from '#lib/queries/library.query.js';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { updateLibraryMutation } from '#lib/queries/library.query.ts';
   import type { LibraryResponseDto } from '@immich/sdk';
   import { Field, FormModal, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
diff --git a/web/src/lib/modals/LibraryFolderAddModal.svelte b/web/src/lib/modals/LibraryFolderAddModal.svelte
index 73c12fd5b..abad5772d 100644
--- a/web/src/lib/modals/LibraryFolderAddModal.svelte
+++ b/web/src/lib/modals/LibraryFolderAddModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { executeMutation } from '#lib/queries/client.js';
-  import { updateLibraryMutation } from '#lib/queries/library.query.js';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { updateLibraryMutation } from '#lib/queries/library.query.ts';
   import type { LibraryResponseDto } from '@immich/sdk';
   import { Field, FormModal, HelperText, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
diff --git a/web/src/lib/modals/LibraryFolderEditModal.svelte b/web/src/lib/modals/LibraryFolderEditModal.svelte
index cb2225390..f0d4d994f 100644
--- a/web/src/lib/modals/LibraryFolderEditModal.svelte
+++ b/web/src/lib/modals/LibraryFolderEditModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { executeMutation } from '#lib/queries/client.js';
-  import { updateLibraryMutation } from '#lib/queries/library.query.js';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { updateLibraryMutation } from '#lib/queries/library.query.ts';
   import type { LibraryResponseDto } from '@immich/sdk';
   import { Field, FormModal, Input, Text } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
diff --git a/web/src/lib/modals/MapModal.svelte b/web/src/lib/modals/MapModal.svelte
index ec5c35d09..6e7a96bac 100644
--- a/web/src/lib/modals/MapModal.svelte
+++ b/web/src/lib/modals/MapModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { timeToLoadTheMap } from '#lib/constants.js';
-  import { delay } from '#lib/utils/asset-utils.js';
+  import { timeToLoadTheMap } from '#lib/constants.ts';
+  import { delay } from '#lib/utils/asset-utils.ts';
   import type { MapMarkerResponseDto } from '@immich/sdk';
   import { LoadingSpinner, Modal, ModalBody } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/MapSettingsModal.svelte b/web/src/lib/modals/MapSettingsModal.svelte
index a0ea2ecda..7fe2551e1 100644
--- a/web/src/lib/modals/MapSettingsModal.svelte
+++ b/web/src/lib/modals/MapSettingsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { mapSettings, type MapSettings } from '#lib/stores/preferences.store.js';
+  import { mapSettings, type MapSettings } from '#lib/stores/preferences.store.ts';
   import { Button, DatePicker, Field, FormModal, Select, Stack, Switch } from '@immich/ui';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/MemoriesSettingsModal.svelte b/web/src/lib/modals/MemoriesSettingsModal.svelte
index 0a473fa8b..97f052324 100644
--- a/web/src/lib/modals/MemoriesSettingsModal.svelte
+++ b/web/src/lib/modals/MemoriesSettingsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { userPreferencesManager, type MemoriesPreferences } from '#lib/managers/user-preferences-manager.svelte.js';
+  import { userPreferencesManager, type MemoriesPreferences } from '#lib/managers/user-preferences-manager.svelte.ts';
   import { Field, FormModal, Stack, Switch } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/modals/NavigateToDateModal.svelte b/web/src/lib/modals/NavigateToDateModal.svelte
index df76d31c0..e65537a5b 100644
--- a/web/src/lib/modals/NavigateToDateModal.svelte
+++ b/web/src/lib/modals/NavigateToDateModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import DateInput from '#lib/elements/DateInput.svelte';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { getPreferredTimeZone, getTimezones, toDatetime, type ZoneOption } from '#lib/modals/timezone-utils.js';
+  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import { getPreferredTimeZone, getTimezones, toDatetime, type ZoneOption } from '#lib/modals/timezone-utils.ts';
   import { FormModal, HStack, VStack } from '@immich/ui';
   import { mdiNavigationVariantOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/modals/ObtainiumConfigModal.svelte b/web/src/lib/modals/ObtainiumConfigModal.svelte
index d3335cb1b..11649be9b 100644
--- a/web/src/lib/modals/ObtainiumConfigModal.svelte
+++ b/web/src/lib/modals/ObtainiumConfigModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { createApiKeyMutation } from '#lib/queries/api-key.query.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  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 { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/PartnerSelectionModal.svelte b/web/src/lib/modals/PartnerSelectionModal.svelte
index 6d1f8f58d..2ca1948ea 100644
--- a/web/src/lib/modals/PartnerSelectionModal.svelte
+++ b/web/src/lib/modals/PartnerSelectionModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
   import { Button, ListButton, LoadingSpinner, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/PasskeyUpdateModal.svelte b/web/src/lib/modals/PasskeyUpdateModal.svelte
index 96359dfb7..16e062fe2 100644
--- a/web/src/lib/modals/PasskeyUpdateModal.svelte
+++ b/web/src/lib/modals/PasskeyUpdateModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { executeMutation } from '#lib/queries/client.js';
-  import { updatePasskeyMutation } from '#lib/queries/passkey.query.js';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { updatePasskeyMutation } from '#lib/queries/passkey.query.ts';
   import { Field, FormModal, Input } from '@immich/ui';
   import { mdiShieldKeyOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/PasswordResetSuccessModal.svelte b/web/src/lib/modals/PasswordResetSuccessModal.svelte
index dacfcbd9b..04e57b043 100644
--- a/web/src/lib/modals/PasswordResetSuccessModal.svelte
+++ b/web/src/lib/modals/PasswordResetSuccessModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { copyToClipboard } from '#lib/utils.js';
+  import { copyToClipboard } from '#lib/utils.ts';
   import { BasicModal, Code, IconButton, Text } from '@immich/ui';
   import { mdiCheck, mdiContentCopy } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/PeopleFilterModal.svelte b/web/src/lib/modals/PeopleFilterModal.svelte
index 9af50e95f..04e64cacd 100644
--- a/web/src/lib/modals/PeopleFilterModal.svelte
+++ b/web/src/lib/modals/PeopleFilterModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import PeopleFilterUserPicker from '#lib/modals/PeopleFilterUserPicker.svelte';
-  import type { PeopleFilter } from '#lib/types.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  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 { mdiClose, mdiTune } from '@mdi/js';
diff --git a/web/src/lib/modals/PeopleFilterUserPicker.svelte b/web/src/lib/modals/PeopleFilterUserPicker.svelte
index 25efb2663..c3ea0d39f 100644
--- a/web/src/lib/modals/PeopleFilterUserPicker.svelte
+++ b/web/src/lib/modals/PeopleFilterUserPicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import type { UserResponseDto } from '@immich/sdk';
   import { BasicModal, Icon, ListButton, Stack, Text } from '@immich/ui';
   import { mdiFilterOffOutline } from '@mdi/js';
diff --git a/web/src/lib/modals/PeoplePickerModal.svelte b/web/src/lib/modals/PeoplePickerModal.svelte
index 5ab549962..d0d65cd77 100644
--- a/web/src/lib/modals/PeoplePickerModal.svelte
+++ b/web/src/lib/modals/PeoplePickerModal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
   import { Button, HStack, LoadingSpinner, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { onMount } from 'svelte';
diff --git a/web/src/lib/modals/PeopleSelectionModal.svelte b/web/src/lib/modals/PeopleSelectionModal.svelte
index fbb1ecce7..c44b8f0e3 100644
--- a/web/src/lib/modals/PeopleSelectionModal.svelte
+++ b/web/src/lib/modals/PeopleSelectionModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { type PersonResponseDto } from '@immich/sdk';
   import {
     ActionButton,
diff --git a/web/src/lib/modals/PersonBulkShareModal.svelte b/web/src/lib/modals/PersonBulkShareModal.svelte
index 8996f032e..3b62f4d70 100644
--- a/web/src/lib/modals/PersonBulkShareModal.svelte
+++ b/web/src/lib/modals/PersonBulkShareModal.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import PeopleSelectionModal from '#lib/modals/PeopleSelectionModal.svelte';
-  import { handleBulkUpsert } from '#lib/services/person-user.service.js';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { handleBulkUpsert } from '#lib/services/person-user.service.ts';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { getAllPeople, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
   import {
     ActionButton,
diff --git a/web/src/lib/modals/PersonEditAccessModal.svelte b/web/src/lib/modals/PersonEditAccessModal.svelte
index 4c16dc679..c1ddcde6e 100644
--- a/web/src/lib/modals/PersonEditAccessModal.svelte
+++ b/web/src/lib/modals/PersonEditAccessModal.svelte
@@ -2,9 +2,9 @@
   import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { getPersonUserActions, getPersonUsersActions } from '#lib/services/person-user.service.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { getPersonUserActions, getPersonUsersActions } from '#lib/services/person-user.service.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import {
     getClusterGroupUsers,
     getUsersForPeople,
diff --git a/web/src/lib/modals/PersonEditModal.svelte b/web/src/lib/modals/PersonEditModal.svelte
index 88951f6c9..00e5c0660 100644
--- a/web/src/lib/modals/PersonEditModal.svelte
+++ b/web/src/lib/modals/PersonEditModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleUpdatePerson } from '#lib/services/person.service.js';
+  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 { mdiPencilOutline } from '@mdi/js';
diff --git a/web/src/lib/modals/PersonMergeSuggestionModal.svelte b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
index 420a21b6d..fad0bcdb4 100644
--- a/web/src/lib/modals/PersonMergeSuggestionModal.svelte
+++ b/web/src/lib/modals/PersonMergeSuggestionModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { mergePeople, type PersonResponseDto } from '@immich/sdk';
   import { FormModal, Icon, IconButton, toastManager } from '@immich/ui';
   import { mdiArrowLeft, mdiCallMerge, mdiSwapHorizontal } from '@mdi/js';
diff --git a/web/src/lib/modals/PinCodeResetModal.svelte b/web/src/lib/modals/PinCodeResetModal.svelte
index 3dbab45f5..025ad68ee 100644
--- a/web/src/lib/modals/PinCodeResetModal.svelte
+++ b/web/src/lib/modals/PinCodeResetModal.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { handleResetPinCode } from '#lib/services/user.service.js';
+  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.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/lib/modals/PluginMethodPicker.svelte b/web/src/lib/modals/PluginMethodPicker.svelte
index a02244cc2..2cedfed3e 100644
--- a/web/src/lib/modals/PluginMethodPicker.svelte
+++ b/web/src/lib/modals/PluginMethodPicker.svelte
@@ -3,8 +3,8 @@
   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.js';
-  import { searchPluginMethodsQuery } from '#lib/queries/plugin.query.js';
+  import { queryClient } from '#lib/queries/client.ts';
+  import { searchPluginMethodsQuery } from '#lib/queries/plugin.query.ts';
 
   type Props = {
     trigger: WorkflowTrigger;
diff --git a/web/src/lib/modals/ProfileImageCropperModal.svelte b/web/src/lib/modals/ProfileImageCropperModal.svelte
index a3cf6a826..463b09fb1 100644
--- a/web/src/lib/modals/ProfileImageCropperModal.svelte
+++ b/web/src/lib/modals/ProfileImageCropperModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
   import { FormModal, toastManager } from '@immich/ui';
   import domtoimage from 'dom-to-image';
diff --git a/web/src/lib/modals/QrCodeModal.svelte b/web/src/lib/modals/QrCodeModal.svelte
index 8404cda48..fed5c31f3 100644
--- a/web/src/lib/modals/QrCodeModal.svelte
+++ b/web/src/lib/modals/QrCodeModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Qrcode from '#lib/components/shared-components/Qrcode.svelte';
-  import { copyToClipboard } from '#lib/utils.js';
+  import { copyToClipboard } from '#lib/utils.ts';
   import { HStack, IconButton, Input, Modal, ModalBody } from '@immich/ui';
   import { mdiContentCopy, mdiLink } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/ServerAboutModal.svelte b/web/src/lib/modals/ServerAboutModal.svelte
index fe22e1f90..9adb099e7 100644
--- a/web/src/lib/modals/ServerAboutModal.svelte
+++ b/web/src/lib/modals/ServerAboutModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import ServerAboutItem from '#lib/components/ServerAboutItem.svelte';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { type ServerAboutResponseDto, type ServerVersionHistoryResponseDto } from '@immich/sdk';
   import { Alert, Label, Modal, ModalBody } from '@immich/ui';
   import { DateTime } from 'luxon';
diff --git a/web/src/lib/modals/SharedLinkCreateModal.svelte b/web/src/lib/modals/SharedLinkCreateModal.svelte
index babdb08e3..f975a0f05 100644
--- a/web/src/lib/modals/SharedLinkCreateModal.svelte
+++ b/web/src/lib/modals/SharedLinkCreateModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import SharedLinkFormFields from '#lib/components/SharedLinkFormFields.svelte';
-  import { executeMutation } from '#lib/queries/client.js';
-  import { createSharedLinkMutation } from '#lib/queries/shared-link.query.js';
-  import { showSharedLinkQrCode } from '#lib/services/shared-link.service.js';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { createSharedLinkMutation } from '#lib/queries/shared-link.query.ts';
+  import { showSharedLinkQrCode } from '#lib/services/shared-link.service.ts';
   import { SharedLinkType } from '@immich/sdk';
   import { FormModal } from '@immich/ui';
   import { mdiLink } from '@mdi/js';
diff --git a/web/src/lib/modals/ShortcutsModal.svelte b/web/src/lib/modals/ShortcutsModal.svelte
index 986da1187..909cd797d 100644
--- a/web/src/lib/modals/ShortcutsModal.svelte
+++ b/web/src/lib/modals/ShortcutsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import { Icon, Modal, ModalBody } from '@immich/ui';
   import { mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/TagCreateModal.svelte b/web/src/lib/modals/TagCreateModal.svelte
index e07b745f5..4724dfaed 100644
--- a/web/src/lib/modals/TagCreateModal.svelte
+++ b/web/src/lib/modals/TagCreateModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { handleCreateTag } from '#lib/services/tag.service.js';
-  import type { TreeNode } from '#lib/utils/tree-utils.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { handleCreateTag } from '#lib/services/tag.service.ts';
+  import type { TreeNode } from '#lib/utils/tree-utils.ts';
   import { FormModal, Text } from '@immich/ui';
   import { mdiTag } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/TagEditModal.svelte b/web/src/lib/modals/TagEditModal.svelte
index bdefdf61d..691584a4f 100644
--- a/web/src/lib/modals/TagEditModal.svelte
+++ b/web/src/lib/modals/TagEditModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { handleUpdateTag } from '#lib/services/tag.service.js';
-  import type { TreeNode } from '#lib/utils/tree-utils.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { handleUpdateTag } from '#lib/services/tag.service.ts';
+  import type { TreeNode } from '#lib/utils/tree-utils.ts';
   import { FormModal, Text } from '@immich/ui';
   import { mdiTag } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/UserDeleteConfirmModal.svelte b/web/src/lib/modals/UserDeleteConfirmModal.svelte
index c30762660..601874161 100644
--- a/web/src/lib/modals/UserDeleteConfirmModal.svelte
+++ b/web/src/lib/modals/UserDeleteConfirmModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { deleteUserAdminMutation } from '#lib/queries/user-admin.query.js';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.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.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
 
   const query = createPreloadedQuery(getUserConfigQuery);
   const config = $derived(query.data);
diff --git a/web/src/lib/modals/UserRestoreConfirmModal.svelte b/web/src/lib/modals/UserRestoreConfirmModal.svelte
index 21ecae072..9d842f293 100644
--- a/web/src/lib/modals/UserRestoreConfirmModal.svelte
+++ b/web/src/lib/modals/UserRestoreConfirmModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { executeMutation } from '#lib/queries/client.js';
-  import { restoreUserAdminMutation } from '#lib/queries/user-admin.query.js';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { restoreUserAdminMutation } from '#lib/queries/user-admin.query.ts';
   import { type UserAdminResponseDto } from '@immich/sdk';
   import { ConfirmModal } from '@immich/ui';
   import { mdiDeleteRestore } from '@mdi/js';
diff --git a/web/src/lib/modals/WorkflowAddStepModal.svelte b/web/src/lib/modals/WorkflowAddStepModal.svelte
index 9227ddc7b..34dbf9131 100644
--- a/web/src/lib/modals/WorkflowAddStepModal.svelte
+++ b/web/src/lib/modals/WorkflowAddStepModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import SchemaConfiguration from '#lib/components/SchemaConfiguration.svelte';
   import PluginMethodPicker from '#lib/modals/PluginMethodPicker.svelte';
-  import { type JSONSchemaProperty, type SchemaConfig } from '#lib/types.js';
-  import { getWorkflowDefaultConfig } from '#lib/utils/workflow.js';
+  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 { mdiPencilOutline } from '@mdi/js';
diff --git a/web/src/lib/modals/WorkflowDuplicateModal.svelte b/web/src/lib/modals/WorkflowDuplicateModal.svelte
index d47af874e..3d7074515 100644
--- a/web/src/lib/modals/WorkflowDuplicateModal.svelte
+++ b/web/src/lib/modals/WorkflowDuplicateModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { executeMutation } from '#lib/queries/client.js';
-  import { createWorkflowMutation } from '#lib/queries/workflow.query.js';
-  import { Route } from '#lib/route.js';
+  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';
diff --git a/web/src/lib/modals/WorkflowEditStepModal.svelte b/web/src/lib/modals/WorkflowEditStepModal.svelte
index 465025d1a..db943a2fe 100644
--- a/web/src/lib/modals/WorkflowEditStepModal.svelte
+++ b/web/src/lib/modals/WorkflowEditStepModal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import SchemaConfiguration from '#lib/components/SchemaConfiguration.svelte';
-  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
   import PluginMethodPicker from '#lib/modals/PluginMethodPicker.svelte';
-  import { type JSONSchemaProperty, type SchemaConfig } from '#lib/types.js';
-  import { getWorkflowDefaultConfig } from '#lib/utils/workflow.js';
+  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 { mdiPencilOutline } from '@mdi/js';
diff --git a/web/src/lib/modals/WorkflowLogsModal.svelte b/web/src/lib/modals/WorkflowLogsModal.svelte
index 405e339e6..d40fce29b 100644
--- a/web/src/lib/modals/WorkflowLogsModal.svelte
+++ b/web/src/lib/modals/WorkflowLogsModal.svelte
@@ -18,11 +18,11 @@
   } from '@immich/ui';
   import { mdiHistory, mdiOpenInNew } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { DateTime } from 'luxon';
-  import { Route } from '#lib/route.js';
-  import { executeMutation } from '#lib/queries/client.js';
-  import { updateWorkflowMutation } from '#lib/queries/workflow.query.js';
+  import { Route } from '#lib/route.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { updateWorkflowMutation } from '#lib/queries/workflow.query.ts';
 
   type Props = {
     workflow: WorkflowResponseDto;
diff --git a/web/src/lib/modals/WorkflowTemplatePickerModal.svelte b/web/src/lib/modals/WorkflowTemplatePickerModal.svelte
index e8caabb7f..8a1cd89a1 100644
--- a/web/src/lib/modals/WorkflowTemplatePickerModal.svelte
+++ b/web/src/lib/modals/WorkflowTemplatePickerModal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
-  import { executeMutation } from '#lib/queries/client.js';
-  import { createWorkflowMutation } from '#lib/queries/workflow.query.js';
-  import { Route } from '#lib/route.js';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
+  import { createWorkflowMutation } from '#lib/queries/workflow.query.ts';
+  import { Route } from '#lib/route.ts';
   import { type PluginTemplateResponseDto } from '@immich/sdk';
   import { Badge, FormModal, Icon, ListButton, Text } from '@immich/ui';
   import { mdiFlashOutline } from '@mdi/js';
diff --git a/web/src/lib/modals/WorkflowTriggerPicker.svelte b/web/src/lib/modals/WorkflowTriggerPicker.svelte
index fc3cd141b..71a0949d2 100644
--- a/web/src/lib/modals/WorkflowTriggerPicker.svelte
+++ b/web/src/lib/modals/WorkflowTriggerPicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
-  import { getTriggerDescription, getTriggerName } from '#lib/utils/workflow.js';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
+  import { getTriggerDescription, getTriggerName } from '#lib/utils/workflow.ts';
   import { WorkflowTrigger } from '@immich/sdk';
   import { FormModal, ListButton, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/queries/album.query.ts b/web/src/lib/queries/album.query.ts
index b3f968b5f..84dea830d 100644
--- a/web/src/lib/queries/album.query.ts
+++ b/web/src/lib/queries/album.query.ts
@@ -1,8 +1,8 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { asMutation, queryClient } from '#lib/queries/client.js';
-import { Route } from '#lib/route.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
+import { Route } from '#lib/route.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import {
   addAssetsToAlbum,
   addAssetsToAlbums,
diff --git a/web/src/lib/queries/api-key.query.ts b/web/src/lib/queries/api-key.query.ts
index 6fa82f7eb..72712b65d 100644
--- a/web/src/lib/queries/api-key.query.ts
+++ b/web/src/lib/queries/api-key.query.ts
@@ -1,4 +1,4 @@
-import { asMutation, queryClient } from '#lib/queries/client.js';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
 import { createApiKey, deleteApiKey, getApiKeys, rotateApiKey, updateApiKey } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
 
diff --git a/web/src/lib/queries/client.ts b/web/src/lib/queries/client.ts
index cc47fb23c..5b4d89fa7 100644
--- a/web/src/lib/queries/client.ts
+++ b/web/src/lib/queries/client.ts
@@ -1,8 +1,8 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
-import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';
+import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { toastManager } from '@immich/ui';
 import {
   createQuery,
diff --git a/web/src/lib/queries/config-admin.query.ts b/web/src/lib/queries/config-admin.query.ts
index 03faf7339..3bf072c34 100644
--- a/web/src/lib/queries/config-admin.query.ts
+++ b/web/src/lib/queries/config-admin.query.ts
@@ -1,8 +1,8 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';
+import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAdminConfig, getAdminConfigDefaults, updateAdminConfig, type AdminConfigDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 import { mutationOptions, queryOptions } from '@tanstack/svelte-query';
diff --git a/web/src/lib/queries/library.query.ts b/web/src/lib/queries/library.query.ts
index 47dc23bd6..c9294f040 100644
--- a/web/src/lib/queries/library.query.ts
+++ b/web/src/lib/queries/library.query.ts
@@ -1,4 +1,4 @@
-import { asMutation, queryClient } from '#lib/queries/client.js';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
 import {
   createLibrary,
   deleteLibrary,
diff --git a/web/src/lib/queries/notification.query.ts b/web/src/lib/queries/notification.query.ts
index d15be3a68..5ec1cd9e9 100644
--- a/web/src/lib/queries/notification.query.ts
+++ b/web/src/lib/queries/notification.query.ts
@@ -1,4 +1,4 @@
-import { asMutation, queryClient } from '#lib/queries/client.js';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
 import { getNotifications, updateNotification, updateNotifications } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
 
diff --git a/web/src/lib/queries/passkey.query.ts b/web/src/lib/queries/passkey.query.ts
index d24936271..dc1f8f710 100644
--- a/web/src/lib/queries/passkey.query.ts
+++ b/web/src/lib/queries/passkey.query.ts
@@ -1,4 +1,4 @@
-import { asMutation, MutationCancelledError, queryClient } from '#lib/queries/client.js';
+import { asMutation, MutationCancelledError, queryClient } from '#lib/queries/client.ts';
 import {
   deletePasskey,
   finishAuthentication,
diff --git a/web/src/lib/queries/session.query.ts b/web/src/lib/queries/session.query.ts
index 3d675e18c..f285dd235 100644
--- a/web/src/lib/queries/session.query.ts
+++ b/web/src/lib/queries/session.query.ts
@@ -1,4 +1,4 @@
-import { asMutation, queryClient } from '#lib/queries/client.js';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
 import { deleteAllSessions, deleteSession, getSessions } from '@immich/sdk';
 import { mutationOptions, queryOptions } from '@tanstack/svelte-query';
 
diff --git a/web/src/lib/queries/shared-link.query.ts b/web/src/lib/queries/shared-link.query.ts
index b759fb56b..016e96887 100644
--- a/web/src/lib/queries/shared-link.query.ts
+++ b/web/src/lib/queries/shared-link.query.ts
@@ -1,5 +1,5 @@
-import { invalidateAlbum, invalidateAlbums } from '#lib/queries/album.query.js';
-import { asMutation, queryClient } from '#lib/queries/client.js';
+import { invalidateAlbum, invalidateAlbums } from '#lib/queries/album.query.ts';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
 import {
   createSharedLink,
   getAllSharedLinks,
diff --git a/web/src/lib/queries/user-admin.query.ts b/web/src/lib/queries/user-admin.query.ts
index fa65668c1..a6dcae0f7 100644
--- a/web/src/lib/queries/user-admin.query.ts
+++ b/web/src/lib/queries/user-admin.query.ts
@@ -1,5 +1,5 @@
 import { getHeatmapRange } from '#lib';
-import { asMutation, queryClient } from '#lib/queries/client.js';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
 import {
   CalendarHeatmapType,
   createUserAdmin,
diff --git a/web/src/lib/queries/view.query.ts b/web/src/lib/queries/view.query.ts
index 7160f8b4b..9b5a05a9f 100644
--- a/web/src/lib/queries/view.query.ts
+++ b/web/src/lib/queries/view.query.ts
@@ -1,4 +1,4 @@
-import { TreeNode } from '#lib/utils/tree-utils.js';
+import { TreeNode } from '#lib/utils/tree-utils.ts';
 import { getAssetsByOriginalPath, getUniqueOriginalPaths } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
 
diff --git a/web/src/lib/queries/workflow.query.ts b/web/src/lib/queries/workflow.query.ts
index 7c5861101..b5693af31 100644
--- a/web/src/lib/queries/workflow.query.ts
+++ b/web/src/lib/queries/workflow.query.ts
@@ -1,4 +1,4 @@
-import { asMutation, queryClient } from '#lib/queries/client.js';
+import { asMutation, queryClient } from '#lib/queries/client.ts';
 import {
   createWorkflow,
   deleteWorkflow,
diff --git a/web/src/lib/route.spec.ts b/web/src/lib/route.spec.ts
index 5b54bb717..111d31a7a 100644
--- a/web/src/lib/route.spec.ts
+++ b/web/src/lib/route.spec.ts
@@ -1,5 +1,5 @@
-import { OpenQueryParam } from '#lib/constants.js';
-import { Route } from '#lib/route.js';
+import { OpenQueryParam } from '#lib/constants.ts';
+import { Route } from '#lib/route.ts';
 
 describe('Route', () => {
   describe(Route.login.name, () => {
diff --git a/web/src/lib/route.ts b/web/src/lib/route.ts
index 6e601ee11..09f448a3f 100644
--- a/web/src/lib/route.ts
+++ b/web/src/lib/route.ts
@@ -1,4 +1,4 @@
-import { OpenQueryParam, type SharedLinkTab } from '#lib/constants.js';
+import { OpenQueryParam, type SharedLinkTab } from '#lib/constants.ts';
 import { getBaseUrl, IntegrityReport, QueueName, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
 import { omitBy } from 'lodash-es';
 
diff --git a/web/src/lib/services/album.service.ts b/web/src/lib/services/album.service.ts
index c9b5c4867..b20662ae1 100644
--- a/web/src/lib/services/album.service.ts
+++ b/web/src/lib/services/album.service.ts
@@ -1,5 +1,5 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
 import AddUsersModal from '#lib/modals/AddUsersModal.svelte';
 import AlbumEditModal from '#lib/modals/AlbumEditModal.svelte';
 import AlbumOptionsModal from '#lib/modals/AlbumOptionsModal.svelte';
@@ -11,13 +11,13 @@ import {
   removeUserFromAlbumMutation,
   updateAlbumInfoMutation,
   updateAlbumUserMutation,
-} from '#lib/queries/album.query.js';
-import { executeMutation } from '#lib/queries/client.js';
-import { Route } from '#lib/route.js';
-import { createAlbumAndRedirect } from '#lib/utils/album-utils.js';
-import { downloadArchive } from '#lib/utils/asset-utils.js';
-import { openFileUploadDialog } from '#lib/utils/file-uploader.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+} from '#lib/queries/album.query.ts';
+import { executeMutation } from '#lib/queries/client.ts';
+import { Route } from '#lib/route.ts';
+import { createAlbumAndRedirect } from '#lib/utils/album-utils.ts';
+import { downloadArchive } from '#lib/utils/asset-utils.ts';
+import { openFileUploadDialog } from '#lib/utils/file-uploader.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { AlbumUserRole, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import {
diff --git a/web/src/lib/services/api-key.service.ts b/web/src/lib/services/api-key.service.ts
index c288eec18..306c65970 100644
--- a/web/src/lib/services/api-key.service.ts
+++ b/web/src/lib/services/api-key.service.ts
@@ -1,9 +1,9 @@
 import ApiKeyCreateModal from '#lib/modals/ApiKeyCreateModal.svelte';
 import ApiKeySecretModal from '#lib/modals/ApiKeySecretModal.svelte';
 import ApiKeyUpdateModal from '#lib/modals/ApiKeyUpdateModal.svelte';
-import { deleteApiKeyMutation, rotateApiKeyMutation } from '#lib/queries/api-key.query.js';
-import { executeMutation } from '#lib/queries/client.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { deleteApiKeyMutation, rotateApiKeyMutation } from '#lib/queries/api-key.query.ts';
+import { executeMutation } from '#lib/queries/client.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { ApiKeyResponseDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiAutorenew, mdiPencilOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/lib/services/app.service.ts b/web/src/lib/services/app.service.ts
index 02a98e483..4cc6c2096 100644
--- a/web/src/lib/services/app.service.ts
+++ b/web/src/lib/services/app.service.ts
@@ -1,5 +1,5 @@
-import { CastDestinationType, castManager } from '#lib/managers/cast-manager.svelte.js';
-import { GCastDestination } from '#lib/utils/cast/gcast-destination.svelte.js';
+import { CastDestinationType, castManager } from '#lib/managers/cast-manager.svelte.ts';
+import { GCastDestination } from '#lib/utils/cast/gcast-destination.svelte.ts';
 import type { ActionItem } from '@immich/ui';
 import { mdiCast, mdiCastConnected } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
diff --git a/web/src/lib/services/asset.service.spec.ts b/web/src/lib/services/asset.service.spec.ts
index e022410dc..bf27b24ca 100644
--- a/web/src/lib/services/asset.service.spec.ts
+++ b/web/src/lib/services/asset.service.spec.ts
@@ -1,9 +1,9 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { getAssetActions, handleDownloadAsset } from '#lib/services/asset.service.js';
-import { setSharedLink } from '#lib/utils.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
+import { getAssetActions, handleDownloadAsset } from '#lib/services/asset.service.ts';
+import { setSharedLink } from '#lib/utils.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAssetInfo, type UserConfigDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 import { vitest } from 'vitest';
diff --git a/web/src/lib/services/asset.service.ts b/web/src/lib/services/asset.service.ts
index 29c2db599..df25f9060 100644
--- a/web/src/lib/services/asset.service.ts
+++ b/web/src/lib/services/asset.service.ts
@@ -1,21 +1,21 @@
-import { ProjectionType } from '#lib/constants.js';
-import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { ProjectionType } from '#lib/constants.ts';
+import { 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 { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import AssetAddToAlbumModal from '#lib/modals/AssetAddToAlbumModal.svelte';
 import AssetTagModal from '#lib/modals/AssetTagModal.svelte';
 import ProfileImageCropperModal from '#lib/modals/ProfileImageCropperModal.svelte';
 import SharedLinkCreateModal from '#lib/modals/SharedLinkCreateModal.svelte';
-import { removeAssetFromAlbumMutation } from '#lib/queries/album.query.js';
-import { executeMutation, readPreloadedQuery } from '#lib/queries/client.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { Route } from '#lib/route.js';
-import { SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
-import { getAssetMediaUrl, getSharedLink, sleep } from '#lib/utils.js';
-import { downloadUrl } from '#lib/utils.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { removeAssetFromAlbumMutation } from '#lib/queries/album.query.ts';
+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 { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import {
   AssetJobName,
   AssetMediaSize,
diff --git a/web/src/lib/services/database-backups.service.ts b/web/src/lib/services/database-backups.service.ts
index 4a5c2bb09..ca5c1372d 100644
--- a/web/src/lib/services/database-backups.service.ts
+++ b/web/src/lib/services/database-backups.service.ts
@@ -1,8 +1,8 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { uploadRequest } from '#lib/utils.js';
-import { openFilePicker } from '#lib/utils/file-uploader.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { uploadRequest } from '#lib/utils.ts';
+import { openFilePicker } from '#lib/utils/file-uploader.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import {
   deleteDatabaseBackup,
   getBaseUrl,
diff --git a/web/src/lib/services/integrity.service.ts b/web/src/lib/services/integrity.service.ts
index 7ae99a913..aa7fa80ec 100644
--- a/web/src/lib/services/integrity.service.ts
+++ b/web/src/lib/services/integrity.service.ts
@@ -1,7 +1,7 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { Route } from '#lib/route.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+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 { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiDownload, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/lib/services/job.service.ts b/web/src/lib/services/job.service.ts
index 436da45f7..12f01ce6e 100644
--- a/web/src/lib/services/job.service.ts
+++ b/web/src/lib/services/job.service.ts
@@ -1,6 +1,6 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { createJob, type JobCreateDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 
diff --git a/web/src/lib/services/library.service.ts b/web/src/lib/services/library.service.ts
index 833950e55..2619779f0 100644
--- a/web/src/lib/services/library.service.ts
+++ b/web/src/lib/services/library.service.ts
@@ -2,11 +2,11 @@ import LibraryExclusionPatternAddModal from '#lib/modals/LibraryExclusionPattern
 import LibraryExclusionPatternEditModal from '#lib/modals/LibraryExclusionPatternEditModal.svelte';
 import LibraryFolderAddModal from '#lib/modals/LibraryFolderAddModal.svelte';
 import LibraryFolderEditModal from '#lib/modals/LibraryFolderEditModal.svelte';
-import { executeMutation } from '#lib/queries/client.js';
-import { deleteLibraryMutation, scanLibraryMutation, updateLibraryMutation } from '#lib/queries/library.query.js';
-import { scanAllLibrariesMutation } from '#lib/queries/queue.query.js';
-import { Route } from '#lib/route.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { executeMutation } from '#lib/queries/client.ts';
+import { deleteLibraryMutation, scanLibraryMutation, updateLibraryMutation } from '#lib/queries/library.query.ts';
+import { scanAllLibrariesMutation } from '#lib/queries/queue.query.ts';
+import { Route } from '#lib/route.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { LibraryResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import { mdiInformationOutline, mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/lib/services/maintenance.service.ts b/web/src/lib/services/maintenance.service.ts
index bdc0caf4f..f982a9aa4 100644
--- a/web/src/lib/services/maintenance.service.ts
+++ b/web/src/lib/services/maintenance.service.ts
@@ -1,5 +1,5 @@
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { MaintenanceAction, setMaintenanceMode, type SetMaintenanceModeDto } from '@immich/sdk';
 import type { ActionItem } from '@immich/ui';
 import { mdiProgressWrench } from '@mdi/js';
diff --git a/web/src/lib/services/passkey.service.ts b/web/src/lib/services/passkey.service.ts
index 37c4974e2..57d9871c7 100644
--- a/web/src/lib/services/passkey.service.ts
+++ b/web/src/lib/services/passkey.service.ts
@@ -1,7 +1,7 @@
 import PasskeyUpdateModal from '#lib/modals/PasskeyUpdateModal.svelte';
-import { executeMutation } from '#lib/queries/client.js';
-import { createPasskeyMutation, deletePasskeyMutation } from '#lib/queries/passkey.query.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { executeMutation } from '#lib/queries/client.ts';
+import { createPasskeyMutation, deletePasskeyMutation } from '#lib/queries/passkey.query.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { type PasskeyResponseDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiPencilOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/lib/services/person-user.service.ts b/web/src/lib/services/person-user.service.ts
index c9b363920..ec681aed8 100644
--- a/web/src/lib/services/person-user.service.ts
+++ b/web/src/lib/services/person-user.service.ts
@@ -1,9 +1,9 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import AddUsersModal from '#lib/modals/AddUsersModal.svelte';
 import PersonBulkShareModal from '#lib/modals/PersonBulkShareModal.svelte';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import {
   PeopleUsersUpsertType,
   PersonUserRole,
diff --git a/web/src/lib/services/person.service.ts b/web/src/lib/services/person.service.ts
index 8212e2534..757d01e51 100644
--- a/web/src/lib/services/person.service.ts
+++ b/web/src/lib/services/person.service.ts
@@ -1,9 +1,9 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import PersonEditAccessModal from '#lib/modals/PersonEditAccessModal.svelte';
 import PersonEditModal from '#lib/modals/PersonEditModal.svelte';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import {
   getPerson,
   PersonUpdateStrategy,
diff --git a/web/src/lib/services/queue.service.ts b/web/src/lib/services/queue.service.ts
index b9f0219c4..1df9bee97 100644
--- a/web/src/lib/services/queue.service.ts
+++ b/web/src/lib/services/queue.service.ts
@@ -1,11 +1,11 @@
-import { OpenQueryParam } from '#lib/constants.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { queueManager } from '#lib/managers/queue-manager.svelte.js';
+import { OpenQueryParam } from '#lib/constants.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { queueManager } from '#lib/managers/queue-manager.svelte.ts';
 import JobCreateModal from '#lib/modals/JobCreateModal.svelte';
-import { Route } from '#lib/route.js';
-import type { HeaderButtonActionItem } from '#lib/types.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { Route } from '#lib/route.ts';
+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,
diff --git a/web/src/lib/services/shared-link.service.spec.ts b/web/src/lib/services/shared-link.service.spec.ts
index faf8ba07a..4e793f267 100644
--- a/web/src/lib/services/shared-link.service.spec.ts
+++ b/web/src/lib/services/shared-link.service.spec.ts
@@ -1,4 +1,4 @@
-import { asUrl } from '#lib/services/shared-link.service.js';
+import { asUrl } from '#lib/services/shared-link.service.ts';
 import { sharedLinkFactory } from '#test-data/factories/shared-link-factory';
 
 vi.mock(import('#lib/queries/client.js'), async (importOriginal) => ({
diff --git a/web/src/lib/services/shared-link.service.ts b/web/src/lib/services/shared-link.service.ts
index a10d133c8..26939905d 100644
--- a/web/src/lib/services/shared-link.service.ts
+++ b/web/src/lib/services/shared-link.service.ts
@@ -1,10 +1,10 @@
 import QrCodeModal from '#lib/modals/QrCodeModal.svelte';
-import { executeMutation, readPreloadedQuery } from '#lib/queries/client.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { removeSharedLinkMutation } from '#lib/queries/shared-link.query.js';
-import { Route } from '#lib/route.js';
-import { copyToClipboard } from '#lib/utils.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { executeMutation, readPreloadedQuery } from '#lib/queries/client.ts';
+import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
+import { removeSharedLinkMutation } from '#lib/queries/shared-link.query.ts';
+import { Route } from '#lib/route.ts';
+import { copyToClipboard } from '#lib/utils.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { type SharedLinkResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import { mdiContentCopy, mdiLink, mdiPencilOutline, mdiQrcode, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/lib/services/stack.service.ts b/web/src/lib/services/stack.service.ts
index dc4f26289..0bfaa45a0 100644
--- a/web/src/lib/services/stack.service.ts
+++ b/web/src/lib/services/stack.service.ts
@@ -1,10 +1,10 @@
-import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { openFileUploadDialog } from '#lib/utils/file-uploader.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
-import { navigate } from '#lib/utils/navigation.js';
+import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { openFileUploadDialog } from '#lib/utils/file-uploader.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
+import { navigate } from '#lib/utils/navigation.ts';
 import {
   createStack,
   deleteAssets,
diff --git a/web/src/lib/services/system-config.service.ts b/web/src/lib/services/system-config.service.ts
index 019c1317e..d14040d3b 100644
--- a/web/src/lib/services/system-config.service.ts
+++ b/web/src/lib/services/system-config.service.ts
@@ -1,6 +1,6 @@
-import { executeMutation } from '#lib/queries/client.js';
-import { updateAdminConfigMutation } from '#lib/queries/config-admin.query.js';
-import { copyToClipboard, downloadJson } from '#lib/utils.js';
+import { executeMutation } from '#lib/queries/client.ts';
+import { updateAdminConfigMutation } from '#lib/queries/config-admin.query.ts';
+import { copyToClipboard, downloadJson } from '#lib/utils.ts';
 import type { AdminConfigDto, ServerFeaturesDto } from '@immich/sdk';
 import type { ActionItem } from '@immich/ui';
 import { mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
diff --git a/web/src/lib/services/tag.service.ts b/web/src/lib/services/tag.service.ts
index 8b9eb43f6..f7c625a1d 100644
--- a/web/src/lib/services/tag.service.ts
+++ b/web/src/lib/services/tag.service.ts
@@ -1,9 +1,9 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 import TagCreateModal from '#lib/modals/TagCreateModal.svelte';
 import TagEditModal from '#lib/modals/TagEditModal.svelte';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
-import type { TreeNode } from '#lib/utils/tree-utils.js';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
+import type { TreeNode } from '#lib/utils/tree-utils.ts';
 import { deleteTag, updateTag, upsertTags, type TagUpdateDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiPencil, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/lib/services/trash.service.ts b/web/src/lib/services/trash.service.ts
index 25c8242cd..9fb53b708 100644
--- a/web/src/lib/services/trash.service.ts
+++ b/web/src/lib/services/trash.service.ts
@@ -1,5 +1,5 @@
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { emptyTrash, restoreTrash } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
diff --git a/web/src/lib/services/user-admin.service.ts b/web/src/lib/services/user-admin.service.ts
index f125cfd69..459df9355 100644
--- a/web/src/lib/services/user-admin.service.ts
+++ b/web/src/lib/services/user-admin.service.ts
@@ -1,13 +1,13 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
 import PasswordResetSuccessModal from '#lib/modals/PasswordResetSuccessModal.svelte';
 import UserDeleteConfirmModal from '#lib/modals/UserDeleteConfirmModal.svelte';
 import UserRestoreConfirmModal from '#lib/modals/UserRestoreConfirmModal.svelte';
-import { executeMutation, readPreloadedQuery } from '#lib/queries/client.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { updateUserAdminMutation } from '#lib/queries/user-admin.query.js';
-import { Route } from '#lib/route.js';
-import type { HeaderButtonActionItem } from '#lib/types.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { executeMutation, readPreloadedQuery } from '#lib/queries/client.ts';
+import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
+import { updateUserAdminMutation } from '#lib/queries/user-admin.query.ts';
+import { Route } from '#lib/route.ts';
+import type { HeaderButtonActionItem } from '#lib/types.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { UserStatus, type UserAdminResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import {
diff --git a/web/src/lib/services/user.service.ts b/web/src/lib/services/user.service.ts
index 11d18c209..479b53db6 100644
--- a/web/src/lib/services/user.service.ts
+++ b/web/src/lib/services/user.service.ts
@@ -1,6 +1,6 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import {
   changePassword,
   lockAuthSession,
diff --git a/web/src/lib/services/workflow.service.ts b/web/src/lib/services/workflow.service.ts
index 837aef28b..45d95c265 100644
--- a/web/src/lib/services/workflow.service.ts
+++ b/web/src/lib/services/workflow.service.ts
@@ -1,11 +1,11 @@
 import WorkflowDuplicateModal from '#lib/modals/WorkflowDuplicateModal.svelte';
 import WorkflowLogsModal from '#lib/modals/WorkflowLogsModal.svelte';
 import WorkflowTemplatePickerModal from '#lib/modals/WorkflowTemplatePickerModal.svelte';
-import { executeMutation } from '#lib/queries/client.js';
-import { createWorkflowMutation, deleteWorkflowMutation, updateWorkflowMutation } from '#lib/queries/workflow.query.js';
-import { Route } from '#lib/route.js';
-import { copyToClipboard, downloadJson } from '#lib/utils.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { executeMutation } from '#lib/queries/client.ts';
+import { createWorkflowMutation, deleteWorkflowMutation, updateWorkflowMutation } from '#lib/queries/workflow.query.ts';
+import { Route } from '#lib/route.ts';
+import { copyToClipboard, downloadJson } from '#lib/utils.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { WorkflowTrigger, type WorkflowResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import {
diff --git a/web/src/lib/stores/face.svelte.ts b/web/src/lib/stores/face.svelte.ts
index 1ee56ff2c..6e805bad0 100644
--- a/web/src/lib/stores/face.svelte.ts
+++ b/web/src/lib/stores/face.svelte.ts
@@ -1,6 +1,6 @@
-import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
-import type { Faces } from '#lib/managers/asset-viewer-manager.svelte.js';
-import { CancellableTask } from '#lib/utils/cancellable-task.js';
+import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.ts';
+import type { Faces } from '#lib/managers/asset-viewer-manager.svelte.ts';
+import { CancellableTask } from '#lib/utils/cancellable-task.ts';
 import type { AssetFaceResponseDto, PersonResponseDto } from '@immich/sdk';
 import { SvelteMap } from 'svelte/reactivity';
 
diff --git a/web/src/lib/stores/ocr.svelte.spec.ts b/web/src/lib/stores/ocr.svelte.spec.ts
index 7924af29f..7db8f5860 100644
--- a/web/src/lib/stores/ocr.svelte.spec.ts
+++ b/web/src/lib/stores/ocr.svelte.spec.ts
@@ -1,5 +1,5 @@
-import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
-import { ocrManager, type OcrBoundingBox } from '#lib/stores/ocr.svelte.js';
+import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.ts';
+import { ocrManager, type OcrBoundingBox } from '#lib/stores/ocr.svelte.ts';
 import { getAssetOcr } from '@immich/sdk';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
diff --git a/web/src/lib/stores/ocr.svelte.ts b/web/src/lib/stores/ocr.svelte.ts
index 66bb28ddf..92a1dceec 100644
--- a/web/src/lib/stores/ocr.svelte.ts
+++ b/web/src/lib/stores/ocr.svelte.ts
@@ -1,5 +1,5 @@
-import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
-import { CancellableTask } from '#lib/utils/cancellable-task.js';
+import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.ts';
+import { CancellableTask } from '#lib/utils/cancellable-task.ts';
 
 export type OcrBoundingBox = {
   id: string;
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 0fb53cb52..54a96caea 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -1,5 +1,5 @@
-import { defaultLang } from '#lib/constants.js';
-import { convertBCP47, getPreferredLocale } from '#lib/utils/i18n.js';
+import { defaultLang } from '#lib/constants.ts';
+import { convertBCP47, getPreferredLocale } from '#lib/utils/i18n.ts';
 import { persisted } from 'svelte-persisted-store';
 import { browser } from '$app/env';
 
diff --git a/web/src/lib/stores/search.svelte.ts b/web/src/lib/stores/search.svelte.ts
index f3266701b..4d79eb207 100644
--- a/web/src/lib/stores/search.svelte.ts
+++ b/web/src/lib/stores/search.svelte.ts
@@ -1,4 +1,4 @@
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
 
 class SearchStore {
   savedSearchTerms = $state<string[]>([]);
diff --git a/web/src/lib/stores/sidebar.svelte.ts b/web/src/lib/stores/sidebar.svelte.ts
index 53bf0f572..8b82fba94 100644
--- a/web/src/lib/stores/sidebar.svelte.ts
+++ b/web/src/lib/stores/sidebar.svelte.ts
@@ -1,4 +1,4 @@
-import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
+import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.ts';
 
 class SidebarStore {
   isOpen = $derived.by(() => mediaQueryManager.isFullSidebar);
diff --git a/web/src/lib/stores/upload.ts b/web/src/lib/stores/upload.ts
index d17c6c2ab..c80b75a40 100644
--- a/web/src/lib/stores/upload.ts
+++ b/web/src/lib/stores/upload.ts
@@ -1,4 +1,4 @@
-import { UploadState, type UploadAsset } from '#lib/types.js';
+import { UploadState, type UploadAsset } from '#lib/types.ts';
 import { derived, writable } from 'svelte/store';
 
 function createUploadStore() {
diff --git a/web/src/lib/stores/websocket.ts b/web/src/lib/stores/websocket.ts
index ba8c74718..52b645fad 100644
--- a/web/src/lib/stores/websocket.ts
+++ b/web/src/lib/stores/websocket.ts
@@ -1,12 +1,12 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getNotificationsQuery } from '#lib/queries/notification.query.js';
-import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.js';
-import { Route } from '#lib/route.js';
-import { maintenanceStore } from '#lib/stores/maintenance.store.js';
-import { createEventEmitter } from '#lib/utils/eventemitter.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getNotificationsQuery } from '#lib/queries/notification.query.ts';
+import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.ts';
+import { Route } from '#lib/route.ts';
+import { maintenanceStore } from '#lib/stores/maintenance.store.ts';
+import { createEventEmitter } from '#lib/utils/eventemitter.ts';
 import {
   MaintenanceAction,
   type AssetResponseDto,
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index 1d3d1be74..ba9203458 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -1,4 +1,4 @@
-import { MediaType } from '#lib/constants.js';
+import { MediaType } from '#lib/constants.ts';
 import type { QueueResponseDto } from '@immich/sdk';
 import type { ActionItem } from '@immich/ui';
 import type { DateTime } from 'luxon';
diff --git a/web/src/lib/utils.spec.ts b/web/src/lib/utils.spec.ts
index d5a4873db..889bb68d5 100644
--- a/web/src/lib/utils.spec.ts
+++ b/web/src/lib/utils.spec.ts
@@ -1,10 +1,10 @@
 import en from '#i18n/en.json';
-import { getAssetUrl, memoryLaneTitle, semverToName } from '#lib/utils.js';
+import { getAssetUrl, memoryLaneTitle, semverToName } from '#lib/utils.ts';
 import { AssetTypeEnum, MemoryType, type MemoryResponseDto } from '@immich/sdk';
 import { addMessages, init } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import { assetFactory } from '#test-data/factories/asset-factory.js';
-import { sharedLinkFactory } from '#test-data/factories/shared-link-factory.js';
+import { assetFactory } from '#test-data/factories/asset-factory.ts';
+import { sharedLinkFactory } from '#test-data/factories/shared-link-factory.ts';
 
 describe('utils', () => {
   describe(getAssetUrl.name, () => {
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 6e1ef3e76..dd96eb1bb 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -1,9 +1,9 @@
-import { defaultLang, locales } from '#lib/constants.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { alwaysLoadOriginalFile, lang, locale } from '#lib/stores/preferences.store.js';
-import { isWebCompatibleImage } from '#lib/utils/asset-utils.js';
-import { handleError } from '#lib/utils/handle-error.js';
-import { convertBCP47, langs } from '#lib/utils/i18n.js';
+import { defaultLang, locales } from '#lib/constants.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { alwaysLoadOriginalFile, lang, locale } from '#lib/stores/preferences.store.ts';
+import { isWebCompatibleImage } from '#lib/utils/asset-utils.ts';
+import { handleError } from '#lib/utils/handle-error.ts';
+import { convertBCP47, langs } from '#lib/utils/i18n.ts';
 import {
   AssetMediaSize,
   AssetTypeEnum,
diff --git a/web/src/lib/utils/actions.ts b/web/src/lib/utils/actions.ts
index 0791e68cc..d09baa746 100644
--- a/web/src/lib/utils/actions.ts
+++ b/web/src/lib/utils/actions.ts
@@ -1,5 +1,5 @@
-import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
 import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets, type StackResponseDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 import { t } from 'svelte-i18n';
diff --git a/web/src/lib/utils/adaptive-image-loader.spec.ts b/web/src/lib/utils/adaptive-image-loader.spec.ts
index 76b583c1f..dae5b289b 100644
--- a/web/src/lib/utils/adaptive-image-loader.spec.ts
+++ b/web/src/lib/utils/adaptive-image-loader.spec.ts
@@ -1,5 +1,5 @@
-import { AdaptiveImageLoader, type QualityList } from '#lib/utils/adaptive-image-loader.svelte.js';
-import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
+import { AdaptiveImageLoader, type QualityList } from '#lib/utils/adaptive-image-loader.svelte.ts';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.ts';
 
 vi.mock('#lib/utils/sw-messaging.js', () => ({
   cancelImageUrl: vi.fn(),
diff --git a/web/src/lib/utils/adaptive-image-loader.svelte.ts b/web/src/lib/utils/adaptive-image-loader.svelte.ts
index d29969e7d..d460dc92d 100644
--- a/web/src/lib/utils/adaptive-image-loader.svelte.ts
+++ b/web/src/lib/utils/adaptive-image-loader.svelte.ts
@@ -1,5 +1,5 @@
-import type { LoadImageFunction } from '#lib/actions/image-loader.svelte.js';
-import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
+import type { LoadImageFunction } from '#lib/actions/image-loader.svelte.ts';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.ts';
 
 export type ImageQuality = 'thumbnail' | 'preview' | 'original';
 
diff --git a/web/src/lib/utils/album-utils.ts b/web/src/lib/utils/album-utils.ts
index 197f05531..a97087b03 100644
--- a/web/src/lib/utils/album-utils.ts
+++ b/web/src/lib/utils/album-utils.ts
@@ -1,6 +1,6 @@
-import { createAlbumMutation } from '#lib/queries/album.query.js';
-import { executeMutation } from '#lib/queries/client.js';
-import { Route } from '#lib/route.js';
+import { createAlbumMutation } from '#lib/queries/album.query.ts';
+import { executeMutation } from '#lib/queries/client.ts';
+import { Route } from '#lib/route.ts';
 import {
   AlbumFilter,
   AlbumGroupBy,
@@ -9,7 +9,7 @@ import {
   albumViewSettings,
   locale,
   type AlbumViewSettings,
-} from '#lib/stores/preferences.store.js';
+} from '#lib/stores/preferences.store.ts';
 import type { AlbumResponseDto } from '@immich/sdk';
 import { orderBy } from 'lodash-es';
 import { get } from 'svelte/store';
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 53fd2ccc9..93c21488e 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -1,16 +1,16 @@
-import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { downloadManager } from '#lib/managers/download-manager.svelte.js';
-import { eventManager } from '#lib/managers/event-manager.svelte.js';
-import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { locale } from '#lib/stores/preferences.store.js';
-import { downloadUrlPost, withError } from '#lib/utils.js';
-import { getByteUnitString } from '#lib/utils/byte-units.js';
-import { getFormatter } from '#lib/utils/i18n.js';
-import { navigate } from '#lib/utils/navigation.js';
-import { asQueryString } from '#lib/utils/shared-links.js';
-import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+import type { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { downloadManager } from '#lib/managers/download-manager.svelte.ts';
+import { eventManager } from '#lib/managers/event-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 { locale } from '#lib/stores/preferences.store.ts';
+import { downloadUrlPost, withError } from '#lib/utils.ts';
+import { getByteUnitString } from '#lib/utils/byte-units.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
+import { navigate } from '#lib/utils/navigation.ts';
+import { asQueryString } from '#lib/utils/shared-links.ts';
+import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
 import {
   AssetVisibility,
   getBaseUrl,
diff --git a/web/src/lib/utils/auth.ts b/web/src/lib/utils/auth.ts
index f5929c8d8..822105c83 100644
--- a/web/src/lib/utils/auth.ts
+++ b/web/src/lib/utils/auth.ts
@@ -1,5 +1,5 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { Route } from '#lib/route.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import { DateTime } from 'luxon';
 
diff --git a/web/src/lib/utils/byte-units.spec.ts b/web/src/lib/utils/byte-units.spec.ts
index fcc592a3f..fd54092a0 100644
--- a/web/src/lib/utils/byte-units.spec.ts
+++ b/web/src/lib/utils/byte-units.spec.ts
@@ -1,4 +1,4 @@
-import { ByteUnit, getByteUnitString, getBytesWithUnit } from '#lib/utils/byte-units.js';
+import { ByteUnit, getByteUnitString, getBytesWithUnit } from '#lib/utils/byte-units.ts';
 
 describe('getBytesWithUnit', () => {
   const tests = [
diff --git a/web/src/lib/utils/cancellable-task.spec.ts b/web/src/lib/utils/cancellable-task.spec.ts
index 880bb1284..8af38e5be 100644
--- a/web/src/lib/utils/cancellable-task.spec.ts
+++ b/web/src/lib/utils/cancellable-task.spec.ts
@@ -1,4 +1,4 @@
-import { CancellableTask } from '#lib/utils/cancellable-task.js';
+import { CancellableTask } from '#lib/utils/cancellable-task.ts';
 
 describe('CancellableTask', () => {
   describe('execute', () => {
diff --git a/web/src/lib/utils/cast/gcast-destination.svelte.ts b/web/src/lib/utils/cast/gcast-destination.svelte.ts
index b60ad5520..6afdc6930 100644
--- a/web/src/lib/utils/cast/gcast-destination.svelte.ts
+++ b/web/src/lib/utils/cast/gcast-destination.svelte.ts
@@ -1,5 +1,5 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { CastDestinationType, CastState, type ICastDestination } from '#lib/managers/cast-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { CastDestinationType, CastState, type ICastDestination } from '#lib/managers/cast-manager.svelte.ts';
 import 'chromecast-caf-sender';
 import { Duration } from 'luxon';
 
diff --git a/web/src/lib/utils/client.ts b/web/src/lib/utils/client.ts
index a9b86060b..e4d74e880 100644
--- a/web/src/lib/utils/client.ts
+++ b/web/src/lib/utils/client.ts
@@ -1,9 +1,9 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
-import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-import { initLanguage } from '#lib/utils.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';
+import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+import { initLanguage } from '#lib/utils.ts';
 import { setFetch } from '@immich/sdk';
 import { memoize } from 'lodash-es';
 
diff --git a/web/src/lib/utils/container-utils.spec.ts b/web/src/lib/utils/container-utils.spec.ts
index 933f519a2..8a630f972 100644
--- a/web/src/lib/utils/container-utils.spec.ts
+++ b/web/src/lib/utils/container-utils.spec.ts
@@ -5,7 +5,7 @@ import {
   mapNormalizedToContent,
   scaleToCover,
   scaleToFit,
-} from '#lib/utils/container-utils.js';
+} from '#lib/utils/container-utils.ts';
 
 const mockImage = (props: {
   naturalWidth: number;
diff --git a/web/src/lib/utils/date-time.spec.ts b/web/src/lib/utils/date-time.spec.ts
index eaaf43b58..be0053990 100644
--- a/web/src/lib/utils/date-time.spec.ts
+++ b/web/src/lib/utils/date-time.spec.ts
@@ -1,4 +1,4 @@
-import { locale } from '#lib/stores/preferences.store.js';
+import { locale } from '#lib/stores/preferences.store.ts';
 import { getAlbumDateRange, getShortDateRange } from './date-time';
 
 vitest.mock('#lib/stores/preferences.store.js', { spy: true });
diff --git a/web/src/lib/utils/date-time.ts b/web/src/lib/utils/date-time.ts
index f570dbde8..5dbf46ce4 100644
--- a/web/src/lib/utils/date-time.ts
+++ b/web/src/lib/utils/date-time.ts
@@ -1,5 +1,5 @@
-import { dateFormats } from '#lib/constants.js';
-import { locale } from '#lib/stores/preferences.store.js';
+import { dateFormats } from '#lib/constants.ts';
+import { locale } from '#lib/stores/preferences.store.ts';
 import { DateTime } from 'luxon';
 import { get } from 'svelte/store';
 
diff --git a/web/src/lib/utils/duplicate-utils.ts b/web/src/lib/utils/duplicate-utils.ts
index 0e9af1990..f02293840 100644
--- a/web/src/lib/utils/duplicate-utils.ts
+++ b/web/src/lib/utils/duplicate-utils.ts
@@ -1,5 +1,5 @@
-import { getAssetResolution, getFileSize } from '#lib/utils/asset-utils.js';
-import { fromISODateTime, fromISODateTimeUTC } from '#lib/utils/timeline-util.js';
+import { getAssetResolution, getFileSize } from '#lib/utils/asset-utils.ts';
+import { fromISODateTime, fromISODateTimeUTC } from '#lib/utils/timeline-util.ts';
 import type { AssetResponseDto } from '@immich/sdk';
 import {
   mdiBrightness6,
diff --git a/web/src/lib/utils/editor.spec.ts b/web/src/lib/utils/editor.spec.ts
index 4618bdaea..233dd9c63 100644
--- a/web/src/lib/utils/editor.spec.ts
+++ b/web/src/lib/utils/editor.spec.ts
@@ -1,5 +1,5 @@
-import type { EditActions } from '#lib/managers/edit/edit-manager.svelte.js';
-import { buildAffineFromEdits, normalizeTransformEdits } from '#lib/utils/editor.js';
+import type { EditActions } from '#lib/managers/edit/edit-manager.svelte.ts';
+import { buildAffineFromEdits, normalizeTransformEdits } from '#lib/utils/editor.ts';
 import { AssetEditAction, MirrorAxis } from '@immich/sdk';
 
 type NormalizedParameters = {
diff --git a/web/src/lib/utils/editor.ts b/web/src/lib/utils/editor.ts
index 7be265577..6c91f4924 100644
--- a/web/src/lib/utils/editor.ts
+++ b/web/src/lib/utils/editor.ts
@@ -1,4 +1,4 @@
-import type { EditActions } from '#lib/managers/edit/edit-manager.svelte.js';
+import type { EditActions } from '#lib/managers/edit/edit-manager.svelte.ts';
 import type { MirrorParameters, RotateParameters } from '@immich/sdk';
 import { compose, flipX, flipY, identity, rotate } from 'transformation-matrix';
 
diff --git a/web/src/lib/utils/executor-queue.spec.ts b/web/src/lib/utils/executor-queue.spec.ts
index bdc90d57e..9ef50d845 100644
--- a/web/src/lib/utils/executor-queue.spec.ts
+++ b/web/src/lib/utils/executor-queue.spec.ts
@@ -1,4 +1,4 @@
-import { ExecutorQueue } from '#lib/utils/executor-queue.js';
+import { ExecutorQueue } from '#lib/utils/executor-queue.ts';
 
 describe('Executor Queue test', function () {
   it('should run all promises', async function () {
diff --git a/web/src/lib/utils/executor-queue.ts b/web/src/lib/utils/executor-queue.ts
index 0a851ee12..e6620fad7 100644
--- a/web/src/lib/utils/executor-queue.ts
+++ b/web/src/lib/utils/executor-queue.ts
@@ -1,4 +1,4 @@
-import { handlePromiseError } from '#lib/utils.js';
+import { handlePromiseError } from '#lib/utils.ts';
 
 interface Options {
   concurrency: number;
diff --git a/web/src/lib/utils/file-uploader.spec.ts b/web/src/lib/utils/file-uploader.spec.ts
index 9e59322a2..572b07c88 100644
--- a/web/src/lib/utils/file-uploader.spec.ts
+++ b/web/src/lib/utils/file-uploader.spec.ts
@@ -1,8 +1,8 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { uploadManager } from '#lib/managers/upload-manager.svelte.js';
-import { uploadAssetsStore } from '#lib/stores/upload.js';
-import { UploadState } from '#lib/types.js';
-import * as utils from '#lib/utils.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { uploadManager } from '#lib/managers/upload-manager.svelte.ts';
+import { uploadAssetsStore } from '#lib/stores/upload.ts';
+import { UploadState } from '#lib/types.ts';
+import * as utils from '#lib/utils.ts';
 import { AssetMediaStatus, type AssetMediaResponseDto, type UserAdminResponseDto } from '@immich/sdk';
 import { get } from 'svelte/store';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index d9d122719..898cea0e4 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -1,12 +1,12 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { uploadManager } from '#lib/managers/upload-manager.svelte.js';
-import { addAssetsToAlbumsMutation } from '#lib/queries/album.query.js';
-import { executeMutation } from '#lib/queries/client.js';
-import { uploadAssetsStore } from '#lib/stores/upload.js';
-import { UploadState } from '#lib/types.js';
-import { uploadRequest } from '#lib/utils.js';
-import { ExecutorQueue } from '#lib/utils/executor-queue.js';
-import { asQueryString } from '#lib/utils/shared-links.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { uploadManager } from '#lib/managers/upload-manager.svelte.ts';
+import { addAssetsToAlbumsMutation } from '#lib/queries/album.query.ts';
+import { executeMutation } from '#lib/queries/client.ts';
+import { uploadAssetsStore } from '#lib/stores/upload.ts';
+import { UploadState } from '#lib/types.ts';
+import { uploadRequest } from '#lib/utils.ts';
+import { ExecutorQueue } from '#lib/utils/executor-queue.ts';
+import { asQueryString } from '#lib/utils/shared-links.ts';
 import {
   AssetMediaStatus,
   AssetUploadAction,
diff --git a/web/src/lib/utils/i18n.ts b/web/src/lib/utils/i18n.ts
index 8ad3c9ed2..f2815fff8 100644
--- a/web/src/lib/utils/i18n.ts
+++ b/web/src/lib/utils/i18n.ts
@@ -1,4 +1,4 @@
-import type { Lang } from '#lib/constants.js';
+import type { Lang } from '#lib/constants.ts';
 import { locale, t, waitLocale } from 'svelte-i18n';
 import { get, type Unsubscriber } from 'svelte/store';
 
diff --git a/web/src/lib/utils/invocationTracker.ts b/web/src/lib/utils/invocationTracker.ts
index ac9a61d6f..ca86b6905 100644
--- a/web/src/lib/utils/invocationTracker.ts
+++ b/web/src/lib/utils/invocationTracker.ts
@@ -1,4 +1,4 @@
-import { handleError } from '#lib/utils/handle-error.js';
+import { handleError } from '#lib/utils/handle-error.ts';
 
 /**
  * Tracks the state of asynchronous invocations to handle race conditions and stale operations.
diff --git a/web/src/lib/utils/layout-utils.spec.ts b/web/src/lib/utils/layout-utils.spec.ts
index 1bd43151d..958c79496 100644
--- a/web/src/lib/utils/layout-utils.spec.ts
+++ b/web/src/lib/utils/layout-utils.spec.ts
@@ -1,4 +1,4 @@
-import { scaleToCover, scaleToFit } from '#lib/utils/container-utils.js';
+import { scaleToCover, scaleToFit } from '#lib/utils/container-utils.ts';
 
 describe('scaleToFit', () => {
   const tests = [
diff --git a/web/src/lib/utils/layout-utils.ts b/web/src/lib/utils/layout-utils.ts
index 679b60e0d..0b2a09b7a 100644
--- a/web/src/lib/utils/layout-utils.ts
+++ b/web/src/lib/utils/layout-utils.ts
@@ -1,7 +1,7 @@
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { getAssetRatio } from '#lib/utils/asset-utils.js';
-import { isTimelineAsset, isTimelineAssets } from '#lib/utils/timeline-util.js';
-import { TUNABLES } from '#lib/utils/tunables.js';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+import { getAssetRatio } from '#lib/utils/asset-utils.ts';
+import { isTimelineAsset, isTimelineAssets } from '#lib/utils/timeline-util.ts';
+import { TUNABLES } from '#lib/utils/tunables.ts';
 import { JustifiedLayout, type LayoutOptions } from '@immich/justified-layout-wasm';
 import type { AssetResponseDto } from '@immich/sdk';
 import createJustifiedLayout from 'justified-layout';
diff --git a/web/src/lib/utils/license-utils.ts b/web/src/lib/utils/license-utils.ts
index 8beceea95..4357669f8 100644
--- a/web/src/lib/utils/license-utils.ts
+++ b/web/src/lib/utils/license-utils.ts
@@ -1,8 +1,8 @@
-import type { ImmichProduct } from '#lib/constants.js';
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { queryClient, readPreloadedQuery } from '#lib/queries/client.js';
-import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-import { getAboutInfoQuery } from '#lib/queries/server-info.query.js';
+import type { ImmichProduct } from '#lib/constants.ts';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { queryClient, readPreloadedQuery } from '#lib/queries/client.ts';
+import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
+import { getAboutInfoQuery } from '#lib/queries/server-info.query.ts';
 import { setServerLicense, setUserLicense, type LicenseResponseDto } from '@immich/sdk';
 import { PUBLIC_IMMICH_BUY_HOST, PUBLIC_IMMICH_PAY_HOST } from '$app/env/public';
 
diff --git a/web/src/lib/utils/maintenance.spec.ts b/web/src/lib/utils/maintenance.spec.ts
index aa82f4b0c..2787c2d38 100644
--- a/web/src/lib/utils/maintenance.spec.ts
+++ b/web/src/lib/utils/maintenance.spec.ts
@@ -1,4 +1,4 @@
-import { maintenanceReturnUrl } from '#lib/utils/maintenance.js';
+import { maintenanceReturnUrl } from '#lib/utils/maintenance.ts';
 
 describe('maintenance', () => {
   describe(maintenanceReturnUrl.name, () => {
diff --git a/web/src/lib/utils/maintenance.ts b/web/src/lib/utils/maintenance.ts
index c8cc47f98..a2509dae9 100644
--- a/web/src/lib/utils/maintenance.ts
+++ b/web/src/lib/utils/maintenance.ts
@@ -1,6 +1,6 @@
-import { Route } from '#lib/route.js';
-import { maintenanceStore } from '#lib/stores/maintenance.store.js';
-import { websocketStore } from '#lib/stores/websocket.js';
+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';
 
 export function maintenanceCreateUrl(url: URL) {
diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index adbcf71d0..afd5aaaf6 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -1,5 +1,5 @@
-import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
-import { Route } from '#lib/route.js';
+import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.ts';
+import { Route } from '#lib/route.ts';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
 import type { RouteId } from '$app/types';
diff --git a/web/src/lib/utils/ocr-utils.spec.ts b/web/src/lib/utils/ocr-utils.spec.ts
index d6230070f..51ae2b589 100644
--- a/web/src/lib/utils/ocr-utils.spec.ts
+++ b/web/src/lib/utils/ocr-utils.spec.ts
@@ -1,6 +1,6 @@
-import type { OcrBoundingBox } from '#lib/stores/ocr.svelte.js';
-import type { Size } from '#lib/utils/container-utils.js';
-import { getOcrBoundingBoxes } from '#lib/utils/ocr-utils.js';
+import type { OcrBoundingBox } from '#lib/stores/ocr.svelte.ts';
+import type { Size } from '#lib/utils/container-utils.ts';
+import { getOcrBoundingBoxes } from '#lib/utils/ocr-utils.ts';
 
 describe('getOcrBoundingBoxes', () => {
   it('should scale normalized coordinates by display dimensions', () => {
diff --git a/web/src/lib/utils/ocr-utils.ts b/web/src/lib/utils/ocr-utils.ts
index c8cc97ffd..9bf80bd2a 100644
--- a/web/src/lib/utils/ocr-utils.ts
+++ b/web/src/lib/utils/ocr-utils.ts
@@ -1,8 +1,8 @@
-import type { OcrBoundingBox } from '#lib/stores/ocr.svelte.js';
-import { mapNormalizedToContent, type Point, type Size } from '#lib/utils/container-utils.js';
+import type { OcrBoundingBox } from '#lib/stores/ocr.svelte.ts';
+import { mapNormalizedToContent, type Point, type Size } from '#lib/utils/container-utils.ts';
 import { clamp } from 'lodash-es';
 
-export type { Point } from '#lib/utils/container-utils.js';
+export type { Point } from '#lib/utils/container-utils.ts';
 
 const distance = (p1: Point, p2: Point) => Math.hypot(p2.x - p1.x, p2.y - p1.y);
 
diff --git a/web/src/lib/utils/people-utils.spec.ts b/web/src/lib/utils/people-utils.spec.ts
index ce8225735..c60355f3d 100644
--- a/web/src/lib/utils/people-utils.spec.ts
+++ b/web/src/lib/utils/people-utils.spec.ts
@@ -1,6 +1,6 @@
-import type { Faces } from '#lib/managers/asset-viewer-manager.svelte.js';
-import type { Size } from '#lib/utils/container-utils.js';
-import { getBoundingBox } from '#lib/utils/people-utils.js';
+import type { Faces } from '#lib/managers/asset-viewer-manager.svelte.ts';
+import type { Size } from '#lib/utils/container-utils.ts';
+import { getBoundingBox } from '#lib/utils/people-utils.ts';
 
 const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
   id: 'face-1',
diff --git a/web/src/lib/utils/people-utils.ts b/web/src/lib/utils/people-utils.ts
index df6612965..4767ea320 100644
--- a/web/src/lib/utils/people-utils.ts
+++ b/web/src/lib/utils/people-utils.ts
@@ -1,6 +1,6 @@
-import type { Faces } from '#lib/managers/asset-viewer-manager.svelte.js';
-import { getAssetMediaUrl } from '#lib/utils.js';
-import { mapNormalizedRectToContent, type Rect, type Size } from '#lib/utils/container-utils.js';
+import type { Faces } from '#lib/managers/asset-viewer-manager.svelte.ts';
+import { getAssetMediaUrl } from '#lib/utils.ts';
+import { mapNormalizedRectToContent, type Rect, type Size } from '#lib/utils/container-utils.ts';
 import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
 
 export type BoundingBox = Rect & { id: string; labelWidth: number };
diff --git a/web/src/lib/utils/places-utils.ts b/web/src/lib/utils/places-utils.ts
index c1bd87fe1..4a2bb0c32 100644
--- a/web/src/lib/utils/places-utils.ts
+++ b/web/src/lib/utils/places-utils.ts
@@ -1,4 +1,4 @@
-import { PlacesGroupBy, placesViewSettings, type PlacesViewSettings } from '#lib/stores/preferences.store.js';
+import { PlacesGroupBy, placesViewSettings, type PlacesViewSettings } from '#lib/stores/preferences.store.ts';
 import { type AssetResponseDto } from '@immich/sdk';
 import { get } from 'svelte/store';
 
diff --git a/web/src/lib/utils/purchase-utils.ts b/web/src/lib/utils/purchase-utils.ts
index 704cb06ef..9d1bf9eea 100644
--- a/web/src/lib/utils/purchase-utils.ts
+++ b/web/src/lib/utils/purchase-utils.ts
@@ -1,4 +1,4 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
 import { updateMyPreferences } from '@immich/sdk';
 import { DateTime } from 'luxon';
 
diff --git a/web/src/lib/utils/shared-links.ts b/web/src/lib/utils/shared-links.ts
index 20af50037..c2cf9e237 100644
--- a/web/src/lib/utils/shared-links.ts
+++ b/web/src/lib/utils/shared-links.ts
@@ -1,7 +1,7 @@
-import { getSharedLink as getCachedSharedLink, setSharedLink } from '#lib/utils.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
-import { getAssetInfoFromParam } from '#lib/utils/navigation.js';
+import { getSharedLink as getCachedSharedLink, setSharedLink } from '#lib/utils.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
+import { getAssetInfoFromParam } from '#lib/utils/navigation.ts';
 import { getMySharedLink, isHttpError } from '@immich/sdk';
 
 export const asQueryString = ({ slug, key }: { slug?: string; key?: string }) => {
diff --git a/web/src/lib/utils/thumbnail-util.spec.ts b/web/src/lib/utils/thumbnail-util.spec.ts
index 23613a65c..97482f7b4 100644
--- a/web/src/lib/utils/thumbnail-util.spec.ts
+++ b/web/src/lib/utils/thumbnail-util.spec.ts
@@ -1,5 +1,5 @@
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { getAltText } from '#lib/utils/thumbnail-util.js';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+import { getAltText } from '#lib/utils/thumbnail-util.ts';
 import { AssetVisibility } from '@immich/sdk';
 import { init, register, waitLocale } from 'svelte-i18n';
 import { get } from 'svelte/store';
diff --git a/web/src/lib/utils/thumbnail-util.ts b/web/src/lib/utils/thumbnail-util.ts
index 82a3e90ca..5acce6eef 100644
--- a/web/src/lib/utils/thumbnail-util.ts
+++ b/web/src/lib/utils/thumbnail-util.ts
@@ -1,6 +1,6 @@
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { locale } from '#lib/stores/preferences.store.js';
-import { fromTimelinePlainDateTime } from '#lib/utils/timeline-util.js';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+import { locale } from '#lib/stores/preferences.store.ts';
+import { fromTimelinePlainDateTime } from '#lib/utils/timeline-util.ts';
 import { t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
 
diff --git a/web/src/lib/utils/timeline-util.spec.ts b/web/src/lib/utils/timeline-util.spec.ts
index fe5062c8c..d146b0bfb 100644
--- a/web/src/lib/utils/timeline-util.spec.ts
+++ b/web/src/lib/utils/timeline-util.spec.ts
@@ -1,6 +1,6 @@
-import { locale } from '#lib/stores/preferences.store.js';
-import { parseUtcDate } from '#lib/utils/date-time.js';
-import { formatGroupTitle, toISOYearMonthUTC } from '#lib/utils/timeline-util.js';
+import { locale } from '#lib/stores/preferences.store.ts';
+import { parseUtcDate } from '#lib/utils/date-time.ts';
+import { formatGroupTitle, toISOYearMonthUTC } from '#lib/utils/timeline-util.ts';
 import { DateTime } from 'luxon';
 
 describe('formatGroupTitle', () => {
diff --git a/web/src/lib/utils/timeline-util.ts b/web/src/lib/utils/timeline-util.ts
index ed8185111..250674ea0 100644
--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -1,6 +1,6 @@
-import type { AssetDescriptor, TimelineAsset, ViewportTopMonth } from '#lib/managers/timeline-manager/types.js';
-import { locale } from '#lib/stores/preferences.store.js';
-import { getAssetRatio } from '#lib/utils/asset-utils.js';
+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 { DateTime, type LocaleOptions } from 'luxon';
 import { SvelteSet } from 'svelte/reactivity';
diff --git a/web/src/lib/utils/workflow.spec.ts b/web/src/lib/utils/workflow.spec.ts
index 42222aec4..9ef09a34d 100644
--- a/web/src/lib/utils/workflow.spec.ts
+++ b/web/src/lib/utils/workflow.spec.ts
@@ -1,4 +1,4 @@
-import { getWorkflowDefaultConfig } from '#lib/utils/workflow.js';
+import { getWorkflowDefaultConfig } from '#lib/utils/workflow.ts';
 
 describe(getWorkflowDefaultConfig.name, () => {
   describe('required properties', () => {
diff --git a/web/src/lib/utils/workflow.ts b/web/src/lib/utils/workflow.ts
index da5892cc1..9aff59153 100644
--- a/web/src/lib/utils/workflow.ts
+++ b/web/src/lib/utils/workflow.ts
@@ -1,4 +1,4 @@
-import type { JSONSchemaProperty } from '#lib/types.js';
+import type { JSONSchemaProperty } from '#lib/types.ts';
 import { WorkflowTrigger } from '@immich/sdk';
 import type { MessageFormatter } from 'svelte-i18n';
 
diff --git a/web/src/routes/(user)/+layout.svelte b/web/src/routes/(user)/+layout.svelte
index cdbfd4101..0a10e9100 100644
--- a/web/src/routes/(user)/+layout.svelte
+++ b/web/src/routes/(user)/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state';
   import UploadCover from './DragAndDropUploadOverlay.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
   import type { Snippet } from 'svelte';
   interface Props {
     children?: Snippet;
diff --git a/web/src/routes/(user)/+layout.ts b/web/src/routes/(user)/+layout.ts
index 0380aa0be..99678c42d 100644
--- a/web/src/routes/(user)/+layout.ts
+++ b/web/src/routes/(user)/+layout.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getAssetInfoFromParam, isSharedLinkRoute } from '#lib/utils/navigation.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getAssetInfoFromParam, isSharedLinkRoute } from '#lib/utils/navigation.ts';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ url, params, route }) => {
diff --git a/web/src/routes/(user)/DragAndDropUploadOverlay.svelte b/web/src/routes/(user)/DragAndDropUploadOverlay.svelte
index 890732859..ec9243172 100644
--- a/web/src/routes/(user)/DragAndDropUploadOverlay.svelte
+++ b/web/src/routes/(user)/DragAndDropUploadOverlay.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { shouldIgnoreEvent } from '#lib/actions/shortcut.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { dragAndDropFilesStore } from '#lib/stores/drag-and-drop-files.store.js';
-  import { fileUploadHandler } from '#lib/utils/file-uploader.js';
-  import { isAlbumsRoute, isLockedFolderRoute } from '#lib/utils/navigation.js';
+  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';
+  import { fileUploadHandler } from '#lib/utils/file-uploader.ts';
+  import { isAlbumsRoute, isLockedFolderRoute } from '#lib/utils/navigation.ts';
   import { Logo } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 2abf27ba5..b77ef6636 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { scrollMemory } from '#lib/actions/scroll-memory.js';
+  import { scrollMemory } from '#lib/actions/scroll-memory.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';
   import GroupTab from '#lib/elements/GroupTab.svelte';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { getAllAlbumsQuery } from '#lib/queries/album.query.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { Route } from '#lib/route.js';
-  import { AlbumFilter, albumViewSettings } from '#lib/stores/preferences.store.js';
-  import { createAlbumAndRedirect } from '#lib/utils/album-utils.js';
+  import { getAllAlbumsQuery } from '#lib/queries/album.query.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { Route } from '#lib/route.ts';
+  import { AlbumFilter, albumViewSettings } from '#lib/stores/preferences.store.ts';
+  import { createAlbumAndRedirect } from '#lib/utils/album-utils.ts';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
diff --git a/web/src/routes/(user)/albums/+page.ts b/web/src/routes/(user)/albums/+page.ts
index 0877c229a..6ebdb9496 100644
--- a/web/src/routes/(user)/albums/+page.ts
+++ b/web/src/routes/(user)/albums/+page.ts
@@ -1,7 +1,7 @@
-import { getAllAlbumsQuery } from '#lib/queries/album.query.js';
-import { queryClient } from '#lib/queries/client.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { getAllAlbumsQuery } from '#lib/queries/album.query.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/albums/AlbumsControls.svelte b/web/src/routes/(user)/albums/AlbumsControls.svelte
index 2b02c66bb..6ae802dd7 100644
--- a/web/src/routes/(user)/albums/AlbumsControls.svelte
+++ b/web/src/routes/(user)/albums/AlbumsControls.svelte
@@ -9,7 +9,7 @@
     AlbumViewMode,
     albumViewSettings,
     SortOrder,
-  } from '#lib/stores/preferences.store.js';
+  } from '#lib/stores/preferences.store.ts';
   import {
     type AlbumGroupOptionMetadata,
     type AlbumSortOptionMetadata,
@@ -22,7 +22,7 @@
     getSelectedAlbumGroupOption,
     groupOptionsMetadata,
     sortOptionsMetadata,
-  } from '#lib/utils/album-utils.js';
+  } from '#lib/utils/album-utils.ts';
   import { Button, IconButton, Text } from '@immich/ui';
   import {
     mdiArrowDownThin,
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 9d46e634a..61143b6ab 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto, onNavigate } from '$app/navigation';
-  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.js';
+  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.ts';
   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';
@@ -22,21 +22,21 @@
   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.js';
-  import { activityManager } from '#lib/managers/activity-manager.svelte.js';
-  import { assetMultiSelectManager, AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { Route } from '#lib/route.js';
-  import { getAlbumActions, getAlbumAssetsActions, isAlbumEditor, isAlbumOwner } from '#lib/services/album.service.js';
-  import { getGlobalActions } from '#lib/services/app.service.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { isAlbumsRoute, navigate, type AssetGridRouteSearchParams } from '#lib/utils/navigation.js';
+  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 { 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 { 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 { 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';
@@ -60,15 +60,15 @@
   import AlbumDescription from './AlbumDescription.svelte';
   import AlbumTitle from './AlbumTitle.svelte';
   import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
-  import { delay } from '#lib/utils/asset-utils.js';
+  import { delay } from '#lib/utils/asset-utils.ts';
   import {
     deleteAlbumMutation,
     getAlbumInfoQuery,
     invalidateAlbum,
     updateAlbumInfoMutation,
-  } from '#lib/queries/album.query.js';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  } 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();
 
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 469054612..ff6779035 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,6 +1,6 @@
-import { getAlbumInfoQuery } from '#lib/queries/album.query.js';
-import { queryClient } from '#lib/queries/client.js';
-import { authenticate } from '#lib/utils/auth.js';
+import { getAlbumInfoQuery } from '#lib/queries/album.query.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { authenticate } from '#lib/utils/auth.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
index 6b90f3702..7ef65fa70 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumDescription.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
-  import { updateAlbumInfoMutation } from '#lib/queries/album.query.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
+  import { updateAlbumInfoMutation } from '#lib/queries/album.query.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
   import { Textarea } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fromAction } from 'svelte/attachments';
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumTitle.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumTitle.svelte
index a357c5f63..f7c733c8a 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumTitle.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/AlbumTitle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { shortcut } from '#lib/actions/shortcut.js';
-  import { updateAlbumInfoMutation } from '#lib/queries/album.query.js';
-  import { executeMutation } from '#lib/queries/client.js';
+  import { shortcut } from '#lib/actions/shortcut.ts';
+  import { updateAlbumInfoMutation } from '#lib/queries/album.query.ts';
+  import { executeMutation } from '#lib/queries/client.ts';
   import { Textarea } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fromAction } from 'svelte/attachments';
diff --git a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
index d5c6d0221..13ee96640 100644
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -9,12 +9,12 @@
   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.js';
+  import { AssetAction } from '#lib/constants.ts';
 
   import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
+  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';
   import { AssetVisibility } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
diff --git a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.ts
index e4c375209..c4fe6f141 100644
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/buy/+page.svelte b/web/src/routes/(user)/buy/+page.svelte
index 945be181b..e347c656e 100644
--- a/web/src/routes/(user)/buy/+page.svelte
+++ b/web/src/routes/(user)/buy/+page.svelte
@@ -4,8 +4,8 @@
   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.js';
-  import { Route } from '#lib/route.js';
+  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';
diff --git a/web/src/routes/(user)/buy/+page.ts b/web/src/routes/(user)/buy/+page.ts
index 53be06932..ac2288f68 100644
--- a/web/src/routes/(user)/buy/+page.ts
+++ b/web/src/routes/(user)/buy/+page.ts
@@ -1,7 +1,7 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
-import { activateProduct, getActivationKey } from '#lib/utils/license-utils.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
+import { activateProduct, getActivationKey } from '#lib/utils/license-utils.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index c4eeb1052..8fcfe5ad4 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -5,17 +5,17 @@
   import OnEvents from '#lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
   import SingleGridRow from '#lib/components/shared-components/SingleGridRow.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetMediaUrl, getPeopleThumbnailUrl, memoryLaneTitle } from '#lib/utils.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-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.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import MemoryCard from '#lib/components/memories/MemoryCard.svelte';
   import { ImageCarousel } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
-  import { getAltText } from '#lib/utils/thumbnail-util.js';
+  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 {
diff --git a/web/src/routes/(user)/explore/+page.ts b/web/src/routes/(user)/explore/+page.ts
index e6a829545..a2770e82a 100644
--- a/web/src/routes/(user)/explore/+page.ts
+++ b/web/src/routes/(user)/explore/+page.ts
@@ -1,6 +1,6 @@
-import { memoryManager } from '#lib/managers/memory-manager.svelte.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { memoryManager } from '#lib/managers/memory-manager.svelte.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAllPeople, getExploreData, MemorySearchOrder } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
index cf8d65a04..1e9131d10 100644
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -14,9 +14,9 @@
   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 { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
+  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';
   import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.ts
index 027580e7e..15a93d092 100644
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
index b93438ab5..cca60de7c 100644
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -18,15 +18,15 @@
   import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
   import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
   import SkipLink from '#lib/elements/SkipLink.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import type { Viewport } from '#lib/managers/timeline-manager/types.js';
-  import { createPreloadedQuery, queryClient } from '#lib/queries/client.js';
-  import { getAssetsByOriginalPathQuery, getFolderTreeQuery } from '#lib/queries/view.query.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { isAssetViewerRoute } from '#lib/utils/navigation.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
-  import { joinPaths } from '#lib/utils/tree-utils.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import type { Viewport } from '#lib/managers/timeline-manager/types.ts';
+  import { createPreloadedQuery, queryClient } from '#lib/queries/client.ts';
+  import { getAssetsByOriginalPathQuery, getFolderTreeQuery } from '#lib/queries/view.query.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
+  import { isAssetViewerRoute } from '#lib/utils/navigation.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
+  import { joinPaths } from '#lib/utils/tree-utils.ts';
   import { afterNavigate, beforeNavigate, goto, refreshAll } from '$app/navigation';
   import { ActionButton, CommandPaletteDefaultProvider, IconButton, Text } from '@immich/ui';
   import { mdiDotsVertical, mdiFolder, mdiFolderHome, mdiFolderOutline, mdiSelectAll } from '@mdi/js';
diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts
index 72d3cff4d..4f8152178 100644
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,8 +1,8 @@
-import { QueryParameter } from '#lib/constants.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getAssetsByOriginalPathQuery, getFolderTreeQuery } from '#lib/queries/view.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { QueryParameter } from '#lib/constants.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getAssetsByOriginalPathQuery, getFolderTreeQuery } from '#lib/queries/view.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 8afc35b49..830946529 100644
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -12,11 +12,11 @@
   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 { AssetAction } from '#lib/constants.js';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { getUserActions } from '#lib/services/user.service.js';
+  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 { Route } from '#lib/route.ts';
+  import { getUserActions } from '#lib/services/user.service.ts';
   import { AssetVisibility } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.ts
index c5299add9..d8a2a7818 100644
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,6 +1,6 @@
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAuthStatus } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 953efd872..6215856cf 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -2,20 +2,20 @@
   import { goto } from '$app/navigation';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import MapTimelinePanel from './MapTimelinePanel.svelte';
-  import type { SelectionBBox } from '#lib/components/shared-components/map/types.js';
-  import { timeToLoadTheMap } from '#lib/constants.js';
+  import type { SelectionBBox } from '#lib/components/shared-components/map/types.ts';
+  import { timeToLoadTheMap } from '#lib/constants.ts';
   import Portal from '#lib/elements/Portal.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { delay } from '#lib/utils/asset-utils.js';
-  import { navigate } from '#lib/utils/navigation.js';
-  import { mapSettings } from '#lib/stores/preferences.store.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { delay } from '#lib/utils/asset-utils.ts';
+  import { navigate } from '#lib/utils/navigation.ts';
+  import { mapSettings } from '#lib/stores/preferences.store.ts';
   import { LoadingSpinner } from '@immich/ui';
   import { onDestroy } from 'svelte';
   import type { PageData } from './$types';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts
index a6b4c4bb5..4ac8a7516 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
index aefb41f48..18de77a56 100644
--- a/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
+++ b/web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/MapTimelinePanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
   import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import type { SelectionBBox } from '#lib/components/shared-components/map/types.js';
+  import type { SelectionBBox } from '#lib/components/shared-components/map/types.ts';
   import ArchiveAction from '#lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '#lib/components/timeline/actions/ChangeDateAction.svelte';
   import ChangeDescription from '#lib/components/timeline/actions/ChangeDescriptionAction.svelte';
@@ -15,12 +15,12 @@
   import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '#lib/components/timeline/Timeline.svelte';
   import Portal from '#lib/elements/Portal.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { getStackBulkActions } from '#lib/services/stack.service.js';
-  import { mapSettings } from '#lib/stores/preferences.store.js';
-  import { type OnLink, type OnUnlink } from '#lib/utils/actions.js';
+  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';
+  import { getStackBulkActions } from '#lib/services/stack.service.ts';
+  import { mapSettings } from '#lib/stores/preferences.store.ts';
+  import { type OnLink, type OnUnlink } from '#lib/utils/actions.ts';
   import { AssetVisibility } from '@immich/sdk';
   import { ActionButton, CloseButton, CommandPaletteDefaultProvider, Icon } from '@immich/ui';
   import { mdiDotsVertical, mdiImageMultiple } from '@mdi/js';
diff --git a/web/src/routes/(user)/memories/+page.svelte b/web/src/routes/(user)/memories/+page.svelte
index 0b366fb29..af1de7add 100644
--- a/web/src/routes/(user)/memories/+page.svelte
+++ b/web/src/routes/(user)/memories/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { scrollMemory } from '#lib/actions/scroll-memory.js';
+  import { scrollMemory } from '#lib/actions/scroll-memory.ts';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
-  import { memoryManager } from '#lib/managers/memory-manager.svelte.js';
-  import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.js';
+  import { memoryManager } from '#lib/managers/memory-manager.svelte.ts';
+  import { userPreferencesManager } from '#lib/managers/user-preferences-manager.svelte.ts';
   import MemoryCard from '#lib/components/memories/MemoryCard.svelte';
   import MemoriesSettingsModal from '#lib/modals/MemoriesSettingsModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl, memoryLaneTitle } from '#lib/utils.js';
-  import { getAltText } from '#lib/utils/thumbnail-util.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { Route } from '#lib/route.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl, memoryLaneTitle } from '#lib/utils.ts';
+  import { getAltText } from '#lib/utils/thumbnail-util.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import type { MemoryResponseDto } from '@immich/sdk';
   import { IconButton, LoadingSpinner, modalManager } from '@immich/ui';
   import { mdiTune } from '@mdi/js';
diff --git a/web/src/routes/(user)/memories/+page.ts b/web/src/routes/(user)/memories/+page.ts
index 8448aba1d..da35b79d3 100644
--- a/web/src/routes/(user)/memories/+page.ts
+++ b/web/src/routes/(user)/memories/+page.ts
@@ -1,6 +1,6 @@
-import { memoryManager } from '#lib/managers/memory-manager.svelte.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { memoryManager } from '#lib/managers/memory-manager.svelte.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/+page.ts
index b7cdf5ffb..30c37b5fe 100644
--- a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,8 +1,8 @@
-import { QueryParameter, UUID_REGEX } from '#lib/constants.js';
-import { memoryManager } from '#lib/managers/memory-manager.svelte.js';
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { QueryParameter, UUID_REGEX } from '#lib/constants.ts';
+import { memoryManager } from '#lib/managers/memory-manager.svelte.ts';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
index 8f0d38d69..41479ff58 100644
--- a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
+++ b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryPhotoViewer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { assetViewerFadeDuration } from '#lib/constants.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
-  import { getAltText } from '#lib/utils/thumbnail-util.js';
+  import { assetViewerFadeDuration } from '#lib/constants.ts';
+  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
+  import { getAltText } from '#lib/utils/thumbnail-util.ts';
   import { AssetMediaSize } from '@immich/sdk';
   import DelayedLoadingSpinner from '#lib/components/DelayedLoadingSpinner.svelte';
   import { onMount } from 'svelte';
diff --git a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
index a3f1d8c6e..7569f5831 100644
--- a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
+++ b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryVideoViewer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { assetViewerFadeDuration } from '#lib/constants.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-  import { autoPlayVideo } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl, getAssetPlaybackUrl } from '#lib/utils.js';
+  import { assetViewerFadeDuration } from '#lib/constants.ts';
+  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+  import { autoPlayVideo } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl, getAssetPlaybackUrl } from '#lib/utils.ts';
   import { AssetMediaSize } from '@immich/sdk';
   import 'media-chrome/media-controller';
   import { onMount } from 'svelte';
diff --git a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
index 589526f7d..4ad087232 100644
--- a/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
+++ b/web/src/routes/(user)/memories/[id]/[[photos=photos]]/[[assetId=id]]/MemoryViewer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.js';
-  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.ts';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
   import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
   import BirthdayConfetti from '#lib/components/memories/BirthdayConfetti.svelte';
   import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
@@ -15,16 +15,16 @@
   import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
   import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
   import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { memoryManager } from '#lib/managers/memory-manager.svelte.js';
-  import type { TimelineAsset, Viewport } from '#lib/managers/timeline-manager/types.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl, handlePromiseError, memoryLaneTitle } from '#lib/utils.js';
-  import { fromISODateTimeUTC, toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { 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 { memoryManager } from '#lib/managers/memory-manager.svelte.ts';
+  import type { TimelineAsset, Viewport } from '#lib/managers/timeline-manager/types.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl, handlePromiseError, memoryLaneTitle } from '#lib/utils.ts';
+  import { fromISODateTimeUTC, toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { AssetMediaSize, AssetTypeEnum, getAssetInfo, MemoryType } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider, Icon, IconButton, Text } from '@immich/ui';
   import {
diff --git a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts
index 1696d1331..46d5d1fa0 100644
--- a/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/memory/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,4 +1,4 @@
-import { Route } from '#lib/route.js';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 91c290d66..c77832fde 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -4,9 +4,9 @@
   import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
   import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '#lib/components/timeline/Timeline.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
   import { AssetVisibility } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
   import { mdiArrowLeft } from '@mdi/js';
diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 969c79c0d..587093d79 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getUser } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index bcefb4af3..7e0190f3d 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { scrollMemory } from '#lib/actions/scroll-memory.js';
-  import { shortcut } from '#lib/actions/shortcut.js';
+  import { scrollMemory } from '#lib/actions/scroll-memory.ts';
+  import { shortcut } from '#lib/actions/shortcut.ts';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { QueryParameter, SessionStorageKey } from '#lib/constants.js';
+  import { QueryParameter, SessionStorageKey } from '#lib/constants.ts';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import PeopleFilterModal from '#lib/modals/PeopleFilterModal.svelte';
   import PersonMergeSuggestionModal from '#lib/modals/PersonMergeSuggestionModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { getPeopleUserActions } from '#lib/services/person-user.service.js';
-  import { handleUpdatePersonName } from '#lib/services/person.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { websocketEvents } from '#lib/stores/websocket.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { Route } from '#lib/route.ts';
+  import { getPeopleUserActions } from '#lib/services/person-user.service.ts';
+  import { handleUpdatePersonName } from '#lib/services/person.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { websocketEvents } from '#lib/stores/websocket.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import {
     getAllPeople,
     getClusterGroupUsers,
diff --git a/web/src/routes/(user)/people/+page.ts b/web/src/routes/(user)/people/+page.ts
index aa93681e7..350e0501c 100644
--- a/web/src/routes/(user)/people/+page.ts
+++ b/web/src/routes/(user)/people/+page.ts
@@ -1,7 +1,7 @@
-import { QueryParameter } from '#lib/constants.js';
-import type { PeopleFilter } from '#lib/types.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { QueryParameter } from '#lib/constants.ts';
+import type { PeopleFilter } from '#lib/types.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAllPeople } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/people/PeopleCard.svelte b/web/src/routes/(user)/people/PeopleCard.svelte
index 7fd11ae3d..f8d0c4c61 100644
--- a/web/src/routes/(user)/people/PeopleCard.svelte
+++ b/web/src/routes/(user)/people/PeopleCard.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import PersonIndicator from '#lib/components/faces-page/PersonIndicator.svelte';
-  import { Route } from '#lib/route.js';
-  import { getPersonActions } from '#lib/services/person.service.js';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
+  import { Route } from '#lib/route.ts';
+  import { getPersonActions } from '#lib/services/person.service.ts';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
   import { type PersonResponseDto } from '@immich/sdk';
   import { ContextMenuButton } from '@immich/ui';
   import { mdiAccountMultipleCheckOutline } from '@mdi/js';
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index ee1b4381a..a32fdf477 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { clickOutside } from '#lib/actions/click-outside.js';
-  import { listNavigation } from '#lib/actions/list-navigation.js';
-  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.js';
+  import { clickOutside } from '#lib/actions/click-outside.ts';
+  import { listNavigation } from '#lib/actions/list-navigation.ts';
+  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.ts';
   import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
@@ -19,20 +19,20 @@
   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 { PersonPageViewMode, QueryParameter, SessionStorageKey } from '#lib/constants.js';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+  import { PersonPageViewMode, QueryParameter, SessionStorageKey } 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 type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
   import PersonEditModal from '#lib/modals/PersonEditModal.svelte';
   import PersonMergeSuggestionModal from '#lib/modals/PersonMergeSuggestionModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { getPersonActions, handleUpdatePersonName } from '#lib/services/person.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { websocketEvents } from '#lib/stores/websocket.js';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { Route } from '#lib/route.ts';
+  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
+  import { getPersonActions, handleUpdatePersonName } from '#lib/services/person.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { websocketEvents } from '#lib/stores/websocket.ts';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { afterNavigate, goto, refreshAll } from '$app/navigation';
   import { page } from '$app/state';
   import { AssetVisibility, searchPerson, updatePerson, type PersonResponseDto } from '@immich/sdk';
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 31d381021..e8d706bd0 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getPerson, getPersonStatistics } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
index fe38803e4..31eb2f1c2 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/FaceThumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
   import { type PersonResponseDto } from '@immich/sdk';
   import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
 
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
index 4394fa08f..879c53000 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/MergeFaceSelector.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { Route } from '#lib/route.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { Route } from '#lib/route.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { getAllPeople, getPerson, mergePeople, type PersonResponseDto } from '@immich/sdk';
   import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
   import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
index 226044421..07b94367b 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { timeBeforeShowLoadingSpinner } from '#lib/constants.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { timeBeforeShowLoadingSpinner } from '#lib/constants.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import {
     createPerson,
     getAllPeople,
diff --git a/web/src/routes/(user)/people/manage/+page.svelte b/web/src/routes/(user)/people/manage/+page.svelte
index e3da6a3f4..3fdca691b 100644
--- a/web/src/routes/(user)/people/manage/+page.svelte
+++ b/web/src/routes/(user)/people/manage/+page.svelte
@@ -3,10 +3,10 @@
   import PeopleInfiniteScroll from '../PeopleInfiniteScroll.svelte';
   import { goto } from '$app/navigation';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
-  import { ToggleVisibility } from '#lib/constants.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getPeopleThumbnailUrl } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { ToggleVisibility } from '#lib/constants.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getPeopleThumbnailUrl } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { getAllPeople, updatePeople, type PersonResponseDto } from '@immich/sdk';
   import { Button, IconButton, toastManager } from '@immich/ui';
   import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
diff --git a/web/src/routes/(user)/people/manage/+page.ts b/web/src/routes/(user)/people/manage/+page.ts
index 1aa2dee51..dcdb9c63a 100644
--- a/web/src/routes/(user)/people/manage/+page.ts
+++ b/web/src/routes/(user)/people/manage/+page.ts
@@ -1,4 +1,4 @@
-import { authenticate } from '#lib/utils/auth.js';
+import { authenticate } from '#lib/utils/auth.ts';
 import { getAllPeople } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
index 94c3db01e..6e24d03ff 100644
--- a/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
+++ b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
@@ -1,4 +1,4 @@
-import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.ts';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps } from 'svelte';
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts b/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts
index 3179cf858..d05b7e47e 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/places/+page.svelte b/web/src/routes/(user)/places/+page.svelte
index 3e29430a4..5f1a622e4 100644
--- a/web/src/routes/(user)/places/+page.svelte
+++ b/web/src/routes/(user)/places/+page.svelte
@@ -4,9 +4,9 @@
   import type { PageData } from './$types';
   import { type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import Places from './PlacesList.svelte';
-  import { placesViewSettings } from '#lib/stores/preferences.store.js';
+  import { placesViewSettings } from '#lib/stores/preferences.store.ts';
 
   interface Props {
     data: PageData;
diff --git a/web/src/routes/(user)/places/+page.ts b/web/src/routes/(user)/places/+page.ts
index 3ee8d8582..2d60d8af9 100644
--- a/web/src/routes/(user)/places/+page.ts
+++ b/web/src/routes/(user)/places/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAssetsByCity } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/places/PlacesCardGroup.svelte b/web/src/routes/(user)/places/PlacesCardGroup.svelte
index 786043af2..02af938f5 100644
--- a/web/src/routes/(user)/places/PlacesCardGroup.svelte
+++ b/web/src/routes/(user)/places/PlacesCardGroup.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Route } from '#lib/route.js';
-  import { placesViewSettings } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
-  import { type PlacesGroup, isPlacesGroupCollapsed, togglePlacesGroupCollapsing } from '#lib/utils/places-utils.js';
+  import { Route } from '#lib/route.ts';
+  import { placesViewSettings } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
+  import { type PlacesGroup, isPlacesGroupCollapsed, togglePlacesGroupCollapsing } from '#lib/utils/places-utils.ts';
   import { AssetMediaSize, type AssetResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import { mdiChevronRight } from '@mdi/js';
diff --git a/web/src/routes/(user)/places/PlacesControls.svelte b/web/src/routes/(user)/places/PlacesControls.svelte
index c208d571f..77da93e17 100644
--- a/web/src/routes/(user)/places/PlacesControls.svelte
+++ b/web/src/routes/(user)/places/PlacesControls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { PlacesGroupBy, placesViewSettings } from '#lib/stores/preferences.store.js';
-  import { collapseAllPlacesGroups, expandAllPlacesGroups } from '#lib/utils/places-utils.js';
+  import { PlacesGroupBy, placesViewSettings } from '#lib/stores/preferences.store.ts';
+  import { collapseAllPlacesGroups, expandAllPlacesGroups } from '#lib/utils/places-utils.ts';
   import { IconButton, Select } from '@immich/ui';
   import { mdiUnfoldLessHorizontal, mdiUnfoldMoreHorizontal } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/places/PlacesList.svelte b/web/src/routes/(user)/places/PlacesList.svelte
index 1c80571d0..dec579c6d 100644
--- a/web/src/routes/(user)/places/PlacesList.svelte
+++ b/web/src/routes/(user)/places/PlacesList.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { PlacesGroupBy, type PlacesViewSettings } from '#lib/stores/preferences.store.js';
-  import { normalizeSearchString } from '#lib/utils/string-utils.js';
+  import { PlacesGroupBy, type PlacesViewSettings } from '#lib/stores/preferences.store.ts';
+  import { normalizeSearchString } from '#lib/utils/string-utils.ts';
   import { type AssetResponseDto } from '@immich/sdk';
   import { mdiMapMarkerOff } from '@mdi/js';
   import { groupBy } from 'lodash-es';
   import PlacesCardGroup from './PlacesCardGroup.svelte';
 
-  import { type PlacesGroup } from '#lib/utils/places-utils.js';
+  import { type PlacesGroup } from '#lib/utils/places-utils.ts';
   import { Icon } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.svelte
index ad2341435..825bcf4bb 100644
--- a/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -15,19 +15,19 @@
   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 { AssetAction } from '#lib/constants.js';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { type OnLink, type OnUnlink } from '#lib/utils/actions.js';
-  import { openFileUploadDialog } from '#lib/utils/file-uploader.js';
+  import { AssetAction } from '#lib/constants.ts';
+  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 { getAssetBulkActions } from '#lib/services/asset.service.ts';
+  import { type OnLink, type OnUnlink } from '#lib/utils/actions.ts';
+  import { openFileUploadDialog } from '#lib/utils/file-uploader.ts';
   import { AssetVisibility, AssetOrderBy } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider } from '@immich/ui';
   import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { getStackBulkActions } from '#lib/services/stack.service.js';
+  import { getStackBulkActions } from '#lib/services/stack.service.ts';
 
   type Props = {
     data: PageData;
diff --git a/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.ts
index 371f1e36e..4efcb488c 100644
--- a/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/recently-added/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 577dbe4a6..9c7245fe5 100644
--- a/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,4 +1,4 @@
-import { loadSharedLink } from '#lib/utils/shared-links.js';
+import { loadSharedLink } from '#lib/utils/shared-links.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => loadSharedLink({ params, url })) satisfies PageLoad;
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 529f1e5a0..89badbe3b 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -16,18 +16,18 @@
   import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
   import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
   import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
-  import { QueryParameter } from '#lib/constants.js';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { searchManager } from '#lib/managers/search-manager.svelte.js';
-  import type { Viewport } from '#lib/managers/timeline-manager/types.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { lang, locale } from '#lib/stores/preferences.store.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { parseUtcDate } from '#lib/utils/date-time.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { isAlbumsRoute, isPeopleRoute } from '#lib/utils/navigation.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { QueryParameter } from '#lib/constants.ts';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { searchManager } from '#lib/managers/search-manager.svelte.ts';
+  import type { Viewport } from '#lib/managers/timeline-manager/types.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
+  import { lang, locale } from '#lib/stores/preferences.store.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { parseUtcDate } from '#lib/utils/date-time.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { isAlbumsRoute, isPeopleRoute } from '#lib/utils/navigation.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import {
     type AlbumResponseDto,
     type AssetResponseDto,
@@ -43,8 +43,8 @@
   import { mdiArrowLeft, mdiClose, mdiDotsVertical, mdiImageOffOutline, mdiSelectAll } from '@mdi/js';
   import { onMount, tick, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.ts
index ce42516cc..9a436bc9f 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 577dbe4a6..9c7245fe5 100644
--- a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,4 +1,4 @@
-import { loadSharedLink } from '#lib/utils/shared-links.js';
+import { loadSharedLink } from '#lib/utils/shared-links.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => loadSharedLink({ params, url })) satisfies PageLoad;
diff --git a/web/src/routes/(user)/shared-links/(list)/+layout.svelte b/web/src/routes/(user)/shared-links/(list)/+layout.svelte
index 52c552353..22438075a 100644
--- a/web/src/routes/(user)/shared-links/(list)/+layout.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/+layout.svelte
@@ -3,11 +3,11 @@
   import { page, type ReadonlyURLSearchParams } from '$app/state';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import SharedLinkCard from './SharedLinkCard.svelte';
-  import { type SharedLinkTab } from '#lib/constants.js';
+  import { type SharedLinkTab } from '#lib/constants.ts';
   import GroupTab from '#lib/elements/GroupTab.svelte';
-  import { Route } from '#lib/route.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAllSharedLinksQuery } from '#lib/queries/shared-link.query.js';
+  import { Route } from '#lib/route.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAllSharedLinksQuery } from '#lib/queries/shared-link.query.ts';
   import { SharedLinkType } from '@immich/sdk';
   import { Container } from '@immich/ui';
   import { type Snippet } from 'svelte';
diff --git a/web/src/routes/(user)/shared-links/(list)/+layout.ts b/web/src/routes/(user)/shared-links/(list)/+layout.ts
index 21b2087ce..be7a6a1c2 100644
--- a/web/src/routes/(user)/shared-links/(list)/+layout.ts
+++ b/web/src/routes/(user)/shared-links/(list)/+layout.ts
@@ -1,7 +1,7 @@
-import { queryClient } from '#lib/queries/client.js';
-import { getAllSharedLinksQuery } from '#lib/queries/shared-link.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { queryClient } from '#lib/queries/client.ts';
+import { getAllSharedLinksQuery } from '#lib/queries/shared-link.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/shared-links/(list)/+page.ts b/web/src/routes/(user)/shared-links/(list)/+page.ts
index fce957ab4..601b8298b 100644
--- a/web/src/routes/(user)/shared-links/(list)/+page.ts
+++ b/web/src/routes/(user)/shared-links/(list)/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts b/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
index 0ae8f17cb..c4cb36e86 100644
--- a/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
+++ b/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
@@ -1,4 +1,4 @@
-import { getAssetMediaUrl } from '#lib/utils.js';
+import { getAssetMediaUrl } from '#lib/utils.ts';
 import { render, screen } from '@testing-library/svelte';
 import { albumFactory } from '#test-data/factories/album-factory';
 import { assetFactory } from '#test-data/factories/asset-factory';
diff --git a/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
index 36ec6b084..b2aff8957 100644
--- a/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
@@ -2,7 +2,7 @@
   import AlbumCover from '#lib/components/album-page/AlbumCover.svelte';
   import AssetCover from '#lib/components/sharedlinks-page/covers/AssetCover.svelte';
   import NoCover from '#lib/components/sharedlinks-page/covers/NoCover.svelte';
-  import { getAssetMediaUrl } from '#lib/utils.js';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
   import type { SharedLinkResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte b/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
index 42a396fb7..596f6d9a7 100644
--- a/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/SharedLinkCard.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import ShareCover from './ShareCover.svelte';
-  import { Route } from '#lib/route.js';
-  import { getSharedLinkActions } from '#lib/services/shared-link.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { Route } from '#lib/route.ts';
+  import { getSharedLinkActions } from '#lib/services/shared-link.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
   import { ActionButton, ContextMenuButton, MenuItemType, Text } from '@immich/ui';
   import { DateTime, type ToRelativeUnit } from 'luxon';
diff --git a/web/src/routes/(user)/shared-links/(list)/[id]/+layout.ts b/web/src/routes/(user)/shared-links/(list)/[id]/+layout.ts
index 7aa0ce2d7..a595e6c37 100644
--- a/web/src/routes/(user)/shared-links/(list)/[id]/+layout.ts
+++ b/web/src/routes/(user)/shared-links/(list)/[id]/+layout.ts
@@ -1,9 +1,9 @@
-import { UUID_REGEX } from '#lib/constants.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getSharedLinkQuery } from '#lib/queries/shared-link.query.js';
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { UUID_REGEX } from '#lib/constants.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getSharedLinkQuery } from '#lib/queries/shared-link.query.ts';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 
diff --git a/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.svelte b/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.svelte
index 85a358f23..fe1c15b76 100644
--- a/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import SharedLinkFormFields from '#lib/components/SharedLinkFormFields.svelte';
-  import { Route } from '#lib/route.js';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getSharedLinkQuery, updateSharedLinkMutation } from '#lib/queries/shared-link.query.js';
+  import { Route } from '#lib/route.ts';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getSharedLinkQuery, updateSharedLinkMutation } from '#lib/queries/shared-link.query.ts';
   import { SharedLinkType } from '@immich/sdk';
   import { FormModal } from '@immich/ui';
   import { mdiLink } from '@mdi/js';
diff --git a/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.ts b/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.ts
index abd98c46d..0a9d87828 100644
--- a/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.ts
+++ b/web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/sharing/+page.svelte b/web/src/routes/(user)/sharing/+page.svelte
index e5bfbb21b..40005996d 100644
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@@ -4,11 +4,11 @@
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { getAllAlbumsQuery } from '#lib/queries/album.query.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { Route } from '#lib/route.js';
-  import { getAlbumsActions } from '#lib/services/album.service.js';
-  import { getSharedLinksActions } from '#lib/services/shared-link.service.js';
+  import { getAllAlbumsQuery } from '#lib/queries/album.query.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAlbumsActions } from '#lib/services/album.service.ts';
+  import { getSharedLinksActions } from '#lib/services/shared-link.service.ts';
   import {
     AlbumFilter,
     AlbumGroupBy,
@@ -16,7 +16,7 @@
     AlbumViewMode,
     SortOrder,
     type AlbumViewSettings,
-  } from '#lib/stores/preferences.store.js';
+  } from '#lib/stores/preferences.store.ts';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
diff --git a/web/src/routes/(user)/sharing/+page.ts b/web/src/routes/(user)/sharing/+page.ts
index 1f83056d8..2650cc759 100644
--- a/web/src/routes/(user)/sharing/+page.ts
+++ b/web/src/routes/(user)/sharing/+page.ts
@@ -1,7 +1,7 @@
-import { getAllAlbumsQuery } from '#lib/queries/album.query.js';
-import { queryClient } from '#lib/queries/client.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { getAllAlbumsQuery } from '#lib/queries/album.query.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { PartnerDirection, getPartners } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/sharing/sharedlinks/+page.ts b/web/src/routes/(user)/sharing/sharedlinks/+page.ts
index ff65555ab..b426ed79f 100644
--- a/web/src/routes/(user)/sharing/sharedlinks/+page.ts
+++ b/web/src/routes/(user)/sharing/sharedlinks/+page.ts
@@ -1,4 +1,4 @@
-import { Route } from '#lib/route.js';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 11273b015..f329853a2 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -19,14 +19,14 @@
   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 { AssetAction } from '#lib/constants.js';
+  import { AssetAction } from '#lib/constants.ts';
   import SkipLink from '#lib/elements/SkipLink.svelte';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { getAssetBulkActions } from '#lib/services/asset.service.js';
-  import { getTagActions } from '#lib/services/tag.service.js';
-  import { joinPaths, TreeNode } from '#lib/utils/tree-utils.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { getAssetBulkActions } from '#lib/services/asset.service.ts';
+  import { getTagActions } from '#lib/services/tag.service.ts';
+  import { joinPaths, TreeNode } from '#lib/utils/tree-utils.ts';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider, Text } from '@immich/ui';
   import { mdiDotsVertical, mdiTag, mdiTagMultiple } from '@mdi/js';
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.ts
index a4624776c..f530b61d7 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,6 +1,6 @@
-import { QueryParameter } from '#lib/constants.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { QueryParameter } from '#lib/constants.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAllTags } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index e8be43c3e..748ad2a94 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -8,15 +8,15 @@
   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 { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { getTrashActions } from '#lib/services/trash.service.js';
-  import { handlePromiseError } from '#lib/utils.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { getTrashActions } from '#lib/services/trash.service.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.ts
index 181373546..d5ea202a6 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/RestoreAction.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/RestoreAction.svelte
index 30c4b0496..9edada347 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/RestoreAction.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/RestoreAction.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import type { OnRestore } from '#lib/utils/actions.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.ts';
+  import type { OnRestore } from '#lib/utils/actions.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { restoreAssets } from '@immich/sdk';
   import { Button, toastManager } from '@immich/ui';
   import { mdiHistory } from '@mdi/js';
diff --git a/web/src/routes/(user)/user-settings/+page.svelte b/web/src/routes/(user)/user-settings/+page.svelte
index 1b925b031..395d223b8 100644
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/web/src/routes/(user)/user-settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import UserSettingsList from './UserSettingsList.svelte';
-  import { getKeyboardActions } from '#lib/services/keyboard.service.js';
+  import { getKeyboardActions } from '#lib/services/keyboard.service.ts';
   import { Container } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
diff --git a/web/src/routes/(user)/user-settings/+page.ts b/web/src/routes/(user)/user-settings/+page.ts
index 05fc9a876..1bbf2d92b 100644
--- a/web/src/routes/(user)/user-settings/+page.ts
+++ b/web/src/routes/(user)/user-settings/+page.ts
@@ -1,9 +1,9 @@
-import { getApiKeysQuery } from '#lib/queries/api-key.query.js';
-import { queryClient } from '#lib/queries/client.js';
-import { searchPasskeysQuery } from '#lib/queries/passkey.query.js';
-import { getSessionsQuery } from '#lib/queries/session.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { getApiKeysQuery } from '#lib/queries/api-key.query.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { searchPasskeysQuery } from '#lib/queries/passkey.query.ts';
+import { getSessionsQuery } from '#lib/queries/session.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/user-settings/AppSettings.svelte b/web/src/routes/(user)/user-settings/AppSettings.svelte
index b70d9902d..fce270dbb 100644
--- a/web/src/routes/(user)/user-settings/AppSettings.svelte
+++ b/web/src/routes/(user)/user-settings/AppSettings.svelte
@@ -2,7 +2,7 @@
   import type { ComboBoxOption } from '#lib/components/shared-components/Combobox.svelte';
   import SettingCombobox from './SettingCombobox.svelte';
   import SettingsLanguageSelector from '#lib/components/shared-components/settings/SettingsLanguageSelector.svelte';
-  import { fallbackLocale, locales } from '#lib/constants.js';
+  import { fallbackLocale, locales } from '#lib/constants.ts';
   import {
     alwaysLoadOriginalFile,
     alwaysLoadOriginalVideo,
@@ -11,8 +11,8 @@
     loopVideo,
     playVideoThumbnailOnHover,
     showDeleteModal,
-  } from '#lib/stores/preferences.store.js';
-  import { createDateFormatter, findLocale } from '#lib/utils.js';
+  } from '#lib/stores/preferences.store.ts';
+  import { createDateFormatter, findLocale } from '#lib/utils.ts';
   import { Field, Switch, Text, Theme, themeManager, ThemePreference } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte b/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
index b018a9743..f6ad7f407 100644
--- a/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
+++ b/web/src/routes/(user)/user-settings/ChangePasswordSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { handleChangePassword } from '#lib/services/user.service.js';
+  import { handleChangePassword } from '#lib/services/user.service.ts';
   import { Button, Field, PasswordInput, Switch } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/(user)/user-settings/DeviceList.svelte b/web/src/routes/(user)/user-settings/DeviceList.svelte
index b06e08c08..aa4d39b19 100644
--- a/web/src/routes/(user)/user-settings/DeviceList.svelte
+++ b/web/src/routes/(user)/user-settings/DeviceList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { deleteAllSessionsMutation, deleteSessionMutation, getSessionsQuery } from '#lib/queries/session.query.js';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { deleteAllSessionsMutation, deleteSessionMutation, getSessionsQuery } from '#lib/queries/session.query.ts';
   import { type SessionResponseDto } from '@immich/sdk';
   import { Button, modalManager, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/user-settings/DownloadSettings.svelte b/web/src/routes/(user)/user-settings/DownloadSettings.svelte
index e6105da4a..ec774091d 100644
--- a/web/src/routes/(user)/user-settings/DownloadSettings.svelte
+++ b/web/src/routes/(user)/user-settings/DownloadSettings.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { ByteUnit, convertFromBytes, convertToBytes } from '#lib/utils/byte-units.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { ByteUnit, convertFromBytes, convertToBytes } from '#lib/utils/byte-units.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateMyPreferences } from '@immich/sdk';
   import { Button, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/user-settings/FeatureSettings.svelte b/web/src/routes/(user)/user-settings/FeatureSettings.svelte
index 31c092eb8..eecc6e283 100644
--- a/web/src/routes/(user)/user-settings/FeatureSettings.svelte
+++ b/web/src/routes/(user)/user-settings/FeatureSettings.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { AssetOrder, PersonUpdateStrategy, updateMyPreferences } from '@immich/sdk';
   import { Button, Field, NumberInput, Select, Switch, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/routes/(user)/user-settings/NotificationsSettings.svelte b/web/src/routes/(user)/user-settings/NotificationsSettings.svelte
index 06b20b0df..7d22acb04 100644
--- a/web/src/routes/(user)/user-settings/NotificationsSettings.svelte
+++ b/web/src/routes/(user)/user-settings/NotificationsSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateMyPreferences } from '@immich/sdk';
   import { Button, Field, Switch, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/user-settings/OAuthSettings.svelte b/web/src/routes/(user)/user-settings/OAuthSettings.svelte
index d930a28f5..28edf2957 100644
--- a/web/src/routes/(user)/user-settings/OAuthSettings.svelte
+++ b/web/src/routes/(user)/user-settings/OAuthSettings.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { oauth } from '#lib/utils.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { oauth } from '#lib/utils.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { Button, LoadingSpinner, toastManager } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte b/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte
index c787d196d..fcbe912b3 100644
--- a/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte
+++ b/web/src/routes/(user)/user-settings/PinCodeChangeForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import PinCodeResetModal from '#lib/modals/PinCodeResetModal.svelte';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { changePinCode } from '@immich/sdk';
   import { Button, Field, Heading, modalManager, PinInput, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/(user)/user-settings/SharingSettings.svelte b/web/src/routes/(user)/user-settings/SharingSettings.svelte
index 36e2b04a8..72a0dd42d 100644
--- a/web/src/routes/(user)/user-settings/SharingSettings.svelte
+++ b/web/src/routes/(user)/user-settings/SharingSettings.svelte
@@ -2,12 +2,12 @@
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import ClusterGroupUserSelectionModal from '#lib/modals/ClusterGroupUserSelectionModal.svelte';
   import ClusterGroupUsersModal from '#lib/modals/ClusterGroupUsersModal.svelte';
   import PartnerSelectionModal from '#lib/modals/PartnerSelectionModal.svelte';
-  import { getPeopleUserActions } from '#lib/services/person-user.service.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { getPeopleUserActions } from '#lib/services/person-user.service.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import {
     acceptClusterGroupRequest,
     clusterGroupRegeneratePeople,
diff --git a/web/src/routes/(user)/user-settings/UserApiKeyList.svelte b/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
index 306c8f4cf..fd4274c06 100644
--- a/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
+++ b/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import TableButton from '#lib/components/TableButton.svelte';
-  import { dateFormats } from '#lib/constants.js';
-  import { getApiKeysQuery } from '#lib/queries/api-key.query.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getApiKeyActions, getApiKeysActions } from '#lib/services/api-key.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { dateFormats } from '#lib/constants.ts';
+  import { getApiKeysQuery } from '#lib/queries/api-key.query.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getApiKeyActions, getApiKeysActions } from '#lib/services/api-key.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { Button, Table, TableBody, TableCell, TableHeader, TableHeading, TableRow, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/(user)/user-settings/UserPasskeyList.svelte b/web/src/routes/(user)/user-settings/UserPasskeyList.svelte
index e377fa5fb..db57f5bef 100644
--- a/web/src/routes/(user)/user-settings/UserPasskeyList.svelte
+++ b/web/src/routes/(user)/user-settings/UserPasskeyList.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import TableButton from '#lib/components/TableButton.svelte';
-  import { dateFormats } from '#lib/constants.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { searchPasskeysQuery } from '#lib/queries/passkey.query.js';
-  import { getPasskeyActions, getPasskeysActions } from '#lib/services/passkey.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { dateFormats } from '#lib/constants.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { searchPasskeysQuery } from '#lib/queries/passkey.query.ts';
+  import { getPasskeyActions, getPasskeysActions } from '#lib/services/passkey.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { Button, Table, TableBody, TableCell, TableHeader, TableHeading, TableRow } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/(user)/user-settings/UserProfileSettings.svelte b/web/src/routes/(user)/user-settings/UserProfileSettings.svelte
index ee4b4200c..cfe76fcb0 100644
--- a/web/src/routes/(user)/user-settings/UserProfileSettings.svelte
+++ b/web/src/routes/(user)/user-settings/UserProfileSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateMyUser } from '@immich/sdk';
   import { Button, Field, Input, toastManager } from '@immich/ui';
   import { cloneDeep } from 'lodash-es';
diff --git a/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte b/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
index 5d7134773..37989eb0d 100644
--- a/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
+++ b/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
@@ -3,13 +3,13 @@
 
   import PurchaseContent from '#lib/components/shared-components/purchasing/PurchaseContent.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { dateFormats } from '#lib/constants.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { getAboutInfoQuery } from '#lib/queries/server-info.query.js';
-  import { queryClient } from '#lib/queries/client.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { handleError } from '#lib/utils/handle-error.js';
-  import { setSupportBadgeVisibility } from '#lib/utils/purchase-utils.js';
+  import { dateFormats } from '#lib/constants.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { getAboutInfoQuery } from '#lib/queries/server-info.query.ts';
+  import { queryClient } from '#lib/queries/client.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
+  import { setSupportBadgeVisibility } from '#lib/utils/purchase-utils.ts';
   import {
     deleteUserLicense as deleteIndividualProductKey,
     deleteServerLicense as deleteServerProductKey,
diff --git a/web/src/routes/(user)/user-settings/UserSettingsList.svelte b/web/src/routes/(user)/user-settings/UserSettingsList.svelte
index d18f52ed7..070a5c204 100644
--- a/web/src/routes/(user)/user-settings/UserSettingsList.svelte
+++ b/web/src/routes/(user)/user-settings/UserSettingsList.svelte
@@ -6,8 +6,8 @@
   import NotificationsSettings from './NotificationsSettings.svelte';
   import UserPurchaseSettings from './UserPurchaseSettings.svelte';
   import UserUsageStatistic from './UserUsageStatistic.svelte';
-  import { OpenQueryParam, QueryParameter } from '#lib/constants.js';
-  import { oauth } from '#lib/utils.js';
+  import { OpenQueryParam, QueryParameter } from '#lib/constants.ts';
+  import { oauth } from '#lib/utils.ts';
   import {
     mdiAccountGroupOutline,
     mdiAccountOutline,
@@ -35,8 +35,8 @@
   import UserApiKeyList from './UserApiKeyList.svelte';
   import UserPasskeyList from './UserPasskeyList.svelte';
   import UserProfileSettings from './UserProfileSettings.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte b/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
index ec1a71085..de9888317 100644
--- a/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
+++ b/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
@@ -2,8 +2,8 @@
   import { getHeatmapRange } from '#lib';
   import CalendarHeatmap from '#lib/components/CalendarHeatmap.svelte';
   import Skeleton from '#lib/elements/Skeleton.svelte';
-  import { getAlbumStatisticsQuery } from '#lib/queries/album.query.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { getAlbumStatisticsQuery } from '#lib/queries/album.query.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import {
     AssetVisibility,
     CalendarHeatmapType,
diff --git a/web/src/routes/(user)/utilities/+page.ts b/web/src/routes/(user)/utilities/+page.ts
index b3b9fcd65..a71412a37 100644
--- a/web/src/routes/(user)/utilities/+page.ts
+++ b/web/src/routes/(user)/utilities/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/utilities/UtilitiesMenu.svelte b/web/src/routes/(user)/utilities/UtilitiesMenu.svelte
index f61621c69..2cfbcfe43 100644
--- a/web/src/routes/(user)/utilities/UtilitiesMenu.svelte
+++ b/web/src/routes/(user)/utilities/UtilitiesMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AppDownloadModal from '#lib/modals/AppDownloadModal.svelte';
   import ObtainiumConfigModal from '#lib/modals/ObtainiumConfigModal.svelte';
-  import { Route } from '#lib/route.js';
+  import { Route } from '#lib/route.ts';
   import { Icon, modalManager, Text } from '@immich/ui';
   import {
     mdiCellphoneArrowDownVariant,
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index abbc5254e..8e61a2131 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import LinkToDocs from './LinkToDocs.svelte';
   import DuplicatesCompareControl from './DuplicatesCompareControl.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
   import ShortcutsModal from '#lib/modals/ShortcutsModal.svelte';
-  import { Route } from '#lib/route.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { Route } from '#lib/route.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import type { AssetResponseDto } from '@immich/sdk';
   import { createStack, deleteDuplicates, resolveDuplicates, updateAssets } from '@immich/sdk';
   import { Button, HStack, IconButton, modalManager, Text, toastManager } from '@immich/ui';
@@ -25,8 +25,8 @@
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  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);
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.ts
index 2b99a6c2a..b045e5134 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAssetDuplicates } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
index 05cb84050..4cd21dbe5 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { lang, locale } from '#lib/stores/preferences.store.js';
-  import { getAssetMediaUrl } from '#lib/utils.js';
-  import { getAllMetadataItems, type DifferingMetadataFields } from '#lib/utils/duplicate-utils.js';
-  import { getAltText } from '#lib/utils/thumbnail-util.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
-  import { getAlbumsByAssetQuery } from '#lib/queries/album.query.js';
+  import { lang, locale } from '#lib/stores/preferences.store.ts';
+  import { getAssetMediaUrl } from '#lib/utils.ts';
+  import { getAllMetadataItems, type DifferingMetadataFields } from '#lib/utils/duplicate-utils.ts';
+  import { getAltText } from '#lib/utils/thumbnail-util.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
+  import { getAlbumsByAssetQuery } from '#lib/queries/album.query.ts';
   import { type AssetResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import { mdiBookmarkOutline, mdiHeart, mdiImageMultipleOutline, mdiMagnifyPlus } from '@mdi/js';
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
index 4d397f298..2c2dee827 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { shortcuts } from '#lib/actions/shortcut.ts';
   import DuplicateAsset from './DuplicateAsset.svelte';
   import Portal from '#lib/elements/Portal.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { getNextAsset, getPreviousAsset } from '#lib/utils/asset-utils.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { getNextAsset, getPreviousAsset } from '#lib/utils/asset-utils.ts';
   import {
     computeDifferingMetadataFields,
     countDifferingMetadataItems,
     type DifferingMetadataFields,
-  } from '#lib/utils/duplicate-utils.js';
-  import { navigate } from '#lib/utils/navigation.js';
+  } from '#lib/utils/duplicate-utils.ts';
+  import { navigate } from '#lib/utils/navigation.ts';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
   import { Button, Icon } from '@immich/ui';
   import { mdiCheck, mdiChevronDown, mdiChevronUp, mdiImageMultipleOutline, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index 73c401bf4..6ac233fe7 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -3,18 +3,18 @@
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
   import Timeline from '#lib/components/timeline/Timeline.svelte';
-  import { AssetAction } from '#lib/constants.js';
-  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import type { TimelineDay } from '#lib/managers/timeline-manager/timeline-day.svelte.js';
-  import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
-  import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+  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';
+  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 { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
   import GeolocationPointPickerModal from '#lib/modals/GeolocationPointPickerModal.svelte';
   import GeolocationUpdateConfirmModal from '#lib/modals/GeolocationUpdateConfirmModal.svelte';
-  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.js';
-  import type { LatLng } from '#lib/types.js';
-  import { setQueryValue } from '#lib/utils/navigation.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { keyboardManager } from '#lib/stores/keyboard-manager.svelte.ts';
+  import type { LatLng } from '#lib/types.ts';
+  import { setQueryValue } from '#lib/utils/navigation.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { AssetVisibility, getAssetInfo, updateAssets } from '@immich/sdk';
   import { Button, LoadingSpinner, modalManager, Text } from '@immich/ui';
   import { mdiMapMarkerMultipleOutline, mdiPencilOutline, mdiSelectRemove } from '@mdi/js';
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.ts b/web/src/routes/(user)/utilities/geolocation/+page.ts
index f895f13ca..a68871154 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.ts
+++ b/web/src/routes/(user)/utilities/geolocation/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/utilities/geolocation/photos/[photoId]/+page.ts b/web/src/routes/(user)/utilities/geolocation/photos/[photoId]/+page.ts
index 320cdff4f..d0aed1842 100644
--- a/web/src/routes/(user)/utilities/geolocation/photos/[photoId]/+page.ts
+++ b/web/src/routes/(user)/utilities/geolocation/photos/[photoId]/+page.ts
@@ -1,4 +1,4 @@
-import { Route } from '#lib/route.js';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
index faa0cac33..89bd0e46e 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.ts';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
   import LargeAssetData from './LargeAssetData.svelte';
   import Portal from '#lib/elements/Portal.svelte';
-  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
-  import { handlePromiseError } from '#lib/utils.js';
-  import { getNextAsset, getPreviousAsset, navigateToAsset } from '#lib/utils/asset-utils.js';
-  import { navigate } from '#lib/utils/navigation.js';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.ts';
+  import { handlePromiseError } from '#lib/utils.ts';
+  import { getNextAsset, getPreviousAsset, navigateToAsset } from '#lib/utils/asset-utils.ts';
+  import { navigate } from '#lib/utils/navigation.ts';
   import type { AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.ts
index 3e2067230..a26039aaa 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.ts
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { searchLargeAssets } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
index a74a186af..167e7f0c6 100644
--- a/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
+++ b/web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/LargeAssetData.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Thumbnail from '#lib/components/assets/thumbnail/Thumbnail.svelte';
-  import { getFileSize } from '#lib/utils/asset-utils.js';
-  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { getFileSize } from '#lib/utils/asset-utils.ts';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.ts';
   import { type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/routes/(user)/workflows/+page.svelte b/web/src/routes/(user)/workflows/+page.svelte
index c09289d0b..1a1630ee9 100644
--- a/web/src/routes/(user)/workflows/+page.svelte
+++ b/web/src/routes/(user)/workflows/+page.svelte
@@ -2,14 +2,14 @@
   import emptyWorkflows from '#lib/assets/empty-workflows.svg';
   import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
-  import { createPreloadedQuery, queryClient } from '#lib/queries/client.js';
-  import { getWorkflowForShareQuery, searchWorkflowsQuery } from '#lib/queries/workflow.query.js';
-  import { Route } from '#lib/route.js';
+  import { createPreloadedQuery, queryClient } from '#lib/queries/client.ts';
+  import { getWorkflowForShareQuery, searchWorkflowsQuery } from '#lib/queries/workflow.query.ts';
+  import { Route } from '#lib/route.ts';
   import {
     getWorkflowActions,
     getWorkflowsActions,
     getWorkflowShowSchemaAction,
-  } from '#lib/services/workflow.service.js';
+  } from '#lib/services/workflow.service.ts';
   import {
     Badge,
     Button,
diff --git a/web/src/routes/(user)/workflows/+page.ts b/web/src/routes/(user)/workflows/+page.ts
index c8732eb41..be28c9afb 100644
--- a/web/src/routes/(user)/workflows/+page.ts
+++ b/web/src/routes/(user)/workflows/+page.ts
@@ -1,8 +1,8 @@
-import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { searchWorkflowsQuery } from '#lib/queries/workflow.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { searchWorkflowsQuery } from '#lib/queries/workflow.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/workflows/[workflowId]/+page.svelte b/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
index 3c874df32..982435126 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
@@ -3,12 +3,12 @@
   import WorkflowAddStepModal from '#lib/modals/WorkflowAddStepModal.svelte';
   import WorkflowEditStepModal from '#lib/modals/WorkflowEditStepModal.svelte';
   import WorkflowTriggerPicker from '#lib/modals/WorkflowTriggerPicker.svelte';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getWorkflowQuery, updateWorkflowMutation } from '#lib/queries/workflow.query.js';
-  import { Route } from '#lib/route.js';
-  import { getWorkflowActions } from '#lib/services/workflow.service.js';
-  import { generateId } from '#lib/utils/generate-id.js';
-  import { getTriggerDescription, getTriggerName } from '#lib/utils/workflow.js';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getWorkflowQuery, updateWorkflowMutation } from '#lib/queries/workflow.query.ts';
+  import { Route } from '#lib/route.ts';
+  import { getWorkflowActions } from '#lib/services/workflow.service.ts';
+  import { generateId } from '#lib/utils/generate-id.ts';
+  import { getTriggerDescription, getTriggerName } from '#lib/utils/workflow.ts';
   import type { WorkflowUpdateDto } from '@immich/sdk';
   import {
     ActionBar,
diff --git a/web/src/routes/(user)/workflows/[workflowId]/+page.ts b/web/src/routes/(user)/workflows/[workflowId]/+page.ts
index b58c2b09e..622318a73 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/+page.ts
+++ b/web/src/routes/(user)/workflows/[workflowId]/+page.ts
@@ -1,9 +1,9 @@
-import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getWorkflowQuery } from '#lib/queries/workflow.query.js';
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getWorkflowQuery } from '#lib/queries/workflow.query.ts';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
index 96b158e58..06060395b 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
-  import type { JSONSchemaProperty } from '#lib/types.js';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
+  import type { JSONSchemaProperty } from '#lib/types.ts';
   import { type WorkflowStepDto } from '@immich/sdk';
   import { Badge, Card, CardBody, CardDescription, CardHeader, CardTitle, Icon, IconButton } from '@immich/ui';
   import { getTagById } from '@immich/sdk';
-  import { getAlbumQuery } from '#lib/queries/album.query.js';
-  import { queryClient } from '#lib/queries/client.js';
+  import { getAlbumQuery } from '#lib/queries/album.query.ts';
+  import { queryClient } from '#lib/queries/client.ts';
   import {
     mdiAutoFix,
     mdiDragVertical,
diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
index 353a2d47c..52ddb4e5c 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
-  import { getTriggerName } from '#lib/utils/workflow.js';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.ts';
+  import { getTriggerName } from '#lib/utils/workflow.ts';
   import type { WorkflowStepDto, WorkflowTrigger } from '@immich/sdk';
   import { Icon, IconButton, shortcut, Text } from '@immich/ui';
   import { mdiCheck, mdiClose, mdiContentCopy, mdiViewDashboardOutline } from '@mdi/js';
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 5a8c32a92..23c31f017 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
-  import { getPagesProvider, getSettingsProvider } from '#lib/commands.js';
+  import { getPagesProvider, getSettingsProvider } from '#lib/commands.ts';
   import DownloadPanel from './DownloadPanel.svelte';
   import ErrorLayout from './ErrorLayout.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
   import NavigationLoadingBar from './NavigationLoadingBar.svelte';
   import UploadPanel from './UploadPanel.svelte';
   import VersionAnnouncement from './VersionAnnouncement.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { eventManager } from '#lib/managers/event-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { eventManager } from '#lib/managers/event-manager.svelte.ts';
   import ServerRestartingModal from '#lib/modals/ServerRestartingModal.svelte';
-  import { queryClient } from '#lib/queries/client.js';
-  import { Route } from '#lib/route.js';
-  import { lang, locale } from '#lib/stores/preferences.store.js';
-  import { sidebarStore } from '#lib/stores/sidebar.svelte.js';
-  import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '#lib/stores/websocket.js';
-  import { maintenanceShouldRedirect } from '#lib/utils/maintenance.js';
+  import { queryClient } from '#lib/queries/client.ts';
+  import { Route } from '#lib/route.ts';
+  import { lang, locale } from '#lib/stores/preferences.store.ts';
+  import { sidebarStore } from '#lib/stores/sidebar.svelte.ts';
+  import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '#lib/stores/websocket.ts';
+  import { maintenanceShouldRedirect } from '#lib/utils/maintenance.ts';
   import { getServerConfig } from '@immich/sdk';
   import {
     CommandPaletteProvider,
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index 417f59018..2438fbb6d 100644
--- a/web/src/routes/+layout.ts
+++ b/web/src/routes/+layout.ts
@@ -1,8 +1,8 @@
-import { languageManager } from '#lib/managers/language-manager.svelte.js';
-import { readPreloadedQuery } from '#lib/queries/client.js';
-import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-import { init } from '#lib/utils/client.js';
-import { maintenanceCreateUrl, maintenanceReturnUrl, maintenanceShouldRedirect } from '#lib/utils/maintenance.js';
+import { languageManager } from '#lib/managers/language-manager.svelte.ts';
+import { readPreloadedQuery } from '#lib/queries/client.ts';
+import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+import { init } from '#lib/utils/client.ts';
+import { maintenanceCreateUrl, maintenanceReturnUrl, maintenanceShouldRedirect } from '#lib/utils/maintenance.ts';
 import { commandPaletteManager } from '@immich/ui';
 import { goto } from '$app/navigation';
 import type { LayoutLoad } from './$types';
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index ab17debd9..b4d5b8702 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import AuthPageLayout from '#lib/components/layouts/AuthPageLayout.svelte';
-  import { Route } from '#lib/route.js';
-  import { websocketStore } from '#lib/stores/websocket.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { Route } from '#lib/route.ts';
+  import { websocketStore } from '#lib/stores/websocket.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { startDatabaseRestoreFlow } from '@immich/sdk';
   import { Button, Heading, Stack } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts
index a4640d98a..10d403c3e 100644
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -1,9 +1,9 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { readPreloadedQuery } from '#lib/queries/client.js';
-import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-import { Route } from '#lib/route.js';
-import { init } from '#lib/utils/client.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { readPreloadedQuery } from '#lib/queries/client.ts';
+import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+import { Route } from '#lib/route.ts';
+import { init } from '#lib/utils/client.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/DownloadPanel.svelte b/web/src/routes/DownloadPanel.svelte
index 52f442453..c2f4288ca 100644
--- a/web/src/routes/DownloadPanel.svelte
+++ b/web/src/routes/DownloadPanel.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { type DownloadState, downloadManager } from '#lib/managers/download-manager.svelte.js';
-  import { locale } from '#lib/stores/preferences.store.js';
+  import { type DownloadState, downloadManager } from '#lib/managers/download-manager.svelte.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
   import { CloseButton, Heading, IconButton } from '@immich/ui';
   import { mdiReload, mdiDownload } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fly, slide } from 'svelte/transition';
-  import { getByteUnitString } from '#lib/utils/byte-units.js';
-  import { downloadUrlPost } from '#lib/utils.js';
+  import { getByteUnitString } from '#lib/utils/byte-units.ts';
+  import { downloadUrlPost } from '#lib/utils.ts';
 
   const startDownload = (downloadKey: string, download: DownloadState) => {
     downloadUrlPost(download.url, download.assetIds, download.archiveName);
diff --git a/web/src/routes/ErrorLayout.svelte b/web/src/routes/ErrorLayout.svelte
index 0e4f64b6f..a70121017 100644
--- a/web/src/routes/ErrorLayout.svelte
+++ b/web/src/routes/ErrorLayout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { copyToClipboard } from '#lib/utils.js';
+  import { copyToClipboard } from '#lib/utils.ts';
   import {
     Card,
     CardBody,
diff --git a/web/src/routes/UploadAssetPreview.svelte b/web/src/routes/UploadAssetPreview.svelte
index 3f160239d..9802dad6f 100644
--- a/web/src/routes/UploadAssetPreview.svelte
+++ b/web/src/routes/UploadAssetPreview.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { Route } from '#lib/route.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { uploadAssetsStore } from '#lib/stores/upload.js';
-  import type { UploadAsset } from '#lib/types.js';
-  import { UploadState } from '#lib/types.js';
-  import { getByteUnitString } from '#lib/utils/byte-units.js';
-  import { fileUploadHandler } from '#lib/utils/file-uploader.js';
+  import { Route } from '#lib/route.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { uploadAssetsStore } from '#lib/stores/upload.ts';
+  import type { UploadAsset } from '#lib/types.ts';
+  import { UploadState } from '#lib/types.ts';
+  import { getByteUnitString } from '#lib/utils/byte-units.ts';
+  import { fileUploadHandler } from '#lib/utils/file-uploader.ts';
   import { Icon } from '@immich/ui';
   import {
     mdiAlertCircle,
diff --git a/web/src/routes/UploadPanel.svelte b/web/src/routes/UploadPanel.svelte
index d658d1d16..0b6dd9d93 100644
--- a/web/src/routes/UploadPanel.svelte
+++ b/web/src/routes/UploadPanel.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { uploadAssetsStore } from '#lib/stores/upload.js';
-  import { uploadExecutionQueue } from '#lib/utils/file-uploader.js';
-  import { acquireWakeLock, releaseWakeLock } from '#lib/utils/wakelock.svelte.js';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { uploadAssetsStore } from '#lib/stores/upload.ts';
+  import { uploadExecutionQueue } from '#lib/utils/file-uploader.ts';
+  import { acquireWakeLock, releaseWakeLock } from '#lib/utils/wakelock.svelte.ts';
   import { Icon, IconButton, toastManager } from '@immich/ui';
   import { mdiCancel, mdiCloudUploadOutline, mdiCog, mdiWindowMinimize } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/VersionAnnouncement.svelte b/web/src/routes/VersionAnnouncement.svelte
index 0c1ba7c94..91506650d 100644
--- a/web/src/routes/VersionAnnouncement.svelte
+++ b/web/src/routes/VersionAnnouncement.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import VersionAnnouncementModal from '#lib/modals/VersionAnnouncementModal.svelte';
-  import { semverToName } from '#lib/utils.js';
+  import { semverToName } from '#lib/utils.ts';
   import { ReleaseType, type ReleaseEventV1 } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
 
diff --git a/web/src/routes/admin/+layout.ts b/web/src/routes/admin/+layout.ts
index b6ea99851..16b135efb 100644
--- a/web/src/routes/admin/+layout.ts
+++ b/web/src/routes/admin/+layout.ts
@@ -1,4 +1,4 @@
-import { authenticate } from '#lib/utils/auth.js';
+import { authenticate } from '#lib/utils/auth.ts';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/+page.ts b/web/src/routes/admin/+page.ts
index b29326beb..e4c3f7d72 100644
--- a/web/src/routes/admin/+page.ts
+++ b/web/src/routes/admin/+page.ts
@@ -1,4 +1,4 @@
-import { Route } from '#lib/route.js';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/admin/jobs-status/+page.ts b/web/src/routes/admin/jobs-status/+page.ts
index 0b8b018a1..6ea091436 100644
--- a/web/src/routes/admin/jobs-status/+page.ts
+++ b/web/src/routes/admin/jobs-status/+page.ts
@@ -1,4 +1,4 @@
-import { Route } from '#lib/route.js';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/admin/library-management/(list)/+layout.svelte b/web/src/routes/admin/library-management/(list)/+layout.svelte
index c3384d5f5..80d4b7180 100644
--- a/web/src/routes/admin/library-management/(list)/+layout.svelte
+++ b/web/src/routes/admin/library-management/(list)/+layout.svelte
@@ -2,11 +2,11 @@
   import { goto } from '$app/navigation';
   import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
   import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
-  import { libraryTableClasses } from '#lib/constants.js';
-  import { Route } from '#lib/route.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAllLibrariesQuery } from '#lib/queries/library.query.js';
-  import { getLibrariesActions } from '#lib/services/library.service.js';
+  import { libraryTableClasses } from '#lib/constants.ts';
+  import { Route } from '#lib/route.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAllLibrariesQuery } from '#lib/queries/library.query.ts';
+  import { getLibrariesActions } from '#lib/services/library.service.ts';
   import { CommandPaletteDefaultProvider, Container, Table, TableBody, TableHeader, TableHeading } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/admin/library-management/(list)/+layout.ts b/web/src/routes/admin/library-management/(list)/+layout.ts
index 967053788..88895aa13 100644
--- a/web/src/routes/admin/library-management/(list)/+layout.ts
+++ b/web/src/routes/admin/library-management/(list)/+layout.ts
@@ -1,8 +1,8 @@
-import { queryClient } from '#lib/queries/client.js';
-import { getAllLibrariesQuery } from '#lib/queries/library.query.js';
-import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { queryClient } from '#lib/queries/client.ts';
+import { getAllLibrariesQuery } from '#lib/queries/library.query.ts';
+import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/library-management/(list)/LibraryTableRow.svelte b/web/src/routes/admin/library-management/(list)/LibraryTableRow.svelte
index ab1243efb..9a204153e 100644
--- a/web/src/routes/admin/library-management/(list)/LibraryTableRow.svelte
+++ b/web/src/routes/admin/library-management/(list)/LibraryTableRow.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { libraryTableClasses } from '#lib/constants.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getLibraryStatisticsQuery } from '#lib/queries/library.query.js';
-  import { getUserAdminQuery } from '#lib/queries/user-admin.query.js';
-  import { Route } from '#lib/route.js';
-  import { getLibraryActions } from '#lib/services/library.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getBytesWithUnit } from '#lib/utils/byte-units.js';
+  import { libraryTableClasses } from '#lib/constants.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getLibraryStatisticsQuery } from '#lib/queries/library.query.ts';
+  import { getUserAdminQuery } from '#lib/queries/user-admin.query.ts';
+  import { Route } from '#lib/route.ts';
+  import { getLibraryActions } from '#lib/services/library.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getBytesWithUnit } from '#lib/utils/byte-units.ts';
   import type { LibraryResponseDto } from '@immich/sdk';
   import { ContextMenuButton, Link, MenuItemType, TableCell, TableRow } from '@immich/ui';
   import { createQuery } from '@tanstack/svelte-query';
diff --git a/web/src/routes/admin/library-management/(list)/new/+page.svelte b/web/src/routes/admin/library-management/(list)/new/+page.svelte
index 828f2a757..484834c28 100644
--- a/web/src/routes/admin/library-management/(list)/new/+page.svelte
+++ b/web/src/routes/admin/library-management/(list)/new/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { createLibraryMutation } from '#lib/queries/library.query.js';
-  import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.js';
-  import { Route } from '#lib/route.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { createLibraryMutation } from '#lib/queries/library.query.ts';
+  import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.ts';
+  import { Route } from '#lib/route.ts';
   import { Field, FormModal, HelperText, Select } from '@immich/ui';
   import { mdiFolderSync } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/admin/library-management/(list)/new/+page.ts b/web/src/routes/admin/library-management/(list)/new/+page.ts
index 70f7f3c7e..85de388e9 100644
--- a/web/src/routes/admin/library-management/(list)/new/+page.ts
+++ b/web/src/routes/admin/library-management/(list)/new/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/library-management/[id]/+layout.svelte b/web/src/routes/admin/library-management/[id]/+layout.svelte
index 205455481..3e54f1fec 100644
--- a/web/src/routes/admin/library-management/[id]/+layout.svelte
+++ b/web/src/routes/admin/library-management/[id]/+layout.svelte
@@ -6,15 +6,15 @@
   import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
   import TableButton from '#lib/components/TableButton.svelte';
   import LibraryFolderAddModal from '#lib/modals/LibraryFolderAddModal.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getLibraryQuery, getLibraryStatisticsQuery } from '#lib/queries/library.query.js';
-  import { Route } from '#lib/route.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getLibraryQuery, getLibraryStatisticsQuery } from '#lib/queries/library.query.ts';
+  import { Route } from '#lib/route.ts';
   import {
     getLibraryActions,
     getLibraryExclusionPatternActions,
     getLibraryFolderActions,
-  } from '#lib/services/library.service.js';
-  import { getBytesWithUnit } from '#lib/utils/byte-units.js';
+  } from '#lib/services/library.service.ts';
+  import { getBytesWithUnit } from '#lib/utils/byte-units.ts';
   import { Code, CommandPaletteDefaultProvider, Container, Heading, modalManager } from '@immich/ui';
   import { createQuery } from '@tanstack/svelte-query';
   import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
diff --git a/web/src/routes/admin/library-management/[id]/+layout.ts b/web/src/routes/admin/library-management/[id]/+layout.ts
index 37e688bcc..38a8a7d36 100644
--- a/web/src/routes/admin/library-management/[id]/+layout.ts
+++ b/web/src/routes/admin/library-management/[id]/+layout.ts
@@ -1,8 +1,8 @@
-import { queryClient } from '#lib/queries/client.js';
-import { getLibraryQuery } from '#lib/queries/library.query.js';
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { queryClient } from '#lib/queries/client.ts';
+import { getLibraryQuery } from '#lib/queries/library.query.ts';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 
diff --git a/web/src/routes/admin/library-management/[id]/+page.ts b/web/src/routes/admin/library-management/[id]/+page.ts
index 7a5081de0..d8e553da0 100644
--- a/web/src/routes/admin/library-management/[id]/+page.ts
+++ b/web/src/routes/admin/library-management/[id]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/library-management/[id]/edit/+page.svelte b/web/src/routes/admin/library-management/[id]/edit/+page.svelte
index db47c1b01..f923ae0c5 100644
--- a/web/src/routes/admin/library-management/[id]/edit/+page.svelte
+++ b/web/src/routes/admin/library-management/[id]/edit/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getLibraryQuery, updateLibraryMutation } from '#lib/queries/library.query.js';
-  import { Route } from '#lib/route.js';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getLibraryQuery, updateLibraryMutation } from '#lib/queries/library.query.ts';
+  import { Route } from '#lib/route.ts';
   import { Field, FormModal, Input } from '@immich/ui';
   import { mdiRenameOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/admin/library-management/[id]/edit/+page.ts b/web/src/routes/admin/library-management/[id]/edit/+page.ts
index 7a5081de0..d8e553da0 100644
--- a/web/src/routes/admin/library-management/[id]/edit/+page.ts
+++ b/web/src/routes/admin/library-management/[id]/edit/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/maintenance/+page.svelte b/web/src/routes/admin/maintenance/+page.svelte
index 7aa066b9f..9eef0092b 100644
--- a/web/src/routes/admin/maintenance/+page.svelte
+++ b/web/src/routes/admin/maintenance/+page.svelte
@@ -4,9 +4,9 @@
   import OnEvents from '#lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '#lib/components/server-statistics/ServerStatisticsCard.svelte';
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
-  import { Route } from '#lib/route.js';
-  import { handleCreateJob } from '#lib/services/job.service.js';
-  import { getMaintenanceAdminActions } from '#lib/services/maintenance.service.js';
+  import { Route } from '#lib/route.ts';
+  import { handleCreateJob } from '#lib/services/job.service.ts';
+  import { getMaintenanceAdminActions } from '#lib/services/maintenance.service.ts';
   import {
     getIntegrityReportSummary,
     getQueuesLegacy,
diff --git a/web/src/routes/admin/maintenance/+page.ts b/web/src/routes/admin/maintenance/+page.ts
index 863515086..b454f7812 100644
--- a/web/src/routes/admin/maintenance/+page.ts
+++ b/web/src/routes/admin/maintenance/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getIntegrityReportSummary, getServerVersion, listDatabaseBackups } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte b/web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte
index b77b39487..bc73d5b90 100644
--- a/web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte
+++ b/web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte
@@ -2,9 +2,9 @@
   import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
   import IntegrityReportTableItem from '#lib/components/maintenance/integrity/IntegrityReportTableItem.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
-  import { Route } from '#lib/route.js';
-  import { getIntegrityReportActions } from '#lib/services/integrity.service.js';
-  import { asyncTimeout } from '#lib/utils.js';
+  import { Route } from '#lib/route.ts';
+  import { getIntegrityReportActions } from '#lib/services/integrity.service.ts';
+  import { asyncTimeout } from '#lib/utils.ts';
   import { getIntegrityReport, getQueuesLegacy, IntegrityReport } from '@immich/sdk';
   import { Button, Table, TableBody, TableHeader, TableHeading } from '@immich/ui';
   import { onDestroy, onMount } from 'svelte';
diff --git a/web/src/routes/admin/maintenance/integrity-report/[type]/+page.ts b/web/src/routes/admin/maintenance/integrity-report/[type]/+page.ts
index 1c57dbb42..2a2aa40a7 100644
--- a/web/src/routes/admin/maintenance/integrity-report/[type]/+page.ts
+++ b/web/src/routes/admin/maintenance/integrity-report/[type]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getIntegrityReport, IntegrityReport } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/admin/queues/+page.svelte b/web/src/routes/admin/queues/+page.svelte
index 54a2e153f..2faac11ce 100644
--- a/web/src/routes/admin/queues/+page.svelte
+++ b/web/src/routes/admin/queues/+page.svelte
@@ -2,8 +2,8 @@
   import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '#lib/components/OnEvents.svelte';
   import JobsPanel from './QueuePanel.svelte';
-  import { queueManager } from '#lib/managers/queue-manager.svelte.js';
-  import { getQueuesActions } from '#lib/services/queue.service.js';
+  import { queueManager } from '#lib/managers/queue-manager.svelte.ts';
+  import { getQueuesActions } from '#lib/services/queue.service.ts';
   import { type QueueResponseDto } from '@immich/sdk';
   import { CommandPaletteDefaultProvider, Container, type ActionItem } from '@immich/ui';
   import { onMount } from 'svelte';
diff --git a/web/src/routes/admin/queues/+page.ts b/web/src/routes/admin/queues/+page.ts
index 498db0de9..b8928b574 100644
--- a/web/src/routes/admin/queues/+page.ts
+++ b/web/src/routes/admin/queues/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getQueues } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/admin/queues/QueueCard.svelte b/web/src/routes/admin/queues/QueueCard.svelte
index 702f8701b..0ae8fbdaa 100644
--- a/web/src/routes/admin/queues/QueueCard.svelte
+++ b/web/src/routes/admin/queues/QueueCard.svelte
@@ -2,10 +2,10 @@
   import { cleanClass } from '#lib';
   import QueueCardBadge from './QueueCardBadge.svelte';
   import QueueCardButton from './QueueCardButton.svelte';
-  import { Route } from '#lib/route.js';
-  import { asQueueItem } from '#lib/services/queue.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { transformToTitleCase } from '#lib/utils.js';
+  import { Route } from '#lib/route.ts';
+  import { asQueueItem } from '#lib/services/queue.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { transformToTitleCase } from '#lib/utils.ts';
   import { QueueCommand, type QueueCommandDto, type QueueResponseDto } from '@immich/sdk';
   import { Badge, Icon, IconButton, Link } from '@immich/ui';
   import {
diff --git a/web/src/routes/admin/queues/QueuePanel.svelte b/web/src/routes/admin/queues/QueuePanel.svelte
index 5666faded..f5e9afa89 100644
--- a/web/src/routes/admin/queues/QueuePanel.svelte
+++ b/web/src/routes/admin/queues/QueuePanel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import QueueCard from './QueueCard.svelte';
   import QueueStorageMigrationDescription from './QueueStorageMigrationDescription.svelte';
-  import { queueManager } from '#lib/managers/queue-manager.svelte.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
-  import { asQueueItem } from '#lib/services/queue.service.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { queueManager } from '#lib/managers/queue-manager.svelte.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
+  import { asQueueItem } from '#lib/services/queue.service.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import {
     QueueCommand,
     type QueueCommandDto,
diff --git a/web/src/routes/admin/queues/QueueStorageMigrationDescription.svelte b/web/src/routes/admin/queues/QueueStorageMigrationDescription.svelte
index c8c0965b2..7d8982cf9 100644
--- a/web/src/routes/admin/queues/QueueStorageMigrationDescription.svelte
+++ b/web/src/routes/admin/queues/QueueStorageMigrationDescription.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { OpenQueryParam } from '#lib/constants.js';
+  import { OpenQueryParam } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { Route } from '#lib/route.js';
+  import { Route } from '#lib/route.ts';
   import { t } from 'svelte-i18n';
 </script>
 
diff --git a/web/src/routes/admin/queues/[name]/+page.svelte b/web/src/routes/admin/queues/[name]/+page.svelte
index a2c5a50d6..5edb9ccec 100644
--- a/web/src/routes/admin/queues/[name]/+page.svelte
+++ b/web/src/routes/admin/queues/[name]/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
   import QueueGraph from './QueueGraph.svelte';
-  import { queueManager } from '#lib/managers/queue-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { asQueueItem, getQueueActions } from '#lib/services/queue.service.js';
+  import { queueManager } from '#lib/managers/queue-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { asQueueItem, getQueueActions } from '#lib/services/queue.service.ts';
   import {
     Badge,
     Card,
diff --git a/web/src/routes/admin/queues/[name]/+page.ts b/web/src/routes/admin/queues/[name]/+page.ts
index 402bb7d3b..c81f1cad8 100644
--- a/web/src/routes/admin/queues/[name]/+page.ts
+++ b/web/src/routes/admin/queues/[name]/+page.ts
@@ -1,6 +1,6 @@
-import { fromQueueSlug, Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { fromQueueSlug, Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getQueue, getQueueJobs, QueueJobStatus } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
diff --git a/web/src/routes/admin/queues/[name]/QueueGraph.svelte b/web/src/routes/admin/queues/[name]/QueueGraph.svelte
index b87f7c1f3..f73edd7c9 100644
--- a/web/src/routes/admin/queues/[name]/QueueGraph.svelte
+++ b/web/src/routes/admin/queues/[name]/QueueGraph.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { cleanClass } from '#lib';
-  import { queueManager } from '#lib/managers/queue-manager.svelte.js';
-  import type { QueueSnapshot } from '#lib/types.js';
+  import { queueManager } from '#lib/managers/queue-manager.svelte.ts';
+  import type { QueueSnapshot } from '#lib/types.ts';
   import type { QueueResponseDto } from '@immich/sdk';
   import { LoadingSpinner, Theme, themeManager } from '@immich/ui';
   import { DateTime } from 'luxon';
diff --git a/web/src/routes/admin/server-status/+page.ts b/web/src/routes/admin/server-status/+page.ts
index aeb33f949..2f1b0e06c 100644
--- a/web/src/routes/admin/server-status/+page.ts
+++ b/web/src/routes/admin/server-status/+page.ts
@@ -1,8 +1,8 @@
-import { queryClient } from '#lib/queries/client.js';
-import { getServerStatisticsQuery } from '#lib/queries/server-info.query.js';
-import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { queryClient } from '#lib/queries/client.ts';
+import { getServerStatisticsQuery } from '#lib/queries/server-info.query.ts';
+import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { noop } from 'lodash-es';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte b/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte
index b9d1ddfff..7714f6938 100644
--- a/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte
+++ b/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import ServerStatisticsCard from '#lib/components/server-statistics/ServerStatisticsCard.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getServerStatisticsQuery } from '#lib/queries/server-info.query.js';
-  import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getBytesWithUnit } from '#lib/utils/byte-units.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getServerStatisticsQuery } from '#lib/queries/server-info.query.ts';
+  import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getBytesWithUnit } from '#lib/utils/byte-units.ts';
   import {
     Code,
     FormatBytes,
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index c230787fc..b0b964415 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -20,10 +20,10 @@
   import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SearchBar from '#lib/elements/SearchBar.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
-  import { getSystemConfigActions } from '#lib/services/system-config.service.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
+  import { getSystemConfigActions } from '#lib/services/system-config.service.ts';
   import { Alert, CommandPaletteDefaultProvider, Container } from '@immich/ui';
   import {
     mdiAccountOutline,
diff --git a/web/src/routes/admin/system-settings/+page.ts b/web/src/routes/admin/system-settings/+page.ts
index fa4529ea4..39cec7691 100644
--- a/web/src/routes/admin/system-settings/+page.ts
+++ b/web/src/routes/admin/system-settings/+page.ts
@@ -1,7 +1,7 @@
-import { queryClient } from '#lib/queries/client.js';
-import { getAdminConfigDefaultsQuery } from '#lib/queries/config-admin.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { queryClient } from '#lib/queries/client.ts';
+import { getAdminConfigDefaultsQuery } from '#lib/queries/config-admin.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/system-settings/AuthSettings.svelte b/web/src/routes/admin/system-settings/AuthSettings.svelte
index 0f582f97c..0d5badd63 100644
--- a/web/src/routes/admin/system-settings/AuthSettings.svelte
+++ b/web/src/routes/admin/system-settings/AuthSettings.svelte
@@ -3,13 +3,13 @@
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import AuthDisableLoginConfirmModal from '#lib/modals/AuthDisableLoginConfirmModal.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { OAuthTokenEndpointAuthMethod, unlinkAllOAuthAccountsAdmin } from '@immich/sdk';
   import { Button, IconButton, Link, modalManager, Text, toastManager } from '@immich/ui';
   import { mdiPlus, mdiRestart, mdiTrashCanOutline } from '@mdi/js';
diff --git a/web/src/routes/admin/system-settings/BackupSettings.svelte b/web/src/routes/admin/system-settings/BackupSettings.svelte
index 0f7fabfb0..c2c2b5017 100644
--- a/web/src/routes/admin/system-settings/BackupSettings.svelte
+++ b/web/src/routes/admin/system-settings/BackupSettings.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSelect from './SettingSelect.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { Link } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/admin/system-settings/FFmpegSettings.svelte b/web/src/routes/admin/system-settings/FFmpegSettings.svelte
index 8aefcf301..05816c545 100644
--- a/web/src/routes/admin/system-settings/FFmpegSettings.svelte
+++ b/web/src/routes/admin/system-settings/FFmpegSettings.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SettingCheckboxes from './SettingCheckboxes.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSelect from './SettingSelect.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import {
     AudioCodec,
     CQMode,
diff --git a/web/src/routes/admin/system-settings/ImageSettings.svelte b/web/src/routes/admin/system-settings/ImageSettings.svelte
index 325020691..b80ed6bce 100644
--- a/web/src/routes/admin/system-settings/ImageSettings.svelte
+++ b/web/src/routes/admin/system-settings/ImageSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingSelect from './SettingSelect.svelte';
   import { Colorspace, ImageFormat } from '@immich/sdk';
@@ -10,8 +10,8 @@
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
 
   const query = createPreloadedQuery(getAdminConfigQuery);
diff --git a/web/src/routes/admin/system-settings/IntegrityChecksSettings.svelte b/web/src/routes/admin/system-settings/IntegrityChecksSettings.svelte
index cc0af9855..27bc8da2b 100644
--- a/web/src/routes/admin/system-settings/IntegrityChecksSettings.svelte
+++ b/web/src/routes/admin/system-settings/IntegrityChecksSettings.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { Link } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/admin/system-settings/JobSettings.svelte b/web/src/routes/admin/system-settings/JobSettings.svelte
index 12aef1187..249b43397 100644
--- a/web/src/routes/admin/system-settings/JobSettings.svelte
+++ b/web/src/routes/admin/system-settings/JobSettings.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { QueueName, type AdminConfigJobDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/admin/system-settings/LibrarySettings.svelte b/web/src/routes/admin/system-settings/LibrarySettings.svelte
index 310a6af97..beb9726f5 100644
--- a/web/src/routes/admin/system-settings/LibrarySettings.svelte
+++ b/web/src/routes/admin/system-settings/LibrarySettings.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSelect from './SettingSelect.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { Link } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/admin/system-settings/LoggingSettings.svelte b/web/src/routes/admin/system-settings/LoggingSettings.svelte
index 5fec65626..f2f775846 100644
--- a/web/src/routes/admin/system-settings/LoggingSettings.svelte
+++ b/web/src/routes/admin/system-settings/LoggingSettings.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingSelect from './SettingSelect.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { LogLevel } from '@immich/sdk';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/admin/system-settings/MachineLearningSettings.svelte b/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
index 1f07e1f78..0af45daad 100644
--- a/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
+++ b/web/src/routes/admin/system-settings/MachineLearningSettings.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSelect from './SettingSelect.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { Button, IconButton } from '@immich/ui';
   import { mdiPlus, mdiTrashCanOutline } from '@mdi/js';
   import { isEqual, cloneDeep } from 'lodash-es';
diff --git a/web/src/routes/admin/system-settings/MapSettings.svelte b/web/src/routes/admin/system-settings/MapSettings.svelte
index c373d57ff..c248e0b3b 100644
--- a/web/src/routes/admin/system-settings/MapSettings.svelte
+++ b/web/src/routes/admin/system-settings/MapSettings.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { Link } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/admin/system-settings/MetadataSettings.svelte b/web/src/routes/admin/system-settings/MetadataSettings.svelte
index 557ffad28..59b4ca4ef 100644
--- a/web/src/routes/admin/system-settings/MetadataSettings.svelte
+++ b/web/src/routes/admin/system-settings/MetadataSettings.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
diff --git a/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte b/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte
index 7f7356e6b..5b36e811e 100644
--- a/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte
+++ b/web/src/routes/admin/system-settings/NewVersionCheckSettings.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import SettingSelect from './SettingSelect.svelte';
diff --git a/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte b/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte
index afe8680f5..3699ab2ac 100644
--- a/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte
+++ b/web/src/routes/admin/system-settings/NightlyTasksSettings.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
diff --git a/web/src/routes/admin/system-settings/NotificationSettings.svelte b/web/src/routes/admin/system-settings/NotificationSettings.svelte
index aad6e0c20..f3cb692ac 100644
--- a/web/src/routes/admin/system-settings/NotificationSettings.svelte
+++ b/web/src/routes/admin/system-settings/NotificationSettings.svelte
@@ -5,12 +5,12 @@
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getAdminConfigQuery, updateAdminConfigMutation } from '#lib/queries/config-admin.query.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery, updateAdminConfigMutation } from '#lib/queries/config-admin.query.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { sendTestEmailAdmin } from '@immich/sdk';
   import { Button, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/admin/system-settings/ServerSettings.svelte b/web/src/routes/admin/system-settings/ServerSettings.svelte
index fedefd7d5..92ac92fbd 100644
--- a/web/src/routes/admin/system-settings/ServerSettings.svelte
+++ b/web/src/routes/admin/system-settings/ServerSettings.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
diff --git a/web/src/routes/admin/system-settings/TemplateSettings.svelte b/web/src/routes/admin/system-settings/TemplateSettings.svelte
index af697da6f..638a8bc02 100644
--- a/web/src/routes/admin/system-settings/TemplateSettings.svelte
+++ b/web/src/routes/admin/system-settings/TemplateSettings.svelte
@@ -2,10 +2,10 @@
   import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import SettingTextarea from './SettingTextarea.svelte';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import EmailTemplatePreviewModal from '#lib/modals/EmailTemplatePreviewModal.svelte';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { type AdminConfigDto, type AdminConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
   import { Button, Icon, LoadingSpinner, modalManager } from '@immich/ui';
   import { mdiEyeOutline } from '@mdi/js';
diff --git a/web/src/routes/admin/system-settings/ThemeSettings.svelte b/web/src/routes/admin/system-settings/ThemeSettings.svelte
index 845a4f81d..0e2e50af0 100644
--- a/web/src/routes/admin/system-settings/ThemeSettings.svelte
+++ b/web/src/routes/admin/system-settings/ThemeSettings.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingTextarea from './SettingTextarea.svelte';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
diff --git a/web/src/routes/admin/system-settings/TrashSettings.svelte b/web/src/routes/admin/system-settings/TrashSettings.svelte
index 20301357f..c2d72e989 100644
--- a/web/src/routes/admin/system-settings/TrashSettings.svelte
+++ b/web/src/routes/admin/system-settings/TrashSettings.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
diff --git a/web/src/routes/admin/system-settings/UserSettings.svelte b/web/src/routes/admin/system-settings/UserSettings.svelte
index 253c052c2..37b0ff4b0 100644
--- a/web/src/routes/admin/system-settings/UserSettings.svelte
+++ b/web/src/routes/admin/system-settings/UserSettings.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import { fade } from 'svelte/transition';
 
   import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingInputField from '#lib/components/shared-components/settings/SettingInputField.svelte';
-  import { SettingInputFieldType } from '#lib/constants.js';
-  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  import { SettingInputFieldType } from '#lib/constants.ts';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.ts';
   import { t } from 'svelte-i18n';
 
   const query = createPreloadedQuery(getAdminConfigQuery);
diff --git a/web/src/routes/admin/user-management/+page.ts b/web/src/routes/admin/user-management/+page.ts
index f64a38790..5799fdd7f 100644
--- a/web/src/routes/admin/user-management/+page.ts
+++ b/web/src/routes/admin/user-management/+page.ts
@@ -1,4 +1,4 @@
-import { Route } from '#lib/route.js';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/admin/users/(list)/+layout.svelte b/web/src/routes/admin/users/(list)/+layout.svelte
index 8fe611b1b..9a6e1e533 100644
--- a/web/src/routes/admin/users/(list)/+layout.svelte
+++ b/web/src/routes/admin/users/(list)/+layout.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.js';
-  import { Route } from '#lib/route.js';
-  import { getUserAdminActions, getUserAdminsActions } from '#lib/services/user-admin.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { getByteUnitString } from '#lib/utils/byte-units.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.ts';
+  import { Route } from '#lib/route.ts';
+  import { getUserAdminActions, getUserAdminsActions } from '#lib/services/user-admin.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { getByteUnitString } from '#lib/utils/byte-units.ts';
   import type { UserAdminResponseDto } from '@immich/sdk';
   import {
     CommandPaletteDefaultProvider,
diff --git a/web/src/routes/admin/users/(list)/+layout.ts b/web/src/routes/admin/users/(list)/+layout.ts
index 63e15df83..c6960fbc4 100644
--- a/web/src/routes/admin/users/(list)/+layout.ts
+++ b/web/src/routes/admin/users/(list)/+layout.ts
@@ -1,7 +1,7 @@
-import { queryClient } from '#lib/queries/client.js';
-import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { queryClient } from '#lib/queries/client.ts';
+import { searchUsersAdminQuery } from '#lib/queries/user-admin.query.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/users/(list)/new/+page.svelte b/web/src/routes/admin/users/(list)/new/+page.svelte
index 0a02c0e87..28bace58b 100644
--- a/web/src/routes/admin/users/(list)/new/+page.svelte
+++ b/web/src/routes/admin/users/(list)/new/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { Route } from '#lib/route.js';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getStorageQuery } from '#lib/queries/server-info.query.js';
-  import { createUserAdminMutation } from '#lib/queries/user-admin.query.js';
-  import { ByteUnit, convertToBytes } from '#lib/utils/byte-units.js';
+  import { Route } from '#lib/route.ts';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getStorageQuery } from '#lib/queries/server-info.query.ts';
+  import { createUserAdminMutation } from '#lib/queries/user-admin.query.ts';
+  import { ByteUnit, convertToBytes } from '#lib/utils/byte-units.ts';
   import { Field, FormModal, HelperText, Input, PasswordInput, Stack, Switch } from '@immich/ui';
   import { createQuery } from '@tanstack/svelte-query';
   import { t } from 'svelte-i18n';
-  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.ts';
 
   const queries = {
     config: createPreloadedQuery(getUserConfigQuery),
diff --git a/web/src/routes/admin/users/(list)/new/+page.ts b/web/src/routes/admin/users/(list)/new/+page.ts
index 162d63380..ca405c150 100644
--- a/web/src/routes/admin/users/(list)/new/+page.ts
+++ b/web/src/routes/admin/users/(list)/new/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/users/[id]/+layout.svelte b/web/src/routes/admin/users/[id]/+layout.svelte
index 46684f30e..ac66cfaeb 100644
--- a/web/src/routes/admin/users/[id]/+layout.svelte
+++ b/web/src/routes/admin/users/[id]/+layout.svelte
@@ -7,19 +7,19 @@
   import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
   import DeviceCard from '#lib/components/user-settings-page/DeviceCard.svelte';
   import FeatureSetting from './FeatureSetting.svelte';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
   import {
     getUserAdminQuery,
     getUserCalendarHeatmapAdminQuery,
     getUserPreferencesAdminQuery,
     getUserSessionsAdminQuery,
     getUserStatisticsAdminQuery,
-  } from '#lib/queries/user-admin.query.js';
-  import { Route } from '#lib/route.js';
-  import { getUserAdminActions } from '#lib/services/user-admin.service.js';
-  import { locale } from '#lib/stores/preferences.store.js';
-  import { createDateFormatter, findLocale } from '#lib/utils.js';
-  import { getBytesWithUnit } from '#lib/utils/byte-units.js';
+  } from '#lib/queries/user-admin.query.ts';
+  import { Route } from '#lib/route.ts';
+  import { getUserAdminActions } from '#lib/services/user-admin.service.ts';
+  import { locale } from '#lib/stores/preferences.store.ts';
+  import { createDateFormatter, findLocale } from '#lib/utils.ts';
+  import { getBytesWithUnit } from '#lib/utils/byte-units.ts';
   import {
     Alert,
     Badge,
diff --git a/web/src/routes/admin/users/[id]/+layout.ts b/web/src/routes/admin/users/[id]/+layout.ts
index bb0a9915d..e67a69aa4 100644
--- a/web/src/routes/admin/users/[id]/+layout.ts
+++ b/web/src/routes/admin/users/[id]/+layout.ts
@@ -1,9 +1,9 @@
-import { UUID_REGEX } from '#lib/constants.js';
-import { queryClient } from '#lib/queries/client.js';
-import { getUserAdminQuery } from '#lib/queries/user-admin.query.js';
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { UUID_REGEX } from '#lib/constants.ts';
+import { queryClient } from '#lib/queries/client.ts';
+import { getUserAdminQuery } from '#lib/queries/user-admin.query.ts';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 
diff --git a/web/src/routes/admin/users/[id]/+page.ts b/web/src/routes/admin/users/[id]/+page.ts
index 9a9b2a992..a79963deb 100644
--- a/web/src/routes/admin/users/[id]/+page.ts
+++ b/web/src/routes/admin/users/[id]/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/users/[id]/edit/+page.svelte b/web/src/routes/admin/users/[id]/edit/+page.svelte
index 588be2cb5..fac8e01a5 100644
--- a/web/src/routes/admin/users/[id]/edit/+page.svelte
+++ b/web/src/routes/admin/users/[id]/edit/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getStorageQuery } from '#lib/queries/server-info.query.js';
-  import { getUserAdminQuery, updateUserAdminMutation } from '#lib/queries/user-admin.query.js';
-  import { ByteUnit, convertFromBytes, convertToBytes } from '#lib/utils/byte-units.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getStorageQuery } from '#lib/queries/server-info.query.ts';
+  import { getUserAdminQuery, updateUserAdminMutation } from '#lib/queries/user-admin.query.ts';
+  import { ByteUnit, convertFromBytes, convertToBytes } from '#lib/utils/byte-units.ts';
   import { Field, FormModal, Input, Link, NumberInput, Switch, Text } from '@immich/ui';
   import { createQuery } from '@tanstack/svelte-query';
   import { mdiAccountEditOutline } from '@mdi/js';
diff --git a/web/src/routes/admin/users/[id]/edit/+page.ts b/web/src/routes/admin/users/[id]/edit/+page.ts
index 1ad2c9c43..b25fbcbb2 100644
--- a/web/src/routes/admin/users/[id]/edit/+page.ts
+++ b/web/src/routes/admin/users/[id]/edit/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/auth/change-password/+page.svelte b/web/src/routes/auth/change-password/+page.svelte
index d7f13bfed..998e0f711 100644
--- a/web/src/routes/auth/change-password/+page.svelte
+++ b/web/src/routes/auth/change-password/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import AuthPageLayout from '#lib/components/layouts/AuthPageLayout.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { handleChangePassword } from '#lib/services/user.service.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { handleChangePassword } from '#lib/services/user.service.ts';
   import { Alert, Button, Field, HelperText, PasswordInput, Stack, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
diff --git a/web/src/routes/auth/change-password/+page.ts b/web/src/routes/auth/change-password/+page.ts
index 03500453e..2a8a06c29 100644
--- a/web/src/routes/auth/change-password/+page.ts
+++ b/web/src/routes/auth/change-password/+page.ts
@@ -1,7 +1,7 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte
index a379b7012..ee15c0e43 100644
--- a/web/src/routes/auth/login/+page.svelte
+++ b/web/src/routes/auth/login/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import AuthPageLayout from '#lib/components/layouts/AuthPageLayout.svelte';
-  import { eventManager } from '#lib/managers/event-manager.svelte.js';
-  import { createPreloadedQuery, MutationCancelledError } from '#lib/queries/client.js';
-  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
-  import { loginWithPasskeyMutation } from '#lib/queries/passkey.query.js';
-  import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-  import { Route } from '#lib/route.js';
+  import { eventManager } from '#lib/managers/event-manager.svelte.ts';
+  import { createPreloadedQuery, MutationCancelledError } from '#lib/queries/client.ts';
+  import { getPublicConfigQuery } from '#lib/queries/config-public.query.ts';
+  import { loginWithPasskeyMutation } from '#lib/queries/passkey.query.ts';
+  import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+  import { Route } from '#lib/route.ts';
   import { browserSupportsWebAuthn } from '@simplewebauthn/browser';
   import { createMutation } from '@tanstack/svelte-query';
-  import { oauth } from '#lib/utils.js';
-  import { getServerErrorMessage, handleError } from '#lib/utils/handle-error.js';
+  import { oauth } from '#lib/utils.ts';
+  import { getServerErrorMessage, handleError } from '#lib/utils/handle-error.ts';
   import { login, type LoginResponseDto } from '@immich/sdk';
   import { Alert, Button, Field, Input, PasswordInput, Stack } from '@immich/ui';
   import { mdiShieldKeyOutline } from '@mdi/js';
diff --git a/web/src/routes/auth/login/+page.ts b/web/src/routes/auth/login/+page.ts
index 922f22dd9..049839622 100644
--- a/web/src/routes/auth/login/+page.ts
+++ b/web/src/routes/auth/login/+page.ts
@@ -1,8 +1,8 @@
-import { authManager } from '#lib/managers/auth-manager.svelte.js';
-import { readPreloadedQuery } from '#lib/queries/client.js';
-import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-import { Route } from '#lib/route.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+import { readPreloadedQuery } from '#lib/queries/client.ts';
+import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+import { Route } from '#lib/route.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/auth/logout/+page.svelte b/web/src/routes/auth/logout/+page.svelte
index 69bc1cbde..ebb4899c6 100644
--- a/web/src/routes/auth/logout/+page.svelte
+++ b/web/src/routes/auth/logout/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
   import { LoadingSpinner } from '@immich/ui';
 
   void authManager.logout();
diff --git a/web/src/routes/auth/onboarding/+page.svelte b/web/src/routes/auth/onboarding/+page.svelte
index 1f3dad145..7f1c3a8f6 100644
--- a/web/src/routes/auth/onboarding/+page.svelte
+++ b/web/src/routes/auth/onboarding/+page.svelte
@@ -10,9 +10,9 @@
   import OnboardingStorageTemplate from './OnboardingStorageTemplate.svelte';
   import OnboardingTheme from './OnboardingTheme.svelte';
   import OnboardingUserPrivacy from './OnboardingUserPrivacy.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { Route } from '#lib/route.js';
-  import { OnboardingRole } from '#lib/types.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { Route } from '#lib/route.ts';
+  import { OnboardingRole } from '#lib/types.ts';
   import { setUserOnboarding, updateAdminOnboarding } from '@immich/sdk';
   import {
     mdiCellphoneArrowDownVariant,
@@ -23,8 +23,8 @@
     mdiTranslate,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { createPreloadedQuery, queryClient } from '#lib/queries/client.js';
-  import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
+  import { createPreloadedQuery, queryClient } from '#lib/queries/client.ts';
+  import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
 
   const query = createPreloadedQuery(getServerConfigQuery);
   const serverConfig = $derived(query.data);
diff --git a/web/src/routes/auth/onboarding/+page.ts b/web/src/routes/auth/onboarding/+page.ts
index be4b6323b..b107fbcc7 100644
--- a/web/src/routes/auth/onboarding/+page.ts
+++ b/web/src/routes/auth/onboarding/+page.ts
@@ -1,5 +1,5 @@
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/auth/onboarding/OnboardingCard.svelte b/web/src/routes/auth/onboarding/OnboardingCard.svelte
index 063eafabb..a4afe7ebf 100644
--- a/web/src/routes/auth/onboarding/OnboardingCard.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { languageManager } from '#lib/managers/language-manager.svelte.js';
+  import { languageManager } from '#lib/managers/language-manager.svelte.ts';
   import { Button, Icon } from '@immich/ui';
   import { mdiArrowLeft, mdiArrowRight, mdiCheck } from '@mdi/js';
   import type { Snippet } from 'svelte';
diff --git a/web/src/routes/auth/onboarding/OnboardingHello.svelte b/web/src/routes/auth/onboarding/OnboardingHello.svelte
index 2172aaf38..f7a845e33 100644
--- a/web/src/routes/auth/onboarding/OnboardingHello.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingHello.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { OnboardingRole } from '#lib/types.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { OnboardingRole } from '#lib/types.ts';
   import { Logo } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { createPreloadedQuery } from '#lib/queries/client.js';
-  import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
+  import { createPreloadedQuery } from '#lib/queries/client.ts';
+  import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
 
   const query = createPreloadedQuery(getServerConfigQuery);
   const serverConfig = $derived(query.data);
diff --git a/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte b/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte
index a406d9ca1..876f52278 100644
--- a/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
-  import { getAdminConfigQuery, updateAdminConfigMutation } from '#lib/queries/config-admin.query.js';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.ts';
+  import { getAdminConfigQuery, updateAdminConfigMutation } from '#lib/queries/config-admin.query.ts';
   import { cloneDeep } from 'lodash-es';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte b/web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte
index 1177775ab..e31b06843 100644
--- a/web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte
@@ -11,7 +11,7 @@
 <script lang="ts">
   import StorageTemplateSettings from '#lib/components/admin-settings/StorageTemplateSettings.svelte';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
 
   const preselectDate = isFirstVisit();
 </script>
diff --git a/web/src/routes/auth/onboarding/OnboardingTheme.svelte b/web/src/routes/auth/onboarding/OnboardingTheme.svelte
index 50b4e3a91..a63475c0e 100644
--- a/web/src/routes/auth/onboarding/OnboardingTheme.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingTheme.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { moonPath, moonViewBox, sunPath, sunViewBox } from '#lib/assets/svg-paths.js';
+  import { moonPath, moonViewBox, sunPath, sunViewBox } from '#lib/assets/svg-paths.ts';
   import { Icon, themeManager, ThemePreference } from '@immich/ui';
   import { t } from 'svelte-i18n';
 </script>
diff --git a/web/src/routes/auth/onboarding/OnboardingUserPrivacy.svelte b/web/src/routes/auth/onboarding/OnboardingUserPrivacy.svelte
index eb3a4acee..f8c26380b 100644
--- a/web/src/routes/auth/onboarding/OnboardingUserPrivacy.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingUserPrivacy.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
-  import { authManager } from '#lib/managers/auth-manager.svelte.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { updateMyPreferences } from '@immich/sdk';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/auth/pin-prompt/+page.svelte b/web/src/routes/auth/pin-prompt/+page.svelte
index b8c22dfda..65c1ab749 100644
--- a/web/src/routes/auth/pin-prompt/+page.svelte
+++ b/web/src/routes/auth/pin-prompt/+page.svelte
@@ -2,8 +2,8 @@
   import { goto } from '$app/navigation';
   import AuthPageLayout from '#lib/components/layouts/AuthPageLayout.svelte';
   import PinCodeCreateForm from '#lib/components/user-settings-page/PinCodeCreateForm.svelte';
-  import { Route } from '#lib/route.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { Route } from '#lib/route.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { unlockAuthSession } from '@immich/sdk';
   import { Button, Icon, PinInput } from '@immich/ui';
   import { mdiLockOpenVariantOutline, mdiLockOutline, mdiLockSmart } from '@mdi/js';
diff --git a/web/src/routes/auth/pin-prompt/+page.ts b/web/src/routes/auth/pin-prompt/+page.ts
index e890c3788..5c82badaf 100644
--- a/web/src/routes/auth/pin-prompt/+page.ts
+++ b/web/src/routes/auth/pin-prompt/+page.ts
@@ -1,6 +1,6 @@
-import { Route } from '#lib/route.js';
-import { authenticate } from '#lib/utils/auth.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { Route } from '#lib/route.ts';
+import { authenticate } from '#lib/utils/auth.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { getAuthStatus } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/auth/register/+page.svelte b/web/src/routes/auth/register/+page.svelte
index daaa3d378..71b917d6c 100644
--- a/web/src/routes/auth/register/+page.svelte
+++ b/web/src/routes/auth/register/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import AuthPageLayout from '#lib/components/layouts/AuthPageLayout.svelte';
-  import { queryClient } from '#lib/queries/client.js';
-  import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-  import { Route } from '#lib/route.js';
-  import { handleError } from '#lib/utils/handle-error.js';
+  import { queryClient } from '#lib/queries/client.ts';
+  import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+  import { Route } from '#lib/route.ts';
+  import { handleError } from '#lib/utils/handle-error.ts';
   import { signUpAdmin } from '@immich/sdk';
   import { Alert, Button, Field, Input, PasswordInput, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/auth/register/+page.ts b/web/src/routes/auth/register/+page.ts
index 9c9d98aa2..690727f1b 100644
--- a/web/src/routes/auth/register/+page.ts
+++ b/web/src/routes/auth/register/+page.ts
@@ -1,7 +1,7 @@
-import { readPreloadedQuery } from '#lib/queries/client.js';
-import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
-import { Route } from '#lib/route.js';
-import { getFormatter } from '#lib/utils/i18n.js';
+import { readPreloadedQuery } from '#lib/queries/client.ts';
+import { getServerConfigQuery } from '#lib/queries/server-info.query.ts';
+import { Route } from '#lib/route.ts';
+import { getFormatter } from '#lib/utils/i18n.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/link/+page.ts b/web/src/routes/link/+page.ts
index 01fed8b9d..ad4878d04 100644
--- a/web/src/routes/link/+page.ts
+++ b/web/src/routes/link/+page.ts
@@ -1,5 +1,5 @@
-import { OpenQueryParam } from '#lib/constants.js';
-import { Route } from '#lib/route.js';
+import { OpenQueryParam } from '#lib/constants.ts';
+import { Route } from '#lib/route.ts';
 import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
diff --git a/web/src/routes/maintenance/+page.svelte b/web/src/routes/maintenance/+page.svelte
index 6cd4f6c2f..cf5f9cae3 100644
--- a/web/src/routes/maintenance/+page.svelte
+++ b/web/src/routes/maintenance/+page.svelte
@@ -3,8 +3,8 @@
   import AuthPageLayout from '#lib/components/layouts/AuthPageLayout.svelte';
   import MaintenanceRestoreFlow from './MaintenanceRestoreFlow.svelte';
   import FormatMessage from '#lib/elements/FormatMessage.svelte';
-  import { handleSetMaintenanceMode } from '#lib/services/maintenance.service.js';
-  import { maintenanceStore } from '#lib/stores/maintenance.store.js';
+  import { handleSetMaintenanceMode } from '#lib/services/maintenance.service.ts';
+  import { maintenanceStore } from '#lib/stores/maintenance.store.ts';
   import { MaintenanceAction } from '@immich/sdk';
   import { Button, Heading, Link, ProgressBar, Scrollable, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/maintenance/+page.ts b/web/src/routes/maintenance/+page.ts
index e86e6ead9..5b2aa7b4c 100644
--- a/web/src/routes/maintenance/+page.ts
+++ b/web/src/routes/maintenance/+page.ts
@@ -1,4 +1,4 @@
-import { loadMaintenanceAuth, loadMaintenanceStatus } from '#lib/utils/maintenance.js';
+import { loadMaintenanceAuth, loadMaintenanceStatus } from '#lib/utils/maintenance.ts';
 import { getServerVersion } from '@immich/sdk';
 import type { PageLoad } from '../admin/$types';
 
diff --git a/web/src/test-data/factories/asset-factory.ts b/web/src/test-data/factories/asset-factory.ts
index 712ec35fb..43dbe6351 100644
--- a/web/src/test-data/factories/asset-factory.ts
+++ b/web/src/test-data/factories/asset-factory.ts
@@ -1,5 +1,5 @@
-import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
-import { fromISODateTimeUTCToObject, fromTimelinePlainDateTime } from '#lib/utils/timeline-util.js';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.ts';
+import { fromISODateTimeUTCToObject, fromTimelinePlainDateTime } from '#lib/utils/timeline-util.ts';
 import { faker } from '@faker-js/faker';
 import { AssetTypeEnum, AssetVisibility, type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { Sync } from 'factory.ts';