fix(deps): update typescript-projects (#24476 )

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
feat: timeline-manager improvement to use AssetResponseDto efficiently (#24421 )
2025-12-11 09:13:08 +03:00 · 2025-12-11 00:13:06 +00:00 · 2025-12-11 01:07:31 +01:00 · 2025-12-11 00:59:39 +01:00 · 2025-12-11 00:59:20 +01:00 · 2025-12-11 00:59:03 +01:00
91 changed files with 1927 additions and 1566 deletions
--- a/.github/package.json
+++ b/.github/package.json
@@ -4,6 +4,6 @@
    "format:fix": "prettier --write ."
  },
  "devDependencies": {
-    "prettier": "^3.5.3"
+    "prettier": "^3.7.4"
  }
 }
--- a/.github/workflows/build-mobile.yml
+++ b/.github/workflows/build-mobile.yml
@@ -108,7 +108,7 @@ jobs:
        working-directory: ./mobile
        run: printf "%s" $KEY_JKS | base64 -d > android/key.jks

-      - uses: actions/setup-java@dded0888837ed1f317902acf8a20df0ad188d165 # v5.0.0
+      - uses: actions/setup-java@f2beeb24e141e01a676f977032f5a29d81c9e27e # v5.1.0
        with:
          distribution: 'zulu'
          java-version: '17'
@@ -222,6 +222,7 @@ jobs:
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.3'
+          bundler-cache: true
          working-directory: ./mobile/ios

      - name: Install CocoaPods dependencies
@@ -229,13 +230,6 @@ jobs:
        run: |
          pod install

-      - name: Install Fastlane
-        working-directory: ./mobile/ios
-        run: |
-          gem install bundler
-          bundle config set --local path 'vendor/bundle'
-          bundle install
-
      - name: Create API Key
        env:
          API_KEY_ID: ${{ secrets.APP_STORE_CONNECT_API_KEY_ID }}
--- a/.github/workflows/cli.yml
+++ b/.github/workflows/cli.yml
@@ -44,7 +44,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './cli/.nvmrc'
          registry-url: 'https://registry.npmjs.org'
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -57,7 +57,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+        uses: github/codeql-action/init@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
        with:
          languages: ${{ matrix.language }}
          # If you wish to specify custom queries, you can do so here or in a config file.
@@ -70,7 +70,7 @@ jobs:
      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+        uses: github/codeql-action/autobuild@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -83,6 +83,6 @@ jobs:
      #   ./location_of_script_within_repo/buildscript.sh

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@fdbfb4d2750291e159f0156def62b853c2798ca2 # v4.31.5
+        uses: github/codeql-action/analyze@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
        with:
          category: '/language:${{matrix.language}}'
--- a/.github/workflows/docs-build.yml
+++ b/.github/workflows/docs-build.yml
@@ -69,7 +69,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './docs/.nvmrc'
          cache: 'pnpm'
--- a/.github/workflows/fix-format.yml
+++ b/.github/workflows/fix-format.yml
@@ -16,7 +16,7 @@ jobs:
    steps:
      - name: Generate a token
        id: generate-token
-        uses: actions/create-github-app-token@7e473efe3cb98aa54f8d4bac15400b15fad77d94 # v2.2.0
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -32,7 +32,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
--- a/.github/workflows/merge-translations.yml
+++ b/.github/workflows/merge-translations.yml
@@ -31,7 +31,7 @@ jobs:
      - name: Generate a token
        id: generate_token
        if: ${{ inputs.skip != true }}
-        uses: actions/create-github-app-token@7e473efe3cb98aa54f8d4bac15400b15fad77d94 # v2.2.0
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
--- a/.github/workflows/prepare-release.yml
+++ b/.github/workflows/prepare-release.yml
@@ -49,7 +49,7 @@ jobs:
    steps:
      - name: Generate a token
        id: generate-token
-        uses: actions/create-github-app-token@7e473efe3cb98aa54f8d4bac15400b15fad77d94 # v2.2.0
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -68,7 +68,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -126,7 +126,7 @@ jobs:
    steps:
      - name: Generate a token
        id: generate-token
-        uses: actions/create-github-app-token@7e473efe3cb98aa54f8d4bac15400b15fad77d94 # v2.2.0
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -144,7 +144,7 @@ jobs:
          github-token: ${{ steps.generate-token.outputs.token }}

      - name: Create draft release
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
        with:
          draft: true
          tag_name: ${{ env.IMMICH_VERSION }}
--- a/.github/workflows/release-pr.yml
+++ b/.github/workflows/release-pr.yml
@@ -17,7 +17,7 @@ jobs:
    steps:
      - name: Generate a token
        id: generate-token
-        uses: actions/create-github-app-token@7e473efe3cb98aa54f8d4bac15400b15fad77d94 # v2.2.0
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -36,7 +36,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -159,7 +159,7 @@ jobs:

      - name: Create PR
        id: create-pr
-        uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9
+        uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11
        with:
          token: ${{ steps.generate-token.outputs.token }}
          commit-message: 'chore: release ${{ steps.bump-type.outputs.next }}'
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -52,7 +52,7 @@ jobs:
    steps:
      - name: Generate a token
        id: generate-token
-        uses: actions/create-github-app-token@7e473efe3cb98aa54f8d4bac15400b15fad77d94 # v2.2.0
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
        with:
          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -80,7 +80,7 @@ jobs:
          github-token: ${{ steps.generate-token.outputs.token }}

      - name: Create draft release
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
        with:
          tag_name: ${{ steps.version.outputs.result }}
          token: ${{ steps.generate-token.outputs.token }}
--- a/.github/workflows/sdk.yml
+++ b/.github/workflows/sdk.yml
@@ -31,7 +31,7 @@ jobs:
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0

      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+      - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './open-api/typescript-sdk/.nvmrc'
          registry-url: 'https://registry.npmjs.org'
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -77,7 +77,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -121,7 +121,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './cli/.nvmrc'
          cache: 'pnpm'
@@ -168,7 +168,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './cli/.nvmrc'
          cache: 'pnpm'
@@ -210,7 +210,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './web/.nvmrc'
          cache: 'pnpm'
@@ -254,7 +254,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './web/.nvmrc'
          cache: 'pnpm'
@@ -292,7 +292,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './web/.nvmrc'
          cache: 'pnpm'
@@ -340,7 +340,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './e2e/.nvmrc'
          cache: 'pnpm'
@@ -387,7 +387,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -426,7 +426,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './e2e/.nvmrc'
          cache: 'pnpm'
@@ -481,7 +481,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './e2e/.nvmrc'
          cache: 'pnpm'
@@ -617,7 +617,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './.github/.nvmrc'
          cache: 'pnpm'
@@ -668,7 +668,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
@@ -730,7 +730,7 @@ jobs:
      - name: Setup pnpm
        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
      - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
        with:
          node-version-file: './server/.nvmrc'
          cache: 'pnpm'
--- a/cli/package.json
+++ b/cli/package.json
@@ -31,7 +31,7 @@
    "eslint-plugin-unicorn": "^62.0.0",
    "globals": "^16.0.0",
    "mock-fs": "^5.2.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.7.4",
    "prettier-plugin-organize-imports": "^4.0.0",
    "typescript": "^5.3.3",
    "typescript-eslint": "^8.28.0",
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -58,10 +58,6 @@ services:
      IMMICH_THIRD_PARTY_BUG_FEATURE_URL: https://github.com/immich-app/immich/issues
      IMMICH_THIRD_PARTY_DOCUMENTATION_URL: https://docs.immich.app
      IMMICH_THIRD_PARTY_SUPPORT_URL: https://docs.immich.app/community-guides
-    ulimits:
-      nofile:
-        soft: 1048576
-        hard: 1048576
    ports:
      - 9230:9230
      - 9231:9231
@@ -100,10 +96,6 @@ services:
      - app-node_modules:/usr/src/app/node_modules
      - sveltekit:/usr/src/app/web/.svelte-kit
      - coverage:/usr/src/app/web/coverage
-    ulimits:
-      nofile:
-        soft: 1048576
-        hard: 1048576
    restart: unless-stopped
    depends_on:
      immich-server:
@@ -135,7 +127,7 @@ services:

  redis:
    container_name: immich_redis
-    image: docker.io/valkey/valkey:9@sha256:4503e204c900a00ad393bec83c8c7c4c76b0529cd629e23b34b52011aefd1d27
+    image: docker.io/valkey/valkey:9@sha256:fb8d272e529ea567b9bf1302245796f21a2672b8368ca3fcb938ac334e613c8f
    healthcheck:
      test: redis-cli ping || exit 1

--- a/docker/docker-compose.prod.yml
+++ b/docker/docker-compose.prod.yml
@@ -56,7 +56,7 @@ services:

  redis:
    container_name: immich_redis
-    image: docker.io/valkey/valkey:9@sha256:4503e204c900a00ad393bec83c8c7c4c76b0529cd629e23b34b52011aefd1d27
+    image: docker.io/valkey/valkey:9@sha256:fb8d272e529ea567b9bf1302245796f21a2672b8368ca3fcb938ac334e613c8f
    healthcheck:
      test: redis-cli ping || exit 1
    restart: always
@@ -83,7 +83,7 @@ services:
    container_name: immich_prometheus
    ports:
      - 9090:9090
-    image: prom/prometheus@sha256:49214755b6153f90a597adcbff0252cc61069f8ab69ce8411285cd4a560e8038
+    image: prom/prometheus@sha256:d936808bdea528155c0154a922cd42fd75716b8bb7ba302641350f9f3eaeba09
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
      - prometheus-data:/prometheus
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -49,7 +49,7 @@ services:

  redis:
    container_name: immich_redis
-    image: docker.io/valkey/valkey:9@sha256:4503e204c900a00ad393bec83c8c7c4c76b0529cd629e23b34b52011aefd1d27
+    image: docker.io/valkey/valkey:9@sha256:fb8d272e529ea567b9bf1302245796f21a2672b8368ca3fcb938ac334e613c8f
    healthcheck:
      test: redis-cli ping || exit 1
    restart: always
