diff --git a/e2e/src/specs/web/shared-link.e2e-spec.ts b/e2e/src/specs/web/shared-link.e2e-spec.ts
index acd793039..67f6de1f3 100644
--- a/e2e/src/specs/web/shared-link.e2e-spec.ts
+++ b/e2e/src/specs/web/shared-link.e2e-spec.ts
@@ -103,7 +103,7 @@ test.describe('Shared Links', () => {
 
   test('show error for invalid shared link', async ({ page }) => {
     await page.goto('/share/invalid');
-    await page.getByRole('heading', { name: 'Invalid share key' }).waitFor();
+    await page.getByRole('heading', { name: 'Page not found' }).waitFor();
   });
 
   test('auth on navigation from shared link to timeline', async ({ context, page }) => {
diff --git a/web/.prettierrc b/web/.prettierrc
index e809bd509..c19bf13b1 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "importOrder": ["<THIRD_PARTY_MODULES>", "<BUILTIN_MODULES>", "^\\$(.*)$", "^@test-data(.*)$", "^[./]"],
+  "importOrder": ["<THIRD_PARTY_MODULES>", "<BUILTIN_MODULES>", "^\\$(.*)$", "^#test-data(.*)$", "^[./]"],
   "importOrderSeparation": false,
   "jsonRecursiveSort": true,
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
diff --git a/web/eslint.config.js b/web/eslint.config.js
index 048f42d3a..d9097cd46 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -53,7 +53,7 @@ export default defineConfig(
         tsconfigRootDir: import.meta.dirname,
       },
     },
-    // ignores: ['**/service-worker/**'],
+    ignores: ['**/service-worker/**'],
   },
   {
     ignores: [
@@ -74,6 +74,7 @@ export default defineConfig(
       'tailwind.config.js',
       'coverage',
       'vite.config.ts',
+      '**/service-worker/**',
     ],
   },
   typescriptEslint.configs.recommended,
diff --git a/web/package.json b/web/package.json
index 9855cca44..c151ebe5b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -3,6 +3,14 @@
   "version": "3.3.5",
   "license": "GNU Affero General Public License version 3",
   "type": "module",
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*",
+    "#tests": "./src/../tests",
+    "#tests/*": "./src/../tests/*",
+    "#i18n/*": "../i18n/*",
+    "#test-data/*": "./src/test-data/*"
+  },
   "scripts": {
     "dev": "vite dev --host 0.0.0.0 --port 3000",
     "build": "vite build",
@@ -78,9 +86,9 @@
     "@faker-js/faker": "^10.0.0",
     "@koddsson/eslint-plugin-tscompat": "^0.2.0",
     "@socket.io/component-emitter": "^3.1.0",
-    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/adapter-static": "^4.0.0",
     "@sveltejs/enhanced-img": "^0.11.0",
-    "@sveltejs/kit": "^2.56.1",
+    "@sveltejs/kit": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "7.3.1",
     "@tailwindcss/vite": "^4.2.4",
     "@testing-library/jest-dom": "^7.0.0",
@@ -110,13 +118,13 @@
     "prettier-plugin-sort-json": "^4.1.1",
     "prettier-plugin-svelte": "^4.0.0",
     "rollup-plugin-visualizer": "^7.0.0",
-    "svelte": "5.57.1",
-    "svelte-check": "^4.4.6",
+    "svelte": "5.57.2",
+    "svelte-check": "^4.7.5",
     "svelte-eslint-parser": "^1.8.1",
     "tailwindcss": "^4.2.4",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "typescript-eslint": "8.71.2",
-    "vite": "^8.0.0",
+    "vite": "^8.0.12",
     "vitest": "^5.0.0"
   }
 }
diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index 1a0c85be0..e2bdac7a8 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -1,5 +1,5 @@
+import type en from '#i18n/en.json';
 import 'svelte-i18n';
-import type en from '$i18n/en.json';
 
 /// <reference types="@sveltejs/kit" />
 
@@ -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';
+  import type { InterpolationValues } from '#lib/elements/format-message.js';
   import type { Readable } from 'svelte/store';
 
   type Translations = NestedKeys<typeof en>;
diff --git a/web/src/env.ts b/web/src/env.ts
new file mode 100644
index 000000000..a772b33e3
--- /dev/null
+++ b/web/src/env.ts
@@ -0,0 +1,6 @@
+import { defineEnvVars } from '@sveltejs/kit/env';
+
+export const variables = defineEnvVars({
+  PUBLIC_IMMICH_BUY_HOST: { public: true, static: true },
+  PUBLIC_IMMICH_PAY_HOST: { public: true, static: true },
+});
diff --git a/web/src/hooks.client.ts b/web/src/hooks.client.ts
index 3593ffadc..8755278b5 100644
--- a/web/src/hooks.client.ts
+++ b/web/src/hooks.client.ts
@@ -1,5 +1,5 @@
 import { isHttpError, type ApiHttpError } from '@immich/sdk';
-import type { HandleClientError } from '@sveltejs/kit';
+import type { HandleClientError } from '@sveltejs/kit/hooks';
 
 const DEFAULT_MESSAGE = 'Hmm, not sure about that. Check the logs or open a ticket?';
 
@@ -19,19 +19,23 @@ const parseHTTPError = (httpError: ApiHttpError) => {
   };
 };
 
