Source Code added

2026-02-02 15:06:40 +01:00 · 2026-02-02 15:06:40 +01:00 · 9efa9bc6dd
commit 9efa9bc6dd
parent 800376eafd
3912 changed files with 754770 additions and 2 deletions
--- a/web/.browserslistrc
+++ b/web/.browserslistrc
@ -0,0 +1,3 @@
+> 0.2% and last 4 major versions
+> 0.5%
+not dead
--- a/web/.dockerignore
+++ b/web/.dockerignore
@ -0,0 +1,4 @@
+node_modules/
+coverage/
+.svelte-kit
+build/
--- a/web/.gitignore
+++ b/web/.gitignore
@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
--- a/web/.npmrc
+++ b/web/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/web/.nvmrc
+++ b/web/.nvmrc
@ -0,0 +1 @@
+24.13.0
--- a/web/.prettierignore
+++ b/web/.prettierignore
@ -0,0 +1,15 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+/coverage
+.env
+.env.*
+!.env.example
+*.md
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
--- a/web/.prettierrc
+++ b/web/.prettierrc
@ -0,0 +1,10 @@
+{
+  "jsonRecursiveSort": true,
+  "organizeImportsSkipDestructiveCodeActions": true,
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-svelte", "prettier-plugin-sort-json"],
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
--- a/web/README.md
+++ b/web/README.md
@ -0,0 +1,5 @@
+# Immich web project
+
+This project uses the [SvelteKit](https://kit.svelte.dev/) web framework. Please refer to [the SvelteKit docs](https://kit.svelte.dev/docs) for information on getting started as a contributor to this project. In particular, it will help you navigate the project's code if you understand the basics of [SvelteKit routing](https://kit.svelte.dev/docs/routing).
+
+When developing locally, you will run a SvelteKit Node.js server. When this project is deployed to production, it is built as a SPA and deployed as part of [the server project](../server).
--- a/web/bin/immich-web
+++ b/web/bin/immich-web
@ -0,0 +1,18 @@
+#!/usr/bin/env sh
+
+cd /usr/src/app || exit
+
+pnpm --filter @immich/sdk build
+
+COUNT=0
+UPSTREAM="${IMMICH_SERVER_URL:-http://immich-server:2283/}"
+UPSTREAM="${UPSTREAM%/}"
+until wget --spider --quiet "${UPSTREAM}/api/server/config" > /dev/null 2>&1; do
+    if [ $((COUNT % 10)) -eq 0 ]; then
+      echo "Waiting for $UPSTREAM to start..."
+    fi
+    COUNT=$((COUNT + 1))
+    sleep 1
+done
+echo "Connected to $UPSTREAM, starting Immich Web..."
+pnpm --filter immich-web exec vite dev --host 0.0.0.0 --port 3000
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@ -0,0 +1,148 @@
+import js from '@eslint/js';
+import tslintPluginCompat from '@koddsson/eslint-plugin-tscompat';
+import prettier from 'eslint-config-prettier';
+import eslintPluginCompat from 'eslint-plugin-compat';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
+import eslintPluginUnicorn from 'eslint-plugin-unicorn';
+import globals from 'globals';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import parser from 'svelte-eslint-parser';
+import typescriptEslint from 'typescript-eslint';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default typescriptEslint.config(
+  ...eslintPluginSvelte.configs.recommended,
+  eslintPluginUnicorn.configs.recommended,
+  js.configs.recommended,
+  prettier,
+  {
+    plugins: {
+      tscompat: tslintPluginCompat,
+    },
+    rules: {
+      'tscompat/tscompat': [
+        'error',
+        {
+          browserslist: fs
+            .readFileSync(path.join(__dirname, '.browserslistrc'), 'utf8')
+            .split('\n')
+            .map((line) => line.trim())
+            .filter((line) => line && !line.startsWith('#')),
+        },
+      ],
+    },
+    languageOptions: {
+      parser,
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: __dirname,
+      },
+    },
+    ignores: ['**/service-worker/**'],
+  },
+  {
+    plugins: {
+      compat: eslintPluginCompat,
+    },
+    settings: {
+      polyfills: [],
+      lintAllEsApis: true,
+    },
+    rules: {
+      'compat/compat': 'error',
+    },
+  },
+  {
+    ignores: [
+      '**/.DS_Store',
+      '**/node_modules',
+      'build',
+      '.svelte-kit',
+      'package',
+      '**/.env',
+      '**/.env.*',
+      '!**/.env.example',
+      '**/pnpm-lock.yaml',
+      '**/package-lock.json',
+      '**/yarn.lock',
+      '**/svelte.config.js',
+      'eslint.config.js',
+      'tailwind.config.js',
+      'coverage',
+    ],
+  },
+  typescriptEslint.configs.recommended,
+  {
+    plugins: {
+      svelte: eslintPluginSvelte,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        NodeJS: true,
+      },
+
+      parser: typescriptEslint.parser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+
+      parserOptions: {
+        extraFileExtensions: ['.svelte'],
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+
+    ignores: ['**/service-worker/**'],
+
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_$',
+          varsIgnorePattern: '^_$',
+        },
+      ],
+
+      curly: 2,
+      'unicorn/no-array-reverse': 'off', // toReversed() is not supported in Chrome 109 or Safari 15.4
+      'unicorn/no-useless-undefined': 'off',
+      'unicorn/prefer-spread': 'off',
+      'unicorn/no-null': 'off',
+      'unicorn/prevent-abbreviations': 'off',
+      'unicorn/no-nested-ternary': 'off',
+      'unicorn/consistent-function-scoping': 'off',
+      'unicorn/filename-case': 'off',
+      'unicorn/prefer-top-level-await': 'off',
+      'unicorn/import-style': 'off',
+      'unicorn/no-array-sort': 'off',
+      'unicorn/no-for-loop': 'off',
+      'svelte/button-has-type': 'error',
+      '@typescript-eslint/await-thenable': 'error',
+      '@typescript-eslint/no-floating-promises': 'error',
+      '@typescript-eslint/no-misused-promises': 'error',
+      '@typescript-eslint/require-await': 'error',
+      'object-shorthand': ['error', 'always'],
+      'svelte/no-navigation-without-resolve': 'off',
+    },
+  },
+  {
+    files: ['**/*.svelte'],
+
+    languageOptions: {
+      parser: parser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        parser: typescriptEslint.parser,
+      },
+    },
+  },
+);
--- a/web/mise.toml
+++ b/web/mise.toml
@ -0,0 +1,62 @@
+[tasks.install]
+run = "pnpm install --filter immich-web --frozen-lockfile"
+
+[tasks."svelte-kit-sync"]
+env._.path = "./node_modules/.bin"
+run = "svelte-kit sync"
+
+[tasks.build]
+env._.path = "./node_modules/.bin"
+run = "vite build"
+
+[tasks."build-stats"]
+env.BUILD_STATS = "true"
+env._.path = "./node_modules/.bin"
+run = "vite build"
+
+[tasks.preview]
+env._.path = "./node_modules/.bin"
+run = "vite preview"
+
+[tasks.start]
+env._.path = "./node_modules/.bin"
+run = "vite dev --host 0.0.0.0 --port 3000"
+
+[tasks.test]
+depends = ["svelte-kit-sync"]
+env._.path = "./node_modules/.bin"
+run = "vitest"
+
+[tasks.format]
+env._.path = "./node_modules/.bin"
+run = "prettier --check ."
+
+[tasks."format-fix"]
+env._.path = "./node_modules/.bin"
+run = "prettier --write ."
+
+[tasks.lint]
+env._.path = "./node_modules/.bin"
+run = "eslint . --max-warnings 0 --concurrency 4"
+
+[tasks."lint-fix"]
+run = { task = "lint --fix" }
+
+[tasks.check]
+depends = ["svelte-kit-sync"]
+env._.path = "./node_modules/.bin"
+run = "tsc --noEmit"
+
+[tasks."check-svelte"]
+depends = ["svelte-kit-sync"]
+env._.path = "./node_modules/.bin"
+run = "svelte-check --no-tsconfig --fail-on-warnings"
+
+[tasks.checklist]
+run = [
+  { task = ":install" },
+  { task = ":format" },
+  { task = ":check" },
+  { task = ":test --run" },
+  { task = ":lint" },
+]
--- a/web/package.json
+++ b/web/package.json
@ -0,0 +1,113 @@
+{
+  "name": "immich-web",
+  "version": "2.5.2",
+  "license": "GNU Affero General Public License version 3",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --host 0.0.0.0 --port 3000",
+    "build": "vite build",
+    "build:stats": "BUILD_STATS=true vite build",
+    "package": "svelte-kit package",
+    "preview": "vite preview",
+    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'state_referenced_locally:ignore'",
+    "check:typescript": "tsc --noEmit",
+    "check:watch": "pnpm run check:svelte --watch",
+    "check:code": "pnpm run format && pnpm run lint && pnpm run check:svelte && pnpm run check:typescript",
+    "check:all": "pnpm run check:code && pnpm run test:cov",
+    "lint": "eslint . --max-warnings 0 --concurrency 4",
+    "lint:fix": "pnpm run lint --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
+    "test": "vitest",
+    "test:cov": "vitest --coverage",
+    "test:watch": "vitest dev",
+    "prepare": "svelte-kit sync"
+  },
+  "dependencies": {
+    "@formatjs/icu-messageformat-parser": "^3.0.0",
+    "@immich/justified-layout-wasm": "^0.4.3",
+    "@immich/sdk": "file:../open-api/typescript-sdk",
+    "@immich/ui": "^0.59.0",
+    "@mapbox/mapbox-gl-rtl-text": "0.2.3",
+    "@mdi/js": "^7.4.47",
+    "@photo-sphere-viewer/core": "^5.14.0",
+    "@photo-sphere-viewer/equirectangular-video-adapter": "^5.14.0",
+    "@photo-sphere-viewer/markers-plugin": "^5.14.0",
+    "@photo-sphere-viewer/resolution-plugin": "^5.14.0",
+    "@photo-sphere-viewer/settings-plugin": "^5.14.0",
+    "@photo-sphere-viewer/video-plugin": "^5.14.0",
+    "@types/geojson": "^7946.0.16",
+    "@zoom-image/core": "^0.41.0",
+    "@zoom-image/svelte": "^0.3.0",
+    "dom-to-image": "^2.6.0",
+    "fabric": "^6.5.4",
+    "geo-coordinates-parser": "^1.7.4",
+    "geojson": "^0.5.0",
+    "handlebars": "^4.7.8",
+    "happy-dom": "^20.0.0",
+    "intl-messageformat": "^11.0.0",
+    "justified-layout": "^4.1.0",
+    "lodash-es": "^4.17.21",
+    "luxon": "^3.4.4",
+    "maplibre-gl": "^5.6.2",
+    "pmtiles": "^4.3.0",
+    "qrcode": "^1.5.4",
+    "simple-icons": "^15.15.0",
+    "socket.io-client": "~4.8.0",
+    "svelte-gestures": "^5.2.2",
+    "svelte-i18n": "^4.0.1",
+    "svelte-jsoneditor": "^3.10.0",
+    "svelte-maplibre": "^1.2.5",
+    "svelte-persisted-store": "^0.12.0",
+    "tabbable": "^6.2.0",
+    "thumbhash": "^0.1.1",
+    "transformation-matrix": "^3.1.0",
+    "uplot": "^1.6.32"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@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/enhanced-img": "^0.9.0",
+    "@sveltejs/kit": "^2.27.1",
+    "@sveltejs/vite-plugin-svelte": "6.2.4",
+    "@tailwindcss/vite": "^4.1.7",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/svelte": "^5.2.8",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/chromecast-caf-sender": "^1.0.11",
+    "@types/dom-to-image": "^2.6.7",
+    "@types/justified-layout": "^4.1.4",
+    "@types/lodash-es": "^4.17.12",
+    "@types/luxon": "^3.4.2",
+    "@types/qrcode": "^1.5.5",
+    "@vitest/coverage-v8": "^3.0.0",
+    "dotenv": "^17.0.0",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-compat": "^6.0.2",
+    "eslint-plugin-svelte": "^3.12.4",
+    "eslint-plugin-unicorn": "^62.0.0",
+    "factory.ts": "^1.4.1",
+    "globals": "^16.0.0",
+    "happy-dom": "^20.0.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-organize-imports": "^4.0.0",
+    "prettier-plugin-sort-json": "^4.1.1",
+    "prettier-plugin-svelte": "^3.3.3",
+    "rollup-plugin-visualizer": "^6.0.0",
+    "svelte": "5.48.0",
+    "svelte-check": "^4.1.5",
+    "svelte-eslint-parser": "^1.3.3",
+    "tailwindcss": "^4.1.7",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.2",
+    "vitest": "^3.0.0"
+  },
+  "volta": {
+    "node": "24.13.0"
+  }
+}
--- a/web/src/app.css
+++ b/web/src/app.css
@ -0,0 +1,173 @@
+@import 'tailwindcss';
+@import '@immich/ui/theme/default.css';
+@source "../node_modules/@immich/ui";
+/* @import '/usr/ui/dist/theme/default.css'; */
+
+@utility immich-form-input {
+  @apply bg-gray-100 ring-1 ring-gray-200 transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900 flex w-full items-center rounded-lg disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 flex-1 py-2.5 text-base pl-4 pr-4;
+}
+
+@utility immich-form-label {
+  @apply font-medium text-gray-500 dark:text-gray-300;
+}
+
+@utility immich-scrollbar {
+  /* width */
+  scrollbar-width: thin;
+}
+
+@utility scrollbar-hidden {
+  /* Hidden scrollbar */
+  /* width */
+  scrollbar-width: none;
+}
+
+@utility scrollbar-stable {
+  scrollbar-gutter: stable both-edges;
+}
+
+@utility grid-auto-fit-* {
+  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--spacing) * --value(number)), 100%), 1fr));
+}
+
+@utility grid-auto-fill-* {
+  grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--spacing) * --value(number)), 100%), 1fr));
+}
+
+@custom-variant dark (&:where(.dark, .dark *):not(.light));
+
+@theme inline {
+  --color-immich-primary: rgb(var(--immich-primary));
+  --color-immich-bg: rgb(var(--immich-bg));
+  --color-immich-fg: rgb(var(--immich-fg));
+  --color-immich-gray: rgb(var(--immich-gray));
+
+  --color-immich-dark-primary: rgb(var(--immich-dark-primary));
+  --color-immich-dark-bg: rgb(var(--immich-dark-bg));
+  --color-immich-dark-fg: rgb(var(--immich-dark-fg));
+  --color-immich-dark-gray: rgb(var(--immich-dark-gray));
+}
+
+@theme {
+  --font-mono: 'GoogleSansCode', monospace;
+
+  --spacing-18: 4.5rem;
+
+  --breakpoint-tall: 800px;
+  --breakpoint-2xl: 1535px;
+  --breakpoint-xl: 1279px;
+  --breakpoint-lg: 1023px;
+  --breakpoint-md: 767px;
+  --breakpoint-sm: 639px;
+  --breakpoint-sidebar: 850px;
+}
+
+@layer base {
+  :root {
+    /* light */
+    --immich-primary: 66 80 175;
+    --immich-bg: 255 255 255;
+    --immich-fg: 0 0 0;
+
+    /* dark */
+    --immich-dark-primary: 172 203 250;
+    --immich-dark-bg: 10 10 10;
+    --immich-dark-fg: 229 231 235;
+    --immich-dark-gray: 33 33 33;
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@layer utilities {
+  @font-face {
+    font-family: 'GoogleSans';
+    src: url('$lib/assets/fonts/GoogleSans/GoogleSans.ttf') format('truetype-variations');
+    font-weight: 410 900;
+    font-style: normal;
+    ascent-override: 106.25%;
+    size-adjust: 106.25%;
+  }
+
+  @font-face {
+    font-family: 'GoogleSansCode';
+    src: url('$lib/assets/fonts/GoogleSansCode/GoogleSansCode.ttf') format('truetype-variations');
+    font-weight: 1 900;
+    font-style: monospace;
+  }
+
+  :root {
+    font-family: 'GoogleSans', sans-serif;
+    letter-spacing: 0.1px;
+
+    /* Used by layouts to ensure proper spacing between navbar and content */
+    --navbar-height: calc(4.5rem + 4px);
+    --navbar-height-md: calc(4.5rem + 4px - 14px);
+  }
+
+  :root.dark {
+    color-scheme: dark;
+  }
+
+  :root:not(.dark) {
+    color-scheme: light;
+  }
+
+  html {
+    height: 100%;
+    width: 100%;
+  }
+
+  html::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  /* Track */
+  html::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 16px;
+  }
+
+  /* Handle */
+  html::-webkit-scrollbar-thumb {
+    background: rgba(85, 86, 87, 0.408);
+    border-radius: 16px;
+  }
+
+  /* Handle on hover */
+  html::-webkit-scrollbar-thumb:hover {
+    background: #4250afad;
+    border-radius: 16px;
+  }
+
+  body {
+    margin: 0;
+    color: #3a3a3a;
+  }
+
+  input:focus-visible {
+    outline-offset: 0px !important;
+    outline: none !important;
+  }
+
+  .text-white-shadow {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  }
+
+  .icon-white-drop-shadow {
+    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
+  }
+}
+
+.maplibregl-popup {
+  .maplibregl-popup-tip {
+    @apply border-t-subtle! translate-y-[-1px];
+  }
+
+  .maplibregl-popup-content {
+    @apply bg-subtle rounded-lg;
+  }
+}
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@ -0,0 +1,57 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare namespace App {
+  interface PageData {
+    meta: {
+      title: string;
+      description?: string;
+      imageUrl?: string;
+    };
+  }
+
+  interface Error {
+    message: string;
+    stack?: string;
+    code?: string | number;
+  }
+}
+
+declare module '$env/static/public' {
+  export const PUBLIC_IMMICH_PAY_HOST: string;
+  export const PUBLIC_IMMICH_BUY_HOST: string;
+}
+
+interface Element {
+  // Make optional, because it's unavailable on iPhones.
+  requestFullscreen?(options?: FullscreenOptions): Promise<void>;
+}
+
+import type en from '$i18n/en.json';
+import 'svelte-i18n';
+
+type NestedKeys<T, K = keyof T> = K extends keyof T & string
+  ? `${K}` | (T[K] extends object ? `${K}.${NestedKeys<T[K]>}` : never)
+  : never;
+
+declare module 'svelte-i18n' {
+  import type { InterpolationValues } from '$lib/elements/format-message.svelte';
+  import type { Readable } from 'svelte/store';
+
+  type Translations = NestedKeys<typeof en>;
+
+  interface MessageObject {
+    id: Translations;
+    locale?: string;
+    format?: string;
+    default?: string;
+    values?: InterpolationValues;
+  }
+
+  type MessageFormatter = (id: Translations | MessageObject, options?: Omit<MessageObject, 'id'>) => string;
+
+  const format: Readable<MessageFormatter>;
+  const t: Readable<MessageFormatter>;
+  const _: Readable<MessageFormatter>;
+}
--- a/web/src/app.html
+++ b/web/src/app.html
@ -0,0 +1,166 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- (used for SSR) -->
+    <!-- metadata:tags -->
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png" />
+    <link rel="icon" type="image/png" sizes="144x144" href="/favicon-144.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" />
+    <link rel="preload" as="font" type="font/ttf" href="%app.font%" crossorigin="anonymous" />
+    <link rel="preload" as="font" type="font/ttf" href="%app.monofont%" crossorigin="anonymous" />
+    %sveltekit.head%
+    <style>
+      /* prevent FOUC */
+      html {
+        height: 100%;
+        width: 100%;
+      }
+
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+      }
+
+      @keyframes delayedVisibility {
+        to {
+          visibility: visible;
+        }
+      }
+
+      @keyframes loadspin {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      #stencil {
+        --stencil-width: 150px;
+        display: flex;
+        width: var(--stencil-width);
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: calc(50vh - var(--stencil-width) / 2);
+        margin-bottom: 100vh;
+        place-items: center;
+        justify-content: center;
+        overflow: hidden;
+        visibility: hidden;
+        animation:
+          0s linear 0.3s forwards delayedVisibility,
+          loadspin 8s linear infinite;
+      }
+
+      .bg-immich-bg {
+        background-color: white;
+      }
+
+      .dark .dark\:bg-immich-dark-bg {
+        background-color: black;
+      }
+    </style>
+    <script>
+      /**
+       * Prevent FOUC on page load.
+       */
+      const colorThemeKeyName = 'color-theme';
+
+      let theme = localStorage.getItem(colorThemeKeyName);
+      if (!theme) {
+        theme = { value: 'light', system: true };
+      } else if (theme === 'dark' || theme === 'light') {
+        theme = { value: theme, system: false };
+        localStorage.setItem(colorThemeKeyName, JSON.stringify(theme));
+      } else {
+        theme = JSON.parse(theme);
+      }
+
+      let themeValue = theme.value;
+      if (theme.system) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          themeValue = 'dark';
+        } else {
+          themeValue = 'light';
+        }
+      }
+
+      if (themeValue === 'light') {
+        document.documentElement.classList.remove('dark');
+      } else {
+        document.documentElement.classList.add('dark');
+      }
+    </script>
+
+    <link rel="stylesheet" href="/custom.css" />
+  </head>
+
+  <noscript
+    class="absolute z-1000 flex h-screen w-screen place-content-center place-items-center bg-immich-bg dark:bg-immich-dark-bg dark:text-immich-dark-fg"
+  >
+    To use Immich, you must enable JavaScript or use a JavaScript compatible browser.
+  </noscript>
+
+  <body class="bg-light text-dark">
+    <div id="stencil">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792">
+        <style type="text/css">
+          .st0 {
+            fill: #fa2921;
+          }
+          .st1 {
+            fill: #ed79b5;
+          }
+          .st2 {
+            fill: #ffb400;
+          }
+          .st3 {
+            fill: #1e83f7;
+          }
+          .st4 {
+            fill: #18c249;
+          }
+        </style>
+        <g>
+          <path
+            class="st0"
+            d="M375.48,267.63c38.64,34.21,69.78,70.87,89.82,105.42c34.42-61.56,57.42-134.71,57.71-181.3
+		c0-0.33,0-0.63,0-0.91c0-68.94-68.77-95.77-128.01-95.77s-128.01,26.83-128.01,95.77c0,0.94,0,2.2,0,3.72
+		C300.01,209.24,339.15,235.47,375.48,267.63z"
+          />
+          <path
+            class="st1"
+            d="M164.7,455.63c24.15-26.87,61.2-55.99,103.01-80.61c44.48-26.18,88.97-44.47,128.02-52.84
+		c-47.91-51.76-110.37-96.24-154.6-110.91c-0.31-0.1-0.6-0.19-0.86-0.28c-65.57-21.3-112.34,35.81-130.64,92.15
+		c-18.3,56.34-14.04,130.04,51.53,151.34C162.05,454.77,163.25,455.16,164.7,455.63z"
+          />
+          <path
+            class="st2"
+            d="M681.07,302.19c-18.3-56.34-65.07-113.45-130.64-92.15c-0.9,0.29-2.1,0.68-3.54,1.15
+		c-3.75,35.93-16.6,81.27-35.96,125.76c-20.59,47.32-45.84,88.27-72.51,118c69.18,13.72,145.86,12.98,190.26-1.14
+		c0.31-0.1,0.6-0.2,0.86-0.28C695.11,432.22,699.37,358.52,681.07,302.19z"
+          />
+          <path
+            class="st3"
+            d="M336.54,510.71c-11.15-50.39-14.8-98.36-10.7-138.08c-64.03,29.57-125.63,75.23-153.26,112.76
+		c-0.19,0.26-0.37,0.51-0.53,0.73c-40.52,55.78-0.66,117.91,47.27,152.72c47.92,34.82,119.33,53.54,159.86-2.24
+		c0.56-0.76,1.3-1.78,2.19-3.01C363.28,602.32,347.02,558.08,336.54,510.71z"
+          />
+          <path
+            class="st4"
+            d="M617.57,482.52c-35.33,7.54-82.42,9.33-130.72,4.66c-51.37-4.96-98.11-16.32-134.63-32.5
+		c8.33,70.03,32.73,142.73,59.88,180.6c0.19,0.26,0.37,0.51,0.53,0.73c40.52,55.78,111.93,37.06,159.86,2.24
+		c47.92-34.82,87.79-96.95,47.27-152.72C619.2,484.77,618.46,483.75,617.57,482.52z"
+          />
+        </g>
+      </svg>
+    </div>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>
--- a/web/src/hooks.client.ts
+++ b/web/src/hooks.client.ts
@ -0,0 +1,37 @@
+import { isHttpError, type ApiHttpError } from '@immich/sdk';
+import type { HandleClientError } from '@sveltejs/kit';
+
+const DEFAULT_MESSAGE = 'Hmm, not sure about that. Check the logs or open a ticket?';
+
+const parseHTTPError = (httpError: ApiHttpError) => {
+  const statusCode = httpError?.status || httpError?.data?.statusCode || 500;
+  const message = httpError?.data?.message || (httpError?.data && String(httpError.data)) || httpError?.message;
+
+  console.log({
+    status: statusCode,
+    response: httpError?.data || 'No data',
+  });
+
+  return {
+    message: message || DEFAULT_MESSAGE,
+    code: statusCode,
+    stack: httpError?.stack,
+  };
+};
+
+const parseError = (error: unknown, status: number, message: string) => {
+  if (isHttpError(error)) {
+    return parseHTTPError(error);
+  }
+
+  return {
+    message: (error as Error)?.message || message || DEFAULT_MESSAGE,
+    code: status,
+  };
+};
+
+export const handleError: HandleClientError = ({ error, status, message }) => {
+  const result = parseError(error, status, message);
+  console.error(`[hooks.client.ts]:handleError ${result.message}`, error);
+  return result;
+};
--- a/web/src/hooks.server.ts
+++ b/web/src/hooks.server.ts
@ -0,0 +1,12 @@
+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';
+
+// only used during the build to replace the variables from app.html
+export const handle = (async ({ event, resolve }) => {
+  return resolve(event, {
+    transformPageChunk: ({ html }) => {
+      return html.replace('%app.font%', GoogleSans).replace('%app.monofont%', GoogleSansCode);
+    },
+  });
+}) satisfies Handle;
--- a/web/src/lib/mocks/animate.mock.ts
+++ b/web/src/lib/mocks/animate.mock.ts
@ -0,0 +1,17 @@
+import { tick } from 'svelte';
+import { vi } from 'vitest';
+
+export const getAnimateMock = () =>
+  vi.fn().mockImplementation(() => {
+    let onfinish: (() => void) | null = null;
+    void tick().then(() => onfinish?.());
+
+    return {
+      set onfinish(fn: () => void) {
+        onfinish = fn;
+      },
+      cancel() {
+        onfinish = null;
+      },
+    };
+  });
--- a/web/src/lib/mocks/intersection-observer.mock.ts
+++ b/web/src/lib/mocks/intersection-observer.mock.ts
@ -0,0 +1,9 @@
+import { vi } from 'vitest';
+
+export const getIntersectionObserverMock = () =>
+  vi.fn(() => ({
+    disconnect: vi.fn(),
+    observe: vi.fn(),
+    takeRecords: vi.fn(),
+    unobserve: vi.fn(),
+  }));
--- a/web/src/lib/mocks/jsdom-url.mock.ts
+++ b/web/src/lib/mocks/jsdom-url.mock.ts
@ -0,0 +1,8 @@
+const createObjectURLMock = vi.fn();
+
+Object.defineProperty(URL, 'createObjectURL', {
+  writable: true,
+  value: createObjectURLMock,
+});
+
+export { createObjectURLMock };
--- a/web/src/lib/mocks/sdk.mock.ts
+++ b/web/src/lib/mocks/sdk.mock.ts
@ -0,0 +1,18 @@
+import * as sdk from '@immich/sdk';
+import type { Mock, MockedObject } from 'vitest';
+
+vi.mock('@immich/sdk', async (originalImport) => {
+  const module = await originalImport<typeof import('@immich/sdk')>();
+
+  const mocks: Record<string, Mock> = {};
+  for (const [key, value] of Object.entries(module)) {
+    if (typeof value === 'function') {
+      mocks[key] = vi.fn();
+    }
+  }
+
+  const mock = { ...module, ...mocks };
+  return { ...mock, default: mock };
+});
+
+export const sdkMock = sdk as MockedObject<typeof sdk>;
--- a/web/src/lib/mocks/visual-viewport.mock.ts
+++ b/web/src/lib/mocks/visual-viewport.mock.ts
@ -0,0 +1,9 @@
+export const getVisualViewportMock = () => ({
+  height: window.innerHeight,
+  width: window.innerWidth,
+  scale: 1,
+  offsetLeft: 0,
+  offsetTop: 0,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+});
--- a/web/src/lib/actions/test/focus-trap-test.svelte
+++ b/web/src/lib/actions/test/focus-trap-test.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+  import { focusTrap } from '$lib/actions/focus-trap';
+
+  interface Props {
+    show: boolean;
+    active?: boolean;
+  }
+
+  let { show = $bindable(), active = $bindable() }: Props = $props();
+</script>
+
+<button type="button" onclick={() => (show = true)}>Open</button>
+
+{#if show}
+  <div use:focusTrap={{ active }}>
+    <div>
+      <span>text</span>
+      <button data-testid="one" type="button" onclick={() => (show = false)}>Close</button>
+    </div>
+    <input data-testid="two" disabled />
+    <input data-testid="three" />
+  </div>
+{/if}
--- a/web/src/lib/actions/test/focus-trap.spec.ts
+++ b/web/src/lib/actions/test/focus-trap.spec.ts
@ -0,0 +1,51 @@
+import FocusTrapTest from '$lib/actions/__test__/focus-trap-test.svelte';
+import { setDefaultTabbleOptions } from '$lib/utils/focus-util';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
+
+setDefaultTabbleOptions({ displayCheck: 'none' });
+
+describe('focusTrap action', () => {
+  const user = userEvent.setup();
+
+  it('sets focus to the first focusable element', async () => {
+    render(FocusTrapTest, { show: true });
+    await tick();
+    expect(document.activeElement).toEqual(screen.getByTestId('one'));
+  });
+
+  it('should not set focus if inactive', async () => {
+    render(FocusTrapTest, { show: true, active: false });
+    await tick();
+    expect(document.activeElement).toBe(document.body);
+  });
+
+  it('supports backward focus wrapping', async () => {
+    render(FocusTrapTest, { show: true });
+    await tick();
+    await user.keyboard('{Shift}{Tab}{/Shift}');
+    expect(document.activeElement).toEqual(screen.getByTestId('three'));
+  });
+
+  it('supports forward focus wrapping', async () => {
+    render(FocusTrapTest, { show: true });
+    await tick();
+    screen.getByTestId('three').focus();
+    await user.keyboard('{Tab}');
+    expect(document.activeElement).toEqual(screen.getByTestId('one'));
+  });
+
+  it('restores focus to the triggering element', async () => {
+    render(FocusTrapTest, { show: false });
+    const openButton = screen.getByText('Open');
+
+    await user.click(openButton);
+    await tick();
+    expect(document.activeElement).toEqual(screen.getByTestId('one'));
+
+    screen.getByText('Close').click();
+    await tick();
+    expect(document.activeElement).toEqual(openButton);
+  });
+});
--- a/web/src/lib/actions/click-outside.ts
+++ b/web/src/lib/actions/click-outside.ts
@ -0,0 +1,47 @@
+import { matchesShortcut } from '$lib/actions/shortcut';
+import type { ActionReturn } from 'svelte/action';
+
+interface Options {
+  onOutclick?: () => void;
+  onEscape?: () => void;
+}
+
+/**
+ * Calls a function when a click occurs outside of the element, or when the escape key is pressed.
+ * @param node
+ * @param options Object containing onOutclick and onEscape functions
+ * @returns
+ */
+export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn {
+  const { onOutclick, onEscape } = options;
+
+  const handleClick = (event: MouseEvent) => {
+    const targetNode = event.target as Node | null;
+    if (node.contains(targetNode)) {
+      return;
+    }
+
+    onOutclick?.();
+  };
+
+  const handleKey = (event: KeyboardEvent) => {
+    if (!matchesShortcut(event, { key: 'Escape' })) {
+      return;
+    }
+
+    if (onEscape) {
+      event.stopPropagation();
+      onEscape();
+    }
+  };
+
+  document.addEventListener('mousedown', handleClick, false);
+  node.addEventListener('keydown', handleKey, false);
+
+  return {
+    destroy() {
+      document.removeEventListener('mousedown', handleClick, false);
+      node.removeEventListener('keydown', handleKey, false);
+    },
+  };
+}
--- a/web/src/lib/actions/context-menu-navigation.ts
+++ b/web/src/lib/actions/context-menu-navigation.ts
@ -0,0 +1,112 @@
+import { shortcuts } from '$lib/actions/shortcut';
+import { tick } from 'svelte';
+import type { Action } from 'svelte/action';
+
+interface Options {
+  /**
+   * A function that is called when the dropdown should be closed.
+   */
+  closeDropdown: () => void;
+  /**
+   * The container element that with direct children that should be navigated.
+   */
+  container?: HTMLElement;
+  /**
+   * Indicates if the dropdown is open.
+   */
+  isOpen: boolean;
+  /**
+   * Override the default behavior for the escape key.
+   */
+  onEscape?: (event: KeyboardEvent) => void;
+  /**
+   * A function that is called when the dropdown should be opened.
+   */
+  openDropdown?: (event: KeyboardEvent) => void;
+  /**
+   * The id of the currently selected element.
+   */
+  selectedId: string | undefined;
+  /**
+   * A function that is called when the selection changes, to notify consumers of the new selected id.
+   */
+  selectionChanged: (id: string | undefined) => void;
+}
+
+export const contextMenuNavigation: Action<HTMLElement, Options> = (node, options: Options) => {
+  const getCurrentElement = () => {
+    const { container, selectedId: activeId } = options;
+    return container?.querySelector(`#${activeId}`) as HTMLElement | null;
+  };
+
+  const close = () => {
+    const { closeDropdown, selectionChanged } = options;
+    selectionChanged(undefined);
+    closeDropdown();
+  };
+
+  const moveSelection = async (direction: 'up' | 'down', event: KeyboardEvent) => {
+    const { selectionChanged, container, openDropdown } = options;
+    if (openDropdown) {
+      openDropdown(event);
+      await tick();
+    }
+
+    if (!container) {
+      return;
+    }
+
+    const children = Array.from(container.children).filter((child) => child.tagName !== 'HR') as HTMLElement[];
+    if (children.length === 0) {
+      return;
+    }
+
+    const currentEl = getCurrentElement();
+    const currentIndex = currentEl ? children.indexOf(currentEl) : -1;
+    const directionFactor = (direction === 'up' ? -1 : 1) + (direction === 'up' && currentIndex === -1 ? 1 : 0);
+    const newIndex = (currentIndex + directionFactor + children.length) % children.length;
+    const selectedNode = children[newIndex];
+    selectedNode?.scrollIntoView({ block: 'nearest' });
+
+    selectionChanged(selectedNode?.id);
+  };
+
+  const onEscape = (event: KeyboardEvent) => {
+    const { onEscape } = options;
+    if (onEscape) {
+      onEscape(event);
+      return;
+    }
+    event.stopPropagation();
+    close();
+  };
+
+  const handleClick = (event: KeyboardEvent) => {
+    const { selectedId, isOpen, closeDropdown } = options;
+    if (isOpen && !selectedId) {
+      closeDropdown();
+      return;
+    }
+    if (!selectedId) {
+      void moveSelection('down', event);
+      return;
+    }
+    const currentEl = getCurrentElement();
+    currentEl?.click();
+  };
+
+  const { destroy } = shortcuts(node, [
+    { shortcut: { key: 'ArrowUp' }, onShortcut: (event) => moveSelection('up', event) },
+    { shortcut: { key: 'ArrowDown' }, onShortcut: (event) => moveSelection('down', event) },
+    { shortcut: { key: 'Escape' }, onShortcut: (event) => onEscape(event) },
+    { shortcut: { key: ' ' }, onShortcut: (event) => handleClick(event) },
+    { shortcut: { key: 'Enter' }, onShortcut: (event) => handleClick(event) },
+  ]);
+
+  return {
+    update(newOptions) {
+      options = newOptions;
+    },
+    destroy,
+  };
+};
--- a/web/src/lib/actions/drag-and-drop.ts
+++ b/web/src/lib/actions/drag-and-drop.ts
@ -0,0 +1,118 @@
+export interface DragAndDropOptions {
+  index: number;
+  onDragStart?: (index: number) => void;
+  onDragEnter?: (index: number) => void;
+  onDrop?: (e: DragEvent, index: number) => void;
+  onDragEnd?: () => void;
+  isDragging?: boolean;
+  isDragOver?: boolean;
+}
+
+export function dragAndDrop(node: HTMLElement, options: DragAndDropOptions) {
+  let { index, onDragStart, onDragEnter, onDrop, onDragEnd, isDragging, isDragOver } = options;
+
+  const isFormElement = (element: HTMLElement) => {
+    return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT';
+  };
+
+  const handleDragStart = (e: DragEvent) => {
+    // Prevent drag if it originated from an input, textarea, or select element
+    const target = e.target as HTMLElement;
+    if (isFormElement(target)) {
+      e.preventDefault();
+      return;
+    }
+    onDragStart?.(index);
+  };
+
+  const handleDragEnter = () => {
+    onDragEnter?.(index);
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    onDrop?.(e, index);
+  };
+
+  const handleDragEnd = () => {
+    onDragEnd?.();
+  };
+
+  // Disable draggable when focusing on form elements (fixes Firefox input interaction)
+  const handleFocusIn = (e: FocusEvent) => {
+    const target = e.target as HTMLElement;
+    if (isFormElement(target)) {
+      node.setAttribute('draggable', 'false');
+    }
+  };
+
+  const handleFocusOut = (e: FocusEvent) => {
+    const target = e.target as HTMLElement;
+    if (isFormElement(target)) {
+      node.setAttribute('draggable', 'true');
+    }
+  };
+
+  node.setAttribute('draggable', 'true');
+  node.setAttribute('role', 'button');
+  node.setAttribute('tabindex', '0');
+
+  node.addEventListener('dragstart', handleDragStart);
+  node.addEventListener('dragenter', handleDragEnter);
+  node.addEventListener('dragover', handleDragOver);
+  node.addEventListener('drop', handleDrop);
+  node.addEventListener('dragend', handleDragEnd);
+  node.addEventListener('focusin', handleFocusIn);
+  node.addEventListener('focusout', handleFocusOut);
+
+  // Update classes based on drag state
+  const updateClasses = (dragging: boolean, dragOver: boolean) => {
+    // Remove all drag-related classes first
+    node.classList.remove('opacity-50', 'border-gray-400', 'dark:border-gray-500', 'border-solid');
+
+    // Add back only the active ones
+    if (dragging) {
+      node.classList.add('opacity-50');
+    }
+
+    if (dragOver) {
+      node.classList.add('border-gray-400', 'dark:border-gray-500', 'border-solid');
+      node.classList.remove('border-transparent');
+    } else {
+      node.classList.add('border-transparent');
+    }
+  };
+
+  updateClasses(isDragging || false, isDragOver || false);
+
+  return {
+    update(newOptions: DragAndDropOptions) {
+      index = newOptions.index;
+      onDragStart = newOptions.onDragStart;
+      onDragEnter = newOptions.onDragEnter;
+      onDrop = newOptions.onDrop;
+      onDragEnd = newOptions.onDragEnd;
+
+      const newIsDragging = newOptions.isDragging || false;
+      const newIsDragOver = newOptions.isDragOver || false;
+
+      if (newIsDragging !== isDragging || newIsDragOver !== isDragOver) {
+        isDragging = newIsDragging;
+        isDragOver = newIsDragOver;
+        updateClasses(isDragging, isDragOver);
+      }
+    },
+    destroy() {
+      node.removeEventListener('dragstart', handleDragStart);
+      node.removeEventListener('dragenter', handleDragEnter);
+      node.removeEventListener('dragover', handleDragOver);
+      node.removeEventListener('drop', handleDrop);
+      node.removeEventListener('dragend', handleDragEnd);
+      node.removeEventListener('focusin', handleFocusIn);
+      node.removeEventListener('focusout', handleFocusOut);
+    },
+  };
+}
--- a/web/src/lib/actions/focus-outside.ts
+++ b/web/src/lib/actions/focus-outside.ts
@ -0,0 +1,29 @@
+interface Options {
+  onFocusOut?: (event: FocusEvent) => void;
+}
+
+/**
+ * Calls a function when focus leaves the element.
+ * @param node
+ * @param options Object containing onFocusOut function
+ */
+export function focusOutside(node: HTMLElement, options: Options = {}) {
+  const { onFocusOut } = options;
+
+  const handleFocusOut = (event: FocusEvent) => {
+    if (
+      onFocusOut &&
+      (!event.relatedTarget || (event.relatedTarget instanceof Node && !node.contains(event.relatedTarget as Node)))
+    ) {
+      onFocusOut(event);
+    }
+  };
+
+  node.addEventListener('focusout', handleFocusOut);
+
+  return {
+    destroy() {
+      node.removeEventListener('focusout', handleFocusOut);
+    },
+  };
+}
--- a/web/src/lib/actions/focus-trap.ts
+++ b/web/src/lib/actions/focus-trap.ts
@ -0,0 +1,134 @@
+import { getTabbable } from '$lib/utils/focus-util';
+import { tick } from 'svelte';
+
+interface Options {
+  /**
+   * Set whether the trap is active or not.
+   */
+  active?: boolean;
+}
+
+export function focusTrap(container: HTMLElement, options?: Options) {
+  const triggerElement = document.activeElement;
+
+  // Create sentinel nodes
+  const startSentinel = document.createElement('div');
+  startSentinel.setAttribute('tabindex', '0');
+  startSentinel.dataset.focusTrap = 'start';
+
+  const backupSentinel = document.createElement('div');
+  backupSentinel.setAttribute('tabindex', '-1');
+  backupSentinel.dataset.focusTrap = 'backup';
+
+  const endSentinel = document.createElement('div');
+  endSentinel.setAttribute('tabindex', '0');
+  endSentinel.dataset.focusTrap = 'end';
+
+  // Insert sentinel nodes into the container
+  container.insertBefore(startSentinel, container.firstChild);
+  container.insertBefore(backupSentinel, startSentinel.nextSibling);
+  container.append(endSentinel);
+
+  const withDefaults = (options?: Options) => {
+    return {
+      active: options?.active ?? true,
+    };
+  };
+
+  const setInitialFocus = async () => {
+    // Use tick() to ensure focus trap works correctly inside <Portal />
+    await tick();
+
+    // Get focusable elements, excluding our sentinel nodes
+    const allTabbable = getTabbable(container, false);
+    const focusableElement = allTabbable.find((el) => !Object.hasOwn(el.dataset, 'focusTrap'));
+
+    if (focusableElement) {
+      focusableElement.focus();
+    } else {
+      backupSentinel.setAttribute('tabindex', '-1');
+      // No focusable elements found, use backup sentinel as fallback
+      backupSentinel.focus();
+    }
+  };
+
+  if (withDefaults(options).active) {
+    void setInitialFocus();
+  }
+
+  const getFocusableElements = () => {
+    // Get all tabbable elements except our sentinel nodes
+    const allTabbable = getTabbable(container);
+    const focusableElements = allTabbable.filter((el) => !Object.hasOwn(el.dataset, 'focusTrap'));
+
+    return [
+      focusableElements.at(0), //
+      focusableElements.at(-1),
+    ];
+  };
+
+  // Add focus event listeners to sentinel nodes
+  const handleStartFocus = () => {
+    if (withDefaults(options).active) {
+      const [, lastElement] = getFocusableElements();
+      // If no elements, stay on backup sentinel
+      if (lastElement) {
+        lastElement.focus();
+      } else {
+        backupSentinel.focus();
+      }
+    }
+  };
+
+  const handleBackupFocus = () => {
+    // Backup sentinel keeps focus when there are no other focusable elements
+    if (withDefaults(options).active) {
+      const [firstElement] = getFocusableElements();
+      // Only move focus if there are actual focusable elements
+      if (firstElement) {
+        firstElement.focus();
+      }
+      // Otherwise, focus stays on backup sentinel
+    }
+  };
+
+  const handleEndFocus = () => {
+    if (withDefaults(options).active) {
+      const [firstElement] = getFocusableElements();
+      // If no elements, move to backup sentinel
+      if (firstElement) {
+        firstElement.focus();
+      } else {
+        backupSentinel.focus();
+      }
+    }
+  };
+
+  startSentinel.addEventListener('focus', handleStartFocus);
+  backupSentinel.addEventListener('focus', handleBackupFocus);
+  endSentinel.addEventListener('focus', handleEndFocus);
+
+  return {
+    update(newOptions?: Options) {
+      options = newOptions;
+      if (withDefaults(options).active) {
+        void setInitialFocus();
+      }
+    },
+    destroy() {
+      // Remove event listeners
+      startSentinel.removeEventListener('focus', handleStartFocus);
+      backupSentinel.removeEventListener('focus', handleBackupFocus);
+      endSentinel.removeEventListener('focus', handleEndFocus);
+
+      // Remove sentinel nodes from DOM
+      startSentinel.remove();
+      backupSentinel.remove();
+      endSentinel.remove();
+
+      if (triggerElement instanceof HTMLElement) {
+        triggerElement.focus();
+      }
+    },
+  };
+}
--- a/web/src/lib/actions/focus.ts
+++ b/web/src/lib/actions/focus.ts
@ -0,0 +1,4 @@
+/** Focus the given element when it is mounted. */
+export const initInput = (element: HTMLInputElement) => {
+  element.focus();
+};
--- a/web/src/lib/actions/intersection-observer.ts
+++ b/web/src/lib/actions/intersection-observer.ts
@ -0,0 +1,156 @@
+type Config = IntersectionObserverActionProperties & {
+  observer?: IntersectionObserver;
+};
+type TrackedProperties = {
+  root?: Element | Document | null;
+  threshold?: number | number[];
+  top?: string;
+  right?: string;
+  bottom?: string;
+  left?: string;
+};
+type OnIntersectCallback = (entryOrElement: IntersectionObserverEntry | HTMLElement) => unknown;
+type OnSeparateCallback = (element: HTMLElement) => unknown;
+type IntersectionObserverActionProperties = {
+  key?: string;
+  disabled?: boolean;
+  /** Function to execute when the element leaves the viewport */
+  onSeparate?: OnSeparateCallback;
+  /** Function to execute when the element enters the viewport */
+  onIntersect?: OnIntersectCallback;
+
+  root?: Element | Document | null;
+  threshold?: number | number[];
+  top?: string;
+  right?: string;
+  bottom?: string;
+  left?: string;
+};
+type TaskKey = HTMLElement | string;
+
+function isEquivalent(a: TrackedProperties, b: TrackedProperties) {
+  return (
+    a?.bottom === b?.bottom &&
+    a?.top === b?.top &&
+    a?.left === b?.left &&
+    a?.right == b?.right &&
+    a?.threshold === b?.threshold &&
+    a?.root === b?.root
+  );
+}
+
+const elementToConfig = new Map<TaskKey, Config>();
+
+const observe = (key: HTMLElement | string, target: HTMLElement, properties: IntersectionObserverActionProperties) => {
+  if (!target.isConnected) {
+    elementToConfig.get(key)?.observer?.unobserve(target);
+    return;
+  }
+  const {
+    root,
+    threshold,
+    top = '0px',
+    right = '0px',
+    bottom = '0px',
+    left = '0px',
+    onSeparate,
+    onIntersect,
+  } = properties;
+  const rootMargin = `${top} ${right} ${bottom} ${left}`;
+  const observer = new IntersectionObserver(
+    (entries: IntersectionObserverEntry[]) => {
+      // This IntersectionObserver is limited to observing a single element, the one the
+      // action is attached to. If there are multiple entries, it means that this
+      // observer is being notified of multiple events that have occurred quickly together,
+      // and the latest element is the one we are interested in.
+
+      entries.sort((a, b) => a.time - b.time);
+
+      const latestEntry = entries.pop();
+      if (latestEntry?.isIntersecting) {
+        onIntersect?.(latestEntry);
+      } else {
+        onSeparate?.(target);
+      }
+    },
+    {
+      rootMargin,
+      threshold,
+      root,
+    },
+  );
+  observer.observe(target);
+  elementToConfig.set(key, { ...properties, observer });
+};
+
+function configure(key: HTMLElement | string, element: HTMLElement, properties: IntersectionObserverActionProperties) {
+  if (properties.disabled) {
+    const config = elementToConfig.get(key);
+    const { observer } = config || {};
+    observer?.unobserve(element);
+    elementToConfig.delete(key);
+  } else {
+    elementToConfig.set(key, properties);
+    observe(key, element, properties);
+  }
+}
+
+function _intersectionObserver(
+  key: HTMLElement | string,
+  element: HTMLElement,
+  properties: IntersectionObserverActionProperties,
+) {
+  configure(key, element, properties);
+  return {
+    update(properties: IntersectionObserverActionProperties) {
+      const config = elementToConfig.get(key);
+      if (!config) {
+        return;
+      }
+      if (isEquivalent(config, properties)) {
+        return;
+      }
+
+      configure(key, element, properties);
+    },
+    destroy: () => {
+      const config = elementToConfig.get(key);
+      const { observer } = config || {};
+      observer?.unobserve(element);
+      elementToConfig.delete(key);
+    },
+  };
+}
+
+/**
+ * Monitors an element's visibility in the viewport and calls functions when it enters or leaves (based on a threshold).
+ * @param element
+ * @param properties One or multiple configurations for the IntersectionObserver(s)
+ * @returns
+ */
+export function intersectionObserver(
+  element: HTMLElement,
+  properties: IntersectionObserverActionProperties | IntersectionObserverActionProperties[],
+) {
+  // svelte doesn't allow multiple use:action directives of the same kind on the same element,
+  // so accept an array when multiple configurations are needed.
+  if (Array.isArray(properties)) {
+    if (!properties.every((p) => p.key)) {
+      throw new Error('Multiple configurations must specify key');
+    }
+    const observers = properties.map((p) => _intersectionObserver(p.key as string, element, p));
+    return {
+      update: (properties: IntersectionObserverActionProperties[]) => {
+        for (const [i, props] of properties.entries()) {
+          observers[i].update(props);
+        }
+      },
+      destroy: () => {
+        for (const observer of observers) {
+          observer.destroy();
+        }
+      },
+    };
+  }
+  return _intersectionObserver(properties.key || element, element, properties);
+}
--- a/web/src/lib/actions/list-navigation.ts
+++ b/web/src/lib/actions/list-navigation.ts
@ -0,0 +1,44 @@
+import { shortcuts } from '$lib/actions/shortcut';
+import type { Action } from 'svelte/action';
+
+/**
+ * Enables keyboard navigation (up and down arrows) for a list of elements.
+ * @param node Element which listens for keyboard events
+ * @param container Element containing the list of elements
+ */
+export const listNavigation: Action<HTMLElement, HTMLElement | undefined> = (
+  node: HTMLElement,
+  container?: HTMLElement,
+) => {
+  const moveFocus = (direction: 'up' | 'down') => {
+    if (!container) {
+      return;
+    }
+
+    const children = Array.from(container?.children);
+    if (children.length === 0) {
+      return;
+    }
+
+    const currentIndex = document.activeElement === null ? -1 : children.indexOf(document.activeElement);
+    const directionFactor = (direction === 'up' ? -1 : 1) + (direction === 'up' && currentIndex === -1 ? 1 : 0);
+    const newIndex = (currentIndex + directionFactor + children.length) % children.length;
+
+    const element = children.at(newIndex);
+    if (element instanceof HTMLElement) {
+      element.focus();
+    }
+  };
+
+  const { destroy } = shortcuts(node, [
+    { shortcut: { key: 'ArrowUp' }, onShortcut: () => moveFocus('up'), ignoreInputFields: false },
+    { shortcut: { key: 'ArrowDown' }, onShortcut: () => moveFocus('down'), ignoreInputFields: false },
+  ]);
+
+  return {
+    update(newContainer) {
+      container = newContainer;
+    },
+    destroy,
+  };
+};
--- a/web/src/lib/actions/resize-observer.ts
+++ b/web/src/lib/actions/resize-observer.ts
@ -0,0 +1,43 @@
+export type OnResizeCallback = (resizeEvent: { target: HTMLElement; width: number; height: number }) => void;
+
+let observer: ResizeObserver;
+let callbacks: WeakMap<HTMLElement, OnResizeCallback>;
+
+/**
+ * Installs a resizeObserver on the given element - when the element changes
+ * size, invokes a callback function with the width/height. Intended as a
+ * replacement for bind:clientWidth and bind:clientHeight in svelte4 which use
+ * an iframe to measure the size of the element, which can be bad for
+ * performance and memory usage. In svelte5, they adapted bind:clientHeight and
+ * bind:clientWidth to use an internal resize observer.
+ *
+ * TODO: When svelte5 is ready, go back to bind:clientWidth and
+ * bind:clientHeight.
+ */
+export function resizeObserver(element: HTMLElement, onResize: OnResizeCallback) {
+  if (!observer) {
+    callbacks = new WeakMap();
+    observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const onResize = callbacks.get(entry.target as HTMLElement);
+        if (onResize) {
+          onResize({
+            target: entry.target as HTMLElement,
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize,
+          });
+        }
+      }
+    });
+  }
+
+  callbacks.set(element, onResize);
+  observer.observe(element);
+
+  return {
+    destroy: () => {
+      callbacks.delete(element);
+      observer.unobserve(element);
+    },
+  };
+}
--- a/web/src/lib/actions/scroll-memory.ts
+++ b/web/src/lib/actions/scroll-memory.ts
@ -0,0 +1,85 @@
+import { navigating } from '$app/stores';
+import { SessionStorageKey } from '$lib/constants';
+import { handlePromiseError } from '$lib/utils';
+
+interface Options {
+  /**
+   * This must be kept the same in all subpages of this route for the scroll memory clearer to work.
+   */
+  routeStartsWith: string;
+  /**
+   * Function to clear additional data/state before scrolling (ex infinite scroll).
+   */
+  beforeClear?: () => void;
+}
+
+interface PageOptions extends Options {
+  /**
+   * Function to save additional data/state before scrolling (ex infinite scroll).
+   */
+  beforeSave?: () => void;
+  /**
+   * Function to load additional data/state before scrolling (ex infinite scroll).
+   */
+  beforeScroll?: () => Promise<void>;
+}
+
+/**
+ * @param node The scroll slot element, typically from {@link UserPageLayout}
+ */
+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);
+      }
+    }
+  });
+
+  handlePromiseError(
+    (async () => {
+      await beforeScroll?.();
+
+      const newScroll = sessionStorage.getItem(SessionStorageKey.SCROLL_POSITION);
+      if (newScroll) {
+        node.scroll({
+          top: Number.parseFloat(newScroll),
+          behavior: 'instant',
+        });
+      }
+      beforeClear?.();
+      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)) {
+      beforeClear?.();
+      sessionStorage.removeItem(SessionStorageKey.SCROLL_POSITION);
+    }
+  });
+
+  return {
+    destroy() {
+      unsubscribeNavigating();
+    },
+  };
+}
--- a/web/src/lib/actions/shortcut.ts
+++ b/web/src/lib/actions/shortcut.ts
@ -0,0 +1,112 @@
+import type { ActionReturn } from 'svelte/action';
+
+export type Shortcut = {
+  key: string;
+  alt?: boolean;
+  ctrl?: boolean;
+  shift?: boolean;
+  meta?: boolean;
+};
+
+export type ShortcutOptions<T = HTMLElement> = {
+  shortcut: Shortcut;
+  /** If true, the event handler will not execute if the event comes from an input field */
+  ignoreInputFields?: boolean;
+  onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
+  preventDefault?: boolean;
+};
+
+export const shortcutLabel = (shortcut: Shortcut) => {
+  let label = '';
+
+  if (shortcut.ctrl) {
+    label += 'Ctrl ';
+  }
+  if (shortcut.alt) {
+    label += 'Alt ';
+  }
+  if (shortcut.meta) {
+    label += 'Cmd ';
+  }
+  if (shortcut.shift) {
+    label += '⇧';
+  }
+  label += shortcut.key.toUpperCase();
+
+  return label;
+};
+
+/** Determines whether an event should be ignored. The event will be ignored if:
+ *  - The element dispatching the event is not the same as the element which the event listener is attached to
+ *  - The element dispatching the event is an input field
+ *  - The element dispatching the event is a map canvas
+ */
+export const shouldIgnoreEvent = (event: KeyboardEvent | ClipboardEvent): boolean => {
+  if (event.target === event.currentTarget) {
+    return false;
+  }
+  const type = (event.target as HTMLInputElement).type;
+  return (
+    ['textarea', 'text', 'date', 'datetime-local', 'email', 'password'].includes(type) ||
+    (event.target instanceof HTMLCanvasElement && event.target.classList.contains('maplibregl-canvas'))
+  );
+};
+
+export const matchesShortcut = (event: KeyboardEvent, shortcut: Shortcut) => {
+  return (
+    shortcut.key.toLowerCase() === event.key.toLowerCase() &&
+    Boolean(shortcut.alt) === event.altKey &&
+    Boolean(shortcut.ctrl) === event.ctrlKey &&
+    Boolean(shortcut.shift) === event.shiftKey &&
+    Boolean(shortcut.meta) === event.metaKey
+  );
+};
+
+/** Bind a single keyboard shortcut to node. */
+export const shortcut = <T extends HTMLElement>(
+  node: T,
+  option: ShortcutOptions<T>,
+): ActionReturn<ShortcutOptions<T>> => {
+  const { update: shortcutsUpdate, destroy } = shortcuts(node, [option]);
+
+  return {
+    update(newOption) {
+      shortcutsUpdate?.([newOption]);
+    },
+    destroy,
+  };
+};
+
+/** Binds multiple keyboard shortcuts to node */
+export const shortcuts = <T extends HTMLElement>(
+  node: T,
+  options: ShortcutOptions<T>[],
+): ActionReturn<ShortcutOptions<T>[]> => {
+  function onKeydown(event: KeyboardEvent) {
+    const ignoreShortcut = shouldIgnoreEvent(event);
+    for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
+      if (ignoreInputFields && ignoreShortcut) {
+        continue;
+      }
+
+      if (matchesShortcut(event, shortcut)) {
+        if (preventDefault) {
+          event.preventDefault();
+        }
+        onShortcut(event as KeyboardEvent & { currentTarget: T });
+        return;
+      }
+    }
+  }
+
+  node.addEventListener('keydown', onKeydown);
+
+  return {
+    update(newOptions) {
+      options = newOptions;
+    },
+    destroy() {
+      node.removeEventListener('keydown', onKeydown);
+    },
+  };
+};
--- a/web/src/lib/actions/thumbhash.ts
+++ b/web/src/lib/actions/thumbhash.ts
@ -0,0 +1,29 @@
+import { decodeBase64 } from '$lib/utils';
+import { thumbHashToRGBA } from 'thumbhash';
+
+/**
+ * Renders a thumbnail onto a canvas from a base64 encoded hash.
+ */
+export function thumbhash(canvas: HTMLCanvasElement, options: { base64ThumbHash: string }) {
+  render(canvas, options);
+
+  return {
+    update(newOptions: { base64ThumbHash: string }) {
+      render(canvas, newOptions);
+    },
+  };
+}
+
+const render = (canvas: HTMLCanvasElement, options: { base64ThumbHash: string }) => {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return;
+  }
+
+  const { w, h, rgba } = thumbHashToRGBA(decodeBase64(options.base64ThumbHash));
+  const pixels = ctx.createImageData(w, h);
+  canvas.width = w;
+  canvas.height = h;
+  pixels.data.set(rgba);
+  ctx.putImageData(pixels, 0, 0);
+};
--- a/web/src/lib/actions/use-actions.ts
+++ b/web/src/lib/actions/use-actions.ts
@ -0,0 +1,67 @@
+/**
+ * @license Apache-2.0
+ * https://github.com/hperrin/svelte-material-ui/blob/master/packages/common/src/internal/useActions.ts
+ */
+
+export type SvelteActionReturnType<P> = {
+  update?: (newParams?: P) => void;
+  destroy?: () => void;
+} | void;
+
+export type SvelteHTMLActionType<P> = (node: HTMLElement, params?: P) => SvelteActionReturnType<P>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type HTMLActionEntry<P = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
+
+export type HTMLActionArray = HTMLActionEntry[];
+
+export type SvelteSVGActionType<P> = (node: SVGElement, params?: P) => SvelteActionReturnType<P>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type SVGActionEntry<P = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
+
+export type SVGActionArray = SVGActionEntry[];
+
+export type ActionArray = HTMLActionArray | SVGActionArray;
+
+export function useActions(node: HTMLElement | SVGElement, actions: ActionArray) {
+  const actionReturns: SvelteActionReturnType<unknown>[] = [];
+
+  if (actions) {
+    for (const actionEntry of actions) {
+      const action = Array.isArray(actionEntry) ? actionEntry[0] : actionEntry;
+      if (Array.isArray(actionEntry) && actionEntry.length > 1) {
+        actionReturns.push(action(node as HTMLElement & SVGElement, actionEntry[1]));
+      } else {
+        actionReturns.push(action(node as HTMLElement & SVGElement));
+      }
+    }
+  }
+
+  return {
+    update(actions: ActionArray) {
+      if ((actions?.length || 0) != actionReturns.length) {
+        throw new Error('You must not change the length of an actions array.');
+      }
+
+      if (actions) {
+        for (const [i, returnEntry] of actionReturns.entries()) {
+          if (returnEntry && returnEntry.update) {
+            const actionEntry = actions[i];
+            if (Array.isArray(actionEntry) && actionEntry.length > 1) {
+              returnEntry.update(actionEntry[1]);
+            } else {
+              returnEntry.update();
+            }
+          }
+        }
+      }
+    },
+
+    destroy() {
+      for (const returnEntry of actionReturns) {
+        returnEntry?.destroy?.();
+      }
+    },
+  };
+}
--- a/web/src/lib/actions/zoom-image.ts
+++ b/web/src/lib/actions/zoom-image.ts
@ -0,0 +1,35 @@
+import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+import { createZoomImageWheel } from '@zoom-image/core';
+
+export const zoomImageAction = (node: HTMLElement, options?: { disabled?: boolean }) => {
+  const zoomInstance = createZoomImageWheel(node, { maxZoom: 10, initialState: assetViewerManager.zoomState });
+
+  const unsubscribes = [
+    assetViewerManager.on('ZoomChange', (state) => zoomInstance.setState(state)),
+    zoomInstance.subscribe(({ state }) => assetViewerManager.onZoomChange(state)),
+  ];
+
+  const stopIfDisabled = (event: Event) => {
+    if (options?.disabled) {
+      event.stopImmediatePropagation();
+    }
+  };
+
+  node.addEventListener('wheel', stopIfDisabled, { capture: true });
+  node.addEventListener('pointerdown', stopIfDisabled, { capture: true });
+
+  node.style.overflow = 'visible';
+  return {
+    update(newOptions?: { disabled?: boolean }) {
+      options = newOptions;
+    },
+    destroy() {
+      for (const unsubscribe of unsubscribes) {
+        unsubscribe();
+      }
+      node.removeEventListener('wheel', stopIfDisabled, { capture: true });
+      node.removeEventListener('pointerdown', stopIfDisabled, { capture: true });
+      zoomInstance.cleanup();
+    },
+  };
+};
--- a/web/src/lib/assets/apple/apple-splash-1125-2436.png
+++ b/web/src/lib/assets/apple/apple-splash-1125-2436.png
--- a/web/src/lib/assets/apple/apple-splash-1136-640.png
+++ b/web/src/lib/assets/apple/apple-splash-1136-640.png
--- a/web/src/lib/assets/apple/apple-splash-1170-2532.png
+++ b/web/src/lib/assets/apple/apple-splash-1170-2532.png
--- a/web/src/lib/assets/apple/apple-splash-1179-2556.png
+++ b/web/src/lib/assets/apple/apple-splash-1179-2556.png
--- a/web/src/lib/assets/apple/apple-splash-1242-2208.png
+++ b/web/src/lib/assets/apple/apple-splash-1242-2208.png
--- a/web/src/lib/assets/apple/apple-splash-1242-2688.png
+++ b/web/src/lib/assets/apple/apple-splash-1242-2688.png
--- a/web/src/lib/assets/apple/apple-splash-1284-2778.png
+++ b/web/src/lib/assets/apple/apple-splash-1284-2778.png
--- a/web/src/lib/assets/apple/apple-splash-1290-2796.png
+++ b/web/src/lib/assets/apple/apple-splash-1290-2796.png
--- a/web/src/lib/assets/apple/apple-splash-1334-750.png
+++ b/web/src/lib/assets/apple/apple-splash-1334-750.png
--- a/web/src/lib/assets/apple/apple-splash-1536-2048.png
+++ b/web/src/lib/assets/apple/apple-splash-1536-2048.png
--- a/web/src/lib/assets/apple/apple-splash-1620-2160.png
+++ b/web/src/lib/assets/apple/apple-splash-1620-2160.png
--- a/web/src/lib/assets/apple/apple-splash-1668-2224.png
+++ b/web/src/lib/assets/apple/apple-splash-1668-2224.png
--- a/web/src/lib/assets/apple/apple-splash-1668-2388.png
+++ b/web/src/lib/assets/apple/apple-splash-1668-2388.png
--- a/web/src/lib/assets/apple/apple-splash-1792-828.png
+++ b/web/src/lib/assets/apple/apple-splash-1792-828.png
--- a/web/src/lib/assets/apple/apple-splash-2048-1536.png
+++ b/web/src/lib/assets/apple/apple-splash-2048-1536.png
--- a/web/src/lib/assets/apple/apple-splash-2048-2732.png
+++ b/web/src/lib/assets/apple/apple-splash-2048-2732.png
--- a/web/src/lib/assets/apple/apple-splash-2160-1620.png
+++ b/web/src/lib/assets/apple/apple-splash-2160-1620.png
--- a/web/src/lib/assets/apple/apple-splash-2208-1242.png
+++ b/web/src/lib/assets/apple/apple-splash-2208-1242.png
--- a/web/src/lib/assets/apple/apple-splash-2224-1668.png
+++ b/web/src/lib/assets/apple/apple-splash-2224-1668.png
--- a/web/src/lib/assets/apple/apple-splash-2388-1668.png
+++ b/web/src/lib/assets/apple/apple-splash-2388-1668.png
--- a/web/src/lib/assets/apple/apple-splash-2436-1125.png
+++ b/web/src/lib/assets/apple/apple-splash-2436-1125.png
--- a/web/src/lib/assets/apple/apple-splash-2532-1170.png
+++ b/web/src/lib/assets/apple/apple-splash-2532-1170.png
--- a/web/src/lib/assets/apple/apple-splash-2556-1179.png
+++ b/web/src/lib/assets/apple/apple-splash-2556-1179.png
--- a/web/src/lib/assets/apple/apple-splash-2688-1242.png
+++ b/web/src/lib/assets/apple/apple-splash-2688-1242.png
--- a/web/src/lib/assets/apple/apple-splash-2732-2048.png
+++ b/web/src/lib/assets/apple/apple-splash-2732-2048.png
--- a/web/src/lib/assets/apple/apple-splash-2778-1284.png
+++ b/web/src/lib/assets/apple/apple-splash-2778-1284.png
--- a/web/src/lib/assets/apple/apple-splash-2796-1290.png
+++ b/web/src/lib/assets/apple/apple-splash-2796-1290.png
--- a/web/src/lib/assets/apple/apple-splash-640-1136.png
+++ b/web/src/lib/assets/apple/apple-splash-640-1136.png
--- a/web/src/lib/assets/apple/apple-splash-750-1334.png
+++ b/web/src/lib/assets/apple/apple-splash-750-1334.png
--- a/web/src/lib/assets/apple/apple-splash-828-1792.png
+++ b/web/src/lib/assets/apple/apple-splash-828-1792.png
--- a/web/src/lib/assets/empty-1.svg
+++ b/web/src/lib/assets/empty-1.svg
--- a/web/src/lib/assets/empty-2.svg
+++ b/web/src/lib/assets/empty-2.svg
--- a/web/src/lib/assets/empty-3.svg
+++ b/web/src/lib/assets/empty-3.svg
--- a/web/src/lib/assets/empty-4.svg
+++ b/web/src/lib/assets/empty-4.svg
@ -0,0 +1 @@
+<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path d="M214.359 475.389c16.42 16.712 47.124 13.189 47.124 13.189s4.064-30.62-12.372-47.322c-16.419-16.712-47.109-13.198-47.109-13.198s-4.063 30.619 12.357 47.331z" fill="url(#a)"/><path d="M639.439 125.517c-17.194 9.808-41.345-.121-41.345-.121s3.743-25.827 20.946-35.623c17.194-9.808 41.335.11 41.335.11s-3.743 25.827-20.936 35.634z" fill="url(#b)"/><path d="M324.812 156.133c-17.672 17.987-50.72 14.194-50.72 14.194s-4.373-32.955 13.316-50.931c17.673-17.987 50.704-14.206 50.704-14.206s4.373 32.956-13.3 50.943z" fill="url(#c)"/><ellipse rx="15.17" ry="15.928" transform="matrix(1 0 0 -1 228.07 341.957)" fill="#E1E4E5"/><circle r="8.5" transform="matrix(1 0 0 -1 478.5 509.5)" fill="#9d9ea3"/><circle r="17.518" transform="matrix(1 0 0 -1 693.518 420.518)" fill="#9d9ea3"/><circle cx="708.183" cy="266.183" r="14.183" fill="#4F4F51"/><circle cx="247.603" cy="225.621" r="12.136" fill="#F8AE9D"/><ellipse cx="316.324" cy="510.867" rx="7.324" ry="6.867" fill="#E1E4E5"/><ellipse cx="664.796" cy="371.388" rx="9.796" ry="9.388" fill="#E1E4E5"/><circle cx="625.378" cy="479.378" r="11.377" fill="#E1E4E5"/><ellipse cx="401.025" cy="114.39" rx="5.309" ry="6.068" fill="#E1E4E5"/><circle cx="661.834" cy="300.834" r="5.58" transform="rotate(105 661.834 300.834)" fill="#E1E4E5"/><circle cx="654.769" cy="226.082" r="7.585" fill="#E1E4E5"/><ellipse cx="254.159" cy="284.946" rx="5.309" ry="4.551" fill="#E1E4E5"/><circle cx="521.363" cy="106.27" r="11.613" transform="rotate(105 521.363 106.27)" fill="#E1E4E5"/><path d="M162.314 308.103h-.149C161.284 320.589 152 320.781 152 320.781s10.238.2 10.238 14.628c0-14.428 10.238-14.628 10.238-14.628s-9.281-.192-10.162-12.678zm531.83-158.512h-.256c-1.518 21.504-17.507 21.835-17.507 21.835s17.632.345 17.632 25.192c0-24.847 17.632-25.192 17.632-25.192s-15.983-.331-17.501-21.835z" fill="#E1E4E5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M553.714 397.505v56.123c0 20.672-16.743 37.416-37.415 37.416H329.22c-20.672 0-37.415-16.744-37.415-37.416V266.55c0-20.672 16.743-37.416 37.415-37.416h56.124" fill="url(#d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M363.07 155.431h214.049c26.28 0 47.566 21.286 47.566 47.566v214.049c0 26.28-21.286 47.566-47.566 47.566H363.07c-26.28 0-47.566-21.286-47.566-47.566V202.997c0-26.28 21.286-47.566 47.566-47.566z" fill="#9d9ea3"/><path d="m425.113 307.765 33.925 33.924 74.038-74.059" stroke="#fff" stroke-width="32.125" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="a" x1="279.871" y1="532.474" x2="161.165" y2="346.391" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient><linearGradient id="b" x1="573.046" y1="156.85" x2="712.364" y2="32.889" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient><linearGradient id="c" x1="254.302" y1="217.573" x2="382.065" y2="17.293" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient><linearGradient id="d" x1="417.175" y1="82.293" x2="425.251" y2="775.957" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient></defs></svg>
--- a/web/src/lib/assets/empty-5.svg
+++ b/web/src/lib/assets/empty-5.svg
@ -0,0 +1 @@
+<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M249.841 115.734v250.041c0 13.572 10.867 24.563 24.287 24.563h147.186l64.25-91.581c3.063-4.369 10.722-4.369 13.786 0l22.494 32.07.175.25.152-.221 48.243-70.046c3.336-4.85 11.695-4.85 15.031 0l63.892 92.779v12.215-250.07c0-13.572-10.897-24.562-24.288-24.562H274.128c-13.42 0-24.287 10.99-24.287 24.562z" fill="#9d9ea3"/><path d="M362.501 281.935c-34.737 0-62.896-28.16-62.896-62.897 0-34.736 28.159-62.896 62.896-62.896s62.897 28.16 62.897 62.896c0 34.737-28.16 62.897-62.897 62.897z" fill="#fff"/><path d="M449.176 445.963H259.725c-7.79 0-14.188-6.399-14.188-14.188 0-7.882 6.398-14.281 14.188-14.281h189.451c7.882 0 14.28 6.399 14.28 14.281 0 7.789-6.398 14.188-14.28 14.188zm189.543.002H501.662c-7.882 0-14.281-6.399-14.281-14.281 0-7.882 6.399-14.281 14.281-14.281h137.057c7.883 0 14.281 6.399 14.281 14.281 0 7.882-6.398 14.281-14.281 14.281zm-298.503 62.592h-80.491c-7.79 0-14.188-6.398-14.188-14.188 0-7.882 6.398-14.281 14.188-14.281h80.491c7.882 0 14.281 6.399 14.281 14.281 0 7.79-6.399 14.188-14.281 14.188zm298.503.002H388.065c-7.882 0-14.28-6.398-14.28-14.28s6.398-14.281 14.28-14.281h250.654c7.883 0 14.281 6.399 14.281 14.281 0 7.882-6.398 14.28-14.281 14.28z" fill="#E1E4E5"/></svg>
--- a/web/src/lib/assets/empty-folders.svg
+++ b/web/src/lib/assets/empty-folders.svg
@ -0,0 +1 @@
+<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path d="M718.697 359.789c2.347 69.208-149.828 213.346-331.607 165.169-84.544-22.409-76.298-62.83-139.698-114.488-37.789-30.789-92.638-53.5-106.885-99.138-12.309-39.393-3.044-82.222 20.77-110.466 53.556-63.52 159.542-108.522 260.374-12.465 100.832 96.056 290.968-7.105 297.046 171.388z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M629.602 207.307v-51.154c0-28.251-22.902-51.153-51.154-51.153H322.681c-28.251 0-51.153 22.902-51.153 51.153v127.884" fill="#fff"/><path d="M629.602 207.307v-51.154c0-28.251-22.902-51.153-51.154-51.153H322.681c-28.251 0-51.153 22.902-51.153 51.153v127.884" stroke="#E1E4E5" stroke-width="4.13"/><path fill-rule="evenodd" clip-rule="evenodd" d="M271.528 216.252h165.353a25.578 25.578 0 0 0 21.28-11.382l35.884-53.941a25.575 25.575 0 0 1 21.357-11.407h114.2c28.251 0 51.154 22.902 51.154 51.153v255.767c0 28.252-22.903 51.154-51.154 51.154H271.528c-28.251 0-51.154-22.902-51.154-51.154V267.405c0-28.251 22.903-51.153 51.154-51.153z" fill="#fff" stroke="#E1E4E5" stroke-width="4.13"/><path fill-rule="evenodd" clip-rule="evenodd" d="M320.022 432.016v3.968h3.964A3.028 3.028 0 0 1 327 439a3.028 3.028 0 0 1-3.014 3.016h-3.964v3.968a3.028 3.028 0 0 1-3.014 3.016 3.029 3.029 0 0 1-3.014-3.016v-3.951h-3.98a3.029 3.029 0 0 1-3.014-3.017 3.029 3.029 0 0 1 3.014-3.016h3.964v-3.984a3.031 3.031 0 0 1 3.03-3.016 3.028 3.028 0 0 1 3.014 3.016zm-33.14-27.793v5.554h5.748c2.399 0 4.37 1.905 4.37 4.223 0 2.318-1.971 4.223-4.37 4.223h-5.748v5.554c0 2.318-1.971 4.223-4.37 4.223s-4.37-1.905-4.37-4.223v-5.531h-5.772c-2.399 0-4.37-1.905-4.37-4.223 0-2.318 1.971-4.223 4.37-4.223h5.748v-5.577c0-2.318 1.971-4.223 4.394-4.223 2.399 0 4.37 1.905 4.37 4.223z" fill="#E1E4E5"/><circle cx="451.101" cy="358.294" r="98.899" fill="#aaa"/><rect x="444.142" y="322.427" width="13.918" height="71.734" rx="6.959" fill="#fff"/><rect x="486.968" y="351.335" width="13.918" height="71.734" rx="6.959" transform="rotate(90 486.968 351.335)" fill="#fff"/><ellipse rx="13.917" ry="13.254" transform="matrix(-1 0 0 1 718.227 479.149)" fill="#E1E4E5"/><circle r="4.639" transform="matrix(-1 0 0 1 292.465 519.783)" fill="#E1E4E5"/><circle r="6.627" transform="matrix(-1 0 0 1 566.399 205.929)" fill="#E1E4E5"/><circle r="6.476" transform="scale(1 -1) rotate(-75 -180.786 -314.12)" fill="#E1E4E5"/><circle r="8.615" transform="matrix(-1 0 0 1 217.158 114.719)" fill="#E1E4E5"/><ellipse rx="6.627" ry="5.302" transform="matrix(-1 0 0 1 704.513 233.511)" fill="#E1E4E5"/><path d="M186.177 456.259h.174c1.026 14.545 11.844 14.769 11.844 14.769s-11.929.233-11.929 17.04c0-16.807-11.929-17.04-11.929-17.04s10.814-.224 11.84-14.769zm574.334-165.951h.18c1.067 15.36 12.309 15.596 12.309 15.596s-12.397.246-12.397 17.994c0-17.748-12.396-17.994-12.396-17.994s11.237-.236 12.304-15.596z" fill="#E1E4E5"/><defs><linearGradient id="a" x1="530.485" y1="779.032" x2="277.414" y2="-357.319" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient></defs></svg>
--- a/web/src/lib/assets/empty-workflows.svg
+++ b/web/src/lib/assets/empty-workflows.svg
--- a/web/src/lib/assets/fonts/GoogleSans/GoogleSans.ttf
+++ b/web/src/lib/assets/fonts/GoogleSans/GoogleSans.ttf
--- a/web/src/lib/assets/fonts/GoogleSansCode/GoogleSansCode.ttf
+++ b/web/src/lib/assets/fonts/GoogleSansCode/GoogleSansCode.ttf
--- a/web/src/lib/assets/location-pin.svg
+++ b/web/src/lib/assets/location-pin.svg
@ -0,0 +1 @@
+<svg fill="#2443c2" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101px" height="101px" viewBox="0 0 425.963 425.963" xml:space="preserve" stroke="#2443c2"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M213.285,0h-0.608C139.114,0,79.268,59.826,79.268,133.361c0,48.202,21.952,111.817,65.246,189.081 c32.098,57.281,64.646,101.152,64.972,101.588c0.906,1.217,2.334,1.934,3.847,1.934c0.043,0,0.087,0,0.13-0.002 c1.561-0.043,3.002-0.842,3.868-2.143c0.321-0.486,32.637-49.287,64.517-108.976c43.03-80.563,64.848-141.624,64.848-181.482 C346.693,59.825,286.846,0,213.285,0z M274.865,136.62c0,34.124-27.761,61.884-61.885,61.884 c-34.123,0-61.884-27.761-61.884-61.884s27.761-61.884,61.884-61.884C247.104,74.736,274.865,102.497,274.865,136.62z"></path> </g> </g></svg>
--- a/web/src/lib/assets/no-thumbnail.png
+++ b/web/src/lib/assets/no-thumbnail.png
--- a/web/src/lib/assets/settings-outline.svg
+++ b/web/src/lib/assets/settings-outline.svg
--- a/web/src/lib/assets/svg-paths.ts
+++ b/web/src/lib/assets/svg-paths.ts
@ -0,0 +1,6 @@
+export const moonPath = 'M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z';
+export const sunPath =
+  'M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z';
+
+export const moonViewBox = '0 0 20 20';
+export const sunViewBox = '0 0 20 20';
--- a/web/src/lib/attachments/drag-and-drop.svelte.ts
+++ b/web/src/lib/attachments/drag-and-drop.svelte.ts
@ -0,0 +1,105 @@
+import type { Attachment } from 'svelte/attachments';
+
+export interface DragAndDropOptions {
+  index: number;
+  onDragStart?: (index: number) => void;
+  onDragEnter?: (index: number) => void;
+  onDrop?: (e: DragEvent, index: number) => void;
+  onDragEnd?: () => void;
+  isDragging?: boolean;
+  isDragOver?: boolean;
+}
+
+export function dragAndDrop(options: DragAndDropOptions): Attachment {
+  return (node: Element) => {
+    const element = node as HTMLElement;
+    const { index, onDragStart, onDragEnter, onDrop, onDragEnd, isDragging, isDragOver } = options;
+
+    const isFormElement = (el: HTMLElement) => {
+      return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT';
+    };
+
+    const handleDragStart = (e: DragEvent) => {
+      // Prevent drag if it originated from an input, textarea, or select element
+      const target = e.target as HTMLElement;
+      if (isFormElement(target)) {
+        e.preventDefault();
+        return;
+      }
+      onDragStart?.(index);
+    };
+
+    const handleDragEnter = () => {
+      onDragEnter?.(index);
+    };
+
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      onDrop?.(e, index);
+    };
+
+    const handleDragEnd = () => {
+      onDragEnd?.();
+    };
+
+    // Disable draggable when focusing on form elements (fixes Firefox input interaction)
+    const handleFocusIn = (e: FocusEvent) => {
+      const target = e.target as HTMLElement;
+      if (isFormElement(target)) {
+        element.setAttribute('draggable', 'false');
+      }
+    };
+
+    const handleFocusOut = (e: FocusEvent) => {
+      const target = e.target as HTMLElement;
+      if (isFormElement(target)) {
+        element.setAttribute('draggable', 'true');
+      }
+    };
+
+    // Update classes based on drag state
+    const updateClasses = (dragging: boolean, dragOver: boolean) => {
+      // Remove all drag-related classes first
+      element.classList.remove('opacity-50', 'border-light-500', 'border-solid');
+
+      // Add back only the active ones
+      if (dragging) {
+        element.classList.add('opacity-50');
+      }
+
+      if (dragOver) {
+        element.classList.add('border-light-500', 'border-solid');
+        element.classList.remove('border-transparent');
+      } else {
+        element.classList.add('border-transparent');
+      }
+    };
+
+    element.setAttribute('draggable', 'true');
+    element.setAttribute('role', 'button');
+    element.setAttribute('tabindex', '0');
+
+    element.addEventListener('dragstart', handleDragStart);
+    element.addEventListener('dragenter', handleDragEnter);
+    element.addEventListener('dragover', handleDragOver);
+    element.addEventListener('drop', handleDrop);
+    element.addEventListener('dragend', handleDragEnd);
+    element.addEventListener('focusin', handleFocusIn);
+    element.addEventListener('focusout', handleFocusOut);
+
+    updateClasses(isDragging || false, isDragOver || false);
+
+    return () => {
+      element.removeEventListener('dragstart', handleDragStart);
+      element.removeEventListener('dragenter', handleDragEnter);
+      element.removeEventListener('dragover', handleDragOver);
+      element.removeEventListener('drop', handleDrop);
+      element.removeEventListener('dragend', handleDragEnd);
+      element.removeEventListener('focusin', handleFocusIn);
+      element.removeEventListener('focusout', handleFocusOut);
+    };
+  };
+}
--- a/web/src/lib/components/ActionButton.svelte
+++ b/web/src/lib/components/ActionButton.svelte
@ -0,0 +1,15 @@
+<script lang="ts">
+  import { isEnabled } from '$lib/utils';
+  import { IconButton, type ActionItem } from '@immich/ui';
+
+  type Props = {
+    action: ActionItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
+</script>
+
+{#if icon && isEnabled(action)}
+  <IconButton variant="ghost" shape="round" {color} {icon} aria-label={title} onclick={() => onAction(action)} />
+{/if}
--- a/web/src/lib/components/ActionMenuItem.svelte
+++ b/web/src/lib/components/ActionMenuItem.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { isEnabled } from '$lib/utils';
+  import { type ActionItem } from '@immich/ui';
+
+  type Props = {
+    action: ActionItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, onAction } = $derived(action);
+</script>
+
+{#if icon && isEnabled(action)}
+  <MenuOption {icon} text={title} onClick={() => onAction(action)} />
+{/if}
--- a/web/src/lib/components/AdminCard.svelte
+++ b/web/src/lib/components/AdminCard.svelte
@ -0,0 +1,33 @@
+<script lang="ts">
+  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';
+
+  type Props = {
+    icon: IconLike;
+    title: string;
+    headerAction?: ActionItem;
+    children?: Snippet;
+  };
+
+  const { icon, title, headerAction, children }: Props = $props();
+</script>
+
+<Card color="secondary">
+  <CardHeader>
+    <div class="flex w-full justify-between items-center px-4 py-2">
+      <div class="flex gap-2 text-primary">
+        <Icon {icon} size="1.5rem" />
+        <CardTitle>{title}</CardTitle>
+      </div>
+      {#if headerAction}
+        <HeaderActionButton action={headerAction} />
+      {/if}
+    </div>
+  </CardHeader>
+  <CardBody>
+    <div class="px-4 pb-7">
+      {@render children?.()}
+    </div>
+  </CardBody>
+</Card>
--- a/web/src/lib/components/ApiKeyPermissionsPicker.svelte
+++ b/web/src/lib/components/ApiKeyPermissionsPicker.svelte
@ -0,0 +1,78 @@
+<script lang="ts">
+  import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
+  import { Permission } from '@immich/sdk';
+  import { Checkbox, IconButton, Input, Label } from '@immich/ui';
+  import { mdiClose } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    selectedPermissions: Permission[];
+  };
+
+  let { selectedPermissions = $bindable([]) }: Props = $props();
+
+  const permissions: Record<string, Permission[]> = {};
+  for (const permission of Object.values(Permission)) {
+    if (permission === Permission.All) {
+      continue;
+    }
+
+    const [group] = permission.split('.');
+    if (!permissions[group]) {
+      permissions[group] = [];
+    }
+    permissions[group].push(permission);
+  }
+
+  let searchValue = $state('');
+  let allItemsSelected = $derived(selectedPermissions.length === Object.keys(Permission).length - 1);
+
+  const matchFilter = (search: string) => {
+    search = search.toLowerCase();
+
+    return ([title, items]: [string, Permission[]]) =>
+      title.toLowerCase().includes(search) || items.some((item) => item.toLowerCase().includes(search));
+  };
+
+  const onCheckedAllChange = (checked: boolean) => {
+    selectedPermissions = checked
+      ? Object.values(Permission).filter((permission) => permission !== Permission.All)
+      : [];
+  };
+
+  const filteredResults = $derived(Object.entries(permissions).filter(matchFilter(searchValue)));
+
+  const handleSelectItems = (items: Permission[]) =>
+    (selectedPermissions = Array.from(new Set([...selectedPermissions, ...items])));
+
+  const handleDeselectItems = (items: Permission[]) =>
+    (selectedPermissions = selectedPermissions.filter((item) => !items.includes(item)));
+</script>
+
+<Label label={$t('permission')} for="permission-container" />
+<div class="flex items-center gap-2 m-4" id="permission-container">
+  <Checkbox id="input-select-all" size="tiny" checked={allItemsSelected} onCheckedChange={onCheckedAllChange} />
+  <Label label={$t('select_all')} for="input-select-all" />
+</div>
+
+<div class="ms-4 flex flex-col gap-2">
+  <Input bind:value={searchValue} placeholder={$t('search')}>
+    {#snippet trailingIcon()}
+      {#if searchValue}
+        <IconButton
+          icon={mdiClose}
+          size="small"
+          variant="ghost"
+          shape="round"
+          color="secondary"
+          class="me-1"
+          onclick={() => (searchValue = '')}
+          aria-label={$t('clear')}
+        />
+      {/if}
+    {/snippet}
+  </Input>
+  {#each filteredResults as [title, subItems] (title)}
+    <ApiKeyGrid {title} {subItems} selectedItems={selectedPermissions} {handleSelectItems} {handleDeselectItems} />
+  {/each}
+</div>
--- a/web/src/lib/components/AssetViewerEvents.svelte
+++ b/web/src/lib/components/AssetViewerEvents.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+  import { assetViewerManager, type Events } from '$lib/managers/asset-viewer-manager.svelte';
+  import type { EventCallback } from '$lib/utils/base-event-manager.svelte';
+  import { onMount } from 'svelte';
+
+  type Props = {
+    [K in keyof Events as `on${K}`]?: EventCallback<Events, K>;
+  };
+
+  const props: Props = $props();
+
+  onMount(() => {
+    const unsubscribes: Array<() => void> = [];
+
+    for (const name of Object.keys(props)) {
+      const event = name.slice(2) as keyof Events;
+      const listener = props[name as keyof Props] as EventCallback<Events, typeof event> | undefined;
+      if (!listener) {
+        continue;
+      }
+
+      unsubscribes.push(assetViewerManager.on(event, listener));
+    }
+
+    return () => {
+      for (const unsubscribe of unsubscribes) {
+        unsubscribe();
+      }
+    };
+  });
+</script>
--- a/web/src/lib/components/BreadcrumbActionPage.svelte
+++ b/web/src/lib/components/BreadcrumbActionPage.svelte
@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { HeaderButtonActionItem } from '$lib/types';
+  import {
+    Breadcrumbs,
+    Button,
+    Container,
+    ContextMenuButton,
+    HStack,
+    MenuItemType,
+    Scrollable,
+    isMenuItemType,
+    type BreadcrumbItem,
+  } from '@immich/ui';
+  import { mdiSlashForward } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    breadcrumbs?: BreadcrumbItem[];
+    actions?: Array<HeaderButtonActionItem | MenuItemType>;
+    children?: Snippet;
+  };
+
+  let { breadcrumbs = [], actions = [], children }: Props = $props();
+
+  const enabledActions = $derived(
+    actions
+      .filter((action): action is HeaderButtonActionItem => !isMenuItemType(action))
+      .filter((action) => action.$if?.() ?? true),
+  );
+</script>
+
+<div class="h-full flex flex-col">
+  <div class="flex h-16 w-full justify-between items-center border-b py-2 px-4 md:px-2">
+    <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
+
+    {#if enabledActions.length > 0}
+      <div class="hidden md:block">
+        <HStack gap={0}>
+          {#each enabledActions as action, i (i)}
+            <Button
+              variant="ghost"
+              size="small"
+              color={action.color ?? 'secondary'}
+              leadingIcon={action.icon}
+              onclick={() => action.onAction(action)}
+              title={action.data?.title}
+            >
+              {action.title}
+            </Button>
+          {/each}
+        </HStack>
+      </div>
+
+      <ContextMenuButton aria-label={$t('open')} items={actions} class="md:hidden" />
+    {/if}
+  </div>
+  <Scrollable class="grow">
+    <Container class="p-2 pb-16" {children} />
+  </Scrollable>
+</div>
--- a/web/src/lib/components/HeaderActionButton.svelte
+++ b/web/src/lib/components/HeaderActionButton.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HeaderButtonActionItem } from '$lib/types';
+  import { Button } from '@immich/ui';
+
+  type Props = {
+    action: HeaderButtonActionItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
+</script>
+
+{#if action.$if?.() ?? true}
+  <Button
+    variant="ghost"
+    size="small"
+    {color}
+    leadingIcon={icon}
+    onclick={() => onAction(action)}
+    title={action.data?.title}
+  >
+    {title}
+  </Button>
+{/if}
--- a/web/src/lib/components/OnEvents.svelte
+++ b/web/src/lib/components/OnEvents.svelte
@ -0,0 +1,33 @@
+<script lang="ts">
+  import { eventManager, type Events } from '$lib/managers/event-manager.svelte';
+  import { onMount } from 'svelte';
+
+  type Props = {
+    [K in keyof Events as `on${K}`]?: (...args: Events[K]) => void;
+  };
+
+  const props: Props = $props();
+
+  onMount(() => {
+    const unsubscribes: Array<() => void> = [];
+
+    for (const name of Object.keys(props)) {
+      const event = name.slice(2) as keyof Events;
+      const listener = props[name as keyof Props];
+
+      if (!listener) {
+        continue;
+      }
+
+      const args = [event, listener as (...args: Events[typeof event]) => void] as const;
+
+      unsubscribes.push(eventManager.on(...args));
+    }
+
+    return () => {
+      for (const unsubscribe of unsubscribes) {
+        unsubscribe();
+      }
+    };
+  });
+</script>
--- a/web/src/lib/components/QueueCard.svelte
+++ b/web/src/lib/components/QueueCard.svelte
@ -0,0 +1,187 @@
+<script lang="ts">
+  import QueueCardBadge from '$lib/components/QueueCardBadge.svelte';
+  import QueueCardButton from '$lib/components/QueueCardButton.svelte';
+  import Badge from '$lib/elements/Badge.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 { QueueCommand, type QueueCommandDto, type QueueResponseDto } from '@immich/sdk';
+  import { Icon, IconButton, Link } from '@immich/ui';
+  import {
+    mdiAlertCircle,
+    mdiAllInclusive,
+    mdiChartLine,
+    mdiClose,
+    mdiFastForward,
+    mdiImageRefreshOutline,
+    mdiPause,
+    mdiPlay,
+    mdiSelectionSearch,
+  } from '@mdi/js';
+  import { type Component } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    queue: QueueResponseDto;
+    description?: Component;
+    disabled?: boolean;
+    allText?: string;
+    refreshText?: string;
+    missingText: string;
+    onCommand: (command: QueueCommandDto) => void;
+  }
+
+  let { queue, description, disabled = false, allText, refreshText, missingText, onCommand }: Props = $props();
+
+  const { icon, title, subtitle } = $derived(asQueueItem($t, queue));
+  const { statistics } = $derived(queue);
+  let waitingCount = $derived(statistics.waiting + statistics.paused + statistics.delayed);
+  let isIdle = $derived(statistics.active + statistics.waiting === 0 && !queue.isPaused);
+  let multipleButtons = $derived(allText || refreshText);
+
+  const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pe-4 ps-6';
+</script>
+
+<div class="flex flex-col overflow-hidden rounded-2xl bg-gray-100 dark:bg-immich-dark-gray sm:flex-row sm:rounded-9">
+  <div class="flex w-full flex-col">
+    {#if queue.isPaused}
+      <QueueCardBadge color="warning">{$t('paused')}</QueueCardBadge>
+    {:else if statistics.active > 0}
+      <QueueCardBadge color="success">{$t('active')}</QueueCardBadge>
+    {/if}
+    <div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
+      <div class="flex items-center gap-2 text-xl font-semibold text-primary">
+        <Link class="flex items-center gap-2 hover:underline" href={Route.viewQueue(queue)} underline={false}>
+          <Icon {icon} size="1.25em" class="hidden shrink-0 sm:block" />
+          <span>{transformToTitleCase(title)}</span>
+        </Link>
+        <IconButton
+          color="primary"
+          icon={mdiChartLine}
+          aria-label={$t('view_details')}
+          size="small"
+          variant="ghost"
+          href={Route.viewQueue(queue)}
+        />
+        <div class="flex gap-2">
+          {#if statistics.failed > 0}
+            <Badge>
+              <div class="flex flex-row gap-1">
+                <span class="text-sm">
+                  {$t('admin.jobs_failed', { values: { jobCount: statistics.failed.toLocaleString($locale) } })}
+                </span>
+                <IconButton
+                  color="primary"
+                  icon={mdiClose}
+                  aria-label={$t('clear_message')}
+                  size="tiny"
+                  shape="round"
+                  onclick={() => onCommand({ command: QueueCommand.ClearFailed, force: false })}
+                />
+              </div>
+            </Badge>
+          {/if}
+          {#if statistics.delayed > 0}
+            <Badge>
+              <span class="text-sm">
+                {$t('admin.jobs_delayed', { values: { jobCount: statistics.delayed.toLocaleString($locale) } })}
+              </span>
+            </Badge>
+          {/if}
+        </div>
+      </div>
+
+      {#if subtitle}
+        <div class="whitespace-pre-line text-sm dark:text-white">{subtitle}</div>
+      {/if}
+
+      {#if description}
+        {@const SvelteComponent = description}
+        <div class="text-sm dark:text-white">
+          <SvelteComponent />
+        </div>
+      {/if}
+
+      <div class="mt-2 flex w-full max-w-md flex-col sm:flex-row">
+        <div
+          class="{commonClasses} rounded-t-lg bg-immich-primary text-white dark:bg-immich-dark-primary dark:text-immich-dark-gray sm:rounded-s-lg sm:rounded-e-none"
+        >
+          <p>{$t('active')}</p>
+          <p class="text-2xl">
+            {statistics.active.toLocaleString($locale)}
+          </p>
+        </div>
+
+        <div
+          class="{commonClasses} flex-row-reverse rounded-b-lg bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray sm:rounded-s-none sm:rounded-e-lg"
+        >
+          <p class="text-2xl">
+            {waitingCount.toLocaleString($locale)}
+          </p>
+          <p>{$t('waiting')}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="flex w-full flex-row overflow-hidden sm:w-32 sm:flex-col">
+    {#if disabled}
+      <QueueCardButton
+        disabled={true}
+        color="light-gray"
+        onClick={() => onCommand({ command: QueueCommand.Start, force: false })}
+      >
+        <Icon icon={mdiAlertCircle} size="36" />
+        <span>{$t('disabled')}</span>
+      </QueueCardButton>
+    {/if}
+
+    {#if !disabled && !isIdle}
+      {#if waitingCount > 0}
+        <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Empty, force: false })}>
+          <Icon icon={mdiClose} size="24" />
+          <span>{$t('clear')}</span>
+        </QueueCardButton>
+      {/if}
+      {#if queue.isPaused}
+        {@const size = waitingCount > 0 ? '24' : '48'}
+        <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Resume, force: false })}>
+          <!-- size property is not reactive, so have to use width and height -->
+          <Icon icon={mdiFastForward} {size} />
+          <span>{$t('resume')}</span>
+        </QueueCardButton>
+      {:else}
+        <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Pause, force: false })}>
+          <Icon icon={mdiPause} size="24" />
+          <span>{$t('pause')}</span>
+        </QueueCardButton>
+      {/if}
+    {/if}
+
+    {#if !disabled && multipleButtons && isIdle}
+      {#if allText}
+        <QueueCardButton color="dark-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: true })}>
+          <Icon icon={mdiAllInclusive} size="24" />
+          <span>{allText}</span>
+        </QueueCardButton>
+      {/if}
+      {#if refreshText}
+        <QueueCardButton color="gray" onClick={() => onCommand({ command: QueueCommand.Start, force: undefined })}>
+          <Icon icon={mdiImageRefreshOutline} size="24" />
+          <span>{refreshText}</span>
+        </QueueCardButton>
+      {/if}
+      <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
+        <Icon icon={mdiSelectionSearch} size="24" />
+        <span>{missingText}</span>
+      </QueueCardButton>
+    {/if}
+
+    {#if !disabled && !multipleButtons && isIdle}
+      <QueueCardButton color="light-gray" onClick={() => onCommand({ command: QueueCommand.Start, force: false })}>
+        <Icon icon={mdiPlay} size="48" />
+        <span>{missingText}</span>
+      </QueueCardButton>
+    {/if}
+  </div>
+</div>
--- a/web/src/lib/components/QueueCardBadge.svelte
+++ b/web/src/lib/components/QueueCardBadge.svelte
@ -0,0 +1,23 @@
+<script lang="ts" module>
+  export type Color = 'success' | 'warning';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    color: Color;
+    children?: Snippet;
+  }
+
+  let { color, children }: Props = $props();
+
+  const colorClasses: Record<Color, string> = {
+    success: 'bg-green-500/70 text-gray-900 dark:bg-green-700/90 dark:text-gray-100',
+    warning: 'bg-orange-400/70 text-gray-900 dark:bg-orange-900 dark:text-gray-100',
+  };
+</script>
+
+<div class="w-full p-2 text-center text-sm {colorClasses[color]}">
+  {@render children?.()}
+</div>
--- a/web/src/lib/components/QueueCardButton.svelte
+++ b/web/src/lib/components/QueueCardButton.svelte
@ -0,0 +1,37 @@
+<script lang="ts" module>
+  export type Colors = 'light-gray' | 'gray' | 'dark-gray';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    color: Colors;
+    disabled?: boolean;
+    children?: Snippet;
+    onClick?: () => void;
+  }
+
+  let { color, disabled = false, onClick = () => {}, children }: Props = $props();
+
+  const colorClasses: Record<Colors, string> = {
+    'light-gray': 'bg-gray-300/80 dark:bg-gray-700',
+    gray: 'bg-gray-300/90 dark:bg-gray-700/90',
+    'dark-gray': 'bg-gray-300 dark:bg-gray-700/80',
+  };
+
+  const hoverClasses = disabled
+    ? 'cursor-not-allowed'
+    : 'hover:bg-immich-primary hover:text-white dark:hover:bg-immich-dark-primary dark:hover:text-black';
+</script>
+
+<button
+  type="button"
+  {disabled}
+  class="flex h-full w-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200 {colorClasses[
+    color
+  ]} {hoverClasses}"
+  onclick={onClick}
+>
+  {@render children?.()}
+</button>
--- a/web/src/lib/components/QueueGraph.svelte
+++ b/web/src/lib/components/QueueGraph.svelte
@ -0,0 +1,165 @@
+<script lang="ts">
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import type { QueueSnapshot } from '$lib/types';
+  import type { QueueResponseDto } from '@immich/sdk';
+  import { LoadingSpinner, Theme, theme } from '@immich/ui';
+  import { DateTime } from 'luxon';
+  import { onMount } from 'svelte';
+  import uPlot, { type AlignedData, type Axis } from 'uplot';
+  import 'uplot/dist/uPlot.min.css';
+
+  type Props = {
+    queue: QueueResponseDto;
+    class?: string;
+  };
+
+  const { queue, class: className = '' }: Props = $props();
+
+  type Data = number | null;
+  type NormalizedData = [
+    Data[], // timestamps
+    Data[], // failed counts
+    Data[], // active counts
+    Data[], // waiting counts
+  ];
+
+  const normalizeData = (snapshots: QueueSnapshot[]) => {
+    const items: NormalizedData = [[], [], [], []];
+
+    for (const { timestamp, snapshot } of snapshots) {
+      items[0].push(timestamp);
+
+      const statistics = (snapshot || []).find(({ name }) => name === queue.name)?.statistics;
+
+      if (statistics) {
+        items[1].push(statistics.failed);
+        items[2].push(statistics.active);
+        items[3].push(statistics.waiting + statistics.paused);
+      } else {
+        items[0].push(timestamp);
+        items[1].push(null);
+        items[2].push(null);
+        items[3].push(null);
+      }
+    }
+
+    items[0].push(Date.now() + 5000);
+    items[1].push(items[1].at(-1) ?? 0);
+    items[2].push(items[2].at(-1) ?? 0);
+    items[3].push(items[3].at(-1) ?? 0);
+
+    return items;
+  };
+
+  const data = $derived(normalizeData(queueManager.snapshots));
+
+  let chartElement: HTMLDivElement | undefined = $state();
+  let isDark = $derived(theme.value === Theme.Dark);
+  let plot: uPlot;
+
+  const axisOptions: Axis = {
+    stroke: () => (isDark ? '#ccc' : 'black'),
+    ticks: {
+      show: false,
+      stroke: () => (isDark ? '#444' : '#ddd'),
+    },
+    grid: {
+      show: true,
+      stroke: () => (isDark ? '#444' : '#ddd'),
+    },
+  };
+
+  const seriesOptions: uPlot.Series = {
+    spanGaps: false,
+    points: {
+      show: false,
+    },
+    width: 2,
+  };
+
+  const options: uPlot.Options = {
+    legend: {
+      show: false,
+    },
+    cursor: {
+      show: false,
+      lock: true,
+      drag: {
+        setScale: false,
+      },
+    },
+    width: 200,
+    height: 200,
+    ms: 1,
+    pxAlign: true,
+    scales: {
+      y: {
+        distr: 1,
+      },
+    },
+    series: [
+      {},
+      {
+        stroke: '#d94a4a',
+        ...seriesOptions,
+      },
+      {
+        stroke: '#4250af',
+        ...seriesOptions,
+      },
+      {
+        stroke: '#1075db',
+        ...seriesOptions,
+      },
+    ],
+
+    axes: [
+      {
+        ...axisOptions,
+        size: 40,
+        ticks: { show: true },
+        values: (plot, values) => {
+          return values.map((value) => {
+            if (!value) {
+              return '';
+            }
+            return DateTime.fromMillis(value).toFormat('hh:mm:ss');
+          });
+        },
+      },
+      {
+        ...axisOptions,
+        size: 60,
+      },
+    ],
+  };
+
+  const onThemeChange = () => plot?.redraw(false);
+
+  $effect(() => theme.value && onThemeChange());
+
+  onMount(() => {
+    plot = new uPlot(options, data as AlignedData, chartElement);
+  });
+
+  const update = () => {
+    if (plot && chartElement && data[0].length > 0) {
+      const now = Date.now();
+      const scale = { min: now - chartElement!.clientWidth * 100, max: now };
+
+      plot.setData(data as AlignedData, false);
+      plot.setScale('x', scale);
+      plot.setSize({ width: chartElement.clientWidth, height: chartElement.clientHeight });
+    }
+
+    requestAnimationFrame(update);
+  };
+
+  requestAnimationFrame(update);
+</script>
+
+<div class="w-full {className}" bind:this={chartElement}>
+  {#if data[0].length === 0}
+    <LoadingSpinner size="giant" />
+  {/if}
+</div>
--- a/web/src/lib/components/QueuePanel.svelte
+++ b/web/src/lib/components/QueuePanel.svelte
@ -0,0 +1,132 @@
+<script lang="ts">
+  import QueueCard from '$lib/components/QueueCard.svelte';
+  import QueueStorageMigrationDescription from '$lib/components/QueueStorageMigrationDescription.svelte';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { queueManager } from '$lib/managers/queue-manager.svelte';
+  import { asQueueItem } from '$lib/services/queue.service';
+  import { handleError } from '$lib/utils/handle-error';
+  import {
+    QueueCommand,
+    type QueueCommandDto,
+    QueueName,
+    type QueueResponseDto,
+    runQueueCommandLegacy,
+  } from '@immich/sdk';
+  import { modalManager, toastManager } from '@immich/ui';
+  import type { Component } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    queues: QueueResponseDto[];
+  };
+
+  let { queues }: Props = $props();
+  const featureFlags = featureFlagsManager.value;
+
+  type QueueDetails = {
+    description?: Component;
+    allText?: string;
+    refreshText?: string;
+    missingText: string;
+    disabled?: boolean;
+    handleCommand?: (jobId: QueueName, jobCommand: QueueCommandDto) => Promise<void>;
+  };
+
+  const queueDetails: Partial<Record<QueueName, QueueDetails>> = {
+    [QueueName.ThumbnailGeneration]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.MetadataExtraction]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.Library]: {
+      missingText: $t('rescan'),
+    },
+    [QueueName.Sidecar]: {
+      allText: $t('sync'),
+      missingText: $t('discover'),
+      disabled: !featureFlags.sidecar,
+    },
+    [QueueName.SmartSearch]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.smartSearch,
+    },
+    [QueueName.DuplicateDetection]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.duplicateDetection,
+    },
+    [QueueName.FaceDetection]: {
+      allText: $t('reset'),
+      refreshText: $t('refresh'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.facialRecognition,
+    },
+    [QueueName.FacialRecognition]: {
+      allText: $t('reset'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.facialRecognition,
+    },
+    [QueueName.Ocr]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+      disabled: !featureFlags.ocr,
+    },
+    [QueueName.VideoConversion]: {
+      allText: $t('all'),
+      missingText: $t('missing'),
+    },
+    [QueueName.StorageTemplateMigration]: {
+      missingText: $t('start'),
+      description: QueueStorageMigrationDescription,
+    },
+    [QueueName.Migration]: {
+      missingText: $t('start'),
+    },
+  };
+
+  let queueList = Object.entries(queueDetails) as [QueueName, QueueDetails][];
+
+  const handleCommand = async (name: QueueName, dto: QueueCommandDto) => {
+    const item = asQueueItem($t, { name });
+
+    switch (name) {
+      case QueueName.FaceDetection:
+      case QueueName.FacialRecognition: {
+        if (dto.force) {
+          const confirmed = await modalManager.showDialog({ prompt: $t('admin.confirm_reprocess_all_faces') });
+          if (!confirmed) {
+            return;
+          }
+          break;
+        }
+      }
+    }
+
+    try {
+      await runQueueCommandLegacy({ name, queueCommandDto: dto });
+      await queueManager.refresh();
+
+      switch (dto.command) {
+        case QueueCommand.Empty: {
+          toastManager.success($t('admin.cleared_jobs', { values: { job: item.title } }));
+          break;
+        }
+      }
+    } catch (error) {
+      handleError(error, $t('admin.failed_job_command', { values: { command: dto.command, job: item.title } }));
+    }
+  };
+</script>
+
+<div class="flex flex-col gap-7 mt-10">
+  {#each queueList as [queueName, props] (queueName)}
+    {@const queue = queues.find(({ name }) => name === queueName)}
+    {#if queue}
+      <QueueCard {queue} onCommand={(command) => handleCommand(queueName, command)} {...props} />
+    {/if}
+  {/each}
+</div>
--- a/web/src/lib/components/QueueStorageMigrationDescription.svelte
+++ b/web/src/lib/components/QueueStorageMigrationDescription.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+  import { OpenQueryParam } from '$lib/constants';
+  import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import { Route } from '$lib/route';
+  import { t } from 'svelte-i18n';
+</script>
+
+<FormatMessage
+  key="admin.storage_template_migration_description"
+  values={{ template: $t('admin.storage_template_settings') }}
+>
+  {#snippet children({ message })}
+    <a href={Route.systemSettings({ isOpen: OpenQueryParam.STORAGE_TEMPLATE })} class="text-primary">
+      {message}
+    </a>
+  {/snippet}
+</FormatMessage>
--- a/web/src/lib/components/ServerAboutItem.svelte
+++ b/web/src/lib/components/ServerAboutItem.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Label, Link, Text } from '@immich/ui';
+
+  type Props = {
+    id: string;
+    title: string;
+    version?: string;
+    versionHref?: string;
+    class?: string;
+  };
+
+  const { id, title, version, versionHref, class: className }: Props = $props();
+</script>
+
+<div class={className}>
+  <Label size="small" color="primary" for={id}>{title}</Label>
+  <Text size="small" color="muted" {id}>
+    {#if versionHref}
+      <Link href={versionHref}>{version}</Link>
+    {:else}
+      {version}
+    {/if}
+  </Text>
+</div>
--- a/web/src/lib/components/SharedLinkExpiration.svelte
+++ b/web/src/lib/components/SharedLinkExpiration.svelte
@ -0,0 +1,75 @@
+<script lang="ts">
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { minBy, uniqBy } from 'lodash-es';
+  import { DateTime, Duration } from 'luxon';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    createdAt?: string;
+    expiresAt: string | null;
+  };
+
+  let { createdAt = DateTime.now().toISO(), expiresAt = $bindable() }: Props = $props();
+
+  const expirationOptions: [number, Intl.RelativeTimeFormatUnit][] = [
+    [30, 'minutes'],
+    [1, 'hour'],
+    [6, 'hours'],
+    [1, 'day'],
+    [7, 'days'],
+    [30, 'days'],
+    [3, 'months'],
+    [1, 'year'],
+  ];
+
+  const relativeTime = $derived(new Intl.RelativeTimeFormat($locale));
+  const expiredDateOptions = $derived([
+    { text: $t('never'), value: 0 },
+    ...expirationOptions
+      .map(([value, unit]) => ({
+        text: relativeTime.format(value, unit),
+        value: Duration.fromObject({ [unit]: value }).toMillis(),
+      }))
+      .filter(({ value: millis }) => DateTime.fromISO(createdAt).plus(millis) > DateTime.now()),
+  ]);
+
+  const getExpirationOption = (createdAt: string, expiresAt: string | null) => {
+    if (!expiresAt) {
+      return expiredDateOptions[0];
+    }
+
+    const delta = DateTime.fromISO(expiresAt).diff(DateTime.fromISO(createdAt)).toMillis();
+    const closestOption = minBy(expiredDateOptions, ({ value }) => Math.abs(delta - value));
+
+    if (!closestOption) {
+      return expiredDateOptions[0];
+    }
+
+    // allow a generous epsilon to compensate for potential API delays
+    if (Math.abs(closestOption.value - delta) > 10_000) {
+      const interval = DateTime.fromMillis(closestOption.value) as DateTime<true>;
+      return { text: interval.toRelative({ locale: $locale }), value: closestOption.value };
+    }
+
+    return closestOption;
+  };
+
+  const onSelect = (option: number | string) => {
+    const expirationOption = Number(option);
+
+    expiresAt = expirationOption === 0 ? null : DateTime.fromISO(createdAt).plus(expirationOption).toISO();
+  };
+
+  let expirationOption = $derived(getExpirationOption(createdAt, expiresAt).value);
+</script>
+
+<div class="mt-2">
+  <SettingSelect
+    bind:value={expirationOption}
+    {onSelect}
+    options={uniqBy([...expiredDateOptions, getExpirationOption(createdAt, expiresAt)], 'value')}
+    label={$t('expire_after')}
+    number={true}
+  />
+</div>
--- a/web/src/lib/components/TableButton.svelte
+++ b/web/src/lib/components/TableButton.svelte
@ -0,0 +1,15 @@
+<script lang="ts">
+  import { IconButton, type ActionItem, type Size } from '@immich/ui';
+
+  type Props = {
+    action: ActionItem;
+    size?: Size;
+  };
+
+  const { action, size }: Props = $props();
+  const { title, icon, onAction } = $derived(action);
+</script>
+
+{#if icon && (action.$if?.() ?? true)}
+  <IconButton {size} shape="round" color="primary" {icon} aria-label={title} onclick={() => onAction(action)} />
+{/if}
--- a/web/src/lib/components/TestWrapper.svelte
+++ b/web/src/lib/components/TestWrapper.svelte
@ -0,0 +1,15 @@
+<script lang="ts" generics="T extends Record<string, unknown>">
+  import { TooltipProvider } from '@immich/ui';
+  import type { Component } from 'svelte';
+
+  type Props = {
+    component: Component<T>;
+    componentProps: T;
+  };
+
+  const { component: Test, componentProps }: Props = $props();
+</script>
+
+<TooltipProvider>
+  <Test {...componentProps} />
+</TooltipProvider>
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path d="M214.359 475.389c16.42 16.712 47.124 13.189 47.124 13.189s4.064-30.62-12.372-47.322c-16.419-16.712-47.109-13.198-47.109-13.198s-4.063 30.619 12.357 47.331z" fill="url(#a)"/><path d="M639.439 125.517c-17.194 9.808-41.345-.121-41.345-.121s3.743-25.827 20.946-35.623c17.194-9.808 41.335.11 41.335.11s-3.743 25.827-20.936 35.634z" fill="url(#b)"/><path d="M324.812 156.133c-17.672 17.987-50.72 14.194-50.72 14.194s-4.373-32.955 13.316-50.931c17.673-17.987 50.704-14.206 50.704-14.206s4.373 32.956-13.3 50.943z" fill="url(#c)"/><ellipse rx="15.17" ry="15.928" transform="matrix(1 0 0 -1 228.07 341.957)" fill="#E1E4E5"/><circle r="8.5" transform="matrix(1 0 0 -1 478.5 509.5)" fill="#9d9ea3"/><circle r="17.518" transform="matrix(1 0 0 -1 693.518 420.518)" fill="#9d9ea3"/><circle cx="708.183" cy="266.183" r="14.183" fill="#4F4F51"/><circle cx="247.603" cy="225.621" r="12.136" fill="#F8AE9D"/><ellipse cx="316.324" cy="510.867" rx="7.324" ry="6.867" fill="#E1E4E5"/><ellipse cx="664.796" cy="371.388" rx="9.796" ry="9.388" fill="#E1E4E5"/><circle cx="625.378" cy="479.378" r="11.377" fill="#E1E4E5"/><ellipse cx="401.025" cy="114.39" rx="5.309" ry="6.068" fill="#E1E4E5"/><circle cx="661.834" cy="300.834" r="5.58" transform="rotate(105 661.834 300.834)" fill="#E1E4E5"/><circle cx="654.769" cy="226.082" r="7.585" fill="#E1E4E5"/><ellipse cx="254.159" cy="284.946" rx="5.309" ry="4.551" fill="#E1E4E5"/><circle cx="521.363" cy="106.27" r="11.613" transform="rotate(105 521.363 106.27)" fill="#E1E4E5"/><path d="M162.314 308.103h-.149C161.284 320.589 152 320.781 152 320.781s10.238.2 10.238 14.628c0-14.428 10.238-14.628 10.238-14.628s-9.281-.192-10.162-12.678zm531.83-158.512h-.256c-1.518 21.504-17.507 21.835-17.507 21.835s17.632.345 17.632 25.192c0-24.847 17.632-25.192 17.632-25.192s-15.983-.331-17.501-21.835z" fill="#E1E4E5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M553.714 397.505v56.123c0 20.672-16.743 37.416-37.415 37.416H329.22c-20.672 0-37.415-16.744-37.415-37.416V266.55c0-20.672 16.743-37.416 37.415-37.416h56.124" fill="url(#d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M363.07 155.431h214.049c26.28 0 47.566 21.286 47.566 47.566v214.049c0 26.28-21.286 47.566-47.566 47.566H363.07c-26.28 0-47.566-21.286-47.566-47.566V202.997c0-26.28 21.286-47.566 47.566-47.566z" fill="#9d9ea3"/><path d="m425.113 307.765 33.925 33.924 74.038-74.059" stroke="#fff" stroke-width="32.125" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="a" x1="279.871" y1="532.474" x2="161.165" y2="346.391" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient><linearGradient id="b" x1="573.046" y1="156.85" x2="712.364" y2="32.889" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient><linearGradient id="c" x1="254.302" y1="217.573" x2="382.065" y2="17.293" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient><linearGradient id="d" x1="417.175" y1="82.293" x2="425.251" y2="775.957" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#EEE"/></linearGradient></defs></svg>
				`@ -0,0 +1 @@`
				<svg fill="#2443c2" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101px" height="101px" viewBox="0 0 425.963 425.963" xml:space="preserve" stroke="#2443c2"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M213.285,0h-0.608C139.114,0,79.268,59.826,79.268,133.361c0,48.202,21.952,111.817,65.246,189.081 c32.098,57.281,64.646,101.152,64.972,101.588c0.906,1.217,2.334,1.934,3.847,1.934c0.043,0,0.087,0,0.13-0.002 c1.561-0.043,3.002-0.842,3.868-2.143c0.321-0.486,32.637-49.287,64.517-108.976c43.03-80.563,64.848-141.624,64.848-181.482 C346.693,59.825,286.846,0,213.285,0z M274.865,136.62c0,34.124-27.761,61.884-61.885,61.884 c-34.123,0-61.884-27.761-61.884-61.884s27.761-61.884,61.884-61.884C247.104,74.736,274.865,102.497,274.865,136.62z"></path> </g> </g></svg>