--- a/docs/docs/administration/reverse-proxy.md
+++ b/docs/docs/administration/reverse-proxy.md
@@ -24,6 +24,9 @@ server {
    # disable buffering uploads to prevent OOM on reverse proxy server and make uploads twice as fast (no pause)
    proxy_request_buffering off;

+    # increase body buffer to avoid limiting upload speed
+    client_body_buffer_size 1024k;
+
    # Set headers
    proxy_set_header Host              $host;
    proxy_set_header X-Real-IP         $remote_addr;
@@ -32,8 +35,6 @@ server {

    # enable websockets: http://nginx.org/en/docs/http/websocket.html
    proxy_http_version 1.1;
-    proxy_set_header   Upgrade    $http_upgrade;
-    proxy_set_header   Connection "upgrade";
    proxy_redirect     off;

    # set timeout
@@ -43,6 +44,8 @@ server {

    location / {
        proxy_pass http://<backend_url>:2283;
+        proxy_set_header   Upgrade    $http_upgrade;
+        proxy_set_header   Connection "upgrade";
    }

    # useful when using Let's Encrypt http-01 challenge
--- a/docs/package.json
+++ b/docs/package.json
@@ -38,7 +38,7 @@
    "@docusaurus/module-type-aliases": "~3.9.0",
    "@docusaurus/tsconfig": "^3.7.0",
    "@docusaurus/types": "^3.7.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.7.4",
    "typescript": "^5.1.6"
  },
  "browserslist": {
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -36,14 +36,14 @@
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-unicorn": "^62.0.0",
-    "exiftool-vendored": "^33.0.0",
+    "exiftool-vendored": "^34.0.0",
    "globals": "^16.0.0",
    "jose": "^5.6.3",
    "luxon": "^3.4.4",
    "oidc-provider": "^9.0.0",
    "pg": "^8.11.3",
    "pngjs": "^7.0.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.7.4",
    "prettier-plugin-organize-imports": "^4.0.0",
    "sharp": "^0.34.5",
    "socket.io-client": "^4.7.4",
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -78,7 +78,6 @@
    "exclusion_pattern_description": "Exclusion patterns lets you ignore files and folders when scanning your library. This is useful if you have folders that contain files you don't want to import, such as RAW files.",
    "export_config_as_json_description": "Download the current system config as a JSON file",
    "external_libraries_page_description": "Admin external library page",
-    "external_library_management": "External Library Management",
    "face_detection": "Face detection",
    "face_detection_description": "Detect the faces in assets using machine learning. For videos, only the thumbnail is considered. \"Refresh\" (re-)processes all assets. \"Reset\" additionally clears all current face data. \"Missing\" queues assets that haven't been processed yet. Detected faces will be queued for Facial Recognition after Face Detection is complete, grouping them into existing or new people.",
    "facial_recognition_job_description": "Group detected faces into people. This step runs after Face Detection is complete. \"Reset\" (re-)clusters all faces. \"Missing\" queues faces that don't have a person assigned.",
@@ -653,6 +652,7 @@
  "backup_options_page_title": "Backup options",
  "backup_setting_subtitle": "Manage background and foreground upload settings",
  "backup_settings_subtitle": "Manage upload settings",
+  "backup_upload_details_page_more_details": "Tap for more details",
  "backward": "Backward",
  "biometric_auth_enabled": "Biometric authentication enabled",
  "biometric_locked_out": "You are locked out of biometric authentication",
@@ -719,6 +719,7 @@
  "check_corrupt_asset_backup_button": "Perform check",
  "check_corrupt_asset_backup_description": "Run this check only over Wi-Fi and once all assets have been backed-up. The procedure might take a few minutes.",
  "check_logs": "Check Logs",
+  "checksum": "Checksum",
  "choose_matching_people_to_merge": "Choose matching people to merge",
  "city": "City",
  "clear": "Clear",
@@ -1167,6 +1168,7 @@
  "header_settings_header_name_input": "Header name",
  "header_settings_header_value_input": "Header value",
  "headers_settings_tile_title": "Custom proxy headers",
+  "height": "Height",
  "hi_user": "Hi {name} ({email})",
  "hide_all_people": "Hide all people",
  "hide_gallery": "Hide gallery",
@@ -1289,6 +1291,7 @@
  "local": "Local",
  "local_asset_cast_failed": "Unable to cast an asset that is not uploaded to the server",
  "local_assets": "Local Assets",
+  "local_id": "Local ID",
  "local_media_summary": "Local Media Summary",
  "local_network": "Local network",
  "local_network_sheet_info": "The app will connect to the server through this URL when using the specified Wi-Fi network",
@@ -2219,6 +2222,7 @@
  "week": "Week",
  "welcome": "Welcome",
  "welcome_to_immich": "Welcome to Immich",
+  "width": "Width",
  "wifi_name": "Wi-Fi Name",
  "workflow": "Workflow",
  "wrong_pin_code": "Wrong PIN code",
--- a/mobile/ios/Runner/Info.plist
+++ b/mobile/ios/Runner/Info.plist
@@ -137,8 +137,7 @@
 	<key>NSFaceIDUsageDescription</key>
 	<string>We need to use FaceID to allow access to your locked folder</string>
 	<key>NSLocalNetworkUsageDescription</key>
-	<string>We need local network permission to connect to the local server using IP address and
-      allow the casting feature to work</string>
+	<string>We need local network permission to connect to the local server using IP address and allow the casting feature to work</string>
 	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
 	<string>We require this permission to access the local WiFi name for background upload mechanism</string>
 	<key>NSLocationUsageDescription</key>
--- a/mobile/lib/pages/backup/drift_upload_detail.page.dart
+++ b/mobile/lib/pages/backup/drift_upload_detail.page.dart
@@ -98,7 +98,7 @@ class DriftUploadDetailPage extends ConsumerWidget {
                            ),
                          ),
                        Text(
-                          'Tap for more details',
+                          "backup_upload_details_page_more_details".t(context: context),
                          style: context.textTheme.bodySmall?.copyWith(
                            color: context.colorScheme.onSurface.withValues(alpha: 0.6),
                          ),
@@ -239,14 +239,20 @@ class FileDetailDialog extends ConsumerWidget {
                  const SizedBox(height: 24),
                  if (asset != null) ...[
                    _buildInfoSection(context, [
-                      _buildInfoRow(context, "Filename", path.basename(uploadStatus.filename)),
-                      _buildInfoRow(context, "Local ID", asset.id),
-                      _buildInfoRow(context, "File Size", formatHumanReadableBytes(uploadStatus.fileSize, 2)),
-                      if (asset.width != null) _buildInfoRow(context, "Width", "${asset.width}px"),
-                      if (asset.height != null) _buildInfoRow(context, "Height", "${asset.height}px"),
-                      _buildInfoRow(context, "Created At", asset.createdAt.toString()),
-                      _buildInfoRow(context, "Updated At", asset.updatedAt.toString()),
-                      if (asset.checksum != null) _buildInfoRow(context, "Checksum", asset.checksum!),
+                      _buildInfoRow(context, "filename".t(context: context), path.basename(uploadStatus.filename)),
+                      _buildInfoRow(context, "local_id".t(context: context), asset.id),
+                      _buildInfoRow(
+                        context,
+                        "file_size".t(context: context),
+                        formatHumanReadableBytes(uploadStatus.fileSize, 2),
+                      ),
+                      if (asset.width != null) _buildInfoRow(context, "width".t(context: context), "${asset.width}px"),
+                      if (asset.height != null)
+                        _buildInfoRow(context, "height".t(context: context), "${asset.height}px"),
+                      _buildInfoRow(context, "created_at".t(context: context), asset.createdAt.toString()),
+                      _buildInfoRow(context, "updated_at".t(context: context), asset.updatedAt.toString()),
+                      if (asset.checksum != null)
+                        _buildInfoRow(context, "checksum".t(context: context), asset.checksum!),
                    ]),
                  ],
                ],
--- a/mobile/lib/presentation/pages/dev/feat_in_development.page.dart
+++ b/mobile/lib/presentation/pages/dev/feat_in_development.page.dart
@@ -1,173 +0,0 @@
-import 'dart:async';
-
-import 'package:auto_route/auto_route.dart';
-import 'package:drift/drift.dart' hide Column;
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/providers/background_sync.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/platform.provider.dart';
-import 'package:immich_mobile/providers/user.provider.dart';
-import 'package:immich_mobile/routing/router.dart';
-import 'package:logging/logging.dart';
-
-final _features = [
-  _Feature(
-    name: 'Main Timeline',
-    icon: Icons.timeline_rounded,
-    onTap: (ctx, _) => ctx.pushRoute(const TabShellRoute()),
-  ),
-  _Feature(
-    name: 'Selection Mode Timeline',
-    icon: Icons.developer_mode_rounded,
-    onTap: (ctx, ref) async {
-      final user = ref.watch(currentUserProvider);
-      if (user == null) {
-        return Future.value();
-      }
-
-      final assets = await ref.read(remoteAssetRepositoryProvider).getSome(user.id);
-
-      final selectedAssets = await ctx.pushRoute<Set<BaseAsset>>(
-        DriftAssetSelectionTimelineRoute(lockedSelectionAssets: assets.toSet()),
-      );
-
-      Logger("FeaturesInDevelopment").fine("Selected ${selectedAssets?.length ?? 0} assets");
-
-      return Future.value();
-    },
-  ),
-  _Feature(name: '', icon: Icons.vertical_align_center_sharp, onTap: (_, __) => Future.value()),
-  _Feature(
-    name: 'Sync Local',
-    icon: Icons.photo_album_rounded,
-    onTap: (_, ref) => ref.read(backgroundSyncProvider).syncLocal(),
-  ),
-  _Feature(
-    name: 'Sync Local Full (1)',
-    icon: Icons.photo_library_rounded,
-    onTap: (_, ref) => ref.read(backgroundSyncProvider).syncLocal(full: true),
-  ),
-  _Feature(
-    name: 'Hash Local Assets (2)',
-    icon: Icons.numbers_outlined,
-    onTap: (_, ref) => ref.read(backgroundSyncProvider).hashAssets(),
-  ),
-  _Feature(
-    name: 'Sync Remote (3)',
-    icon: Icons.refresh_rounded,
-    onTap: (_, ref) => ref.read(backgroundSyncProvider).syncRemote(),
-  ),
-  _Feature(
-    name: 'WAL Checkpoint',
-    icon: Icons.save_rounded,
-    onTap: (_, ref) => ref.read(driftProvider).customStatement("pragma wal_checkpoint(truncate)"),
-  ),
-  _Feature(name: '', icon: Icons.vertical_align_center_sharp, onTap: (_, __) => Future.value()),
-  _Feature(
-    name: 'Clear Delta Checkpoint',
-    icon: Icons.delete_rounded,
-    onTap: (_, ref) => ref.read(nativeSyncApiProvider).clearSyncCheckpoint(),
-  ),
-  _Feature(
-    name: 'Clear Local Data',
-    style: const TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
-    icon: Icons.delete_forever_rounded,
-    onTap: (_, ref) async {
-      final db = ref.read(driftProvider);
-      await db.localAssetEntity.deleteAll();
-      await db.localAlbumEntity.deleteAll();
-      await db.localAlbumAssetEntity.deleteAll();
-    },
-  ),
-  _Feature(
-    name: 'Clear Remote Data',
-    style: const TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
-    icon: Icons.delete_sweep_rounded,
-    onTap: (_, ref) async {
-      final db = ref.read(driftProvider);
-      await db.remoteAssetEntity.deleteAll();
-      await db.remoteExifEntity.deleteAll();
-      await db.remoteAlbumEntity.deleteAll();
-      await db.remoteAlbumUserEntity.deleteAll();
-      await db.remoteAlbumAssetEntity.deleteAll();
-      await db.memoryEntity.deleteAll();
-      await db.memoryAssetEntity.deleteAll();
-      await db.stackEntity.deleteAll();
-      await db.personEntity.deleteAll();
-      await db.assetFaceEntity.deleteAll();
-    },
-  ),
-  _Feature(
-    name: 'Local Media Summary',
-    style: const TextStyle(color: Colors.indigo, fontWeight: FontWeight.bold),
-    icon: Icons.table_chart_rounded,
-    onTap: (ctx, _) => ctx.pushRoute(const LocalMediaSummaryRoute()),
-  ),
-  _Feature(
-    name: 'Remote Media Summary',
-    style: const TextStyle(color: Colors.indigo, fontWeight: FontWeight.bold),
-    icon: Icons.summarize_rounded,
-    onTap: (ctx, _) => ctx.pushRoute(const RemoteMediaSummaryRoute()),
-  ),
-  _Feature(
-    name: 'Reset Sqlite',
-    icon: Icons.table_view_rounded,
-    style: const TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
-    onTap: (_, ref) async {
-      final drift = ref.read(driftProvider);
-      // ignore: invalid_use_of_protected_member, invalid_use_of_visible_for_testing_member
-      final migrator = drift.createMigrator();
-      for (final entity in drift.allSchemaEntities) {
-        await migrator.drop(entity);
-        await migrator.create(entity);
-      }
-    },
-  ),
-];
-
-@RoutePage()
-class FeatInDevPage extends StatelessWidget {
-  const FeatInDevPage({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(title: Text('features_in_development'.tr()), centerTitle: true),
-      body: Column(
-        children: [
-          Flexible(
-            flex: 1,
-            child: ListView.builder(
-              itemBuilder: (_, index) {
-                final feat = _features[index];
-                return Consumer(
-                  builder: (ctx, ref, _) => ListTile(
-                    title: Text(feat.name, style: feat.style),
-                    trailing: Icon(feat.icon),
-                    visualDensity: VisualDensity.compact,
-                    onTap: () => unawaited(feat.onTap(ctx, ref)),
-                  ),
-                );
-              },
-              itemCount: _features.length,
-            ),
-          ),
-          const Divider(height: 0),
-        ],
-      ),
-    );
-  }
-}
-
-class _Feature {
-  const _Feature({required this.name, required this.icon, required this.onTap, this.style});
-
-  final String name;
-  final IconData icon;
-  final TextStyle? style;
-  final Future<void> Function(BuildContext, WidgetRef _) onTap;
-}
--- a/mobile/lib/presentation/pages/dev/ui_showcase.page.dart
+++ b/mobile/lib/presentation/pages/dev/ui_showcase.page.dart
@@ -0,0 +1,51 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+List<Widget> _showcaseBuilder(Function(ImmichVariant variant, ImmichColor color) builder) {
+  final children = <Widget>[];
+
+  final items = [
+    (variant: ImmichVariant.filled, title: "Filled Variant"),
+    (variant: ImmichVariant.ghost, title: "Ghost Variant"),
+  ];
+
+  for (final (:variant, :title) in items) {
+    children.add(Text(title));
+    children.add(Row(spacing: 10, children: [for (var color in ImmichColor.values) builder(variant, color)]));
+  }
+
+  return children;
+}
+
+@RoutePage()
+class ImmichUIShowcasePage extends StatelessWidget {
+  const ImmichUIShowcasePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Immich UI Showcase')),
+      body: Padding(
+        padding: const EdgeInsets.all(20),
+        child: SingleChildScrollView(
+          child: Column(
+            spacing: 10,
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text("IconButton", style: context.textTheme.titleLarge),
+              ..._showcaseBuilder(
+                (variant, color) =>
+                    ImmichIconButton(icon: Icons.favorite, color: color, variant: variant, onTap: () {}),
+              ),
+              Text("CloseButton", style: context.textTheme.titleLarge),
+              ..._showcaseBuilder((variant, color) => ImmichCloseButton(color: color, variant: variant, onTap: () {})),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/mobile/lib/presentation/pages/drift_activities.page.dart
+++ b/mobile/lib/presentation/pages/drift_activities.page.dart
@@ -37,7 +37,7 @@ class DriftActivitiesPage extends HookConsumerWidget {
      child: Scaffold(
        appBar: AppBar(
          title: Text(album.name),
-          actions: [const LikeActivityActionButton(menuItem: true)],
+          actions: [const LikeActivityActionButton(iconOnly: true)],
          actionsPadding: const EdgeInsets.only(right: 8),
        ),
        body: activities.widgetWhen(
--- a/mobile/lib/presentation/pages/drift_create_album.page.dart
+++ b/mobile/lib/presentation/pages/drift_create_album.page.dart
@@ -27,8 +27,19 @@ class _DriftCreateAlbumPageState extends ConsumerState<DriftCreateAlbumPage> {
  bool isAlbumTitleTextFieldFocus = false;
  Set<BaseAsset> selectedAssets = {};

+  @override
+  void initState() {
+    super.initState();
+    albumTitleController.addListener(_onTitleChanged);
+  }
+
+  void _onTitleChanged() {
+    setState(() {});
+  }
+
  @override
  void dispose() {
+    albumTitleController.removeListener(_onTitleChanged);
    albumTitleController.dispose();
    albumDescriptionController.dispose();
    albumTitleTextFieldFocusNode.dispose();
--- a/mobile/lib/presentation/pages/editing/drift_crop.page.dart
+++ b/mobile/lib/presentation/pages/editing/drift_crop.page.dart
@@ -9,6 +9,7 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/utils/hooks/crop_controller_hook.dart';
+import 'package:immich_ui/immich_ui.dart';

 /// A widget for cropping an image.
 /// This widget uses [HookWidget] to manage its lifecycle and state. It allows
@@ -30,11 +31,13 @@ class DriftCropImagePage extends HookWidget {
      appBar: AppBar(
        backgroundColor: context.scaffoldBackgroundColor,
        title: Text("crop".tr()),
-        leading: CloseButton(color: context.primaryColor),
+        leading: const ImmichCloseButton(),
        actions: [
-          IconButton(
-            icon: Icon(Icons.done_rounded, color: context.primaryColor, size: 24),
-            onPressed: () async {
+          ImmichIconButton(
+            icon: Icons.done_rounded,
+            color: ImmichColor.primary,
+            variant: ImmichVariant.ghost,
+            onTap: () async {
              final croppedImage = await cropController.croppedImage();
              unawaited(context.pushRoute(DriftEditImageRoute(asset: asset, image: croppedImage, isEdited: true)));
            },
@@ -72,17 +75,17 @@ class DriftCropImagePage extends HookWidget {
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
-                                IconButton(
-                                  icon: Icon(Icons.rotate_left, color: context.themeData.iconTheme.color),
-                                  onPressed: () {
-                                    cropController.rotateLeft();
-                                  },
+                                ImmichIconButton(
+                                  icon: Icons.rotate_left,
+                                  variant: ImmichVariant.ghost,
+                                  color: ImmichColor.secondary,
+                                  onTap: () => cropController.rotateLeft(),
                                ),
-                                IconButton(
-                                  icon: Icon(Icons.rotate_right, color: context.themeData.iconTheme.color),
-                                  onPressed: () {
-                                    cropController.rotateRight();
-                                  },
+                                ImmichIconButton(
+                                  icon: Icons.rotate_right,
+                                  variant: ImmichVariant.ghost,
+                                  color: ImmichColor.secondary,
+                                  onTap: () => cropController.rotateRight(),
                                ),
                              ],
                            ),
--- a/mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/add_action_button.widget.dart
@@ -21,12 +21,36 @@ import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_shee

 enum AddToMenuItem { album, archive, unarchive, lockedFolder }

-class AddActionButton extends ConsumerWidget {
-  const AddActionButton({super.key});
+class AddActionButton extends ConsumerStatefulWidget {
+  const AddActionButton({super.key, this.originalTheme});

-  Future<void> _showAddOptions(BuildContext context, WidgetRef ref) async {
+  final ThemeData? originalTheme;
+
+  @override
+  ConsumerState<AddActionButton> createState() => _AddActionButtonState();
+}
+
+class _AddActionButtonState extends ConsumerState<AddActionButton> {
+  void _handleMenuSelection(AddToMenuItem selected) {
+    switch (selected) {
+      case AddToMenuItem.album:
+        _openAlbumSelector();
+        break;
+      case AddToMenuItem.archive:
+        performArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.unarchive:
+        performUnArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.lockedFolder:
+        performMoveToLockFolderAction(context, ref, source: ActionSource.viewer);
+        break;
+    }
+  }
+
+  List<Widget> _buildMenuChildren() {
    final asset = ref.read(currentAssetNotifier);
-    if (asset == null) return;
+    if (asset == null) return [];

    final user = ref.read(currentUserProvider);
    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
@@ -35,93 +59,57 @@ class AddActionButton extends ConsumerWidget {
    final hasRemote = asset is RemoteAsset;
    final showArchive = isOwner && !isInLockedView && hasRemote && !isArchived;
    final showUnarchive = isOwner && !isInLockedView && hasRemote && isArchived;
-    final menuItemHeight = 30.0;

-    final List<PopupMenuEntry<AddToMenuItem>> items = [
-      PopupMenuItem(
-        enabled: false,
-        textStyle: context.textTheme.labelMedium,
-        height: 40,
-        child: Text("add_to_bottom_bar".tr()),
+    return [
+      Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        child: Text("add_to_bottom_bar".tr(), style: context.textTheme.labelMedium),
      ),
-      PopupMenuItem(
-        height: menuItemHeight,
-        value: AddToMenuItem.album,
-        child: ListTile(leading: const Icon(Icons.photo_album_outlined), title: Text("album".tr())),
+      BaseActionButton(
+        iconData: Icons.photo_album_outlined,
+        label: "album".tr(),
+        menuItem: true,
+        onPressed: () => _handleMenuSelection(AddToMenuItem.album),
      ),
-      const PopupMenuDivider(),
-      PopupMenuItem(enabled: false, textStyle: context.textTheme.labelMedium, height: 40, child: Text("move_to".tr())),
+
      if (isOwner) ...[
+        const Divider(),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          child: Text("move_to".tr(), style: context.textTheme.labelMedium),
+        ),
        if (showArchive)
-          PopupMenuItem(
-            height: menuItemHeight,
-            value: AddToMenuItem.archive,
-            child: ListTile(leading: const Icon(Icons.archive_outlined), title: Text("archive".tr())),
+          BaseActionButton(
+            iconData: Icons.archive_outlined,
+            label: "archive".tr(),
+            menuItem: true,
+            onPressed: () => _handleMenuSelection(AddToMenuItem.archive),
          ),
        if (showUnarchive)
-          PopupMenuItem(
-            height: menuItemHeight,
-            value: AddToMenuItem.unarchive,
-            child: ListTile(leading: const Icon(Icons.unarchive_outlined), title: Text("unarchive".tr())),
+          BaseActionButton(
+            iconData: Icons.unarchive_outlined,
+            label: "unarchive".tr(),
+            menuItem: true,
+            onPressed: () => _handleMenuSelection(AddToMenuItem.unarchive),
          ),
-        PopupMenuItem(
-          height: menuItemHeight,
-          value: AddToMenuItem.lockedFolder,
-          child: ListTile(leading: const Icon(Icons.lock_outline), title: Text("locked_folder".tr())),
+        BaseActionButton(
+          iconData: Icons.lock_outline,
+          label: "locked_folder".tr(),
+          menuItem: true,
+          onPressed: () => _handleMenuSelection(AddToMenuItem.lockedFolder),
        ),
      ],
    ];
-
-    final AddToMenuItem? selected = await showMenu<AddToMenuItem>(
-      context: context,
-      color: context.themeData.scaffoldBackgroundColor,
-      position: _menuPosition(context),
-      items: items,
-      popUpAnimationStyle: AnimationStyle.noAnimation,
-    );
-
-    if (selected == null) {
-      return;
-    }
-
-    switch (selected) {
-      case AddToMenuItem.album:
-        _openAlbumSelector(context, ref);
-        break;
-      case AddToMenuItem.archive:
-        await performArchiveAction(context, ref, source: ActionSource.viewer);
-        break;
-      case AddToMenuItem.unarchive:
-        await performUnArchiveAction(context, ref, source: ActionSource.viewer);
-        break;
-      case AddToMenuItem.lockedFolder:
-        await performMoveToLockFolderAction(context, ref, source: ActionSource.viewer);
-        break;
-    }
  }

-  RelativeRect _menuPosition(BuildContext context) {
-    final renderObject = context.findRenderObject();
-    if (renderObject is! RenderBox) {
-      return RelativeRect.fill;
-    }
-
-    final size = renderObject.size;
-    final position = renderObject.localToGlobal(Offset.zero);
-
-    return RelativeRect.fromLTRB(position.dx, position.dy - size.height - 200, position.dx + size.width, position.dy);
-  }
-
-  void _openAlbumSelector(BuildContext context, WidgetRef ref) {
+  void _openAlbumSelector() {
    final currentAsset = ref.read(currentAssetNotifier);
    if (currentAsset == null) {
      ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
      return;
    }

-    final List<Widget> slivers = [
-      AlbumSelector(onAlbumSelected: (album) => _addCurrentAssetToAlbum(context, ref, album)),
-    ];
+    final List<Widget> slivers = [AlbumSelector(onAlbumSelected: (album) => _addCurrentAssetToAlbum(album))];

    showModalBottomSheet(
      context: context,
@@ -141,7 +129,7 @@ class AddActionButton extends ConsumerWidget {
    );
  }

-  Future<void> _addCurrentAssetToAlbum(BuildContext context, WidgetRef ref, RemoteAlbum album) async {
+  Future<void> _addCurrentAssetToAlbum(RemoteAlbum album) async {
    final latest = ref.read(currentAssetNotifier);

    if (latest == null) {
@@ -174,17 +162,38 @@ class AddActionButton extends ConsumerWidget {
  }

  @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
    final asset = ref.watch(currentAssetNotifier);
    if (asset == null) {
      return const SizedBox.shrink();
    }
-    return Builder(
-      builder: (buttonContext) {
+
+    final themeData = widget.originalTheme ?? context.themeData;
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(themeData.scaffoldBackgroundColor),
+        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
+      ),
+      menuChildren: widget.originalTheme != null
+          ? [
+              Theme(
+                data: widget.originalTheme!,
+                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: _buildMenuChildren()),
+              ),
+            ]
+          : _buildMenuChildren(),
+      builder: (context, controller, child) {
        return BaseActionButton(
          iconData: Icons.add,
          label: "add_to_bottom_bar".tr(),
-          onPressed: () => _showAddOptions(buttonContext, ref),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
        );
      },
    );
--- a/mobile/lib/presentation/widgets/action_buttons/base_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/base_action_button.widget.dart
@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';

-class BaseActionButton extends StatelessWidget {
+class BaseActionButton extends ConsumerWidget {
  const BaseActionButton({
    super.key,
    required this.label,
@@ -11,6 +12,7 @@ class BaseActionButton extends StatelessWidget {
    this.onLongPressed,
    this.maxWidth = 90.0,
    this.minWidth,
+    this.iconOnly = false,
    this.menuItem = false,
  });

@@ -19,25 +21,42 @@ class BaseActionButton extends StatelessWidget {
  final Color? iconColor;
  final double maxWidth;
  final double? minWidth;
+
+  /// When true, renders only an IconButton without text label
+  final bool iconOnly;
+
+  /// When true, renders as a MenuItemButton for use in MenuAnchor menus
  final bool menuItem;
  final void Function()? onPressed;
  final void Function()? onLongPressed;

  @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
    final miniWidth = minWidth ?? (context.isMobile ? context.width / 4.5 : 75.0);
    final iconTheme = IconTheme.of(context);
    final iconSize = iconTheme.size ?? 24.0;
    final iconColor = this.iconColor ?? iconTheme.color ?? context.themeData.iconTheme.color;
    final textColor = context.themeData.textTheme.labelLarge?.color;

-    if (menuItem) {
+    if (iconOnly) {
      return IconButton(
        onPressed: onPressed,
        icon: Icon(iconData, size: iconSize, color: iconColor),
      );
    }

+    if (menuItem) {
+      final theme = context.themeData;
+      final effectiveIconColor = iconColor ?? theme.iconTheme.color ?? theme.colorScheme.onSurfaceVariant;
+
+      return MenuItemButton(
+        style: MenuItemButton.styleFrom(alignment: Alignment.centerLeft, padding: const EdgeInsets.all(16)),
+        leadingIcon: Icon(iconData, color: effectiveIconColor),
+        onPressed: onPressed,
+        child: Text(label, style: theme.textTheme.labelLarge?.copyWith(fontSize: 16)),
+      );
+    }
+
    return ConstrainedBox(
      constraints: BoxConstraints(maxWidth: maxWidth),
      child: MaterialButton(
--- a/mobile/lib/presentation/widgets/action_buttons/cast_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/cast_action_button.widget.dart
@@ -7,8 +7,9 @@ import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';

 class CastActionButton extends ConsumerWidget {
-  const CastActionButton({super.key, this.menuItem = true});
+  const CastActionButton({super.key, this.iconOnly = false, this.menuItem = false});

+  final bool iconOnly;
  final bool menuItem;

  @override
@@ -22,6 +23,7 @@ class CastActionButton extends ConsumerWidget {
      onPressed: () {
        showDialog(context: context, builder: (context) => const CastDialog());
      },
+      iconOnly: iconOnly,
      menuItem: menuItem,
    );
  }
--- a/mobile/lib/presentation/widgets/action_buttons/download_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/download_action_button.widget.dart
@@ -10,8 +10,9 @@ import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';

 class DownloadActionButton extends ConsumerWidget {
  final ActionSource source;
+  final bool iconOnly;
  final bool menuItem;
-  const DownloadActionButton({super.key, required this.source, this.menuItem = false});
+  const DownloadActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});

  void _onTap(BuildContext context, WidgetRef ref, BackgroundSyncManager backgroundSyncManager) async {
    if (!context.mounted) {
@@ -38,6 +39,7 @@ class DownloadActionButton extends ConsumerWidget {
      iconData: Icons.download,
      maxWidth: 95,
      label: "download".t(context: context),
+      iconOnly: iconOnly,
      menuItem: menuItem,
      onPressed: () => _onTap(context, ref, backgroundManager),
    );
--- a/mobile/lib/presentation/widgets/action_buttons/favorite_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/favorite_action_button.widget.dart
@@ -10,9 +10,10 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';

 class FavoriteActionButton extends ConsumerWidget {
  final ActionSource source;
+  final bool iconOnly;
  final bool menuItem;

-  const FavoriteActionButton({super.key, required this.source, this.menuItem = false});
+  const FavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});

  void _onTap(BuildContext context, WidgetRef ref) async {
    if (!context.mounted) {
@@ -44,6 +45,7 @@ class FavoriteActionButton extends ConsumerWidget {
    return BaseActionButton(
      iconData: Icons.favorite_border_rounded,
      label: "favorite".t(context: context),
+      iconOnly: iconOnly,
      menuItem: menuItem,
      onPressed: () => _onTap(context, ref),
    );
--- a/mobile/lib/presentation/widgets/action_buttons/like_activity_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/like_activity_action_button.widget.dart
@@ -12,8 +12,9 @@ import 'package:immich_mobile/providers/infrastructure/current_album.provider.da
 import 'package:immich_mobile/providers/user.provider.dart';

 class LikeActivityActionButton extends ConsumerWidget {
-  const LikeActivityActionButton({super.key, this.menuItem = false});
+  const LikeActivityActionButton({super.key, this.iconOnly = false, this.menuItem = false});

+  final bool iconOnly;
  final bool menuItem;

  @override
@@ -49,6 +50,7 @@ class LikeActivityActionButton extends ConsumerWidget {
          iconData: liked != null ? Icons.favorite : Icons.favorite_border,
          label: "like".t(context: context),
          onPressed: () => onTap(liked),
+          iconOnly: iconOnly,
          menuItem: menuItem,
        );
      },
@@ -57,6 +59,7 @@ class LikeActivityActionButton extends ConsumerWidget {
      loading: () => BaseActionButton(
        iconData: Icons.favorite_border,
        label: "like".t(context: context),
+        iconOnly: iconOnly,
        menuItem: menuItem,
      ),
      error: (error, stack) => Text('error_saving_image'.tr(args: [error.toString()])),
--- a/mobile/lib/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart
@@ -5,8 +5,9 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_bu
 import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';

 class MotionPhotoActionButton extends ConsumerWidget {
-  const MotionPhotoActionButton({super.key, this.menuItem = true});
+  const MotionPhotoActionButton({super.key, this.iconOnly = false, this.menuItem = false});

+  final bool iconOnly;
  final bool menuItem;

  @override
@@ -17,6 +18,7 @@ class MotionPhotoActionButton extends ConsumerWidget {
      iconData: isPlaying ? Icons.motion_photos_pause_outlined : Icons.play_circle_outline_rounded,
      label: "play_motion_photo".t(context: context),
      onPressed: ref.read(isPlayingMotionVideoProvider.notifier).toggle,
+      iconOnly: iconOnly,
      menuItem: menuItem,
    );
  }
--- a/mobile/lib/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart
+++ b/mobile/lib/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart
@@ -10,9 +10,10 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';

 class UnFavoriteActionButton extends ConsumerWidget {
  final ActionSource source;
+  final bool iconOnly;
  final bool menuItem;

-  const UnFavoriteActionButton({super.key, required this.source, this.menuItem = false});
+  const UnFavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});

  void _onTap(BuildContext context, WidgetRef ref) async {
    if (!context.mounted) {
@@ -45,6 +46,7 @@ class UnFavoriteActionButton extends ConsumerWidget {
      iconData: Icons.favorite_rounded,
      label: "unfavorite".t(context: context),
      onPressed: () => _onTap(context, ref),
+      iconOnly: iconOnly,
      menuItem: menuItem,
    );
  }
--- a/mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart
@@ -38,11 +38,13 @@ class ViewerBottomBar extends ConsumerWidget {
      opacity = 0;
    }

+    final originalTheme = context.themeData;
+
    final actions = <Widget>[
      const ShareActionButton(source: ActionSource.viewer),
      if (asset.isLocalOnly) const UploadActionButton(source: ActionSource.viewer),
      if (asset.type == AssetType.image) const EditImageActionButton(),
-      if (asset.hasRemote) const AddActionButton(),
+      if (asset.hasRemote) AddActionButton(originalTheme: originalTheme),

      if (isOwner) ...[
        asset.isLocalOnly
--- a/mobile/lib/presentation/widgets/asset_viewer/top_app_bar.widget.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/top_app_bar.widget.dart
@@ -4,25 +4,19 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/events.model.dart';
-import 'package:immich_mobile/domain/services/timeline.service.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/extensions/translate_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/cast_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
-import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/current_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/readonly_mode.provider.dart';
-import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/routes.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
-import 'package:immich_mobile/routing/router.dart';

 class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
  const ViewerTopAppBar({super.key});
@@ -41,15 +35,6 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
    final isInLockedView = ref.watch(inLockedViewProvider);
    final isReadonlyModeEnabled = ref.watch(readonlyModeProvider);

-    final timelineOrigin = ref.read(timelineServiceProvider).origin;
-    final showViewInTimelineButton =
-        timelineOrigin != TimelineOrigin.main &&
-        timelineOrigin != TimelineOrigin.deepLink &&
-        timelineOrigin != TimelineOrigin.trash &&
-        timelineOrigin != TimelineOrigin.archive &&
-        timelineOrigin != TimelineOrigin.localAlbum &&
-        isOwner;
-
    final isShowingSheet = ref.watch(assetViewerProvider.select((state) => state.showingBottomSheet));
    int opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));
@@ -62,11 +47,10 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
      opacity = 0;
    }

-    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+    final originalTheme = context.themeData;

    final actions = <Widget>[
-      if (asset.isRemoteOnly) const DownloadActionButton(source: ActionSource.viewer, menuItem: true),
-      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
+      if (asset.isMotionPhoto) const MotionPhotoActionButton(iconOnly: true),
      if (album != null && album.isActivityEnabled && album.isShared)
        IconButton(
          icon: const Icon(Icons.chat_outlined),
@@ -74,28 +58,16 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
            EventStream.shared.emit(const ViewerOpenBottomSheetEvent(activitiesMode: true));
          },
        ),
-      if (showViewInTimelineButton)
-        IconButton(
-          onPressed: () async {
-            await context.maybePop();
-            await context.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
-            EventStream.shared.emit(ScrollToDateEvent(asset.createdAt));
-          },
-          icon: const Icon(Icons.image_search),
-          tooltip: 'view_in_timeline'.t(context: context),
-        ),
+
      if (asset.hasRemote && isOwner && !asset.isFavorite)
-        const FavoriteActionButton(source: ActionSource.viewer, menuItem: true),
+        const FavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
      if (asset.hasRemote && isOwner && asset.isFavorite)
-        const UnFavoriteActionButton(source: ActionSource.viewer, menuItem: true),
-      if (asset.isMotionPhoto) const MotionPhotoActionButton(menuItem: true),
-      const _KebabMenu(),
+        const UnFavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
+
+      ViewerKebabMenu(originalTheme: originalTheme),
    ];

-    final lockedViewActions = <Widget>[
-      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
-      const _KebabMenu(),
-    ];
+    final lockedViewActions = <Widget>[ViewerKebabMenu(originalTheme: originalTheme)];

    return IgnorePointer(
      ignoring: opacity < 255,
@@ -122,20 +94,6 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
  Size get preferredSize => const Size.fromHeight(60.0);
 }

-class _KebabMenu extends ConsumerWidget {
-  const _KebabMenu();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return IconButton(
-      onPressed: () {
-        EventStream.shared.emit(const ViewerOpenBottomSheetEvent());
-      },
-      icon: const Icon(Icons.more_vert_rounded),
-    );
-  }
-}
-
 class _AppBarBackButton extends ConsumerWidget {
  const _AppBarBackButton();

--- a/mobile/lib/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart
+++ b/mobile/lib/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart
@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/utils/action_button.utils.dart';
+
+class ViewerKebabMenu extends ConsumerWidget {
+  const ViewerKebabMenu({super.key, this.originalTheme});
+
+  final ThemeData? originalTheme;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final user = ref.watch(currentUserProvider);
+    final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+    final timelineOrigin = ref.read(timelineServiceProvider).origin;
+
+    final kebabContext = ViewerKebabMenuButtonContext(
+      asset: asset,
+      isOwner: isOwner,
+      isCasting: isCasting,
+      timelineOrigin: timelineOrigin,
+      originalTheme: originalTheme,
+    );
+
+    final menuChildren = ViewerKebabMenuButtonBuilder.build(kebabContext, context, ref);
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(context.themeData.scaffoldBackgroundColor),
+        surfaceTintColor: const WidgetStatePropertyAll(Colors.grey),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 6)),
+      ),
+      menuChildren: [
+        ConstrainedBox(
+          constraints: const BoxConstraints(minWidth: 150),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: menuChildren,
+          ),
+        ),
+      ],
+      builder: (context, controller, child) {
+        return IconButton(
+          icon: const Icon(Icons.more_vert_rounded),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+        );
+      },
+    );
+  }
+}
--- a/mobile/lib/presentation/widgets/timeline/timeline.widget.dart
+++ b/mobile/lib/presentation/widgets/timeline/timeline.widget.dart
@@ -324,7 +324,11 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
          final topPadding = context.padding.top + (widget.appBar == null ? 0 : kToolbarHeight) + 10;

          const scrubberBottomPadding = 100.0;
-          final bottomPadding = context.padding.bottom + (widget.appBar == null ? 0 : scrubberBottomPadding);
+          const bottomSheetOpenModifier = 120.0;
+          final bottomPadding =
+              context.padding.bottom +
+              (widget.appBar == null ? 0 : scrubberBottomPadding) +
+              (isMultiSelectEnabled ? bottomSheetOpenModifier : 0);

          final grid = CustomScrollView(
            primary: true,
@@ -347,7 +351,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
                  addRepaintBoundaries: false,
                ),
              ),
-              const SliverPadding(padding: EdgeInsets.only(bottom: scrubberBottomPadding)),
+              SliverPadding(padding: EdgeInsets.only(bottom: bottomPadding)),
            ],
          );

--- a/mobile/lib/routing/router.dart
+++ b/mobile/lib/routing/router.dart
@@ -78,9 +78,9 @@ import 'package:immich_mobile/pages/search/recently_taken.page.dart';
 import 'package:immich_mobile/pages/search/search.page.dart';
 import 'package:immich_mobile/pages/settings/sync_status.page.dart';
 import 'package:immich_mobile/pages/share_intent/share_intent.page.dart';
-import 'package:immich_mobile/presentation/pages/dev/feat_in_development.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/main_timeline.page.dart';
 import 'package:immich_mobile/presentation/pages/dev/media_stat.page.dart';
+import 'package:immich_mobile/presentation/pages/dev/ui_showcase.page.dart';
 import 'package:immich_mobile/presentation/pages/download_info.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_activities.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_album.page.dart';
@@ -167,7 +167,7 @@ class AppRouter extends RootStackRouter {
    AutoRoute(page: LoginRoute.page, guards: [_duplicateGuard]),
    AutoRoute(page: ChangePasswordRoute.page),
    AutoRoute(page: SearchRoute.page, guards: [_authGuard, _duplicateGuard], maintainState: false),
-    CustomRoute(
+    AutoRoute(
      page: TabControllerRoute.page,
      guards: [_authGuard, _duplicateGuard],
      children: [
@@ -176,9 +176,8 @@ class AppRouter extends RootStackRouter {
        AutoRoute(page: LibraryRoute.page, guards: [_authGuard, _duplicateGuard]),
        AutoRoute(page: AlbumsRoute.page, guards: [_authGuard, _duplicateGuard]),
      ],
-      transitionsBuilder: TransitionsBuilders.fadeIn,
    ),
-    CustomRoute(
+    AutoRoute(
      page: TabShellRoute.page,
      guards: [_authGuard, _duplicateGuard],
      children: [
@@ -187,7 +186,6 @@ class AppRouter extends RootStackRouter {
        AutoRoute(page: DriftLibraryRoute.page, guards: [_authGuard, _duplicateGuard]),
        AutoRoute(page: DriftAlbumsRoute.page, guards: [_authGuard, _duplicateGuard]),
      ],
-      transitionsBuilder: TransitionsBuilders.fadeIn,
    ),
    CustomRoute(
      page: GalleryViewerRoute.page,
@@ -288,7 +286,6 @@ class AppRouter extends RootStackRouter {
    AutoRoute(page: ShareIntentRoute.page, guards: [_authGuard, _duplicateGuard]),
    AutoRoute(page: LockedRoute.page, guards: [_authGuard, _lockedGuard, _duplicateGuard]),
    AutoRoute(page: PinAuthRoute.page, guards: [_authGuard, _duplicateGuard]),
-    AutoRoute(page: FeatInDevRoute.page, guards: [_authGuard, _duplicateGuard]),
    AutoRoute(page: LocalMediaSummaryRoute.page, guards: [_authGuard, _duplicateGuard]),
    AutoRoute(page: RemoteMediaSummaryRoute.page, guards: [_authGuard, _duplicateGuard]),
    AutoRoute(page: DriftBackupRoute.page, guards: [_authGuard, _duplicateGuard]),
@@ -340,6 +337,7 @@ class AppRouter extends RootStackRouter {
    AutoRoute(page: DriftBackupAssetDetailRoute.page, guards: [_authGuard, _duplicateGuard]),
    AutoRoute(page: AssetTroubleshootRoute.page, guards: [_authGuard, _duplicateGuard]),
    AutoRoute(page: DownloadInfoRoute.page, guards: [_authGuard, _duplicateGuard]),
+    AutoRoute(page: ImmichUIShowcaseRoute.page, guards: [_authGuard, _duplicateGuard]),
    // required to handle all deeplinks in deep_link.service.dart
    // auto_route_library#1722
    RedirectRoute(path: '*', redirectTo: '/'),
--- a/mobile/lib/routing/router.gr.dart
+++ b/mobile/lib/routing/router.gr.dart
@@ -1648,22 +1648,6 @@ class FavoritesRoute extends PageRouteInfo<void> {
  );
 }

-/// generated route for
-/// [FeatInDevPage]
-class FeatInDevRoute extends PageRouteInfo<void> {
-  const FeatInDevRoute({List<PageRouteInfo>? children})
-    : super(FeatInDevRoute.name, initialChildren: children);
-
-  static const String name = 'FeatInDevRoute';
-
-  static PageInfo page = PageInfo(
-    name,
-    builder: (data) {
-      return const FeatInDevPage();
-    },
-  );
-}
-
 /// generated route for
 /// [FilterImagePage]
 class FilterImageRoute extends PageRouteInfo<FilterImageRouteArgs> {
@@ -1831,6 +1815,22 @@ class HeaderSettingsRoute extends PageRouteInfo<void> {
  );
 }

+/// generated route for
+/// [ImmichUIShowcasePage]
+class ImmichUIShowcaseRoute extends PageRouteInfo<void> {
+  const ImmichUIShowcaseRoute({List<PageRouteInfo>? children})
+    : super(ImmichUIShowcaseRoute.name, initialChildren: children);
+
+  static const String name = 'ImmichUIShowcaseRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      return const ImmichUIShowcasePage();
+    },
+  );
+}
+
 /// generated route for
 /// [LibraryPage]
 class LibraryRoute extends PageRouteInfo<void> {
--- a/mobile/lib/utils/action_button.utils.dart
+++ b/mobile/lib/utils/action_button.utils.dart
@@ -1,9 +1,18 @@
-import 'package:flutter/widgets.dart';
+import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/advanced_info_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/archive_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/cast_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_local_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart';
@@ -19,6 +28,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_b
 import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/upload_action_button.widget.dart';
+import 'package:immich_mobile/routing/router.dart';

 class ActionButtonContext {
  final BaseAsset asset;
@@ -164,3 +174,98 @@ class ActionButtonBuilder {
    return _actionTypes.where((type) => type.shouldShow(context)).map((type) => type.buildButton(context)).toList();
  }
 }
+
+class ViewerKebabMenuButtonContext {
+  final BaseAsset asset;
+  final bool isOwner;
+  final bool isCasting;
+  final TimelineOrigin timelineOrigin;
+  final ThemeData? originalTheme;
+
+  const ViewerKebabMenuButtonContext({
+    required this.asset,
+    required this.isOwner,
+    required this.isCasting,
+    required this.timelineOrigin,
+    this.originalTheme,
+  });
+}
+
+enum ViewerKebabMenuButtonType {
+  openInfo,
+  viewInTimeline,
+  cast,
+  download;
+
+  /// Defines which group each button belongs to.
+  /// Buttons in the same group will be displayed together,
+  /// with dividers separating different groups.
+  int get group => switch (this) {
+    ViewerKebabMenuButtonType.openInfo => 0,
+    ViewerKebabMenuButtonType.viewInTimeline => 1,
+    ViewerKebabMenuButtonType.cast => 1,
+    ViewerKebabMenuButtonType.download => 1,
+  };
+
+  bool shouldShow(ViewerKebabMenuButtonContext context) {
+    return switch (this) {
+      ViewerKebabMenuButtonType.openInfo => true,
+      ViewerKebabMenuButtonType.viewInTimeline =>
+        context.timelineOrigin != TimelineOrigin.main &&
+            context.timelineOrigin != TimelineOrigin.deepLink &&
+            context.timelineOrigin != TimelineOrigin.trash &&
+            context.timelineOrigin != TimelineOrigin.archive &&
+            context.timelineOrigin != TimelineOrigin.localAlbum &&
+            context.isOwner,
+      ViewerKebabMenuButtonType.cast => context.isCasting || context.asset.hasRemote,
+      ViewerKebabMenuButtonType.download => context.asset.isRemoteOnly,
+    };
+  }
+
+  ConsumerWidget buildButton(ViewerKebabMenuButtonContext context, BuildContext buildContext) {
+    return switch (this) {
+      ViewerKebabMenuButtonType.openInfo => BaseActionButton(
+        label: 'info'.tr(),
+        iconData: Icons.info_outline,
+        iconColor: context.originalTheme?.iconTheme.color,
+        menuItem: true,
+        onPressed: () => EventStream.shared.emit(const ViewerOpenBottomSheetEvent()),
+      ),
+
+      ViewerKebabMenuButtonType.viewInTimeline => BaseActionButton(
+        label: 'view_in_timeline'.t(context: buildContext),
+        iconData: Icons.image_search,
+        iconColor: context.originalTheme?.iconTheme.color,
+        menuItem: true,
+        onPressed: () async {
+          await buildContext.maybePop();
+          await buildContext.navigateTo(const TabShellRoute(children: [MainTimelineRoute()]));
+          EventStream.shared.emit(ScrollToDateEvent(context.asset.createdAt));
+        },
+      ),
+      ViewerKebabMenuButtonType.cast => const CastActionButton(menuItem: true),
+      ViewerKebabMenuButtonType.download => const DownloadActionButton(source: ActionSource.viewer, menuItem: true),
+    };
+  }
+}
+
+class ViewerKebabMenuButtonBuilder {
+  static List<Widget> build(ViewerKebabMenuButtonContext context, BuildContext buildContext, WidgetRef ref) {
+    final visibleButtons = ViewerKebabMenuButtonType.values.where((type) => type.shouldShow(context)).toList();
+
+    if (visibleButtons.isEmpty) return [];
+
+    final List<Widget> result = [];
+    int? lastGroup;
+
+    for (final type in visibleButtons) {
+      if (lastGroup != null && type.group != lastGroup) {
+        result.add(const Divider(height: 1));
+      }
+      result.add(type.buildButton(context, buildContext).build(buildContext, ref));
+      lastGroup = type.group;
+    }
+
+    return result;
+  }
+}
--- a/mobile/lib/widgets/common/app_bar_dialog/server_update_notification.dart
+++ b/mobile/lib/widgets/common/app_bar_dialog/server_update_notification.dart
@@ -53,16 +53,18 @@ class ServerUpdateNotification extends HookConsumerWidget {
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
-            Text(
-              serverInfoState.versionStatus.message,
-              textAlign: TextAlign.start,
-              maxLines: 3,
-              overflow: TextOverflow.ellipsis,
-              style: context.textTheme.labelLarge,
+            Expanded(
+              child: Text(
+                serverInfoState.versionStatus.message,
+                textAlign: TextAlign.start,
+                maxLines: 3,
+                overflow: TextOverflow.ellipsis,
+                style: context.textTheme.labelLarge,
+              ),
            ),
            if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate ||
                serverInfoState.versionStatus == VersionStatus.clientOutOfDate) ...[
-              const Spacer(),
+              const SizedBox(width: 8),
              TextButton(
                onPressed: openUpdateLink,
                style: TextButton.styleFrom(
--- a/mobile/lib/widgets/common/immich_app_bar.dart
+++ b/mobile/lib/widgets/common/immich_app_bar.dart
@@ -155,8 +155,8 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
          ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
        if (kDebugMode || kProfileMode)
          IconButton(
-            icon: const Icon(Icons.science_rounded),
-            onPressed: () => context.pushRoute(const FeatInDevRoute()),
+            icon: const Icon(Icons.palette_rounded),
+            onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
          ),
        if (isCasting)
          Padding(
--- a/mobile/lib/widgets/common/immich_sliver_app_bar.dart
+++ b/mobile/lib/widgets/common/immich_sliver_app_bar.dart
@@ -74,8 +74,8 @@ class ImmichSliverAppBar extends ConsumerWidget {
            ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
          if ((kDebugMode || kProfileMode) && !isReadonlyModeEnabled)
            IconButton(
-              icon: const Icon(Icons.science_rounded),
-              onPressed: () => context.pushRoute(const FeatInDevRoute()),
+              icon: const Icon(Icons.palette_rounded),
+              onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
            ),
          if (showUploadButton && !isReadonlyModeEnabled)
            const Padding(padding: EdgeInsets.only(right: 20), child: _BackupIndicator()),
--- a/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart
+++ b/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart
@@ -2,26 +2,27 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/theme_extensions.dart';

-class EntitiyCountTile extends StatelessWidget {
+class EntityCountTile extends StatelessWidget {
  final int count;
  final String label;
  final IconData icon;

-  const EntitiyCountTile({super.key, required this.count, required this.label, required this.icon});
+  const EntityCountTile({super.key, required this.count, required this.label, required this.icon});

  String zeroPadding(int number, int targetWidth) {
    final numStr = number.toString();
    return numStr.length < targetWidth ? "0" * (targetWidth - numStr.length) : "";
  }

-  int calculateMaxDigits(double availableWidth) {
-    const double charWidth = 11.0;
-    return (availableWidth / charWidth).floor().clamp(1, 8);
-  }
-
  @override
  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    final availableWidth = (screenWidth - 32 - 8) / 2;
+    const double charWidth = 11.0;
+    final maxDigits = ((availableWidth - 32) / charWidth).floor().clamp(1, 8);
+
    return Container(
+      height: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: context.colorScheme.surfaceContainerLow,
@@ -29,7 +30,6 @@ class EntitiyCountTile extends StatelessWidget {
        border: Border.all(width: 0.5, color: context.colorScheme.outline.withAlpha(25)),
      ),
      child: Column(
-        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // Icon and Label
@@ -38,33 +38,30 @@ class EntitiyCountTile extends StatelessWidget {
            children: [
              Icon(icon, color: context.primaryColor),
              const SizedBox(width: 8),
-              Text(
-                label,
-                style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+              Flexible(
+                child: Text(
+                  label,
+                  style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16),
+                ),
              ),
            ],
          ),
-          const SizedBox(height: 12),
          // Number
-          LayoutBuilder(
-            builder: (context, constraints) {
-              final maxDigits = calculateMaxDigits(constraints.maxWidth);
-              return RichText(
-                text: TextSpan(
-                  style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', fontWeight: FontWeight.w600),
-                  children: [
-                    TextSpan(
-                      text: zeroPadding(count, maxDigits),
-                      style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)),
-                    ),
-                    TextSpan(
-                      text: count.toString(),
-                      style: TextStyle(color: context.primaryColor),
-                    ),
-                  ],
+          const Spacer(),
+          RichText(
+            text: TextSpan(
+              style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', fontWeight: FontWeight.w600),
+              children: [
+                TextSpan(
+                  text: zeroPadding(count, maxDigits),
+                  style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)),
                ),
-              );
-            },
+                TextSpan(
+                  text: count.toString(),
+                  style: TextStyle(color: context.primaryColor),
+                ),
+              ],
+            ),
          ),
        ],
      ),
--- a/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart
+++ b/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart
@@ -282,76 +282,87 @@ class _SyncStatsCounts extends ConsumerWidget {
            _SectionHeaderText(text: "assets".t(context: context)),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: Flex(
-                direction: Axis.horizontal,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                spacing: 8.0,
-                children: [
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "local".t(context: context),
-                      count: localAssetCount,
-                      icon: Icons.smartphone,
+              // 1. Wrap in IntrinsicHeight
+              child: IntrinsicHeight(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  // 2. Stretch children vertically to fill the IntrinsicHeight
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  spacing: 8.0,
+                  children: [
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "local".t(context: context),
+                        count: localAssetCount,
+                        icon: Icons.smartphone,
+                      ),
                    ),
-                  ),
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "remote".t(context: context),
-                      count: remoteAssetCount,
-                      icon: Icons.cloud,
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "remote".t(context: context),
+                        count: remoteAssetCount,
+                        icon: Icons.cloud,
+                      ),
                    ),
-                  ),
-                ],
+                  ],
+                ),
              ),
            ),
            _SectionHeaderText(text: "albums".t(context: context)),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: Flex(
-                direction: Axis.horizontal,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                spacing: 8.0,
-                children: [
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "local".t(context: context),
-                      count: localAlbumCount,
-                      icon: Icons.smartphone,
+              child: IntrinsicHeight(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.stretch, // Added
+                  spacing: 8.0,
+                  children: [
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "local".t(context: context),
+                        count: localAlbumCount,
+                        icon: Icons.smartphone,
+                      ),
                    ),
-                  ),
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "remote".t(context: context),
-                      count: remoteAlbumCount,
-                      icon: Icons.cloud,
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "remote".t(context: context),
+                        count: remoteAlbumCount,
+                        icon: Icons.cloud,
+                      ),
                    ),
-                  ),
-                ],
+                  ],
+                ),
              ),
            ),
            _SectionHeaderText(text: "other".t(context: context)),
            Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-              child: Flex(
-                direction: Axis.horizontal,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                spacing: 8.0,
-                children: [
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "memories".t(context: context),
-                      count: memoryCount,
-                      icon: Icons.calendar_today,
+              child: IntrinsicHeight(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.stretch, // Added
+                  spacing: 8.0,
+                  children: [
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "memories".t(context: context),
+                        count: memoryCount,
+                        icon: Icons.calendar_today,
+                      ),
                    ),
-                  ),
-                  Expanded(
-                    child: EntitiyCountTile(
-                      label: "hashed_assets".t(context: context),
-                      count: localHashedCount,
-                      icon: Icons.tag,
+                    Expanded(
+                      child: EntityCountTile(
+                        label: "hashed_assets".t(context: context),
+                        count: localHashedCount,
+                        icon: Icons.tag,
+                      ),
                    ),
-                  ),
-                ],
+                  ],
+                ),
              ),
            ),
            // To be removed once the experimental feature is stable
@@ -364,26 +375,29 @@ class _SyncStatsCounts extends ConsumerWidget {
                  return counts.when(
                    data: (c) => Padding(
                      padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
-                      child: Flex(
-                        direction: Axis.horizontal,
-                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        spacing: 8.0,
-                        children: [
-                          Expanded(
-                            child: EntitiyCountTile(
-                              label: "local".t(context: context),
-                              count: c.total,
-                              icon: Icons.delete_outline,
+                      child: IntrinsicHeight(
+                        child: Flex(
+                          direction: Axis.horizontal,
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          crossAxisAlignment: CrossAxisAlignment.stretch, // Added
+                          spacing: 8.0,
+                          children: [
+                            Expanded(
+                              child: EntityCountTile(
+                                label: "local".t(context: context),
+                                count: c.total,
+                                icon: Icons.delete_outline,
+                              ),
                            ),
-                          ),
-                          Expanded(
-                            child: EntitiyCountTile(
-                              label: "hashed_assets".t(context: context),
-                              count: c.hashed,
-                              icon: Icons.tag,
+                            Expanded(
+                              child: EntityCountTile(
+                                label: "hashed_assets".t(context: context),
+                                count: c.hashed,
+                                icon: Icons.tag,
+                              ),
                            ),
-                          ),
-                        ],
+                          ],
+                        ),
                      ),
                    ),
                    loading: () => const CircularProgressIndicator(),
--- a/mobile/packages/ui/lib/immich_ui.dart
+++ b/mobile/packages/ui/lib/immich_ui.dart
@@ -0,0 +1,3 @@
+export 'src/buttons/close_button.dart';
+export 'src/buttons/icon_button.dart';
+export 'src/types.dart';
--- a/mobile/packages/ui/lib/src/buttons/close_button.dart
+++ b/mobile/packages/ui/lib/src/buttons/close_button.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/src/buttons/icon_button.dart';
+import 'package:immich_ui/src/types.dart';
+
+class ImmichCloseButton extends StatelessWidget {
+  final VoidCallback? onTap;
+  final ImmichVariant variant;
+  final ImmichColor color;
+
+  const ImmichCloseButton({
+    super.key,
+    this.onTap,
+    this.color = ImmichColor.primary,
+    this.variant = ImmichVariant.ghost,
+  });
+
+  @override
+  Widget build(BuildContext context) => ImmichIconButton(
+        key: key,
+        icon: Icons.close,
+        color: color,
+        variant: variant,
+        onTap: onTap ?? () => Navigator.of(context).pop(),
+      );
+}
--- a/mobile/packages/ui/lib/src/buttons/icon_button.dart
+++ b/mobile/packages/ui/lib/src/buttons/icon_button.dart
@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/src/types.dart';
+
+class ImmichIconButton extends StatelessWidget {
+  final IconData icon;
+  final VoidCallback onTap;
+  final ImmichVariant variant;
+  final ImmichColor color;
+
+  const ImmichIconButton({
+    super.key,
+    required this.icon,
+    required this.onTap,
+    this.color = ImmichColor.primary,
+    this.variant = ImmichVariant.filled,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final background = switch (variant) {
+      ImmichVariant.filled => switch (color) {
+          ImmichColor.primary => Theme.of(context).colorScheme.primary,
+          ImmichColor.secondary => Theme.of(context).colorScheme.secondary,
+        },
+      ImmichVariant.ghost => Colors.transparent,
+    };
+
+    final foreground = switch (variant) {
+      ImmichVariant.filled => switch (color) {
+          ImmichColor.primary => Theme.of(context).colorScheme.onPrimary,
+          ImmichColor.secondary => Theme.of(context).colorScheme.onSecondary,
+        },
+      ImmichVariant.ghost => switch (color) {
+          ImmichColor.primary => Theme.of(context).colorScheme.primary,
+          ImmichColor.secondary => Theme.of(context).colorScheme.secondary,
+        },
+    };
+
+    return IconButton(
+      icon: Icon(icon),
+      onPressed: onTap,
+      style: IconButton.styleFrom(
+        backgroundColor: background,
+        foregroundColor: foreground,
+      ),
+    );
+  }
+}
--- a/mobile/packages/ui/lib/src/types.dart
+++ b/mobile/packages/ui/lib/src/types.dart
@@ -0,0 +1,9 @@
+enum ImmichVariant {
+  filled,
+  ghost,
+}
+
+enum ImmichColor {
+  primary,
+  secondary,
+}
--- a/mobile/packages/ui/pubspec.lock
+++ b/mobile/packages/ui/pubspec.lock
@@ -0,0 +1,55 @@
+# Generated by pub
+# See https://dart.dev/tools/pub/glossary#lockfile
+packages:
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      sha256: f71061c654a3380576a52b451dd5532377954cf9dbd272a78fc8479606670803
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.19.1"
+  flutter:
+    dependency: "direct main"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.11.1"
+  meta:
+    dependency: transitive
+    description:
+      name: meta
+      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.16.0"
+  sky_engine:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  vector_math:
+    dependency: transitive
+    description:
+      name: vector_math
+      sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+sdks:
+  dart: ">=3.8.0-0 <4.0.0"
--- a/mobile/packages/ui/pubspec.yaml
+++ b/mobile/packages/ui/pubspec.yaml
@@ -0,0 +1,12 @@
+name: immich_ui
+publish_to: none
+
+environment:
+  sdk: '>=3.0.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+flutter:
+  uses-material-design: true
--- a/mobile/pubspec.lock
+++ b/mobile/pubspec.lock
@@ -1015,6 +1015,13 @@ packages:
      relative: true
    source: path
    version: "0.0.0"
+  immich_ui:
+    dependency: "direct main"
+    description:
+      path: "packages/ui"
+      relative: true
+    source: path
+    version: "0.0.0"
  integration_test:
    dependency: "direct dev"
    description: flutter
--- a/mobile/pubspec.yaml
+++ b/mobile/pubspec.yaml
@@ -43,6 +43,8 @@ dependencies:
  hooks_riverpod: ^2.6.1
  http: ^1.5.0
  image_picker: ^1.2.0
+  immich_ui:
+    path: './packages/ui'
  intl: ^0.20.2
  isar:
    git:
--- a/plugins/package-lock.json
+++ b/plugins/package-lock.json
@@ -15,9 +15,9 @@
      }
    },
    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.0.tgz",
-      "integrity": "sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.1.tgz",
+      "integrity": "sha512-HHB50pdsBX6k47S4u5g/CaLjqS3qwaOVE5ILsq64jyzgMhLuCuZ8rGzM9yhsAjfjkbgUPMzZEPa7DAp7yz6vuA==",
      "cpu": [
        "ppc64"
      ],
@@ -32,9 +32,9 @@
      }
    },
    "node_modules/@esbuild/android-arm": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.0.tgz",
-      "integrity": "sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.1.tgz",
+      "integrity": "sha512-kFqa6/UcaTbGm/NncN9kzVOODjhZW8e+FRdSeypWe6j33gzclHtwlANs26JrupOntlcWmB0u8+8HZo8s7thHvg==",
      "cpu": [
        "arm"
      ],
@@ -49,9 +49,9 @@
      }
    },
    "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.0.tgz",
-      "integrity": "sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.1.tgz",
+      "integrity": "sha512-45fuKmAJpxnQWixOGCrS+ro4Uvb4Re9+UTieUY2f8AEc+t7d4AaZ6eUJ3Hva7dtrxAAWHtlEFsXFMAgNnGU9uQ==",
      "cpu": [
        "arm64"
      ],
@@ -66,9 +66,9 @@
      }
    },
    "node_modules/@esbuild/android-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.0.tgz",
-      "integrity": "sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.1.tgz",
+      "integrity": "sha512-LBEpOz0BsgMEeHgenf5aqmn/lLNTFXVfoWMUox8CtWWYK9X4jmQzWjoGoNb8lmAYml/tQ/Ysvm8q7szu7BoxRQ==",
      "cpu": [
        "x64"
      ],
@@ -83,9 +83,9 @@
      }
    },
    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.0.tgz",
-      "integrity": "sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.1.tgz",
+      "integrity": "sha512-veg7fL8eMSCVKL7IW4pxb54QERtedFDfY/ASrumK/SbFsXnRazxY4YykN/THYqFnFwJ0aVjiUrVG2PwcdAEqQQ==",
      "cpu": [
        "arm64"
      ],
@@ -100,9 +100,9 @@
      }
    },
    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.0.tgz",
-      "integrity": "sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.1.tgz",
+      "integrity": "sha512-+3ELd+nTzhfWb07Vol7EZ+5PTbJ/u74nC6iv4/lwIU99Ip5uuY6QoIf0Hn4m2HoV0qcnRivN3KSqc+FyCHjoVQ==",
      "cpu": [
        "x64"
      ],
@@ -117,9 +117,9 @@
      }
    },
    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.0.tgz",
-      "integrity": "sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.1.tgz",
+      "integrity": "sha512-/8Rfgns4XD9XOSXlzUDepG8PX+AVWHliYlUkFI3K3GB6tqbdjYqdhcb4BKRd7C0BhZSoaCxhv8kTcBrcZWP+xg==",
      "cpu": [
        "arm64"
      ],
@@ -134,9 +134,9 @@
      }
    },
    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.0.tgz",
-      "integrity": "sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.1.tgz",
+      "integrity": "sha512-GITpD8dK9C+r+5yRT/UKVT36h/DQLOHdwGVwwoHidlnA168oD3uxA878XloXebK4Ul3gDBBIvEdL7go9gCUFzQ==",
      "cpu": [
        "x64"
      ],
@@ -151,9 +151,9 @@
      }
    },
    "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.0.tgz",
-      "integrity": "sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.1.tgz",
+      "integrity": "sha512-ieMID0JRZY/ZeCrsFQ3Y3NlHNCqIhTprJfDgSB3/lv5jJZ8FX3hqPyXWhe+gvS5ARMBJ242PM+VNz/ctNj//eA==",
      "cpu": [
        "arm"
      ],
@@ -168,9 +168,9 @@
      }
    },
    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.0.tgz",
-      "integrity": "sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.1.tgz",
+      "integrity": "sha512-W9//kCrh/6in9rWIBdKaMtuTTzNj6jSeG/haWBADqLLa9P8O5YSRDzgD5y9QBok4AYlzS6ARHifAb75V6G670Q==",
      "cpu": [
        "arm64"
      ],
@@ -185,9 +185,9 @@
      }
    },
    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.0.tgz",
-      "integrity": "sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.1.tgz",
+      "integrity": "sha512-VIUV4z8GD8rtSVMfAj1aXFahsi/+tcoXXNYmXgzISL+KB381vbSTNdeZHHHIYqFyXcoEhu9n5cT+05tRv13rlw==",
      "cpu": [
        "ia32"
      ],
@@ -202,9 +202,9 @@
      }
    },
    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.0.tgz",
-      "integrity": "sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.1.tgz",
+      "integrity": "sha512-l4rfiiJRN7sTNI//ff65zJ9z8U+k6zcCg0LALU5iEWzY+a1mVZ8iWC1k5EsNKThZ7XCQ6YWtsZ8EWYm7r1UEsg==",
      "cpu": [
        "loong64"
      ],
@@ -219,9 +219,9 @@
      }
    },
    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.0.tgz",
-      "integrity": "sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.1.tgz",
+      "integrity": "sha512-U0bEuAOLvO/DWFdygTHWY8C067FXz+UbzKgxYhXC0fDieFa0kDIra1FAhsAARRJbvEyso8aAqvPdNxzWuStBnA==",
      "cpu": [
        "mips64el"
      ],
@@ -236,9 +236,9 @@
      }
    },
    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.0.tgz",
-      "integrity": "sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.1.tgz",
+      "integrity": "sha512-NzdQ/Xwu6vPSf/GkdmRNsOfIeSGnh7muundsWItmBsVpMoNPVpM61qNzAVY3pZ1glzzAxLR40UyYM23eaDDbYQ==",
      "cpu": [
        "ppc64"
      ],
@@ -253,9 +253,9 @@
      }
    },
    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.0.tgz",
-      "integrity": "sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.1.tgz",
+      "integrity": "sha512-7zlw8p3IApcsN7mFw0O1Z1PyEk6PlKMu18roImfl3iQHTnr/yAfYv6s4hXPidbDoI2Q0pW+5xeoM4eTCC0UdrQ==",
      "cpu": [
        "riscv64"
      ],
@@ -270,9 +270,9 @@
      }
    },
    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.0.tgz",
-      "integrity": "sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.1.tgz",
+      "integrity": "sha512-cGj5wli+G+nkVQdZo3+7FDKC25Uh4ZVwOAK6A06Hsvgr8WqBBuOy/1s+PUEd/6Je+vjfm6stX0kmib5b/O2Ykw==",
      "cpu": [
        "s390x"
      ],
@@ -287,9 +287,9 @@
      }
    },
    "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.0.tgz",