-const parseError = (error: unknown, status: number, message: string) => {
+const parseError = (error: App.Error | { status: number; message: string }) => {
   if (isHttpError(error)) {
     return parseHTTPError(error);
   }
 
   return {
-    message: (error as Error)?.message || message || DEFAULT_MESSAGE,
-    code: status,
+    message: error.message || DEFAULT_MESSAGE,
+    code: error.status,
   };
 };
 
-export const handleError: HandleClientError = ({ error, status, message }) => {
-  const result = parseError(error, status, message);
+export const handleError: HandleClientError = ({ kind, error }) => {
+  if (kind === 'unknown') {
+    console.error(error);
+    return;
+  }
+  const result = parseError(error);
   console.error(`[hooks.client.ts]:handleError ${result.message}`, error);
   return result;
 };
diff --git a/web/src/hooks.server.ts b/web/src/hooks.server.ts
index 17b94eda1..ef35dd349 100644
--- a/web/src/hooks.server.ts
+++ b/web/src/hooks.server.ts
@@ -1,6 +1,6 @@
-import type { Handle } from '@sveltejs/kit';
-import GoogleSans from '$lib/assets/fonts/GoogleSans/GoogleSans.ttf?url';
-import GoogleSansCode from '$lib/assets/fonts/GoogleSansCode/GoogleSansCode.ttf?url';
+import GoogleSans from '#lib/assets/fonts/GoogleSans/GoogleSans.ttf?url';
+import GoogleSansCode from '#lib/assets/fonts/GoogleSansCode/GoogleSansCode.ttf?url';
+import type { Handle } from '@sveltejs/kit/hooks';
 
 // only used during the build to replace the variables from app.html
 export const handle = (async ({ event, resolve }) => {
diff --git a/web/src/lib/actions/__test__/FocusTrap.spec.ts b/web/src/lib/actions/__test__/FocusTrap.spec.ts
index 6e9957d8b..b8a0da845 100644
--- a/web/src/lib/actions/__test__/FocusTrap.spec.ts
+++ b/web/src/lib/actions/__test__/FocusTrap.spec.ts
@@ -1,8 +1,8 @@
+import FocusTrapTest from '#lib/actions/__test__/FocusTrapTest.svelte';
+import { setDefaultTabbleOptions } from '#lib/utils/focus-util.js';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { tick } from 'svelte';
-import FocusTrapTest from '$lib/actions/__test__/FocusTrapTest.svelte';
-import { setDefaultTabbleOptions } from '$lib/utils/focus-util';
 
 setDefaultTabbleOptions({ displayCheck: 'none' });
 
diff --git a/web/src/lib/actions/__test__/FocusTrapTest.svelte b/web/src/lib/actions/__test__/FocusTrapTest.svelte
index a19d2b75d..f24adb465 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';
+  import { focusTrap } from '#lib/actions/focus-trap.js';
 
   interface Props {
     show: boolean;
diff --git a/web/src/lib/actions/click-outside.ts b/web/src/lib/actions/click-outside.ts
index 292e28e71..0ed684419 100644
--- a/web/src/lib/actions/click-outside.ts
+++ b/web/src/lib/actions/click-outside.ts
@@ -1,5 +1,5 @@
+import { matchesShortcut } from '#lib/actions/shortcut.js';
 import type { ActionReturn } from 'svelte/action';
-import { matchesShortcut } from '$lib/actions/shortcut';
 
 interface Options {
   onOutclick?: () => void;
diff --git a/web/src/lib/actions/context-menu-navigation.ts b/web/src/lib/actions/context-menu-navigation.ts
index c580b682e..5e4f1713f 100644
--- a/web/src/lib/actions/context-menu-navigation.ts
+++ b/web/src/lib/actions/context-menu-navigation.ts
@@ -1,6 +1,6 @@
+import { shortcuts } from '#lib/actions/shortcut.js';
 import { tick } from 'svelte';
 import type { Action } from 'svelte/action';
-import { shortcuts } from '$lib/actions/shortcut';
 
 interface Options {
   /**
diff --git a/web/src/lib/actions/focus-trap.ts b/web/src/lib/actions/focus-trap.ts
index 91c9f6a6d..2e29f7620 100644
--- a/web/src/lib/actions/focus-trap.ts
+++ b/web/src/lib/actions/focus-trap.ts
@@ -1,5 +1,5 @@
+import { getTabbable } from '#lib/utils/focus-util.js';
 import { tick } from 'svelte';
-import { getTabbable } from '$lib/utils/focus-util';
 
 interface Options {
   /**
diff --git a/web/src/lib/actions/image-loader.svelte.ts b/web/src/lib/actions/image-loader.svelte.ts
index 49a53dac2..bd9defa37 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';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
 
 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 b3dec0514..4b73101c1 100644
--- a/web/src/lib/actions/list-navigation.ts
+++ b/web/src/lib/actions/list-navigation.ts
@@ -1,5 +1,5 @@
+import { shortcuts } from '#lib/actions/shortcut.js';
 import type { Action } from 'svelte/action';
-import { shortcuts } from '$lib/actions/shortcut';
 
 /**
  * Enables keyboard navigation (up and down arrows) for a list of elements.
diff --git a/web/src/lib/actions/scroll-memory.ts b/web/src/lib/actions/scroll-memory.ts
index 9645e2d5d..20daba721 100644
--- a/web/src/lib/actions/scroll-memory.ts
+++ b/web/src/lib/actions/scroll-memory.ts
@@ -1,6 +1,6 @@
-import { navigating } from '$app/stores';
-import { SessionStorageKey } from '$lib/constants';
-import { handlePromiseError } from '$lib/utils';
+import { SessionStorageKey } from '#lib/constants.js';
+import { handlePromiseError } from '#lib/utils.js';
+import { navigating } from '$app/state';
 
 interface Options {
   /**
@@ -31,19 +31,17 @@ export function scrollMemory(
   node: HTMLElement,
   { routeStartsWith, beforeSave, beforeClear, beforeScroll }: PageOptions,
 ) {
-  const unsubscribeNavigating = navigating.subscribe((navigation) => {
-    const existingScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
-    if (navigation?.to && !existingScroll) {
-      // Save current scroll information when going into a subpage.
-      if (navigation.to.url.pathname.startsWith(routeStartsWith)) {
-        beforeSave?.();
-        sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, node.scrollTop.toString());
-      } else {
-        beforeClear?.();
-        sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-      }
+  const existingScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
+  if (navigating?.to && !existingScroll) {
+    // Save current scroll information when going into a subpage.
+    if (navigating.to.url.pathname.startsWith(routeStartsWith)) {
+      beforeSave?.();
+      sessionStorage.setItem(SessionStorageKey.SCROLL_POSITION, node.scrollTop.toString());
+    } else {
+      beforeClear?.();
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
     }
-  });
+  }
 
   handlePromiseError(
     (async () => {
@@ -60,28 +58,14 @@ export function scrollMemory(
       sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
     })(),
   );
-
-  return {
-    destroy() {
-      unsubscribeNavigating();
-    },
-  };
 }
 
 export function scrollMemoryClearer(_node: HTMLElement, { routeStartsWith, beforeClear }: Options) {
-  const unsubscribeNavigating = navigating.subscribe((navigation) => {
-    // Forget scroll position from main page if going somewhere else.
-    if (!navigation?.to || navigation?.to.url.pathname.startsWith(routeStartsWith)) {
-      return;
-    }
+  // Forget scroll position from main page if going somewhere else.
+  if (!navigating?.to || navigating?.to.url.pathname.startsWith(routeStartsWith)) {
+    return;
+  }
 
-    beforeClear?.();
-    sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
-  });
-
-  return {
-    destroy() {
-      unsubscribeNavigating();
-    },
-  };
+  beforeClear?.();
+  sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
 }
diff --git a/web/src/lib/actions/zoom-image.ts b/web/src/lib/actions/zoom-image.ts
index ace3d2ea9..451b8370d 100644
--- a/web/src/lib/actions/zoom-image.ts
+++ b/web/src/lib/actions/zoom-image.ts
@@ -1,5 +1,5 @@
+import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
 import { createZoomImageWheel } from '@zoom-image/core';
-import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 
 // Minimal touch shape — avoids importing DOM TouchEvent which isn't available in all TS targets.
 type TouchEventLike = {
diff --git a/web/src/lib/commands.ts b/web/src/lib/commands.ts
index 4001db81d..9e428d449 100644
--- a/web/src/lib/commands.ts
+++ b/web/src/lib/commands.ts
@@ -1,3 +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 { defaultProvider, screencastManager, themeManager, ThemePreference, type ActionItem } from '@immich/ui';
 import {
   mdiAccountMultipleOutline,
@@ -30,11 +35,6 @@ import {
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { readPreloadedQuery } from '$lib/queries/client';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { Route } from '$lib/route';
-import { copyToClipboard } from '$lib/utils';
 
 export const getPagesProvider = ($t: MessageFormatter) => {
   const adminPages: ActionItem[] = [
diff --git a/web/src/lib/components/ActionMenuItem.svelte b/web/src/lib/components/ActionMenuItem.svelte
index b1f041cdf..7ff5312f2 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';
+  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
+  import { isEnabled } from '#lib/utils.js';
   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 89b10b2d7..2ecccced0 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';
+  import { TUNABLES } from '#lib/utils/tunables.js';
 
   // Chrome renders HDR images with normally invisible seam lines in a regular
   // grid pattern. When the user pinch/scroll zooms, these seams become visible
@@ -50,20 +50,20 @@
 </script>
 
 <script lang="ts">
-  import AlphaBackground from '$lib/components/AlphaBackground.svelte';
-  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
-  import DelayedLoadingSpinner from '$lib/components/DelayedLoadingSpinner.svelte';
-  import ImageLayer from '$lib/components/ImageLayer.svelte';
-  import Thumbhash from '$lib/components/Thumbhash.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { getAssetUrls } from '$lib/utils';
-  import { AdaptiveImageLoader, type QualityList } from '$lib/utils/adaptive-image-loader.svelte';
-  import { scaleToCover, scaleToFit, type Size } from '$lib/utils/container-utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import AlphaBackground from '#lib/components/AlphaBackground.svelte';
+  import BrokenAsset from '#lib/components/assets/BrokenAsset.svelte';
+  import DelayedLoadingSpinner from '#lib/components/DelayedLoadingSpinner.svelte';
+  import ImageLayer from '#lib/components/ImageLayer.svelte';
+  import Thumbhash from '#lib/components/Thumbhash.svelte';
+  import { 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 type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
   import { untrack, type Snippet } from 'svelte';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
+  import { languageManager } from '#lib/managers/language-manager.svelte.js';
 
   type Props = {
     asset: AssetResponseDto;
diff --git a/web/src/lib/components/AdminCard.svelte b/web/src/lib/components/AdminCard.svelte
index 0d29d471d..192a9cbe0 100644
--- a/web/src/lib/components/AdminCard.svelte
+++ b/web/src/lib/components/AdminCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
+  import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
   import { Card, CardBody, CardHeader, CardTitle, Icon, type ActionItem, type IconLike } from '@immich/ui';
   import type { Snippet } from 'svelte';
 
diff --git a/web/src/lib/components/AlphaBackground.svelte b/web/src/lib/components/AlphaBackground.svelte
index 5c3869d58..04f365b1e 100644
--- a/web/src/lib/components/AlphaBackground.svelte
+++ b/web/src/lib/components/AlphaBackground.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
+  import { cleanClass } from '#lib';
   import type { ClassValue } from 'svelte/elements';
 
   interface Props {
diff --git a/web/src/lib/components/ApiKeyPermissionsPicker.svelte b/web/src/lib/components/ApiKeyPermissionsPicker.svelte
index 6eb2ca7cf..4b2060684 100644
--- a/web/src/lib/components/ApiKeyPermissionsPicker.svelte
+++ b/web/src/lib/components/ApiKeyPermissionsPicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ApiKeyGrid from '$lib/components/user-settings-page/UserApiKeyGrid.svelte';
+  import ApiKeyGrid from '#lib/components/user-settings-page/UserApiKeyGrid.svelte';
   import { Permission } from '@immich/sdk';
   import { Checkbox, IconButton, Input, Label } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
diff --git a/web/src/lib/components/AssetViewerEvents.svelte b/web/src/lib/components/AssetViewerEvents.svelte
index 98a7a661f..f51c6deb6 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';
-  import type { EventCallback, EventMap } from '$lib/utils/base-event-manager.svelte';
+  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 { onMount } from 'svelte';
 
   type Props = {
diff --git a/web/src/lib/components/BreadcrumbActionPage.svelte b/web/src/lib/components/BreadcrumbActionPage.svelte
index 451a285a5..3fd17a868 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';
+  import type { HeaderButtonActionItem } from '#lib/types.js';
   import {
     Breadcrumbs,
     Button,
diff --git a/web/src/lib/components/CalendarHeatmap.svelte b/web/src/lib/components/CalendarHeatmap.svelte
index 7e4a1b5a0..9b92c59c8 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';
+  import { locale } from '#lib/stores/preferences.store.js';
   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 d9ca2497a..c214fed94 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';
+  import type { HeaderButtonActionItem } from '#lib/types.js';
   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 06b68c059..bd4453815 100644
--- a/web/src/lib/components/Image.spec.ts
+++ b/web/src/lib/components/Image.spec.ts
@@ -1,8 +1,8 @@
+import Image from '#lib/components/Image.svelte';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
 import { fireEvent, render } from '@testing-library/svelte';
-import Image from '$lib/components/Image.svelte';
-import { cancelImageUrl } from '$lib/utils/sw-messaging';
 
-vi.mock('$lib/utils/sw-messaging', () => ({
+vi.mock('#lib/utils/sw-messaging.js', () => ({
   cancelImageUrl: vi.fn(),
 }));
 
diff --git a/web/src/lib/components/Image.svelte b/web/src/lib/components/Image.svelte
index bec590817..039876d15 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';
-  import { cancelImageUrl } from '$lib/utils/sw-messaging';
+  import { isFirefox } from '#lib/utils/asset-utils.js';
+  import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
   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 40bf7d696..aa3af8c1d 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';
+  import Image from '#lib/components/Image.svelte';
+  import type { AdaptiveImageLoader, ImageQuality } from '#lib/utils/adaptive-image-loader.svelte.js';
 
   type Props = {
     adaptiveImageLoader: AdaptiveImageLoader;
diff --git a/web/src/lib/components/LoadingDots.svelte b/web/src/lib/components/LoadingDots.svelte
index 7e6692021..a16f595a0 100644
--- a/web/src/lib/components/LoadingDots.svelte
+++ b/web/src/lib/components/LoadingDots.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
+  import { cleanClass } from '#lib';
   import type { ClassValue } from 'svelte/elements';
 
   interface Props {
diff --git a/web/src/lib/components/OnEvents.svelte b/web/src/lib/components/OnEvents.svelte
index 122ef3c45..81179941b 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';
-  import type { EventCallback, EventMap } from '$lib/utils/base-event-manager.svelte';
+  import { eventManager, type Events } from '#lib/managers/event-manager.svelte.js';
+  import type { EventCallback, EventMap } from '#lib/utils/base-event-manager.svelte.js';
   import { onMount } from 'svelte';
 
   type Props = {
diff --git a/web/src/lib/components/SchemaAlbumPicker.svelte b/web/src/lib/components/SchemaAlbumPicker.svelte
index 34df3ca09..bb0e06ea4 100644
--- a/web/src/lib/components/SchemaAlbumPicker.svelte
+++ b/web/src/lib/components/SchemaAlbumPicker.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import AlbumThumbnail from '$lib/components/album-page/AlbumThumbnail.svelte';
+  import AlbumThumbnail from '#lib/components/album-page/AlbumThumbnail.svelte';
   import { Button, Text, Label, modalManager } from '@immich/ui';
-  import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
+  import AlbumPickerModal from '#lib/modals/AlbumPickerModal.svelte';
   import { t } from 'svelte-i18n';
 
   type Props = {
diff --git a/web/src/lib/components/SchemaConfiguration.svelte b/web/src/lib/components/SchemaConfiguration.svelte
index 738051135..3ded60fe8 100644
--- a/web/src/lib/components/SchemaConfiguration.svelte
+++ b/web/src/lib/components/SchemaConfiguration.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  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';
+  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 {
     CodeBlock,
     Field,
diff --git a/web/src/lib/components/SchemaTagPicker.svelte b/web/src/lib/components/SchemaTagPicker.svelte
index 7e1214e58..44d7cc605 100644
--- a/web/src/lib/components/SchemaTagPicker.svelte
+++ b/web/src/lib/components/SchemaTagPicker.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Combobox from '$lib/components/shared-components/Combobox.svelte';
-  import TagPill from '$lib/components/shared-components/TagPill.svelte';
+  import Combobox from '#lib/components/shared-components/Combobox.svelte';
+  import TagPill from '#lib/components/shared-components/TagPill.svelte';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/SharedLinkExpiration.svelte b/web/src/lib/components/SharedLinkExpiration.svelte
index 5dea4c539..cca92ff0b 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';
+  import { locale } from '#lib/stores/preferences.store.js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/SharedLinkFormFields.spec.ts b/web/src/lib/components/SharedLinkFormFields.spec.ts
index 602d9e17e..2f47f6ff3 100644
--- a/web/src/lib/components/SharedLinkFormFields.spec.ts
+++ b/web/src/lib/components/SharedLinkFormFields.spec.ts
@@ -1,5 +1,5 @@
+import { renderWithTooltips } from '#tests/helpers';
 import userEvent from '@testing-library/user-event';
-import { renderWithTooltips } from '$tests/helpers';
 import SharedLinkFormFields from './SharedLinkFormFields.svelte';
 
 describe('SharedLinkFormFields component', () => {
diff --git a/web/src/lib/components/SharedLinkFormFields.svelte b/web/src/lib/components/SharedLinkFormFields.svelte
index 30067bcb9..3e4477623 100644
--- a/web/src/lib/components/SharedLinkFormFields.svelte
+++ b/web/src/lib/components/SharedLinkFormFields.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
+  import SharedLinkExpiration from '#lib/components/SharedLinkExpiration.svelte';
   import { Field, HelperText, Input, PasswordInput, Switch, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/Thumbhash.svelte b/web/src/lib/components/Thumbhash.svelte
index 5cda4ad53..f8390f079 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';
-  import { TUNABLES } from '$lib/utils/tunables';
+  import { decodeBase64 } from '#lib/utils.js';
+  import { TUNABLES } from '#lib/utils/tunables.js';
   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 98832ac25..138e022ee 100644
--- a/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
+++ b/web/src/lib/components/admin-settings/StorageTemplateSettings.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { getAdminConfigQuery, updateAdminConfigMutation } from '$lib/queries/config-admin.query';
-  import StorageTemplateVariablesModal from '$lib/modals/StorageTemplateVariablesModal.svelte';
-  import { Route } from '$lib/route';
+  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 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 StorageTemplateVariablesModal from '#lib/modals/StorageTemplateVariablesModal.svelte';
+  import { Route } from '#lib/route.js';
   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 7b48f5f58..b1fb2efcc 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';
+  import { locale } from '#lib/stores/preferences.store.js';
   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 ea1683f67..89f064b81 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';
-  import { getShortDateRange } from '$lib/utils/date-time';
+  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 { 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 5eae00bb5..b30f600ba 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';
-  import { getAlbumActions } from '$lib/services/album.service';
-  import { albumViewSettings } from '$lib/stores/preferences.store';
-  import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '$lib/utils/album-utils';
+  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 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 971ae73f2..5c34a1fa7 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';
+  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 { 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 50448cc60..ae1cc385f 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';
-  import MapModal from '$lib/modals/MapModal.svelte';
-  import { getAlbumMapMarkersQuery } from '$lib/queries/album.query';
-  import { navigate } from '$lib/utils/navigation';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import MapModal from '#lib/modals/MapModal.svelte';
+  import { getAlbumMapMarkersQuery } from '#lib/queries/album.query.js';
+  import { navigate } from '#lib/utils/navigation.js';
   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 30e38c334..279e21a5d 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';
-  import { locale } from '$lib/stores/preferences.store';
+  import { getSharedLinkActions } from '#lib/services/shared-link.service.js';
+  import { locale } from '#lib/stores/preferences.store.js';
   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 8f119a70d..a1b17a326 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';
+  import { getAlbumDateRange } from '#lib/utils/date-time.js';
   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 fcee879e6..d46cc4df3 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';
-  import { queryClient } from '$lib/queries/client';
+  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 { 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 056854b5e..6b1209d55 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';
-  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';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { handleDownloadAlbum } from '$lib/services/album.service';
-  import { getGlobalActions } from '$lib/services/app.service';
-  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  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 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';
-  import { getPublicConfigQuery } from '$lib/queries/config-public.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
 
   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 b8c759a96..0212c8c0a 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';
-  import { handleDeleteAlbum, isAlbumOwner } from '$lib/services/album.service';
+  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 {
     AlbumFilter,
     AlbumGroupBy,
@@ -11,9 +11,14 @@
     locale,
     SortOrder,
     type AlbumViewSettings,
-  } from '$lib/stores/preferences.store';
-  import { getSelectedAlbumGroupOption, sortAlbums, stringToSortOrder, type AlbumGroup } from '$lib/utils/album-utils';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  } from '#lib/stores/preferences.store.js';
+  import {
+    getSelectedAlbumGroupOption,
+    sortAlbums,
+    stringToSortOrder,
+    type AlbumGroup,
+  } from '#lib/utils/album-utils.js';
+  import { normalizeSearchString } from '#lib/utils/string-utils.js';
   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 af1d83ce5..75418d904 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';
+  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 {
     isAlbumGroupCollapsed,
     sortOptionsMetadata,
     toggleAlbumGroupCollapsing,
     type AlbumGroup,
-  } from '$lib/utils/album-utils';
+  } from '#lib/utils/album-utils.js';
   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 4c018f745..038d38944 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';
-  import type { AlbumSortOptionMetadata } from '$lib/utils/album-utils';
+  import { albumViewSettings, SortOrder, AlbumSortBy } from '#lib/stores/preferences.store.js';
+  import type { AlbumSortOptionMetadata } from '#lib/utils/album-utils.js';
   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 1ff9f33a1..8c81438ad 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';
-  import Portal from '$lib/elements/Portal.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { Route } from '$lib/route';
-  import { getAlbumActions } from '$lib/services/album.service';
-  import { locale } from '$lib/stores/preferences.store';
+  import { dateFormats } from '#lib/constants.js';
+  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 { 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 0134dfa92..8e00a39f3 100644
--- a/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts
@@ -1,8 +1,8 @@
+import { sdkMock } from '#lib/__mocks__/sdk.mock.js';
 import '@testing-library/jest-dom';
 import { render, waitFor, type RenderResult } from '@testing-library/svelte';
 import { init, register, waitLocale } from 'svelte-i18n';
-import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { albumFactory } from '@test-data/factories/album-factory';
+import { albumFactory } from '#test-data/factories/album-factory';
 import AlbumCard from '../AlbumCard.svelte';
 
 describe('AlbumCard component', () => {
@@ -10,7 +10,7 @@ describe('AlbumCard component', () => {
 
   beforeAll(async () => {
     await init({ fallbackLocale: 'en-US' });
-    register('en-US', () => import('$i18n/en.json'));
+    register('en-US', () => import('#i18n/en.json'));
     await waitLocale('en-US');
   });
 
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 2f51e9e3d..65c93825e 100644
--- a/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts
@@ -1,9 +1,9 @@
+import AlbumCover from '#lib/components/album-page/AlbumCover.svelte';
+import { getAssetMediaUrl } from '#lib/utils.js';
 import { render } from '@testing-library/svelte';
-import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
-import { getAssetMediaUrl } from '$lib/utils';
-import { albumFactory } from '@test-data/factories/album-factory';
+import { albumFactory } from '#test-data/factories/album-factory';
 
-vi.mock('$lib/utils');
+vi.mock('#lib/utils.js');
 
 describe('AlbumCover component', () => {
   it('renders an image when the album has a thumbnail', () => {
diff --git a/web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts b/web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts
index cefad1d1a..2fe286345 100644
--- a/web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/AlbumSummary.spec.ts
@@ -2,17 +2,17 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
 import { init, register, waitLocale } from 'svelte-i18n';
 import { writable } from 'svelte/store';
-import { albumFactory } from '@test-data/factories/album-factory';
+import { albumFactory } from '#test-data/factories/album-factory';
 import AlbumSummary from '../AlbumSummary.svelte';
 
-vitest.mock('$lib/stores/preferences.store', () => ({
+vitest.mock('#lib/stores/preferences.store.js', () => ({
   locale: writable('en'),
 }));
 
 describe('AlbumSummary component', () => {
   beforeAll(async () => {
     await init({ fallbackLocale: 'en-US' });
-    register('en-US', () => import('$i18n/en.json'));
+    register('en-US', () => import('#i18n/en.json'));
     await waitLocale('en-US');
   });
 
diff --git a/web/src/lib/components/asset-viewer/ActivityStatus.svelte b/web/src/lib/components/asset-viewer/ActivityStatus.svelte
index 34e3c482a..de6b12093 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';
-  import { locale } from '$lib/stores/preferences.store';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import { locale } from '#lib/stores/preferences.store.js';
   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 7644fbddb..2295b8e0c 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';
-  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { activityManager } from '$lib/managers/activity-manager.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { Route } from '$lib/route';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl } from '$lib/utils';
-  import { getAssetType } from '$lib/utils/asset-utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { isTenMinutesApart } from '$lib/utils/timesince';
+  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 { 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 3d4be59a2..5e5e9ac9e 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';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { getAssetMediaUrl } from '$lib/utils';
-  import { normalizeSearchString } from '$lib/utils/string-utils.js';
+  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 { 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 4d6bb1eb3..01a8f5d64 100644
--- a/web/src/lib/components/asset-viewer/AssetViewer.spec.ts
+++ b/web/src/lib/components/asset-viewer/AssetViewer.spec.ts
@@ -1,16 +1,16 @@
+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 { renderWithTooltips } from '#tests/helpers';
 import { updateAsset } from '@immich/sdk';
 import { fireEvent, waitFor } from '@testing-library/svelte';
-import { getAnimateMock } from '$lib/__mocks__/animate.mock';
-import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-import { renderWithTooltips } from '$tests/helpers';
-import { assetFactory } from '@test-data/factories/asset-factory';
-import { preferencesFactory } from '@test-data/factories/preferences-factory';
-import { userAdminFactory } from '@test-data/factories/user-factory';
+import { assetFactory } from '#test-data/factories/asset-factory';
+import { preferencesFactory } from '#test-data/factories/preferences-factory';
+import { userAdminFactory } from '#test-data/factories/user-factory';
 import AssetViewer from './AssetViewer.svelte';
 
-vi.mock('$lib/managers/feature-flags-manager.svelte', () => ({
+vi.mock('#lib/managers/feature-flags-manager.svelte.js', () => ({
   featureFlagsManager: {
     init: vi.fn(),
     loadFeatureFlags: vi.fn(),
@@ -18,7 +18,7 @@ vi.mock('$lib/managers/feature-flags-manager.svelte', () => ({
   } as never,
 }));
 
-vi.mock('$lib/stores/ocr.svelte', () => ({
+vi.mock('#lib/stores/ocr.svelte.js', () => ({
   ocrManager: {
     clear: vi.fn(),
     getAssetOcr: vi.fn(),
diff --git a/web/src/lib/components/asset-viewer/AssetViewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte
index 7753fe79d..ea6a4bed4 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/environment';
-  import { focusTrap } from '$lib/actions/focus-trap';
-  import { shortcuts } from '$lib/actions/shortcut';
-  import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  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';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { AssetAction, ProjectionType } from '$lib/constants';
-  import { activityManager } from '$lib/managers/activity-manager.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { getAssetActions } from '$lib/services/asset.service';
-  import { faceManager } from '$lib/stores/face.svelte';
-  import { ocrManager } from '$lib/stores/ocr.svelte';
-  import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-  import { getSharedLink, handlePromiseError } from '$lib/utils';
-  import type { OnUndoDelete } from '$lib/utils/actions';
-  import { navigateToAsset } from '$lib/utils/asset-utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { navigate } from '$lib/utils/navigation';
-  import { InvocationTracker } from '$lib/utils/invocationTracker';
-  import { SlideshowHistory } from '$lib/utils/slideshow-history';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  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 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 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 {
     AssetTypeEnum,
     getAssetInfo,
@@ -440,6 +440,7 @@
     if (assetViewerManager.isPlayingMotionPhoto && asset.livePhotoVideoId) {
       return 'LiveVideoViewer';
     }
+
     if (
       asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR ||
       (asset.originalPath && asset.originalPath.toLowerCase().endsWith('.insp'))
@@ -458,14 +459,12 @@
       ((album && album.isActivityEnabled) || activityManager.commentCount > 0) &&
       !activityManager.isLoading,
   );
-
   const showOcrButton = $derived(
     $slideshowState === SlideshowState.None &&
       asset.type === AssetTypeEnum.Image &&
       !assetViewerManager.isShowEditor &&
       ocrManager.hasOcrData,
   );
-
   const { Tag, TagPeople } = $derived(getAssetActions($t, asset));
   const showDetailPanel = $derived(
     asset.hasMetadata &&
@@ -507,7 +506,7 @@
     { shortcut: { key: 'ArrowUp' }, onShortcut: () => navigateStack('previous') },
     { shortcut: { key: 'ArrowDown' }, onShortcut: () => navigateStack('next') },
   ]}
-/>
+></svelte:document>
 
 <section
   id="immich-asset-viewer"
diff --git a/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts b/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
index 3d89971ab..ddae3e68f 100644
--- a/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
+++ b/web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts
@@ -1,16 +1,16 @@
+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 { renderWithTooltips } from '#tests/helpers';
 import type { UserConfigDto } from '@immich/sdk';
 import '@testing-library/jest-dom';
-import { getResizeObserverMock } from '$lib/__mocks__/resize-observer.mock';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { renderWithTooltips } from '$tests/helpers';
-import { assetFactory } from '@test-data/factories/asset-factory';
-import { preferencesFactory } from '@test-data/factories/preferences-factory';
-import { userAdminFactory } from '@test-data/factories/user-factory';
+import { assetFactory } from '#test-data/factories/asset-factory';
+import { preferencesFactory } from '#test-data/factories/preferences-factory';
+import { userAdminFactory } from '#test-data/factories/user-factory';
 import AssetViewerNavBar from './AssetViewerNavBar.svelte';
 
-vi.mock(import('$lib/managers/feature-flags-manager.svelte'), function () {
+vi.mock(import('#lib/managers/feature-flags-manager.svelte.js'), function () {
   return {
     featureFlagsManager: {
       init: vi.fn(),
diff --git a/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte b/web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte
index 6cbf28c78..934a3e770 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';
-  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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
-  import { getAlbumAssetActions } from '$lib/services/album.service';
-  import { getGlobalActions } from '$lib/services/app.service';
-  import { getAssetActions } from '$lib/services/asset.service';
-  import { getPersonAssetActions } from '$lib/services/person.service';
-  import { getStackActions } from '$lib/services/stack.service';
-  import { getSharedLink, withoutIcons } from '$lib/utils';
-  import type { OnUndoDelete } from '$lib/utils/actions';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.js';
+  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 {
     AssetTypeEnum,
     AssetVisibility,
diff --git a/web/src/lib/components/asset-viewer/DetailPanel.svelte b/web/src/lib/components/asset-viewer/DetailPanel.svelte
index a0e48e8f5..4d4d2729f 100644
--- a/web/src/lib/components/asset-viewer/DetailPanel.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanel.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import DetailPanelDate from '$lib/components/asset-viewer/DetailPanelDate.svelte';
-  import DetailPanelDescription from '$lib/components/asset-viewer/DetailPanelDescription.svelte';
-  import DetailPanelLocation from '$lib/components/asset-viewer/DetailPanelLocation.svelte';
-  import DetailPanelRating from '$lib/components/asset-viewer/DetailPanelStarRating.svelte';
-  import DetailPanelTags from '$lib/components/asset-viewer/DetailPanelTags.svelte';
-  import { timeToLoadTheMap } from '$lib/constants';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { Route } from '$lib/route';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl } from '$lib/utils';
-  import { delay, getDimensions } from '$lib/utils/asset-utils';
-  import { getByteUnitString } from '$lib/utils/byte-units';
-  import { getParentPath } from '$lib/utils/tree-utils';
+  import DetailPanelDate from '#lib/components/asset-viewer/DetailPanelDate.svelte';
+  import DetailPanelDescription from '#lib/components/asset-viewer/DetailPanelDescription.svelte';
+  import DetailPanelLocation from '#lib/components/asset-viewer/DetailPanelLocation.svelte';
+  import 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 { AssetMediaSize, getAssetInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import { createQuery } from '@tanstack/svelte-query';
   import { Icon, IconButton, Link, LoadingSpinner, Text } from '@immich/ui';
@@ -24,11 +24,11 @@
   import PersonSidePanel from '../faces-page/PersonSidePanel.svelte';
   import UserAvatar from '../shared-components/UserAvatar.svelte';
   import AlbumListItemDetails from './AlbumListItemDetails.svelte';
-  import DetailPanelPeople from '$lib/components/asset-viewer/DetailPanelPeople.svelte';
-  import { faceManager } from '$lib/stores/face.svelte';
-  import { getAlbumsByAssetQuery } from '$lib/queries/album.query';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getPublicConfigQuery } from '$lib/queries/config-public.query';
+  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';
 
   const query = createPreloadedQuery(getPublicConfigQuery);
   const publicConfig = $derived(query.data);
@@ -267,7 +267,7 @@
 
   {#if latlng && publicConfig.map.enabled}
     <div class="h-90">
-      {#await import('$lib/components/shared-components/map/Map.svelte')}
+      {#await import('#lib/components/shared-components/map/Map.svelte')}
         {#await delay(timeToLoadTheMap) then}
           <!-- show the loading spinner only if loading the map takes too much time -->
           <div class="flex size-full items-center justify-center">
diff --git a/web/src/lib/components/asset-viewer/DetailPanelDate.svelte b/web/src/lib/components/asset-viewer/DetailPanelDate.svelte
index 65578735e..8b071e322 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';
-  import AssetChangeDateModal from '$lib/modals/AssetChangeDateModal.svelte';
-  import { locale } from '$lib/stores/preferences.store';
-  import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  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 { 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.spec.ts b/web/src/lib/components/asset-viewer/DetailPanelDescription.spec.ts
index 488c2ac12..d181851d6 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelDescription.spec.ts
+++ b/web/src/lib/components/asset-viewer/DetailPanelDescription.spec.ts
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { assetFactory } from '@test-data/factories/asset-factory';
+import { assetFactory } from '#test-data/factories/asset-factory';
 import DetailPanelDescription from './DetailPanelDescription.svelte';
 
 describe('DetailPanelDescription', () => {
diff --git a/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
index 14d123dad..0a1047684 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 cb97e33e6..9005bf46d 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';
+  import GeolocationPointPickerModal from '#lib/modals/GeolocationPointPickerModal.svelte';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 92a58b940..07397bad0 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { Route } from '$lib/route';
-  import { faceManager } from '$lib/stores/face.svelte';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
+  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 { 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 fd4d63d3b..ad6f1b8ab 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';
-  import { handlePromiseError } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 78fde05d7..4f56d22c3 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';
-  import { Route } from '$lib/route';
-  import { getAssetActions } from '$lib/services/asset.service';
-  import { removeTag } from '$lib/utils/asset-utils';
+  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 { 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 2708bf7db..ef04644b0 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';
-  import { getAssetUrl } from '$lib/utils';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { getAssetUrl } from '#lib/utils.js';
   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 10470b43d..28b92c2d3 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';
-  import type { OcrBox } from '$lib/utils/ocr-utils';
-  import { calculateBoundingBoxMatrix, calculateFittedFontSize } from '$lib/utils/ocr-utils';
+  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';
 
   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 a772f6bf7..ef5f66fcc 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';
+  import { ocrManager } from '#lib/stores/ocr.svelte.js';
   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 a98418d65..00a1ab15a 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';
-  import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
-  import { assetViewerManager, type Faces } from '$lib/managers/asset-viewer-manager.svelte';
-  import { ocrManager, type OcrBoundingBox } from '$lib/stores/ocr.svelte';
-  import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
-  import { calculateBoundingBoxMatrix, getOcrBoundingBoxes, type Point } from '$lib/utils/ocr-utils';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  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 {
     EquirectangularAdapter,
     Viewer,
diff --git a/web/src/lib/components/asset-viewer/PhotoViewer.svelte b/web/src/lib/components/asset-viewer/PhotoViewer.svelte
index e73c05b8a..270635248 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';
-  import { zoomImageAction } from '$lib/actions/zoom-image';
-  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';
-  import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { faceManager } from '$lib/stores/face.svelte';
-  import { ocrManager } from '$lib/stores/ocr.svelte';
-  import { SlideshowLook, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
-  import { getNaturalSize, scaleToFit, type Size } from '$lib/utils/container-utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
-  import { getBoundingBox, type BoundingBox } from '$lib/utils/people-utils';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { zoomImageAction } from '#lib/actions/zoom-image.js';
+  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 { 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 24386a246..ec9ed17ec 100644
--- a/web/src/lib/components/asset-viewer/PreloadManager.svelte.ts
+++ b/web/src/lib/components/asset-viewer/PreloadManager.svelte.ts
@@ -1,7 +1,7 @@
+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 type { AssetResponseDto, SharedLinkResponseDto } from '@immich/sdk';
-import { loadImage } from '$lib/actions/image-loader.svelte';
-import { getAssetUrls } from '$lib/utils';
-import { AdaptiveImageLoader, type QualityList } from '$lib/utils/adaptive-image-loader.svelte';
 
 type AssetCursor = {
   current: AssetResponseDto;
diff --git a/web/src/lib/components/asset-viewer/SlideshowBar.svelte b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
index 26ea9fa36..054c8929e 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';
-  import ProgressBar from '$lib/components/shared-components/progress-bar/ProgressBar.svelte';
-  import { ProgressBarStatus } from '$lib/constants';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
-  import SlideshowSettingsModal from '$lib/modals/SlideshowSettingsModal.svelte';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
+  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.js';
+  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 SlideshowSettingsModal from '#lib/modals/SlideshowSettingsModal.svelte';
+  import { SlideshowNavigation, SlideshowState, slideshowStore } from '#lib/stores/slideshow.store.js';
   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 a32157359..5b675400b 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';
-  import { fromISODateTime, fromISODateTimeUTC } from '$lib/utils/timeline-util';
+  import { SlideshowMetadataOverlayMode, slideshowStore } from '#lib/stores/slideshow.store.js';
+  import { fromISODateTime, fromISODateTimeUTC } from '#lib/utils/timeline-util.js';
   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 ad82ff6f0..b1fdd0add 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';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { mediaCapabilitiesManager } from '$lib/managers/media-capabilities-manager.svelte';
-  import { autoPlayVideo, lang, loopVideo as loopVideoPreference } from '$lib/stores/preferences.store';
-  import { getAssetHlsSessionUrl, getAssetHlsUrl, getAssetMediaUrl, getAssetPlaybackUrl } from '$lib/utils';
+  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 { 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';
-  import { getPublicConfigQuery } from '$lib/queries/config-public.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
 
   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 08b6058d2..91a3e0653 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';
+  import { getAssetPlaybackUrl, getAssetUrl } from '#lib/utils.js';
   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 040a22f04..bc5ba8cee 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { castManager, CastState } from '#lib/managers/cast-manager.svelte.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 ddcf16c3d..8e0a136a9 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';
+  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 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 d60ae5815..59bc25d77 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';
-  import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { AssetAction } from '$lib/constants';
-  import { toggleArchive } from '$lib/utils/asset-utils';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  import type { OnAction, PreAction } from '#lib/components/asset-viewer/actions/action.js';
+  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 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.spec.ts b/web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts
index 2b9f9bb9c..ebf18a36a 100644
--- a/web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts
+++ b/web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts
@@ -1,10 +1,10 @@
+import { renderWithTooltips } from '#tests/helpers';
 import type { AssetResponseDto } from '@immich/sdk';
 import '@testing-library/jest-dom';
-import { renderWithTooltips } from '$tests/helpers';
-import { assetFactory } from '@test-data/factories/asset-factory';
+import { assetFactory } from '#test-data/factories/asset-factory';
 import DeleteAction from './DeleteAction.svelte';
 
-vi.mock(import('$lib/managers/feature-flags-manager.svelte'), () => {
+vi.mock(import('#lib/managers/feature-flags-manager.svelte.js'), () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return { featureFlagsManager: { init: vi.fn(), loadFeatureFlags: vi.fn(), value: { trash: true } } as any };
 });
diff --git a/web/src/lib/components/asset-viewer/actions/DeleteAction.svelte b/web/src/lib/components/asset-viewer/actions/DeleteAction.svelte
index 60cf59a7c..5b9dc8717 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';
-  import { AssetAction } from '$lib/constants';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { deleteAssets as deleteAssetsUtil, type OnUndoDelete } from '$lib/utils/actions';
-  import { handleError } from '$lib/utils/handle-error';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { AssetAction } from '#lib/constants.js';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  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 { 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 429c45cf5..b4fb9c768 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';
+  import { shortcuts } from '#lib/actions/shortcut.js';
   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';
+  import { languageManager } from '#lib/managers/language-manager.svelte.js';
 
   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 83da8e924..b5f34720a 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';
+  import { shortcuts } from '#lib/actions/shortcut.js';
   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';
+  import { languageManager } from '#lib/managers/language-manager.svelte.js';
 
   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 5a160801f..f010b21c3 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';
-  import { handleError } from '$lib/utils/handle-error';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  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 { 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 7c7c0a5e5..942565f7b 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';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 c02fadf81..91c417ba6 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';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+import type { AssetAction } from '#lib/constants.js';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
 
 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 d048375a1..63e620539 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';
-  import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
-  import { websocketEvents } from '$lib/stores/websocket';
+  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 { 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 759d72e2b..5036e1778 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';
-  import { getAssetMediaUrl } from '$lib/utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  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 { 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 b86f5b7ed..12d35f0d4 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';
-  import { transformManager } from '$lib/managers/edit/transform-manager.svelte';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { transformManager } from '#lib/managers/edit/transform-manager.svelte.js';
   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 1249bb933..c734833ad 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';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import FaceCreateTagModal from '$lib/modals/CreateFaceModal.svelte';
-  import { faceManager } from '$lib/stores/face.svelte';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  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 { 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/BrokenAsset.svelte b/web/src/lib/components/assets/BrokenAsset.svelte
index 0854c105e..e7647af06 100644
--- a/web/src/lib/components/assets/BrokenAsset.svelte
+++ b/web/src/lib/components/assets/BrokenAsset.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
+  import { cleanClass } from '#lib';
   import { Icon } from '@immich/ui';
   import { mdiImageBrokenVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts b/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
index c947cdeeb..d2635aeec 100644
--- a/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
+++ b/web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts
@@ -1,7 +1,7 @@
+import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
 import { fireEvent, render } from '@testing-library/svelte';
-import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
 
-vi.mock('$lib/utils/sw-messaging', () => ({
+vi.mock('#lib/utils/sw-messaging.js', () => ({
   cancelImageUrl: vi.fn(),
 }));
 
diff --git a/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
index 9709176d3..df6ce440b 100644
--- a/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
-  import Image from '$lib/components/Image.svelte';
+  import BrokenAsset from '#lib/components/assets/BrokenAsset.svelte';
+  import Image from '#lib/components/Image.svelte';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
   import type { ClassValue } from 'svelte/elements';
diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index f2c859e51..4d836524b 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { locale, playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl, getAssetPlaybackUrl } from '$lib/utils';
-  import { moveFocus } from '$lib/utils/focus-util';
-  import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
-  import { getAltText } from '$lib/utils/thumbnail-util';
+  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 { AssetMediaSize, AssetVisibility, type UserResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import {
@@ -24,7 +24,7 @@
   import { onMount } from 'svelte';
   import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
-  import Thumbhash from '$lib/components/Thumbhash.svelte';
+  import Thumbhash from '#lib/components/Thumbhash.svelte';
   import ImageThumbnail from './ImageThumbnail.svelte';
   import VideoThumbnail from './VideoThumbnail.svelte';
   interface Props {
diff --git a/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte b/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
index 63eedaf9c..6543e2e9c 100644
--- a/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/VideoThumbnail.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
+  import { cleanClass } from '#lib';
   import { Icon, LoadingSpinner } from '@immich/ui';
   import { mdiAlertCircleOutline, mdiPauseCircleOutline, mdiPlayCircleOutline } from '@mdi/js';
   import { Duration } from 'luxon';
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 c65f286dd..ee0d4ba64 100644
--- a/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
+++ b/web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts
@@ -1,10 +1,10 @@
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
+import Thumbnail from '#lib/components/assets/thumbnail/Thumbnail.svelte';
+import { getTabbable } from '#lib/utils/focus-util.js';
 import { render } from '@testing-library/svelte';
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
-import { getTabbable } from '$lib/utils/focus-util';
-import { assetFactory } from '@test-data/factories/asset-factory';
+import { assetFactory } from '#test-data/factories/asset-factory';
 
-vi.mock('$lib/utils/navigation', () => ({
+vi.mock('#lib/utils/navigation.js', () => ({
   currentUrlReplaceAssetId: vi.fn(),
   isSharedLinkRoute: vi.fn().mockReturnValue(false),
 }));
diff --git a/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte b/web/src/lib/components/faces-page/AssignFaceSidePanel.svelte
index d7f505add..dbc41e919 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';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { zoomImageToBase64 } from '$lib/utils/people-utils';
-  import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  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 { 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 39f273320..eac9a4e05 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';
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import SearchBar from '$lib/elements/SearchBar.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { searchNameLocal } from '$lib/utils/person';
+  import { initInput } from '#lib/actions/focus.js';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '#lib/constants.js';
+  import SearchBar from '#lib/elements/SearchBar.svelte';
+  import { handleError } from '#lib/utils/handle-error.js';
+  import { searchNameLocal } from '#lib/utils/person.js';
   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 77afcf00f..b04bdc9f6 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';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
-  import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { zoomImageToBase64 } from '$lib/utils/people-utils';
-  import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  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 {
     AssetTypeEnum,
     createPerson,
diff --git a/web/src/lib/components/layouts/AdminPageLayout.svelte b/web/src/lib/components/layouts/AdminPageLayout.svelte
index 7d2003f22..536596e83 100644
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  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';
-  import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import type { HeaderButtonActionItem } from '$lib/types';
+  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 { 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 6bce18f69..b5eb3b1be 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';
-  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';
-  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import { useActions, type ActionArray } from '#lib/actions/use-actions.js';
+  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 { 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 548c69172..f97d56376 100644
--- a/web/src/lib/components/maintenance/MaintenanceBackupEntry.spec.ts
+++ b/web/src/lib/components/maintenance/MaintenanceBackupEntry.spec.ts
@@ -1,11 +1,11 @@
+import { locale } from '#lib/stores/preferences.store.js';
+import { renderWithTooltips } from '#tests/helpers';
 import { screen } from '@testing-library/svelte';
 import { DateTime } from 'luxon';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { locale } from '$lib/stores/preferences.store';
-import { renderWithTooltips } from '$tests/helpers';
 import MaintenanceBackupEntry from './MaintenanceBackupEntry.svelte';
 
-vi.mock('$lib/services/database-backups.service', () => ({
+vi.mock('#lib/services/database-backups.service.js', () => ({
   getDatabaseBackupActions: () => ({
     Download: { type: 'command', title: 'Download', onAction: vi.fn() },
     Delete: { type: 'command', title: 'Delete', onAction: vi.fn() },
diff --git a/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte b/web/src/lib/components/maintenance/MaintenanceBackupEntry.svelte
index 219956269..e2939b070 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';
-  import { getDatabaseBackupActions, handleRestoreDatabaseBackup } from '$lib/services/database-backups.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  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 { 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 b3b21a2f3..a38355dcc 100644
--- a/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
+++ b/web/src/lib/components/maintenance/MaintenanceBackupsList.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
-  import MaintenanceBackupEntry from '$lib/components/maintenance/MaintenanceBackupEntry.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { handleUploadDatabaseBackup } from '$lib/services/database-backups.service';
+  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 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 2b4285b80..8adc12adc 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';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import { getIntegrityReportItemActions } from '#lib/services/integrity.service.js';
   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 266f7d6a2..a5c0508da 100644
--- a/web/src/lib/components/pages/SharedLinkPage.svelte
+++ b/web/src/lib/components/pages/SharedLinkPage.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import AlbumViewer from '$lib/components/album-page/AlbumViewer.svelte';
-  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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { setSharedLink } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { navigate } from '$lib/utils/navigation';
+  import AlbumViewer from '#lib/components/album-page/AlbumViewer.svelte';
+  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 { sharedLinkLogin, SharedLinkType, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
   import { Button, Logo, PasswordInput } from '@immich/ui';
   import { onDestroy, tick } from 'svelte';
@@ -47,7 +47,7 @@
       await tick();
       await navigate(
         { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: assetViewerManager.gridScrollTarget },
-        { forceNavigate: true, replaceState: true },
+        { forceNavigate: true, replace: true },
       );
     } catch (error) {
       handleError(error, $t('errors.unable_to_get_shared_link'));
diff --git a/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte b/web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
index 71f16ba43..7acc237eb 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';
+  import { ByteUnit } from '#lib/utils/byte-units.js';
   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 82f9d329f..59b7e80c0 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';
-  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';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { Viewport } from '$lib/managers/timeline-manager/types';
-  import { Route } from '$lib/route';
-  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { handlePromiseError } from '$lib/utils';
-  import { downloadArchive } from '$lib/utils/asset-utils';
-  import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
-  import { handleError } from '$lib/utils/handle-error';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  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 { getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
   import { IconButton, Logo, toastManager } from '@immich/ui';
   import { mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
@@ -139,7 +139,7 @@
   </header>
 {:else if assets.length === 1}
   {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
-    {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
+    {#await import('#lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
       <AssetViewer cursor={{ current: asset }} onAction={handleAction} />
     {/await}
   {/await}
diff --git a/web/src/lib/components/shared-components/Combobox.svelte b/web/src/lib/components/shared-components/Combobox.svelte
index 83d56a550..2e53dc538 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';
-  import { shortcuts } from '$lib/actions/shortcut';
-  import { generateId } from '$lib/utils/generate-id';
+  import { focusOutside } from '#lib/actions/focus-outside.js';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { generateId } from '#lib/utils/generate-id.js';
   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 64e30ee66..a88180d84 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';
+  import NumberRangeInput from '#lib/components/shared-components/NumberRangeInput.svelte';
+  import { generateId } from '#lib/utils/generate-id.js';
   import { convert } from 'geo-coordinates-parser';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/shared-components/EmptyPlaceholder.svelte b/web/src/lib/components/shared-components/EmptyPlaceholder.svelte
index d6cccf55b..b5173417a 100644
--- a/web/src/lib/components/shared-components/EmptyPlaceholder.svelte
+++ b/web/src/lib/components/shared-components/EmptyPlaceholder.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import empty1Url from '$lib/assets/empty-1.svg';
+  import empty1Url from '#lib/assets/empty-1.svg';
 
   interface Props {
     onClick?: undefined | ((event: MouseEvent) => unknown);
diff --git a/web/src/lib/components/shared-components/UserAvatar.svelte b/web/src/lib/components/shared-components/UserAvatar.svelte
index 0791df13d..5e4f1c156 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';
+  import { getProfileImageUrl } from '#lib/utils.js';
   import { type UserAvatarColor } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts b/web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts
index 60f6fff2e..08d2900a4 100644
--- a/web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts
+++ b/web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts
@@ -1,7 +1,7 @@
+import NumberRangeInput from '#lib/components/shared-components/NumberRangeInput.svelte';
 import { render, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { Mock } from 'vitest';
-import NumberRangeInput from '$lib/components/shared-components/NumberRangeInput.svelte';
 
 describe('NumberRangeInput component', () => {
   const user = userEvent.setup();
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 82e1185ca..f7168d0c7 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';
+  import { SCROLL_PROPERTIES } from '#lib/components/shared-components/album-selection/album-selection-utils.js';
   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 c7c3413b8..5f137b03e 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
@@ -1,11 +1,11 @@
-import type { AlbumResponseDto } from '@immich/sdk';
 import {
   type AlbumModalRow,
   AlbumModalRowConverter,
   AlbumModalRowType,
-} from '$lib/components/shared-components/album-selection/album-selection-utils';
-import { AlbumSortBy, SortOrder } from '$lib/stores/preferences.store';
-import { albumFactory } from '@test-data/factories/album-factory';
+} from '#lib/components/shared-components/album-selection/album-selection-utils.js';
+import { AlbumSortBy, SortOrder } from '#lib/stores/preferences.store.js';
+import type { AlbumResponseDto } from '@immich/sdk';
+import { albumFactory } from '#test-data/factories/album-factory';
 
 // Some helper functions to make tests below more readable
 const createNewAlbumRow = (selected: boolean) => ({
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 5d4e46a06..97fb9705f 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,8 +1,8 @@
+import { sortAlbums } from '#lib/utils/album-utils.js';
+import { normalizeSearchString } from '#lib/utils/string-utils.js';
 import type { AlbumResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import { sortAlbums } from '$lib/utils/album-utils';
-import { normalizeSearchString } from '$lib/utils/string-utils';
 
 export const SCROLL_PROPERTIES: ScrollIntoViewOptions = { block: 'center', behavior: 'smooth' };
 
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 e1e34b76d..3de1d5e95 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';
-  import { shortcuts } from '$lib/actions/shortcut';
-  import ContextMenu from '$lib/components/shared-components/context-menu/ContextMenu.svelte';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
-  import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
+  import { contextMenuNavigation } from '#lib/actions/context-menu-navigation.js';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  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 {
     getContextMenuPositionFromBoundingRect,
     getContextMenuPositionFromEvent,
     type Align,
-  } from '$lib/utils/context-menu';
-  import { generateId } from '$lib/utils/generate-id';
+  } from '#lib/utils/context-menu.js';
+  import { generateId } from '#lib/utils/generate-id.js';
   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 73f1406cc..a2389f096 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';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
+  import { clickOutside } from '#lib/actions/click-outside.js';
+  import { languageManager } from '#lib/managers/language-manager.svelte.js';
   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 4f629ca12..a239bb1f7 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';
-  import { shortcut as bindShortcut, shortcutLabel as computeShortcutLabel } from '$lib/actions/shortcut';
-  import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
-  import { generateId } from '$lib/utils/generate-id';
+  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 { 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 1d260867f..9e670d730 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';
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
-  import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
-  import { AssetAction } from '$lib/constants';
-  import Portal from '$lib/elements/Portal.svelte';
-  import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
-  import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
-  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-  import { Route } from '$lib/route';
-  import { keyboardManager } from '$lib/stores/keyboard-manager.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { deleteAssets } from '$lib/utils/actions';
-  import { archiveAssets, getNextAsset, getPreviousAsset, navigateToAsset } from '$lib/utils/asset-utils';
-  import { moveFocus } from '$lib/utils/focus-util';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
-  import { navigate } from '$lib/utils/navigation';
-  import { isTimelineAsset, toTimelineAsset } from '$lib/utils/timeline-util';
-  import { TUNABLES } from '$lib/utils/tunables';
+  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.js';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  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 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 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 { AssetVisibility, type AssetResponseDto } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
   import { debounce } from 'lodash-es';
@@ -385,7 +385,7 @@
 <!-- Overlay Asset Viewer -->
 {#if assetViewerManager.isViewing}
   <Portal target="body">
-    {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
+    {#await import('#lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
       <AssetViewer
         cursor={assetCursor}
         onAction={handleAction}
diff --git a/web/src/lib/components/shared-components/map/Map.svelte b/web/src/lib/components/shared-components/map/Map.svelte
index dc69366f8..6bc2713d0 100644
--- a/web/src/lib/components/shared-components/map/Map.svelte
+++ b/web/src/lib/components/shared-components/map/Map.svelte
@@ -10,11 +10,11 @@
 
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
-  import { mapSettings } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl, handlePromiseError } from '$lib/utils';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import MapSettingsModal from '#lib/modals/MapSettingsModal.svelte';
+  import { mapSettings } from '#lib/stores/preferences.store.js';
+  import { getAssetMediaUrl, handlePromiseError } from '#lib/utils.js';
   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';
-  import { getPublicConfigQuery } from '$lib/queries/config-public.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getPublicConfigQuery } from '#lib/queries/config-public.query.js';
 
   const query = createPreloadedQuery(getPublicConfigQuery);
   const publicConfig = $derived(query.data);
@@ -267,7 +267,9 @@
     }
   };
 
-  afterNavigate(() => {
+  afterNavigate(({ shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     if (!map) {
       return;
     }
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 3fa820e53..8d1c6abb7 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
-  import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
-  import { Route } from '$lib/route';
-  import { getAboutInfoQuery } from '$lib/queries/server.query';
+  import { focusTrap } from '#lib/actions/focus-trap.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  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 { 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 6b292ccf5..59e3320b1 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';
-  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';
-  import { Route } from '$lib/route';
-  import { getGlobalActions } from '$lib/services/app.service';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { getNotificationsQuery } from '$lib/queries/notification.query';
+  import { clickOutside } from '#lib/actions/click-outside.js';
+  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 { 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 61de26a7d..28496588b 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';
-  import NotificationItem from '$lib/components/shared-components/navigation-bar/NotificationItem.svelte';
-  import { OpenQueryParam } from '$lib/constants';
-  import { Route } from '$lib/route';
-  import { executeMutation } from '$lib/queries/client';
+  import { focusTrap } from '#lib/actions/focus-trap.js';
+  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 {
     getNotificationsQuery,
     updateNotificationMutation,
     updateNotificationsMutation,
-  } from '$lib/queries/notification.query';
+  } from '#lib/queries/notification.query.js';
   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 05b15eea7..1fd175391 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';
-  import { handlePromiseError } from '$lib/utils';
+  import { ProgressBarStatus } from '#lib/constants.js';
+  import { handlePromiseError } from '#lib/utils.js';
 
   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 4f309519f..8f8b6f5d7 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';
-  import { getLicenseLink as getProductLink } from '$lib/utils/license-utils';
+  import { ImmichProduct } from '#lib/constants.js';
+  import { getLicenseLink as getProductLink } from '#lib/utils/license-utils.js';
   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 c70c2dfe8..7087e333e 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';
-  import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
+  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 { 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 d4ae68e2b..5496468b7 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';
-  import { handleError } from '$lib/utils/handle-error';
-  import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
+  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 { 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 d0ef5988a..f8209bc70 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';
-  import { getLicenseLink } from '$lib/utils/license-utils';
+  import { ImmichProduct } from '#lib/constants.js';
+  import { getLicenseLink } from '#lib/utils/license-utils.js';
   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 0e9c18a42..caf4534e9 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';
-  import { shortcuts } from '$lib/actions/shortcut';
-  import { Route } from '$lib/route';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import { handlePromiseError } from '$lib/utils';
-  import { generateId } from '$lib/utils/generate-id';
+  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 { 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';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
   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 3fe6d0d08..197b9a04c 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';
-  import { handlePromiseError } from '$lib/utils';
+  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 { 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 e09f226f2..effb70dd6 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';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
   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 db1a08728..39221503c 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';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
   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 ab74aafb4..9aaeb181a 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';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
   import {
     getPeople,
     getSearchDatePreset,
@@ -36,7 +36,7 @@
     getSearchTypeTitle,
   } from './search-bar-utils';
   import { onMount } from 'svelte';
-  import { searchManager } from '$lib/managers/search-manager.svelte';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
   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 096f6e24c..6c1ddd205 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';
-  import { searchStore } from '$lib/stores/search.svelte';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
+  import { searchStore } from '#lib/stores/search.svelte.js';
   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 a09747e4b..a75170d12 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';
-  import { handlePromiseError } from '$lib/utils';
+  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 { 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 d494da098..76ef67f2a 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';
+  import { MediaType } from '#lib/constants.js';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { searchManager } from '$lib/managers/search-manager.svelte';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
   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 421db3198..809ffa449 100644
--- a/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
+++ b/web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
   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';
+  import SingleGridRow from '#lib/components/shared-components/SingleGridRow.svelte';
+  import SearchBar from '#lib/elements/SearchBar.svelte';
+  import { getPeopleThumbnailUrl } from '#lib/utils.js';
   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';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
 
   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 034bb46e1..d42b8db8b 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';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
   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 0778ba1cd..3d4414283 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,14 +1,14 @@
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
+import { getVisualViewportMock } from '#lib/__mocks__/visual-viewport.mock.js';
+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 type { TagResponseDto } from '@immich/sdk';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
-import SearchTagsSection from '$lib/components/shared-components/search-bar/SearchTagsSection.svelte';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { searchManager } from '$lib/managers/search-manager.svelte';
-import { preferencesFactory } from '@test-data/factories/preferences-factory';
-import { userAdminFactory } from '@test-data/factories/user-factory';
+import { preferencesFactory } from '#test-data/factories/preferences-factory';
+import { userAdminFactory } from '#test-data/factories/user-factory';
 
 const tag = (id: string, value: string): TagResponseDto => ({
   id,
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 f8b69e958..e8e44af49 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';
+  import Combobox, { type ComboBoxOption } from '#lib/components/shared-components/Combobox.svelte';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
   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';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
 
   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 8166f4a4b..339927bac 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';
+  import { searchManager } from '#lib/managers/search-manager.svelte.js';
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 b43e0b97d..30af0089c 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';
+import { isPopoverContent } from '#lib/components/shared-components/search-bar/search-bar-utils.js';
 
 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 7b56d1a25..4b9843799 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,10 +1,10 @@
+import { MediaType } from '#lib/constants.js';
+import { handleError } from '#lib/utils/handle-error.js';
 import { getAllPeople, type PersonResponseDto, type TagResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import { t } from 'svelte-i18n';
 import type { SvelteSet } from 'svelte/reactivity';
 import { get } from 'svelte/store';
-import { MediaType } from '$lib/constants';
-import { handleError } from '$lib/utils/handle-error';
 
 export enum SearchDatePreset {
   ThisYear,
diff --git a/web/src/lib/components/shared-components/settings/SettingAccordion.svelte b/web/src/lib/components/shared-components/settings/SettingAccordion.svelte
index 8d820047f..5beaafe8a 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';
+  import { accordionManager } from '#lib/managers/accordion-manager.svelte.js';
   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 4689b5d1c..ed5144cf5 100644
--- a/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
+++ b/web/src/lib/components/shared-components/settings/SettingInputField.spec.ts
@@ -1,6 +1,6 @@
+import { SettingInputFieldType } from '#lib/constants.js';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import { SettingInputFieldType } from '$lib/constants';
 import SettingInputField from './SettingInputField.svelte';
 
 describe('SettingInputField component', () => {
diff --git a/web/src/lib/components/shared-components/settings/SettingInputField.svelte b/web/src/lib/components/shared-components/settings/SettingInputField.svelte
index 6d0f54bd8..afa2ad45a 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';
+  import { SettingInputFieldType } from '#lib/constants.js';
   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 c20839333..edff338f0 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';
+  import { generateId } from '#lib/utils/generate-id.js';
   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 ca1e3059c..5f2f9209d 100644
--- a/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
+++ b/web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { invalidateAll } from '$app/navigation';
-  import Combobox from '$lib/components/shared-components/Combobox.svelte';
-  import { defaultLang } from '$lib/constants';
-  import { lang } from '$lib/stores/preferences.store';
-  import { convertBCP47, getClosestAvailableLocale, langCodes, langs } from '$lib/utils/i18n';
+  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 { refreshAll } from '$app/navigation';
   import { Label, Text } from '@immich/ui';
   import { locale as i18nLocale, t } from 'svelte-i18n';
 
@@ -24,7 +24,7 @@
 
     $lang = newLang;
     await i18nLocale.set(convertBCP47(newLang));
-    await invalidateAll();
+    await refreshAll();
   };
 
   let closestLanguage = $derived(getClosestAvailableLocale([$lang], langCodes));
diff --git a/web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte b/web/src/lib/components/shared-components/settings/SystemConfigButtonRow.svelte
index 4c4b1685b..e8fa8660d 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';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
   import {
     getAdminConfigDefaultsQuery,
     getAdminConfigQuery,
     updateAdminConfigMutation,
-  } from '$lib/queries/config-admin.query';
+  } from '#lib/queries/config-admin.query.js';
   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 740338ffb..6db874dbc 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';
-  import Portal from '$lib/elements/Portal.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import PurchaseModal from '$lib/modals/PurchaseModal.svelte';
-  import { Route } from '$lib/route';
-  import { getAccountAge } from '$lib/utils/auth';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getButtonVisibility } from '$lib/utils/purchase-utils';
+  import { OpenQueryParam } from '#lib/constants.js';
+  import Portal from '#lib/elements/Portal.svelte';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  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 { 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 ffd607441..34a31c25d 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,7 +1,7 @@
+import { sdkMock } from '#lib/__mocks__/sdk.mock.js';
+import RecentAlbums from '#lib/components/shared-components/side-bar/RecentAlbums.svelte';
 import { render, screen } from '@testing-library/svelte';
-import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import RecentAlbums from '$lib/components/shared-components/side-bar/RecentAlbums.svelte';
-import { albumFactory } from '@test-data/factories/album-factory';
+import { albumFactory } from '#test-data/factories/album-factory';
 
 describe('RecentAlbums component', () => {
   it('sorts albums by most recently updated', async () => {
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 6435c4d5b..7603f01d1 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';
-  import { queryClient } from '$lib/queries/client';
-  import { Route } from '$lib/route';
-  import { getAssetMediaUrl } from '$lib/utils';
+  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 { 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 036e69c42..3594261ab 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';
-  import { releaseManager } from '$lib/managers/release-manager.svelte';
-  import ServerAboutModal from '$lib/modals/ServerAboutModal.svelte';
-  import { getAboutInfoQuery, getVersionHistoryQuery } from '$lib/queries/server.query';
-  import { websocketStore } from '$lib/stores/websocket';
-  import { semverToName } from '$lib/utils';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { releaseManager } from '#lib/managers/release-manager.svelte.js';
+  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 { 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 c0f274005..508f2067f 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';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getStorageQuery } from '$lib/queries/server.query';
-  import { getByteUnitString } from '$lib/utils/byte-units';
+  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 { 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 c0ee418e5..21f594bc3 100644
--- a/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/UserSidebar.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  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';
-  import { Route } from '$lib/route';
-  import { recentAlbumsDropdown } from '$lib/stores/preferences.store';
+  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 { 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';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 b51d64e4f..106de776a 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';
+  import TreeItems from '#lib/components/shared-components/tree/TreeItems.svelte';
+  import { TreeNode } from '#lib/utils/tree-utils.js';
   import { Icon } from '@immich/ui';
   import { mdiChevronDown, mdiChevronRight } from '@mdi/js';
 
@@ -27,7 +27,7 @@
   href={getLink(node.path)}
   title={node.value}
   class={`flex grow place-items-center rounded-lg py-1 ps-2 text-sm hover:bg-slate-200 hover:font-semibold dark:hover:bg-slate-800 ${isTarget ? 'bg-slate-100 font-semibold text-primary dark:bg-slate-700' : 'dark:text-gray-200'}`}
-  data-sveltekit-keepfocus
+  data-sveltekit-reset={false}
 >
   {#if node.size > 0}
     <button type="button" {onclick}>
diff --git a/web/src/lib/components/shared-components/tree/TreeBreadcrumbs.svelte b/web/src/lib/components/shared-components/tree/TreeBreadcrumbs.svelte
index 2c4fea248..f663c2146 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';
+  import { TreeNode } from '#lib/utils/tree-utils.js';
   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 546c56ce7..1dd068e74 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';
+  import type { TreeNode } from '#lib/utils/tree-utils.js';
   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 2474e01eb..83cbfa1f5 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';
+  import Tree from '#lib/components/shared-components/tree/Tree.svelte';
+  import { type TreeNode } from '#lib/utils/tree-utils.js';
 
   interface Props {
     tree: TreeNode;
diff --git a/web/src/lib/components/sharedlinks-page/covers/AssetCover.svelte b/web/src/lib/components/sharedlinks-page/covers/AssetCover.svelte
index 21600ba04..deb9a9cf2 100644
--- a/web/src/lib/components/sharedlinks-page/covers/AssetCover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/AssetCover.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
-  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
+  import { cleanClass } from '#lib';
+  import BrokenAsset from '#lib/components/assets/BrokenAsset.svelte';
 
   interface Props {
     alt?: string;
diff --git a/web/src/lib/components/sharedlinks-page/covers/NoCover.svelte b/web/src/lib/components/sharedlinks-page/covers/NoCover.svelte
index 319a5e7f9..d112ec078 100644
--- a/web/src/lib/components/sharedlinks-page/covers/NoCover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/NoCover.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
+  import { cleanClass } from '#lib';
 
   interface Props {
     alt?: string;
@@ -17,5 +17,5 @@
   draggable="false"
   loading={preload ? 'eager' : 'lazy'}
   sizes="min(271px,186px)"
-  src="$lib/assets/no-thumbnail.png"
+  src="#lib/assets/no-thumbnail.png"
 />
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/AssetCover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/AssetCover.spec.ts
index 43f113eed..7b3564646 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/AssetCover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/AssetCover.spec.ts
@@ -1,5 +1,5 @@
+import AssetCover from '#lib/components/sharedlinks-page/covers/AssetCover.svelte';
 import { render } from '@testing-library/svelte';
-import AssetCover from '$lib/components/sharedlinks-page/covers/AssetCover.svelte';
 
 describe('AssetCover component', () => {
   it('renders correctly', () => {
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/NoCover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/NoCover.spec.ts
index 55394df89..897abf47e 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/NoCover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/NoCover.spec.ts
@@ -1,5 +1,5 @@
+import NoCover from '#lib/components/sharedlinks-page/covers/NoCover.svelte';
 import { render } from '@testing-library/svelte';
-import NoCover from '$lib/components/sharedlinks-page/covers/NoCover.svelte';
 
 describe('NoCover component', () => {
   it('renders correctly', () => {
diff --git a/web/src/lib/components/sidebar/Sidebar.spec.ts b/web/src/lib/components/sidebar/Sidebar.spec.ts
index 3125c2ee5..ff8255c86 100644
--- a/web/src/lib/components/sidebar/Sidebar.spec.ts
+++ b/web/src/lib/components/sidebar/Sidebar.spec.ts
@@ -1,7 +1,7 @@
+import SideBarSection from '#lib/components/sidebar/Sidebar.svelte';
+import { sidebarStore } from '#lib/stores/sidebar.svelte.js';
 import { fireEvent, render, screen } from '@testing-library/svelte';
 import { vi } from 'vitest';
-import SideBarSection from '$lib/components/sidebar/Sidebar.svelte';
-import { sidebarStore } from '$lib/stores/sidebar.svelte';
 
 const mocks = vi.hoisted(() => {
   return {
@@ -11,11 +11,11 @@ const mocks = vi.hoisted(() => {
   };
 });
 
-vi.mock('$lib/stores/media-query-manager.svelte', () => ({
+vi.mock('#lib/stores/media-query-manager.svelte.js', () => ({
   mediaQueryManager: mocks.mediaQueryManager,
 }));
 
-vi.mock('$lib/stores/sidebar.svelte', () => ({
+vi.mock('#lib/stores/sidebar.svelte.js', () => ({
   sidebarStore: {
     isOpen: false,
     reset: vi.fn(),
diff --git a/web/src/lib/components/sidebar/Sidebar.svelte b/web/src/lib/components/sidebar/Sidebar.svelte
index 6e29d796a..283cce759 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';
-  import { focusTrap } from '$lib/actions/focus-trap';
-  import { menuButtonId } from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { sidebarStore } from '$lib/stores/sidebar.svelte';
+  import { clickOutside } from '#lib/actions/click-outside.js';
+  import { focusTrap } from '#lib/actions/focus-trap.js';
+  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 { 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 058fbb6ec..ddd7952ac 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';
-  import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import type { CommonPosition } from '$lib/utils/layout-utils';
+  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 { 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 b88213a3b..5fa9e68a8 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';
+  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
   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 bd27a7e89..5cc390e69 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';
-  import { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
-  import type { TimelineMonth } from '$lib/managers/timeline-manager/timeline-month.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetsSnapshot, filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import type { CommonPosition } from '$lib/utils/layout-utils';
-  import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
+  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 { 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 67ec87ff7..dfe5296b2 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';
-  import type { ScrubberMonth, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { getTabbable } from '$lib/utils/focus-util';
-  import { type ScrubberListener } from '$lib/utils/timeline-util';
+  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 { 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 33856ed36..03e490bf1 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -1,28 +1,32 @@
 <script lang="ts">
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
-  import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
-  import Month from '$lib/components/timeline/Month.svelte';
-  import Scrubber from '$lib/components/timeline/Scrubber.svelte';
-  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';
-  import { AssetAction } from '$lib/constants';
-  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';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import type { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
-  import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
-  import type { TimelineMonth } from '$lib/managers/timeline-manager/timeline-month.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
-  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { keyboardManager } from '$lib/stores/keyboard-manager.svelte';
-  import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
-  import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
-  import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
+  import Thumbnail from '#lib/components/assets/thumbnail/Thumbnail.svelte';
+  import Month from '#lib/components/timeline/Month.svelte';
+  import Scrubber from '#lib/components/timeline/Scrubber.svelte';
+  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 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 {
+    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';
   import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
   import { onDestroy, onMount, tick, type Snippet } from 'svelte';
@@ -233,7 +237,9 @@
   // beforeNavigate is only called AFTER a svelte route has already been loaded
   // and a new route is being navigated to. It will never be called on direct
   // navigations by the browser.
-  beforeNavigate(({ from, to }) => {
+  beforeNavigate(({ from, to, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     timelineManager.suspendTransitions = true;
     const isNavigatingToAssetViewer = isAssetViewerRoute(to);
     const isNavigatingFromAssetViewer = isAssetViewerRoute(from);
@@ -242,7 +248,9 @@
 
   // afterNavigate is only called after navigation to a new URL, {complete} will resolve
   // after successful navigation.
-  afterNavigate(({ complete }) => {
+  afterNavigate(({ complete, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     void complete.finally(() => {
       const isAssetViewerPage = isAssetViewerRoute(page);
 
@@ -258,8 +266,8 @@
   });
 
   const updateIsScrolling = () => (timelineManager.scrolling = true);
-  // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
 
+  // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
   onMount(() => {
     if (!enableRouting) {
       invisible = false;
diff --git a/web/src/lib/components/timeline/TimelineAssetViewer.svelte b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
index 373ecef24..2a3687117 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';
-  import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { AssetAction } from '$lib/constants';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { websocketEvents } from '$lib/stores/websocket';
-  import { handlePromiseError } from '$lib/utils';
-  import { navigateToAsset } from '$lib/utils/asset-utils';
-  import { handleErrorAsync } from '$lib/utils/handle-error';
-  import { navigate } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  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 { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto, getAssetInfo } from '@immich/sdk';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -185,7 +185,7 @@
 
 <OnEvents {onAlbumRemoveAssets} />
 
-{#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
+{#await import('#lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
   <AssetViewer
     {withStacked}
     cursor={assetCursor}
diff --git a/web/src/lib/components/timeline/actions/ArchiveAction.svelte b/web/src/lib/components/timeline/actions/ArchiveAction.svelte
index 21e2bde57..e0dc8c506 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';
-  import type { OnArchive } from '$lib/utils/actions';
-  import { archiveAssets } from '$lib/utils/asset-utils';
+  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 { 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 239d238a2..543d930e6 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';
-  import AssetSelectionChangeDateModal from '$lib/modals/AssetSelectionChangeDateModal.svelte';
-  import { fromTimelinePlainDateTime } from '$lib/utils/timeline-util';
+  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
+  import AssetSelectionChangeDateModal from '#lib/modals/AssetSelectionChangeDateModal.svelte';
+  import { fromTimelinePlainDateTime } from '#lib/utils/timeline-util.js';
   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 f5c3985c6..d83228bbc 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import AssetUpdateDescriptionConfirmModal from '$lib/modals/AssetUpdateDescriptionConfirmModal.svelte';
-  import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
-  import { handleError } from '$lib/utils/handle-error';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import AssetUpdateDescriptionConfirmModal from '#lib/modals/AssetUpdateDescriptionConfirmModal.svelte';
+  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 8b59bc341..c701ade20 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import GeolocationPointPickerModal from '$lib/modals/GeolocationPointPickerModal.svelte';
-  import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
-  import { handleError } from '$lib/utils/handle-error';
+  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 GeolocationPointPickerModal from '#lib/modals/GeolocationPointPickerModal.svelte';
+  import { getOwnedAssetsWithWarning } from '#lib/utils/asset-utils.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 e62e52bba..fd8356723 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';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import AssetDeleteConfirmModal from '$lib/modals/AssetDeleteConfirmModal.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
+  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 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 { 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 b1b683ca2..119120723 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';
+  import { shortcut } from '#lib/actions/shortcut.js';
 
-  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { handleDownloadAsset } from '$lib/services/asset.service';
-  import { downloadArchive } from '$lib/utils/asset-utils';
+  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 { 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 0cc861020..e64c9bf19 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';
-  import type { OnFavorite } from '$lib/utils/actions';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 9d91fc5c9..cdaf40300 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { OnLink, OnUnlink } from '$lib/utils/actions';
-  import { handleError } from '$lib/utils/handle-error';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  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 { 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 b88abcf89..9ad4c1305 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';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { executeMutation } from '$lib/queries/client';
-  import { removeSharedLinkAssetsMutation } from '$lib/queries/shared-link.query';
+  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 { 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 9a6cb05a8..cbc6b0879 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';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { selectAllAssets } from '$lib/utils/asset-utils';
+  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 { 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 3a687a3a7..c4d4b48ca 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';
-  import type { OnSetVisibility } from '$lib/utils/actions';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 3c689f456..5c95015de 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';
+  import { shortcuts, type ShortcutOptions } from '#lib/actions/shortcut.js';
   import {
     setFocusToAsset as setFocusAssetInit,
     setFocusTo as setFocusToInit,
-  } from '$lib/components/timeline/actions/focus-actions';
-  import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  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';
-  import { handleStack } from '$lib/services/stack.service';
-  import { keyboardManager } from '$lib/stores/keyboard-manager.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import { handlePromiseError } from '$lib/utils';
-  import { deleteAssets } from '$lib/utils/actions';
-  import { archiveAssets, selectAllAssets } from '$lib/utils/asset-utils';
+  } 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';
+  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 { 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 2df4dd8c8..7dcd37ea3 100644
--- a/web/src/lib/components/timeline/actions/focus-actions.ts
+++ b/web/src/lib/components/timeline/actions/focus-actions.ts
@@ -1,8 +1,8 @@
+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 { tick } from 'svelte';
-import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { moveFocus } from '$lib/utils/focus-util';
-import { InvocationTracker } from '$lib/utils/invocationTracker';
 
 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 49928ab38..d037905e3 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';
+  import { locale } from '#lib/stores/preferences.store.js';
   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 4692453a0..074ab3ad3 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';
+  import { handleError } from '#lib/utils/handle-error.js';
   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/constants.ts b/web/src/lib/constants.ts
index 94e763258..0b94a3671 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -251,7 +251,7 @@ export interface Lang {
   rtl?: boolean;
 }
 
-export const defaultLang: Lang = { name: 'English', code: 'en', loader: () => import('$i18n/en.json') };
+export const defaultLang: Lang = { name: 'English', code: 'en', loader: () => import('#i18n/en.json') };
 
 export enum ImmichProduct {
   Client = 'immich-client',
diff --git a/web/src/lib/elements/Dropdown.svelte b/web/src/lib/elements/Dropdown.svelte
index ac44f3196..09b924480 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';
+  import { clickOutside } from '#lib/actions/click-outside.js';
   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 cc097d783..b395fe983 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';
+  import type { InterpolationValues } from '#lib/elements/format-message.js';
   import {
     TYPE,
     type MessageFormatElement,
diff --git a/web/src/lib/elements/GroupTab.svelte b/web/src/lib/elements/GroupTab.svelte
index ac3469429..25b770a05 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';
+  import { generateId } from '#lib/utils/generate-id.js';
 
   interface Props {
     filters: string[];
diff --git a/web/src/lib/elements/Portal.svelte b/web/src/lib/elements/Portal.svelte
index 60ccc993a..a811c136f 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';
+  import { handlePromiseError } from '#lib/utils.js';
   import { tick, type Snippet } from 'svelte';
 
   /**
diff --git a/web/src/lib/elements/Skeleton.svelte b/web/src/lib/elements/Skeleton.svelte
index 900228412..9c3263a07 100644
--- a/web/src/lib/elements/Skeleton.svelte
+++ b/web/src/lib/elements/Skeleton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
+  import { cleanClass } from '#lib';
 
   interface Props {
     height: number;
diff --git a/web/src/lib/elements/SkipLink.svelte b/web/src/lib/elements/SkipLink.svelte
index ec3327b0c..08d35260f 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';
+  import { getTabbable } from '#lib/utils/focus-util.js';
   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 e553a3101..b1319c405 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';
-  import { shortcuts } from '$lib/actions/shortcut';
-  import { generateId } from '$lib/utils/generate-id';
+  import { focusOutside } from '#lib/actions/focus-outside.js';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  import { generateId } from '#lib/utils/generate-id.js';
   import { Icon } from '@immich/ui';
   import { mdiStar, mdiStarOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/elements/__test__/FormatMessage.spec.ts b/web/src/lib/elements/__test__/FormatMessage.spec.ts
index 5c066d897..e5f7023c9 100644
--- a/web/src/lib/elements/__test__/FormatMessage.spec.ts
+++ b/web/src/lib/elements/__test__/FormatMessage.spec.ts
@@ -1,9 +1,9 @@
+import FormatMessage from '#lib/elements/FormatMessage.svelte';
+import FormatTagB from '#lib/elements/__test__/FormatTagB.svelte';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
 import { init, locale, register, waitLocale, type Translations } from 'svelte-i18n';
 import { describe } from 'vitest';
-import FormatMessage from '$lib/elements/FormatMessage.svelte';
-import FormatTagB from '$lib/elements/__test__/FormatTagB.svelte';
 
 const getSanitizedHTML = (container: HTMLElement) => container.getHTML().replaceAll('<!---->', '');
 
diff --git a/web/src/lib/elements/__test__/FormatTagB.svelte b/web/src/lib/elements/__test__/FormatTagB.svelte
index ff11c73c6..e2fc281ab 100644
--- a/web/src/lib/elements/__test__/FormatTagB.svelte
+++ b/web/src/lib/elements/__test__/FormatTagB.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
   import type { ComponentProps } from 'svelte';
   import type { Translations } from 'svelte-i18n';
 
diff --git a/web/src/lib/elements/__test__/StarRating.spec.ts b/web/src/lib/elements/__test__/StarRating.spec.ts
index 53fdbcd44..cbca653f3 100644
--- a/web/src/lib/elements/__test__/StarRating.spec.ts
+++ b/web/src/lib/elements/__test__/StarRating.spec.ts
@@ -1,5 +1,5 @@
+import StarRating from '#lib/elements/StarRating.svelte';
 import { render } from '@testing-library/svelte';
-import StarRating from '$lib/elements/StarRating.svelte';
 
 describe('StarRating component', () => {
   it('renders correctly', () => {
diff --git a/web/src/lib/i18n.spec.ts b/web/src/lib/i18n.spec.ts
index 67ffa921f..7845ed846 100644
--- a/web/src/lib/i18n.spec.ts
+++ b/web/src/lib/i18n.spec.ts
@@ -1,5 +1,5 @@
+import { getClosestAvailableLocale, langs } from '#lib/utils/i18n.js';
 import { readFileSync, readdirSync } from 'node:fs';
-import { getClosestAvailableLocale, langs } from '$lib/utils/i18n';
 
 describe('i18n', () => {
   describe('loaders', () => {
diff --git a/web/src/lib/index.spec.ts b/web/src/lib/index.spec.ts
index bac0f4cde..b69dc8221 100644
--- a/web/src/lib/index.spec.ts
+++ b/web/src/lib/index.spec.ts
@@ -1,4 +1,4 @@
-import { cleanClass, isDefined } from '$lib';
+import { cleanClass, isDefined } from '#lib';
 
 describe('cleanClass', () => {
   it('should return a string of class names', () => {
diff --git a/web/src/lib/managers/AssetCacheManager.svelte.ts b/web/src/lib/managers/AssetCacheManager.svelte.ts
index 65118625e..9d0b85165 100644
--- a/web/src/lib/managers/AssetCacheManager.svelte.ts
+++ b/web/src/lib/managers/AssetCacheManager.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 { getAssetInfo, getAssetOcr, getFaces } from '@immich/sdk';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
 
 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 fd646bad3..b8577fe74 100644
--- a/web/src/lib/managers/accordion-manager.svelte.ts
+++ b/web/src/lib/managers/accordion-manager.svelte.ts
@@ -1,12 +1,12 @@
+import { QueryParameter } from '#lib/constants.js';
+import { handlePromiseError } from '#lib/utils.js';
 import { SvelteSet, SvelteURLSearchParams } from 'svelte/reactivity';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
-import { QueryParameter } from '$lib/constants';
-import { handlePromiseError } from '$lib/utils';
 
 class AccordionManager {
   // needs to be derived since `page.url.searchParams` isn't actually initialized by the time this class gets instantiated.
-  #searchParams = $derived(new SvelteURLSearchParams(page.url.searchParams));
+  #searchParams = $derived(new SvelteURLSearchParams([...page.url.searchParams.entries()]));
   #state = $derived(
     new SvelteSet(
       this.#searchParams
@@ -27,9 +27,7 @@ class AccordionManager {
       this.#searchParams.set(QueryParameter.IS_OPEN, [...this.#state].join(' '));
     }
 
-    handlePromiseError(
-      goto(`?${this.#searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true }),
-    );
+    handlePromiseError(goto(`?${this.#searchParams.toString()}`, { replace: true, reset: false }));
   }
 
   open(key: string) {
diff --git a/web/src/lib/managers/activity-manager.svelte.spec.ts b/web/src/lib/managers/activity-manager.svelte.spec.ts
index 2da5398b4..52bb2a3f8 100644
--- a/web/src/lib/managers/activity-manager.svelte.spec.ts
+++ b/web/src/lib/managers/activity-manager.svelte.spec.ts
@@ -1,3 +1,4 @@
+import { activityManager } from '#lib/managers/activity-manager.svelte.js';
 import {
   deleteActivity,
   getActivities,
@@ -5,7 +6,6 @@ import {
   ReactionType,
   type ActivityResponseDto,
 } from '@immich/sdk';
-import { activityManager } from '$lib/managers/activity-manager.svelte';
 
 vi.mock('@immich/sdk', async (importOriginal) => ({
   ...(await importOriginal<typeof import('@immich/sdk')>()),
diff --git a/web/src/lib/managers/activity-manager.svelte.ts b/web/src/lib/managers/activity-manager.svelte.ts
index 31f520297..56152be2e 100644
--- a/web/src/lib/managers/activity-manager.svelte.ts
+++ b/web/src/lib/managers/activity-manager.svelte.ts
@@ -1,3 +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 {
   createActivity,
   deleteActivity,
@@ -10,9 +13,6 @@ import {
 } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { handlePromiseError } from '$lib/utils';
-import { handleError } from '$lib/utils/handle-error';
 
 type CacheKey = string;
 type ActivityCache = {
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 8babb071c..eeec36d7e 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,9 +1,9 @@
+import { AssetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
 import { AssetVisibility } from '@immich/sdk';
-import { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { timelineAssetFactory } from '@test-data/factories/asset-factory';
-import { preferencesFactory } from '@test-data/factories/preferences-factory';
-import { userAdminFactory } from '@test-data/factories/user-factory';
+import { timelineAssetFactory } from '#test-data/factories/asset-factory';
+import { preferencesFactory } from '#test-data/factories/preferences-factory';
+import { userAdminFactory } from '#test-data/factories/user-factory';
 
 describe('AssetMultiSelectManager', () => {
   let sut: AssetMultiSelectManager;
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 5a7eb0138..acbe579bd 100644
--- a/web/src/lib/managers/asset-multi-select-manager.svelte.ts
+++ b/web/src/lib/managers/asset-multi-select-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 type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
 import { AssetVisibility } from '@immich/sdk';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 
 export type AssetMultiSelectOptions = {
   resetOnNavigate?: boolean;
diff --git a/web/src/lib/managers/asset-viewer-manager.svelte.ts b/web/src/lib/managers/asset-viewer-manager.svelte.ts
index 345776f02..271bb3ebc 100644
--- a/web/src/lib/managers/asset-viewer-manager.svelte.ts
+++ b/web/src/lib/managers/asset-viewer-manager.svelte.ts
@@ -1,12 +1,12 @@
+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 { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
 import type { ZoomImageWheelState } from '@zoom-image/core';
 import { cubicOut } from 'svelte/easing';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { userPreferencesManager } from '$lib/managers/user-preferences-manager.svelte';
-import type { ImageLoaderStatus } from '$lib/utils/adaptive-image-loader.svelte';
-import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
-import { BaseEventManager } from '$lib/utils/base-event-manager.svelte';
-import type { AssetGridRouteSearchParams } from '$lib/utils/navigation';
 
 export interface Faces {
   id: string;
diff --git a/web/src/lib/managers/auth-manager.svelte.ts b/web/src/lib/managers/auth-manager.svelte.ts
index e53d5d909..b58bb2507 100644
--- a/web/src/lib/managers/auth-manager.svelte.ts
+++ b/web/src/lib/managers/auth-manager.svelte.ts
@@ -1,3 +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 {
   getMyPreferences,
   getMyUser,
@@ -5,16 +12,9 @@ import {
   type UserAdminResponseDto,
   type UserPreferencesResponseDto,
 } from '@immich/sdk';
-import { browser } from '$app/environment';
+import { browser } from '$app/env';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { getAboutInfoQuery } from '$lib/queries/server.query';
-import { Route } from '$lib/route';
-import { isSharedLinkRoute } from '$lib/utils/navigation';
 
 class AuthManager {
   isPurchased = $state(false);
diff --git a/web/src/lib/managers/cast-manager.svelte.ts b/web/src/lib/managers/cast-manager.svelte.ts
index 0f5cddd37..3c3e75852 100644
--- a/web/src/lib/managers/cast-manager.svelte.ts
+++ b/web/src/lib/managers/cast-manager.svelte.ts
@@ -1,7 +1,7 @@
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { GCastDestination } from '#lib/utils/cast/gcast-destination.svelte.js';
 import { createSession, type SessionCreateResponseDto } from '@immich/sdk';
 import { DateTime, Duration } from 'luxon';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { GCastDestination } from '$lib/utils/cast/gcast-destination.svelte';
 
 // follows chrome.cast.media.PlayerState
 export enum CastState {
diff --git a/web/src/lib/managers/edit/edit-manager.svelte.ts b/web/src/lib/managers/edit/edit-manager.svelte.ts
index dc454f854..830bb7fe7 100644
--- a/web/src/lib/managers/edit/edit-manager.svelte.ts
+++ b/web/src/lib/managers/edit/edit-manager.svelte.ts
@@ -1,12 +1,12 @@
+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 { editAsset, removeAssetEdits, type AssetEditsCreateDto, type AssetResponseDto } from '@immich/sdk';
 import { ConfirmModal, modalManager, toastManager } from '@immich/ui';
 import { mdiCropRotate } from '@mdi/js';
 import type { Component } from 'svelte';
-import TransformTool from '$lib/components/asset-viewer/editor/transform-tool/TransformTool.svelte';
-import { transformManager } from '$lib/managers/edit/transform-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { waitForWebsocketEvent } from '$lib/stores/websocket';
-import { getFormatter } from '$lib/utils/i18n';
 
 export type EditAction = AssetEditsCreateDto['edits'][number];
 export type EditActions = EditAction[];
diff --git a/web/src/lib/managers/edit/transform-manager.svelte.ts b/web/src/lib/managers/edit/transform-manager.svelte.ts
index 23ddc1f3e..8a5924edf 100644
--- a/web/src/lib/managers/edit/transform-manager.svelte.ts
+++ b/web/src/lib/managers/edit/transform-manager.svelte.ts
@@ -1,11 +1,11 @@
+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 { AssetEditAction, AssetMediaSize, MirrorAxis, type AssetResponseDto, type CropParameters } from '@immich/sdk';
 import { clamp } from 'lodash-es';
 import { tick } from 'svelte';
-import { type EditActions, type EditToolManager } from '$lib/managers/edit/edit-manager.svelte';
-import { getAssetMediaUrl } from '$lib/utils';
-import { getDimensions } from '$lib/utils/asset-utils';
-import { normalizeTransformEdits } from '$lib/utils/editor';
-import { handleError } from '$lib/utils/handle-error';
 
 type Region = {
   x: number;
diff --git a/web/src/lib/managers/event-manager.svelte.ts b/web/src/lib/managers/event-manager.svelte.ts
index b2e1c9aa2..3d900177d 100644
--- a/web/src/lib/managers/event-manager.svelte.ts
+++ b/web/src/lib/managers/event-manager.svelte.ts
@@ -1,3 +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 {
   AlbumResponseDto,
   AlbumUserRole,
@@ -15,9 +18,6 @@ import type {
   TagResponseDto,
   UserAdminResponseDto,
 } from '@immich/sdk';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { BaseEventManager } from '$lib/utils/base-event-manager.svelte';
-import type { TreeNode } from '$lib/utils/tree-utils';
 
 export type Events = {
   AppInit: [];
diff --git a/web/src/lib/managers/feature-flags-manager.svelte.ts b/web/src/lib/managers/feature-flags-manager.svelte.ts
index 4f401e59c..29ef84b6b 100644
--- a/web/src/lib/managers/feature-flags-manager.svelte.ts
+++ b/web/src/lib/managers/feature-flags-manager.svelte.ts
@@ -1,5 +1,5 @@
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
 import { getServerFeatures, type ServerFeaturesDto } from '@immich/sdk';
-import { eventManager } from '$lib/managers/event-manager.svelte';
 
 class FeatureFlagsManager {
   #value?: ServerFeaturesDto = $state();
diff --git a/web/src/lib/managers/geolocation.manager.svelte.ts b/web/src/lib/managers/geolocation.manager.svelte.ts
index d5b2c4391..e88a148bc 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';
+import type { LatLng } from '#lib/types.js';
 
 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 cf5352a8d..29e16e076 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';
-import { lang } from '$lib/stores/preferences.store';
-import { langs } from '$lib/utils/i18n';
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { lang } from '#lib/stores/preferences.store.js';
+import { langs } from '#lib/utils/i18n.js';
 
 class LanguageManager {
   constructor() {
diff --git a/web/src/lib/managers/memory-manager.svelte.ts b/web/src/lib/managers/memory-manager.svelte.ts
index a12204404..b6b701be5 100644
--- a/web/src/lib/managers/memory-manager.svelte.ts
+++ b/web/src/lib/managers/memory-manager.svelte.ts
@@ -1,3 +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 {
   type AssetResponseDto,
   MemorySearchOrder,
@@ -17,14 +25,6 @@ import { SvelteMap } from 'svelte/reactivity';
 import { fromStore, get } from 'svelte/store';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
-import { QueryParameter } from '$lib/constants';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { userPreferencesManager } from '$lib/managers/user-preferences-manager.svelte';
-import { Route } from '$lib/route';
-import { memoryLaneTitle } from '$lib/utils';
-import { toTimelineAsset } from '$lib/utils/timeline-util';
 
 type MemoriesSearchDto = Parameters<typeof searchMemories>[0];
 
@@ -272,7 +272,7 @@ class MemoryManager {
   }
 
   #goto(href: string) {
-    return goto(href, { replaceState: true, noScroll: true, keepFocus: true });
+    return goto(href, { replace: true, reset: false });
   }
 
   async #deleteMemory(id: string) {
diff --git a/web/src/lib/managers/plugin-manager.svelte.ts b/web/src/lib/managers/plugin-manager.svelte.ts
index 77e2c8adf..6fdf0e5da 100644
--- a/web/src/lib/managers/plugin-manager.svelte.ts
+++ b/web/src/lib/managers/plugin-manager.svelte.ts
@@ -1,3 +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 {
   WorkflowTrigger,
   type PluginMethodResponseDto,
@@ -7,11 +12,6 @@ import {
 import { t } from 'svelte-i18n';
 import { SvelteMap } from 'svelte/reactivity';
 import { get } from 'svelte/store';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { searchPluginMethodsQuery, searchPluginTemplatesQuery } from '$lib/queries/plugin.query';
-import { getWorkflowTriggersQuery } from '$lib/queries/workflow.query';
 
 class PluginManager {
   #loading: Promise<void> | undefined;
diff --git a/web/src/lib/managers/queue-manager.svelte.ts b/web/src/lib/managers/queue-manager.svelte.ts
index 73a530b5b..b001dbb9f 100644
--- a/web/src/lib/managers/queue-manager.svelte.ts
+++ b/web/src/lib/managers/queue-manager.svelte.ts
@@ -1,7 +1,7 @@
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import type { QueueSnapshot } from '#lib/types.js';
 import { getQueues, type QueueResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import type { QueueSnapshot } from '$lib/types';
 
 export class QueueManager {
   #snapshots = $state<QueueSnapshot[]>([]);
diff --git a/web/src/lib/managers/release-manager.svelte.ts b/web/src/lib/managers/release-manager.svelte.ts
index fed57dd3d..1ae719858 100644
--- a/web/src/lib/managers/release-manager.svelte.ts
+++ b/web/src/lib/managers/release-manager.svelte.ts
@@ -1,5 +1,5 @@
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
 import type { ReleaseEventV1 } from '@immich/sdk';
-import { eventManager } from '$lib/managers/event-manager.svelte';
 
 class ReleaseManager {
   value = $state<ReleaseEventV1 | undefined>();
diff --git a/web/src/lib/managers/search-manager.svelte.spec.ts b/web/src/lib/managers/search-manager.svelte.spec.ts
index 565d70e13..879463ec8 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';
+import { searchManager } from '#lib/managers/search-manager.svelte.js';
 
 describe('SearchManager', () => {
   beforeEach(() => {
diff --git a/web/src/lib/managers/search-manager.svelte.ts b/web/src/lib/managers/search-manager.svelte.ts
index 32cd379fd..ab6cfb0b8 100644
--- a/web/src/lib/managers/search-manager.svelte.ts
+++ b/web/src/lib/managers/search-manager.svelte.ts
@@ -1,11 +1,11 @@
+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 { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
 import type { DateTime } from 'luxon';
 import { SvelteSet } from 'svelte/reactivity';
 import { goto } from '$app/navigation';
-import { MediaType, QueryType, validQueryTypes } from '$lib/constants';
-import { Route } from '$lib/route';
-import type { SearchFilter } from '$lib/types';
-import { asLocalTimeISO, parseUtcDate } from '$lib/utils/date-time';
 
 const QUERY_TYPE_STORAGE_KEY = 'searchQueryType';
 
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 a363a0595..2191e5573 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,5 +1,5 @@
+import { setDifference, type TimelineDate } from '#lib/utils/timeline-util.js';
 import { AssetOrder } from '@immich/sdk';
-import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
 import type { TimelineDay } from './timeline-day.svelte';
 import type { TimelineMonth } from './timeline-month.svelte';
 import type { TimelineAsset } from './types';
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 3175fd3c3..f98f1d3df 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';
+import { TUNABLES } from '#lib/utils/tunables.js';
 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 2e2655339..4b68ca0eb 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,6 +1,6 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { toISOYearMonthUTC } from '#lib/utils/timeline-util.js';
 import { getTimeBucket } from '@immich/sdk';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { toISOYearMonthUTC } from '$lib/utils/timeline-util';
 import { TimelineManager } from '../timeline-manager.svelte';
 import type { TimelineMonth } from '../timeline-month.svelte';
 import type { TimelineManagerOptions } from '../types';
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 88b6cd611..8534005f8 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,6 +1,6 @@
+import { getOrderingDate, plainDateTimeCompare, type TimelineYearMonth } from '#lib/utils/timeline-util.js';
 import { AssetOrder, AssetOrderBy, type AssetResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
-import { getOrderingDate, plainDateTimeCompare, type TimelineYearMonth } from '$lib/utils/timeline-util';
 import { TimelineManager } from '../timeline-manager.svelte';
 import type { TimelineMonth } from '../timeline-month.svelte';
 import type { AssetDescriptor, Direction, TimelineAsset } from '../types';
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 bc9b3a843..1ce408e85 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,9 +1,9 @@
+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 { throttle } from 'lodash-es';
 import type { Unsubscriber } from 'svelte/store';
-import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-import type { PendingChange, TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { websocketEvents } from '$lib/stores/websocket';
-import { toTimelineAsset } from '$lib/utils/timeline-util';
 
 export class WebsocketSupport {
   #pendingChanges: PendingChange[] = [];
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 a4805d67d..e1331f99b 100644
--- a/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-day.svelte.ts
@@ -1,9 +1,9 @@
+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 { AssetOrder, AssetOrderBy } from '@immich/sdk';
 import { SvelteSet } from 'svelte/reactivity';
-import type { CommonLayoutOptions, CommonPosition } from '$lib/utils/layout-utils';
-import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
-import { getOrderingDate, plainDateTimeCompare } from '$lib/utils/timeline-util';
-import { TUNABLES } from '$lib/utils/tunables';
 import type { TimelineMonth } from './timeline-month.svelte';
 import type { Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.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 15b6ffb05..20eec0703 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,11 +1,11 @@
+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 { AssetOrderBy, AssetVisibility, type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { tick } from 'svelte';
-import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { getTimelineMonthByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
-import { AbortError } from '$lib/utils';
-import { fromISODateTimeUTCToObject } from '$lib/utils/timeline-util';
-import { assetFactory, timelineAssetFactory, toResponseDto } from '@test-data/factories/asset-factory';
+import { assetFactory, timelineAssetFactory, toResponseDto } from '#test-data/factories/asset-factory';
 import { TimelineManager } from './timeline-manager.svelte';
 import type { TimelineAsset } from './types';
 
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 187e04c63..838044da5 100644
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -1,13 +1,10 @@
-import { AssetOrder, AssetOrderBy, getAssetInfo, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
-import { clamp, isEqual } from 'lodash-es';
-import { SvelteDate, SvelteSet } from 'svelte/reactivity';
-import { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { GroupInsertionCache } from '$lib/managers/timeline-manager/group-insertion-cache.svelte';
-import { updateTimelineMonthViewportProximity } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
-import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
-import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';
+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 {
   findClosestTimelineMonthForDate,
   findTimelineMonthForAsset as findTimelineMonthForAssetUtil,
@@ -15,11 +12,11 @@ import {
   getAssetWithOffset,
   getTimelineMonthByDate,
   retrieveRange as retrieveRangeUtil,
-} from '$lib/managers/timeline-manager/internal/search-support.svelte';
-import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
-import { userPreferencesManager } from '$lib/managers/user-preferences-manager.svelte';
-import { updateStackedAssetInTimeline } from '$lib/utils/actions';
-import { CancellableTask } from '$lib/utils/cancellable-task';
+} 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';
 import {
   getOrderingDate,
   isAssetResponseDto,
@@ -27,7 +24,10 @@ import {
   toTimelineAsset,
   type TimelineDateTime,
   type TimelineYearMonth,
-} from '$lib/utils/timeline-util';
+} from '#lib/utils/timeline-util.js';
+import { AssetOrder, AssetOrderBy, getAssetInfo, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
+import { clamp, isEqual } from 'lodash-es';
+import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 import { isMismatched, updateObject } from './internal/utils.svelte';
 import { TimelineDay } from './timeline-day.svelte';
 import { TimelineMonth } from './timeline-month.svelte';
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 4c90904f4..c9bae5424 100644
--- a/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-month.svelte.ts
@@ -1,14 +1,10 @@
-import { AssetOrder, AssetOrderBy, type TimeBucketAssetResponseDto } from '@immich/sdk';
-import { t } from 'svelte-i18n';
-import { SvelteSet } from 'svelte/reactivity';
-import { get } from 'svelte/store';
 import {
   ViewportProximity,
   isInOrNearViewport as isInOrNearViewportUtil,
   isInViewport as isInViewportUtil,
-} from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
-import { CancellableTask } from '$lib/utils/cancellable-task';
-import { handleError } from '$lib/utils/handle-error';
+} 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';
 import {
   formatGroupTitle,
   formatTimelineMonthTitle,
@@ -21,7 +17,11 @@ import {
   type TimelineYearMonth,
   getOrderingDate,
   fromISODateTimeUTC,
-} from '$lib/utils/timeline-util';
+} from '#lib/utils/timeline-util.js';
+import { AssetOrder, AssetOrderBy, type TimeBucketAssetResponseDto } from '@immich/sdk';
+import { t } from 'svelte-i18n';
+import { SvelteSet } from 'svelte/reactivity';
+import { get } from 'svelte/store';
 import { GroupInsertionCache } from './group-insertion-cache.svelte';
 import { TimelineDay } from './timeline-day.svelte';
 import type { TimelineManager } from './timeline-manager.svelte';
diff --git a/web/src/lib/managers/timeline-manager/types.ts b/web/src/lib/managers/timeline-manager/types.ts
index 70a53368f..7e87a6006 100644
--- a/web/src/lib/managers/timeline-manager/types.ts
+++ b/web/src/lib/managers/timeline-manager/types.ts
@@ -1,5 +1,5 @@
+import type { TimelineDate, TimelineDateTime, TimelineYearMonth } from '#lib/utils/timeline-util.js';
 import type { AssetStackResponseDto, AssetVisibility } from '@immich/sdk';
-import type { TimelineDate, TimelineDateTime, TimelineYearMonth } from '$lib/utils/timeline-util';
 
 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 3a4ed4545..a007cdb2b 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';
+import type { CommonPosition } from '#lib/utils/layout-utils.js';
 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 b45897151..91e7411c6 100644
--- a/web/src/lib/managers/upload-manager.svelte.ts
+++ b/web/src/lib/managers/upload-manager.svelte.ts
@@ -1,7 +1,7 @@
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
+import { uploadAssetsStore } from '#lib/stores/upload.js';
+import { cancelUploadRequests } from '#lib/utils.js';
 import { getSupportedMediaTypes, type ServerMediaTypesResponseDto } from '@immich/sdk';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { uploadAssetsStore } from '$lib/stores/upload';
-import { cancelUploadRequests } from '$lib/utils';
 
 class UploadManager {
   mediaTypes = $state<ServerMediaTypesResponseDto>({ image: [], sidecar: [], video: [] });
diff --git a/web/src/lib/managers/user-preferences-manager.svelte.ts b/web/src/lib/managers/user-preferences-manager.svelte.ts
index 520043934..607145afa 100644
--- a/web/src/lib/managers/user-preferences-manager.svelte.ts
+++ b/web/src/lib/managers/user-preferences-manager.svelte.ts
@@ -1,5 +1,5 @@
+import { PersistedLocalStorage } from '#lib/utils/persisted.js';
 import { isEqual } from 'lodash-es';
-import { PersistedLocalStorage } from '$lib/utils/persisted';
 
 export type MemoriesPreferences = {
   showUpcoming: boolean;
diff --git a/web/src/lib/modals/AddUsersModal.svelte b/web/src/lib/modals/AddUsersModal.svelte
index 87177b187..030688af5 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';
-  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  import { initInput } from '#lib/actions/focus.js';
+  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
+  import { normalizeSearchString } from '#lib/utils/string-utils.js';
   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 6b3fa26c2..e6e0d6281 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';
-  import { executeMutation } from '$lib/queries/client';
+  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 { 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 ce883296f..89697a816 100644
--- a/web/src/lib/modals/AlbumOptionsModal.svelte
+++ b/web/src/lib/modals/AlbumOptionsModal.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-  import AlbumSharedLink from '$lib/components/album-page/AlbumSharedLink.svelte';
-  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
-  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
-  import { getAlbumActions, handleRemoveUserFromAlbum, handleUpdateUserAlbumRole } from '$lib/services/album.service';
-  import { getAlbumQuery, updateAlbumInfoMutation } from '$lib/queries/album.query';
-  import { executeMutation, queryClient } from '$lib/queries/client';
-  import { getAllSharedLinksQuery } from '$lib/queries/shared-link.query';
+  import AlbumSharedLink from '#lib/components/album-page/AlbumSharedLink.svelte';
+  import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
+  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
+  import {
+    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';
   import {
     AlbumUserRole,
     AssetOrder,
diff --git a/web/src/lib/modals/AlbumPickerModal.spec.ts b/web/src/lib/modals/AlbumPickerModal.spec.ts
index f8cdda0d1..aa5af952c 100644
--- a/web/src/lib/modals/AlbumPickerModal.spec.ts
+++ b/web/src/lib/modals/AlbumPickerModal.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 { render, screen, waitFor } from '@testing-library/svelte';
 import { init, register, waitLocale } from 'svelte-i18n';
-import { getAnimateMock } from '$lib/__mocks__/animate.mock';
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
 import AlbumPickerModal from './AlbumPickerModal.svelte';
 
 describe('AlbumPickerModal component', () => {
@@ -11,7 +11,7 @@ describe('AlbumPickerModal component', () => {
 
   beforeAll(async () => {
     await init({ fallbackLocale: 'en-US' });
-    register('en-US', () => import('$i18n/en.json'));
+    register('en-US', () => import('#i18n/en.json'));
     await waitLocale('en-US');
   });
 
diff --git a/web/src/lib/modals/AlbumPickerModal.svelte b/web/src/lib/modals/AlbumPickerModal.svelte
index 688daf3a6..58ddcbb46 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';
+  import { initInput } from '#lib/actions/focus.js';
   import {
     AlbumModalRowConverter,
     AlbumModalRowType,
     isSelectableRowType,
-  } from '$lib/components/shared-components/album-selection/album-selection-utils';
-  import { createAlbumMutation, getAllAlbumsQuery, getRecentAlbumsQuery } from '$lib/queries/album.query';
-  import { executeMutation, queryClient } from '$lib/queries/client';
-  import { albumViewSettings } from '$lib/stores/preferences.store';
+  } 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';
   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 6b5d568cf..44e36f5fc 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';
-  import { executeMutation } from '$lib/queries/client';
+  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 { 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 fba988aa5..056a9d578 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';
+  import { copyToClipboard } from '#lib/utils.js';
   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 0aafb9de1..e50da2a72 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';
-  import { executeMutation } from '$lib/queries/client';
+  import ApiKeyPermissionsPicker from '#lib/components/ApiKeyPermissionsPicker.svelte';
+  import { updateApiKeyMutation } from '#lib/queries/api-key.query.js';
+  import { executeMutation } from '#lib/queries/client.js';
   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 37fccf354..80e9ff20a 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';
-  import { executeMutation } from '$lib/queries/client';
+  import AlbumPickerModal from '#lib/modals/AlbumPickerModal.svelte';
+  import { addAssetsToAlbumsMutation } from '#lib/queries/album.query.js';
+  import { executeMutation } from '#lib/queries/client.js';
   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 047546a92..46ebb1106 100644
--- a/web/src/lib/modals/AssetChangeDateModal.spec.ts
+++ b/web/src/lib/modals/AssetChangeDateModal.spec.ts
@@ -1,9 +1,9 @@
+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 { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import { DateTime } from 'luxon';
 import { afterAll, beforeEach, describe, expect, test, vi } from 'vitest';
-import { getAnimateMock } from '$lib/__mocks__/animate.mock';
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
 import AssetChangeDateModal from './AssetChangeDateModal.svelte';
 
 describe('AssetChangeDateModal component', () => {
diff --git a/web/src/lib/modals/AssetChangeDateModal.svelte b/web/src/lib/modals/AssetChangeDateModal.svelte
index 53d076979..7372acec3 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';
-  import { getPreferredTimeZone, getTimezones, toIsoDate } from '$lib/modals/timezone-utils';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 51f6c01e5..0ff0e8e1a 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';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { showDeleteModal } from '#lib/stores/preferences.store.js';
   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 7a9eae0c5..128c61135 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts
+++ b/web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts
@@ -1,13 +1,13 @@
+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 { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { DateTime } from 'luxon';
-import { getAnimateMock } from '$lib/__mocks__/animate.mock';
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { calcNewDate } from '$lib/modals/timezone-utils';
-import { userAdminFactory } from '@test-data/factories/user-factory';
+import { userAdminFactory } from '#test-data/factories/user-factory';
 import AssetSelectionChangeDateModal from './AssetSelectionChangeDateModal.svelte';
 
 describe('DateSelectionModal component', () => {
diff --git a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
index c281eace3..3b89c2142 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  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';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { getPreferredTimeZone, getTimezones, toIsoDate, type ZoneOption } from '$lib/modals/timezone-utils';
-  import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 63f421aa4..801e302b7 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';
+  import { handleTagAssets } from '#lib/services/asset.service.js';
   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/AuthDisableLoginConfirmModal.svelte b/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
index d9e215d94..a0a2f592c 100644
--- a/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
+++ b/web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
   import { ConfirmModal, Link } from '@immich/ui';
   import { mdiCancel } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/AvatarEditModal.svelte b/web/src/lib/modals/AvatarEditModal.svelte
index 5582c4bc1..acde845c8 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';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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/ClusterGroupUserSelectionModal.svelte b/web/src/lib/modals/ClusterGroupUserSelectionModal.svelte
index 7ee46adfb..d36d9276b 100644
--- a/web/src/lib/modals/ClusterGroupUserSelectionModal.svelte
+++ b/web/src/lib/modals/ClusterGroupUserSelectionModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
+  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
   import { 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/ClusterGroupUsersModal.svelte b/web/src/lib/modals/ClusterGroupUsersModal.svelte
index 21a07bdc9..dd7602b0e 100644
--- a/web/src/lib/modals/ClusterGroupUsersModal.svelte
+++ b/web/src/lib/modals/ClusterGroupUsersModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
+  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
   import { getClusterGroupUsers, type UserResponseDto } from '@immich/sdk';
   import { Button, HStack, LoadingSpinner, Modal, ModalBody, ModalFooter, Text } 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 24466d0cc..e48a0b822 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';
-  import { delay } from '$lib/utils/asset-utils';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 657f91943..3c4d3c52c 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';
-  import { listNavigation } from '$lib/actions/list-navigation';
-  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';
-  import SearchBar from '$lib/elements/SearchBar.svelte';
-  import { geolocationManager } from '$lib/managers/geolocation.manager.svelte';
-  import type { LatLng } from '$lib/types';
-  import { delay } from '$lib/utils/asset-utils';
-  import { handleError } from '$lib/utils/handle-error';
+  import { isDefined } from '#lib';
+  import { clickOutside } from '#lib/actions/click-outside.js';
+  import { listNavigation } from '#lib/actions/list-navigation.js';
+  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 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 { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
   import { ConfirmModal, LoadingSpinner } from '@immich/ui';
   import { mdiMapMarkerMultipleOutline } from '@mdi/js';
@@ -187,7 +187,7 @@
 
       <span>{$t('pick_a_location')}</span>
       <div class="z-0 h-125 min-h-75 w-full">
-        {#await import('$lib/components/shared-components/map/Map.svelte')}
+        {#await import('#lib/components/shared-components/map/Map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex size-full items-center justify-center">
diff --git a/web/src/lib/modals/GeolocationUpdateConfirmModal.svelte b/web/src/lib/modals/GeolocationUpdateConfirmModal.svelte
index a57dd1db6..a7e235ff4 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';
-  import type { LatLng } from '$lib/types';
+  import { assetMultiSelectManager } from '#lib/managers/asset-multi-select-manager.svelte.js';
+  import type { LatLng } from '#lib/types.js';
   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 fc634bf5b..82803260c 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';
+  import Combobox, { type ComboBoxOption } from '#lib/components/shared-components/Combobox.svelte';
+  import { handleCreateJob } from '#lib/services/job.service.js';
   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 e52a60d0a..71fa47179 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';
-  import { updateLibraryMutation } from '$lib/queries/library.query';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { updateLibraryMutation } from '#lib/queries/library.query.js';
   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 0fb230476..77f31a3ee 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';
-  import { updateLibraryMutation } from '$lib/queries/library.query';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { updateLibraryMutation } from '#lib/queries/library.query.js';
   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 780205e43..73c12fd5b 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';
-  import { updateLibraryMutation } from '$lib/queries/library.query';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { updateLibraryMutation } from '#lib/queries/library.query.js';
   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 a84587e1f..cb2225390 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';
-  import { updateLibraryMutation } from '$lib/queries/library.query';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { updateLibraryMutation } from '#lib/queries/library.query.js';
   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 b019a472a..ec5c35d09 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';
-  import { delay } from '$lib/utils/asset-utils';
+  import { timeToLoadTheMap } from '#lib/constants.js';
+  import { delay } from '#lib/utils/asset-utils.js';
   import type { MapMarkerResponseDto } from '@immich/sdk';
   import { LoadingSpinner, Modal, ModalBody } from '@immich/ui';
   import { t } from 'svelte-i18n';
@@ -17,7 +17,7 @@
   <ModalBody>
     <div class="flex size-full flex-col gap-2 rounded-2xl border border-gray-300 dark:border-light">
       <div class="h-[75vh] min-h-[300px] w-full">
-        {#await import('$lib/components/shared-components/map/Map.svelte')}
+        {#await import('#lib/components/shared-components/map/Map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex size-full items-center justify-center">
diff --git a/web/src/lib/modals/MapSettingsModal.svelte b/web/src/lib/modals/MapSettingsModal.svelte
index 4c1d717e0..a0ea2ecda 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';
+  import { mapSettings, type MapSettings } from '#lib/stores/preferences.store.js';
   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 55bb607e9..0a473fa8b 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';
+  import { userPreferencesManager, type MemoriesPreferences } from '#lib/managers/user-preferences-manager.svelte.js';
   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 8ea1076db..df76d31c0 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';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { getPreferredTimeZone, getTimezones, toDatetime, type ZoneOption } from '$lib/modals/timezone-utils';
+  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 { 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 cf9cbb070..d3335cb1b 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';
-  import { executeMutation } from '$lib/queries/client';
+  import { createApiKeyMutation } from '#lib/queries/api-key.query.js';
+  import { executeMutation } from '#lib/queries/client.js';
   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 d3f7f7dce..6d1f8f58d 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';
+  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
   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 0e4576b2a..96359dfb7 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';
-  import { updatePasskeyMutation } from '$lib/queries/passkey.query';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { updatePasskeyMutation } from '#lib/queries/passkey.query.js';
   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 3cb116717..dacfcbd9b 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';
+  import { copyToClipboard } from '#lib/utils.js';
   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 3fc33e566..9af50e95f 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';
-  import PeopleFilterUserPicker from '$lib/modals/PeopleFilterUserPicker.svelte';
-  import type { PeopleFilter } from '$lib/types';
-  import { handleError } from '$lib/utils/handle-error';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import PeopleFilterUserPicker from '#lib/modals/PeopleFilterUserPicker.svelte';
+  import type { PeopleFilter } from '#lib/types.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 a0a171579..25efb2663 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';
+  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
   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 b7feb6ae2..5ab549962 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';
-  import { handleError } from '$lib/utils/handle-error';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  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 { 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 1e94525e5..fbb1ecce7 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';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  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 { type PersonResponseDto } from '@immich/sdk';
   import {
     ActionButton,
diff --git a/web/src/lib/modals/PersonBulkShareModal.svelte b/web/src/lib/modals/PersonBulkShareModal.svelte
index a34765af8..8996f032e 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';
-  import PeopleSelectionModal from '$lib/modals/PeopleSelectionModal.svelte';
-  import { handleBulkUpsert } from '$lib/services/person-user.service';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
+  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 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 { 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 b8cdb1cc6..4c16dc679 100644
--- a/web/src/lib/modals/PersonEditAccessModal.svelte
+++ b/web/src/lib/modals/PersonEditAccessModal.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  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';
-  import { getPersonUserActions, getPersonUsersActions } from '$lib/services/person-user.service';
-  import { handleError } from '$lib/utils/handle-error';
+  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 {
     getClusterGroupUsers,
     getUsersForPeople,
diff --git a/web/src/lib/modals/PersonEditModal.svelte b/web/src/lib/modals/PersonEditModal.svelte
index 8d120b3bc..88951f6c9 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';
-  import { handleUpdatePerson } from '$lib/services/person.service';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { handleUpdatePerson } from '#lib/services/person.service.js';
   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 0fc637ad0..420a21b6d 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { getPeopleThumbnailUrl } from '#lib/utils.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 6ea7b98f2..3dbab45f5 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';
+  import { handleResetPinCode } from '#lib/services/user.service.js';
   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';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 6fa13bfac..a02244cc2 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';
-  import { searchPluginMethodsQuery } from '$lib/queries/plugin.query';
+  import { queryClient } from '#lib/queries/client.js';
+  import { searchPluginMethodsQuery } from '#lib/queries/plugin.query.js';
 
   type Props = {
     trigger: WorkflowTrigger;
diff --git a/web/src/lib/modals/ProfileImageCropperModal.svelte b/web/src/lib/modals/ProfileImageCropperModal.svelte
index 62ad075b7..a3cf6a826 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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/PurchaseModal.svelte b/web/src/lib/modals/PurchaseModal.svelte
index 3add62cc8..cabcf17b0 100644
--- a/web/src/lib/modals/PurchaseModal.svelte
+++ b/web/src/lib/modals/PurchaseModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import PurchaseActivationSuccess from '$lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
-  import PurchaseContent from '$lib/components/shared-components/purchasing/PurchaseContent.svelte';
+  import PurchaseActivationSuccess from '#lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
+  import PurchaseContent from '#lib/components/shared-components/purchasing/PurchaseContent.svelte';
 
   import { Modal, ModalBody } from '@immich/ui';
 
diff --git a/web/src/lib/modals/QrCodeModal.svelte b/web/src/lib/modals/QrCodeModal.svelte
index aace4254f..8404cda48 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';
+  import Qrcode from '#lib/components/shared-components/Qrcode.svelte';
+  import { copyToClipboard } from '#lib/utils.js';
   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 8350fb3b2..fe22e1f90 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';
+  import ServerAboutItem from '#lib/components/ServerAboutItem.svelte';
+  import { locale } from '#lib/stores/preferences.store.js';
   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 4992f83a0..babdb08e3 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';
-  import { createSharedLinkMutation } from '$lib/queries/shared-link.query';
-  import { showSharedLinkQrCode } from '$lib/services/shared-link.service';
+  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 { 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 bfa551304..986da1187 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';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
   import { Icon, Modal, ModalBody } from '@immich/ui';
   import { mdiInformationOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/StorageTemplateVariablesModal.svelte b/web/src/lib/modals/StorageTemplateVariablesModal.svelte
index 654f938fc..7dacb292b 100644
--- a/web/src/lib/modals/StorageTemplateVariablesModal.svelte
+++ b/web/src/lib/modals/StorageTemplateVariablesModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import SupportedDatetimePanel from '$lib/components/admin-settings/SupportedDatetimePanel.svelte';
-  import SupportedVariablesPanel from '$lib/components/admin-settings/SupportedVariablesPanel.svelte';
+  import SupportedDatetimePanel from '#lib/components/admin-settings/SupportedDatetimePanel.svelte';
+  import SupportedVariablesPanel from '#lib/components/admin-settings/SupportedVariablesPanel.svelte';
   import type { SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
   import { BasicModal, Stack } from '@immich/ui';
   import { t } from 'svelte-i18n';
diff --git a/web/src/lib/modals/TagCreateModal.svelte b/web/src/lib/modals/TagCreateModal.svelte
index c9c8810ee..e07b745f5 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';
-  import { handleCreateTag } from '$lib/services/tag.service';
-  import type { TreeNode } from '$lib/utils/tree-utils';
+  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 { 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 06f7f0339..bdefdf61d 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';
-  import { handleUpdateTag } from '$lib/services/tag.service';
-  import type { TreeNode } from '$lib/utils/tree-utils';
+  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 { 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 fe7cd6255..c30762660 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';
-  import { deleteUserAdminMutation } from '$lib/queries/user-admin.query';
+  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 { 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';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 377b90a9d..21ecae072 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';
-  import { restoreUserAdminMutation } from '$lib/queries/user-admin.query';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { restoreUserAdminMutation } from '#lib/queries/user-admin.query.js';
   import { type UserAdminResponseDto } from '@immich/sdk';
   import { ConfirmModal } from '@immich/ui';
   import { mdiDeleteRestore } from '@mdi/js';
diff --git a/web/src/lib/modals/VersionAnnouncementModal.svelte b/web/src/lib/modals/VersionAnnouncementModal.svelte
index 317e15519..5fc125ffd 100644
--- a/web/src/lib/modals/VersionAnnouncementModal.svelte
+++ b/web/src/lib/modals/VersionAnnouncementModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
   import { BasicModal } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
diff --git a/web/src/lib/modals/WorkflowAddStepModal.svelte b/web/src/lib/modals/WorkflowAddStepModal.svelte
index c2a4d658a..9227ddc7b 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';
-  import { getWorkflowDefaultConfig } from '$lib/utils/workflow';
+  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 { 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 eac9ecdb5..d47af874e 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';
-  import { createWorkflowMutation } from '$lib/queries/workflow.query';
-  import { Route } from '$lib/route';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { createWorkflowMutation } from '#lib/queries/workflow.query.js';
+  import { Route } from '#lib/route.js';
   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 a2adbba09..465025d1a 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';
-  import PluginMethodPicker from '$lib/modals/PluginMethodPicker.svelte';
-  import { type JSONSchemaProperty, type SchemaConfig } from '$lib/types';
-  import { getWorkflowDefaultConfig } from '$lib/utils/workflow';
+  import SchemaConfiguration from '#lib/components/SchemaConfiguration.svelte';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
+  import PluginMethodPicker from '#lib/modals/PluginMethodPicker.svelte';
+  import { type JSONSchemaProperty, type SchemaConfig } from '#lib/types.js';
+  import { getWorkflowDefaultConfig } from '#lib/utils/workflow.js';
   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 2537913a8..405e339e6 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';
+  import { locale } from '#lib/stores/preferences.store.js';
   import { DateTime } from 'luxon';
-  import { Route } from '$lib/route';
-  import { executeMutation } from '$lib/queries/client';
-  import { updateWorkflowMutation } from '$lib/queries/workflow.query';
+  import { Route } from '#lib/route.js';
+  import { executeMutation } from '#lib/queries/client.js';
+  import { updateWorkflowMutation } from '#lib/queries/workflow.query.js';
 
   type Props = {
     workflow: WorkflowResponseDto;
diff --git a/web/src/lib/modals/WorkflowTemplatePickerModal.svelte b/web/src/lib/modals/WorkflowTemplatePickerModal.svelte
index edc322604..e8caabb7f 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';
-  import { executeMutation } from '$lib/queries/client';
-  import { createWorkflowMutation } from '$lib/queries/workflow.query';
-  import { Route } from '$lib/route';
+  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 { 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 489b89caf..fc3cd141b 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';
-  import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
+  import { getTriggerDescription, getTriggerName } from '#lib/utils/workflow.js';
   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 7f36d8226..b3f968b5f 100644
--- a/web/src/lib/queries/album.query.ts
+++ b/web/src/lib/queries/album.query.ts
@@ -1,3 +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 {
   addAssetsToAlbum,
   addAssetsToAlbums,
@@ -22,11 +27,6 @@ import { toastManager } from '@immich/ui';
 import { mutationOptions, queryOptions, type MutationMeta } from '@tanstack/svelte-query';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { asMutation, queryClient } from '$lib/queries/client';
-import { Route } from '$lib/route';
-import { getFormatter } from '$lib/utils/i18n';
 
 type AlbumsFilter = { isOwned?: boolean; isShared?: boolean };
 
diff --git a/web/src/lib/queries/api-key.query.ts b/web/src/lib/queries/api-key.query.ts
index 68f3784bd..6fa82f7eb 100644
--- a/web/src/lib/queries/api-key.query.ts
+++ b/web/src/lib/queries/api-key.query.ts
@@ -1,6 +1,6 @@
+import { asMutation, queryClient } from '#lib/queries/client.js';
 import { createApiKey, deleteApiKey, getApiKeys, rotateApiKey, updateApiKey } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
-import { asMutation, queryClient } from '$lib/queries/client';
 
 export const getApiKeysQuery = () =>
   queryOptions({
diff --git a/web/src/lib/queries/client.ts b/web/src/lib/queries/client.ts
index 8d4651593..cc47fb23c 100644
--- a/web/src/lib/queries/client.ts
+++ b/web/src/lib/queries/client.ts
@@ -1,3 +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 { toastManager } from '@immich/ui';
 import {
   createQuery,
@@ -16,11 +21,6 @@ import {
 } from '@tanstack/svelte-query';
 import { noop } from 'lodash-es';
 import type { Translations } from 'svelte-i18n';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { getPublicConfigQuery } from '$lib/queries/config-public.query';
-import { getServerConfigQuery } from '$lib/queries/server.query';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 type ToastMeta =
   true | Translations | { color: 'primary' | 'success' | 'info' | 'warning' | 'danger'; description: Translations };
diff --git a/web/src/lib/queries/config-admin.query.ts b/web/src/lib/queries/config-admin.query.ts
index 9b71d1925..03faf7339 100644
--- a/web/src/lib/queries/config-admin.query.ts
+++ b/web/src/lib/queries/config-admin.query.ts
@@ -1,12 +1,12 @@
+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 { getAdminConfig, getAdminConfigDefaults, updateAdminConfig, type AdminConfigDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 import { mutationOptions, queryOptions } from '@tanstack/svelte-query';
 import { isEqual } from 'lodash-es';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { getPublicConfigQuery } from '$lib/queries/config-public.query';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getAdminConfigQuery = () =>
   queryOptions({
diff --git a/web/src/lib/queries/library.query.ts b/web/src/lib/queries/library.query.ts
index 317d6b84d..47dc23bd6 100644
--- a/web/src/lib/queries/library.query.ts
+++ b/web/src/lib/queries/library.query.ts
@@ -1,3 +1,4 @@
+import { asMutation, queryClient } from '#lib/queries/client.js';
 import {
   createLibrary,
   deleteLibrary,
@@ -8,7 +9,6 @@ import {
   type LibraryResponseDto,
 } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
-import { asMutation, queryClient } from '$lib/queries/client';
 
 const findOrFail = (libraries: LibraryResponseDto[], id: string) => {
   const library = libraries.find((library) => library.id === id);
diff --git a/web/src/lib/queries/notification.query.ts b/web/src/lib/queries/notification.query.ts
index e4234bb8b..d15be3a68 100644
--- a/web/src/lib/queries/notification.query.ts
+++ b/web/src/lib/queries/notification.query.ts
@@ -1,6 +1,6 @@
+import { asMutation, queryClient } from '#lib/queries/client.js';
 import { getNotifications, updateNotification, updateNotifications } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
-import { asMutation, queryClient } from '$lib/queries/client';
 
 export const getNotificationsQuery = () =>
   queryOptions({
diff --git a/web/src/lib/queries/passkey.query.ts b/web/src/lib/queries/passkey.query.ts
index ac5b20599..d24936271 100644
--- a/web/src/lib/queries/passkey.query.ts
+++ b/web/src/lib/queries/passkey.query.ts
@@ -1,3 +1,4 @@
+import { asMutation, MutationCancelledError, queryClient } from '#lib/queries/client.js';
 import {
   deletePasskey,
   finishAuthentication,
@@ -14,7 +15,6 @@ import {
   type PublicKeyCredentialRequestOptionsJSON,
 } from '@simplewebauthn/browser';
 import { mutationOptions, queryOptions } from '@tanstack/svelte-query';
-import { asMutation, MutationCancelledError, queryClient } from '$lib/queries/client';
 
 const isPasskeyCancelled = (error: unknown) => error instanceof Error && error.name === 'NotAllowedError';
 
diff --git a/web/src/lib/queries/server.query.ts b/web/src/lib/queries/server-info.query.ts
similarity index 100%
rename from web/src/lib/queries/server.query.ts
rename to web/src/lib/queries/server-info.query.ts
diff --git a/web/src/lib/queries/session.query.ts b/web/src/lib/queries/session.query.ts
index 8be327a59..3d675e18c 100644
--- a/web/src/lib/queries/session.query.ts
+++ b/web/src/lib/queries/session.query.ts
@@ -1,6 +1,6 @@
+import { asMutation, queryClient } from '#lib/queries/client.js';
 import { deleteAllSessions, deleteSession, getSessions } from '@immich/sdk';
 import { mutationOptions, queryOptions } from '@tanstack/svelte-query';
-import { asMutation, queryClient } from '$lib/queries/client';
 
 export const getSessionsQuery = () =>
   queryOptions({
diff --git a/web/src/lib/queries/shared-link.query.ts b/web/src/lib/queries/shared-link.query.ts
index ba471fb6e..b759fb56b 100644
--- a/web/src/lib/queries/shared-link.query.ts
+++ b/web/src/lib/queries/shared-link.query.ts
@@ -1,3 +1,5 @@
+import { invalidateAlbum, invalidateAlbums } from '#lib/queries/album.query.js';
+import { asMutation, queryClient } from '#lib/queries/client.js';
 import {
   createSharedLink,
   getAllSharedLinks,
@@ -7,8 +9,6 @@ import {
   type SharedLinkResponseDto,
 } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
-import { invalidateAlbum, invalidateAlbums } from '$lib/queries/album.query';
-import { asMutation, queryClient } from '$lib/queries/client';
 
 const findOrFail = (sharedLinks: SharedLinkResponseDto[], id: string) => {
   const sharedLink = sharedLinks.find((sharedLink) => sharedLink.id === id);
diff --git a/web/src/lib/queries/user-admin.query.ts b/web/src/lib/queries/user-admin.query.ts
index 9cf80cf0f..fa65668c1 100644
--- a/web/src/lib/queries/user-admin.query.ts
+++ b/web/src/lib/queries/user-admin.query.ts
@@ -1,3 +1,5 @@
+import { getHeatmapRange } from '#lib';
+import { asMutation, queryClient } from '#lib/queries/client.js';
 import {
   CalendarHeatmapType,
   createUserAdmin,
@@ -12,8 +14,6 @@ import {
   type UserAdminResponseDto,
 } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
-import { getHeatmapRange } from '$lib';
-import { asMutation, queryClient } from '$lib/queries/client';
 
 const findOrFail = (users: UserAdminResponseDto[], id: string) => {
   const user = users.find((user) => user.id === id);
diff --git a/web/src/lib/queries/view.query.ts b/web/src/lib/queries/view.query.ts
index c36896149..7160f8b4b 100644
--- a/web/src/lib/queries/view.query.ts
+++ b/web/src/lib/queries/view.query.ts
@@ -1,6 +1,6 @@
+import { TreeNode } from '#lib/utils/tree-utils.js';
 import { getAssetsByOriginalPath, getUniqueOriginalPaths } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
-import { TreeNode } from '$lib/utils/tree-utils';
 
 const toTree = (paths: string[]) => {
   const tree = TreeNode.fromPaths(paths);
diff --git a/web/src/lib/queries/workflow.query.ts b/web/src/lib/queries/workflow.query.ts
index 3c430bea9..7c5861101 100644
--- a/web/src/lib/queries/workflow.query.ts
+++ b/web/src/lib/queries/workflow.query.ts
@@ -1,3 +1,4 @@
+import { asMutation, queryClient } from '#lib/queries/client.js';
 import {
   createWorkflow,
   deleteWorkflow,
@@ -8,7 +9,6 @@ import {
   type WorkflowResponseDto,
 } from '@immich/sdk';
 import { queryOptions } from '@tanstack/svelte-query';
-import { asMutation, queryClient } from '$lib/queries/client';
 
 const findOrFail = (workflows: WorkflowResponseDto[], id: string) => {
   const workflow = workflows.find((workflow) => workflow.id === id);
diff --git a/web/src/lib/route.spec.ts b/web/src/lib/route.spec.ts
index 8914e8a3a..5b54bb717 100644
--- a/web/src/lib/route.spec.ts
+++ b/web/src/lib/route.spec.ts
@@ -1,5 +1,5 @@
-import { OpenQueryParam } from '$lib/constants';
-import { Route } from '$lib/route';
+import { OpenQueryParam } from '#lib/constants.js';
+import { Route } from '#lib/route.js';
 
 describe('Route', () => {
   describe(Route.login.name, () => {
diff --git a/web/src/lib/route.ts b/web/src/lib/route.ts
index c1f3580d2..6e601ee11 100644
--- a/web/src/lib/route.ts
+++ b/web/src/lib/route.ts
@@ -1,6 +1,6 @@
+import { OpenQueryParam, type SharedLinkTab } from '#lib/constants.js';
 import { getBaseUrl, IntegrityReport, QueueName, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
 import { omitBy } from 'lodash-es';
-import { OpenQueryParam, type SharedLinkTab } from '$lib/constants';
 
 const asQueueSlug = (name: QueueName) => {
   return name.replaceAll(/[A-Z]/g, (m) => '-' + m.toLowerCase());
diff --git a/web/src/lib/services/album.service.ts b/web/src/lib/services/album.service.ts
index 68f470d34..c9b5c4867 100644
--- a/web/src/lib/services/album.service.ts
+++ b/web/src/lib/services/album.service.ts
@@ -1,3 +1,23 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+import AddUsersModal from '#lib/modals/AddUsersModal.svelte';
+import AlbumEditModal from '#lib/modals/AlbumEditModal.svelte';
+import AlbumOptionsModal from '#lib/modals/AlbumOptionsModal.svelte';
+import SharedLinkCreateModal from '#lib/modals/SharedLinkCreateModal.svelte';
+import {
+  addAssetsToAlbumsMutation,
+  addUsersToAlbumMutation,
+  deleteAlbumMutation,
+  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';
 import { AlbumUserRole, type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import {
@@ -16,26 +36,6 @@ import {
 import { type MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import AddUsersModal from '$lib/modals/AddUsersModal.svelte';
-import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
-import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
-import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
-import {
-  addAssetsToAlbumsMutation,
-  addUsersToAlbumMutation,
-  deleteAlbumMutation,
-  removeUserFromAlbumMutation,
-  updateAlbumInfoMutation,
-  updateAlbumUserMutation,
-} from '$lib/queries/album.query';
-import { executeMutation } from '$lib/queries/client';
-import { Route } from '$lib/route';
-import { createAlbumAndRedirect } from '$lib/utils/album-utils';
-import { downloadArchive } from '$lib/utils/asset-utils';
-import { openFileUploadDialog } from '$lib/utils/file-uploader';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const isAlbumOwner = (album: AlbumResponseDto) => album.albumUsers[0].user.id === authManager.user.id;
 export const isAlbumEditor = (album: AlbumResponseDto) =>
diff --git a/web/src/lib/services/api-key.service.ts b/web/src/lib/services/api-key.service.ts
index 12ec783e7..c288eec18 100644
--- a/web/src/lib/services/api-key.service.ts
+++ b/web/src/lib/services/api-key.service.ts
@@ -1,13 +1,13 @@
+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 type { ApiKeyResponseDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiAutorenew, mdiPencilOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-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';
-import { executeMutation } from '$lib/queries/client';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getApiKeysActions = ($t: MessageFormatter) => {
   const Create: ActionItem = {
diff --git a/web/src/lib/services/app.service.ts b/web/src/lib/services/app.service.ts
index 554f7cba9..02a98e483 100644
--- a/web/src/lib/services/app.service.ts
+++ b/web/src/lib/services/app.service.ts
@@ -1,8 +1,8 @@
+import { CastDestinationType, castManager } from '#lib/managers/cast-manager.svelte.js';
+import { GCastDestination } from '#lib/utils/cast/gcast-destination.svelte.js';
 import type { ActionItem } from '@immich/ui';
 import { mdiCast, mdiCastConnected } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { CastDestinationType, castManager } from '$lib/managers/cast-manager.svelte';
-import { GCastDestination } from '$lib/utils/cast/gcast-destination.svelte';
 
 export const getGlobalActions = ($t: MessageFormatter) => {
   const Cast: ActionItem = {
diff --git a/web/src/lib/services/asset.service.spec.ts b/web/src/lib/services/asset.service.spec.ts
index 9b435001e..e022410dc 100644
--- a/web/src/lib/services/asset.service.spec.ts
+++ b/web/src/lib/services/asset.service.spec.ts
@@ -1,16 +1,16 @@
+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 { getAssetInfo, type UserConfigDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 import { vitest } from 'vitest';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { getAssetActions, handleDownloadAsset } from '$lib/services/asset.service';
-import { setSharedLink } from '$lib/utils';
-import { getFormatter } from '$lib/utils/i18n';
-import { assetFactory } from '@test-data/factories/asset-factory';
-import { preferencesFactory } from '@test-data/factories/preferences-factory';
-import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
-import { userAdminFactory } from '@test-data/factories/user-factory';
+import { assetFactory } from '#test-data/factories/asset-factory';
+import { preferencesFactory } from '#test-data/factories/preferences-factory';
+import { sharedLinkFactory } from '#test-data/factories/shared-link-factory';
+import { userAdminFactory } from '#test-data/factories/user-factory';
 
 vitest.mock('@immich/ui', () => ({
   toastManager: {
@@ -18,15 +18,15 @@ vitest.mock('@immich/ui', () => ({
   },
 }));
 
-vitest.mock('$lib/utils/i18n', () => ({
+vitest.mock('#lib/utils/i18n.js', () => ({
   getFormatter: vitest.fn(),
   getPreferredLocale: vitest.fn(),
 }));
 
 vitest.mock('@immich/sdk');
 
-vitest.mock('$lib/utils', async () => {
-  const originalModule = await vitest.importActual('$lib/utils');
+vitest.mock('#lib/utils.js', async () => {
+  const originalModule = await vitest.importActual('#lib/utils.js');
   return {
     ...originalModule,
     sleep: vitest.fn(),
diff --git a/web/src/lib/services/asset.service.ts b/web/src/lib/services/asset.service.ts
index 30c468244..29c2db599 100644
--- a/web/src/lib/services/asset.service.ts
+++ b/web/src/lib/services/asset.service.ts
@@ -1,3 +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 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 {
   AssetJobName,
   AssetMediaSize,
@@ -42,24 +60,6 @@ import {
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
-import { ProjectionType } from '$lib/constants';
-import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-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';
-import { executeMutation, readPreloadedQuery } from '$lib/queries/client';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { Route } from '$lib/route';
-import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
-import { downloadUrl } from '$lib/utils';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getAssetBulkActions = ($t: MessageFormatter, album?: AlbumResponseDto) => {
   const assetIds = assetMultiSelectManager.assets.map((asset) => asset.id);
diff --git a/web/src/lib/services/database-backups.service.ts b/web/src/lib/services/database-backups.service.ts
index 6a379ce28..4a5c2bb09 100644
--- a/web/src/lib/services/database-backups.service.ts
+++ b/web/src/lib/services/database-backups.service.ts
@@ -1,3 +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 {
   deleteDatabaseBackup,
   getBaseUrl,
@@ -8,11 +13,6 @@ import {
 import { modalManager, type ActionItem } from '@immich/ui';
 import { mdiDownload, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { uploadRequest } from '$lib/utils';
-import { openFilePicker } from '$lib/utils/file-uploader';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getDatabaseBackupActions = ($t: MessageFormatter, filename: string) => {
   const Download: ActionItem = {
diff --git a/web/src/lib/services/integrity.service.ts b/web/src/lib/services/integrity.service.ts
index b9e832b5c..7ae99a913 100644
--- a/web/src/lib/services/integrity.service.ts
+++ b/web/src/lib/services/integrity.service.ts
@@ -1,12 +1,12 @@
+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 { createJob, deleteIntegrityReport, IntegrityReport, ManualJobName } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiDownload, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { Route } from '$lib/route';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getIntegrityReportActions = ($t: MessageFormatter, reportType: IntegrityReport) => {
   const Download: ActionItem = {
diff --git a/web/src/lib/services/job.service.ts b/web/src/lib/services/job.service.ts
index 0a81e788e..436da45f7 100644
--- a/web/src/lib/services/job.service.ts
+++ b/web/src/lib/services/job.service.ts
@@ -1,8 +1,8 @@
+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 { createJob, type JobCreateDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const handleCreateJob = async (dto: JobCreateDto) => {
   const $t = await getFormatter();
diff --git a/web/src/lib/services/keyboard.service.ts b/web/src/lib/services/keyboard.service.ts
index ba1546ece..0b7c4cbf3 100644
--- a/web/src/lib/services/keyboard.service.ts
+++ b/web/src/lib/services/keyboard.service.ts
@@ -1,7 +1,7 @@
+import ShortcutsModal from '#lib/modals/ShortcutsModal.svelte';
 import { modalManager, type ActionItem } from '@immich/ui';
 import { mdiKeyboard } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
 
 export const getKeyboardActions = ($t: MessageFormatter) => {
   const KeyboardShortcuts: ActionItem = {
diff --git a/web/src/lib/services/library.service.ts b/web/src/lib/services/library.service.ts
index d2f95a561..833950e55 100644
--- a/web/src/lib/services/library.service.ts
+++ b/web/src/lib/services/library.service.ts
@@ -1,17 +1,17 @@
+import LibraryExclusionPatternAddModal from '#lib/modals/LibraryExclusionPatternAddModal.svelte';
+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 type { LibraryResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import { mdiInformationOutline, mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
-import LibraryExclusionPatternAddModal from '$lib/modals/LibraryExclusionPatternAddModal.svelte';
-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';
-import { deleteLibraryMutation, scanLibraryMutation, updateLibraryMutation } from '$lib/queries/library.query';
-import { scanAllLibrariesMutation } from '$lib/queries/queue.query';
-import { Route } from '$lib/route';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getLibrariesActions = ($t: MessageFormatter) => {
   const ScanAll: ActionItem = {
diff --git a/web/src/lib/services/maintenance.service.ts b/web/src/lib/services/maintenance.service.ts
index 61c78c107..bdc0caf4f 100644
--- a/web/src/lib/services/maintenance.service.ts
+++ b/web/src/lib/services/maintenance.service.ts
@@ -1,9 +1,9 @@
+import { handleError } from '#lib/utils/handle-error.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { MaintenanceAction, setMaintenanceMode, type SetMaintenanceModeDto } from '@immich/sdk';
 import type { ActionItem } from '@immich/ui';
 import { mdiProgressWrench } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getMaintenanceAdminActions = ($t: MessageFormatter) => {
   const StartMaintenance: ActionItem = {
diff --git a/web/src/lib/services/passkey.service.ts b/web/src/lib/services/passkey.service.ts
index 17631d061..37c4974e2 100644
--- a/web/src/lib/services/passkey.service.ts
+++ b/web/src/lib/services/passkey.service.ts
@@ -1,12 +1,12 @@
+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 { type PasskeyResponseDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiPencilOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser';
 import type { MessageFormatter } from 'svelte-i18n';
-import PasskeyUpdateModal from '$lib/modals/PasskeyUpdateModal.svelte';
-import { executeMutation } from '$lib/queries/client';
-import { createPasskeyMutation, deletePasskeyMutation } from '$lib/queries/passkey.query';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getPasskeysActions = ($t: MessageFormatter) => {
   const Create: ActionItem = {
diff --git a/web/src/lib/services/person-user.service.ts b/web/src/lib/services/person-user.service.ts
index b185cc48e..c9b363920 100644
--- a/web/src/lib/services/person-user.service.ts
+++ b/web/src/lib/services/person-user.service.ts
@@ -1,3 +1,9 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
+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 {
   PeopleUsersUpsertType,
   PersonUserRole,
@@ -9,12 +15,6 @@ import {
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiAccountMultipleOutline, mdiCheck, mdiClose, mdiPlus, mdiShareOutline } from '@mdi/js';
 import { type MessageFormatter } from 'svelte-i18n';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import AddUsersModal from '$lib/modals/AddUsersModal.svelte';
-import PersonBulkShareModal from '$lib/modals/PersonBulkShareModal.svelte';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getPeopleUserActions = ($t: MessageFormatter, users: UserResponseDto[], people?: PersonResponseDto[]) => {
   const ManageAccess: ActionItem = {
diff --git a/web/src/lib/services/person.service.ts b/web/src/lib/services/person.service.ts
index af8ee617d..8212e2534 100644
--- a/web/src/lib/services/person.service.ts
+++ b/web/src/lib/services/person.service.ts
@@ -1,3 +1,9 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
+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 {
   getPerson,
   PersonUpdateStrategy,
@@ -17,12 +23,6 @@ import {
   mdiPencilOutline,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import PersonEditAccessModal from '$lib/modals/PersonEditAccessModal.svelte';
-import PersonEditModal from '$lib/modals/PersonEditModal.svelte';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getPersonActions = ($t: MessageFormatter, person: PersonResponseDto) => {
   const Edit: ActionItem = {
diff --git a/web/src/lib/services/queue.service.ts b/web/src/lib/services/queue.service.ts
index c0a8d90d6..b9f0219c4 100644
--- a/web/src/lib/services/queue.service.ts
+++ b/web/src/lib/services/queue.service.ts
@@ -1,3 +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 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 {
   emptyQueue,
   getQueue,
@@ -34,14 +42,6 @@ import {
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
-import { OpenQueryParam } from '$lib/constants';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { queueManager } from '$lib/managers/queue-manager.svelte';
-import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
-import { Route } from '$lib/route';
-import type { HeaderButtonActionItem } from '$lib/types';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 type QueueItem = {
   icon: IconLike;
diff --git a/web/src/lib/services/shared-link.service.spec.ts b/web/src/lib/services/shared-link.service.spec.ts
index 235d615ff..faf8ba07a 100644
--- a/web/src/lib/services/shared-link.service.spec.ts
+++ b/web/src/lib/services/shared-link.service.spec.ts
@@ -1,7 +1,7 @@
-import { asUrl } from '$lib/services/shared-link.service';
-import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
+import { asUrl } from '#lib/services/shared-link.service.js';
+import { sharedLinkFactory } from '#test-data/factories/shared-link-factory';
 
-vi.mock(import('$lib/queries/client'), async (importOriginal) => ({
+vi.mock(import('#lib/queries/client.js'), async (importOriginal) => ({
   ...(await importOriginal()),
   readPreloadedQuery: vi.fn().mockReturnValue({ server: { externalDomain: 'http://localhost:2283' } }),
 }));
diff --git a/web/src/lib/services/shared-link.service.ts b/web/src/lib/services/shared-link.service.ts
index 83d058207..a10d133c8 100644
--- a/web/src/lib/services/shared-link.service.ts
+++ b/web/src/lib/services/shared-link.service.ts
@@ -1,15 +1,15 @@
+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 { type SharedLinkResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import { mdiContentCopy, mdiLink, mdiPencilOutline, mdiQrcode, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
-import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
-import { executeMutation, readPreloadedQuery } from '$lib/queries/client';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { removeSharedLinkMutation } from '$lib/queries/shared-link.query';
-import { Route } from '$lib/route';
-import { copyToClipboard } from '$lib/utils';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getSharedLinksActions = ($t: MessageFormatter) => {
   const ViewAll: ActionItem = {
diff --git a/web/src/lib/services/stack.service.ts b/web/src/lib/services/stack.service.ts
index cd2f20462..dc4f26289 100644
--- a/web/src/lib/services/stack.service.ts
+++ b/web/src/lib/services/stack.service.ts
@@ -1,3 +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 {
   createStack,
   deleteAssets,
@@ -19,13 +26,6 @@ import {
   mdiUploadMultiple,
 } from '@mdi/js';
 import { type MessageFormatter } from 'svelte-i18n';
-import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { openFileUploadDialog } from '$lib/utils/file-uploader';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
-import { navigate } from '$lib/utils/navigation';
 
 export const getStackBulkActions = ($t: MessageFormatter) => {
   const Stack: ActionItem = {
diff --git a/web/src/lib/services/system-config.service.ts b/web/src/lib/services/system-config.service.ts
index 08cae209b..019c1317e 100644
--- a/web/src/lib/services/system-config.service.ts
+++ b/web/src/lib/services/system-config.service.ts
@@ -1,10 +1,10 @@
+import { executeMutation } from '#lib/queries/client.js';
+import { updateAdminConfigMutation } from '#lib/queries/config-admin.query.js';
+import { copyToClipboard, downloadJson } from '#lib/utils.js';
 import type { AdminConfigDto, ServerFeaturesDto } from '@immich/sdk';
 import type { ActionItem } from '@immich/ui';
 import { mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { executeMutation } from '$lib/queries/client';
-import { updateAdminConfigMutation } from '$lib/queries/config-admin.query';
-import { copyToClipboard, downloadJson } from '$lib/utils';
 
 export const getSystemConfigActions = (
   $t: MessageFormatter,
diff --git a/web/src/lib/services/tag.service.ts b/web/src/lib/services/tag.service.ts
index 6d3324311..8b9eb43f6 100644
--- a/web/src/lib/services/tag.service.ts
+++ b/web/src/lib/services/tag.service.ts
@@ -1,13 +1,13 @@
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
+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 { deleteTag, updateTag, upsertTags, type TagUpdateDto } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiPencil, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
 import { type MessageFormatter } from 'svelte-i18n';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
-import TagEditModal from '$lib/modals/TagEditModal.svelte';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
-import type { TreeNode } from '$lib/utils/tree-utils';
 
 export const getTagActions = ($t: MessageFormatter, tag: TreeNode) => {
   const Create: ActionItem = {
diff --git a/web/src/lib/services/trash.service.ts b/web/src/lib/services/trash.service.ts
index 3fbe7a91c..25c8242cd 100644
--- a/web/src/lib/services/trash.service.ts
+++ b/web/src/lib/services/trash.service.ts
@@ -1,9 +1,9 @@
+import { handleError } from '#lib/utils/handle-error.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { emptyTrash, restoreTrash } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getTrashActions = ($t: MessageFormatter, assetCount: number) => {
   const RestoreAll: ActionItem = {
diff --git a/web/src/lib/services/user-admin.service.ts b/web/src/lib/services/user-admin.service.ts
index 40345e3f9..f125cfd69 100644
--- a/web/src/lib/services/user-admin.service.ts
+++ b/web/src/lib/services/user-admin.service.ts
@@ -1,3 +1,13 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
+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 { UserStatus, type UserAdminResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import {
@@ -12,16 +22,6 @@ import {
 import { DateTime } from 'luxon';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-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';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { updateUserAdminMutation } from '$lib/queries/user-admin.query';
-import { Route } from '$lib/route';
-import type { HeaderButtonActionItem } from '$lib/types';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getUserAdminsActions = ($t: MessageFormatter) => {
   const Create: ActionItem = {
diff --git a/web/src/lib/services/user.service.ts b/web/src/lib/services/user.service.ts
index a900194dd..11d18c209 100644
--- a/web/src/lib/services/user.service.ts
+++ b/web/src/lib/services/user.service.ts
@@ -1,3 +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 {
   changePassword,
   lockAuthSession,
@@ -8,9 +11,6 @@ import {
 import { toastManager, type ActionItem } from '@immich/ui';
 import { mdiLockOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { handleError } from '$lib/utils/handle-error';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getUserActions = ($t: MessageFormatter) => {
   const LockSession: ActionItem = {
diff --git a/web/src/lib/services/workflow.service.ts b/web/src/lib/services/workflow.service.ts
index fd6058f44..837aef28b 100644
--- a/web/src/lib/services/workflow.service.ts
+++ b/web/src/lib/services/workflow.service.ts
@@ -1,3 +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 { WorkflowTrigger, type WorkflowResponseDto } from '@immich/sdk';
 import { modalManager, type ActionItem } from '@immich/ui';
 import {
@@ -16,14 +24,6 @@ import {
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
-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';
-import { createWorkflowMutation, deleteWorkflowMutation, updateWorkflowMutation } from '$lib/queries/workflow.query';
-import { Route } from '$lib/route';
-import { copyToClipboard, downloadJson } from '$lib/utils';
-import { getFormatter } from '$lib/utils/i18n';
 
 export const getWorkflowsActions = ($t: MessageFormatter) => {
   const Create: ActionItem = {
diff --git a/web/src/lib/stores/face.svelte.ts b/web/src/lib/stores/face.svelte.ts
index e9f026bbe..1ee56ff2c 100644
--- a/web/src/lib/stores/face.svelte.ts
+++ b/web/src/lib/stores/face.svelte.ts
@@ -1,8 +1,8 @@
+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 type { AssetFaceResponseDto, PersonResponseDto } from '@immich/sdk';
 import { SvelteMap } from 'svelte/reactivity';
-import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
-import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
-import { CancellableTask } from '$lib/utils/cancellable-task';
 
 class FaceManager {
   #data = $state<AssetFaceResponseDto[]>([]);
diff --git a/web/src/lib/stores/ocr.svelte.spec.ts b/web/src/lib/stores/ocr.svelte.spec.ts
index 79c4b8d0e..7924af29f 100644
--- a/web/src/lib/stores/ocr.svelte.spec.ts
+++ b/web/src/lib/stores/ocr.svelte.spec.ts
@@ -1,7 +1,7 @@
+import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
+import { ocrManager, type OcrBoundingBox } from '#lib/stores/ocr.svelte.js';
 import { getAssetOcr } from '@immich/sdk';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
-import { ocrManager, type OcrBoundingBox } from '$lib/stores/ocr.svelte';
 
 // Mock the SDK
 vi.mock('@immich/sdk', () => ({
diff --git a/web/src/lib/stores/ocr.svelte.ts b/web/src/lib/stores/ocr.svelte.ts
index 39c42875d..66bb28ddf 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';
-import { CancellableTask } from '$lib/utils/cancellable-task';
+import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
+import { CancellableTask } from '#lib/utils/cancellable-task.js';
 
 export type OcrBoundingBox = {
   id: string;
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 59cc58ac1..0fb53cb52 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -1,7 +1,7 @@
+import { defaultLang } from '#lib/constants.js';
+import { convertBCP47, getPreferredLocale } from '#lib/utils/i18n.js';
 import { persisted } from 'svelte-persisted-store';
-import { browser } from '$app/environment';
-import { defaultLang } from '$lib/constants';
-import { convertBCP47, getPreferredLocale } from '$lib/utils/i18n';
+import { browser } from '$app/env';
 
 // Locale to use for formatting dates, numbers, etc.
 export const locale = persisted('locale', 'default', {
diff --git a/web/src/lib/stores/search.svelte.ts b/web/src/lib/stores/search.svelte.ts
index 453a8ce6c..f3266701b 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';
+import { eventManager } from '#lib/managers/event-manager.svelte.js';
 
 class SearchStore {
   savedSearchTerms = $state<string[]>([]);
diff --git a/web/src/lib/stores/sidebar.svelte.ts b/web/src/lib/stores/sidebar.svelte.ts
index 72bc37120..53bf0f572 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';
+import { mediaQueryManager } from '#lib/stores/media-query-manager.svelte.js';
 
 class SidebarStore {
   isOpen = $derived.by(() => mediaQueryManager.isFullSidebar);
diff --git a/web/src/lib/stores/upload.ts b/web/src/lib/stores/upload.ts
index 21929ab1e..d17c6c2ab 100644
--- a/web/src/lib/stores/upload.ts
+++ b/web/src/lib/stores/upload.ts
@@ -1,5 +1,5 @@
+import { UploadState, type UploadAsset } from '#lib/types.js';
 import { derived, writable } from 'svelte/store';
-import { UploadState, type UploadAsset } from '$lib/types';
 
 function createUploadStore() {
   const uploadAssets = writable<Array<UploadAsset>>([]);
diff --git a/web/src/lib/stores/websocket.ts b/web/src/lib/stores/websocket.ts
index 3a8d28c3f..ba8c74718 100644
--- a/web/src/lib/stores/websocket.ts
+++ b/web/src/lib/stores/websocket.ts
@@ -1,3 +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 {
   MaintenanceAction,
   type AssetResponseDto,
@@ -12,15 +21,6 @@ import { isEqual } from 'lodash-es';
 import { io, type Socket } from 'socket.io-client';
 import { get, writable } from 'svelte/store';
 import { page } from '$app/state';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { getNotificationsQuery } from '$lib/queries/notification.query';
-import { getServerConfigQuery } from '$lib/queries/server.query';
-import { searchUsersAdminQuery } from '$lib/queries/user-admin.query';
-import { Route } from '$lib/route';
-import { maintenanceStore } from '$lib/stores/maintenance.store';
-import { createEventEmitter } from '$lib/utils/eventemitter';
 
 interface AppRestartEvent {
   isMaintenanceMode: boolean;
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
index b6865f198..1d3d1be74 100644
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -1,8 +1,8 @@
+import { MediaType } from '#lib/constants.js';
 import type { QueueResponseDto } from '@immich/sdk';
 import type { ActionItem } from '@immich/ui';
 import type { DateTime } from 'luxon';
 import type { SvelteSet } from 'svelte/reactivity';
-import { MediaType } from '$lib/constants';
 
 export type LatLng = { lng: number; lat: number };
 
diff --git a/web/src/lib/utils.spec.ts b/web/src/lib/utils.spec.ts
index 8c5867ca7..d5a4873db 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 { AssetTypeEnum, MemoryType, type MemoryResponseDto } from '@immich/sdk';
 import { addMessages, init } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import en from '$i18n/en.json';
-import { getAssetUrl, memoryLaneTitle, semverToName } from '$lib/utils';
-import { assetFactory } from '@test-data/factories/asset-factory';
-import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
+import { assetFactory } from '#test-data/factories/asset-factory.js';
+import { sharedLinkFactory } from '#test-data/factories/shared-link-factory.js';
 
 describe('utils', () => {
   describe(getAssetUrl.name, () => {
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index c49ba30b6..6e1ef3e76 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -1,3 +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 {
   AssetMediaSize,
   AssetTypeEnum,
@@ -23,12 +29,6 @@ import { toastManager, type ActionItem, type IfLike } from '@immich/ui';
 import { DateTime } from 'luxon';
 import { init, register, t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
-import { defaultLang, locales } from '$lib/constants';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { alwaysLoadOriginalFile, lang, locale } from '$lib/stores/preferences.store';
-import { isWebCompatibleImage } from '$lib/utils/asset-utils';
-import { handleError } from '$lib/utils/handle-error';
-import { convertBCP47, langs } from '$lib/utils/i18n';
 
 interface DownloadRequestOptions<T = unknown> {
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
diff --git a/web/src/lib/utils/actions.ts b/web/src/lib/utils/actions.ts
index 968e62565..0791e68cc 100644
--- a/web/src/lib/utils/actions.ts
+++ b/web/src/lib/utils/actions.ts
@@ -1,9 +1,9 @@
+import { TimelineManager } from '#lib/managers/timeline-manager/timeline-manager.svelte.js';
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
 import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets, type StackResponseDto } from '@immich/sdk';
 import { toastManager } from '@immich/ui';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { handleError } from './handle-error';
 
 export type OnDelete = (assetIds: string[]) => void;
diff --git a/web/src/lib/utils/adaptive-image-loader.spec.ts b/web/src/lib/utils/adaptive-image-loader.spec.ts
index f4a2b172c..76b583c1f 100644
--- a/web/src/lib/utils/adaptive-image-loader.spec.ts
+++ b/web/src/lib/utils/adaptive-image-loader.spec.ts
@@ -1,7 +1,7 @@
-import { AdaptiveImageLoader, type QualityList } from '$lib/utils/adaptive-image-loader.svelte';
-import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import { AdaptiveImageLoader, type QualityList } from '#lib/utils/adaptive-image-loader.svelte.js';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
 
-vi.mock('$lib/utils/sw-messaging', () => ({
+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 c82d17ec9..d29969e7d 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';
-import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import type { LoadImageFunction } from '#lib/actions/image-loader.svelte.js';
+import { cancelImageUrl } from '#lib/utils/sw-messaging.js';
 
 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 377143836..197f05531 100644
--- a/web/src/lib/utils/album-utils.ts
+++ b/web/src/lib/utils/album-utils.ts
@@ -1,10 +1,6 @@
-import type { AlbumResponseDto } from '@immich/sdk';
-import { orderBy } from 'lodash-es';
-import { get } from 'svelte/store';
-import { goto } from '$app/navigation';
-import { createAlbumMutation } from '$lib/queries/album.query';
-import { executeMutation } from '$lib/queries/client';
-import { Route } from '$lib/route';
+import { createAlbumMutation } from '#lib/queries/album.query.js';
+import { executeMutation } from '#lib/queries/client.js';
+import { Route } from '#lib/route.js';
 import {
   AlbumFilter,
   AlbumGroupBy,
@@ -13,7 +9,11 @@ import {
   albumViewSettings,
   locale,
   type AlbumViewSettings,
-} from '$lib/stores/preferences.store';
+} from '#lib/stores/preferences.store.js';
+import type { AlbumResponseDto } from '@immich/sdk';
+import { orderBy } from 'lodash-es';
+import { get } from 'svelte/store';
+import { goto } from '$app/navigation';
 
 /**
  * -------------------------
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index f4a4c6789..53fd2ccc9 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -1,3 +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 {
   AssetVisibility,
   getBaseUrl,
@@ -15,19 +28,6 @@ import { toastManager } from '@immich/ui';
 import { DateTime } from 'luxon';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { downloadManager } from '$lib/managers/download-manager.svelte';
-import { eventManager } from '$lib/managers/event-manager.svelte';
-import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { locale } from '$lib/stores/preferences.store';
-import { downloadUrlPost, withError } from '$lib/utils';
-import { getByteUnitString } from '$lib/utils/byte-units';
-import { getFormatter } from '$lib/utils/i18n';
-import { navigate } from '$lib/utils/navigation';
-import { asQueryString } from '$lib/utils/shared-links';
-import { toTimelineAsset } from '$lib/utils/timeline-util';
 import { handleError } from './handle-error';
 
 export const removeTag = async ({
diff --git a/web/src/lib/utils/auth.ts b/web/src/lib/utils/auth.ts
index 85aaadbac..f5929c8d8 100644
--- a/web/src/lib/utils/auth.ts
+++ b/web/src/lib/utils/auth.ts
@@ -1,7 +1,7 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
 import { DateTime } from 'luxon';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { Route } from '$lib/route';
 
 export interface AuthOptions {
   admin?: true;
diff --git a/web/src/lib/utils/byte-units.spec.ts b/web/src/lib/utils/byte-units.spec.ts
index 842b8ec6a..fcc592a3f 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';
+import { ByteUnit, getByteUnitString, getBytesWithUnit } from '#lib/utils/byte-units.js';
 
 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 27e4678d4..880bb1284 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';
+import { CancellableTask } from '#lib/utils/cancellable-task.js';
 
 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 71766366e..b60ad5520 100644
--- a/web/src/lib/utils/cast/gcast-destination.svelte.ts
+++ b/web/src/lib/utils/cast/gcast-destination.svelte.ts
@@ -1,7 +1,7 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
+import { CastDestinationType, CastState, type ICastDestination } from '#lib/managers/cast-manager.svelte.js';
 import 'chromecast-caf-sender';
 import { Duration } from 'luxon';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { CastDestinationType, CastState, type ICastDestination } from '$lib/managers/cast-manager.svelte';
 
 const FRAMEWORK_LINK = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1';
 
diff --git a/web/src/lib/utils/server.ts b/web/src/lib/utils/client.ts
similarity index 62%
rename from web/src/lib/utils/server.ts
rename to web/src/lib/utils/client.ts
index b0da8a926..a9b86060b 100644
--- a/web/src/lib/utils/server.ts
+++ b/web/src/lib/utils/client.ts
@@ -1,11 +1,11 @@
+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 { setFetch } from '@immich/sdk';
 import { memoize } from 'lodash-es';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { getPublicConfigQuery } from '$lib/queries/config-public.query';
-import { getServerConfigQuery } from '$lib/queries/server.query';
-import { initLanguage } from '$lib/utils';
 
 type Fetch = typeof fetch;
 
diff --git a/web/src/lib/utils/container-utils.spec.ts b/web/src/lib/utils/container-utils.spec.ts
index d6a1efbe6..933f519a2 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';
+} from '#lib/utils/container-utils.js';
 
 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 1fe6c629f..eaaf43b58 100644
--- a/web/src/lib/utils/date-time.spec.ts
+++ b/web/src/lib/utils/date-time.spec.ts
@@ -1,10 +1,7 @@
-import { writable } from 'svelte/store';
-import { locale } from '$lib/stores/preferences.store';
+import { locale } from '#lib/stores/preferences.store.js';
 import { getAlbumDateRange, getShortDateRange } from './date-time';
 
-vitest.mock('$lib/stores/preferences.store', () => ({
-  locale: writable('en'),
-}));
+vitest.mock('#lib/stores/preferences.store.js', { spy: true });
 
 describe('getShortDateRange', () => {
   beforeEach(() => {
diff --git a/web/src/lib/utils/date-time.ts b/web/src/lib/utils/date-time.ts
index 7f772a375..f570dbde8 100644
--- a/web/src/lib/utils/date-time.ts
+++ b/web/src/lib/utils/date-time.ts
@@ -1,7 +1,7 @@
+import { dateFormats } from '#lib/constants.js';
+import { locale } from '#lib/stores/preferences.store.js';
 import { DateTime } from 'luxon';
 import { get } from 'svelte/store';
-import { dateFormats } from '$lib/constants';
-import { locale } from '$lib/stores/preferences.store';
 
 export function parseUtcDate(date: string) {
   return DateTime.fromISO(date, { zone: 'UTC' }).toUTC();
diff --git a/web/src/lib/utils/duplicate-utils.ts b/web/src/lib/utils/duplicate-utils.ts
index d0c696d3c..0e9af1990 100644
--- a/web/src/lib/utils/duplicate-utils.ts
+++ b/web/src/lib/utils/duplicate-utils.ts
@@ -1,3 +1,5 @@
+import { getAssetResolution, getFileSize } from '#lib/utils/asset-utils.js';
+import { fromISODateTime, fromISODateTimeUTC } from '#lib/utils/timeline-util.js';
 import type { AssetResponseDto } from '@immich/sdk';
 import {
   mdiBrightness6,
@@ -24,8 +26,6 @@ import {
 } from '@mdi/js';
 import { DateTime } from 'luxon';
 import type { MessageFormatter } from 'svelte-i18n';
-import { getAssetResolution, getFileSize } from '$lib/utils/asset-utils';
-import { fromISODateTime, fromISODateTimeUTC } from '$lib/utils/timeline-util';
 
 const truncateMiddle = (path: string, maxLength = 50): string => {
   if (path.length <= maxLength) {
diff --git a/web/src/lib/utils/editor.spec.ts b/web/src/lib/utils/editor.spec.ts
index 1c2baa264..4618bdaea 100644
--- a/web/src/lib/utils/editor.spec.ts
+++ b/web/src/lib/utils/editor.spec.ts
@@ -1,6 +1,6 @@
+import type { EditActions } from '#lib/managers/edit/edit-manager.svelte.js';
+import { buildAffineFromEdits, normalizeTransformEdits } from '#lib/utils/editor.js';
 import { AssetEditAction, MirrorAxis } from '@immich/sdk';
-import type { EditActions } from '$lib/managers/edit/edit-manager.svelte';
-import { buildAffineFromEdits, normalizeTransformEdits } from '$lib/utils/editor';
 
 type NormalizedParameters = {
   rotation: number;
diff --git a/web/src/lib/utils/editor.ts b/web/src/lib/utils/editor.ts
index 298d4e887..7be265577 100644
--- a/web/src/lib/utils/editor.ts
+++ b/web/src/lib/utils/editor.ts
@@ -1,6 +1,6 @@
+import type { EditActions } from '#lib/managers/edit/edit-manager.svelte.js';
 import type { MirrorParameters, RotateParameters } from '@immich/sdk';
 import { compose, flipX, flipY, identity, rotate } from 'transformation-matrix';
-import type { EditActions } from '$lib/managers/edit/edit-manager.svelte';
 
 const isCloseToZero = (x: number, epsilon: number = 1e-15) => Math.abs(x) < epsilon;
 
diff --git a/web/src/lib/utils/executor-queue.spec.ts b/web/src/lib/utils/executor-queue.spec.ts
index 867cc7844..bdc90d57e 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';
+import { ExecutorQueue } from '#lib/utils/executor-queue.js';
 
 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 7d3d3aa29..0a851ee12 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';
+import { handlePromiseError } from '#lib/utils.js';
 
 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 6d0c49fb2..9e59322a2 100644
--- a/web/src/lib/utils/file-uploader.spec.ts
+++ b/web/src/lib/utils/file-uploader.spec.ts
@@ -1,12 +1,12 @@
+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 { AssetMediaStatus, type AssetMediaResponseDto, type UserAdminResponseDto } from '@immich/sdk';
 import { get } from 'svelte/store';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { uploadManager } from '$lib/managers/upload-manager.svelte';
-import { uploadAssetsStore } from '$lib/stores/upload';
-import { UploadState } from '$lib/types';
-import * as utils from '$lib/utils';
-import { preferencesFactory } from '@test-data/factories/preferences-factory';
+import { preferencesFactory } from '#test-data/factories/preferences-factory';
 import { fileUploadHandler } from './file-uploader';
 
 describe('fileUploader error handling', () => {
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index 3e4e369f0..d9d122719 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -1,3 +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 {
   AssetMediaStatus,
   AssetUploadAction,
@@ -10,15 +19,6 @@ import { toastManager } from '@immich/ui';
 import { tick } from 'svelte';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { uploadManager } from '$lib/managers/upload-manager.svelte';
-import { addAssetsToAlbumsMutation } from '$lib/queries/album.query';
-import { executeMutation } from '$lib/queries/client';
-import { uploadAssetsStore } from '$lib/stores/upload';
-import { UploadState } from '$lib/types';
-import { uploadRequest } from '$lib/utils';
-import { ExecutorQueue } from '$lib/utils/executor-queue';
-import { asQueryString } from '$lib/utils/shared-links';
 import { handleError } from './handle-error';
 
 export const uploadExecutionQueue = new ExecutorQueue({ concurrency: 2 });
@@ -116,7 +116,7 @@ function getDeviceAssetId(asset: File) {
 
 function hashFile(file: File): Promise<string> {
   return new Promise<string>((resolve, reject) => {
-    const worker = new Worker(new URL('$lib/workers/hash-file.ts', import.meta.url), { type: 'module' });
+    const worker = new Worker('#lib/workers/hash-file.ts', { type: 'module' });
 
     worker.addEventListener('message', ({ data }: MessageEvent<{ result?: string; error?: string }>) => {
       worker.terminate();
diff --git a/web/src/lib/utils/i18n.ts b/web/src/lib/utils/i18n.ts
index 758721c38..8ad3c9ed2 100644
--- a/web/src/lib/utils/i18n.ts
+++ b/web/src/lib/utils/i18n.ts
@@ -1,6 +1,6 @@
+import type { Lang } from '#lib/constants.js';
 import { locale, t, waitLocale } from 'svelte-i18n';
 import { get, type Unsubscriber } from 'svelte/store';
-import type { Lang } from '$lib/constants';
 
 export const getFormatter = async () => {
   let unsubscribe: Unsubscriber | undefined;
@@ -21,7 +21,7 @@ const aliases: Record<string, string> = {
   'zh-TW': 'zh-Hant',
 };
 
-const modules = import.meta.glob('$i18n/*.json');
+const modules = import.meta.glob('#i18n/*.json');
 
 const fileCodes = Object.keys(modules)
   .map((path) => path.match(/\/(\w+)\.json$/)?.[1])
@@ -137,7 +137,7 @@ export const langs: Lang[] = [
     .map((code) => ({
       name: getLanguageName(convertBCP47(code)),
       code,
-      loader: () => import(`$i18n/${code}.json`),
+      loader: () => import(`#i18n/${code}.json`),
       rtl: rtlCodes.has(code),
     }))
     .sort((a, b) => a.code.localeCompare(b.code)),
diff --git a/web/src/lib/utils/invocationTracker.ts b/web/src/lib/utils/invocationTracker.ts
index ada3b12d0..ac9a61d6f 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';
+import { handleError } from '#lib/utils/handle-error.js';
 
 /**
  * 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 87455b201..1bd43151d 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';
+import { scaleToCover, scaleToFit } from '#lib/utils/container-utils.js';
 
 describe('scaleToFit', () => {
   const tests = [
diff --git a/web/src/lib/utils/layout-utils.ts b/web/src/lib/utils/layout-utils.ts
index f781bde3f..679b60e0d 100644
--- a/web/src/lib/utils/layout-utils.ts
+++ b/web/src/lib/utils/layout-utils.ts
@@ -1,10 +1,10 @@
+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 { JustifiedLayout, type LayoutOptions } from '@immich/justified-layout-wasm';
 import type { AssetResponseDto } from '@immich/sdk';
 import createJustifiedLayout from 'justified-layout';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { getAssetRatio } from '$lib/utils/asset-utils';
-import { isTimelineAsset, isTimelineAssets } from '$lib/utils/timeline-util';
-import { TUNABLES } from '$lib/utils/tunables';
 
 const useWasm = TUNABLES.LAYOUT.WASM;
 
diff --git a/web/src/lib/utils/license-utils.ts b/web/src/lib/utils/license-utils.ts
index cd1cae128..8beceea95 100644
--- a/web/src/lib/utils/license-utils.ts
+++ b/web/src/lib/utils/license-utils.ts
@@ -1,10 +1,10 @@
+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 { setServerLicense, setUserLicense, type LicenseResponseDto } from '@immich/sdk';
-import { PUBLIC_IMMICH_BUY_HOST, PUBLIC_IMMICH_PAY_HOST } from '$env/static/public';
-import type { ImmichProduct } from '$lib/constants';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { queryClient, readPreloadedQuery } from '$lib/queries/client';
-import { getUserConfigQuery } from '$lib/queries/config-user.query';
-import { getAboutInfoQuery } from '$lib/queries/server.query';
+import { PUBLIC_IMMICH_BUY_HOST, PUBLIC_IMMICH_PAY_HOST } from '$app/env/public';
 
 export const activateProduct = async (licenseKey: string, activationKey: string): Promise<LicenseResponseDto> => {
   // TODO is this needed?
diff --git a/web/src/lib/utils/maintenance.spec.ts b/web/src/lib/utils/maintenance.spec.ts
index 89cf7e12d..aa82f4b0c 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';
+import { maintenanceReturnUrl } from '#lib/utils/maintenance.js';
 
 describe('maintenance', () => {
   describe(maintenanceReturnUrl.name, () => {
diff --git a/web/src/lib/utils/maintenance.ts b/web/src/lib/utils/maintenance.ts
index 317180f88..c8cc47f98 100644
--- a/web/src/lib/utils/maintenance.ts
+++ b/web/src/lib/utils/maintenance.ts
@@ -1,7 +1,7 @@
+import { Route } from '#lib/route.js';
+import { maintenanceStore } from '#lib/stores/maintenance.store.js';
+import { websocketStore } from '#lib/stores/websocket.js';
 import { getMaintenanceStatus, MaintenanceAction, maintenanceLogin } from '@immich/sdk';
-import { Route } from '$lib/route';
-import { maintenanceStore } from '$lib/stores/maintenance.store';
-import { websocketStore } from '$lib/stores/websocket';
 
 export function maintenanceCreateUrl(url: URL) {
   return new URL(Route.maintenanceMode({ continue: url.pathname + url.search }), url.origin).href;
diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index feb18e1b9..adbcf71d0 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -1,8 +1,8 @@
+import { assetCacheManager } from '#lib/managers/AssetCacheManager.svelte.js';
+import { Route } from '#lib/route.js';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
 import type { RouteId } from '$app/types';
-import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
-import { Route } from '$lib/route';
 
 export type AssetGridRouteSearchParams = {
   at: string | null | undefined;
@@ -49,7 +49,7 @@ export function currentUrlReplaceAssetId(assetId: string) {
 }
 
 function replaceScrollTarget(url: string, searchParams?: AssetGridRouteSearchParams | null) {
-  const parsed = new URL(url, page.url);
+  const parsed = new URL(url, page.url.href);
 
   const { at: assetId } = searchParams || { at: null };
 
@@ -91,10 +91,9 @@ type ImmichRoute = AssetRoute | AssetGridRoute;
 type NavOptions = {
   /* navigate even if url is the same */
   forceNavigate?: boolean | undefined;
-  replaceState?: boolean | undefined;
-  noScroll?: boolean | undefined;
-  keepFocus?: boolean | undefined;
-  invalidateAll?: boolean | undefined;
+  replace?: boolean | undefined;
+  reset?: boolean | undefined;
+  refreshAll?: boolean | undefined;
   state?: App.PageState | undefined;
 };
 
@@ -142,12 +141,12 @@ export const clearQueryParam = async (queryParam: string, url: URL) => {
   }
 
   url.searchParams.delete(queryParam);
-  await goto(url, { keepFocus: true });
+  await goto(url, { reset: false });
 };
 
 export const setQueryValue = async (queryKey: string, queryValue: string) => {
   const url = location.href;
   const urlObject = new URL(url);
   urlObject.searchParams.set(queryKey, queryValue);
-  await goto(urlObject, { keepFocus: true });
+  await goto(urlObject, { reset: false });
 };
diff --git a/web/src/lib/utils/ocr-utils.spec.ts b/web/src/lib/utils/ocr-utils.spec.ts
index c88936fdd..d6230070f 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';
-import type { Size } from '$lib/utils/container-utils';
-import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
+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';
 
 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 fdf39322d..c8cc97ffd 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 { clamp } from 'lodash-es';
-import type { OcrBoundingBox } from '$lib/stores/ocr.svelte';
-import { mapNormalizedToContent, type Point, type Size } from '$lib/utils/container-utils';
 
-export type { Point } from '$lib/utils/container-utils';
+export type { Point } from '#lib/utils/container-utils.js';
 
 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 70c3fa9fc..ce8225735 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';
-import type { Size } from '$lib/utils/container-utils';
-import { getBoundingBox } from '$lib/utils/people-utils';
+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';
 
 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 104872bd1..df6612965 100644
--- a/web/src/lib/utils/people-utils.ts
+++ b/web/src/lib/utils/people-utils.ts
@@ -1,7 +1,7 @@
+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 { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
-import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
-import { getAssetMediaUrl } from '$lib/utils';
-import { mapNormalizedRectToContent, type Rect, type Size } from '$lib/utils/container-utils';
 
 export type BoundingBox = Rect & { id: string; labelWidth: number };
 
diff --git a/web/src/lib/utils/persisted.ts b/web/src/lib/utils/persisted.ts
index 2707caadf..bd9ac2ef2 100644
--- a/web/src/lib/utils/persisted.ts
+++ b/web/src/lib/utils/persisted.ts
@@ -1,5 +1,5 @@
 import { createSubscriber } from 'svelte/reactivity';
-import { browser } from '$app/environment';
+import { browser } from '$app/env';
 
 type PersistedBaseOptions<T> = {
   read: (key: string) => T | undefined;
diff --git a/web/src/lib/utils/places-utils.ts b/web/src/lib/utils/places-utils.ts
index 08ba2588a..c1bd87fe1 100644
--- a/web/src/lib/utils/places-utils.ts
+++ b/web/src/lib/utils/places-utils.ts
@@ -1,6 +1,6 @@
+import { PlacesGroupBy, placesViewSettings, type PlacesViewSettings } from '#lib/stores/preferences.store.js';
 import { type AssetResponseDto } from '@immich/sdk';
 import { get } from 'svelte/store';
-import { PlacesGroupBy, placesViewSettings, type PlacesViewSettings } from '$lib/stores/preferences.store';
 
 /**
  * --------------
diff --git a/web/src/lib/utils/purchase-utils.ts b/web/src/lib/utils/purchase-utils.ts
index 2032b9b5b..704cb06ef 100644
--- a/web/src/lib/utils/purchase-utils.ts
+++ b/web/src/lib/utils/purchase-utils.ts
@@ -1,6 +1,6 @@
+import { authManager } from '#lib/managers/auth-manager.svelte.js';
 import { updateMyPreferences } from '@immich/sdk';
 import { DateTime } from 'luxon';
-import { authManager } from '$lib/managers/auth-manager.svelte';
 
 export const getButtonVisibility = (): boolean => {
   if (!authManager.authenticated) {
diff --git a/web/src/lib/utils/shared-links.ts b/web/src/lib/utils/shared-links.ts
index 4c5c6a13a..20af50037 100644
--- a/web/src/lib/utils/shared-links.ts
+++ b/web/src/lib/utils/shared-links.ts
@@ -1,8 +1,8 @@
+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 { getMySharedLink, isHttpError } from '@immich/sdk';
-import { getSharedLink as getCachedSharedLink, setSharedLink } from '$lib/utils';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { getAssetInfoFromParam } from '$lib/utils/navigation';
 
 export const asQueryString = ({ slug, key }: { slug?: string; key?: string }) => {
   const params = new URLSearchParams();
diff --git a/web/src/lib/utils/thumbnail-util.spec.ts b/web/src/lib/utils/thumbnail-util.spec.ts
index ef1d260ea..23613a65c 100644
--- a/web/src/lib/utils/thumbnail-util.spec.ts
+++ b/web/src/lib/utils/thumbnail-util.spec.ts
@@ -1,9 +1,9 @@
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+import { getAltText } from '#lib/utils/thumbnail-util.js';
 import { AssetVisibility } from '@immich/sdk';
 import { init, register, waitLocale } from 'svelte-i18n';
 import { get } from 'svelte/store';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { locale } from '$lib/stores/preferences.store';
-import { getAltText } from '$lib/utils/thumbnail-util';
 
 interface Person {
   name: string;
@@ -19,7 +19,7 @@ describe('getAltText', () => {
   beforeAll(async () => {
     locale.set('en-US');
     await init({ fallbackLocale: 'en-US' });
-    register('en-US', () => import('$i18n/en.json'));
+    register('en-US', () => import('#i18n/en.json'));
     await waitLocale('en-US');
   });
 
diff --git a/web/src/lib/utils/thumbnail-util.ts b/web/src/lib/utils/thumbnail-util.ts
index dc892c82c..82a3e90ca 100644
--- a/web/src/lib/utils/thumbnail-util.ts
+++ b/web/src/lib/utils/thumbnail-util.ts
@@ -1,8 +1,8 @@
+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 { t } from 'svelte-i18n';
 import { derived, get } from 'svelte/store';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { locale } from '$lib/stores/preferences.store';
-import { fromTimelinePlainDateTime } from '$lib/utils/timeline-util';
 
 export const getAltText = derived(t, ($t) => {
   return (asset: TimelineAsset) => {
diff --git a/web/src/lib/utils/timeline-util.spec.ts b/web/src/lib/utils/timeline-util.spec.ts
index 527cd0484..fe5062c8c 100644
--- a/web/src/lib/utils/timeline-util.spec.ts
+++ b/web/src/lib/utils/timeline-util.spec.ts
@@ -1,7 +1,7 @@
+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 { DateTime } from 'luxon';
-import { locale } from '$lib/stores/preferences.store';
-import { parseUtcDate } from '$lib/utils/date-time';
-import { formatGroupTitle, toISOYearMonthUTC } from '$lib/utils/timeline-util';
 
 describe('formatGroupTitle', () => {
   beforeAll(() => {
diff --git a/web/src/lib/utils/timeline-util.ts b/web/src/lib/utils/timeline-util.ts
index 2d7af5bb6..ed8185111 100644
--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -1,10 +1,10 @@
+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 { AssetTypeEnum, AssetOrderBy, type AssetResponseDto } from '@immich/sdk';
 import { DateTime, type LocaleOptions } from 'luxon';
 import { SvelteSet } from 'svelte/reactivity';
 import { get } from 'svelte/store';
-import type { AssetDescriptor, TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
-import { locale } from '$lib/stores/preferences.store';
-import { getAssetRatio } from '$lib/utils/asset-utils';
 
 // Move type definitions to the top
 export type TimelineYearMonth = {
diff --git a/web/src/lib/utils/tunables.ts b/web/src/lib/utils/tunables.ts
index 0d885ec4e..f4d68e160 100644
--- a/web/src/lib/utils/tunables.ts
+++ b/web/src/lib/utils/tunables.ts
@@ -1,4 +1,4 @@
-import { browser } from '$app/environment';
+import { browser } from '$app/env';
 
 function getBoolean(string: string | null, fallback: boolean) {
   if (string === null) {
diff --git a/web/src/lib/utils/wakelock.svelte.ts b/web/src/lib/utils/wakelock.svelte.ts
index 2f6dc6ac5..730e9a4b5 100644
--- a/web/src/lib/utils/wakelock.svelte.ts
+++ b/web/src/lib/utils/wakelock.svelte.ts
@@ -1,5 +1,5 @@
 import { on } from 'svelte/events';
-import { browser } from '$app/environment';
+import { browser } from '$app/env';
 
 const isSupported = browser && 'wakeLock' in navigator;
 
diff --git a/web/src/lib/utils/workflow.spec.ts b/web/src/lib/utils/workflow.spec.ts
index b6492ae32..42222aec4 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';
+import { getWorkflowDefaultConfig } from '#lib/utils/workflow.js';
 
 describe(getWorkflowDefaultConfig.name, () => {
   describe('required properties', () => {
diff --git a/web/src/lib/utils/workflow.ts b/web/src/lib/utils/workflow.ts
index 3a2100e3a..da5892cc1 100644
--- a/web/src/lib/utils/workflow.ts
+++ b/web/src/lib/utils/workflow.ts
@@ -1,6 +1,6 @@
+import type { JSONSchemaProperty } from '#lib/types.js';
 import { WorkflowTrigger } from '@immich/sdk';
 import type { MessageFormatter } from 'svelte-i18n';
-import type { JSONSchemaProperty } from '$lib/types';
 
 export const getTriggerName = ($t: MessageFormatter, type: WorkflowTrigger) => {
   switch (type) {
diff --git a/web/src/params.ts b/web/src/params.ts
new file mode 100644
index 000000000..987af0d93
--- /dev/null
+++ b/web/src/params.ts
@@ -0,0 +1,17 @@
+import { defineParams } from '@sveltejs/kit/params';
+
+const UUID_REGEX = /^[\dA-Fa-f]{8}(?:\b-[\dA-Fa-f]{4}){3}\b-[\dA-Fa-f]{12}$/;
+
+/* Returns true if the given param matches UUID format */
+const matchId = (param: string) => {
+  return UUID_REGEX.test(param);
+};
+
+const matchPhotos = (param: string) => {
+  return param === 'photos';
+};
+
+export const params = defineParams({
+  id: (param) => (matchId(param) ? param : undefined),
+  photos: (param) => (matchPhotos(param) ? param : undefined),
+});
diff --git a/web/src/params/id.ts b/web/src/params/id.ts
deleted file mode 100644
index 440d4532a..000000000
--- a/web/src/params/id.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ParamMatcher } from '@sveltejs/kit';
-import { UUID_REGEX } from '$lib/constants';
-
-/* Returns true if the given param matches UUID format */
-export const match: ParamMatcher = (param: string) => {
-  return UUID_REGEX.test(param);
-};
diff --git a/web/src/params/photos.ts b/web/src/params/photos.ts
deleted file mode 100644
index cd0105bb6..000000000
--- a/web/src/params/photos.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { ParamMatcher } from '@sveltejs/kit';
-
-export const match: ParamMatcher = (param: string) => {
-  return param === 'photos';
-};
diff --git a/web/src/routes/(user)/+layout.svelte b/web/src/routes/(user)/+layout.svelte
index 3f724ef05..cdbfd4101 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';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
   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 c61b1ca5c..0380aa0be 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';
-import { getAssetInfoFromParam, isSharedLinkRoute } from '$lib/utils/navigation';
+import { authenticate } from '#lib/utils/auth.js';
+import { getAssetInfoFromParam, isSharedLinkRoute } from '#lib/utils/navigation.js';
 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 aced32dfe..890732859 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
-  import { fileUploadHandler } from '$lib/utils/file-uploader';
-  import { isAlbumsRoute, isLockedFolderRoute } from '$lib/utils/navigation';
+  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 { 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 4bb90c03d..2abf27ba5 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';
+  import { scrollMemory } from '#lib/actions/scroll-memory.js';
   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';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { Route } from '$lib/route';
-  import { AlbumFilter, albumViewSettings } from '$lib/stores/preferences.store';
-  import { createAlbumAndRedirect } from '$lib/utils/album-utils';
+  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 { 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 9975a7a34..0877c229a 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';
-import { queryClient } from '$lib/queries/client';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 ca1bdf1eb..2b02c66bb 100644
--- a/web/src/routes/(user)/albums/AlbumsControls.svelte
+++ b/web/src/routes/(user)/albums/AlbumsControls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Dropdown from '$lib/elements/Dropdown.svelte';
-  import GroupTab from '$lib/elements/GroupTab.svelte';
-  import SearchBar from '$lib/elements/SearchBar.svelte';
+  import Dropdown from '#lib/elements/Dropdown.svelte';
+  import GroupTab from '#lib/elements/GroupTab.svelte';
+  import SearchBar from '#lib/elements/SearchBar.svelte';
   import {
     AlbumFilter,
     AlbumGroupBy,
@@ -9,7 +9,7 @@
     AlbumViewMode,
     albumViewSettings,
     SortOrder,
-  } from '$lib/stores/preferences.store';
+  } from '#lib/stores/preferences.store.js';
   import {
     type AlbumGroupOptionMetadata,
     type AlbumSortOptionMetadata,
@@ -22,7 +22,7 @@
     getSelectedAlbumGroupOption,
     groupOptionsMetadata,
     sortOptionsMetadata,
-  } from '$lib/utils/album-utils';
+  } from '#lib/utils/album-utils.js';
   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 c04c49517..9d46e634a 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,44 +1,46 @@
 <script lang="ts">
   import { goto, onNavigate } from '$app/navigation';
-  import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import AlbumMap from '$lib/components/album-page/AlbumMap.svelte';
-  import AlbumSummary from '$lib/components/album-page/AlbumSummary.svelte';
-  import ActivityStatus from '$lib/components/asset-viewer/ActivityStatus.svelte';
-  import ActivityViewer from '$lib/components/asset-viewer/ActivityViewer.svelte';
-  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
-  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
-  import 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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import 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';
-  import { activityManager } from '$lib/managers/activity-manager.svelte';
-  import { assetMultiSelectManager, AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { Route } from '$lib/route';
-  import { getAlbumActions, getAlbumAssetsActions, isAlbumEditor, isAlbumOwner } from '$lib/services/album.service';
-  import { getGlobalActions } from '$lib/services/app.service';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { isAlbumsRoute, navigate, type AssetGridRouteSearchParams } from '$lib/utils/navigation';
+  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.js';
+  import AlbumMap from '#lib/components/album-page/AlbumMap.svelte';
+  import AlbumSummary from '#lib/components/album-page/AlbumSummary.svelte';
+  import ActivityStatus from '#lib/components/asset-viewer/ActivityStatus.svelte';
+  import ActivityViewer from '#lib/components/asset-viewer/ActivityViewer.svelte';
+  import HeaderActionButton from '#lib/components/HeaderActionButton.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
+  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
+  import UserAvatar from '#lib/components/shared-components/UserAvatar.svelte';
+  import 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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import 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 { AlbumUserRole, AssetVisibility } from '@immich/sdk';
+
   import { ActionButton, CommandPaletteDefaultProvider, Icon, IconButton } from '@immich/ui';
+
   import {
     mdiAccountEye,
     mdiAccountEyeOutline,
@@ -57,16 +59,16 @@
   import type { PageProps } from './$types';
   import AlbumDescription from './AlbumDescription.svelte';
   import AlbumTitle from './AlbumTitle.svelte';
-  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import { delay } from '$lib/utils/asset-utils';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import { delay } from '#lib/utils/asset-utils.js';
   import {
     deleteAlbumMutation,
     getAlbumInfoQuery,
     invalidateAlbum,
     updateAlbumInfoMutation,
-  } from '$lib/queries/album.query';
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  } from '#lib/queries/album.query.js';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   let { params }: PageProps = $props();
 
@@ -131,7 +133,7 @@
     viewMode = AlbumPageViewMode.VIEW;
     await navigate(
       { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: oldAt?.at } },
-      { replaceState: true, forceNavigate: true },
+      { replace: true, forceNavigate: true },
     );
     oldAt = null;
   };
@@ -194,7 +196,9 @@
       [{ id: album.id, updateAlbumDto: { albumThumbnailAssetId: assetId } }],
     );
 
-  onNavigate(async ({ to }) => {
+  onNavigate(async ({ to, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     if (!isAlbumsRoute(to?.route.id) && album.assetCount === 0 && !album.albumName) {
       await executeMutation(() => deleteAlbumMutation({}), [{ id: album.id }]);
     }
@@ -283,6 +287,7 @@
 </script>
 
 <OnEvents {onAlbumAddAssets} {onAlbumRemoveAssets} onAssetsDelete={() => refreshAlbum()} />
+
 <CommandPaletteDefaultProvider name={$t('album')} actions={[AddAssets, Upload, Close, ...Object.values(Actions)]} />
 
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: Route.albums() }}>
@@ -351,6 +356,7 @@
                   <ActionButton action={Actions.Share} />
                 </div>
               {/if}
+
               <AlbumDescription id={album.id} {isEditor} description={album.description} />
             </section>
           {/if}
@@ -393,13 +399,15 @@
         {const Actions = $derived(getAssetBulkActions($t, album))}
         <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
         <ActionButton action={Actions.CreateSharedLink} />
+
         <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
+
         <ActionButton action={Actions.AddToAlbum} />
         {#if assetMultiSelectManager.isAllUserOwned}
           <FavoriteAction
             removeFavorite={assetMultiSelectManager.isAllFavorite}
             onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
-          ></FavoriteAction>
+          />
         {/if}
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')} offset={{ x: 175, y: 25 }}>
           <DownloadAction menuItem filename={album.albumName} />
@@ -447,7 +455,7 @@
                   oldAt = { at: assetViewerManager.gridScrollTarget?.at };
                   await navigate(
                     { targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: null } },
-                    { replaceState: true },
+                    { replace: true },
                   );
                 }}
                 icon={mdiImagePlusOutline}
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 1f4bea58a..469054612 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';
-import { queryClient } from '$lib/queries/client';
-import { authenticate } from '$lib/utils/auth';
+import { getAlbumInfoQuery } from '#lib/queries/album.query.js';
+import { queryClient } from '#lib/queries/client.js';
+import { authenticate } from '#lib/utils/auth.js';
 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 d8556a0c3..6b90f3702 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';
-  import { updateAlbumInfoMutation } from '$lib/queries/album.query';
-  import { executeMutation } from '$lib/queries/client';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  import { updateAlbumInfoMutation } from '#lib/queries/album.query.js';
+  import { executeMutation } from '#lib/queries/client.js';
   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 ad77143cb..a357c5f63 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';
-  import { updateAlbumInfoMutation } from '$lib/queries/album.query';
-  import { executeMutation } from '$lib/queries/client';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  import { updateAlbumInfoMutation } from '#lib/queries/album.query.js';
+  import { executeMutation } from '#lib/queries/client.js';
   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 15e006dec..d5c6d0221 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
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
-  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import Timeline from '$lib/components/timeline/Timeline.svelte';
-  import { AssetAction } from '$lib/constants';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
+  import ArchiveAction from '#lib/components/timeline/actions/ArchiveAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '#lib/components/timeline/Timeline.svelte';
+  import { AssetAction } from '#lib/constants.js';
 
-  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
+  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 { 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 55e7279cc..e4c375209 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 712d4b3f3..945be181b 100644
--- a/web/src/routes/(user)/buy/+page.svelte
+++ b/web/src/routes/(user)/buy/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import LicenseActivationSuccess from '$lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
-  import LicenseContent from '$lib/components/shared-components/purchasing/PurchaseContent.svelte';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import LicenseActivationSuccess from '#lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte';
+  import LicenseContent from '#lib/components/shared-components/purchasing/PurchaseContent.svelte';
   import SupporterBadge from './SupporterBadge.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { Route } from '$lib/route';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { Route } from '#lib/route.js';
   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 5f937c396..53be06932 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';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
+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 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 ff857e667..c4eeb1052 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
-  import PersonIndicator from '$lib/components/faces-page/PersonIndicator.svelte';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import 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';
-  import { Route } from '$lib/route';
-  import { getAssetMediaUrl, getPeopleThumbnailUrl, memoryLaneTitle } from '$lib/utils';
+  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import PersonIndicator from '#lib/components/faces-page/PersonIndicator.svelte';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import 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 { getAssetInfo, AssetMediaSize, type SearchExploreResponseDto } from '@immich/sdk';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import MemoryCard from '$lib/components/memories/MemoryCard.svelte';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  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';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import Portal from '$lib/elements/Portal.svelte';
+  import { toTimelineAsset } from '#lib/utils/timeline-util.js';
+  import { getAltText } from '#lib/utils/thumbnail-util.js';
+  import Portal from '#lib/elements/Portal.svelte';
 
   interface Props {
     data: PageData;
@@ -186,7 +186,7 @@
 </UserPageLayout>
 
 {#if assetViewerManager.isViewing}
-  {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
+  {#await import('#lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
     <Portal target="body">
       <AssetViewer
         cursor={assetCursor}
diff --git a/web/src/routes/(user)/explore/+page.ts b/web/src/routes/(user)/explore/+page.ts
index f05c02dfb..e6a829545 100644
--- a/web/src/routes/(user)/explore/+page.ts
+++ b/web/src/routes/(user)/explore/+page.ts
@@ -1,7 +1,7 @@
+import { memoryManager } from '#lib/managers/memory-manager.svelte.js';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getAllPeople, getExploreData, MemorySearchOrder } from '@immich/sdk';
-import { memoryManager } from '$lib/managers/memory-manager.svelte';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
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 9b62a6152..cf8d65a04 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
@@ -1,22 +1,22 @@
 <script lang="ts">
-  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
-  import 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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import 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';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
+  import 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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import 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 { 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 21d3dacda..027580e7e 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 d823480c3..b93438ab5 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
@@ -1,33 +1,33 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate, goto, invalidateAll } from '$app/navigation';
-  import { isAssetViewerRoute } from '$lib/utils/navigation';
-  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import UserPageLayout, { headerId } from '$lib/components/layouts/UserPageLayout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
-  import TreeBreadcrumbs from '$lib/components/shared-components/tree/TreeBreadcrumbs.svelte';
-  import TreeItemThumbnails from '$lib/components/shared-components/tree/TreeItemThumbnails.svelte';
-  import TreeItems from '$lib/components/shared-components/tree/TreeItems.svelte';
-  import Sidebar from '$lib/components/sidebar/Sidebar.svelte';
-  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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import SkipLink from '$lib/elements/SkipLink.svelte';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import type { Viewport } from '$lib/managers/timeline-manager/types';
-  import { Route } from '$lib/route';
-  import { createPreloadedQuery, queryClient } from '$lib/queries/client';
-  import { getAssetsByOriginalPathQuery, getFolderTreeQuery } from '$lib/queries/view.query';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { joinPaths } from '$lib/utils/tree-utils';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import UserPageLayout, { headerId } from '#lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import GalleryViewer from '#lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
+  import TreeBreadcrumbs from '#lib/components/shared-components/tree/TreeBreadcrumbs.svelte';
+  import TreeItemThumbnails from '#lib/components/shared-components/tree/TreeItemThumbnails.svelte';
+  import TreeItems from '#lib/components/shared-components/tree/TreeItems.svelte';
+  import Sidebar from '#lib/components/sidebar/Sidebar.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import 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 { afterNavigate, beforeNavigate, goto, refreshAll } from '$app/navigation';
   import { ActionButton, CommandPaletteDefaultProvider, IconButton, Text } from '@immich/ui';
   import { mdiDotsVertical, mdiFolder, mdiFolderHome, mdiFolderOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -50,13 +50,17 @@
 
   const getLinkForPath = (path: string) => Route.folders({ path });
 
-  beforeNavigate(({ to }) => {
+  beforeNavigate(({ to, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     if (isAssetViewerRoute(to)) {
       savedScrollTop = folderScrollContainer?.scrollTop ?? 0;
     }
   });
 
-  afterNavigate(({ from }) => {
+  afterNavigate(({ from, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     assetMultiSelectManager.clear();
 
     if (isAssetViewerRoute(from) && folderScrollContainer) {
@@ -65,7 +69,7 @@
   });
 
   const navigateToView = (path: string) => {
-    return goto(getLinkForPath(path), { keepFocus: true, noScroll: true });
+    return goto(getLinkForPath(path), { reset: false });
   };
 
   const triggerAssetUpdate = async () => {
@@ -73,7 +77,7 @@
     if (data.tree.path) {
       await queryClient.invalidateQueries({ queryKey: getAssetsByOriginalPathQuery(data.tree.path).queryKey });
     }
-    await invalidateAll();
+    await refreshAll();
   };
 
   const handleSetVisibility = () => {
@@ -107,7 +111,7 @@
     </Sidebar>
   {/snippet}
 
-  <OnEvents onAssetsDelete={invalidateAll} />
+  <OnEvents onAssetsDelete={refreshAll} />
 
   <TreeBreadcrumbs node={data.tree} icon={mdiFolderHome} title={$t('folders')} getLink={getLinkForPath} />
 
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 8ffa462d1..72d3cff4d 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';
-import { queryClient } from '$lib/queries/client';
-import { getAssetsByOriginalPathQuery, getFolderTreeQuery } from '$lib/queries/view.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 ec0afaeba..8afc35b49 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
@@ -1,22 +1,22 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
-  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import Timeline from '$lib/components/timeline/Timeline.svelte';
-  import { AssetAction } from '$lib/constants';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { Route } from '$lib/route';
-  import { getUserActions } from '$lib/services/user.service';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
+  import ChangeDate from '#lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '#lib/components/timeline/Timeline.svelte';
+  import { 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 { 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 890ffe3f2..c5299add9 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,8 +1,8 @@
+import { Route } from '#lib/route.js';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getAuthStatus } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
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 4b6cfb83a..953efd872 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
@@ -1,21 +1,21 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import MapTimelinePanel from './MapTimelinePanel.svelte';
-  import type { SelectionBBox } from '$lib/components/shared-components/map/types';
-  import { timeToLoadTheMap } from '$lib/constants';
-  import Portal from '$lib/elements/Portal.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { Route } from '$lib/route';
-  import { handlePromiseError } from '$lib/utils';
-  import { delay } from '$lib/utils/asset-utils';
-  import { navigate } from '$lib/utils/navigation';
-  import { mapSettings } from '$lib/stores/preferences.store';
+  import type { SelectionBBox } from '#lib/components/shared-components/map/types.js';
+  import { timeToLoadTheMap } from '#lib/constants.js';
+  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 { LoadingSpinner } from '@immich/ui';
   import { onDestroy } from 'svelte';
   import type { PageData } from './$types';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   const query = createPreloadedQuery(getUserConfigQuery);
   const config = $derived(query.data);
@@ -68,7 +68,7 @@
           isTimelinePanelVisible ? 'h-1/2 w-full pb-2 sm:h-full sm:w-2/3 sm:pe-2 sm:pb-0' : 'size-full',
         ]}
       >
-        {#await import('$lib/components/shared-components/map/Map.svelte')}
+        {#await import('#lib/components/shared-components/map/Map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex size-full items-center justify-center">
@@ -101,7 +101,7 @@
   </UserPageLayout>
   <Portal target="body">
     {#if assetViewerManager.isViewing && !isTimelinePanelVisible}
-      {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
+      {#await import('#lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
         <AssetViewer
           cursor={{ current: assetViewerManager.asset! }}
           showNavigation={false}
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 359ae8f33..a6b4c4bb5 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 6f00a0c1e..aefb41f48 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,26 +1,26 @@
 <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';
-  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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import LinkLivePhotoAction from '$lib/components/timeline/actions/LinkLivePhotoAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import Timeline from '$lib/components/timeline/Timeline.svelte';
-  import Portal from '$lib/elements/Portal.svelte';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { getStackBulkActions } from '$lib/services/stack.service';
-  import { mapSettings } from '$lib/stores/preferences.store';
-  import { type OnLink, type OnUnlink } from '$lib/utils/actions';
+  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 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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import LinkLivePhotoAction from '#lib/components/timeline/actions/LinkLivePhotoAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '#lib/components/timeline/Timeline.svelte';
+  import 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 { 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 101505e40..0b366fb29 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';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import { memoryManager } from '$lib/managers/memory-manager.svelte';
-  import { userPreferencesManager } from '$lib/managers/user-preferences-manager.svelte';
-  import MemoryCard from '$lib/components/memories/MemoryCard.svelte';
-  import MemoriesSettingsModal from '$lib/modals/MemoriesSettingsModal.svelte';
-  import { Route } from '$lib/route';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { scrollMemory } from '#lib/actions/scroll-memory.js';
+  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 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 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 3e61386cf..8448aba1d 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';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+import { memoryManager } from '#lib/managers/memory-manager.svelte.js';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 5bac28d31..b7cdf5ffb 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,9 +1,9 @@
+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 { redirect } from '@sveltejs/kit';
-import { QueryParameter, UUID_REGEX } from '$lib/constants';
-import { memoryManager } from '$lib/managers/memory-manager.svelte';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url, params }) => {
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 259162d5a..8f0d38d69 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,10 +1,10 @@
 <script lang="ts">
-  import { assetViewerFadeDuration } from '$lib/constants';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { getAssetMediaUrl } from '$lib/utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
+  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 { AssetMediaSize } from '@immich/sdk';
-  import DelayedLoadingSpinner from '$lib/components/DelayedLoadingSpinner.svelte';
+  import DelayedLoadingSpinner from '#lib/components/DelayedLoadingSpinner.svelte';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
 
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 02f95dd13..a3f1d8c6e 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';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { autoPlayVideo } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl, getAssetPlaybackUrl } from '$lib/utils';
+  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 { 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 5767f89a2..589526f7d 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,30 +1,30 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import { shortcuts } from '$lib/actions/shortcut';
-  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';
-  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
-  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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { memoryManager } from '$lib/managers/memory-manager.svelte';
-  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
-  import { Route } from '$lib/route';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
-  import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
+  import { scrollMemoryClearer } from '#lib/actions/scroll-memory.js';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  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';
+  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
+  import GalleryViewer from '#lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
+  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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import 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 { AssetMediaSize, AssetTypeEnum, getAssetInfo, MemoryType } from '@immich/sdk';
   import { ActionButton, CommandPaletteDefaultProvider, Icon, IconButton, Text } from '@immich/ui';
   import {
@@ -91,7 +91,7 @@
       return;
     }
 
-    await goto(href, { noScroll: true, keepFocus: true, ...options });
+    await goto(href, { reset: false, ...options });
   };
 
   const setProgressDuration = (asset: TimelineAsset) => {
@@ -246,7 +246,7 @@
       return;
     }
 
-    handlePromiseError(goto(memoryManager.memoriesHref, { replaceState: true, noScroll: true }));
+    handlePromiseError(goto(memoryManager.memoriesHref, { replace: true, reset: false }));
   });
 
   $effect(() => {
@@ -309,7 +309,7 @@
 
 <section
   id="memory-viewer"
-  data-sveltekit-noscroll
+  data-sveltekit-reset={false}
   class="dark w-full bg-immich-dark-gray text-white"
   use:scrollMemoryClearer={{ routeStartsWith: Route.memories() }}
   bind:this={memoryWrapper}
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 eb21d1689..1696d1331 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,5 +1,5 @@
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
-import { Route } from '$lib/route';
 import type { PageLoad } from './$types';
 
 export const load = (() => redirect(307, Route.memories())) satisfies PageLoad;
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 387aa3376..91c290d66 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
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
-  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';
-  import { Route } from '$lib/route';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
+  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
+  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 { 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 3ba90a3d0..969c79c0d 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,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getUser } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 7aaac2952..bcefb4af3 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';
-  import { shortcut } from '$lib/actions/shortcut';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { QueryParameter, SessionStorageKey } from '$lib/constants';
-  import SearchBar from '$lib/elements/SearchBar.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import PeopleFilterModal from '$lib/modals/PeopleFilterModal.svelte';
-  import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
-  import { Route } from '$lib/route';
-  import { getPeopleUserActions } from '$lib/services/person-user.service';
-  import { handleUpdatePersonName } from '$lib/services/person.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { websocketEvents } from '$lib/stores/websocket';
-  import { handlePromiseError } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  import { scrollMemory } from '#lib/actions/scroll-memory.js';
+  import { shortcut } from '#lib/actions/shortcut.js';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import { QueryParameter, SessionStorageKey } from '#lib/constants.js';
+  import SearchBar from '#lib/elements/SearchBar.svelte';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  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 {
     getAllPeople,
     getClusterGroupUsers,
@@ -123,14 +123,15 @@
   };
 
   const handleSearchByName = async () => {
-    const getSearchedPeople = page.url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
+    const url = new URL(page.url.href);
+    const getSearchedPeople = url.searchParams.get(QueryParameter.SEARCHED_PEOPLE);
     if (getSearchedPeople !== searchName) {
       if (searchName) {
-        page.url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
+        url.searchParams.set(QueryParameter.SEARCHED_PEOPLE, searchName);
       } else {
-        page.url.searchParams.delete(QueryParameter.SEARCHED_PEOPLE);
+        url.searchParams.delete(QueryParameter.SEARCHED_PEOPLE);
       }
-      await goto(page.url, { keepFocus: true, replaceState: true, invalidateAll: true });
+      await goto(url, { reset: false, replace: true, refreshAll: true });
     }
   };
 
@@ -180,7 +181,7 @@
       return;
     }
 
-    const url = new URL(page.url);
+    const url = new URL(page.url.href);
     for (const [key, value] of [
       [QueryParameter.SHARED_BY_ID, filter.sharedById],
       [QueryParameter.SHARED_WITH_ID, filter.sharedWithId],
@@ -194,7 +195,7 @@
       }
     }
 
-    await goto(url, { keepFocus: true });
+    await goto(url, { reset: false });
     currentPage = 1;
     nextPage = data.people.hasNextPage ? 2 : null;
   };
diff --git a/web/src/routes/(user)/people/+page.ts b/web/src/routes/(user)/people/+page.ts
index 30996d476..aa93681e7 100644
--- a/web/src/routes/(user)/people/+page.ts
+++ b/web/src/routes/(user)/people/+page.ts
@@ -1,8 +1,8 @@
+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 { getAllPeople } from '@immich/sdk';
-import { QueryParameter } from '$lib/constants';
-import type { PeopleFilter } from '$lib/types';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/people/PeopleCard.svelte b/web/src/routes/(user)/people/PeopleCard.svelte
index 80d25141f..7fd11ae3d 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';
-  import { getPersonActions } from '$lib/services/person.service';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
+  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 { 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 9645c3854..ee1b4381a 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,40 +1,40 @@
 <script lang="ts">
-  import { afterNavigate, goto, invalidateAll } from '$app/navigation';
-  import { page } from '$app/stores';
-  import { clickOutside } from '$lib/actions/click-outside';
-  import { listNavigation } from '$lib/actions/list-navigation';
-  import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
-  import 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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import 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';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import PersonEditModal from '$lib/modals/PersonEditModal.svelte';
-  import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
-  import { Route } from '$lib/route';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { getPersonActions, handleUpdatePersonName } from '$lib/services/person.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { websocketEvents } from '$lib/stores/websocket';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  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 ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '#lib/components/shared-components/context-menu/MenuOption.svelte';
+  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
+  import 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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import 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 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 { afterNavigate, goto, refreshAll } from '$app/navigation';
+  import { page } from '$app/state';
   import { AssetVisibility, searchPerson, updatePerson, type PersonResponseDto } from '@immich/sdk';
   import {
     ActionButton,
@@ -99,10 +99,10 @@
   let suggestionContainer: HTMLElement | undefined = $state();
 
   onMount(() => {
-    const action = $page.url.searchParams.get(QueryParameter.ACTION);
+    const action = page.url.searchParams.get(QueryParameter.ACTION);
+    const fallbackRoute = page.params.assetId ? Route.viewPerson(data.person) : Route.explore();
 
-    const fallbackRoute = $page.params.assetId ? Route.viewPerson(data.person) : Route.explore();
-    previousRoute = Route.continue($page.url.searchParams.get(QueryParameter.PREVIOUS_ROUTE), fallbackRoute).toString();
+    previousRoute = Route.continue(page.url.searchParams.get(QueryParameter.PREVIOUS_ROUTE), fallbackRoute).toString();
 
     if (action === 'merge') {
       viewMode = PersonPageViewMode.MERGE_PEOPLE;
@@ -126,12 +126,14 @@
   };
 
   const updateAssetCount = async () => {
-    await invalidateAll();
+    await refreshAll();
   };
 
-  afterNavigate(({ from }) => {
+  afterNavigate(({ from, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     // Prevent setting previousRoute to the current page.
-    if (from?.url && from.route.id !== $page.route.id) {
+    if (from?.url && from.route.id !== page.route.id) {
       previousRoute = from.url.href;
     }
   });
@@ -267,9 +269,10 @@
 
   const handleGoBack = async () => {
     viewMode = PersonPageViewMode.VIEW_ASSETS;
-    if ($page.url.searchParams.has(QueryParameter.ACTION)) {
-      $page.url.searchParams.delete(QueryParameter.ACTION);
-      await goto($page.url);
+    if (page.url.searchParams.has(QueryParameter.ACTION)) {
+      const url = new URL(page.url.href);
+      url.searchParams.delete(QueryParameter.ACTION);
+      await goto(url);
     }
   };
 
@@ -479,7 +482,9 @@
       {const Actions = $derived(getAssetBulkActions($t))}
       <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
       <ActionButton action={Actions.CreateSharedLink} />
+
       <SelectAllAssets {timelineManager} assetInteraction={assetMultiSelectManager} />
+
       <ActionButton action={Actions.AddToAlbum} />
       <FavoriteAction
         removeFavorite={assetMultiSelectManager.isAllFavorite}
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 af602a5ee..31d381021 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,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getPerson, getPersonStatistics } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
index e5a64ac0a..5dc2dad4d 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/EditNameInput.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import SearchPeople from '$lib/components/faces-page/PeopleSearch.svelte';
+  import SearchPeople from '#lib/components/faces-page/PeopleSearch.svelte';
   import { type PersonResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
 
   interface Props {
     person: PersonResponseDto;
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 8f2f82e9b..fe38803e4 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,7 +1,7 @@
 <script lang="ts">
-  import { getPeopleThumbnailUrl } from '$lib/utils';
+  import { getPeopleThumbnailUrl } from '#lib/utils.js';
   import { type PersonResponseDto } from '@immich/sdk';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
 
   interface Props {
     person: PersonResponseDto;
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 9c74c0726..4394fa08f 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { Route } from '#lib/route.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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';
@@ -10,7 +10,7 @@
   import { flip } from 'svelte/animate';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
   import FaceThumbnail from './FaceThumbnail.svelte';
   import PeopleList from './PeopleList.svelte';
 
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
index 9d3a174e9..965a0a1b7 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/PeopleList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SearchPeople from '$lib/components/faces-page/PeopleSearch.svelte';
+  import SearchPeople from '#lib/components/faces-page/PeopleSearch.svelte';
   import { type PersonResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
   import FaceThumbnail from './FaceThumbnail.svelte';
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 672c4a94b..226044421 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { timeBeforeShowLoadingSpinner } from '#lib/constants.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   import {
     createPerson,
     getAllPeople,
@@ -14,7 +14,7 @@
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
   import FaceThumbnail from './FaceThumbnail.svelte';
   import PeopleList from './PeopleList.svelte';
 
diff --git a/web/src/routes/(user)/people/manage/+page.svelte b/web/src/routes/(user)/people/manage/+page.svelte
index c255d3b10..e3da6a3f4 100644
--- a/web/src/routes/(user)/people/manage/+page.svelte
+++ b/web/src/routes/(user)/people/manage/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import ImageThumbnail from '#lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import PeopleInfiniteScroll from '../PeopleInfiniteScroll.svelte';
   import { goto } from '$app/navigation';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import { ToggleVisibility } from '$lib/constants';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
+  import 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 { 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 1db0f7994..1aa2dee51 100644
--- a/web/src/routes/(user)/people/manage/+page.ts
+++ b/web/src/routes/(user)/people/manage/+page.ts
@@ -1,5 +1,5 @@
+import { authenticate } from '#lib/utils/auth.js';
 import { getAllPeople } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
index eb0e6a635..94c3db01e 100644
--- a/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
+++ b/web/src/routes/(user)/people/manage/ManagePeopleVisibility.spec.ts
@@ -1,20 +1,20 @@
+import { getIntersectionObserverMock } from '#lib/__mocks__/intersection-observer.mock.js';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps } from 'svelte';
 import { vi } from 'vitest';
-import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import { personFactory } from '@test-data/factories/person-factory';
+import { personFactory } from '#test-data/factories/person-factory';
 import ManagePeoplePage from './+page.svelte';
 import ManagePeoplePageTestWrapper from './ManagePeopleVisibility.test-wrapper.svelte';
 
-vi.mock(import('$lib/managers/feature-flags-manager.svelte'), function () {
+vi.mock(import('#lib/managers/feature-flags-manager.svelte.js'), function () {
   return {
     featureFlagsManager: { init: vi.fn(), loadFeatureFlags: vi.fn(), value: {} } as never,
   };
 });
 
-vi.mock('$lib/components/layouts/UserPageLayout.svelte', async () => {
-  return await import('@test-data/mocks/UserPageLayout.mock.svelte');
+vi.mock('#lib/components/layouts/UserPageLayout.svelte', async () => {
+  return await import('#test-data/mocks/UserPageLayout.mock.svelte');
 });
 
 const getData = (
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts b/web/src/routes/(user)/photos/[[assetId=id]]/+page.ts
index b4751c180..3179cf858 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 55f841a3c..3e29430a4 100644
--- a/web/src/routes/(user)/places/+page.svelte
+++ b/web/src/routes/(user)/places/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import PlacesControls from './PlacesControls.svelte';
   import type { PageData } from './$types';
   import { type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import { locale } from '$lib/stores/preferences.store';
+  import { locale } from '#lib/stores/preferences.store.js';
   import Places from './PlacesList.svelte';
-  import { placesViewSettings } from '$lib/stores/preferences.store';
+  import { placesViewSettings } from '#lib/stores/preferences.store.js';
 
   interface Props {
     data: PageData;
diff --git a/web/src/routes/(user)/places/+page.ts b/web/src/routes/(user)/places/+page.ts
index 000166d74..3ee8d8582 100644
--- a/web/src/routes/(user)/places/+page.ts
+++ b/web/src/routes/(user)/places/+page.ts
@@ -1,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getAssetsByCity } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/places/PlacesCardGroup.svelte b/web/src/routes/(user)/places/PlacesCardGroup.svelte
index 34a37fe6a..786043af2 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';
-  import { placesViewSettings } from '$lib/stores/preferences.store';
-  import { getAssetMediaUrl } from '$lib/utils';
-  import { type PlacesGroup, isPlacesGroupCollapsed, togglePlacesGroupCollapsing } from '$lib/utils/places-utils';
+  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 { 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 f3fa38cb2..c208d571f 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';
-  import { collapseAllPlacesGroups, expandAllPlacesGroups } from '$lib/utils/places-utils';
+  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 { 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 2f2dfed9c..1c80571d0 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';
-  import { normalizeSearchString } from '$lib/utils/string-utils';
+  import { PlacesGroupBy, type PlacesViewSettings } from '#lib/stores/preferences.store.js';
+  import { normalizeSearchString } from '#lib/utils/string-utils.js';
   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';
+  import { type PlacesGroup } from '#lib/utils/places-utils.js';
   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 1ec228b14..ad2341435 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
@@ -1,33 +1,33 @@
 <script lang="ts">
-  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
-  import 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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import LinkLivePhotoAction from '$lib/components/timeline/actions/LinkLivePhotoAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import Timeline from '$lib/components/timeline/Timeline.svelte';
-  import { AssetAction } from '$lib/constants';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { type OnLink, type OnUnlink } from '$lib/utils/actions';
-  import { openFileUploadDialog } from '$lib/utils/file-uploader';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
+  import 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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import LinkLivePhotoAction from '#lib/components/timeline/actions/LinkLivePhotoAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '#lib/components/timeline/Timeline.svelte';
+  import { 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 { 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';
+  import { getStackBulkActions } from '#lib/services/stack.service.js';
 
   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 ba75f540d..371f1e36e 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/s/[slug]/+error.svelte b/web/src/routes/(user)/s/[slug]/+error.svelte
index 2c4d2a4d0..e6b9d5320 100644
--- a/web/src/routes/(user)/s/[slug]/+error.svelte
+++ b/web/src/routes/(user)/s/[slug]/+error.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SharedLinkErrorPage from '$lib/components/pages/SharedLinkErrorPage.svelte';
+  import SharedLinkErrorPage from '#lib/components/pages/SharedLinkErrorPage.svelte';
 </script>
 
 <SharedLinkErrorPage />
diff --git a/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 25c24ab02..7bfa85b21 100644
--- a/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/s/[slug]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SharedLinkPage from '$lib/components/pages/SharedLinkPage.svelte';
+  import SharedLinkPage from '#lib/components/pages/SharedLinkPage.svelte';
   import type { PageData } from './$types';
 
   type Props = {
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 92d4dd042..577dbe4a6 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';
+import { loadSharedLink } from '#lib/utils/shared-links.js';
 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 944158f1a..529f1e5a0 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
@@ -1,33 +1,33 @@
 <script lang="ts">
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
-  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
-  import SearchBar from '$lib/components/shared-components/search-bar/SearchBar.svelte';
-  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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import { QueryParameter } from '$lib/constants';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { searchManager } from '$lib/managers/search-manager.svelte';
-  import type { Viewport } from '$lib/managers/timeline-manager/types';
-  import { Route } from '$lib/route';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { lang, locale } from '$lib/stores/preferences.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { parseUtcDate } from '$lib/utils/date-time';
-  import { handleError } from '$lib/utils/handle-error';
-  import { isAlbumsRoute, isPeopleRoute } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import ControlAppBar from '#lib/components/shared-components/ControlAppBar.svelte';
+  import GalleryViewer from '#lib/components/shared-components/gallery-viewer/GalleryViewer.svelte';
+  import SearchBar from '#lib/components/shared-components/search-bar/SearchBar.svelte';
+  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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import 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 {
     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';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   const query = createPreloadedQuery(getUserConfigQuery);
   const config = $derived(query.data);
@@ -82,7 +82,9 @@
     }
   });
 
-  afterNavigate(({ from }) => {
+  afterNavigate(({ from, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     // Prevent setting previousRoute to the current page.
     if (from?.url && from.route.id !== page.route.id) {
       previousRoute = from.url.href;
@@ -252,7 +254,6 @@
 </script>
 
 <svelte:window bind:scrollY />
-
 <OnEvents {onAlbumAddAssets} />
 
 {#if searchTermKeys.length > 0}
@@ -379,7 +380,9 @@
               <ArchiveAction menuItem unarchive={assetMultiSelectManager.isAllArchived} />
               <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
               <ActionMenuItem action={Actions.Tag} />
+
               <DeleteAssets menuItem {onAssetDelete} onUndoDelete={onSearchQueryUpdate} />
+
               <hr />
               <ActionMenuItem action={Actions.RegenerateThumbnailJob} />
               <ActionMenuItem action={Actions.RefreshMetadataJob} />
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 56a8a33c1..ce42516cc 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/share/[key]/+error.svelte b/web/src/routes/(user)/share/[key]/+error.svelte
index 2c4d2a4d0..e6b9d5320 100644
--- a/web/src/routes/(user)/share/[key]/+error.svelte
+++ b/web/src/routes/(user)/share/[key]/+error.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SharedLinkErrorPage from '$lib/components/pages/SharedLinkErrorPage.svelte';
+  import SharedLinkErrorPage from '#lib/components/pages/SharedLinkErrorPage.svelte';
 </script>
 
 <SharedLinkErrorPage />
diff --git a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 25c24ab02..7bfa85b21 100644
--- a/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SharedLinkPage from '$lib/components/pages/SharedLinkPage.svelte';
+  import SharedLinkPage from '#lib/components/pages/SharedLinkPage.svelte';
   import type { PageData } from './$types';
 
   type Props = {
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 92d4dd042..577dbe4a6 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';
+import { loadSharedLink } from '#lib/utils/shared-links.js';
 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 393a37318..52c552353 100644
--- a/web/src/routes/(user)/shared-links/(list)/+layout.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { page } from '$app/state';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  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';
-  import GroupTab from '$lib/elements/GroupTab.svelte';
-  import { Route } from '$lib/route';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getAllSharedLinksQuery } from '$lib/queries/shared-link.query';
+  import { type SharedLinkTab } from '#lib/constants.js';
+  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 { SharedLinkType } from '@immich/sdk';
   import { Container } from '@immich/ui';
   import { type Snippet } from 'svelte';
@@ -33,7 +33,7 @@
   let filters = Object.keys(filterMap);
   let labels = Object.values(filterMap);
 
-  const getActiveTab = (url: URL) => {
+  const getActiveTab = (url: { searchParams: ReadonlyURLSearchParams | URLSearchParams }) => {
     const filter = url.searchParams.get('filter');
     return filter && filters.includes(filter) ? filter : 'all';
   };
diff --git a/web/src/routes/(user)/shared-links/(list)/+layout.ts b/web/src/routes/(user)/shared-links/(list)/+layout.ts
index cf7224751..21b2087ce 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';
-import { getAllSharedLinksQuery } from '$lib/queries/shared-link.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 f61484a91..fce957ab4 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 1db5df5c5..0ae8f17cb 100644
--- a/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
+++ b/web/src/routes/(user)/shared-links/(list)/ShareCover.spec.ts
@@ -1,11 +1,11 @@
+import { getAssetMediaUrl } from '#lib/utils.js';
 import { render, screen } from '@testing-library/svelte';
-import { getAssetMediaUrl } from '$lib/utils';
-import { albumFactory } from '@test-data/factories/album-factory';
-import { assetFactory } from '@test-data/factories/asset-factory';
-import { sharedLinkFactory } from '@test-data/factories/shared-link-factory';
+import { albumFactory } from '#test-data/factories/album-factory';
+import { assetFactory } from '#test-data/factories/asset-factory';
+import { sharedLinkFactory } from '#test-data/factories/shared-link-factory';
 import ShareCover from './ShareCover.svelte';
 
-vi.mock('$lib/utils');
+vi.mock('#lib/utils.js');
 
 describe('ShareCover component', () => {
   it('renders an image when the shared link is an album', () => {
diff --git a/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
index 40a4af2b3..36ec6b084 100644
--- a/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
+++ b/web/src/routes/(user)/shared-links/(list)/ShareCover.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  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';
+  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 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 4c2b759e4..42a396fb7 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';
-  import { getSharedLinkActions } from '$lib/services/shared-link.service';
-  import { locale } from '$lib/stores/preferences.store';
+  import { Route } from '#lib/route.js';
+  import { getSharedLinkActions } from '#lib/services/shared-link.service.js';
+  import { locale } from '#lib/stores/preferences.store.js';
   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 75ad0f42c..7aa0ce2d7 100644
--- a/web/src/routes/(user)/shared-links/(list)/[id]/+layout.ts
+++ b/web/src/routes/(user)/shared-links/(list)/[id]/+layout.ts
@@ -1,10 +1,10 @@
+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 { redirect } from '@sveltejs/kit';
-import { UUID_REGEX } from '$lib/constants';
-import { queryClient } from '$lib/queries/client';
-import { getSharedLinkQuery } from '$lib/queries/shared-link.query';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
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 8615b9977..85a358f23 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';
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { getSharedLinkQuery, updateSharedLinkMutation } from '$lib/queries/shared-link.query';
+  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 { 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 afbe9991f..abd98c46d 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 2cfc89ac5..e5bfbb21b 100644
--- a/web/src/routes/(user)/sharing/+page.svelte
+++ b/web/src/routes/(user)/sharing/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import empty2Url from '$lib/assets/empty-2.svg';
-  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 UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
-  import { getAllAlbumsQuery } from '$lib/queries/album.query';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { Route } from '$lib/route';
-  import { getAlbumsActions } from '$lib/services/album.service';
-  import { getSharedLinksActions } from '$lib/services/shared-link.service';
+  import empty2Url from '#lib/assets/empty-2.svg';
+  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 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 {
     AlbumFilter,
     AlbumGroupBy,
@@ -16,7 +16,7 @@
     AlbumViewMode,
     SortOrder,
     type AlbumViewSettings,
-  } from '$lib/stores/preferences.store';
+  } from '#lib/stores/preferences.store.js';
   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 45e3faa16..1f83056d8 100644
--- a/web/src/routes/(user)/sharing/+page.ts
+++ b/web/src/routes/(user)/sharing/+page.ts
@@ -1,8 +1,8 @@
+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 { PartnerDirection, getPartners } from '@immich/sdk';
-import { getAllAlbumsQuery } from '$lib/queries/album.query';
-import { queryClient } from '$lib/queries/client';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/(user)/sharing/sharedlinks/+page.ts b/web/src/routes/(user)/sharing/sharedlinks/+page.ts
index ae28e8ac5..ff65555ab 100644
--- a/web/src/routes/(user)/sharing/sharedlinks/+page.ts
+++ b/web/src/routes/(user)/sharing/sharedlinks/+page.ts
@@ -1,5 +1,5 @@
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
-import { Route } from '$lib/route';
 import type { PageLoad } from './$types';
 
 export const load = (() => redirect(307, Route.sharedLinks())) satisfies PageLoad;
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 797c7004d..11273b015 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
@@ -1,32 +1,32 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import UserPageLayout, { headerId } from '$lib/components/layouts/UserPageLayout.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
-  import TreeBreadcrumbs from '$lib/components/shared-components/tree/TreeBreadcrumbs.svelte';
-  import TreeItemThumbnails from '$lib/components/shared-components/tree/TreeItemThumbnails.svelte';
-  import TreeItems from '$lib/components/shared-components/tree/TreeItems.svelte';
-  import Sidebar from '$lib/components/sidebar/Sidebar.svelte';
-  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
-  import Timeline from '$lib/components/timeline/Timeline.svelte';
-  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';
-  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
-  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
-  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
-  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
-  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import { AssetAction } from '$lib/constants';
-  import SkipLink from '$lib/elements/SkipLink.svelte';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { Route } from '$lib/route';
-  import { getAssetBulkActions } from '$lib/services/asset.service';
-  import { getTagActions } from '$lib/services/tag.service';
-  import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
+  import ActionMenuItem from '#lib/components/ActionMenuItem.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import UserPageLayout, { headerId } from '#lib/components/layouts/UserPageLayout.svelte';
+  import ButtonContextMenu from '#lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import TreeBreadcrumbs from '#lib/components/shared-components/tree/TreeBreadcrumbs.svelte';
+  import TreeItemThumbnails from '#lib/components/shared-components/tree/TreeItemThumbnails.svelte';
+  import TreeItems from '#lib/components/shared-components/tree/TreeItems.svelte';
+  import Sidebar from '#lib/components/sidebar/Sidebar.svelte';
+  import AssetSelectControlBar from '#lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '#lib/components/timeline/Timeline.svelte';
+  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';
+  import ChangeLocation from '#lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '#lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '#lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '#lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '#lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import { AssetAction } from '#lib/constants.js';
+  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 { 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 af178da1b..a4624776c 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,7 +1,7 @@
+import { QueryParameter } from '#lib/constants.js';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getAllTags } from '@immich/sdk';
-import { QueryParameter } from '$lib/constants';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
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 95bed86a3..e8be43c3e 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
@@ -1,22 +1,22 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import empty3Url from '$lib/assets/empty-3.svg';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/EmptyPlaceholder.svelte';
-  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import empty3Url from '#lib/assets/empty-3.svg';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
+  import EmptyPlaceholder from '#lib/components/shared-components/EmptyPlaceholder.svelte';
+  import DeleteAssets from '#lib/components/timeline/actions/DeleteAssetsAction.svelte';
   import RestoreAssets from './RestoreAction.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';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { Route } from '$lib/route';
-  import { getTrashActions } from '$lib/services/trash.service';
-  import { handlePromiseError } from '$lib/utils';
+  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 { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 2d3244862..181373546 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 946167fb6..30c4b0496 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';
-  import type { OnRestore } from '$lib/utils/actions';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 38cbc1351..1b925b031 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 UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import UserSettingsList from './UserSettingsList.svelte';
-  import { getKeyboardActions } from '$lib/services/keyboard.service';
+  import { getKeyboardActions } from '#lib/services/keyboard.service.js';
   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 bff4a0d63..05fc9a876 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';
-import { queryClient } from '$lib/queries/client';
-import { searchPasskeysQuery } from '$lib/queries/passkey.query';
-import { getSessionsQuery } from '$lib/queries/session.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 04c8b6af0..b70d9902d 100644
--- a/web/src/routes/(user)/user-settings/AppSettings.svelte
+++ b/web/src/routes/(user)/user-settings/AppSettings.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { ComboBoxOption } from '$lib/components/shared-components/Combobox.svelte';
+  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';
+  import SettingsLanguageSelector from '#lib/components/shared-components/settings/SettingsLanguageSelector.svelte';
+  import { fallbackLocale, locales } from '#lib/constants.js';
   import {
     alwaysLoadOriginalFile,
     alwaysLoadOriginalVideo,
@@ -11,8 +11,8 @@
     loopVideo,
     playVideoThumbnailOnHover,
     showDeleteModal,
-  } from '$lib/stores/preferences.store';
-  import { createDateFormatter, findLocale } from '$lib/utils';
+  } from '#lib/stores/preferences.store.js';
+  import { createDateFormatter, findLocale } from '#lib/utils.js';
   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 3ad6cc241..b018a9743 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';
+  import { handleChangePassword } from '#lib/services/user.service.js';
   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 87e354a20..b06e08c08 100644
--- a/web/src/routes/(user)/user-settings/DeviceList.svelte
+++ b/web/src/routes/(user)/user-settings/DeviceList.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { deleteAllSessionsMutation, deleteSessionMutation, getSessionsQuery } from '$lib/queries/session.query';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
+  import { deleteAllSessionsMutation, deleteSessionMutation, getSessionsQuery } from '#lib/queries/session.query.js';
   import { type SessionResponseDto } from '@immich/sdk';
   import { Button, modalManager, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import DeviceCard from '$lib/components/user-settings-page/DeviceCard.svelte';
+  import DeviceCard from '#lib/components/user-settings-page/DeviceCard.svelte';
 
   const query = createPreloadedQuery(getSessionsQuery);
   const devices = $derived(query.data);
diff --git a/web/src/routes/(user)/user-settings/DownloadSettings.svelte b/web/src/routes/(user)/user-settings/DownloadSettings.svelte
index e4cb1f0d6..e6105da4a 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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 133066cdf..31c092eb8 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';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 f0ca1a6e4..06b20b0df 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 deb5bbd7c..d930a28f5 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';
-  import { oauth } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { oauth } from '#lib/utils.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 fbe292782..c787d196d 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';
+  import PinCodeResetModal from '#lib/modals/PinCodeResetModal.svelte';
+  import { handleError } from '#lib/utils/handle-error.js';
   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/PinCodeSettings.svelte b/web/src/routes/(user)/user-settings/PinCodeSettings.svelte
index 1ad3021b7..2672d94dd 100644
--- a/web/src/routes/(user)/user-settings/PinCodeSettings.svelte
+++ b/web/src/routes/(user)/user-settings/PinCodeSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import OnEvents from '$lib/components/OnEvents.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
   import PinCodeChangeForm from './PinCodeChangeForm.svelte';
-  import PinCodeCreateForm from '$lib/components/user-settings-page/PinCodeCreateForm.svelte';
+  import PinCodeCreateForm from '#lib/components/user-settings-page/PinCodeCreateForm.svelte';
   import { getAuthStatus } from '@immich/sdk';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
diff --git a/web/src/routes/(user)/user-settings/SettingCombobox.svelte b/web/src/routes/(user)/user-settings/SettingCombobox.svelte
index ac9126208..55623ef6e 100644
--- a/web/src/routes/(user)/user-settings/SettingCombobox.svelte
+++ b/web/src/routes/(user)/user-settings/SettingCombobox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/Combobox.svelte';
+  import Combobox, { type ComboBoxOption } from '#lib/components/shared-components/Combobox.svelte';
   import { Label, Text } from '@immich/ui';
   import type { Snippet } from 'svelte';
   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 27ec9dd2d..36e2b04a8 100644
--- a/web/src/routes/(user)/user-settings/SharingSettings.svelte
+++ b/web/src/routes/(user)/user-settings/SharingSettings.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  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';
-  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';
-  import { handleError } from '$lib/utils/handle-error';
+  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 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 {
     acceptClusterGroupRequest,
     clusterGroupRegeneratePeople,
diff --git a/web/src/routes/(user)/user-settings/UserApiKeyList.svelte b/web/src/routes/(user)/user-settings/UserApiKeyList.svelte
index c156cbc5c..306c8f4cf 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';
-  import { getApiKeysQuery } from '$lib/queries/api-key.query';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getApiKeyActions, getApiKeysActions } from '$lib/services/api-key.service';
-  import { locale } from '$lib/stores/preferences.store';
+  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 { 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 5410166d0..e377fa5fb 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';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { searchPasskeysQuery } from '$lib/queries/passkey.query';
-  import { getPasskeyActions, getPasskeysActions } from '$lib/services/passkey.service';
-  import { locale } from '$lib/stores/preferences.store';
+  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 { 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 fba5bbf08..ee4b4200c 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';
-  import { handleError } from '$lib/utils/handle-error';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 07df2f9fe..5d7134773 100644
--- a/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
+++ b/web/src/routes/(user)/user-settings/UserPurchaseSettings.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
 
-  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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { getAboutInfoQuery } from '$lib/queries/server.query';
-  import { queryClient } from '$lib/queries/client';
-  import { locale } from '$lib/stores/preferences.store';
-  import { handleError } from '$lib/utils/handle-error';
-  import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
+  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 {
     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 5e5868b93..d18f52ed7 100644
--- a/web/src/routes/(user)/user-settings/UserSettingsList.svelte
+++ b/web/src/routes/(user)/user-settings/UserSettingsList.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import ChangePinCodeSettings from './PinCodeSettings.svelte';
   import DownloadSettings from './DownloadSettings.svelte';
   import FeatureSettings from './FeatureSettings.svelte';
   import NotificationsSettings from './NotificationsSettings.svelte';
   import UserPurchaseSettings from './UserPurchaseSettings.svelte';
   import UserUsageStatistic from './UserUsageStatistic.svelte';
-  import { OpenQueryParam, QueryParameter } from '$lib/constants';
-  import { oauth } from '$lib/utils';
+  import { OpenQueryParam, QueryParameter } from '#lib/constants.js';
+  import { oauth } from '#lib/utils.js';
   import {
     mdiAccountGroupOutline,
     mdiAccountOutline,
@@ -25,7 +25,7 @@
     mdiTwoFactorAuthentication,
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import SettingAccordion from '#lib/components/shared-components/settings/SettingAccordion.svelte';
   import AppSettings from './AppSettings.svelte';
   import AppUpdateSettings from './AppUpdateSettings.svelte';
   import ChangePasswordSettings from './ChangePasswordSettings.svelte';
@@ -35,14 +35,13 @@
   import UserApiKeyList from './UserApiKeyList.svelte';
   import UserPasskeyList from './UserPasskeyList.svelte';
   import UserProfileSettings from './UserProfileSettings.svelte';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   const query = createPreloadedQuery(getUserConfigQuery);
   const config = $derived(query.data);
-
   let oauthOpen =
-    oauth.isCallback(location) || $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenQueryParam.OAUTH;
+    oauth.isCallback(location) || page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenQueryParam.OAUTH;
 </script>
 
 <SettingAccordion
diff --git a/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte b/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
index fb106c45d..ec1a71085 100644
--- a/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
+++ b/web/src/routes/(user)/user-settings/UserUsageStatistic.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  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';
-  import { locale } from '$lib/stores/preferences.store';
+  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 {
     AssetVisibility,
     CalendarHeatmapType,
diff --git a/web/src/routes/(user)/utilities/+page.svelte b/web/src/routes/(user)/utilities/+page.svelte
index a1cc50cb4..09950c2ae 100644
--- a/web/src/routes/(user)/utilities/+page.svelte
+++ b/web/src/routes/(user)/utilities/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import UserPageLayout from '#lib/components/layouts/UserPageLayout.svelte';
   import type { PageData } from './$types';
   import UtilitiesMenu from './UtilitiesMenu.svelte';
 
diff --git a/web/src/routes/(user)/utilities/+page.ts b/web/src/routes/(user)/utilities/+page.ts
index dbb939495..b3b9fcd65 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 af44a3caa..f61621c69 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';
+  import AppDownloadModal from '#lib/modals/AppDownloadModal.svelte';
+  import ObtainiumConfigModal from '#lib/modals/ObtainiumConfigModal.svelte';
+  import { Route } from '#lib/route.js';
   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 3c961886e..abbc5254e 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';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
+  import { shortcuts } from '#lib/actions/shortcut.js';
+  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';
-  import { languageManager } from '$lib/managers/language-manager.svelte';
-  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
-  import { Route } from '$lib/route';
-  import { locale } from '$lib/stores/preferences.store';
-  import { handleError } from '$lib/utils/handle-error';
+  import { assetViewerManager } from '#lib/managers/asset-viewer-manager.svelte.js';
+  import { languageManager } from '#lib/managers/language-manager.svelte.js';
+  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 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';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   const query = createPreloadedQuery(getUserConfigQuery);
   const config = $derived(query.data);
@@ -179,7 +179,6 @@
 
         deletedNotification(idsToDelete.length);
 
-        page.url.searchParams.delete('index');
         await goto(Route.duplicatesUtility());
       },
       prompt,
@@ -196,7 +195,6 @@
         duplicates = [];
 
         toastManager.primary($t('resolved_all_duplicates'));
-        page.url.searchParams.delete('index');
         await goto(Route.duplicatesUtility());
       },
       $t('bulk_keep_duplicates_confirmation', { values: { count: ids.length } }),
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 dd3a77929..2b99a6c2a 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,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getAssetDuplicates } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
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 971ff33ad..05cb84050 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';
-  import { getAssetMediaUrl } from '$lib/utils';
-  import { getAllMetadataItems, type DifferingMetadataFields } from '$lib/utils/duplicate-utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAlbumsByAssetQuery } from '$lib/queries/album.query';
+  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 { 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 421ec6853..4d397f298 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';
+  import { shortcuts } from '#lib/actions/shortcut.js';
   import DuplicateAsset from './DuplicateAsset.svelte';
-  import Portal from '$lib/elements/Portal.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { handlePromiseError } from '$lib/utils';
-  import { getNextAsset, getPreviousAsset } from '$lib/utils/asset-utils';
+  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 {
     computeDifferingMetadataFields,
     countDifferingMetadataItems,
     type DifferingMetadataFields,
-  } from '$lib/utils/duplicate-utils';
-  import { navigate } from '$lib/utils/navigation';
+  } from '#lib/utils/duplicate-utils.js';
+  import { navigate } from '#lib/utils/navigation.js';
   import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
   import { Button, Icon } from '@immich/ui';
   import { mdiCheck, mdiChevronDown, mdiChevronUp, mdiImageMultipleOutline, mdiTrashCanOutline } from '@mdi/js';
@@ -198,7 +198,7 @@
 </div>
 
 {#if assetViewerManager.isViewing}
-  {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
+  {#await import('#lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
     <Portal target="body">
       <AssetViewer
         cursor={assetCursor}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/LinkToDocs.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/LinkToDocs.svelte
index 604b1ac14..5f6286013 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/LinkToDocs.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/LinkToDocs.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
   import { Link } from '@immich/ui';
 
   type Props = {
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index 4613a214e..73c401bf4 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import { isDefined } from '$lib';
-  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';
-  import { assetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import type { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import GeolocationPointPickerModal from '$lib/modals/GeolocationPointPickerModal.svelte';
-  import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
-  import { keyboardManager } from '$lib/stores/keyboard-manager.svelte';
-  import type { LatLng } from '$lib/types';
-  import { setQueryValue } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { isDefined } from '#lib';
+  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 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 { 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 1ada22a23..f895f13ca 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 01fe1e109..320cdff4f 100644
--- a/web/src/routes/(user)/utilities/geolocation/photos/[photoId]/+page.ts
+++ b/web/src/routes/(user)/utilities/geolocation/photos/[photoId]/+page.ts
@@ -1,5 +1,5 @@
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
-import { Route } from '$lib/route';
 import type { PageLoad } from './$types';
 
 export const load = (({ params }) => redirect(307, Route.viewAsset({ id: params.photoId }))) satisfies PageLoad;
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 338c46337..faa0cac33 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';
-  import UserPageLayout from '$lib/components/layouts/UserPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
+  import type { Action } from '#lib/components/asset-viewer/actions/action.js';
+  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';
-  import { handlePromiseError } from '$lib/utils';
-  import { getNextAsset, getPreviousAsset, navigateToAsset } from '$lib/utils/asset-utils';
-  import { navigate } from '$lib/utils/navigation';
+  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 type { AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -78,7 +78,7 @@
 </UserPageLayout>
 
 {#if assetViewerManager.isViewing}
-  {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
+  {#await import('#lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
     <Portal target="body">
       <AssetViewer
         cursor={assetCursor}
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 559d48e8c..3e2067230 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,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { searchLargeAssets } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
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 1dcd0f7fc..a74a186af 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';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  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 { 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 34b5e10ed..c09289d0b 100644
--- a/web/src/routes/(user)/workflows/+page.svelte
+++ b/web/src/routes/(user)/workflows/+page.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-  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';
-  import { getWorkflowForShareQuery, searchWorkflowsQuery } from '$lib/queries/workflow.query';
-  import { Route } from '$lib/route';
-  import { getWorkflowActions, getWorkflowsActions, getWorkflowShowSchemaAction } from '$lib/services/workflow.service';
+  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 {
+    getWorkflowActions,
+    getWorkflowsActions,
+    getWorkflowShowSchemaAction,
+  } from '#lib/services/workflow.service.js';
   import {
     Badge,
     Button,
diff --git a/web/src/routes/(user)/workflows/+page.ts b/web/src/routes/(user)/workflows/+page.ts
index 948f98d18..c8732eb41 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';
-import { queryClient } from '$lib/queries/client';
-import { searchWorkflowsQuery } from '$lib/queries/workflow.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 a21ec3dde..3c874df32 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
+++ b/web/src/routes/(user)/workflows/[workflowId]/+page.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import { beforeNavigate, goto } from '$app/navigation';
-  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';
-  import { getWorkflowQuery, updateWorkflowMutation } from '$lib/queries/workflow.query';
-  import { Route } from '$lib/route';
-  import { getWorkflowActions } from '$lib/services/workflow.service';
-  import { generateId } from '$lib/utils/generate-id';
-  import { getTriggerDescription, getTriggerName } from '$lib/utils/workflow';
+  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 type { WorkflowUpdateDto } from '@immich/sdk';
   import {
     ActionBar,
@@ -223,7 +223,9 @@
     }
   };
 
-  beforeNavigate(({ cancel, to, willUnload }) => {
+  beforeNavigate(({ cancel, to, willUnload, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     if (!hasChanges || allowNavigation) {
       return;
     }
diff --git a/web/src/routes/(user)/workflows/[workflowId]/+page.ts b/web/src/routes/(user)/workflows/[workflowId]/+page.ts
index 928307b3f..b58c2b09e 100644
--- a/web/src/routes/(user)/workflows/[workflowId]/+page.ts
+++ b/web/src/routes/(user)/workflows/[workflowId]/+page.ts
@@ -1,10 +1,10 @@
+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 { redirect } from '@sveltejs/kit';
-import { pluginManager } from '$lib/managers/plugin-manager.svelte';
-import { queryClient } from '$lib/queries/client';
-import { getWorkflowQuery } from '$lib/queries/workflow.query';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url, params }) => {
diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowStepCard.svelte
index ba5c40a02..96b158e58 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';
-  import type { JSONSchemaProperty } from '$lib/types';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
+  import type { JSONSchemaProperty } from '#lib/types.js';
   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';
-  import { queryClient } from '$lib/queries/client';
+  import { getAlbumQuery } from '#lib/queries/album.query.js';
+  import { queryClient } from '#lib/queries/client.js';
   import {
     mdiAutoFix,
     mdiDragVertical,
diff --git a/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte b/web/src/routes/(user)/workflows/[workflowId]/WorkflowSummary.svelte
index 16e9e1b04..353a2d47c 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';
-  import { getTriggerName } from '$lib/utils/workflow';
+  import { pluginManager } from '#lib/managers/plugin-manager.svelte.js';
+  import { getTriggerName } from '#lib/utils/workflow.js';
   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 fc7244367..5a8c32a92 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';
+  import { getPagesProvider, getSettingsProvider } from '#lib/commands.js';
   import DownloadPanel from './DownloadPanel.svelte';
   import ErrorLayout from './ErrorLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.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';
-  import { eventManager } from '$lib/managers/event-manager.svelte';
-  import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
-  import { queryClient } from '$lib/queries/client';
-  import { Route } from '$lib/route';
-  import { lang, locale } from '$lib/stores/preferences.store';
-  import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
-  import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { eventManager } from '#lib/managers/event-manager.svelte.js';
+  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 { getServerConfig } from '@immich/sdk';
   import {
     CommandPaletteProvider,
@@ -178,7 +178,9 @@
 
   eventManager.emit('AppInit');
 
-  beforeNavigate(({ from, to }) => {
+  beforeNavigate(({ from, to, shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     if (sidebarStore.isOpen) {
       sidebarStore.reset();
     }
@@ -196,7 +198,9 @@
     showNavigationLoadingBar = true;
   });
 
-  afterNavigate(() => {
+  afterNavigate(({ shallow, type }) => {
+    if (shallow && type === 'goto') return;
+
     showNavigationLoadingBar = false;
   });
 
@@ -245,7 +249,7 @@
 <QueryClientProvider client={queryClient}>
   <TooltipProvider>
     {#if page.data.error}
-      <ErrorLayout error={page.data.error}></ErrorLayout>
+      <ErrorLayout error={page.data.error} />
     {:else}
       {@render children?.()}
     {/if}
diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
index 4ef81e8fb..417f59018 100644
--- a/web/src/routes/+layout.ts
+++ b/web/src/routes/+layout.ts
@@ -1,10 +1,10 @@
+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 { commandPaletteManager } from '@immich/ui';
 import { goto } from '$app/navigation';
-import { languageManager } from '$lib/managers/language-manager.svelte';
-import { readPreloadedQuery } from '$lib/queries/client';
-import { getServerConfigQuery } from '$lib/queries/server.query';
-import { maintenanceCreateUrl, maintenanceReturnUrl, maintenanceShouldRedirect } from '$lib/utils/maintenance';
-import { init } from '$lib/utils/server';
 import type { LayoutLoad } from './$types';
 
 export const ssr = false;
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 9bb1dc130..ab17debd9 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';
-  import { websocketStore } from '$lib/stores/websocket';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 4641fbd2c..a4640d98a 100644
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -1,10 +1,10 @@
+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 { redirect } from '@sveltejs/kit';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { readPreloadedQuery } from '$lib/queries/client';
-import { getServerConfigQuery } from '$lib/queries/server.query';
-import { Route } from '$lib/route';
-import { getFormatter } from '$lib/utils/i18n';
-import { init } from '$lib/utils/server';
 import type { PageLoad } from './$types';
 
 export const ssr = false;
diff --git a/web/src/routes/DownloadPanel.svelte b/web/src/routes/DownloadPanel.svelte
index 82425ccab..52f442453 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';
-  import { locale } from '$lib/stores/preferences.store';
+  import { type DownloadState, downloadManager } from '#lib/managers/download-manager.svelte.js';
+  import { locale } from '#lib/stores/preferences.store.js';
   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';
-  import { downloadUrlPost } from '$lib/utils';
+  import { getByteUnitString } from '#lib/utils/byte-units.js';
+  import { downloadUrlPost } from '#lib/utils.js';
 
   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 8976e88fe..0e4f64b6f 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';
+  import { copyToClipboard } from '#lib/utils.js';
   import {
     Card,
     CardBody,
diff --git a/web/src/routes/UploadAssetPreview.svelte b/web/src/routes/UploadAssetPreview.svelte
index e5ab7ec28..3f160239d 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';
-  import { locale } from '$lib/stores/preferences.store';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import type { UploadAsset } from '$lib/types';
-  import { UploadState } from '$lib/types';
-  import { getByteUnitString } from '$lib/utils/byte-units';
-  import { fileUploadHandler } from '$lib/utils/file-uploader';
+  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 { Icon } from '@immich/ui';
   import {
     mdiAlertCircle,
diff --git a/web/src/routes/UploadPanel.svelte b/web/src/routes/UploadPanel.svelte
index a13c03cab..d658d1d16 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';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import { uploadExecutionQueue } from '$lib/utils/file-uploader';
-  import { acquireWakeLock, releaseWakeLock } from '$lib/utils/wakelock.svelte';
+  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 { 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 2f793e4d2..0c1ba7c94 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';
-  import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
-  import { semverToName } from '$lib/utils';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import VersionAnnouncementModal from '#lib/modals/VersionAnnouncementModal.svelte';
+  import { semverToName } from '#lib/utils.js';
   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 df213963e..b6ea99851 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';
+import { authenticate } from '#lib/utils/auth.js';
 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 3356d6ea0..b29326beb 100644
--- a/web/src/routes/admin/+page.ts
+++ b/web/src/routes/admin/+page.ts
@@ -1,5 +1,5 @@
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
-import { Route } from '$lib/route';
 import type { PageLoad } from './$types';
 
 export const load = (() => redirect(307, Route.systemSettings())) satisfies PageLoad;
diff --git a/web/src/routes/admin/jobs-status/+page.ts b/web/src/routes/admin/jobs-status/+page.ts
index 22b6ed2a0..0b8b018a1 100644
--- a/web/src/routes/admin/jobs-status/+page.ts
+++ b/web/src/routes/admin/jobs-status/+page.ts
@@ -1,5 +1,5 @@
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
-import { Route } from '$lib/route';
 import type { PageLoad } from './$types';
 
 export const load = (() => redirect(307, Route.queues())) satisfies PageLoad;
diff --git a/web/src/routes/admin/library-management/(list)/+layout.svelte b/web/src/routes/admin/library-management/(list)/+layout.svelte
index 8a361b1fb..c3384d5f5 100644
--- a/web/src/routes/admin/library-management/(list)/+layout.svelte
+++ b/web/src/routes/admin/library-management/(list)/+layout.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   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';
-  import { Route } from '$lib/route';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getAllLibrariesQuery } from '$lib/queries/library.query';
-  import { getLibrariesActions } from '$lib/services/library.service';
+  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 { 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 f0e4cdec4..967053788 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';
-import { getAllLibrariesQuery } from '$lib/queries/library.query';
-import { searchUsersAdminQuery } from '$lib/queries/user-admin.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 ce99c8ed0..ab1243efb 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';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getLibraryStatisticsQuery } from '$lib/queries/library.query';
-  import { getUserAdminQuery } from '$lib/queries/user-admin.query';
-  import { Route } from '$lib/route';
-  import { getLibraryActions } from '$lib/services/library.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  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 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 6dde25581..828f2a757 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';
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { createLibraryMutation } from '$lib/queries/library.query';
-  import { searchUsersAdminQuery } from '$lib/queries/user-admin.query';
-  import { Route } from '$lib/route';
+  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 { 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 da3756bcf..70f7f3c7e 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 fc243ae54..205455481 100644
--- a/web/src/routes/admin/library-management/[id]/+layout.svelte
+++ b/web/src/routes/admin/library-management/[id]/+layout.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
-  import AdminCard from '$lib/components/AdminCard.svelte';
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
-  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';
-  import { getLibraryQuery, getLibraryStatisticsQuery } from '$lib/queries/library.query';
-  import { Route } from '$lib/route';
+  import emptyFoldersUrl from '#lib/assets/empty-folders.svg';
+  import AdminCard from '#lib/components/AdminCard.svelte';
+  import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
+  import ServerStatisticsCard from '#lib/components/server-statistics/ServerStatisticsCard.svelte';
+  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 {
     getLibraryActions,
     getLibraryExclusionPatternActions,
     getLibraryFolderActions,
-  } from '$lib/services/library.service';
-  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  } from '#lib/services/library.service.js';
+  import { getBytesWithUnit } from '#lib/utils/byte-units.js';
   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 779ee8e06..37e688bcc 100644
--- a/web/src/routes/admin/library-management/[id]/+layout.ts
+++ b/web/src/routes/admin/library-management/[id]/+layout.ts
@@ -1,9 +1,9 @@
+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 { redirect } from '@sveltejs/kit';
-import { queryClient } from '$lib/queries/client';
-import { getLibraryQuery } from '$lib/queries/library.query';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ params: { id }, url }) => {
diff --git a/web/src/routes/admin/library-management/[id]/+page.ts b/web/src/routes/admin/library-management/[id]/+page.ts
index 10f0f33e1..7a5081de0 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 b668cac5b..db47c1b01 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';
-  import { getLibraryQuery, updateLibraryMutation } from '$lib/queries/library.query';
-  import { Route } from '$lib/route';
+  import { createPreloadedQuery, executeMutation } from '#lib/queries/client.js';
+  import { getLibraryQuery, updateLibraryMutation } from '#lib/queries/library.query.js';
+  import { Route } from '#lib/route.js';
   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 10f0f33e1..7a5081de0 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 3859d1df4..7aa066b9f 100644
--- a/web/src/routes/admin/maintenance/+page.svelte
+++ b/web/src/routes/admin/maintenance/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import MaintenanceBackupsList from '$lib/components/maintenance/MaintenanceBackupsList.svelte';
-  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';
-  import { handleCreateJob } from '$lib/services/job.service';
-  import { getMaintenanceAdminActions } from '$lib/services/maintenance.service';
+  import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
+  import MaintenanceBackupsList from '#lib/components/maintenance/MaintenanceBackupsList.svelte';
+  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 {
     getIntegrityReportSummary,
     getQueuesLegacy,
diff --git a/web/src/routes/admin/maintenance/+page.ts b/web/src/routes/admin/maintenance/+page.ts
index 378fe0dc2..863515086 100644
--- a/web/src/routes/admin/maintenance/+page.ts
+++ b/web/src/routes/admin/maintenance/+page.ts
@@ -1,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getIntegrityReportSummary, getServerVersion, listDatabaseBackups } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
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 581194fe3..b77b39487 100644
--- a/web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte
+++ b/web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  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';
-  import { getIntegrityReportActions } from '$lib/services/integrity.service';
-  import { asyncTimeout } from '$lib/utils';
+  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 { 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 45542385a..1c57dbb42 100644
--- a/web/src/routes/admin/maintenance/integrity-report/[type]/+page.ts
+++ b/web/src/routes/admin/maintenance/integrity-report/[type]/+page.ts
@@ -1,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getIntegrityReport, IntegrityReport } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
diff --git a/web/src/routes/admin/queues/+page.svelte b/web/src/routes/admin/queues/+page.svelte
index 454601903..54a2e153f 100644
--- a/web/src/routes/admin/queues/+page.svelte
+++ b/web/src/routes/admin/queues/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
+  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';
-  import { getQueuesActions } from '$lib/services/queue.service';
+  import { queueManager } from '#lib/managers/queue-manager.svelte.js';
+  import { getQueuesActions } from '#lib/services/queue.service.js';
   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 2d1ede107..498db0de9 100644
--- a/web/src/routes/admin/queues/+page.ts
+++ b/web/src/routes/admin/queues/+page.ts
@@ -1,6 +1,6 @@
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getQueues } from '@immich/sdk';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/queues/QueueCard.svelte b/web/src/routes/admin/queues/QueueCard.svelte
index 7c5f07a73..702f8701b 100644
--- a/web/src/routes/admin/queues/QueueCard.svelte
+++ b/web/src/routes/admin/queues/QueueCard.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { cleanClass } from '$lib';
+  import { cleanClass } from '#lib';
   import QueueCardBadge from './QueueCardBadge.svelte';
   import QueueCardButton from './QueueCardButton.svelte';
-  import { Route } from '$lib/route';
-  import { asQueueItem } from '$lib/services/queue.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { transformToTitleCase } from '$lib/utils';
+  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 { 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 34e55302d..5666faded 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';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getUserConfigQuery } from '$lib/queries/config-user.query';
-  import { asQueueItem } from '$lib/services/queue.service';
-  import { handleError } from '$lib/utils/handle-error';
+  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 {
     QueueCommand,
     type QueueCommandDto,
diff --git a/web/src/routes/admin/queues/QueueStorageMigrationDescription.svelte b/web/src/routes/admin/queues/QueueStorageMigrationDescription.svelte
index 7b623f79c..c8c0965b2 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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { Route } from '$lib/route';
+  import { OpenQueryParam } from '#lib/constants.js';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { Route } from '#lib/route.js';
   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 ed579445a..a2c5a50d6 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 AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
   import QueueGraph from './QueueGraph.svelte';
-  import { queueManager } from '$lib/managers/queue-manager.svelte';
-  import { Route } from '$lib/route';
-  import { asQueueItem, getQueueActions } from '$lib/services/queue.service';
+  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 {
     Badge,
     Card,
diff --git a/web/src/routes/admin/queues/[name]/+page.ts b/web/src/routes/admin/queues/[name]/+page.ts
index 05cdbe2c2..402bb7d3b 100644
--- a/web/src/routes/admin/queues/[name]/+page.ts
+++ b/web/src/routes/admin/queues/[name]/+page.ts
@@ -1,8 +1,8 @@
+import { fromQueueSlug, Route } from '#lib/route.js';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getQueue, getQueueJobs, QueueJobStatus } from '@immich/sdk';
 import { redirect } from '@sveltejs/kit';
-import { fromQueueSlug, Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
diff --git a/web/src/routes/admin/queues/[name]/QueueGraph.svelte b/web/src/routes/admin/queues/[name]/QueueGraph.svelte
index 50a8e08a8..b87f7c1f3 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';
-  import type { QueueSnapshot } from '$lib/types';
+  import { cleanClass } from '#lib';
+  import { queueManager } from '#lib/managers/queue-manager.svelte.js';
+  import type { QueueSnapshot } from '#lib/types.js';
   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.svelte b/web/src/routes/admin/server-status/+page.svelte
index fe2ac576c..9a73d52cb 100644
--- a/web/src/routes/admin/server-status/+page.svelte
+++ b/web/src/routes/admin/server-status/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
   import ServerStatisticsPanel from './ServerStatisticsPanel.svelte';
   import { Container } from '@immich/ui';
   import type { PageData } from './$types';
diff --git a/web/src/routes/admin/server-status/+page.ts b/web/src/routes/admin/server-status/+page.ts
index 7c168bfb3..aeb33f949 100644
--- a/web/src/routes/admin/server-status/+page.ts
+++ b/web/src/routes/admin/server-status/+page.ts
@@ -1,9 +1,9 @@
+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 { noop } from 'lodash-es';
-import { queryClient } from '$lib/queries/client';
-import { getServerStatisticsQuery } from '$lib/queries/server.query';
-import { searchUsersAdminQuery } from '$lib/queries/user-admin.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte b/web/src/routes/admin/server-status/ServerStatisticsPanel.svelte
index fc11252ba..b9d1ddfff 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';
-  import { getServerStatisticsQuery } from '$lib/queries/server.query';
-  import { searchUsersAdminQuery } from '$lib/queries/user-admin.query';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  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 {
     Code,
     FormatBytes,
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index a4fa338fd..c230787fc 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -13,17 +13,17 @@
   import NightlyTasksSettings from './NightlyTasksSettings.svelte';
   import NotificationSettings from './NotificationSettings.svelte';
   import ServerSettings from './ServerSettings.svelte';
-  import StorageTemplateSettings from '$lib/components/admin-settings/StorageTemplateSettings.svelte';
+  import StorageTemplateSettings from '#lib/components/admin-settings/StorageTemplateSettings.svelte';
   import ThemeSettings from './ThemeSettings.svelte';
   import TrashSettings from './TrashSettings.svelte';
   import UserSettings from './UserSettings.svelte';
-  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';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
-  import { getSystemConfigActions } from '$lib/services/system-config.service';
+  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 { 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 a2d62e66e..fa4529ea4 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';
-import { getAdminConfigDefaultsQuery } from '$lib/queries/config-admin.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 2a9b34424..0f582f97c 100644
--- a/web/src/routes/admin/system-settings/AuthSettings.svelte
+++ b/web/src/routes/admin/system-settings/AuthSettings.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
-  import { handleError } from '$lib/utils/handle-error';
+  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 FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
+  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 { 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 6dcb1c2ae..0f7fabfb0 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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 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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
+  import { SettingInputFieldType } from '#lib/constants.js';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 f7e0660b1..8aefcf301 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
-  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  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 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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.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 FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   import {
     AudioCodec,
     CQMode,
diff --git a/web/src/routes/admin/system-settings/ImageSettings.svelte b/web/src/routes/admin/system-settings/ImageSettings.svelte
index e45eafb0a..325020691 100644
--- a/web/src/routes/admin/system-settings/ImageSettings.svelte
+++ b/web/src/routes/admin/system-settings/ImageSettings.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   import { cloneDeep } from 'lodash-es';
   import SettingSelect from './SettingSelect.svelte';
   import { Colorspace, ImageFormat } from '@immich/sdk';
   import { fade } from 'svelte/transition';
 
-  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';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 eda7ebf26..cc0af9855 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 9c813229c..12aef1187 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 { 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 31d28dc9b..310a6af97 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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 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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.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 FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 41ea903c9..5fec65626 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   import { cloneDeep } from 'lodash-es';
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
+  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';
+  import SettingSwitch from '#lib/components/shared-components/settings/SettingSwitch.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 3109387bf..1f07e1f78 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
-  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.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 FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 a3b2668db..c373d57ff 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 a91d4dfce..557ffad28 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
+  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 { 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 edfde1409..7f7356e6b 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
+  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 { 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 2eb464bb2..afe8680f5 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 { 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 5575a557b..aad6e0c20 100644
--- a/web/src/routes/admin/system-settings/NotificationSettings.svelte
+++ b/web/src/routes/admin/system-settings/NotificationSettings.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { cloneDeep } from 'lodash-es';
   import TemplateSettings from './TemplateSettings.svelte';
-  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';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { getAdminConfigQuery, updateAdminConfigMutation } from '$lib/queries/config-admin.query';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 { 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 8d58a442a..fedefd7d5 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 { 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 9ebddf568..af697da6f 100644
--- a/web/src/routes/admin/system-settings/TemplateSettings.svelte
+++ b/web/src/routes/admin/system-settings/TemplateSettings.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import SettingAccordion from '$lib/components/shared-components/settings/SettingAccordion.svelte';
+  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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
-  import EmailTemplatePreviewModal from '$lib/modals/EmailTemplatePreviewModal.svelte';
-  import { handleError } from '$lib/utils/handle-error';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
+  import EmailTemplatePreviewModal from '#lib/modals/EmailTemplatePreviewModal.svelte';
+  import { handleError } from '#lib/utils/handle-error.js';
   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 84c97d4f4..845a4f81d 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   import { cloneDeep } from 'lodash-es';
-  import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
+  import SettingButtonsRow from '#lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
   import SettingTextarea from './SettingTextarea.svelte';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { featureFlagsManager } from '#lib/managers/feature-flags-manager.svelte.js';
   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 60d6ba735..20301357f 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 { 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 a182b4803..253c052c2 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';
-  import { getAdminConfigQuery } from '$lib/queries/config-admin.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getAdminConfigQuery } from '#lib/queries/config-admin.query.js';
   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';
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  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 { 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 72f0f8268..f64a38790 100644
--- a/web/src/routes/admin/user-management/+page.ts
+++ b/web/src/routes/admin/user-management/+page.ts
@@ -1,5 +1,5 @@
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
-import { Route } from '$lib/route';
 import type { PageLoad } from './$types';
 
 export const load = (() => redirect(307, Route.users())) satisfies PageLoad;
diff --git a/web/src/routes/admin/users/(list)/+layout.svelte b/web/src/routes/admin/users/(list)/+layout.svelte
index 2b31d3c0b..8fe611b1b 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';
-  import { searchUsersAdminQuery } from '$lib/queries/user-admin.query';
-  import { Route } from '$lib/route';
-  import { getUserAdminActions, getUserAdminsActions } from '$lib/services/user-admin.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getByteUnitString } from '$lib/utils/byte-units';
+  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 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 ba3812bc3..63e15df83 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';
-import { searchUsersAdminQuery } from '$lib/queries/user-admin.query';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
+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 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 1a0cb4eb1..0a02c0e87 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';
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { getStorageQuery } from '$lib/queries/server.query';
-  import { createUserAdminMutation } from '$lib/queries/user-admin.query';
-  import { ByteUnit, convertToBytes } from '$lib/utils/byte-units';
+  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 { 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';
+  import { getUserConfigQuery } from '#lib/queries/config-user.query.js';
 
   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 99626bced..162d63380 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 f60662ac0..46684f30e 100644
--- a/web/src/routes/admin/users/[id]/+layout.svelte
+++ b/web/src/routes/admin/users/[id]/+layout.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import AdminCard from '$lib/components/AdminCard.svelte';
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
-  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
-  import DeviceCard from '$lib/components/user-settings-page/DeviceCard.svelte';
+  import AdminCard from '#lib/components/AdminCard.svelte';
+  import AdminPageLayout from '#lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '#lib/components/OnEvents.svelte';
+  import ServerStatisticsCard from '#lib/components/server-statistics/ServerStatisticsCard.svelte';
+  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';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
   import {
     getUserAdminQuery,
     getUserCalendarHeatmapAdminQuery,
     getUserPreferencesAdminQuery,
     getUserSessionsAdminQuery,
     getUserStatisticsAdminQuery,
-  } from '$lib/queries/user-admin.query';
-  import { Route } from '$lib/route';
-  import { getUserAdminActions } from '$lib/services/user-admin.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { createDateFormatter, findLocale } from '$lib/utils';
-  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  } 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';
   import {
     Alert,
     Badge,
@@ -50,8 +50,8 @@
   import { createQuery } from '@tanstack/svelte-query';
   import { t } from 'svelte-i18n';
   import type { LayoutProps } from './$types';
-  import Skeleton from '$lib/elements/Skeleton.svelte';
-  import CalendarHeatmap from '$lib/components/CalendarHeatmap.svelte';
+  import Skeleton from '#lib/elements/Skeleton.svelte';
+  import CalendarHeatmap from '#lib/components/CalendarHeatmap.svelte';
 
   const { children, params }: LayoutProps = $props();
 
diff --git a/web/src/routes/admin/users/[id]/+layout.ts b/web/src/routes/admin/users/[id]/+layout.ts
index 5e13c2fed..bb0a9915d 100644
--- a/web/src/routes/admin/users/[id]/+layout.ts
+++ b/web/src/routes/admin/users/[id]/+layout.ts
@@ -1,10 +1,10 @@
+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 { redirect } from '@sveltejs/kit';
-import { UUID_REGEX } from '$lib/constants';
-import { queryClient } from '$lib/queries/client';
-import { getUserAdminQuery } from '$lib/queries/user-admin.query';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { LayoutLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
diff --git a/web/src/routes/admin/users/[id]/+page.ts b/web/src/routes/admin/users/[id]/+page.ts
index 775f9662d..9a9b2a992 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 79bb10408..588be2cb5 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';
-  import { Route } from '$lib/route';
-  import { createPreloadedQuery, executeMutation } from '$lib/queries/client';
-  import { getStorageQuery } from '$lib/queries/server.query';
-  import { getUserAdminQuery, updateUserAdminMutation } from '$lib/queries/user-admin.query';
-  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
+  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 { 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 64420e91d..1ad2c9c43 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 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 b4e43e49f..d7f13bfed 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';
-  import { Route } from '$lib/route';
-  import { handleChangePassword } from '$lib/services/user.service';
+  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 { 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 dacc0c25a..03500453e 100644
--- a/web/src/routes/auth/change-password/+page.ts
+++ b/web/src/routes/auth/change-password/+page.ts
@@ -1,8 +1,8 @@
+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 { redirect } from '@sveltejs/kit';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte
index 30a696949..a379b7012 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';
-  import { createPreloadedQuery, MutationCancelledError } from '$lib/queries/client';
-  import { getPublicConfigQuery } from '$lib/queries/config-public.query';
-  import { loginWithPasskeyMutation } from '$lib/queries/passkey.query';
-  import { getServerConfigQuery } from '$lib/queries/server.query';
-  import { Route } from '$lib/route';
+  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 { browserSupportsWebAuthn } from '@simplewebauthn/browser';
   import { createMutation } from '@tanstack/svelte-query';
-  import { oauth } from '$lib/utils';
-  import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
+  import { oauth } from '#lib/utils.js';
+  import { getServerErrorMessage, handleError } from '#lib/utils/handle-error.js';
   import { login, type LoginResponseDto } from '@immich/sdk';
   import { Alert, Button, Field, Input, PasswordInput, Stack } from '@immich/ui';
   import { mdiShieldKeyOutline } from '@mdi/js';
@@ -51,7 +51,7 @@
   );
 
   const onSuccess = async (user: LoginResponseDto) => {
-    await goto(data.continueUrl, { invalidateAll: true });
+    await goto(data.continueUrl, { refreshAll: true });
     eventManager.emit('AuthLogin', user);
   };
 
diff --git a/web/src/routes/auth/login/+page.ts b/web/src/routes/auth/login/+page.ts
index de5702641..922f22dd9 100644
--- a/web/src/routes/auth/login/+page.ts
+++ b/web/src/routes/auth/login/+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 { getFormatter } from '#lib/utils/i18n.js';
 import { redirect } from '@sveltejs/kit';
-import { authManager } from '$lib/managers/auth-manager.svelte';
-import { readPreloadedQuery } from '$lib/queries/client';
-import { getServerConfigQuery } from '$lib/queries/server.query';
-import { Route } from '$lib/route';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ parent, url }) => {
diff --git a/web/src/routes/auth/logout/+page.svelte b/web/src/routes/auth/logout/+page.svelte
index d7bd40168..69bc1cbde 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';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
   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 043957260..1f3dad145 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';
-  import { Route } from '$lib/route';
-  import { OnboardingRole } from '$lib/types';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { Route } from '#lib/route.js';
+  import { OnboardingRole } from '#lib/types.js';
   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';
-  import { getServerConfigQuery } from '$lib/queries/server.query';
+  import { createPreloadedQuery, queryClient } from '#lib/queries/client.js';
+  import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
 
   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 66cb3de2c..be4b6323b 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';
-import { getFormatter } from '$lib/utils/i18n';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/auth/onboarding/OnboardingBackup.svelte b/web/src/routes/auth/onboarding/OnboardingBackup.svelte
index ce64f64fd..660181513 100644
--- a/web/src/routes/auth/onboarding/OnboardingBackup.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingBackup.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
   import { Icon, Link, Stack } from '@immich/ui';
   import { mdiAlertCircleOutline } from '@mdi/js';
   import type { Translations } from 'svelte-i18n';
diff --git a/web/src/routes/auth/onboarding/OnboardingCard.svelte b/web/src/routes/auth/onboarding/OnboardingCard.svelte
index 8833bab6d..063eafabb 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';
+  import { languageManager } from '#lib/managers/language-manager.svelte.js';
   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 deadf8bc0..2172aaf38 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';
-  import { OnboardingRole } from '$lib/types';
+  import { authManager } from '#lib/managers/auth-manager.svelte.js';
+  import { OnboardingRole } from '#lib/types.js';
   import { Logo } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { createPreloadedQuery } from '$lib/queries/client';
-  import { getServerConfigQuery } from '$lib/queries/server.query';
+  import { createPreloadedQuery } from '#lib/queries/client.js';
+  import { getServerConfigQuery } from '#lib/queries/server-info.query.js';
 
   const query = createPreloadedQuery(getServerConfigQuery);
   const serverConfig = $derived(query.data);
diff --git a/web/src/routes/auth/onboarding/OnboardingLanguage.svelte b/web/src/routes/auth/onboarding/OnboardingLanguage.svelte
index 97b2d641d..652906fd5 100644
--- a/web/src/routes/auth/onboarding/OnboardingLanguage.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingLanguage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingsLanguageSelector from '$lib/components/shared-components/settings/SettingsLanguageSelector.svelte';
+  import SettingsLanguageSelector from '#lib/components/shared-components/settings/SettingsLanguageSelector.svelte';
   import { t } from 'svelte-i18n';
 </script>
 
diff --git a/web/src/routes/auth/onboarding/OnboardingMobileApp.svelte b/web/src/routes/auth/onboarding/OnboardingMobileApp.svelte
index 27e24d17e..736a57332 100644
--- a/web/src/routes/auth/onboarding/OnboardingMobileApp.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingMobileApp.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import AppDownloadModal from '$lib/modals/AppDownloadModal.svelte';
-  import ObtainiumConfigModal from '$lib/modals/ObtainiumConfigModal.svelte';
+  import AppDownloadModal from '#lib/modals/AppDownloadModal.svelte';
+  import ObtainiumConfigModal from '#lib/modals/ObtainiumConfigModal.svelte';
   import { Button, HStack, modalManager } from '@immich/ui';
   import { mdiCellphoneArrowDownVariant, mdiLinkEdit } from '@mdi/js';
   import { t } from 'svelte-i18n';
diff --git a/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte b/web/src/routes/auth/onboarding/OnboardingServerPrivacy.svelte
index e96b1c8f3..a406d9ca1 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';
-  import { getAdminConfigQuery, updateAdminConfigMutation } from '$lib/queries/config-admin.query';
+  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 { 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 1e2d82faf..1177775ab 100644
--- a/web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte
+++ b/web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte
@@ -9,9 +9,9 @@
 </script>
 
 <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';
+  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';
 
   const preselectDate = isFirstVisit();
 </script>
diff --git a/web/src/routes/auth/onboarding/OnboardingTheme.svelte b/web/src/routes/auth/onboarding/OnboardingTheme.svelte
index fba2a6d4d..50b4e3a91 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';
+  import { moonPath, moonViewBox, sunPath, sunViewBox } from '#lib/assets/svg-paths.js';
   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 600e6abea..eb3a4acee 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';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 d6648889a..b8c22dfda 100644
--- a/web/src/routes/auth/pin-prompt/+page.svelte
+++ b/web/src/routes/auth/pin-prompt/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   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';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 ed755337f..e890c3788 100644
--- a/web/src/routes/auth/pin-prompt/+page.ts
+++ b/web/src/routes/auth/pin-prompt/+page.ts
@@ -1,7 +1,7 @@
+import { Route } from '#lib/route.js';
+import { authenticate } from '#lib/utils/auth.js';
+import { getFormatter } from '#lib/utils/i18n.js';
 import { getAuthStatus } from '@immich/sdk';
-import { Route } from '$lib/route';
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
diff --git a/web/src/routes/auth/register/+page.svelte b/web/src/routes/auth/register/+page.svelte
index 8fcaedbf3..daaa3d378 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';
-  import { getServerConfigQuery } from '$lib/queries/server.query';
-  import { Route } from '$lib/route';
-  import { handleError } from '$lib/utils/handle-error';
+  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 { 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 51b93af6d..9c9d98aa2 100644
--- a/web/src/routes/auth/register/+page.ts
+++ b/web/src/routes/auth/register/+page.ts
@@ -1,8 +1,8 @@
+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 { redirect } from '@sveltejs/kit';
-import { readPreloadedQuery } from '$lib/queries/client';
-import { getServerConfigQuery } from '$lib/queries/server.query';
-import { Route } from '$lib/route';
-import { getFormatter } from '$lib/utils/i18n';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ parent }) => {
diff --git a/web/src/routes/link/+page.ts b/web/src/routes/link/+page.ts
index 4c113b2e5..01fed8b9d 100644
--- a/web/src/routes/link/+page.ts
+++ b/web/src/routes/link/+page.ts
@@ -1,6 +1,6 @@
+import { OpenQueryParam } from '#lib/constants.js';
+import { Route } from '#lib/route.js';
 import { redirect } from '@sveltejs/kit';
-import { OpenQueryParam } from '$lib/constants';
-import { Route } from '$lib/route';
 import type { PageLoad } from './$types';
 
 enum LinkTarget {
diff --git a/web/src/routes/maintenance/+page.svelte b/web/src/routes/maintenance/+page.svelte
index 566231692..6cd4f6c2f 100644
--- a/web/src/routes/maintenance/+page.svelte
+++ b/web/src/routes/maintenance/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   /* eslint-disable unicorn/no-optional-chaining-on-undeclared-variable */
-  import AuthPageLayout from '$lib/components/layouts/AuthPageLayout.svelte';
+  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';
-  import { maintenanceStore } from '$lib/stores/maintenance.store';
+  import FormatMessage from '#lib/elements/FormatMessage.svelte';
+  import { handleSetMaintenanceMode } from '#lib/services/maintenance.service.js';
+  import { maintenanceStore } from '#lib/stores/maintenance.store.js';
   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 044c2c7cd..e86e6ead9 100644
--- a/web/src/routes/maintenance/+page.ts
+++ b/web/src/routes/maintenance/+page.ts
@@ -1,5 +1,5 @@
+import { loadMaintenanceAuth, loadMaintenanceStatus } from '#lib/utils/maintenance.js';
 import { getServerVersion } from '@immich/sdk';
-import { loadMaintenanceAuth, loadMaintenanceStatus } from '$lib/utils/maintenance';
 import type { PageLoad } from '../admin/$types';
 
 export const load = (async () => {
diff --git a/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte b/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte
index debccc035..e1d2f8c68 100644
--- a/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte
+++ b/web/src/routes/maintenance/RestoreFlowSelectBackup.svelte
@@ -2,7 +2,7 @@
   import { Button, Heading, HStack, Scrollable } from '@immich/ui';
   import { mdiArrowLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import MaintenanceBackupsList from '$lib/components/maintenance/MaintenanceBackupsList.svelte';
+  import MaintenanceBackupsList from '#lib/components/maintenance/MaintenanceBackupsList.svelte';
 
   type Props = {
     previous: () => void;
diff --git a/web/src/service-worker/index.ts b/web/src/service-worker/index.ts
index 75515b484..6a285a675 100644
--- a/web/src/service-worker/index.ts
+++ b/web/src/service-worker/index.ts
@@ -1,8 +1,3 @@
-/* eslint-disable unicorn/no-unnecessary-global-this */
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
 import { installMessageListener } from './messaging';
 import { handleFetch as handleAssetFetch } from './request';
 
diff --git a/web/src/service-worker/messaging.ts b/web/src/service-worker/messaging.ts
index ae8735ebe..3a0f6de58 100644
--- a/web/src/service-worker/messaging.ts
+++ b/web/src/service-worker/messaging.ts
@@ -1,8 +1,4 @@
 /* eslint-disable unicorn/no-unnecessary-global-this */
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
 import { handleCancel } from './request';
 
 const sw = globalThis as unknown as ServiceWorkerGlobalScope;
diff --git a/web/src/service-worker/request.ts b/web/src/service-worker/request.ts
index 2dd2d35e6..9c17ff7c8 100644
--- a/web/src/service-worker/request.ts
+++ b/web/src/service-worker/request.ts
@@ -1,8 +1,3 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
-
 type PendingRequest = {
   controller: AbortController;
   promise: Promise<Response>;
diff --git a/web/src/service-worker/tsconfig.json b/web/src/service-worker/tsconfig.json
new file mode 100644
index 000000000..0bfe743d2
--- /dev/null
+++ b/web/src/service-worker/tsconfig.json
@@ -0,0 +1 @@
+{ "extends": "$app/tsconfig/service-worker" }
diff --git a/web/src/test-data/factories/asset-factory.ts b/web/src/test-data/factories/asset-factory.ts
index d11a1fa5e..712ec35fb 100644
--- a/web/src/test-data/factories/asset-factory.ts
+++ b/web/src/test-data/factories/asset-factory.ts
@@ -1,8 +1,8 @@
+import type { TimelineAsset } from '#lib/managers/timeline-manager/types.js';
+import { fromISODateTimeUTCToObject, fromTimelinePlainDateTime } from '#lib/utils/timeline-util.js';
 import { faker } from '@faker-js/faker';
 import { AssetTypeEnum, AssetVisibility, type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { Sync } from 'factory.ts';
-import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-import { fromISODateTimeUTCToObject, fromTimelinePlainDateTime } from '$lib/utils/timeline-util';
 
 export const assetFactory = Sync.makeFactory<AssetResponseDto>({
   id: Sync.each(() => faker.string.uuid()),
diff --git a/web/svelte.config.js b/web/svelte.config.js
deleted file mode 100644
index 65d4d4bf4..000000000
--- a/web/svelte.config.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import dotenv from 'dotenv';
-
-dotenv.config({ quiet: true });
-
-process.env.PUBLIC_IMMICH_BUY_HOST = process.env.PUBLIC_IMMICH_BUY_HOST || 'https://buy.immich.app';
-process.env.PUBLIC_IMMICH_PAY_HOST = process.env.PUBLIC_IMMICH_PAY_HOST || 'https://pay.futo.org';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-  compilerOptions: {
-    // TODO pending `@immich/ui` to enable it
-    // runes: true,
-  },
-  preprocess: vitePreprocess(),
-  kit: {
-    version: {
-      name: process.env.IMMICH_BUILD || process.env.npm_package_version || 'local',
-    },
-    paths: {
-      relative: false,
-    },
-    adapter: adapter({
-      fallback: 'index.html',
-      precompress: true,
-    }),
-    alias: {
-      $lib: 'src/lib',
-      '$lib/*': 'src/lib/*',
-      $tests: 'src/../tests',
-      '$tests/*': 'src/../tests/*',
-      '@test-data': 'src/test-data',
-      $i18n: '../i18n',
-      'chromecast-caf-sender': './node_modules/@types/chromecast-caf-sender/index.d.ts',
-    },
-  },
-  onwarn: (warning, handler) => {
-    if (warning.code === 'state_referenced_locally') {
-      return;
-    }
-    handler(warning);
-  },
-};
-
-export default config;
diff --git a/web/tests/helpers.ts b/web/tests/helpers.ts
index 2fa10c0db..a8618d2e2 100644
--- a/web/tests/helpers.ts
+++ b/web/tests/helpers.ts
@@ -1,6 +1,6 @@
+import TestWrapper from '#lib/components/TestWrapper.svelte';
 import { render, type RenderResult } from '@testing-library/svelte';
 import { type Component } from 'svelte';
-import TestWrapper from '$lib/components/TestWrapper.svelte';
 
 export const renderWithTooltips = <T extends Record<string, unknown>, K extends Component<T>>(
   component: K,
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 795edd526..92bf1ddff 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,20 +1,19 @@
 {
   "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
     "module": "es2022",
-    "moduleResolution": "bundler",
     "noImplicitOverride": true,
-    "resolveJsonModule": true,
+    "paths": {
+      "#i18n/*": ["../i18n/*"],
+      "#test-data/*": ["./src/test-data/*"],
+      "#tests/*": ["./src/../tests/*"]
+    },
     "rootDir": ".",
-    "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
     "target": "es2022",
-    "types": ["vitest/globals"]
+    "types": ["$app/types", "vitest/globals"]
   },
-  "exclude": ["vite.config.ts"],
-  "extends": "./.svelte-kit/tsconfig.json"
+  "exclude": ["vite.config.ts", "src/service-worker/*"],
+  "extends": "$app/tsconfig",
+  "include": ["src", "vite.config.ts", "tests"]
 }
diff --git a/web/vite.config.ts b/web/vite.config.ts
index d965592cc..6a81b5bd2 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,10 +1,12 @@
+import adapter from '@sveltejs/adapter-static';
 import { enhancedImages } from '@sveltejs/enhanced-img';
 import { sveltekit } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import tailwindcss from '@tailwindcss/vite';
 import { svelteTesting } from '@testing-library/svelte/vite';
+import dotenv from 'dotenv';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, type ProxyOptions, type UserConfig } from 'vite';
-import path from 'node:path';
 
 const upstream = {
   target: process.env.IMMICH_SERVER_URL || 'http://immich-server:2283/',
@@ -21,6 +23,10 @@ const proxy: Record<string, string | ProxyOptions> = {
   '/custom.css': upstream,
 };
 
+dotenv.config({ quiet: true });
+process.env.PUBLIC_IMMICH_BUY_HOST = process.env.PUBLIC_IMMICH_BUY_HOST || 'https://buy.immich.app';
+process.env.PUBLIC_IMMICH_PAY_HOST = process.env.PUBLIC_IMMICH_PAY_HOST || 'https://pay.futo.org';
+
 export default defineConfig({
   build: {
     target: 'es2022',
@@ -28,11 +34,9 @@ export default defineConfig({
   resolve: {
     alias: {
       'xmlhttprequest-ssl': './node_modules/engine.io-client/lib/xmlhttprequest.js',
-      // eslint-disable-next-line unicorn/prefer-module
-      '@test-data': path.resolve(import.meta.dirname, './src/test-data'),
-      // '@immich/ui': path.resolve(import.meta.dirname, '../../ui/packages/ui'),
     },
   },
+  // '@immich/ui': path.resolve(import.meta.dirname, '../../ui/packages/ui'),
   server: {
     // connect to a remote backend during web-only development
     proxy,
@@ -44,7 +48,30 @@ export default defineConfig({
   plugins: [
     enhancedImages(),
     tailwindcss(),
-    sveltekit(),
+    sveltekit({
+      compilerOptions: {},
+      // TODO pending `@immich/ui` to enable it
+      // runes: true,
+      preprocess: vitePreprocess(),
+
+      version: {
+        name: process.env.IMMICH_BUILD || process.env.npm_package_version || 'local',
+      },
+      paths: { relative: false },
+      adapter: adapter({ fallback: 'index.html', precompress: true }),
+      onwarn: (warning, handler) => {
+        if (warning.code === 'state_referenced_locally') {
+          return;
+        }
+
+        handler(warning);
+      },
+      // TODO remove as this way of doing it is deprecated
+      alias: {
+        'chromecast-caf-sender': './node_modules/@types/chromecast-caf-sender/index.d.ts',
+      },
+    }),
+
     process.env.BUILD_STATS === 'true'
       ? visualizer({
           emitFile: true,