-      "integrity": "sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.1.tgz",
+      "integrity": "sha512-z3H/HYI9MM0HTv3hQZ81f+AKb+yEoCRlUby1F80vbQ5XdzEMyY/9iNlAmhqiBKw4MJXwfgsh7ERGEOhrM1niMA==",
      "cpu": [
        "x64"
      ],
@@ -304,9 +304,9 @@
      }
    },
    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.0.tgz",
-      "integrity": "sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.1.tgz",
+      "integrity": "sha512-wzC24DxAvk8Em01YmVXyjl96Mr+ecTPyOuADAvjGg+fyBpGmxmcr2E5ttf7Im8D0sXZihpxzO1isus8MdjMCXQ==",
      "cpu": [
        "arm64"
      ],
@@ -321,9 +321,9 @@
      }
    },
    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.0.tgz",
-      "integrity": "sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.1.tgz",
+      "integrity": "sha512-1YQ8ybGi2yIXswu6eNzJsrYIGFpnlzEWRl6iR5gMgmsrR0FcNoV1m9k9sc3PuP5rUBLshOZylc9nqSgymI+TYg==",
      "cpu": [
        "x64"
      ],
@@ -338,9 +338,9 @@
      }
    },
    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.0.tgz",
-      "integrity": "sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.1.tgz",
+      "integrity": "sha512-5Z+DzLCrq5wmU7RDaMDe2DVXMRm2tTDvX2KU14JJVBN2CT/qov7XVix85QoJqHltpvAOZUAc3ndU56HSMWrv8g==",
      "cpu": [
        "arm64"
      ],
@@ -355,9 +355,9 @@
      }
    },
    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.0.tgz",
-      "integrity": "sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.1.tgz",
+      "integrity": "sha512-Q73ENzIdPF5jap4wqLtsfh8YbYSZ8Q0wnxplOlZUOyZy7B4ZKW8DXGWgTCZmF8VWD7Tciwv5F4NsRf6vYlZtqg==",
      "cpu": [
        "x64"
      ],
@@ -372,9 +372,9 @@
      }
    },
    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.0.tgz",
-      "integrity": "sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.1.tgz",
+      "integrity": "sha512-ajbHrGM/XiK+sXM0JzEbJAen+0E+JMQZ2l4RR4VFwvV9JEERx+oxtgkpoKv1SevhjavK2z2ReHk32pjzktWbGg==",
      "cpu": [
        "arm64"
      ],
@@ -389,9 +389,9 @@
      }
    },
    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.0.tgz",
-      "integrity": "sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.1.tgz",
+      "integrity": "sha512-IPUW+y4VIjuDVn+OMzHc5FV4GubIwPnsz6ubkvN8cuhEqH81NovB53IUlrlBkPMEPxvNnf79MGBoz8rZ2iW8HA==",
      "cpu": [
        "x64"
      ],
@@ -406,9 +406,9 @@
      }
    },
    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.0.tgz",
-      "integrity": "sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.1.tgz",
+      "integrity": "sha512-RIVRWiljWA6CdVu8zkWcRmGP7iRRIIwvhDKem8UMBjPql2TXM5PkDVvvrzMtj1V+WFPB4K7zkIGM7VzRtFkjdg==",
      "cpu": [
        "arm64"
      ],
@@ -423,9 +423,9 @@
      }
    },
    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.0.tgz",
-      "integrity": "sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.1.tgz",
+      "integrity": "sha512-2BR5M8CPbptC1AK5JbJT1fWrHLvejwZidKx3UMSF0ecHMa+smhi16drIrCEggkgviBwLYd5nwrFLSl5Kho96RQ==",
      "cpu": [
        "ia32"
      ],
@@ -440,9 +440,9 @@
      }
    },
    "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.0.tgz",
-      "integrity": "sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.1.tgz",
+      "integrity": "sha512-d5X6RMYv6taIymSk8JBP+nxv8DQAMY6A51GPgusqLdK9wBz5wWIXy1KjTck6HnjE9hqJzJRdk+1p/t5soSbCtw==",
      "cpu": [
        "x64"
      ],
@@ -467,9 +467,9 @@
      }
    },
    "node_modules/esbuild": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.0.tgz",
-      "integrity": "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==",
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.1.tgz",
+      "integrity": "sha512-yY35KZckJJuVVPXpvjgxiCuVEJT67F6zDeVTv4rizyPrfGBUpZQsvmxnN+C371c2esD/hNMjj4tpBhuueLN7aA==",
      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
@@ -480,32 +480,32 @@
        "node": ">=18"
      },
      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.0",
-        "@esbuild/android-arm": "0.27.0",
-        "@esbuild/android-arm64": "0.27.0",
-        "@esbuild/android-x64": "0.27.0",
-        "@esbuild/darwin-arm64": "0.27.0",
-        "@esbuild/darwin-x64": "0.27.0",
-        "@esbuild/freebsd-arm64": "0.27.0",
-        "@esbuild/freebsd-x64": "0.27.0",
-        "@esbuild/linux-arm": "0.27.0",
-        "@esbuild/linux-arm64": "0.27.0",
-        "@esbuild/linux-ia32": "0.27.0",
-        "@esbuild/linux-loong64": "0.27.0",
-        "@esbuild/linux-mips64el": "0.27.0",
-        "@esbuild/linux-ppc64": "0.27.0",
-        "@esbuild/linux-riscv64": "0.27.0",
-        "@esbuild/linux-s390x": "0.27.0",
-        "@esbuild/linux-x64": "0.27.0",
-        "@esbuild/netbsd-arm64": "0.27.0",
-        "@esbuild/netbsd-x64": "0.27.0",
-        "@esbuild/openbsd-arm64": "0.27.0",
-        "@esbuild/openbsd-x64": "0.27.0",
-        "@esbuild/openharmony-arm64": "0.27.0",
-        "@esbuild/sunos-x64": "0.27.0",
-        "@esbuild/win32-arm64": "0.27.0",
-        "@esbuild/win32-ia32": "0.27.0",
-        "@esbuild/win32-x64": "0.27.0"
+        "@esbuild/aix-ppc64": "0.27.1",
+        "@esbuild/android-arm": "0.27.1",
+        "@esbuild/android-arm64": "0.27.1",
+        "@esbuild/android-x64": "0.27.1",
+        "@esbuild/darwin-arm64": "0.27.1",
+        "@esbuild/darwin-x64": "0.27.1",
+        "@esbuild/freebsd-arm64": "0.27.1",
+        "@esbuild/freebsd-x64": "0.27.1",
+        "@esbuild/linux-arm": "0.27.1",
+        "@esbuild/linux-arm64": "0.27.1",
+        "@esbuild/linux-ia32": "0.27.1",
+        "@esbuild/linux-loong64": "0.27.1",
+        "@esbuild/linux-mips64el": "0.27.1",
+        "@esbuild/linux-ppc64": "0.27.1",
+        "@esbuild/linux-riscv64": "0.27.1",
+        "@esbuild/linux-s390x": "0.27.1",
+        "@esbuild/linux-x64": "0.27.1",
+        "@esbuild/netbsd-arm64": "0.27.1",
+        "@esbuild/netbsd-x64": "0.27.1",
+        "@esbuild/openbsd-arm64": "0.27.1",
+        "@esbuild/openbsd-x64": "0.27.1",
+        "@esbuild/openharmony-arm64": "0.27.1",
+        "@esbuild/sunos-x64": "0.27.1",
+        "@esbuild/win32-arm64": "0.27.1",
+        "@esbuild/win32-ia32": "0.27.1",
+        "@esbuild/win32-x64": "0.27.1"
      }
    },
    "node_modules/typescript": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/server/Dockerfile
+++ b/server/Dockerfile
@@ -50,13 +50,15 @@ RUN --mount=type=cache,id=pnpm-cli,target=/buildcache/pnpm-store \

 FROM builder AS plugins

+ARG TARGETPLATFORM
+
 COPY --from=ghcr.io/jdx/mise:2025.11.3@sha256:ac26f5978c0e2783f3e68e58ce75eddb83e41b89bf8747c503bac2aa9baf22c5 /usr/local/bin/mise /usr/local/bin/mise

 WORKDIR /usr/src/app
 COPY ./plugins/mise.toml ./plugins/
 ENV MISE_TRUSTED_CONFIG_PATHS=/usr/src/app/plugins/mise.toml
 ENV MISE_DATA_DIR=/buildcache/mise
-RUN --mount=type=cache,id=mise-tools,target=/buildcache/mise \
+RUN --mount=type=cache,id=mise-tools-${TARGETPLATFORM},target=/buildcache/mise \
  mise install --cd plugins

 COPY ./plugins ./plugins/
@@ -66,7 +68,7 @@ RUN --mount=type=cache,id=pnpm-plugins,target=/buildcache/pnpm-store \
  --mount=type=bind,source=.pnpmfile.cjs,target=.pnpmfile.cjs \
  --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
  --mount=type=bind,source=pnpm-workspace.yaml,target=pnpm-workspace.yaml \
-  --mount=type=cache,id=mise-tools,target=/buildcache/mise \
+  --mount=type=cache,id=mise-tools-${TARGETPLATFORM},target=/buildcache/mise \
  cd plugins && mise run build

 FROM ghcr.io/immich-app/base-server-prod:202511261514@sha256:c04c1c38dd90e53455b180aedf93c3c63474c8d20ffe2c6d7a3a61a2181e6d29
--- a/server/package.json
+++ b/server/package.json
@@ -70,7 +70,7 @@
    "cookie": "^1.0.2",
    "cookie-parser": "^1.4.7",
    "cron": "4.3.3",
-    "exiftool-vendored": "^33.0.0",
+    "exiftool-vendored": "^34.0.0",
    "express": "^5.1.0",
    "fast-glob": "^3.3.2",
    "fluent-ffmpeg": "^2.1.2",
@@ -153,7 +153,7 @@
    "mock-fs": "^5.2.0",
    "node-gyp": "^12.0.0",
    "pngjs": "^7.0.0",
-    "prettier": "^3.0.2",
+    "prettier": "^3.7.4",
    "prettier-plugin-organize-imports": "^4.0.0",
    "sql-formatter": "^15.0.0",
    "supertest": "^7.1.0",
--- a/server/src/sql-tools/decorators/column.decorator.ts
+++ b/server/src/sql-tools/decorators/column.decorator.ts
@@ -2,7 +2,7 @@ import { asOptions } from 'src/sql-tools/helpers';
 import { register } from 'src/sql-tools/register';
 import { ColumnStorage, ColumnType, DatabaseEnum } from 'src/sql-tools/types';

-export type ColumnValue = null | boolean | string | number | object | Date | (() => string);
+export type ColumnValue = null | boolean | string | number | Array<unknown> | object | Date | (() => string);

 export type ColumnBaseOptions = {
  name?: string;
--- a/server/src/sql-tools/helpers.ts
+++ b/server/src/sql-tools/helpers.ts
@@ -39,6 +39,10 @@ export const fromColumnValue = (columnValue?: ColumnValue) => {
    return `'${value.toISOString()}'`;
  }

+  if (Array.isArray(value)) {
+    return "'{}'";
+  }
+
  return `'${String(value)}'`;
 };

--- a/server/src/sql-tools/schema-diff.spec.ts
+++ b/server/src/sql-tools/schema-diff.spec.ts
@@ -394,6 +394,20 @@ describe(schemaDiff.name, () => {

        expect(diff.items).toEqual([]);
      });
+
+      it('should support arrays, ignoring types', () => {
+        const diff = schemaDiff(
+          fromColumn({ name: 'column1', type: 'character varying', isArray: true, default: "'{}'" }),
+          fromColumn({
+            name: 'column1',
+            type: 'character varying',
+            isArray: true,
+            default: "'{}'::character varying[]",
+          }),
+        );
+
+        expect(diff.items).toEqual([]);
+      });
    });
  });

--- a/server/test/sql-tools/column-default-array.stub.ts
+++ b/server/test/sql-tools/column-default-array.stub.ts
@@ -0,0 +1,40 @@
+import { Column, DatabaseSchema, Table } from 'src/sql-tools';
+
+@Table()
+export class Table1 {
+  @Column({ type: 'character varying', array: true, default: [] })
+  column1!: string[];
+}
+
+export const description = 'should register a table with a column with a default value (array)';
+export const schema: DatabaseSchema = {
+  databaseName: 'postgres',
+  schemaName: 'public',
+  functions: [],
+  enums: [],
+  extensions: [],
+  parameters: [],
+  overrides: [],
+  tables: [
+    {
+      name: 'table1',
+      columns: [
+        {
+          name: 'column1',
+          tableName: 'table1',
+          type: 'character varying',
+          nullable: false,
+          isArray: true,
+          primary: false,
+          synchronize: true,
+          default: "'{}'",
+        },
+      ],
+      indexes: [],
+      triggers: [],
+      constraints: [],
+      synchronize: true,
+    },
+  ],
+  warnings: [],
+};
--- a/web/package.json
+++ b/web/package.json
@@ -9,7 +9,7 @@
    "build:stats": "BUILD_STATS=true vite build",
    "package": "svelte-kit package",
    "preview": "vite preview",
-    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings",
+    "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",
@@ -28,7 +28,7 @@
    "@formatjs/icu-messageformat-parser": "^2.9.8",
    "@immich/justified-layout-wasm": "^0.4.3",
    "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.49.2",
+    "@immich/ui": "^0.50.1",
    "@mapbox/mapbox-gl-rtl-text": "0.2.3",
    "@mdi/js": "^7.4.47",
    "@photo-sphere-viewer/core": "^5.14.0",
@@ -93,12 +93,12 @@
    "factory.ts": "^1.4.1",
    "globals": "^16.0.0",
    "happy-dom": "^20.0.0",
-    "prettier": "^3.4.2",
+    "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.45.2",
+    "svelte": "5.45.5",
    "svelte-check": "^4.1.5",
    "svelte-eslint-parser": "^1.3.3",
    "tailwindcss": "^4.1.7",
--- 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/HeaderButton.svelte
+++ b/web/src/lib/components/HeaderButton.svelte
@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { type ActionItem, Button, Text } from '@immich/ui';
-
-  type Props = {
-    action: ActionItem;
-    title?: string;
-  };
-
-  const { action, title: titleAttr }: 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={titleAttr}>
-    <Text class="hidden md:block">{title}</Text>
-  </Button>
-{/if}
--- a/web/src/lib/components/album-page/albums-table-row.svelte
+++ b/web/src/lib/components/album-page/albums-table-row.svelte
@@ -32,7 +32,7 @@
 </script>

 <tr
-  class="flex h-12 w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
+  class="flex w-full place-items-center border-3 border-transparent p-2 text-center even:bg-subtle/20 odd:bg-subtle/80 hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:px-5 md:py-2"
  onclick={() => goto(resolve(`${AppRoute.ALBUMS}/${album.id}`))}
  {oncontextmenu}
 >
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -126,6 +126,7 @@

  const onMouseLeave = () => {
    mouseOver = false;
+    onMouseEvent?.({ isMouseOver: false, selectedGroupIndex: groupIndex });
  };

  let timer: ReturnType<typeof setTimeout> | null = null;
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.svelte
@@ -1,19 +1,33 @@
 <script lang="ts">
  import PageContent from '$lib/components/layouts/PageContent.svelte';
-  import TitleLayout from '$lib/components/layouts/TitleLayout.svelte';
  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
  import AdminSidebar from '$lib/sidebars/AdminSidebar.svelte';
  import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable, type BreadcrumbItem } from '@immich/ui';
+  import type { HeaderButtonActionItem } from '$lib/types';
+  import {
+    AppShell,
+    AppShellHeader,
+    AppShellSidebar,
+    Breadcrumbs,
+    Button,
+    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[];
-    buttons?: Snippet;
+    actions?: Array<HeaderButtonActionItem | MenuItemType>;
    children?: Snippet;
  };

-  let { breadcrumbs, buttons, children }: Props = $props();
+  let { breadcrumbs, actions = [], children }: Props = $props();
 </script>

 <AppShell>
@@ -24,11 +38,37 @@
    <AdminSidebar />
  </AppShellSidebar>

-  <TitleLayout {breadcrumbs} {buttons}>
+  <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 actions.length > 0}
+        <div class="hidden md:block">
+          <HStack gap={0}>
+            {#each actions as action, i (i)}
+              {#if !isMenuItemType(action) && (action.$if?.() ?? true)}
+                <Button
+                  variant="ghost"
+                  size="small"
+                  color={action.color ?? 'secondary'}
+                  leadingIcon={action.icon}
+                  onclick={() => action.onAction(action)}
+                  title={action.data?.title}
+                >
+                  {action.title}
+                </Button>
+              {/if}
+            {/each}
+          </HStack>
+        </div>
+
+        <ContextMenuButton aria-label={$t('open')} items={actions} class="md:hidden" />
+      {/if}
+    </div>
    <Scrollable class="grow">
      <PageContent>
        {@render children?.()}
      </PageContent>
    </Scrollable>
-  </TitleLayout>
+  </div>
 </AppShell>
--- a/web/src/lib/components/layouts/TitleLayout.svelte
+++ b/web/src/lib/components/layouts/TitleLayout.svelte
@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { Breadcrumbs, type BreadcrumbItem } from '@immich/ui';
-  import { mdiSlashForward } from '@mdi/js';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    breadcrumbs: BreadcrumbItem[];
-    buttons?: Snippet;
-    children?: Snippet;
-  };
-
-  let { breadcrumbs, buttons, children }: Props = $props();
-</script>
-
-<div class="h-full flex flex-col">
-  <div class="flex h-16 w-full place-items-center justify-between border-b p-2">
-    <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
-    {@render buttons?.()}
-  </div>
-  {@render children?.()}
-</div>
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -9,9 +9,9 @@
  import { generateId } from '$lib/utils/generate-id';
  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
  import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
-  import { IconButton, modalManager } from '@immich/ui';
+  import { Button, IconButton, modalManager } from '@immich/ui';
  import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
-  import { onDestroy, tick } from 'svelte';
+  import { onDestroy, onMount, tick } from 'svelte';
  import { t } from 'svelte-i18n';
  import SearchHistoryBox from './search-history-box.svelte';

@@ -31,6 +31,8 @@
  let isSearchSuggestions = $state(false);
  let selectedId: string | undefined = $state();
  let close: (() => Promise<void>) | undefined;
+  let showSearchTypeDropdown = $state(false);
+  let currentSearchType = $state('smart');

  const listboxId = generateId();
  const searchTypeId = generateId();
@@ -70,6 +72,7 @@

  const onFocusIn = () => {
    searchStore.isSearchEnabled = true;
+    getSearchType();
  };

  const onFocusOut = () => {
@@ -98,6 +101,9 @@
    const searchResult = await result.onClose;
    close = undefined;

+    // Refresh search type after modal closes
+    getSearchType();
+
    if (!searchResult) {
      return;
    }
@@ -139,6 +145,7 @@

  const onEscape = () => {
    closeDropdown();
+    closeSearchTypeDropdown();
  };

  const onArrow = async (direction: 1 | -1) => {
@@ -168,6 +175,20 @@
    searchHistoryBox?.clearSelection();
  };

+  const toggleSearchTypeDropdown = () => {
+    showSearchTypeDropdown = !showSearchTypeDropdown;
+  };
+
+  const closeSearchTypeDropdown = () => {
+    showSearchTypeDropdown = false;
+  };
+
+  const selectSearchType = (type: string) => {
+    localStorage.setItem('searchQueryType', type);
+    currentSearchType = type;
+    showSearchTypeDropdown = false;
+  };
+
  const onsubmit = (event: Event) => {
    event.preventDefault();
    onSubmit();
@@ -180,17 +201,18 @@
      case 'metadata':
      case 'description':
      case 'ocr': {
+        currentSearchType = searchType;
        return searchType;
      }
      default: {
+        currentSearchType = 'smart';
        return 'smart';
      }
    }
  }

  function getSearchTypeText(): string {
-    const searchType = getSearchType();
-    switch (searchType) {
+    switch (currentSearchType) {
      case 'smart': {
        return $t('context');
      }
@@ -203,8 +225,22 @@
      case 'ocr': {
        return $t('ocr');
      }
+      default: {
+        return $t('context');
+      }
    }
  }
+
+  onMount(() => {
+    getSearchType();
+  });
+
+  const searchTypes = [
+    { value: 'smart', label: () => $t('context') },
+    { value: 'metadata', label: () => $t('filename') },
+    { value: 'description', label: () => $t('description') },
+    { value: 'ocr', label: () => $t('ocr') },
+  ] as const;
 </script>

 <svelte:document
@@ -293,11 +329,34 @@
        class:max-md:hidden={value}
        class:end-28={value.length > 0}
      >
-        <p
-          class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs"
-        >
-          {getSearchTypeText()}
-        </p>
+        <div class="relative">
+          <Button
+            class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs hover:opacity-80 transition-opacity cursor-pointer"
+            onclick={toggleSearchTypeDropdown}
+            aria-expanded={showSearchTypeDropdown}
+            aria-haspopup="listbox"
+          >
+            {getSearchTypeText()}
+          </Button>
+
+          {#if showSearchTypeDropdown}
+            <div
+              class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999"
+              use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}
+            >
+              {#each searchTypes as searchType (searchType.value)}
+                <button
+                  type="button"
+                  class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
+                         {currentSearchType === searchType.value ? 'bg-gray-100 dark:bg-gray-700' : ''}"
+                  onclick={() => selectSearchType(searchType.value)}
+                >
+                  {searchType.label()}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
      </div>
    {/if}

--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -188,7 +188,7 @@
      // the performance benefits of deferred layouts while still supporting deep linking
      // to assets at the end of the timeline.
      timelineManager.isScrollingOnLoad = true;
-      const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
+      const monthGroup = await timelineManager.findMonthGroupForAsset({ id: assetId });
      if (!monthGroup) {
        return false;
      }
--- a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
@@ -1,5 +1,5 @@
 import { plainDateTimeCompare, type TimelineYearMonth } from '$lib/utils/timeline-util';
-import { AssetOrder } from '@immich/sdk';
+import { AssetOrder, type AssetResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import type { MonthGroup } from '../month-group.svelte';
 import { TimelineManager } from '../timeline-manager.svelte';
@@ -7,12 +7,16 @@ import type { AssetDescriptor, Direction, TimelineAsset } from '../types';

 export async function getAssetWithOffset(
  timelineManager: TimelineManager,
-  assetDescriptor: AssetDescriptor,
+  assetDescriptor: AssetDescriptor | AssetResponseDto,
  interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
  direction: Direction,
 ): Promise<TimelineAsset | undefined> {
-  const { asset, monthGroup } = findMonthGroupForAsset(timelineManager, assetDescriptor.id) ?? {};
-  if (!monthGroup || !asset) {
+  const monthGroup = await timelineManager.findMonthGroupForAsset(assetDescriptor);
+  if (!monthGroup) {
+    return;
+  }
+  const asset = monthGroup.findAssetById(assetDescriptor);
+  if (!asset) {
    return;
  }

--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
@@ -524,6 +524,7 @@ describe('TimelineManager', () => {
        { count: 3, timeBucket: '2024-01-01T00:00:00.000Z' },
      ]);
      sdkMock.getTimeBucket.mockImplementation(({ timeBucket }) => Promise.resolve(bucketAssetsResponse[timeBucket]));
+      sdkMock.getAssetInfo.mockRejectedValue(new Error('Asset not found'));
      await timelineManager.updateViewport({ width: 1588, height: 1000 });
    });

--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -16,12 +16,13 @@ import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websoc
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
 import {
+  isAssetResponseDto,
  setDifference,
  toTimelineAsset,
  type TimelineDateTime,
  type TimelineYearMonth,
 } from '$lib/utils/timeline-util';
-import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
+import { AssetOrder, getAssetInfo, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
 import { clamp, isEqual } from 'lodash-es';
 import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
@@ -343,27 +344,30 @@ export class TimelineManager extends VirtualScrollManager {
    this.addAssetsUpsertSegments([...notExcluded]);
  }

-  async findMonthGroupForAsset(id: string) {
+  async findMonthGroupForAsset(asset: AssetDescriptor | AssetResponseDto) {
    if (!this.isInitialized) {
      await this.initTask.waitUntilCompletion();
    }

+    const { id } = asset;
    let { monthGroup } = findMonthGroupForAssetUtil(this, id) ?? {};
    if (monthGroup) {
      return monthGroup;
    }

-    const response = await getAssetInfo({ ...authManager.params, id }).catch(() => null);
+    const response = isAssetResponseDto(asset)
+      ? asset
+      : await getAssetInfo({ ...authManager.params, id }).catch(() => null);
    if (!response) {
      return;
    }

-    const asset = toTimelineAsset(response);
-    if (!asset || this.isExcluded(asset)) {
+    const timelineAsset = toTimelineAsset(response);
+    if (this.isExcluded(timelineAsset)) {
      return;
    }

-    monthGroup = await this.#loadMonthGroupAtTime(asset.localDateTime, { cancelable: false });
+    monthGroup = await this.#loadMonthGroupAtTime(timelineAsset.localDateTime, { cancelable: false });
    if (monthGroup?.findAssetById({ id })) {
      return monthGroup;
    }
@@ -532,14 +536,14 @@ export class TimelineManager extends VirtualScrollManager {
  }

  async getLaterAsset(
-    assetDescriptor: AssetDescriptor,
+    assetDescriptor: AssetDescriptor | AssetResponseDto,
    interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
  ): Promise<TimelineAsset | undefined> {
    return await getAssetWithOffset(this, assetDescriptor, interval, 'later');
  }

  async getEarlierAsset(
-    assetDescriptor: AssetDescriptor,
+    assetDescriptor: AssetDescriptor | AssetResponseDto,
    interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
  ): Promise<TimelineAsset | undefined> {
    return await getAssetWithOffset(this, assetDescriptor, interval, 'earlier');
--- a/web/src/lib/services/library.service.ts
+++ b/web/src/lib/services/library.service.ts
@@ -28,7 +28,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
    title: $t('scan_all_libraries'),
    type: $t('command'),
    icon: mdiSync,
-    onAction: () => void handleScanAllLibraries(),
+    onAction: () => handleScanAllLibraries(),
    shortcuts: { shift: true, key: 'r' },
    $if: () => libraries.length > 0,
  };
@@ -37,7 +37,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
    title: $t('create_library'),
    type: $t('command'),
    icon: mdiPlusBoxOutline,
-    onAction: () => void handleCreateLibrary(),
+    onAction: () => handleCreateLibrary(),
    shortcuts: { shift: true, key: 'n' },
  };

@@ -49,7 +49,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
    icon: mdiPencilOutline,
    type: $t('command'),
    title: $t('rename'),
-    onAction: () => void modalManager.show(LibraryRenameModal, { library }),
+    onAction: () => modalManager.show(LibraryRenameModal, { library }),
    shortcuts: { key: 'r' },
  };

@@ -58,7 +58,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
    type: $t('command'),
    title: $t('delete'),
    color: 'danger',
-    onAction: () => void handleDeleteLibrary(library),
+    onAction: () => handleDeleteLibrary(library),
    shortcuts: { key: 'Backspace' },
  };

@@ -66,21 +66,21 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
    icon: mdiPlusBoxOutline,
    type: $t('command'),
    title: $t('add'),
-    onAction: () => void modalManager.show(LibraryFolderAddModal, { library }),
+    onAction: () => modalManager.show(LibraryFolderAddModal, { library }),
  };

  const AddExclusionPattern: ActionItem = {
    icon: mdiPlusBoxOutline,
    type: $t('command'),
    title: $t('add'),
-    onAction: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
+    onAction: () => modalManager.show(LibraryExclusionPatternAddModal, { library }),
  };

  const Scan: ActionItem = {
    icon: mdiSync,
    type: $t('command'),
    title: $t('scan_library'),
-    onAction: () => void handleScanLibrary(library),
+    onAction: () => handleScanLibrary(library),
    shortcuts: { shift: true, key: 'r' },
  };

@@ -92,14 +92,14 @@ export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryRe
    icon: mdiPencilOutline,
    type: $t('command'),
    title: $t('edit'),
-    onAction: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
+    onAction: () => modalManager.show(LibraryFolderEditModal, { folder, library }),
  };

  const Delete: ActionItem = {
    icon: mdiTrashCanOutline,
    type: $t('command'),
    title: $t('delete'),
-    onAction: () => void handleDeleteLibraryFolder(library, folder),
+    onAction: () => handleDeleteLibraryFolder(library, folder),
  };

  return { Edit, Delete };
@@ -114,14 +114,14 @@ export const getLibraryExclusionPatternActions = (
    icon: mdiPencilOutline,
    type: $t('command'),
    title: $t('edit'),
-    onAction: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
+    onAction: () => modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
  };

  const Delete: ActionItem = {
    icon: mdiTrashCanOutline,
    type: $t('command'),
    title: $t('delete'),
-    onAction: () => void handleDeleteExclusionPattern(library, exclusionPattern),
+    onAction: () => handleDeleteExclusionPattern(library, exclusionPattern),
  };

  return { Edit, Delete };
@@ -273,7 +273,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
  });

  if (!confirmed) {
-    return false;
+    return;
  }

  try {
@@ -285,10 +285,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
    toastManager.success($t('admin.library_updated'));
  } catch (error) {
    handleError(error, $t('errors.unable_to_update_library'));
-    return false;
  }
-
-  return true;
 };

 export const handleAddLibraryExclusionPattern = async (library: LibraryResponseDto, exclusionPattern: string) => {
@@ -345,9 +342,8 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
  const $t = await getFormatter();

  const confirmed = await modalManager.showDialog({ prompt: $t('admin.library_remove_exclusion_pattern_prompt') });
-
  if (!confirmed) {
-    return false;
+    return;
  }

  try {
@@ -361,8 +357,5 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
    toastManager.success($t('admin.library_updated'));
  } catch (error) {
    handleError(error, $t('errors.unable_to_update_library'));
-    return false;
  }
-
-  return true;
 };
--- a/web/src/lib/services/queue.service.ts
+++ b/web/src/lib/services/queue.service.ts
@@ -1,11 +1,20 @@
 import { goto } from '$app/navigation';
 import { AppRoute } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { queueManager } from '$lib/managers/queue-manager.svelte';
 import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
-import { user } from '$lib/stores/user.store';
+import type { HeaderButtonActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
-import { emptyQueue, getQueue, QueueName, updateQueue, type QueueResponseDto } from '@immich/sdk';
+import {
+  emptyQueue,
+  getQueue,
+  QueueCommand,
+  QueueName,
+  runQueueCommandLegacy,
+  updateQueue,
+  type QueueResponseDto,
+} from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem, type IconLike } from '@immich/ui';
 import {
  mdiClose,
@@ -23,7 +32,6 @@ import {
  mdiPlay,
  mdiPlus,
  mdiStateMachine,
-  mdiSync,
  mdiTable,
  mdiTagFaces,
  mdiTrashCanOutline,
@@ -31,7 +39,6 @@ import {
  mdiVideo,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { get } from 'svelte/store';

 type QueueItem = {
  icon: IconLike;
@@ -39,15 +46,17 @@ type QueueItem = {
  subtitle?: string;
 };

-export const getQueuesActions = ($t: MessageFormatter) => {
-  const ViewQueues: ActionItem = {
-    title: $t('admin.queues'),
-    description: $t('admin.queues_page_description'),
-    icon: mdiSync,
-    type: $t('page'),
-    isGlobal: true,
-    $if: () => get(user)?.isAdmin,
-    onAction: () => goto(AppRoute.ADMIN_QUEUES),
+export const getQueuesActions = ($t: MessageFormatter, queues: QueueResponseDto[] | undefined) => {
+  const pausedQueues = (queues ?? []).filter(({ isPaused }) => isPaused).map(({ name }) => name);
+
+  const ResumePaused: HeaderButtonActionItem = {
+    title: $t('resume_paused_jobs', { values: { count: pausedQueues.length } }),
+    $if: () => pausedQueues.length > 0,
+    icon: mdiPlay,
+    onAction: () => handleResumePausedJobs(pausedQueues),
+    data: {
+      title: pausedQueues.join(', '),
+    },
  };

  const CreateJob: ActionItem = {
@@ -68,7 +77,7 @@ export const getQueuesActions = ($t: MessageFormatter) => {
    onAction: () => goto(`${AppRoute.ADMIN_SETTINGS}?isOpen=job`),
  };

-  return { ViewQueues, ManageConcurrency, CreateJob };
+  return { ResumePaused, ManageConcurrency, CreateJob };
 };

 export const getQueueActions = ($t: MessageFormatter, queue: QueueResponseDto) => {
@@ -126,6 +135,19 @@ export const handleEmptyQueue = async (queue: QueueResponseDto) => {
  }
 };

+const handleResumePausedJobs = async (queues: QueueName[]) => {
+  const $t = await getFormatter();
+
+  try {
+    for (const name of queues) {
+      await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
+    }
+    await queueManager.refresh();
+  } catch (error) {
+    handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
+  }
+};
+
 const handleRemoveFailedJobs = async (queue: QueueResponseDto) => {
  const $t = await getFormatter();

--- a/web/src/lib/services/shared-link.service.ts
+++ b/web/src/lib/services/shared-link.service.ts
@@ -24,26 +24,26 @@ export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLin
  const Edit: ActionItem = {
    title: $t('edit_link'),
    icon: mdiPencilOutline,
-    onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
+    onAction: () => goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
  };

  const Delete: ActionItem = {
    title: $t('delete_link'),
    icon: mdiTrashCanOutline,
    color: 'danger',
-    onAction: () => void handleDeleteSharedLink(sharedLink),
+    onAction: () => handleDeleteSharedLink(sharedLink),
  };

  const Copy: ActionItem = {
    title: $t('copy_link'),
    icon: mdiContentCopy,
-    onAction: () => void copyToClipboard(asUrl(sharedLink)),
+    onAction: () => copyToClipboard(asUrl(sharedLink)),
  };

  const ViewQrCode: ActionItem = {
    title: $t('view_qr_code'),
    icon: mdiQrcode,
-    onAction: () => void handleShowSharedLinkQrCode(sharedLink),
+    onAction: () => handleShowSharedLinkQrCode(sharedLink),
  };

  return { Edit, Delete, Copy, ViewQrCode };
@@ -88,7 +88,7 @@ export const handleUpdateSharedLink = async (sharedLink: SharedLinkResponseDto,
  }
 };

-export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto): Promise<boolean> => {
+const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto) => {
  const $t = await getFormatter();
  const success = await modalManager.showDialog({
    title: $t('delete_shared_link'),
@@ -96,17 +96,15 @@ export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto):
    confirmText: $t('delete'),
  });
  if (!success) {
-    return false;
+    return;
  }

  try {
    await removeSharedLink({ id: sharedLink.id });
    eventManager.emit('SharedLinkDelete', sharedLink);
    toastManager.success($t('deleted_shared_link'));
-    return true;
  } catch (error) {
    handleError(error, $t('errors.unable_to_delete_shared_link'));
-    return false;
  }
 };

--- a/web/src/lib/services/system-config.service.ts
+++ b/web/src/lib/services/system-config.service.ts
@@ -20,7 +20,7 @@ export const getSystemConfigActions = (
    description: $t('admin.copy_config_to_clipboard_description'),
    type: $t('command'),
    icon: mdiContentCopy,
-    onAction: () => void handleCopyToClipboard(config),
+    onAction: () => handleCopyToClipboard(config),
    shortcuts: { shift: true, key: 'c' },
  };

--- a/web/src/lib/services/user-admin.service.ts
+++ b/web/src/lib/services/user-admin.service.ts
@@ -1,11 +1,13 @@
 import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
 import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
 import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
 import UserEditModal from '$lib/modals/UserEditModal.svelte';
 import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
 import { user as authUser } from '$lib/stores/user.store';
+import type { HeaderButtonActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -28,6 +30,7 @@ import {
  mdiPlusBoxOutline,
  mdiTrashCanOutline,
 } from '@mdi/js';
+import { DateTime } from 'luxon';
 import type { MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';

@@ -36,7 +39,7 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
    title: $t('create_user'),
    type: $t('command'),
    icon: mdiPlusBoxOutline,
-    onAction: () => void modalManager.show(UserCreateModal, {}),
+    onAction: () => modalManager.show(UserCreateModal, {}),
    shortcuts: { shift: true, key: 'n' },
  };

@@ -60,11 +63,17 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
    shortcuts: { key: 'Backspace' },
  };

-  const Restore: ActionItem = {
+  const getDeleteDate = (deletedAt: string): Date =>
+    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
+
+  const Restore: HeaderButtonActionItem = {
    icon: mdiDeleteRestore,
    title: $t('restore'),
    type: $t('command'),
    color: 'primary',
+    data: {
+      title: $t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } }),
+    },
    $if: () => !!user.deletedAt && user.status === UserStatus.Deleted,
    onAction: () => modalManager.show(UserRestoreConfirmModal, { user }),
  };
@@ -74,14 +83,14 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
    title: $t('reset_password'),
    type: $t('command'),
    $if: () => get(authUser).id !== user.id,
-    onAction: () => void handleResetPasswordUserAdmin(user),
+    onAction: () => handleResetPasswordUserAdmin(user),
  };

  const ResetPinCode: ActionItem = {
    icon: mdiLockSmart,
    type: $t('command'),
    title: $t('reset_pin_code'),
-    onAction: () => void handleResetPinCodeUserAdmin(user),
+    onAction: () => handleResetPinCodeUserAdmin(user),
  };

  return { Update, Delete, Restore, ResetPassword, ResetPinCode };
@@ -162,12 +171,12 @@ const generatePassword = (length: number = 16) => {
  return generatedPassword;
 };

-export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
+const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
  const $t = await getFormatter();
  const prompt = $t('admin.confirm_user_password_reset', { values: { user: user.name } });
  const success = await modalManager.showDialog({ prompt });
  if (!success) {
-    return false;
+    return;
  }

  try {
@@ -176,28 +185,24 @@ export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) =
    eventManager.emit('UserAdminUpdate', response);
    toastManager.success();
    await modalManager.show(PasswordResetSuccessModal, { newPassword: dto.password });
-    return true;
  } catch (error) {
    handleError(error, $t('errors.unable_to_reset_password'));
-    return false;
  }
 };

-export const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
+const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
  const $t = await getFormatter();
  const prompt = $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } });
  const success = await modalManager.showDialog({ prompt });
  if (!success) {
-    return false;
+    return;
  }

  try {
    const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
    eventManager.emit('UserAdminUpdate', response);
    toastManager.success($t('pin_code_reset_successfully'));
-    return true;
  } catch (error) {
    handleError(error, $t('errors.unable_to_reset_pin_code'));
-    return false;
  }
 };
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -1,4 +1,5 @@
 import type { QueueResponseDto, ServerVersionResponseDto } from '@immich/sdk';
+import type { ActionItem } from '@immich/ui';

 export interface ReleaseEvent {
  isAvailable: boolean;
@@ -9,3 +10,5 @@ export interface ReleaseEvent {
 }

 export type QueueSnapshot = { timestamp: number; snapshot?: QueueResponseDto[] };
+
+export type HeaderButtonActionItem = ActionItem & { data?: { title?: string } };
--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -1,4 +1,4 @@
-import type { TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
+import type { AssetDescriptor, TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
 import { locale } from '$lib/stores/preferences.store';
 import { getAssetRatio } from '$lib/utils/asset-utils';
 import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
@@ -192,8 +192,13 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
  };
 };

-export const isTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset): unknownAsset is TimelineAsset =>
-  (unknownAsset as TimelineAsset).ratio !== undefined;
+export const isTimelineAsset = (
+  unknownAsset: AssetDescriptor | AssetResponseDto | TimelineAsset,
+): unknownAsset is TimelineAsset => (unknownAsset as TimelineAsset).ratio !== undefined;
+
+export const isAssetResponseDto = (
+  unknownAsset: AssetDescriptor | AssetResponseDto | TimelineAsset,
+): unknownAsset is AssetResponseDto => (unknownAsset as AssetResponseDto).type !== undefined;

 export const isTimelineAssets = (assets: AssetResponseDto[] | TimelineAsset[]): assets is TimelineAsset[] =>
  assets.length === 0 || 'ratio' in assets[0];
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -14,15 +14,15 @@
  import { themeManager } from '$lib/managers/theme-manager.svelte';
  import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
  import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
-  import { getQueuesActions } from '$lib/services/queue.service';
+  import { sidebarStore } from '$lib/stores/sidebar.svelte';
  import { user } from '$lib/stores/user.store';
  import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
  import type { ReleaseEvent } from '$lib/types';
  import { copyToClipboard, getReleaseType, semverToName } from '$lib/utils';
  import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
  import { isAssetViewerRoute } from '$lib/utils/navigation';
-  import { CommandPaletteContext, modalManager, setTranslations, type ActionItem } from '@immich/ui';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiThemeLightDark } from '@mdi/js';
+  import { CommandPaletteContext, modalManager, setTranslations, toastManager, type ActionItem } from '@immich/ui';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiThemeLightDark } from '@mdi/js';
  import { onMount, type Snippet } from 'svelte';
  import { t } from 'svelte-i18n';
  import '../app.css';
@@ -53,6 +53,8 @@
    return new URL(page.url.pathname + page.url.search, 'https://my.immich.app');
  };

+  toastManager.setOptions({ class: 'top-16' });
+
  onMount(() => {
    const element = document.querySelector('#stencil');
    element?.remove();
@@ -62,6 +64,10 @@
  eventManager.emit('AppInit');

  beforeNavigate(({ from, to }) => {
+    if (sidebarStore.isOpen) {
+      sidebarStore.reset();
+    }
+
    if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
      return;
    }
@@ -149,6 +155,13 @@
      icon: mdiCog,
      onAction: () => goto(AppRoute.ADMIN_SETTINGS),
    },
+    {
+      title: $t('admin.queues'),
+      description: $t('admin.queues_page_description'),
+      icon: mdiSync,
+      type: $t('page'),
+      onAction: () => goto(AppRoute.ADMIN_QUEUES),
+    },
    {
      title: $t('external_libraries'),
      description: $t('admin.external_libraries_page_description'),
@@ -163,7 +176,7 @@
    },
  ].map((route) => ({ ...route, type: $t('page'), isGlobal: true, $if: () => $user?.isAdmin }));

-  const commands = $derived([...userCommands, ...adminCommands, ...Object.values(getQueuesActions($t))]);
+  const commands = $derived([...userCommands, ...adminCommands]);
 </script>

 <OnEvents {onReleaseEvent} />
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -60,17 +59,11 @@

 <CommandPaletteContext commands={[Create, ScanAll]} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <HeaderButton action={ScanAll} />
-      <HeaderButton action={Create} />
-    </div>
-  {/snippet}
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
  <section class="my-4">
    <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
      {#if libraries.length > 0}
-        <table class="w-3/4 text-start">
+        <table class="text-start">
          <thead
            class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
          >
--- a/web/src/routes/admin/library-management/+page.ts
+++ b/web/src/routes/admin/library-management/+page.ts
@@ -23,7 +23,7 @@ export const load = (async ({ url }) => {
    statistics: Object.fromEntries(statistics),
    owners: Object.fromEntries(owners),
    meta: {
-      title: $t('admin.external_library_management'),
+      title: $t('external_libraries'),
    },
  };
 }) satisfies PageLoad;
--- a/web/src/routes/admin/library-management/[id]/+page.svelte
+++ b/web/src/routes/admin/library-management/[id]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
  import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
+  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -53,18 +53,9 @@
 <CommandPaletteContext commands={[Rename, Delete, AddFolder, AddExclusionPattern, Scan]} />

 <AdminPageLayout
-  breadcrumbs={[
-    { title: $t('admin.external_library_management'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT },
-    { title: library.name },
-  ]}
+  breadcrumbs={[{ title: $t('external_libraries'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT }, { title: library.name }]}
+  actions={[Scan, Rename, Delete]}
 >
-  {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <HeaderButton action={Scan} />
-      <HeaderButton action={Rename} />
-      <HeaderButton action={Delete} />
-    </div>
-  {/snippet}
  <Container size="large" center>
    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
      <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
@@ -80,7 +71,7 @@
              <Icon icon={mdiFolderOutline} size="1.5rem" />
              <CardTitle>{$t('folders')}</CardTitle>
            </div>
-            <HeaderButton action={AddFolder} />
+            <HeaderActionButton action={AddFolder} />
          </div>
        </CardHeader>
        <CardBody>
@@ -120,7 +111,7 @@
              <Icon icon={mdiFilterMinusOutline} size="1.5rem" />
              <CardTitle>{$t('exclusion_pattern')}</CardTitle>
            </div>
-            <HeaderButton action={AddExclusionPattern} />
+            <HeaderActionButton action={AddExclusionPattern} />
          </div>
        </CardHeader>
        <CardBody>
--- a/web/src/routes/admin/queues/+page.svelte
+++ b/web/src/routes/admin/queues/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import JobsPanel from '$lib/components/QueuePanel.svelte';
  import { queueManager } from '$lib/managers/queue-manager.svelte';
  import { getQueuesActions } from '$lib/services/queue.service';
-  import { handleError } from '$lib/utils/handle-error';
-  import { QueueCommand, runQueueCommandLegacy, type QueueResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, HStack, Text, type ActionItem } from '@immich/ui';
-  import { mdiPlay } from '@mdi/js';
+  import { type QueueResponseDto } from '@immich/sdk';
+  import { CommandPaletteContext, type ActionItem } from '@immich/ui';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
@@ -22,20 +19,8 @@
  onMount(() => queueManager.listen());

  let queues = $derived<QueueResponseDto[]>(queueManager.queues);
-  const pausedQueues = $derived(queues.filter(({ isPaused }) => isPaused).map(({ name }) => name));

-  const handleResumePausedJobs = async () => {
-    try {
-      for (const name of pausedQueues) {
-        await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
-      }
-      await queueManager.refresh();
-    } catch (error) {
-      handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
-    }
-  };
-
-  const { CreateJob, ManageConcurrency } = $derived(getQueuesActions($t));
+  const { ResumePaused, CreateJob, ManageConcurrency } = $derived(getQueuesActions($t, queueManager.queues));
  const commands: ActionItem[] = $derived([CreateJob, ManageConcurrency]);

  const onQueueUpdate = (update: QueueResponseDto) => {
@@ -52,27 +37,7 @@

 <OnEvents {onQueueUpdate} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      {#if pausedQueues.length > 0}
-        <Button
-          leadingIcon={mdiPlay}
-          onclick={handleResumePausedJobs}
-          size="small"
-          variant="ghost"
-          title={pausedQueues.join(', ')}
-        >
-          <Text class="hidden md:block">
-            {$t('resume_paused_jobs', { values: { count: pausedQueues.length } })}
-          </Text>
-        </Button>
-      {/if}
-      <HeaderButton action={CreateJob} />
-      <HeaderButton action={ManageConcurrency} />
-    </HStack>
-  {/snippet}
-
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ResumePaused, CreateJob, ManageConcurrency]}>
  <section id="setting-content" class="flex place-content-center sm:mx-4">
    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
      {#if queues}
--- a/web/src/routes/admin/queues/[name]/+page.svelte
+++ b/web/src/routes/admin/queues/[name]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import QueueGraph from '$lib/components/QueueGraph.svelte';
@@ -7,7 +6,18 @@
  import { queueManager } from '$lib/managers/queue-manager.svelte';
  import { asQueueItem, getQueueActions } from '$lib/services/queue.service';
  import { type QueueResponseDto } from '@immich/sdk';
-  import { Badge, Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui';
+  import {
+    Badge,
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Container,
+    Heading,
+    Icon,
+    MenuItemType,
+    Text,
+  } from '@immich/ui';
  import { mdiClockTimeTwoOutline } from '@mdi/js';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -35,15 +45,10 @@

 <OnEvents {onQueueUpdate} />

-<AdminPageLayout breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      <HeaderButton action={Pause} />
-      <HeaderButton action={Resume} />
-      <HeaderButton action={Empty} />
-      <HeaderButton action={RemoveFailedJobs} />
-    </HStack>
-  {/snippet}
+<AdminPageLayout
+  breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}
+  actions={[Pause, Resume, Empty, MenuItemType.Divider, RemoveFailedJobs]}
+>
  <div>
    <Container size="large" center>
      <div class="mb-1 mt-4 flex items-center gap-2">
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -18,7 +18,6 @@
  import ThemeSettings from '$lib/components/admin-settings/ThemeSettings.svelte';
  import TrashSettings from '$lib/components/admin-settings/TrashSettings.svelte';
  import UserSettings from '$lib/components/admin-settings/UserSettings.svelte';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
@@ -27,7 +26,7 @@
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
  import { getSystemConfigActions } from '$lib/services/system-config.service';
-  import { Alert, CommandPaletteContext, HStack } from '@immich/ui';
+  import { Alert, CommandPaletteContext } from '@immich/ui';
  import {
    mdiAccountOutline,
    mdiBackupRestore,
@@ -217,24 +216,13 @@

 <CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={1}>
-      <div class="hidden lg:block">
-        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-      </div>
-      <HeaderButton action={CopyToClipboard} />
-      <HeaderButton action={Download} />
-      <HeaderButton action={Upload} />
-    </HStack>
-  {/snippet}
-
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[CopyToClipboard, Download, Upload]}>
+  <section id="setting-content" class="flex place-content-center sm:mx-4 mt-4">
    <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
      {#if featureFlagsManager.value.configFile}
        <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
      {/if}
-      <div class="block lg:hidden">
+      <div>
        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
      </div>
      <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
--- a/web/src/routes/admin/users/+page.svelte
+++ b/web/src/routes/admin/users/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import { getUserAdminsActions, handleNavigateUserAdmin } from '$lib/services/user-admin.service';
  import { locale } from '$lib/stores/preferences.store';
  import { getByteUnitString } from '$lib/utils/byte-units';
  import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, HStack, Icon } from '@immich/ui';
+  import { Button, CommandPaletteContext, Icon } from '@immich/ui';
  import { mdiInfinity } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
@@ -45,12 +44,7 @@

 <CommandPaletteContext commands={[Create]} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={1}>
-      <HeaderButton action={Create} />
-    </HStack>
-  {/snippet}
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
  <section id="setting-content" class="flex place-content-center sm:mx-4">
    <section class="w-full pb-28 lg:w-212.5">
      <table class="my-5 w-full text-start">
--- a/web/src/routes/admin/users/[id]/+page.svelte
+++ b/web/src/routes/admin/users/[id]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -8,7 +7,6 @@
  import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
  import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
  import { AppRoute } from '$lib/constants';
-  import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
  import { getUserAdminActions } from '$lib/services/user-admin.service';
  import { locale } from '$lib/stores/preferences.store';
  import { createDateFormatter, findLocale } from '$lib/utils';
@@ -26,8 +24,8 @@
    Container,
    getByteUnitString,
    Heading,
-    HStack,
    Icon,
+    MenuItemType,
    Stack,
    Text,
  } from '@immich/ui';
@@ -42,15 +40,14 @@
    mdiPlayCircle,
    mdiTrashCanOutline,
  } from '@mdi/js';
-  import { DateTime } from 'luxon';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';

-  interface Props {
+  type Props = {
    data: PageData;
-  }
+  };

-  let { data }: Props = $props();
+  const { data }: Props = $props();

  let user = $derived(data.user);
  const userPreferences = $derived(data.userPreferences);
@@ -94,9 +91,6 @@
      await goto(AppRoute.ADMIN_USERS);
    }
  };
-
-  const getDeleteDate = (deletedAt: string): Date =>
-    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
 </script>

 <OnEvents
@@ -110,19 +104,8 @@

 <AdminPageLayout
  breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}
+  actions={[ResetPassword, ResetPinCode, Update, Restore, MenuItemType.Divider, Delete]}
 >
-  {#snippet buttons()}
-    <HStack gap={0}>
-      <HeaderButton action={ResetPassword} />
-      <HeaderButton action={ResetPinCode} />
-      <HeaderButton action={Update} />
-      <HeaderButton
-        action={Restore}
-        title={$t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } })}
-      />
-      <HeaderButton action={Delete} />
-    </HStack>
-  {/snippet}
  <div>
    <Container size="large" center>
      {#if user.deletedAt}
Author	SHA1	Message	Date
renovate[bot]	baad38f0e6	fix(deps): update typescript-projects (#24476 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>	2025-12-11 00:13:06 +00:00
Min Idzelis	161147af51	feat: timeline-manager improvement to use AssetResponseDto efficiently (#24421 )	2025-12-11 01:07:31 +01:00
renovate[bot]	cbdf5011f9	chore(deps): update docker.io/valkey/valkey:9 docker digest to fb8d272 (#24474 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-11 00:59:39 +01:00
renovate[bot]	f0f1d279c4	chore(deps): update prom/prometheus docker digest to d936808 (#24475 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-11 00:59:20 +01:00
renovate[bot]	5821f2fe61	chore(deps): update github-actions (#24477 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-11 00:59:03 +01:00
Noel S	4cbce072be	fix(docs): slow upload speed with example nginx reverse proxy config (#24490 ) * increase buffer size * increase further * increase buffer further	2025-12-10 22:29:36 +00:00
idubnori	5e5bb7e87d	fix(mobile): versionStatus.message text overflow (#24504 )	2025-12-10 16:18:55 -06:00
shenlong	b052893a1e	feat(mobile): immich-ui icon button (#24502 ) * feat(mobile): immich-ui icon button * fix lint --------- Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>	2025-12-10 16:18:01 -06:00
Kurt McKee	15e58595fd	fix(mobile): iOS local permission dialog extra whitespace (#24491 ) Fix a iOS rendering issue caused by extra whitespace	2025-12-10 16:17:08 -06:00
Alex	6d499c782a	chore: update ui lib (#24483 )	2025-12-09 17:27:01 -06:00
idubnori	7af99b8606	feat(mobile): move top bar buttons into kebabu menu in AssetViewer (#24461 ) * chore(mobile): i18n: "open_asset_info" in viewer kebab menu * feat(mobile): move some top buttons into kebabu menu * refactor(mobile): viewer kebab menu to use context-based button generation * feat(mobile): refactor action button and kebab menu to use ConsumerWidget for improved state management * feat(mobile): pass original theme to ViewerKebabMenu for consistent styling * chore: styling --------- Co-authored-by: Alex <alex.tran1502@gmail.com>	2025-12-09 18:26:28 +00:00
Arnau Mora	01e39277e0	feat(mobile): Localized backup upload details page (#21136 ) * Localized backup details page # Conflicts: # i18n/en.json * Format * format fix --------- Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>	2025-12-09 11:23:01 -06:00
Yaros	06e79703da	fix(mobile): timeline bottom padding on selection (#24480 )	2025-12-09 09:19:41 -06:00
Yaros	c360781565	fix(mobile): fix overflow text in backup card (#24448 ) * fix(mobile): fix overflow text in backup card * refactor: use intrinsicheight * chore: fix spelling of entitycounttile	2025-12-09 09:03:29 -06:00
idubnori	287f6d5c94	fix(mobile): buttons inside AddActionButton color is the same as background color (#24460 ) * fix: icon & text color in AddActionButton * fix: use Divider	2025-12-08 14:29:31 -06:00
Simon Kubiak	fe9125a3d1	fix(web): [album table view] long album title overflows table row (#24450 ) fix(web): long album title overflows vertically on album page in table view	2025-12-08 15:35:58 +00:00
Yaros	8b31936bb6	fix(mobile): cannot create album while name field is focused (#24449 ) fix(mobile): create album disabled when focused	2025-12-08 09:33:01 -06:00
Sergey Katsubo	19958dfd83	fix(server): building docker image for different platforms on the same host (#24459 ) Fix building docker image for different platforms on the same host Use per-platform mise cache to avoid 'sh: 1: extism-js: not found' This happens due to re-using cached installed binary for another platform	2025-12-08 09:15:43 -06:00
Alex	1e1cf0d1fe	fix: build iOS fastlane installation (#24408 )	2025-12-06 14:55:53 -06:00
Min Idzelis	879e0ea131	fix: thumbnail doesnt send mouseLeave events properly (#24423 )	2025-12-06 21:52:06 +01:00
Sergey Katsubo	42136f9091	fix(server): update exiftool-vendored to v34 for more robust metadata extraction (#24424 )	2025-12-06 14:45:59 -06:00
Harrison	1109c32891	fix(docs): websockets in nginx example (#24411 ) Co-authored-by: Harrison <frith.harry@gmail.com>	2025-12-06 16:28:12 +00:00
idubnori	3c80049192	chore(mobile): add kebabu menu in asset viewer (#24387 ) * feat(mobile): implement viewer kebab menu with about option * feat: revert exisitng buttons, adjust label name * unify MenuAnchor usage --------- Co-authored-by: Alex <alex.tran1502@gmail.com>	2025-12-05 19:51:59 +00:00
Hai Sullivan	8f1669efbe	chore(mobile): smoother UI experience for iOS devices (#24397 ) allows the tab pages to use the standard Material page transition during push/pop navigation	2025-12-05 11:02:04 -06:00
Robert Schäfer	146bf65d02	refactor(dev): remove ulimits for rootless docker (#24393 ) Description ----------- When I follow the [developer setup](https://docs.immich.app/developer/setup) I run into a permission error using rootless docker. A while ago I asked on Discord in [#contributing](https://discord.com/channels/979116623879368755/1071165397228855327/1442974448776122592) about these ulimits. I suggest to remove the `ulimits` altogether. It seems that @ItalyPaleAle has left the setting just hoping that it could help somebody in the future. See the [PR description](https://github.com/immich-app/immich/pull/4556). How Has This Been Tested? ------------------------- Using rootless docker: ``` $ docker context ls NAME DESCRIPTION DOCKER ENDPOINT ERROR default unix:///var/run/docker.sock rootless * unix:///run/user/1000/docker.sock ``` Running `make` will fail because of permission errors: ``` $ docker compose -f ./docker/docker-compose.dev.yml up --remove-orphans ... Error response from daemon: failed to create task for container: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: error during container init: error setting rlimits for ready process: error setting rlimit type 7: operation not permitted ``` On my machine I have the following hard limit for "Maximum number of open file descriptors": ``` $ ulimit -nH 524288 ``` I can confirm that the permission error is caused by the security restrictions of the operating system mentioned above: Changing `docker/docker-compose.dev.yml` like .. ``` ulimits: nofile: soft: 524289 hard: 524289 ``` .. will lead to a permission error whereas this .. ``` ulimits: nofile: soft: 524288 hard: 524288 ``` .. starts fine. Apparently the defaults for these limits are coming from [systemd](`26b2085d54/man/systemd.exec.xml (L1122)`) which is used on nearly every linux distribution. So my assumption is that almost any linux user who uses rootless docker will run into a permission error when starting the development setup. Checklist: ---------- - [x] I have performed a self-review of my own code - [x] I have made corresponding changes to the documentation if applicable - [x] I have no unrelated changes in the PR. - [ ] I have confirmed that any new dependencies are strictly necessary. - [ ] I have written tests for new code (if applicable) - [ ] I have followed naming conventions/patterns in the surrounding code - [ ] All code in `src/services/` uses repositories implementations for database calls, filesystem operations, etc. - [ ] All code in `src/repositories/` is pretty basic/simple and does not have any immich specific logic (that belongs in `src/services/`)	2025-12-05 09:26:20 -05:00
Daniel Dietzler	75a7c9c06c	feat: sql tools array as default value (#24389 )	2025-12-04 12:54:20 -05:00
Daniel Dietzler	ae8f5a6673	fix: prettier (#24386 )	2025-12-04 16:10:42 +00:00
Jason Rasmussen	31f2c7b505	feat: header context menu (#24374 )	2025-12-04 11:09:38 -05:00
Yaros	ba6687dde9	feat(web): search type selection dropdown (#24091 ) * feat(web): search type selection dropdown * chore: implement suggestions * lint --------- Co-authored-by: Alex <alex.tran1502@gmail.com>	2025-12-04 04:10:12 +00:00