fix: use remoteId (for tests to succeed)

refactor(timeline): remove single select scroll behavior

.github/workflows/build-mobile.yml

@@ -51,14 +51,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -79,12 +79,12 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ inputs.ref || github.sha }}
           persist-credentials: false
@@ -96,14 +96,14 @@ jobs:
         working-directory: ./mobile
         run: printf "%s" $KEY_JKS | base64 -d > android/key.jks
 
-      - uses: actions/setup-java@f2beeb24e141e01a676f977032f5a29d81c9e27e # v5.1.0
+      - uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # v5.2.0
         with:
           distribution: 'zulu'
           java-version: '17'
 
       - name: Restore Gradle Cache
         id: cache-gradle-restore
-        uses: actions/cache/restore@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache/restore@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         with:
           path: |
             ~/.gradle/caches
@@ -160,7 +160,7 @@ jobs:
 
       - name: Save Gradle Cache
         id: cache-gradle-save
-        uses: actions/cache/save@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
+        uses: actions/cache/save@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         if: github.ref == 'refs/heads/main'
         with:
           path: |
@@ -185,7 +185,7 @@ jobs:
         run: sudo xcode-select -s /Applications/Xcode_26.2.app/Contents/Developer
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
         with:
           ref: ${{ inputs.ref || github.sha }}
           persist-credentials: false

.github/workflows/cache-cleanup.yml

@@ -19,13 +19,13 @@ jobs:
       actions: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check out code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}

.github/workflows/check-openapi.yml

@@ -0,0 +1,32 @@
+name: Check OpenAPI
+on:
+  workflow_dispatch:
+  pull_request:
+    paths:
+      - 'open-api/**'
+      - '.github/workflows/check-openapi.yml'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions: {}
+
+jobs:
+  check-openapi:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout
+        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        with:
+          persist-credentials: false
+
+      - name: Check for breaking API changes
+        # sha is pinning to a commit instead of a tag since the action does not tag versions
+        uses: oasdiff/oasdiff-action/breaking@ccb863950ce437a50f8f1a40d2a1112117e06ce4
+        with:
+          base: https://raw.githubusercontent.com/${{ github.repository }}/main/open-api/immich-openapi-specs.json
+          revision: open-api/immich-openapi-specs.json
+          fail-on: ERR

.github/workflows/cli.yml

@@ -31,12 +31,12 @@ jobs:
         working-directory: ./cli
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -45,7 +45,7 @@ jobs:
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           registry-url: 'https://registry.npmjs.org'
@@ -71,13 +71,13 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -89,7 +89,7 @@ jobs:
         uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         if: ${{ !github.event.pull_request.head.repo.fork }}
         with:
           registry: ghcr.io
@@ -115,7 +115,7 @@ jobs:
             type=raw,value=latest,enable=${{ github.event_name == 'release' }}
 
       - name: Build and push image
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
+        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
         with:
           file: cli/Dockerfile
           platforms: linux/amd64,linux/arm64

.github/workflows/close-duplicates.yml

@@ -35,7 +35,7 @@ jobs:
     needs: [get_body, should_run]
     if: ${{ needs.should_run.outputs.should_run == 'true' }}
     container:
-      image: ghcr.io/immich-app/mdq:main@sha256:ab9f163cd5d5cec42704a26ca2769ecf3f10aa8e7bae847f1d527cdf075946e6
+      image: ghcr.io/immich-app/mdq:main@sha256:4f9860d04c88f7f87861f8ee84bfeedaec15ed7ca5ca87bc7db44b036f81645f
     outputs:
       checked: ${{ steps.get_checkbox.outputs.checked }}
     steps:

.github/workflows/codeql-analysis.yml

@@ -44,20 +44,20 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout repository
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/init@9e907b5e64f6b83e7804b09294d44122997950d6 # v4.32.3
         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@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/autobuild@9e907b5e64f6b83e7804b09294d44122997950d6 # v4.32.3
 
       # ℹ️ 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@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
+        uses: github/codeql-action/analyze@9e907b5e64f6b83e7804b09294d44122997950d6 # v4.32.3
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/docker.yml

@@ -23,14 +23,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -60,7 +60,7 @@ jobs:
         suffix: ['', '-cuda', '-rocm', '-openvino', '-armnn', '-rknn']
     steps:
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -90,7 +90,7 @@ jobs:
         suffix: ['']
     steps:
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
+        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -132,7 +132,7 @@ jobs:
             suffixes: '-rocm'
             platforms: linux/amd64
             runner-mapping: '{"linux/amd64": "pokedex-giant"}'
-    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@0477486d82313fba68f7c82c034120a4b8981297 # multi-runner-build-workflow-v2.1.0
+    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@bd49ed7a5a6022149f79b6564df48177476a822b # multi-runner-build-workflow-v2.2.1
     permissions:
       contents: read
       actions: read
@@ -155,7 +155,7 @@ jobs:
     name: Build and Push Server
     needs: pre-job
     if: ${{ fromJSON(needs.pre-job.outputs.should_run).server == true }}
-    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@0477486d82313fba68f7c82c034120a4b8981297 # multi-runner-build-workflow-v2.1.0
+    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@bd49ed7a5a6022149f79b6564df48177476a822b # multi-runner-build-workflow-v2.2.1
     permissions:
       contents: read
       actions: read

.github/workflows/docs-build.yml

@@ -21,14 +21,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -54,13 +54,13 @@ jobs:
 
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -70,7 +70,7 @@ jobs:
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './docs/.nvmrc'
           cache: 'pnpm'

.github/workflows/docs-deploy.yml

@@ -20,7 +20,7 @@ jobs:
       artifact: ${{ steps.get-artifact.outputs.result }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -119,19 +119,19 @@ jobs:
     if: ${{ fromJson(needs.checks.outputs.artifact).found && fromJson(needs.checks.outputs.parameters).shouldDeploy }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@cd24790a7f5f6439ac32cc94f5523cb2de8bfa8c # use-mise-action-v1.1.0
+        uses: immich-app/devtools/actions/use-mise@dab18118da6476e8237ac94080fd937983fecd42 # use-mise-action-v1.1.2
 
       - name: Load parameters
         id: parameters
@@ -192,16 +192,13 @@ jobs:
           ' >> $GITHUB_OUTPUT
 
       - name: Publish to Cloudflare Pages
-        # TODO: Action is deprecated
-        uses: cloudflare/pages-action@f0a1cd58cd66095dee69bfa18fa5efd1dde93bca # v1.5.0
-        with:
-          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN_PAGES_UPLOAD }}
-          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ${{ steps.docs-output.outputs.projectName }}
-          workingDirectory: 'docs'
-          directory: 'build'
-          branch: ${{ steps.parameters.outputs.name }}
-          wranglerVersion: '3'
+        working-directory: docs
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN_PAGES_UPLOAD }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          PROJECT_NAME: ${{ steps.docs-output.outputs.projectName }}
+          BRANCH_NAME: ${{ steps.parameters.outputs.name }}
+        run: mise run //docs:deploy
 
       - name: Deploy Docs Release Domain
         if: ${{ steps.parameters.outputs.event == 'release' }}

.github/workflows/docs-destroy.yml

@@ -17,19 +17,19 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@cd24790a7f5f6439ac32cc94f5523cb2de8bfa8c # use-mise-action-v1.1.0
+        uses: immich-app/devtools/actions/use-mise@dab18118da6476e8237ac94080fd937983fecd42 # use-mise-action-v1.1.2
 
       - name: Destroy Docs Subdomain
         env:

.github/workflows/fix-format.yml

@@ -22,7 +22,7 @@ jobs:
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: 'Checkout'
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           token: ${{ steps.generate-token.outputs.token }}
@@ -32,7 +32,7 @@ jobs:
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/pr-label-validation.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

.github/workflows/pr-labeler.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

.github/workflows/prepare-release.yml

@@ -56,20 +56,20 @@ jobs:
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           token: ${{ steps.generate-token.outputs.token }}
           persist-credentials: true
           ref: main
 
       - name: Install uv
-        uses: astral-sh/setup-uv@681c641aba71e4a1c380be3ab5e12ad51f415867 # v7.1.6
+        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
 
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -130,7 +130,7 @@ jobs:
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           token: ${{ steps.generate-token.outputs.token }}
           persist-credentials: false

.github/workflows/preview-label.yaml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
@@ -32,7 +32,7 @@ jobs:
       pull-requests: write
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

.github/workflows/release-pr.yml

@@ -23,20 +23,20 @@ jobs:
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           token: ${{ steps.generate-token.outputs.token }}
           persist-credentials: true
           ref: main
 
       - name: Install uv
-        uses: astral-sh/setup-uv@681c641aba71e4a1c380be3ab5e12ad51f415867 # v7.1.6
+        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
 
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.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@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
+        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
         with:
           token: ${{ steps.generate-token.outputs.token }}
           commit-message: 'chore: release ${{ steps.bump-type.outputs.next }}'

.github/workflows/release.yml

@@ -58,7 +58,7 @@ jobs:
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           token: ${{ steps.generate-token.outputs.token }}
           persist-credentials: false

.github/workflows/sdk.yml

@@ -19,12 +19,12 @@ jobs:
         working-directory: ./open-api/typescript-sdk
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -33,7 +33,7 @@ jobs:
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './open-api/typescript-sdk/.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/static_analysis.yml

@@ -20,14 +20,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -49,13 +49,13 @@ jobs:
         working-directory: ./mobile
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -69,6 +69,14 @@ jobs:
       - name: Install dependencies
         run: dart pub get
 
+      - name: Install dependencies for UI package
+        run: dart pub get
+        working-directory: ./mobile/packages/ui
+
+      - name: Install dependencies for UI Showcase
+        run: dart pub get
+        working-directory: ./mobile/packages/ui/showcase
+
       - name: Install DCM
         uses: CQLabs/setup-dcm@8697ae0790c0852e964a6ef1d768d62a6675481a # v2.0.1
         with:

.github/workflows/test.yml

@@ -17,14 +17,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -63,13 +63,13 @@ jobs:
         working-directory: ./server
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -77,7 +77,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -108,20 +108,20 @@ jobs:
         working-directory: ./cli
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -155,20 +155,20 @@ jobs:
         working-directory: ./cli
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -197,20 +197,20 @@ jobs:
         working-directory: ./web
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -241,20 +241,20 @@ jobs:
         working-directory: ./web
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -279,20 +279,20 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -327,20 +327,20 @@ jobs:
         working-directory: ./e2e
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -373,13 +373,13 @@ jobs:
         working-directory: ./server
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           submodules: 'recursive'
@@ -387,7 +387,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -412,13 +412,13 @@ jobs:
         runner: [ubuntu-latest, ubuntu-24.04-arm]
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           submodules: 'recursive'
@@ -426,7 +426,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -446,12 +446,29 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
         if: ${{ !cancelled() }}
-      - name: Docker build
-        run: docker compose build
+      - name: Start Docker Compose
+        run: docker compose up -d --build --renew-anon-volumes --force-recreate --remove-orphans --wait --wait-timeout 300
         if: ${{ !cancelled() }}
       - name: Run e2e tests (api & cli)
+        env:
+          VITEST_DISABLE_DOCKER_SETUP: true
         run: pnpm test
         if: ${{ !cancelled() }}
+      - name: Run e2e tests (maintenance)
+        env:
+          VITEST_DISABLE_DOCKER_SETUP: true
+        run: pnpm test:maintenance
+        if: ${{ !cancelled() }}
+      - name: Capture Docker logs
+        if: always()
+        run: docker compose logs --no-color > docker-compose-logs.txt
+        working-directory: ./e2e
+      - name: Archive Docker logs
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        if: always()
+        with:
+          name: e2e-server-docker-logs-${{ matrix.runner }}
+          path: e2e/docker-compose-logs.txt
   e2e-tests-web:
     name: End-to-End Tests (Web)
     needs: pre-job
@@ -467,13 +484,13 @@ jobs:
         runner: [ubuntu-latest, ubuntu-24.04-arm]
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           submodules: 'recursive'
@@ -481,7 +498,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -501,9 +518,8 @@ jobs:
         if: ${{ !cancelled() }}
       - name: Run e2e tests (web)
         env:
-          CI: true
           PLAYWRIGHT_DISABLE_WEBSERVER: true
-        run: npx playwright test --project=web
+        run: pnpm test:web
         if: ${{ !cancelled() }}
       - name: Archive e2e test (web) results
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
@@ -513,9 +529,8 @@ jobs:
           path: e2e/playwright-report/
       - name: Run ui tests (web)
         env:
-          CI: true
           PLAYWRIGHT_DISABLE_WEBSERVER: true
-        run: npx playwright test --project=ui
+        run: pnpm test:web:ui
         if: ${{ !cancelled() }}
       - name: Archive ui test (web) results
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
@@ -525,9 +540,8 @@ jobs:
           path: e2e/playwright-report/
       - name: Run maintenance tests
         env:
-          CI: true
           PLAYWRIGHT_DISABLE_WEBSERVER: true
-        run: npx playwright test --project=maintenance
+        run: pnpm test:web:maintenance
         if: ${{ !cancelled() }}
       - name: Archive maintenance tests (web) results
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
@@ -543,7 +557,7 @@ jobs:
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         if: always()
         with:
-          name: docker-compose-logs-${{ matrix.runner }}
+          name: e2e-web-docker-logs-${{ matrix.runner }}
           path: e2e/docker-compose-logs.txt
   success-check-e2e:
     name: End-to-End Tests Success
@@ -564,12 +578,12 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -596,17 +610,17 @@ jobs:
         working-directory: ./machine-learning
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Install uv
-        uses: astral-sh/setup-uv@681c641aba71e4a1c380be3ab5e12ad51f415867 # v7.1.6
+        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
         with:
           python-version: 3.11
       - name: Install dependencies
@@ -636,20 +650,20 @@ jobs:
         working-directory: ./.github
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './.github/.nvmrc'
           cache: 'pnpm'
@@ -666,12 +680,12 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
@@ -687,20 +701,20 @@ jobs:
       contents: read
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -749,20 +763,20 @@ jobs:
         working-directory: ./server
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Checkout code
-        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
         uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/weblate-lock.yml

@@ -24,14 +24,14 @@ jobs:
       should_run: ${{ steps.check.outputs.should_run }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
 
       - name: Check what should run
         id: check
-        uses: immich-app/devtools/actions/pre-job@08bac802a312fc89808e0dd589271ca0974087b5 # pre-job-action-v2.0.0
+        uses: immich-app/devtools/actions/pre-job@eed0f8b8165ffcb951f2ba854b2dd031935e1d73 # pre-job-action-v2.0.2
         with:
           github-token: ${{ steps.token.outputs.token }}
           filters: |
@@ -47,7 +47,7 @@ jobs:
     if: ${{ fromJSON(needs.pre-job.outputs.should_run).i18n == true }}
     steps:
       - id: token
-        uses: immich-app/devtools/actions/create-workflow-token@da177fa133657503ddb7503f8ba53dccefec5da1 # create-workflow-token-action-v1.0.0
+        uses: immich-app/devtools/actions/create-workflow-token@05e16407c0a5492138bb38139c9d9bf067b40886 # create-workflow-token-action-v1.0.1
         with:
           app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
           private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}

docs/docs/developer/devcontainers.md

@@ -44,7 +44,7 @@ While this guide focuses on VS Code, you have many options for Dev Container dev
 **Self-Hostable Options:**
 
 - [Coder](https://coder.com) - Enterprise-focused, requires Terraform knowledge, self-managed
-- [DevPod](https://devpod.sh) - Client-only tool with excellent devcontainer.json support, works with any provider (local, cloud, or on-premise)
+- [DevPod](https://devpod.sh) - Client-only tool with excellent devcontainer.json support, works with any provider (local, cloud, or on-premise). Check [quick-start guide](#quick-start-guide-for-devpod-with-docker)
   :::
 
 ## Dev Container Services
@@ -410,6 +410,26 @@ If you encounter issues:
 3. Review [common Docker issues](https://docs.docker.com/desktop/troubleshoot/)
 4. Ask in [Discord](https://discord.immich.app) `#contributing` channel
 
+### Quick-start guide for DevPod with docker
+
+You will need DevPod CLI (check [DevPod CLI installation guide](https://devpod.sh/docs/getting-started/install)) and Docker Desktop.
+
+```sh
+# Step 1: Clone the Repository
+git clone https://github.com/immich-app/immich.git
+cd immich
+
+# Step 2: Prepare DevPod (if you haven't already)
+devpod provider add docker
+devpod provider use docker
+
+# Step 3: Build 'immich-server-dev' docker image first manually
+docker build -f server/Dockerfile.dev -t immich-server-dev .
+
+# Step 4: Now you can start devcontainer
+devpod up .
+```
+
 ## Mobile Development
 
 While the Dev Container focuses on server and web development, you can connect mobile apps for testing:

docs/docs/features/supported-formats.md

@@ -38,6 +38,7 @@ For the full list, refer to the [Immich source code](https://github.com/immich-a
 | `MP2T`      | `.mts` `.m2ts` `.m2t` | :white_check_mark: |       |
 | `MP4`       | `.mp4` `.insv`        | :white_check_mark: |       |
 | `MPEG`      | `.mpg` `.mpe` `.mpeg` | :white_check_mark: |       |
+| `MXF`       | `.mxf`                | :white_check_mark: |       |
 | `QUICKTIME` | `.mov`                | :white_check_mark: |       |
 | `WEBM`      | `.webm`               | :white_check_mark: |       |
 | `WMV`       | `.wmv`                | :white_check_mark: |       |

docs/docs/install/config-file.md

@@ -8,7 +8,8 @@ A config file can be provided as an alternative to the UI configuration.
 
 ### Step 1 - Create a new config file
 
-In JSON format, create a new config file (e.g. `immich.json`) and put it in a location that can be accessed by Immich.
+In JSON format, create a new config file (e.g. `immich.json`) and put it in a location mounted in the container that can be accessed by Immich.
+YAML-formatted config files are also supported.
 The default configuration looks like this:
 
 <details>
@@ -251,6 +252,15 @@ So you can just grab it from there, paste it into a file and you're pretty much
 In your `.env` file, set the variable `IMMICH_CONFIG_FILE` to the path of your config.
 For more information, refer to the [Environment Variables](/install/environment-variables.md) section.
 
-:::tip
-YAML-formatted config files are also supported.
-:::
+:::info Docker Compose
+In your `.env` file, the variables `UPLOAD_LOCATION` and `DB_DATA_LOCATION` concern the location on the host.
+However, the variable `IMMICH_CONFIG_FILE` concerns the location inside the container, and informs the `immich-server` container that a configuration file is present.
+
+It is recommended to reuse this variable in your `docker-compose.yml`:
+
+```yaml
+volumes:
+  - ./configuration.yml:${IMMICH_CONFIG_FILE}
+```
+
+::

docs/mise.toml

@@ -23,3 +23,9 @@ run = "prettier --check ."
 [tasks."format-fix"]
 env._.path = "./node_modules/.bin"
 run = "prettier --write ."
+
+[tasks.deploy]
+run = "wrangler pages deploy build --project-name=${PROJECT_NAME} --branch=${BRANCH_NAME}"
+
+[tools]
+wrangler = "4.66.0"

e2e/package.json

@@ -7,8 +7,13 @@
   "scripts": {
     "test": "vitest --run",
     "test:watch": "vitest",
-    "test:web": "npx playwright test",
-    "start:web": "npx playwright test --ui",
+    "test:maintenance": "vitest --run --config vitest.maintenance.config.ts",
+    "test:web": "npx playwright test --project=web",
+    "test:web:maintenance": "npx playwright test --project=maintenance",
+    "test:web:ui": "npx playwright test --project=ui",
+    "start:web": "npx playwright test --ui --project=web",
+    "start:web:maintenance": "npx playwright test --ui --project=maintenance",
+    "start:web:ui": "npx playwright test --ui --project=ui",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "lint": "eslint \"src/**/*.ts\" --max-warnings 0",

e2e/playwright.config.ts

@@ -48,7 +48,7 @@ const config: PlaywrightTestConfig = {
     {
       name: 'maintenance',
       use: { ...devices['Desktop Chrome'] },
-      testDir: './src/specs/maintenance',
+      testDir: './src/specs/maintenance/web',
       workers: 1,
     },
   ],

e2e/vitest.config.ts

@@ -1,15 +1,20 @@
 import { defineConfig } from 'vitest/config';
 
-// skip `docker compose up` if `make e2e` was already run
+const skipDockerSetup = process.env.VITEST_DISABLE_DOCKER_SETUP === 'true';
+
+// skip `docker compose up` if `make e2e` was already run or if VITEST_DISABLE_DOCKER_SETUP is set
 const globalSetup: string[] = [];
-try {
-  await fetch('http://127.0.0.1:2285/api/server/ping');
-} catch {
-  globalSetup.push('src/docker-compose.ts');
+if (!skipDockerSetup) {
+  try {
+    await fetch('http://127.0.0.1:2285/api/server/ping');
+  } catch {
+    globalSetup.push('src/docker-compose.ts');
+  }
 }
 
 export default defineConfig({
   test: {
+    retry: process.env.CI ? 4 : 0,
     include: ['src/specs/server/**/*.e2e-spec.ts'],
     globalSetup,
     testTimeout: 15_000,

e2e/vitest.maintenance.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vitest/config';
+
+const skipDockerSetup = process.env.VITEST_DISABLE_DOCKER_SETUP === 'true';
+
+// skip `docker compose up` if `make e2e` was already run or if VITEST_DISABLE_DOCKER_SETUP is set
+const globalSetup: string[] = [];
+if (!skipDockerSetup) {
+  try {
+    await fetch('http://127.0.0.1:2285/api/server/ping');
+  } catch {
+    globalSetup.push('src/docker-compose.ts');
+  }
+}
+
+export default defineConfig({
+  test: {
+    retry: process.env.CI ? 4 : 0,
+    include: ['src/specs/maintenance/server/**/*.e2e-spec.ts'],
+    globalSetup,
+    testTimeout: 15_000,
+    pool: 'threads',
+    poolOptions: {
+      threads: {
+        singleThread: true,
+      },
+    },
+  },
+});

i18n/en.json

@@ -1218,6 +1218,7 @@
   "filter_description": "Conditions to filter the target assets",
   "filter_people": "Filter people",
   "filter_places": "Filter places",
+  "filter_tags": "Filter tags",
   "filters": "Filters",
   "find_them_fast": "Find them fast by name with search",
   "first": "First",
@@ -1649,6 +1650,7 @@
   "only_favorites": "Only favorites",
   "open": "Open",
   "open_calendar": "Open calendar",
+  "open_in_browser": "Open in browser",
   "open_in_map_view": "Open in map view",
   "open_in_openstreetmap": "Open in OpenStreetMap",
   "open_the_search_filters": "Open the search filters",
@@ -1945,6 +1947,7 @@
   "search_filter_ocr": "Search by OCR",
   "search_filter_people_title": "Select people",
   "search_filter_star_rating": "Star Rating",
+  "search_filter_tags_title": "Select tags",
   "search_for": "Search for",
   "search_for_existing_person": "Search for existing person",
   "search_no_more_result": "No more results",

mise.toml

@@ -22,7 +22,7 @@ opentofu = "1.11.4"
 java = "21.0.2"
 
 [tools."github:CQLabs/homebrew-dcm"]
-version = "1.30.0"
+version = "1.35.1"
 bin = "dcm"
 postinstall = "chmod +x $MISE_TOOL_INSTALL_PATH/dcm"
 

mobile/dcm_global.yaml

@@ -1 +1 @@
-version: '>=1.29.0 <=1.30.0'
+version: '>=1.29.0 <=1.36.0'

mobile/lib/domain/models/tag.model.dart

@@ -0,0 +1,29 @@
+import 'package:openapi/api.dart';
+
+class Tag {
+  final String id;
+  final String value;
+
+  const Tag({required this.id, required this.value});
+
+  @override
+  String toString() {
+    return 'Tag(id: $id, value: $value)';
+  }
+
+  @override
+  bool operator ==(covariant Tag other) {
+    if (identical(this, other)) return true;
+
+    return other.id == id && other.value == value;
+  }
+
+  @override
+  int get hashCode {
+    return id.hashCode ^ value.hashCode;
+  }
+
+  static Tag fromDto(TagResponseDto dto) {
+    return Tag(id: dto.id, value: dto.value);
+  }
+}

mobile/lib/infrastructure/repositories/search_api.repository.dart

@@ -35,6 +35,7 @@ class SearchApiRepository extends ApiRepository {
           isFavorite: filter.display.isFavorite ? true : null,
           isNotInAlbum: filter.display.isNotInAlbum ? true : null,
           personIds: filter.people.map((e) => e.id).toList(),
+          tagIds: filter.tagIds,
           type: type,
           page: page,
           size: 100,
@@ -59,6 +60,7 @@ class SearchApiRepository extends ApiRepository {
         isFavorite: filter.display.isFavorite ? true : null,
         isNotInAlbum: filter.display.isNotInAlbum ? true : null,
         personIds: filter.people.map((e) => e.id).toList(),
+        tagIds: filter.tagIds,
         type: type,
         page: page,
         size: 1000,

mobile/lib/infrastructure/repositories/tags_api.repository.dart

@@ -0,0 +1,17 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/infrastructure/repositories/api.repository.dart';
+import 'package:immich_mobile/providers/api.provider.dart';
+import 'package:openapi/api.dart';
+
+final tagsApiRepositoryProvider = Provider<TagsApiRepository>(
+  (ref) => TagsApiRepository(ref.read(apiServiceProvider).tagsApi),
+);
+
+class TagsApiRepository extends ApiRepository {
+  final TagsApi _api;
+  const TagsApiRepository(this._api);
+
+  Future<List<TagResponseDto>?> getAllTags() async {
+    return await _api.getAllTags();
+  }
+}

mobile/lib/models/search/search_filter.model.dart

@@ -214,6 +214,7 @@ class SearchFilter {
   String? ocr;
   String? language;
   String? assetId;
+  List<String>? tagIds;
   Set<PersonDto> people;
   SearchLocationFilter location;
   SearchCameraFilter camera;
@@ -231,6 +232,7 @@ class SearchFilter {
     this.ocr,
     this.language,
     this.assetId,
+    this.tagIds,
     required this.people,
     required this.location,
     required this.camera,
@@ -246,6 +248,7 @@ class SearchFilter {
         (description == null || (description!.isEmpty)) &&
         (assetId == null || (assetId!.isEmpty)) &&
         (ocr == null || (ocr!.isEmpty)) &&
+        (tagIds ?? []).isEmpty &&
         people.isEmpty &&
         location.country == null &&
         location.state == null &&
@@ -269,6 +272,7 @@ class SearchFilter {
     String? ocr,
     String? assetId,
     Set<PersonDto>? people,
+    List<String>? tagIds,
     SearchLocationFilter? location,
     SearchCameraFilter? camera,
     SearchDateFilter? date,
@@ -290,12 +294,13 @@ class SearchFilter {
       display: display ?? this.display,
       rating: rating ?? this.rating,
       mediaType: mediaType ?? this.mediaType,
+      tagIds: tagIds ?? this.tagIds,
     );
   }
 
   @override
   String toString() {
-    return 'SearchFilter(context: $context, filename: $filename, description: $description, language: $language, ocr: $ocr, people: $people, location: $location, camera: $camera, date: $date, display: $display, rating: $rating, mediaType: $mediaType, assetId: $assetId)';
+    return 'SearchFilter(context: $context, filename: $filename, description: $description, language: $language, ocr: $ocr, people: $people, location: $location, tagIds: $tagIds, camera: $camera, date: $date, display: $display, rating: $rating, mediaType: $mediaType, assetId: $assetId)';
   }
 
   @override
@@ -309,6 +314,7 @@ class SearchFilter {
         other.ocr == ocr &&
         other.assetId == assetId &&
         other.people == people &&
+        other.tagIds == tagIds &&
         other.location == location &&
         other.camera == camera &&
         other.date == date &&
@@ -326,6 +332,7 @@ class SearchFilter {
         ocr.hashCode ^
         assetId.hashCode ^
         people.hashCode ^
+        tagIds.hashCode ^
         location.hashCode ^
         camera.hashCode ^
         date.hashCode ^

mobile/lib/pages/search/map/map.page.dart

@@ -118,7 +118,7 @@ class MapPage extends HookConsumerWidget {
     }
 
     // finds the nearest asset marker from the tap point and store it as the selectedMarker
-    Future<void> onMarkerClicked(Point<double> point, LatLng coords) async {
+    Future<void> onMarkerClicked(Point<double> point, LatLng _) async {
       // Guard map not created
       if (mapController.value == null) {
         return;

mobile/lib/pages/search/map/map_location_picker.page.dart

@@ -28,7 +28,7 @@ class MapLocationPickerPage extends HookConsumerWidget {
       marker.value = await controller.value?.addMarkerAtLatLng(initialLatLng);
     }
 
-    Future<void> onMapClick(Point<num> point, LatLng centre) async {
+    Future<void> onMapClick(Point<num> _, LatLng centre) async {
       selectedLatLng.value = centre;
       await controller.value?.animateCamera(CameraUpdate.newLatLng(centre));
       if (marker.value != null) {

mobile/lib/presentation/pages/dev/ui_showcase.page.dart

@@ -1,100 +0,0 @@
-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;
-}
-
-class _ComponentTitle extends StatelessWidget {
-  final String title;
-
-  const _ComponentTitle(this.title);
-
-  @override
-  Widget build(BuildContext context) {
-    return Text(title, style: context.textTheme.titleLarge);
-  }
-}
-
-@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: [
-              const _ComponentTitle("IconButton"),
-              ..._showcaseBuilder(
-                (variant, color) =>
-                    ImmichIconButton(icon: Icons.favorite, color: color, variant: variant, onPressed: () {}),
-              ),
-              const _ComponentTitle("CloseButton"),
-              ..._showcaseBuilder(
-                (variant, color) => ImmichCloseButton(color: color, variant: variant, onPressed: () {}),
-              ),
-              const _ComponentTitle("TextButton"),
-
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.filled,
-                color: ImmichColor.primary,
-              ),
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.filled,
-                color: ImmichColor.primary,
-                loading: true,
-              ),
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.ghost,
-                color: ImmichColor.primary,
-              ),
-              ImmichTextButton(
-                labelText: "Text Button",
-                onPressed: () {},
-                variant: ImmichVariant.ghost,
-                color: ImmichColor.primary,
-                loading: true,
-              ),
-              const _ComponentTitle("Form"),
-              ImmichForm(
-                onSubmit: () {},
-                child: const Column(
-                  spacing: 10,
-                  children: [ImmichTextInput(label: "Title", hintText: "Enter a title")],
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

mobile/lib/presentation/pages/search/drift_search.page.dart

@@ -7,6 +7,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/person.model.dart';
+import 'package:immich_mobile/domain/models/tag.model.dart';
 import 'package:immich_mobile/domain/models/timeline.model.dart';
 import 'package:immich_mobile/domain/services/timeline.service.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
@@ -24,6 +25,7 @@ import 'package:immich_mobile/providers/server_info.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/widgets/common/feature_check.dart';
 import 'package:immich_mobile/widgets/common/search_field.dart';
+import 'package:immich_mobile/widgets/common/tag_picker.dart';
 import 'package:immich_mobile/widgets/search/search_filter/camera_picker.dart';
 import 'package:immich_mobile/widgets/search/search_filter/display_option_picker.dart';
 import 'package:immich_mobile/widgets/search/search_filter/filter_bottom_sheet_scaffold.dart';
@@ -62,6 +64,7 @@ class DriftSearchPage extends HookConsumerWidget {
         mediaType: preFilter?.mediaType ?? AssetType.other,
         language: "${context.locale.languageCode}-${context.locale.countryCode}",
         assetId: preFilter?.assetId,
+        tagIds: preFilter?.tagIds ?? [],
       ),
     );
 
@@ -72,15 +75,14 @@ class DriftSearchPage extends HookConsumerWidget {
     final dateRangeCurrentFilterWidget = useState<Widget?>(null);
     final cameraCurrentFilterWidget = useState<Widget?>(null);
     final locationCurrentFilterWidget = useState<Widget?>(null);
+    final tagCurrentFilterWidget = useState<Widget?>(null);
     final mediaTypeCurrentFilterWidget = useState<Widget?>(null);
     final ratingCurrentFilterWidget = useState<Widget?>(null);
     final displayOptionCurrentFilterWidget = useState<Widget?>(null);
 
     final isSearching = useState(false);
 
-    final isRatingEnabled = ref
-        .watch(userMetadataPreferencesProvider)
-        .maybeWhen(data: (prefs) => prefs?.ratingsEnabled ?? false, orElse: () => false);
+    final userPreferences = ref.watch(userMetadataPreferencesProvider);
 
     SnackBar searchInfoSnackBar(String message) {
       return SnackBar(
@@ -177,6 +179,42 @@ class DriftSearchPage extends HookConsumerWidget {
       );
     }
 
+    showTagPicker() {
+      handleOnSelect(Iterable<Tag> tags) {
+        filter.value = filter.value.copyWith(tagIds: tags.map((t) => t.id).toList());
+        final label = tags.map((t) => t.value).join(', ');
+        if (label.isEmpty) {
+          tagCurrentFilterWidget.value = null;
+        } else {
+          tagCurrentFilterWidget.value = Text(
+            label.isEmpty ? 'tags'.t(context: context) : label,
+            style: context.textTheme.labelLarge,
+          );
+        }
+      }
+
+      handleClear() {
+        filter.value = filter.value.copyWith(tagIds: []);
+        tagCurrentFilterWidget.value = null;
+        search();
+      }
+
+      showFilterBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        child: FractionallySizedBox(
+          heightFactor: 0.8,
+          child: FilterBottomSheetScaffold(
+            title: 'search_filter_tags_title'.t(context: context),
+            expanded: true,
+            onSearch: search,
+            onClear: handleClear,
+            child: TagPicker(onSelect: handleOnSelect, filter: (filter.value.tagIds ?? []).toSet()),
+          ),
+        ),
+      );
+    }
+
     showLocationPicker() {
       handleOnSelect(Map<String, String?> value) {
         filter.value = filter.value.copyWith(
@@ -658,6 +696,13 @@ class DriftSearchPage extends HookConsumerWidget {
                       label: 'search_filter_location'.t(context: context),
                       currentFilter: locationCurrentFilterWidget.value,
                     ),
+                    if (userPreferences.value?.tagsEnabled ?? false)
+                      SearchFilterChip(
+                        icon: Icons.sell_outlined,
+                        onTap: showTagPicker,
+                        label: 'tags'.t(context: context),
+                        currentFilter: tagCurrentFilterWidget.value,
+                      ),
                     SearchFilterChip(
                       icon: Icons.camera_alt_outlined,
                       onTap: showCameraPicker,
@@ -677,7 +722,7 @@ class DriftSearchPage extends HookConsumerWidget {
                       label: 'search_filter_media_type'.t(context: context),
                       currentFilter: mediaTypeCurrentFilterWidget.value,
                     ),
-                    if (isRatingEnabled) ...[
+                    if (userPreferences.value?.ratingsEnabled ?? false) ...[
                       SearchFilterChip(
                         icon: Icons.star_outline_rounded,
                         onTap: showStarRatingPicker,

mobile/lib/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class OpenInBrowserActionButton extends ConsumerWidget {
+  final String remoteId;
+  final TimelineOrigin origin;
+  final bool iconOnly;
+  final bool menuItem;
+  final Color? iconColor;
+
+  const OpenInBrowserActionButton({
+    super.key,
+    required this.remoteId,
+    required this.origin,
+    this.iconOnly = false,
+    this.menuItem = false,
+    this.iconColor,
+  });
+
+  void _onTap() async {
+    final serverEndpoint = Store.get(StoreKey.serverEndpoint).replaceFirst('/api', '');
+
+    String originPath = '';
+    switch (origin) {
+      case TimelineOrigin.favorite:
+        originPath = '/favorites';
+        break;
+      case TimelineOrigin.trash:
+        originPath = '/trash';
+        break;
+      case TimelineOrigin.archive:
+        originPath = '/archive';
+        break;
+      default:
+        break;
+    }
+
+    final url = '$serverEndpoint$originPath/photos/$remoteId';
+    if (await canLaunchUrl(Uri.parse(url))) {
+      await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      label: 'open_in_browser'.t(context: context),
+      iconData: Icons.open_in_browser,
+      iconColor: iconColor,
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: _onTap,
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/asset_page.widget.dart

@@ -45,7 +45,6 @@ class _AssetPageState extends ConsumerState<AssetPage> {
 
   late PhotoViewControllerValue _initialPhotoViewState;
 
-  bool _blockGestures = false;
   bool _showingDetails = false;
   bool _isZoomed = false;
 
@@ -58,7 +57,6 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   DragStartDetails? _dragStart;
   _DragIntent _dragIntent = _DragIntent.none;
   Drag? _drag;
-  bool _dragInProgress = false;
   bool _shouldPopOnDrag = false;
 
   @override
@@ -137,14 +135,12 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _updateDrag(DragUpdateDetails details) {
-    if (_blockGestures) return;
-
-    _dragInProgress = true;
+    if (_dragStart == null) return;
 
     if (_dragIntent == _DragIntent.none) {
       _dragIntent = switch ((details.globalPosition - _dragStart!.globalPosition).dy) {
-        < -kTouchSlop => _DragIntent.scroll,
-        > kTouchSlop => _DragIntent.dismiss,
+        < 0 => _DragIntent.scroll,
+        > 0 => _DragIntent.dismiss,
         _ => _DragIntent.none,
       };
     }
@@ -160,16 +156,12 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _endDrag(DragEndDetails details) {
-    _dragInProgress = false;
+    if (_dragStart == null) return;
 
-    if (_blockGestures) {
-      _blockGestures = false;
-      return;
-    }
+    _dragStart = null;
 
     final intent = _dragIntent;
     _dragIntent = _DragIntent.none;
-    _dragStart = null;
 
     switch (intent) {
       case _DragIntent.none:
@@ -201,10 +193,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     PhotoViewScaleStateController scaleStateController,
   ) {
     _viewController = controller;
-    if (!_showingDetails && _isZoomed) {
-      _blockGestures = true;
-      return;
-    }
+    if (!_showingDetails && _isZoomed) return;
     _beginDrag(details);
   }
 
@@ -235,7 +224,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
   }
 
   void _onTapUp(BuildContext context, TapUpDetails details, PhotoViewControllerValue controllerValue) {
-    if (!_showingDetails && !_dragInProgress) _viewer.toggleControls();
+    if (!_showingDetails && _dragStart == null) _viewer.toggleControls();
   }
 
   void _onLongPress(BuildContext context, LongPressStartDetails details, PhotoViewControllerValue controllerValue) =>
@@ -249,7 +238,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     _viewer.setZoomed(_isZoomed);
 
     if (scaleState != PhotoViewScaleState.initial) {
-      if (!_dragInProgress) _viewer.setControls(false);
+      if (_dragStart == null) _viewer.setControls(false);
 
       ref.read(videoPlayerControlsProvider.notifier).pause();
       return;
@@ -382,9 +371,10 @@ class _AssetPageState extends ConsumerState<AssetPage> {
     final viewportHeight = MediaQuery.heightOf(context);
     final imageHeight = _getImageHeight(viewportWidth, viewportHeight, displayAsset);
 
-    final margin = (viewportHeight - imageHeight) / 2;
-    final overflowBoxHeight = margin + imageHeight - (kMinInteractiveDimension / 2);
-    _snapOffset = (margin + imageHeight) - (viewportHeight / 4);
+    final detailsOffset = (viewportHeight + imageHeight - kMinInteractiveDimension) / 2;
+    final snapTarget = viewportHeight / 3;
+
+    _snapOffset = detailsOffset - snapTarget;
 
     if (_proxyScrollController.hasClients) {
       _proxyScrollController.snapPosition.snapOffset = _snapOffset;
@@ -429,7 +419,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
                   ignoring: !_showingDetails,
                   child: Column(
                     children: [
-                      SizedBox(height: overflowBoxHeight),
+                      SizedBox(height: detailsOffset),
                       GestureDetector(
                         onVerticalDragStart: _beginDrag,
                         onVerticalDragUpdate: _updateDrag,
@@ -438,7 +428,7 @@ class _AssetPageState extends ConsumerState<AssetPage> {
                         child: AnimatedOpacity(
                           opacity: _showingDetails ? 1.0 : 0.0,
                           duration: Durations.short2,
-                          child: AssetDetails(minHeight: _snapOffset + viewportHeight - overflowBoxHeight),
+                          child: AssetDetails(minHeight: viewportHeight - snapTarget),
                         ),
                       ),
                     ],

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -87,39 +87,37 @@ class AssetViewer extends ConsumerStatefulWidget {
 }
 
 class _AssetViewerState extends ConsumerState<AssetViewer> {
-  late PageController pageController;
+  late final _heroOffset = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+  late final _pageController = PageController(initialPage: widget.initialIndex);
+  late final _preloader = AssetPreloader(timelineService: ref.read(timelineServiceProvider), mounted: () => mounted);
 
   StreamSubscription? _reloadSubscription;
-
-  late final int heroOffset;
-  bool _assetReloadRequested = false;
-  int _totalAssets = 0;
-
-  late final AssetPreloader _preloader;
   KeepAliveLink? _stackChildrenKeepAlive;
 
+  bool _assetReloadRequested = false;
+
   @override
   void initState() {
     super.initState();
-    assert(ref.read(currentAssetNotifier) != null, "Current asset should not be null when opening the AssetViewer");
-    pageController = PageController(initialPage: widget.initialIndex);
-    final timelineService = ref.read(timelineServiceProvider);
-    _totalAssets = timelineService.totalAssets;
-    _preloader = AssetPreloader(timelineService: timelineService, mounted: () => mounted);
-    WidgetsBinding.instance.addPostFrameCallback(_onAssetInit);
-    _reloadSubscription = EventStream.shared.listen(_onEvent);
-    heroOffset = widget.heroOffset ?? TabsRouterScope.of(context)?.controller.activeIndex ?? 0;
+
     final asset = ref.read(currentAssetNotifier);
+    assert(asset != null, "Current asset should not be null when opening the AssetViewer");
     if (asset != null) _stackChildrenKeepAlive = ref.read(stackChildrenNotifier(asset).notifier).ref.keepAlive();
+
+    _reloadSubscription = EventStream.shared.listen(_onEvent);
+
+    WidgetsBinding.instance.addPostFrameCallback(_onAssetInit);
   }
 
   @override
   void dispose() {
-    pageController.dispose();
+    _pageController.dispose();
     _preloader.dispose();
     _reloadSubscription?.cancel();
     _stackChildrenKeepAlive?.close();
+
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+
     super.dispose();
   }
 
@@ -176,26 +174,26 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _onTimelineReloadEvent() {
     final timelineService = ref.read(timelineServiceProvider);
-    _totalAssets = timelineService.totalAssets;
+    final totalAssets = timelineService.totalAssets;
 
-    if (_totalAssets == 0) {
+    if (totalAssets == 0) {
       context.maybePop();
       return;
     }
 
-    var index = pageController.page?.round() ?? 0;
+    var index = _pageController.page?.round() ?? 0;
     final currentAsset = ref.read(currentAssetNotifier);
     if (currentAsset != null) {
       final newIndex = timelineService.getIndex(currentAsset.heroTag);
       if (newIndex != null && newIndex != index) {
         index = newIndex;
-        pageController.jumpToPage(index);
+        _pageController.jumpToPage(index);
       }
     }
 
-    if (index >= _totalAssets) {
-      index = _totalAssets - 1;
-      pageController.jumpToPage(index);
+    if (index >= totalAssets) {
+      index = totalAssets - 1;
+      _pageController.jumpToPage(index);
     }
 
     if (_assetReloadRequested) {
@@ -264,15 +262,15 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
             PhotoViewGestureDetectorScope(
               axis: Axis.horizontal,
               child: PageView.builder(
-                controller: pageController,
+                controller: _pageController,
                 physics: isZoomed
                     ? const NeverScrollableScrollPhysics()
                     : CurrentPlatform.isIOS
                     ? const FastScrollPhysics()
                     : const FastClampingScrollPhysics(),
-                itemCount: _totalAssets,
+                itemCount: ref.read(timelineServiceProvider).totalAssets,
                 onPageChanged: (index) => _onAssetChanged(index),
-                itemBuilder: (context, index) => AssetPage(index: index, heroOffset: heroOffset),
+                itemBuilder: (context, index) => AssetPage(index: index, heroOffset: _heroOffset),
               ),
             ),
             if (!CurrentPlatform.isIOS)

mobile/lib/providers/infrastructure/tag.provider.dart

@@ -0,0 +1,17 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/tag.model.dart';
+import 'package:immich_mobile/infrastructure/repositories/tags_api.repository.dart';
+
+class TagNotifier extends AsyncNotifier<Set<Tag>> {
+  @override
+  Future<Set<Tag>> build() async {
+    final repo = ref.read(tagsApiRepositoryProvider);
+    final allTags = await repo.getAllTags();
+    if (allTags == null) {
+      return {};
+    }
+    return allTags.map((t) => Tag.fromDto(t)).toSet();
+  }
+}
+
+final tagProvider = AsyncNotifierProvider<TagNotifier, Set<Tag>>(TagNotifier.new);

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/cleanup_preview.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';
@@ -88,7 +88,6 @@ import 'package:immich_mobile/presentation/pages/drift_album_options.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_archive.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_asset_selection_timeline.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_asset_troubleshoot.page.dart';
-import 'package:immich_mobile/presentation/pages/cleanup_preview.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_create_album.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_favorite.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_library.page.dart';
@@ -338,7 +337,6 @@ 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]),
     AutoRoute(page: CleanupPreviewRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722

mobile/lib/routing/router.gr.dart

@@ -1873,22 +1873,6 @@ 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> {

mobile/lib/services/api.service.dart

@@ -35,6 +35,7 @@ class ApiService implements Authentication {
   late ViewsApi viewApi;
   late MemoriesApi memoriesApi;
   late SessionsApi sessionsApi;
+  late TagsApi tagsApi;
 
   ApiService() {
     // The below line ensures that the api clients are initialized when the service is instantiated
@@ -74,6 +75,7 @@ class ApiService implements Authentication {
     viewApi = ViewsApi(_apiClient);
     memoriesApi = MemoriesApi(_apiClient);
     sessionsApi = SessionsApi(_apiClient);
+    tagsApi = TagsApi(_apiClient);
   }
 
   Future<void> _setUserAgentHeader() async {

mobile/lib/utils/action_button.utils.dart

@@ -18,6 +18,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permane
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_lock_folder_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
@@ -69,6 +70,7 @@ enum ActionButtonType {
   viewInTimeline,
   download,
   upload,
+  openInBrowser,
   unstack,
   archive,
   unarchive,
@@ -138,6 +140,7 @@ enum ActionButtonType {
         context.isOwner && //
             !context.isInLockedView && //
             context.isStacked,
+      ActionButtonType.openInBrowser => context.asset.hasRemote && !context.isInLockedView,
       ActionButtonType.likeActivity =>
         !context.isInLockedView &&
             context.currentAlbum != null &&
@@ -215,6 +218,13 @@ enum ActionButtonType {
       ),
       ActionButtonType.likeActivity => LikeActivityActionButton(iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.unstack => UnStackActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
+      ActionButtonType.openInBrowser => OpenInBrowserActionButton(
+        remoteId: context.asset.remoteId!,
+        origin: context.timelineOrigin,
+        iconOnly: iconOnly,
+        menuItem: menuItem,
+        iconColor: context.originalTheme?.iconTheme.color,
+      ),
       ActionButtonType.similarPhotos => SimilarPhotosActionButton(
         assetId: (context.asset as RemoteAsset).id,
         iconOnly: iconOnly,

mobile/lib/widgets/common/immich_app_bar.dart

@@ -1,6 +1,5 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -153,11 +152,6 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
       actions: [
         if (actions != null)
           ...actions!.map((action) => Padding(padding: const EdgeInsets.only(right: 16), child: action)),
-        if (kDebugMode || kProfileMode)
-          IconButton(
-            icon: const Icon(Icons.palette_rounded),
-            onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
-          ),
         if (isCasting)
           Padding(
             padding: const EdgeInsets.only(right: 12),

mobile/lib/widgets/common/immich_sliver_app_bar.dart

@@ -74,11 +74,6 @@ class ImmichSliverAppBar extends ConsumerWidget {
                 icon: Icon(isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded),
               ),
             if (actions != null) ...actions!,
-            if ((kDebugMode || kProfileMode) && !isReadonlyModeEnabled)
-              IconButton(
-                onPressed: () => context.pushRoute(const ImmichUIShowcaseRoute()),
-                icon: const Icon(Icons.palette_rounded),
-              ),
             if (showUploadButton && !isReadonlyModeEnabled) const _BackupIndicator(),
             const _ProfileIndicator(),
             const SizedBox(width: 8),

mobile/lib/widgets/common/tag_picker.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/tag.model.dart';
+import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/tag.provider.dart';
+import 'package:immich_mobile/widgets/common/search_field.dart';
+
+class TagPicker extends HookConsumerWidget {
+  const TagPicker({super.key, required this.onSelect, required this.filter});
+
+  final Function(Iterable<Tag>) onSelect;
+  final Set<String> filter;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final formFocus = useFocusNode();
+    final searchQuery = useState('');
+    final tags = ref.watch(tagProvider);
+    final selectedTagIds = useState<Set<String>>(filter);
+    final borderRadius = const BorderRadius.all(Radius.circular(10));
+
+    return Column(
+      children: [
+        Padding(
+          padding: const EdgeInsets.all(8),
+          child: SearchField(
+            focusNode: formFocus,
+            onChanged: (value) => searchQuery.value = value,
+            onTapOutside: (_) => formFocus.unfocus(),
+            filled: true,
+            hintText: 'filter_tags'.tr(),
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 0),
+          child: Divider(color: context.colorScheme.surfaceContainerHighest, thickness: 1),
+        ),
+        Expanded(
+          child: tags.widgetWhen(
+            onData: (tags) {
+              final queryResult = tags
+                  .where((t) => t.value.toLowerCase().contains(searchQuery.value.toLowerCase()))
+                  .toList();
+              return ListView.builder(
+                itemCount: queryResult.length,
+                padding: const EdgeInsets.all(8),
+                itemBuilder: (context, index) {
+                  final tag = queryResult[index];
+                  final isSelected = selectedTagIds.value.any((id) => id == tag.id);
+
+                  return Padding(
+                    padding: const EdgeInsets.only(bottom: 2.0),
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: isSelected ? context.primaryColor : context.primaryColor.withAlpha(25),
+                        borderRadius: borderRadius,
+                      ),
+                      child: ListTile(
+                        title: Text(
+                          tag.value,
+                          style: context.textTheme.bodyLarge?.copyWith(
+                            color: isSelected ? context.colorScheme.onPrimary : context.colorScheme.onSurface,
+                          ),
+                        ),
+                        onTap: () {
+                          final newSelected = {...selectedTagIds.value};
+                          if (isSelected) {
+                            newSelected.removeWhere((id) => id == tag.id);
+                          } else {
+                            newSelected.add(tag.id);
+                          }
+                          selectedTagIds.value = newSelected;
+                          onSelect(tags.where((t) => newSelected.contains(t.id)));
+                        },
+                      ),
+                    ),
+                  );
+                },
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/settings/networking_settings/external_network_preference.dart

@@ -54,7 +54,7 @@ class ExternalNetworkPreference extends HookConsumerWidget {
       saveEndpointList();
     }
 
-    Widget proxyDecorator(Widget child, int index, Animation<double> animation) {
+    Widget proxyDecorator(Widget child, int _, Animation<double> animation) {
       return AnimatedBuilder(
         animation: animation,
         builder: (BuildContext context, Widget? child) {

mobile/mise.toml

@@ -16,7 +16,15 @@ sources = [
   "infrastructure/**/*.drift",
 ]
 outputs = { auto = true }
-run = "dart run build_runner build --delete-conflicting-outputs"
+run = [
+  "dart run build_runner build --delete-conflicting-outputs",
+  "dart format lib/routing/router.gr.dart",
+]
+
+[tasks."codegen:watch"]
+alias = "watch"
+description = "Watch and auto-generate dart code"
+run = "dart run build_runner watch --delete-conflicting-outputs"
 
 [tasks."codegen:pigeon"]
 alias = "pigeon"
@@ -32,7 +40,7 @@ depends = [
 [tasks."codegen:translation"]
 alias = "translation"
 description = "Generate translations from i18n JSONs"
-run = [{ task = "//i18n:format-fix" }, { tasks = ["i18n:loader", "i18n:keys"] }]
+run = [{ task = "//:i18n:format-fix" }, { tasks = ["i18n:loader", "i18n:keys"] }]
 
 [tasks."codegen:app-icon"]
 description = "Generate app icons"

mobile/openapi/README.md

@@ -416,6 +416,7 @@ Class | Method | HTTP request | Description
  - [DatabaseBackupDeleteDto](doc//DatabaseBackupDeleteDto.md)
  - [DatabaseBackupDto](doc//DatabaseBackupDto.md)
  - [DatabaseBackupListResponseDto](doc//DatabaseBackupListResponseDto.md)
+ - [DownloadArchiveDto](doc//DownloadArchiveDto.md)
  - [DownloadArchiveInfo](doc//DownloadArchiveInfo.md)
  - [DownloadInfoDto](doc//DownloadInfoDto.md)
  - [DownloadResponse](doc//DownloadResponse.md)

mobile/openapi/lib/api.dart

@@ -155,6 +155,7 @@ part 'model/database_backup_config.dart';
 part 'model/database_backup_delete_dto.dart';
 part 'model/database_backup_dto.dart';
 part 'model/database_backup_list_response_dto.dart';
+part 'model/download_archive_dto.dart';
 part 'model/download_archive_info.dart';
 part 'model/download_info_dto.dart';
 part 'model/download_response.dart';

mobile/openapi/lib/api/download_api.dart

@@ -24,17 +24,17 @@ class DownloadApi {
   ///
   /// Parameters:
   ///
-  /// * [AssetIdsDto] assetIdsDto (required):
+  /// * [DownloadArchiveDto] downloadArchiveDto (required):
   ///
   /// * [String] key:
   ///
   /// * [String] slug:
-  Future<Response> downloadArchiveWithHttpInfo(AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
+  Future<Response> downloadArchiveWithHttpInfo(DownloadArchiveDto downloadArchiveDto, { String? key, String? slug, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/download/archive';
 
     // ignore: prefer_final_locals
-    Object? postBody = assetIdsDto;
+    Object? postBody = downloadArchiveDto;
 
     final queryParams = <QueryParam>[];
     final headerParams = <String, String>{};
@@ -67,13 +67,13 @@ class DownloadApi {
   ///
   /// Parameters:
   ///
-  /// * [AssetIdsDto] assetIdsDto (required):
+  /// * [DownloadArchiveDto] downloadArchiveDto (required):
   ///
   /// * [String] key:
   ///
   /// * [String] slug:
-  Future<MultipartFile?> downloadArchive(AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
-    final response = await downloadArchiveWithHttpInfo(assetIdsDto,  key: key, slug: slug, );
+  Future<MultipartFile?> downloadArchive(DownloadArchiveDto downloadArchiveDto, { String? key, String? slug, }) async {
+    final response = await downloadArchiveWithHttpInfo(downloadArchiveDto,  key: key, slug: slug, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }

mobile/openapi/lib/api_client.dart

@@ -356,6 +356,8 @@ class ApiClient {
           return DatabaseBackupDto.fromJson(value);
         case 'DatabaseBackupListResponseDto':
           return DatabaseBackupListResponseDto.fromJson(value);
+        case 'DownloadArchiveDto':
+          return DownloadArchiveDto.fromJson(value);
         case 'DownloadArchiveInfo':
           return DownloadArchiveInfo.fromJson(value);
         case 'DownloadInfoDto':

mobile/openapi/lib/model/download_archive_dto.dart

@@ -0,0 +1,120 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.18
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class DownloadArchiveDto {
+  /// Returns a new [DownloadArchiveDto] instance.
+  DownloadArchiveDto({
+    this.assetIds = const [],
+    this.edited,
+  });
+
+  /// Asset IDs
+  List<String> assetIds;
+
+  /// Download edited asset if available
+  ///
+  /// Please note: This property should have been non-nullable! Since the specification file
+  /// does not include a default value (using the "default:" property), however, the generated
+  /// source code must fall back to having a nullable type.
+  /// Consider adding a "default:" property in the specification file to hide this note.
+  ///
+  bool? edited;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is DownloadArchiveDto &&
+    _deepEquality.equals(other.assetIds, assetIds) &&
+    other.edited == edited;
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (assetIds.hashCode) +
+    (edited == null ? 0 : edited!.hashCode);
+
+  @override
+  String toString() => 'DownloadArchiveDto[assetIds=$assetIds, edited=$edited]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+      json[r'assetIds'] = this.assetIds;
+    if (this.edited != null) {
+      json[r'edited'] = this.edited;
+    } else {
+    //  json[r'edited'] = null;
+    }
+    return json;
+  }
+
+  /// Returns a new [DownloadArchiveDto] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static DownloadArchiveDto? fromJson(dynamic value) {
+    upgradeDto(value, "DownloadArchiveDto");
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return DownloadArchiveDto(
+        assetIds: json[r'assetIds'] is Iterable
+            ? (json[r'assetIds'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        edited: mapValueOfType<bool>(json, r'edited'),
+      );
+    }
+    return null;
+  }
+
+  static List<DownloadArchiveDto> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <DownloadArchiveDto>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = DownloadArchiveDto.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, DownloadArchiveDto> mapFromJson(dynamic json) {
+    final map = <String, DownloadArchiveDto>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = DownloadArchiveDto.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of DownloadArchiveDto-objects as value to a dart map
+  static Map<String, List<DownloadArchiveDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<DownloadArchiveDto>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = DownloadArchiveDto.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+    'assetIds',
+  };
+}
+

mobile/packages/ui/.gitignore

@@ -0,0 +1,15 @@
+# Build artifacts
+build/
+
+# Platform-specific files are not needed as this is a Flutter UI package
+android/
+ios/
+
+# Test cache and generated files
+.dart_tool/
+.packages
+.flutter-plugins
+.flutter-plugins-dependencies
+
+# Fonts copied by build process
+fonts/

mobile/packages/ui/lib/immich_ui.dart

@@ -1,5 +1,6 @@
 export 'src/components/close_button.dart';
 export 'src/components/form.dart';
+export 'src/components/html_text.dart';
 export 'src/components/icon_button.dart';
 export 'src/components/password_input.dart';
 export 'src/components/text_button.dart';

mobile/packages/ui/lib/src/components/html_text.dart

@@ -0,0 +1,189 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:html/dom.dart' as dom;
+import 'package:html/parser.dart' as html_parser;
+
+enum _HtmlTagType {
+  bold,
+  link,
+  unsupported,
+}
+
+class _HtmlTag {
+  final _HtmlTagType type;
+  final String tagName;
+
+  const _HtmlTag._({required this.type, required this.tagName});
+
+  static const unsupported = _HtmlTag._(type: _HtmlTagType.unsupported, tagName: 'unsupported');
+
+  static _HtmlTag? fromString(dom.Node node) {
+    final tagName = (node is dom.Element) ? node.localName : null;
+    if (tagName == null) {
+      return null;
+    }
+
+    final tag = tagName.toLowerCase();
+    return switch (tag) {
+      'b' || 'strong' => _HtmlTag._(type: _HtmlTagType.bold, tagName: tag),
+      // Convert <a> back to 'link' for handler lookup
+      'a' => const _HtmlTag._(type: _HtmlTagType.link, tagName: 'link'),
+      _ when tag.endsWith('-link') => _HtmlTag._(type: _HtmlTagType.link, tagName: tag),
+      _ => _HtmlTag.unsupported,
+    };
+  }
+}
+
+/// A widget that renders text with optional HTML-style formatting.
+///
+/// Supports the following tags:
+/// - `<b>` or `<strong>` for bold text
+/// - `<link>` or any tag ending with `-link` for tappable links
+///
+/// Example:
+/// ```dart
+/// ImmichHtmlText(
+///   'Refer to <link>docs</link> and <other-link>other</other-link>',
+///   linkHandlers: {
+///     'link': () => launchUrl(docsUrl),
+///     'other-link': () => launchUrl(otherUrl),
+///   },
+/// )
+/// ```
+class ImmichHtmlText extends StatefulWidget {
+  final String text;
+  final TextStyle? style;
+  final TextAlign? textAlign;
+  final TextOverflow? overflow;
+  final int? maxLines;
+  final bool? softWrap;
+  final Map<String, VoidCallback>? linkHandlers;
+  final TextStyle? linkStyle;
+
+  const ImmichHtmlText(
+    this.text, {
+    super.key,
+    this.style,
+    this.textAlign,
+    this.overflow,
+    this.maxLines,
+    this.softWrap,
+    this.linkHandlers,
+    this.linkStyle,
+  });
+
+  @override
+  State<ImmichHtmlText> createState() => _ImmichHtmlTextState();
+}
+
+class _ImmichHtmlTextState extends State<ImmichHtmlText> {
+  final _recognizers = <GestureRecognizer>[];
+  dom.DocumentFragment _document = dom.DocumentFragment();
+
+  @override
+  void initState() {
+    super.initState();
+    _document = html_parser.parseFragment(_preprocessHtml(widget.text));
+  }
+
+  @override
+  void didUpdateWidget(covariant ImmichHtmlText oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.text != widget.text) {
+      _document = html_parser.parseFragment(_preprocessHtml(widget.text));
+    }
+  }
+
+  /// `<link>` tags are preprocessed to `<a>` tags because `<link>` is a
+  /// void element in HTML5 and cannot have children. The linkHandlers still use
+  /// 'link' as the key.
+  String _preprocessHtml(String html) {
+    return html
+        .replaceAllMapped(
+          RegExp(r'<(link)>(.*?)</\1>', caseSensitive: false),
+          (match) => '<a>${match.group(2)}</a>',
+        )
+        .replaceAllMapped(
+          RegExp(r'<(link)\s*/>', caseSensitive: false),
+          (match) => '<a></a>',
+        );
+  }
+
+  @override
+  void dispose() {
+    _disposeRecognizers();
+    super.dispose();
+  }
+
+  void _disposeRecognizers() {
+    for (final recognizer in _recognizers) {
+      recognizer.dispose();
+    }
+    _recognizers.clear();
+  }
+
+  List<InlineSpan> _buildSpans() {
+    _disposeRecognizers();
+
+    return _document.nodes.expand((node) => _buildNode(node, null, null)).toList();
+  }
+
+  Iterable<InlineSpan> _buildNode(
+    dom.Node node,
+    TextStyle? style,
+    _HtmlTag? parentTag,
+  ) sync* {
+    if (node is dom.Text) {
+      if (node.text.isEmpty) {
+        return;
+      }
+
+      GestureRecognizer? recognizer;
+      if (parentTag?.type == _HtmlTagType.link) {
+        final handler = widget.linkHandlers?[parentTag?.tagName];
+        if (handler != null) {
+          recognizer = TapGestureRecognizer()..onTap = handler;
+          _recognizers.add(recognizer);
+        }
+      }
+
+      yield TextSpan(text: node.text, style: style, recognizer: recognizer);
+    } else if (node is dom.Element) {
+      final htmlTag = _HtmlTag.fromString(node);
+      final tagStyle = _styleForTag(htmlTag);
+      final mergedStyle = style?.merge(tagStyle) ?? tagStyle;
+      final newParentTag = htmlTag?.type == _HtmlTagType.link ? htmlTag : parentTag;
+
+      for (final child in node.nodes) {
+        yield* _buildNode(child, mergedStyle, newParentTag);
+      }
+    }
+  }
+
+  TextStyle? _styleForTag(_HtmlTag? tag) {
+    if (tag == null) {
+      return null;
+    }
+
+    return switch (tag.type) {
+      _HtmlTagType.bold => const TextStyle(fontWeight: FontWeight.bold),
+      _HtmlTagType.link => widget.linkStyle ??
+          TextStyle(
+            color: Theme.of(context).colorScheme.primary,
+            decoration: TextDecoration.underline,
+          ),
+      _HtmlTagType.unsupported => null,
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Text.rich(
+      TextSpan(style: widget.style, children: _buildSpans()),
+      textAlign: widget.textAlign,
+      overflow: widget.overflow,
+      maxLines: widget.maxLines,
+      softWrap: widget.softWrap,
+    );
+  }
+}

mobile/packages/ui/pubspec.lock

@@ -1,6 +1,22 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.13.0"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
   characters:
     dependency: transitive
     description:
@@ -9,6 +25,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
   collection:
     dependency: transitive
     description:
@@ -17,11 +41,72 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.19.1"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      sha256: "09bad715f418841f976c77db72d5398dc1253c21fb9c0c7f0b0b985860b2d58e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.3"
   flutter:
     dependency: "direct main"
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  html:
+    dependency: "direct main"
+    description:
+      name: html
+      sha256: "6d1264f2dffa1b1101c25a91dff0dc2daee4c18e87cd8538729773c073dbf602"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.6"
+  leak_tracker:
+    dependency: transitive
+    description:
+      name: leak_tracker
+      sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.0.2"
+  leak_tracker_flutter_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_flutter_testing
+      sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.10"
+  leak_tracker_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_testing
+      sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: dc58c723c3c24bf8d3e2d3ad3f2f9d7bd9cf43ec6feaa64181775e60190153f2
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.12.17"
   material_color_utilities:
     dependency: transitive
     description:
@@ -34,15 +119,71 @@ packages:
     dependency: transitive
     description:
       name: meta
-      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
+      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
       url: "https://pub.dev"
     source: hosted
-    version: "1.17.0"
+    version: "1.16.0"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
   sky_engine:
     dependency: transitive
     description: flutter
     source: sdk
     version: "0.0.0"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.10.1"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.12.1"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.6"
   vector_math:
     dependency: transitive
     description:
@@ -51,5 +192,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.2.0"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60"
+      url: "https://pub.dev"
+    source: hosted
+    version: "15.0.2"
 sdks:
   dart: ">=3.8.0-0 <4.0.0"
+  flutter: ">=3.18.0-18.0.pre.54"

mobile/packages/ui/pubspec.yaml

@@ -7,6 +7,11 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  html: ^0.15.6
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
 
 flutter:
   uses-material-design: true

mobile/packages/ui/showcase/.gitignore

@@ -0,0 +1,11 @@
+# Build artifacts
+build/
+
+# Test cache and generated files
+.dart_tool/
+.packages
+.flutter-plugins
+.flutter-plugins-dependencies
+
+# IDE-specific files
+.vscode/

mobile/packages/ui/showcase/.metadata

@@ -0,0 +1,30 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "adc901062556672b4138e18a4dc62a4be8f4b3c2"
+  channel: "stable"
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+      base_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+    - platform: web
+      create_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+      base_revision: adc901062556672b4138e18a4dc62a4be8f4b3c2
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

mobile/packages/ui/showcase/analysis_options.yaml

@@ -0,0 +1 @@
+include: package:flutter_lints/flutter.yaml

mobile/packages/ui/showcase/assets/themes/github_dark.json

@@ -0,0 +1,339 @@
+{
+  "name": "GitHub Dark",
+  "settings": [
+    {
+      "settings": {
+        "foreground": "#e1e4e8",
+        "background": "#24292e"
+      }
+    },
+    {
+      "scope": [
+        "comment",
+        "punctuation.definition.comment",
+        "string.comment"
+      ],
+      "settings": {
+        "foreground": "#6a737d"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language"
+      ],
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "entity",
+        "entity.name"
+      ],
+      "settings": {
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage",
+        "storage.type"
+      ],
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage.modifier.package",
+        "storage.modifier.import",
+        "storage.type.java"
+      ],
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": [
+        "string",
+        "punctuation.definition.string",
+        "string punctuation.section.embedded source"
+      ],
+      "settings": {
+        "foreground": "#9ecbff"
+      }
+    },
+    {
+      "scope": "support",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "variable",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "string variable",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "source.regexp",
+        "string.regexp"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": [
+        "markup.heading",
+        "markup.heading entity.name"
+      ],
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "markup.deleted",
+        "meta.diff.header.from-file",
+        "punctuation.definition.deleted"
+      ],
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "markup.inserted",
+        "meta.diff.header.to-file",
+        "punctuation.definition.inserted"
+      ],
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": [
+        "markup.changed",
+        "punctuation.definition.changed"
+      ],
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": [
+        "markup.ignored",
+        "markup.untracked"
+      ],
+      "settings": {
+        "foreground": "#2f363d"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#79b8ff"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#d1d5da"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "constant.other.reference.link",
+        "string.other.link"
+      ],
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#dbedff"
+      }
+    }
+  ]
+}

mobile/packages/ui/showcase/lib/app_theme.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  // Light theme colors
+  static const _primary500 = Color(0xFF4250AF);
+  static const _primary100 = Color(0xFFD4D6F0);
+  static const _primary900 = Color(0xFF181E44);
+  static const _danger500 = Color(0xFFE53E3E);
+  static const _light50 = Color(0xFFFAFAFA);
+  static const _light300 = Color(0xFFD4D4D4);
+  static const _light500 = Color(0xFF737373);
+
+  // Dark theme colors
+  static const _darkPrimary500 = Color(0xFFACCBFA);
+  static const _darkPrimary300 = Color(0xFF616D94);
+  static const _darkDanger500 = Color(0xFFE88080);
+  static const _darkLight50 = Color(0xFF0A0A0A);
+  static const _darkLight100 = Color(0xFF171717);
+  static const _darkLight200 = Color(0xFF262626);
+
+  static ThemeData get lightTheme {
+    return ThemeData(
+      colorScheme: const ColorScheme.light(
+        primary: _primary500,
+        onPrimary: Colors.white,
+        primaryContainer: _primary100,
+        onPrimaryContainer: _primary900,
+        secondary: _light500,
+        onSecondary: Colors.white,
+        error: _danger500,
+        onError: Colors.white,
+        surface: _light50,
+        onSurface: Color(0xFF1A1C1E),
+        surfaceContainerHighest: Color(0xFFE3E4E8),
+        outline: Color(0xFFD1D3D9),
+        outlineVariant: _light300,
+      ),
+      useMaterial3: true,
+      fontFamily: 'GoogleSans',
+      scaffoldBackgroundColor: _light50,
+      cardTheme: const CardThemeData(
+        elevation: 0,
+        color: Colors.white,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          side: BorderSide(color: _light300, width: 1),
+        ),
+      ),
+      appBarTheme: const AppBarTheme(
+        centerTitle: false,
+        elevation: 0,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: Color(0xFF1A1C1E),
+      ),
+    );
+  }
+
+  static ThemeData get darkTheme {
+    return ThemeData(
+      colorScheme: const ColorScheme.dark(
+        primary: _darkPrimary500,
+        onPrimary: Color(0xFF0F1433),
+        primaryContainer: _darkPrimary300,
+        onPrimaryContainer: _primary100,
+        secondary: Color(0xFFC4C6D0),
+        onSecondary: Color(0xFF2E3042),
+        error: _darkDanger500,
+        onError: Color(0xFF0F1433),
+        surface: _darkLight50,
+        onSurface: Color(0xFFE3E3E6),
+        surfaceContainerHighest: _darkLight200,
+        outline: Color(0xFF8E9099),
+        outlineVariant: Color(0xFF43464F),
+      ),
+      useMaterial3: true,
+      fontFamily: 'GoogleSans',
+      scaffoldBackgroundColor: _darkLight50,
+      cardTheme: const CardThemeData(
+        elevation: 0,
+        color: _darkLight100,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+          side: BorderSide(color: _darkLight200, width: 1),
+        ),
+      ),
+      appBarTheme: const AppBarTheme(
+        centerTitle: false,
+        elevation: 0,
+        backgroundColor: _darkLight50,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: Color(0xFFE3E3E6),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/constants.dart

@@ -0,0 +1,16 @@
+const String appTitle = '@immich/ui';
+
+class LayoutConstants {
+  static const double sidebarWidth = 220.0;
+
+  static const double gridSpacing = 16.0;
+  static const double gridAspectRatio = 2.5;
+
+  static const double borderRadiusSmall = 6.0;
+  static const double borderRadiusMedium = 8.0;
+  static const double borderRadiusLarge = 12.0;
+
+  static const double iconSizeSmall = 16.0;
+  static const double iconSizeMedium = 18.0;
+  static const double iconSizeLarge = 20.0;
+}

mobile/packages/ui/showcase/lib/main.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/app_theme.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/router.dart';
+import 'package:showcase/widgets/example_card.dart';
+
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  await initializeCodeHighlighter();
+  runApp(const ShowcaseApp());
+}
+
+class ShowcaseApp extends StatefulWidget {
+  const ShowcaseApp({super.key});
+
+  @override
+  State<ShowcaseApp> createState() => _ShowcaseAppState();
+}
+
+class _ShowcaseAppState extends State<ShowcaseApp> {
+  ThemeMode _themeMode = ThemeMode.light;
+  late final GoRouter _router;
+
+  @override
+  void initState() {
+    super.initState();
+    _router = AppRouter.createRouter(_toggleTheme);
+  }
+
+  void _toggleTheme() {
+    setState(() {
+      _themeMode = _themeMode == ThemeMode.light
+          ? ThemeMode.dark
+          : ThemeMode.light;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: appTitle,
+      themeMode: _themeMode,
+      routerConfig: _router,
+      theme: AppTheme.lightTheme,
+      darkTheme: AppTheme.darkTheme,
+      debugShowCheckedModeBanner: false,
+      builder: (context, child) => ImmichThemeProvider(
+        colorScheme: Theme.of(context).colorScheme,
+        child: child!,
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/close_button_page.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class CloseButtonPage extends StatelessWidget {
+  const CloseButtonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.closeButton.name,
+      child: ComponentExamples(
+        title: 'ImmichCloseButton',
+        subtitle: 'Pre-configured close button for dialogs and sheets.',
+        examples: [
+          ExampleCard(
+            title: 'Default & Custom',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichCloseButton(onPressed: () {}),
+                ImmichCloseButton(
+                  variant: ImmichVariant.filled,
+                  onPressed: () {},
+                ),
+                ImmichCloseButton(
+                  color: ImmichColor.secondary,
+                  onPressed: () {},
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_bold_text.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextBoldText extends StatelessWidget {
+  const HtmlTextBoldText({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'This is <b>bold text</b> and <strong>strong text</strong>.',
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_links.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextLinks extends StatelessWidget {
+  const HtmlTextLinks({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'Read the <docs-link>documentation</docs-link> or visit <github-link>GitHub</github-link>.',
+      linkHandlers: {
+        'docs-link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Docs link clicked!')));
+        },
+        'github-link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('GitHub link clicked!')));
+        },
+      },
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/examples/html_text_nested_tags.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+
+class HtmlTextNestedTags extends StatelessWidget {
+  const HtmlTextNestedTags({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ImmichHtmlText(
+      'You can <b>combine <link>bold and links</link></b> together.',
+      linkHandlers: {
+        'link': () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('Nested link clicked!')));
+        },
+      },
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/form_page.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class FormPage extends StatefulWidget {
+  const FormPage({super.key});
+
+  @override
+  State<FormPage> createState() => _FormPageState();
+}
+
+class _FormPageState extends State<FormPage> {
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  String _result = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.form.name,
+      child: ComponentExamples(
+        title: 'ImmichForm',
+        subtitle:
+            'Form container with built-in validation and submit handling.',
+        examples: [
+          ExampleCard(
+            title: 'Login Form',
+            preview: Column(
+              children: [
+                ImmichForm(
+                  submitText: 'Login',
+                  submitIcon: Icons.login,
+                  onSubmit: () async {
+                    await Future.delayed(const Duration(seconds: 1));
+                    setState(() {
+                      _result = 'Form submitted!';
+                    });
+                  },
+                  child: Column(
+                    spacing: 10,
+                    children: [
+                      ImmichTextInput(
+                        label: 'Email',
+                        controller: _emailController,
+                        keyboardType: TextInputType.emailAddress,
+                        validator: (value) =>
+                            value?.isEmpty ?? true ? 'Required' : null,
+                      ),
+                      ImmichPasswordInput(
+                        label: 'Password',
+                        controller: _passwordController,
+                        validator: (value) =>
+                            value?.isEmpty ?? true ? 'Required' : null,
+                      ),
+                    ],
+                  ),
+                ),
+                if (_result.isNotEmpty) ...[
+                  const SizedBox(height: 16),
+                  Text(_result, style: const TextStyle(color: Colors.green)),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _emailController.dispose();
+    _passwordController.dispose();
+    super.dispose();
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/html_text_page.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:showcase/pages/components/examples/html_text_bold_text.dart';
+import 'package:showcase/pages/components/examples/html_text_links.dart';
+import 'package:showcase/pages/components/examples/html_text_nested_tags.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class HtmlTextPage extends StatelessWidget {
+  const HtmlTextPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.htmlText.name,
+      child: ComponentExamples(
+        title: 'ImmichHtmlText',
+        subtitle: 'Render text with HTML formatting (bold, links).',
+        examples: [
+          ExampleCard(
+            title: 'Bold Text',
+            preview: const HtmlTextBoldText(),
+            code: 'html_text_bold_text.dart',
+          ),
+          ExampleCard(
+            title: 'Links',
+            preview: const HtmlTextLinks(),
+            code: 'html_text_links.dart',
+          ),
+          ExampleCard(
+            title: 'Nested Tags',
+            preview: const HtmlTextNestedTags(),
+            code: 'html_text_nested_tags.dart',
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/icon_button_page.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class IconButtonPage extends StatelessWidget {
+  const IconButtonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.iconButton.name,
+      child: ComponentExamples(
+        title: 'ImmichIconButton',
+        subtitle: 'Icon-only button with customizable styling.',
+        examples: [
+          ExampleCard(
+            title: 'Variants & Colors',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichIconButton(
+                  icon: Icons.add,
+                  onPressed: () {},
+                  variant: ImmichVariant.filled,
+                ),
+                ImmichIconButton(
+                  icon: Icons.edit,
+                  onPressed: () {},
+                  variant: ImmichVariant.ghost,
+                ),
+                ImmichIconButton(
+                  icon: Icons.delete,
+                  onPressed: () {},
+                  color: ImmichColor.secondary,
+                ),
+                ImmichIconButton(
+                  icon: Icons.settings,
+                  onPressed: () {},
+                  disabled: true,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/password_input_page.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class PasswordInputPage extends StatelessWidget {
+  const PasswordInputPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.passwordInput.name,
+      child: ComponentExamples(
+        title: 'ImmichPasswordInput',
+        subtitle: 'Password field with visibility toggle.',
+        examples: [
+          ExampleCard(
+            title: 'Password Input',
+            preview: ImmichPasswordInput(
+              label: 'Password',
+              hintText: 'Enter your password',
+              validator: (value) {
+                if (value == null || value.isEmpty) {
+                  return 'Password is required';
+                }
+                if (value.length < 8) {
+                  return 'Password must be at least 8 characters';
+                }
+                return null;
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/text_button_page.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class TextButtonPage extends StatefulWidget {
+  const TextButtonPage({super.key});
+
+  @override
+  State<TextButtonPage> createState() => _TextButtonPageState();
+}
+
+class _TextButtonPageState extends State<TextButtonPage> {
+  bool _isLoading = false;
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.textButton.name,
+      child: ComponentExamples(
+        title: 'ImmichTextButton',
+        subtitle:
+            'A versatile button component with multiple variants and color options.',
+        examples: [
+          ExampleCard(
+            title: 'Variants',
+            description:
+                'Filled and ghost variants for different visual hierarchy',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Filled',
+                  variant: ImmichVariant.filled,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Ghost',
+                  variant: ImmichVariant.ghost,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Colors',
+            description: 'Primary and secondary color options',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Primary',
+                  color: ImmichColor.primary,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Secondary',
+                  color: ImmichColor.secondary,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'With Icons',
+            description: 'Add leading icons',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'With Icon',
+                  icon: Icons.add,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Download',
+                  icon: Icons.download,
+                  variant: ImmichVariant.ghost,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Loading State',
+            description: 'Shows loading indicator during async operations',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ImmichTextButton(
+                  onPressed: () async {
+                    setState(() => _isLoading = true);
+                    await Future.delayed(const Duration(seconds: 2));
+                    if (mounted) setState(() => _isLoading = false);
+                  },
+                  labelText: _isLoading ? 'Loading...' : 'Click Me',
+                  loading: _isLoading,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+          ExampleCard(
+            title: 'Disabled State',
+            description: 'Buttons can be disabled',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Disabled',
+                  disabled: true,
+                  expanded: false,
+                ),
+                ImmichTextButton(
+                  onPressed: () {},
+                  labelText: 'Disabled Ghost',
+                  variant: ImmichVariant.ghost,
+                  disabled: true,
+                  expanded: false,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/components/text_input_page.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class TextInputPage extends StatefulWidget {
+  const TextInputPage({super.key});
+
+  @override
+  State<TextInputPage> createState() => _TextInputPageState();
+}
+
+class _TextInputPageState extends State<TextInputPage> {
+  final _controller1 = TextEditingController();
+  final _controller2 = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.textInput.name,
+      child: ComponentExamples(
+        title: 'ImmichTextInput',
+        subtitle: 'Text field with validation support.',
+        examples: [
+          ExampleCard(
+            title: 'Basic Usage',
+            preview: Column(
+              children: [
+                ImmichTextInput(
+                  label: 'Email',
+                  hintText: 'Enter your email',
+                  controller: _controller1,
+                  keyboardType: TextInputType.emailAddress,
+                ),
+                const SizedBox(height: 16),
+                ImmichTextInput(
+                  label: 'Username',
+                  controller: _controller2,
+                  validator: (value) {
+                    if (value == null || value.isEmpty) {
+                      return 'Username is required';
+                    }
+                    if (value.length < 3) {
+                      return 'Username must be at least 3 characters';
+                    }
+                    return null;
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller1.dispose();
+    _controller2.dispose();
+    super.dispose();
+  }
+}

mobile/packages/ui/showcase/lib/pages/design_system/constants_page.dart

@@ -0,0 +1,396 @@
+import 'package:flutter/material.dart';
+import 'package:immich_ui/immich_ui.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/component_examples.dart';
+import 'package:showcase/widgets/example_card.dart';
+import 'package:showcase/widgets/page_title.dart';
+
+class ConstantsPage extends StatefulWidget {
+  const ConstantsPage({super.key});
+
+  @override
+  State<ConstantsPage> createState() => _ConstantsPageState();
+}
+
+class _ConstantsPageState extends State<ConstantsPage> {
+  @override
+  Widget build(BuildContext context) {
+    return PageTitle(
+      title: AppRoute.constants.name,
+      child: ComponentExamples(
+        title: 'Constants',
+        subtitle: 'Consistent spacing, sizing, and styling constants.',
+        expand: true,
+        examples: [
+          const ExampleCard(
+            title: 'Spacing',
+            description: 'ImmichSpacing (4.0 → 48.0)',
+            preview: Column(
+              children: [
+                _SpacingBox(label: 'xs', size: ImmichSpacing.xs),
+                _SpacingBox(label: 'sm', size: ImmichSpacing.sm),
+                _SpacingBox(label: 'md', size: ImmichSpacing.md),
+                _SpacingBox(label: 'lg', size: ImmichSpacing.lg),
+                _SpacingBox(label: 'xl', size: ImmichSpacing.xl),
+                _SpacingBox(label: 'xxl', size: ImmichSpacing.xxl),
+                _SpacingBox(label: 'xxxl', size: ImmichSpacing.xxxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Border Radius',
+            description: 'ImmichRadius (0.0 → 24.0)',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                _RadiusBox(label: 'none', radius: ImmichRadius.none),
+                _RadiusBox(label: 'xs', radius: ImmichRadius.xs),
+                _RadiusBox(label: 'sm', radius: ImmichRadius.sm),
+                _RadiusBox(label: 'md', radius: ImmichRadius.md),
+                _RadiusBox(label: 'lg', radius: ImmichRadius.lg),
+                _RadiusBox(label: 'xl', radius: ImmichRadius.xl),
+                _RadiusBox(label: 'xxl', radius: ImmichRadius.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Icon Sizes',
+            description: 'ImmichIconSize (16.0 → 48.0)',
+            preview: Wrap(
+              spacing: 16,
+              runSpacing: 16,
+              alignment: WrapAlignment.start,
+              children: [
+                _IconSizeBox(label: 'xs', size: ImmichIconSize.xs),
+                _IconSizeBox(label: 'sm', size: ImmichIconSize.sm),
+                _IconSizeBox(label: 'md', size: ImmichIconSize.md),
+                _IconSizeBox(label: 'lg', size: ImmichIconSize.lg),
+                _IconSizeBox(label: 'xl', size: ImmichIconSize.xl),
+                _IconSizeBox(label: 'xxl', size: ImmichIconSize.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Text Sizes',
+            description: 'ImmichTextSize (10.0 → 60.0)',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Caption',
+                  style: TextStyle(fontSize: ImmichTextSize.caption),
+                ),
+                Text('Label', style: TextStyle(fontSize: ImmichTextSize.label)),
+                Text('Body', style: TextStyle(fontSize: ImmichTextSize.body)),
+                Text('H6', style: TextStyle(fontSize: ImmichTextSize.h6)),
+                Text('H5', style: TextStyle(fontSize: ImmichTextSize.h5)),
+                Text('H4', style: TextStyle(fontSize: ImmichTextSize.h4)),
+                Text('H3', style: TextStyle(fontSize: ImmichTextSize.h3)),
+                Text('H2', style: TextStyle(fontSize: ImmichTextSize.h2)),
+                Text('H1', style: TextStyle(fontSize: ImmichTextSize.h1)),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Elevation',
+            description: 'ImmichElevation (0.0 → 16.0)',
+            preview: Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: [
+                _ElevationBox(label: 'none', elevation: ImmichElevation.none),
+                _ElevationBox(label: 'xs', elevation: ImmichElevation.xs),
+                _ElevationBox(label: 'sm', elevation: ImmichElevation.sm),
+                _ElevationBox(label: 'md', elevation: ImmichElevation.md),
+                _ElevationBox(label: 'lg', elevation: ImmichElevation.lg),
+                _ElevationBox(label: 'xl', elevation: ImmichElevation.xl),
+                _ElevationBox(label: 'xxl', elevation: ImmichElevation.xxl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Border Width',
+            description: 'ImmichBorderWidth (0.5 → 4.0)',
+            preview: Column(
+              children: [
+                _BorderBox(
+                  label: 'hairline',
+                  borderWidth: ImmichBorderWidth.hairline,
+                ),
+                _BorderBox(label: 'base', borderWidth: ImmichBorderWidth.base),
+                _BorderBox(label: 'md', borderWidth: ImmichBorderWidth.md),
+                _BorderBox(label: 'lg', borderWidth: ImmichBorderWidth.lg),
+                _BorderBox(label: 'xl', borderWidth: ImmichBorderWidth.xl),
+              ],
+            ),
+          ),
+          const ExampleCard(
+            title: 'Animation Durations',
+            description: 'ImmichDuration (100ms → 700ms)',
+            preview: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              spacing: 8,
+              children: [
+                _AnimatedDurationBox(
+                  label: 'Extra Fast',
+                  duration: ImmichDuration.extraFast,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Fast',
+                  duration: ImmichDuration.fast,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Normal',
+                  duration: ImmichDuration.normal,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Slow',
+                  duration: ImmichDuration.slow,
+                ),
+                _AnimatedDurationBox(
+                  label: 'Extra Slow',
+                  duration: ImmichDuration.extraSlow,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _SpacingBox extends StatelessWidget {
+  final String label;
+  final double size;
+
+  const _SpacingBox({required this.label, required this.size});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 60,
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
+          ),
+          Container(
+            width: size,
+            height: 24,
+            color: Theme.of(context).colorScheme.primary,
+          ),
+          const SizedBox(width: 8),
+          Text('${size.toStringAsFixed(1)}px'),
+        ],
+      ),
+    );
+  }
+}
+
+class _RadiusBox extends StatelessWidget {
+  final String label;
+  final double radius;
+
+  const _RadiusBox({required this.label, required this.radius});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          width: 60,
+          height: 60,
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.primary,
+            borderRadius: BorderRadius.circular(radius),
+          ),
+        ),
+        const SizedBox(height: 4),
+        Text(label, style: const TextStyle(fontSize: 12)),
+      ],
+    );
+  }
+}
+
+class _IconSizeBox extends StatelessWidget {
+  final String label;
+  final double size;
+
+  const _IconSizeBox({required this.label, required this.size});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Icon(Icons.palette_rounded, size: size),
+        const SizedBox(height: 4),
+        Text(label, style: const TextStyle(fontSize: 12)),
+        Text(
+          '${size.toStringAsFixed(0)}px',
+          style: const TextStyle(fontSize: 10, color: Colors.grey),
+        ),
+      ],
+    );
+  }
+}
+
+class _ElevationBox extends StatelessWidget {
+  final String label;
+  final double elevation;
+
+  const _ElevationBox({required this.label, required this.elevation});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Material(
+          elevation: elevation,
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
+          child: Container(
+            width: 60,
+            height: 60,
+            alignment: Alignment.center,
+            child: Text(label, style: const TextStyle(fontSize: 12)),
+          ),
+        ),
+        const SizedBox(height: 4),
+        Text(
+          elevation.toStringAsFixed(1),
+          style: const TextStyle(fontSize: 10),
+        ),
+      ],
+    );
+  }
+}
+
+class _BorderBox extends StatelessWidget {
+  final String label;
+  final double borderWidth;
+
+  const _BorderBox({required this.label, required this.borderWidth});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Row(
+        children: [
+          SizedBox(
+            width: 80,
+            child: Text(
+              label,
+              style: const TextStyle(fontFamily: 'GoogleSansCode'),
+            ),
+          ),
+          Expanded(
+            child: Container(
+              height: 40,
+              decoration: BoxDecoration(
+                border: Border.all(
+                  color: Theme.of(context).colorScheme.primary,
+                  width: borderWidth,
+                ),
+                borderRadius: const BorderRadius.all(Radius.circular(4)),
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+          Text('${borderWidth.toStringAsFixed(1)}px'),
+        ],
+      ),
+    );
+  }
+}
+
+class _AnimatedDurationBox extends StatefulWidget {
+  final String label;
+  final Duration duration;
+
+  const _AnimatedDurationBox({required this.label, required this.duration});
+
+  @override
+  State<_AnimatedDurationBox> createState() => _AnimatedDurationBoxState();
+}
+
+class _AnimatedDurationBoxState extends State<_AnimatedDurationBox> {
+  bool _atEnd = false;
+  bool _isAnimating = false;
+
+  void _playAnimation() async {
+    if (_isAnimating) return;
+    setState(() => _isAnimating = true);
+    setState(() => _atEnd = true);
+    await Future.delayed(widget.duration);
+    if (!mounted) return;
+    setState(() => _atEnd = false);
+    await Future.delayed(widget.duration);
+    if (!mounted) return;
+    setState(() => _isAnimating = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Row(
+      children: [
+        SizedBox(
+          width: 90,
+          child: Text(
+            widget.label,
+            style: const TextStyle(fontFamily: 'GoogleSansCode', fontSize: 12),
+          ),
+        ),
+        Expanded(
+          child: Container(
+            height: 32,
+            decoration: BoxDecoration(
+              color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
+              borderRadius: BorderRadius.circular(6),
+            ),
+            child: AnimatedAlign(
+              duration: widget.duration,
+              curve: Curves.easeInOut,
+              alignment: _atEnd ? Alignment.centerRight : Alignment.centerLeft,
+              child: Container(
+                width: 60,
+                height: 28,
+                margin: const EdgeInsets.symmetric(horizontal: 2),
+                decoration: BoxDecoration(
+                  color: colorScheme.primary,
+                  borderRadius: BorderRadius.circular(4),
+                ),
+                alignment: Alignment.center,
+                child: Text(
+                  '${widget.duration.inMilliseconds}ms',
+                  style: TextStyle(
+                    fontSize: 11,
+                    color: colorScheme.onPrimary,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+        const SizedBox(width: 8),
+        IconButton(
+          onPressed: _isAnimating ? null : _playAnimation,
+          icon: Icon(
+            Icons.play_arrow_rounded,
+            color: _isAnimating ? colorScheme.outline : colorScheme.primary,
+          ),
+          iconSize: 24,
+          padding: EdgeInsets.zero,
+          constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
+        ),
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/pages/home_page.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/routes.dart';
+
+class HomePage extends StatelessWidget {
+  final VoidCallback onThemeToggle;
+
+  const HomePage({super.key, required this.onThemeToggle});
+
+  @override
+  Widget build(BuildContext context) {
+    return Title(
+      title: appTitle,
+      color: Theme.of(context).colorScheme.primary,
+      child: ListView(
+        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
+        children: [
+          Text(
+            appTitle,
+            style: Theme.of(context).textTheme.displaySmall?.copyWith(
+              fontWeight: FontWeight.bold,
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
+          ),
+          const SizedBox(height: 12),
+          Text(
+            'A collection of Flutter components that are shared across all Immich projects',
+            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+              fontWeight: FontWeight.w400,
+              height: 1.5,
+            ),
+          ),
+          const SizedBox(height: 48),
+          ...routesByCategory.entries.map((entry) {
+            if (entry.key == AppRouteCategory.root) {
+              return const SizedBox.shrink();
+            }
+
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  entry.key.displayName,
+                  style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                    fontWeight: FontWeight.w600,
+                    color: Theme.of(context).colorScheme.onSurface,
+                  ),
+                ),
+                const SizedBox(height: 16),
+                GridView.builder(
+                  shrinkWrap: true,
+                  physics: const NeverScrollableScrollPhysics(),
+                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: 3,
+                    crossAxisSpacing: LayoutConstants.gridSpacing,
+                    mainAxisSpacing: LayoutConstants.gridSpacing,
+                    childAspectRatio: LayoutConstants.gridAspectRatio,
+                  ),
+                  itemCount: entry.value.length,
+                  itemBuilder: (context, index) {
+                    return _ComponentCard(route: entry.value[index]);
+                  },
+                ),
+                const SizedBox(height: 48),
+              ],
+            );
+          }),
+        ],
+      ),
+    );
+  }
+}
+
+class _ComponentCard extends StatelessWidget {
+  final AppRoute route;
+
+  const _ComponentCard({required this.route});
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () => context.go(route.path),
+      borderRadius: const BorderRadius.all(Radius.circular(LayoutConstants.borderRadiusLarge)),
+      child: Card(
+        child: Padding(
+          padding: const EdgeInsets.all(20),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(route.icon, size: 32, color: Theme.of(context).colorScheme.primary),
+              const SizedBox(height: 16),
+              Text(
+                route.name,
+                style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w600,
+                  color: Theme.of(context).colorScheme.onSurface,
+                ),
+              ),
+
+              const SizedBox(height: 8),
+              Text(
+                route.description,
+                style: Theme.of(
+                  context,
+                ).textTheme.bodyMedium?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant, height: 1.4),
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/router.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/pages/components/close_button_page.dart';
+import 'package:showcase/pages/components/form_page.dart';
+import 'package:showcase/pages/components/html_text_page.dart';
+import 'package:showcase/pages/components/icon_button_page.dart';
+import 'package:showcase/pages/components/password_input_page.dart';
+import 'package:showcase/pages/components/text_button_page.dart';
+import 'package:showcase/pages/components/text_input_page.dart';
+import 'package:showcase/pages/design_system/constants_page.dart';
+import 'package:showcase/pages/home_page.dart';
+import 'package:showcase/routes.dart';
+import 'package:showcase/widgets/shell_layout.dart';
+
+class AppRouter {
+  static GoRouter createRouter(VoidCallback onThemeToggle) {
+    return GoRouter(
+      initialLocation: AppRoute.home.path,
+      routes: [
+        ShellRoute(
+          builder: (context, state, child) =>
+              ShellLayout(onThemeToggle: onThemeToggle, child: child),
+          routes: AppRoute.values
+              .map(
+                (route) => GoRoute(
+                  path: route.path,
+                  pageBuilder: (context, state) => NoTransitionPage(
+                    key: state.pageKey,
+                    child: switch (route) {
+                      AppRoute.home => HomePage(onThemeToggle: onThemeToggle),
+                      AppRoute.textButton => const TextButtonPage(),
+                      AppRoute.iconButton => const IconButtonPage(),
+                      AppRoute.closeButton => const CloseButtonPage(),
+                      AppRoute.textInput => const TextInputPage(),
+                      AppRoute.passwordInput => const PasswordInputPage(),
+                      AppRoute.form => const FormPage(),
+                      AppRoute.htmlText => const HtmlTextPage(),
+                      AppRoute.constants => const ConstantsPage(),
+                    },
+                  ),
+                ),
+              )
+              .toList(),
+        ),
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/routes.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+
+enum AppRouteCategory {
+  root(''),
+  forms('Forms'),
+  buttons('Buttons'),
+  designSystem('Design System');
+
+  final String displayName;
+  const AppRouteCategory(this.displayName);
+}
+
+enum AppRoute {
+  home(
+    name: 'Home',
+    description: 'Home page',
+    path: '/',
+    category: AppRouteCategory.root,
+    icon: Icons.home_outlined,
+  ),
+  textButton(
+    name: 'Text Button',
+    description: 'Versatile button with filled and ghost variants',
+    path: '/text-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.smart_button_rounded,
+  ),
+  iconButton(
+    name: 'Icon Button',
+    description: 'Icon-only button with customizable styling',
+    path: '/icon-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.radio_button_unchecked_rounded,
+  ),
+  closeButton(
+    name: 'Close Button',
+    description: 'Pre-configured close button for dialogs',
+    path: '/close-button',
+    category: AppRouteCategory.buttons,
+    icon: Icons.close_rounded,
+  ),
+  textInput(
+    name: 'Text Input',
+    description: 'Text field with validation support',
+    path: '/text-input',
+    category: AppRouteCategory.forms,
+    icon: Icons.text_fields_outlined,
+  ),
+  passwordInput(
+    name: 'Password Input',
+    description: 'Password field with visibility toggle',
+    path: '/password-input',
+    category: AppRouteCategory.forms,
+    icon: Icons.password_outlined,
+  ),
+  form(
+    name: 'Form',
+    description: 'Form container with built-in validation',
+    path: '/form',
+    category: AppRouteCategory.forms,
+    icon: Icons.description_outlined,
+  ),
+  htmlText(
+    name: 'Html Text',
+    description: 'Render text with HTML formatting',
+    path: '/html-text',
+    category: AppRouteCategory.forms,
+    icon: Icons.code_rounded,
+  ),
+  constants(
+    name: 'Constants',
+    description: 'Spacing, colors, typography, and more',
+    path: '/constants',
+    category: AppRouteCategory.designSystem,
+    icon: Icons.palette_outlined,
+  );
+
+  final String name;
+  final String description;
+  final String path;
+  final AppRouteCategory category;
+  final IconData icon;
+
+  const AppRoute({
+    required this.name,
+    required this.description,
+    required this.path,
+    required this.category,
+    required this.icon,
+  });
+}
+
+final routesByCategory = AppRoute.values
+    .fold<Map<AppRouteCategory, List<AppRoute>>>({}, (map, route) {
+      map.putIfAbsent(route.category, () => []).add(route);
+      return map;
+    });

mobile/packages/ui/showcase/lib/widgets/component_examples.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+
+class ComponentExamples extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final List<Widget> examples;
+  final bool expand;
+
+  const ComponentExamples({
+    super.key,
+    required this.title,
+    this.subtitle,
+    required this.examples,
+    this.expand = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(10, 24, 24, 24),
+      child: CustomScrollView(
+        slivers: [
+          SliverToBoxAdapter(
+            child: _PageHeader(title: title, subtitle: subtitle),
+          ),
+          const SliverPadding(padding: EdgeInsets.only(top: 24)),
+          if (expand)
+            SliverList.builder(
+              itemCount: examples.length,
+              itemBuilder: (context, index) => examples[index],
+            )
+          else
+            SliverLayoutBuilder(
+              builder: (context, constraints) {
+                return SliverList.builder(
+                  itemCount: examples.length,
+                  itemBuilder: (context, index) => Align(
+                    alignment: Alignment.centerLeft,
+                    child: ConstrainedBox(
+                      constraints: BoxConstraints(
+                        minWidth: constraints.crossAxisExtent * 0.6,
+                        maxWidth: constraints.crossAxisExtent,
+                      ),
+                      child: IntrinsicWidth(child: examples[index]),
+                    ),
+                  ),
+                );
+              },
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _PageHeader extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+
+  const _PageHeader({required this.title, this.subtitle});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          title,
+          style: Theme.of(
+            context,
+          ).textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.bold),
+        ),
+        if (subtitle != null) ...[
+          const SizedBox(height: 8),
+          Text(
+            subtitle!,
+            style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+            ),
+          ),
+        ],
+      ],
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/example_card.dart

@@ -0,0 +1,237 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:showcase/constants.dart';
+import 'package:syntax_highlight/syntax_highlight.dart';
+
+late final Highlighter _codeHighlighter;
+
+Future<void> initializeCodeHighlighter() async {
+  await Highlighter.initialize(['dart']);
+  final darkTheme = await HighlighterTheme.loadFromAssets([
+    'assets/themes/github_dark.json',
+  ], const TextStyle(color: Color(0xFFe1e4e8)));
+
+  _codeHighlighter = Highlighter(language: 'dart', theme: darkTheme);
+}
+
+class ExampleCard extends StatefulWidget {
+  final String title;
+  final String? description;
+  final Widget preview;
+  final String? code;
+
+  const ExampleCard({
+    super.key,
+    required this.title,
+    this.description,
+    required this.preview,
+    this.code,
+  });
+
+  @override
+  State<ExampleCard> createState() => _ExampleCardState();
+}
+
+class _ExampleCardState extends State<ExampleCard> {
+  bool _showPreview = true;
+  String? code;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.code != null) {
+      rootBundle
+          .loadString('lib/pages/components/examples/${widget.code!}')
+          .then((value) {
+            setState(() {
+              code = value;
+            });
+          });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 1,
+      margin: const EdgeInsets.only(bottom: 16),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        widget.title,
+                        style: Theme.of(context).textTheme.titleMedium
+                            ?.copyWith(fontWeight: FontWeight.bold),
+                      ),
+                      const SizedBox(height: 4),
+                      if (widget.description != null)
+                        Text(
+                          widget.description!,
+                          style: Theme.of(context).textTheme.bodyMedium
+                              ?.copyWith(
+                                color: Theme.of(
+                                  context,
+                                ).colorScheme.onSurfaceVariant,
+                              ),
+                        ),
+                    ],
+                  ),
+                ),
+                if (code != null) ...[
+                  const SizedBox(width: 16),
+                  Row(
+                    children: [
+                      _ToggleButton(
+                        icon: Icons.visibility_rounded,
+                        label: 'Preview',
+                        isSelected: _showPreview,
+                        onTap: () => setState(() => _showPreview = true),
+                      ),
+                      const SizedBox(width: 8),
+                      _ToggleButton(
+                        icon: Icons.code_rounded,
+                        label: 'Code',
+                        isSelected: !_showPreview,
+                        onTap: () => setState(() => _showPreview = false),
+                      ),
+                    ],
+                  ),
+                ],
+              ],
+            ),
+          ),
+          const Divider(height: 1),
+          if (_showPreview)
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: SizedBox(width: double.infinity, child: widget.preview),
+            )
+          else
+            Container(
+              width: double.infinity,
+              decoration: const BoxDecoration(
+                color: Color(0xFF24292e),
+                borderRadius: BorderRadius.only(
+                  bottomLeft: Radius.circular(
+                    LayoutConstants.borderRadiusMedium,
+                  ),
+                  bottomRight: Radius.circular(
+                    LayoutConstants.borderRadiusMedium,
+                  ),
+                ),
+              ),
+              child: _CodeCard(code: code!),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ToggleButton extends StatelessWidget {
+  final IconData icon;
+  final String label;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const _ToggleButton({
+    required this.icon,
+    required this.label,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: const BorderRadius.all(Radius.circular(24)),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+        decoration: BoxDecoration(
+          color: isSelected
+              ? Theme.of(context).colorScheme.primary.withValues(alpha: 0.7)
+              : Theme.of(context).colorScheme.primary,
+          borderRadius: const BorderRadius.all(Radius.circular(24)),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              icon,
+              size: 16,
+              color: Theme.of(context).colorScheme.onPrimary,
+            ),
+            const SizedBox(width: 6),
+            Text(
+              label,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                color: Theme.of(context).colorScheme.onPrimary,
+                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _CodeCard extends StatelessWidget {
+  final String code;
+
+  const _CodeCard({required this.code});
+
+  @override
+  Widget build(BuildContext context) {
+    final lines = code.split('\n');
+    final lineNumberColor = Colors.white.withValues(alpha: 0.4);
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Padding(
+        padding: const EdgeInsets.only(left: 12, top: 8, bottom: 8),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: List.generate(
+                lines.length,
+                (index) => SizedBox(
+                  height: 20,
+                  child: Text(
+                    '${index + 1}',
+                    style: TextStyle(
+                      fontFamily: 'GoogleSansCode',
+                      fontSize: 13,
+                      color: lineNumberColor,
+                      height: 1.5,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(width: 16),
+            SelectableText.rich(
+              _codeHighlighter.highlight(code),
+              style: const TextStyle(
+                fontFamily: 'GoogleSansCode',
+                fontSize: 13,
+                height: 1.54,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/page_title.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class PageTitle extends StatelessWidget {
+  final String title;
+  final Widget child;
+
+  const PageTitle({super.key, required this.title, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Title(
+      title: '$title | @immich/ui',
+      color: Theme.of(context).colorScheme.primary,
+      child: child,
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/shell_layout.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/widgets/sidebar_navigation.dart';
+
+class ShellLayout extends StatelessWidget {
+  final Widget child;
+  final VoidCallback onThemeToggle;
+
+  const ShellLayout({
+    super.key,
+    required this.child,
+    required this.onThemeToggle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Image.asset('assets/immich_logo.png', height: 32, width: 32),
+            const SizedBox(width: 8),
+            Image.asset(
+              isDark
+                  ? 'assets/immich-text-dark.png'
+                  : 'assets/immich-text-light.png',
+              height: 24,
+              filterQuality: FilterQuality.none,
+              isAntiAlias: true,
+            ),
+          ],
+        ),
+        actions: [
+          IconButton(
+            icon: Icon(
+              isDark ? Icons.light_mode_outlined : Icons.dark_mode_outlined,
+              size: LayoutConstants.iconSizeLarge,
+            ),
+            onPressed: onThemeToggle,
+            tooltip: 'Toggle theme',
+          ),
+        ],
+        shape: Border(
+          bottom: BorderSide(color: Theme.of(context).dividerColor, width: 1),
+        ),
+      ),
+      body: Row(
+        children: [
+          const SidebarNavigation(),
+          const VerticalDivider(),
+          Expanded(child: child),
+        ],
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/lib/widgets/sidebar_navigation.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:showcase/constants.dart';
+import 'package:showcase/routes.dart';
+
+class SidebarNavigation extends StatelessWidget {
+  const SidebarNavigation({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: LayoutConstants.sidebarWidth,
+      decoration: BoxDecoration(color: Theme.of(context).colorScheme.surface),
+      child: ListView(
+        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+        children: [
+          ...routesByCategory.entries.expand((entry) {
+            final category = entry.key;
+            final routes = entry.value;
+            return [
+              if (category != AppRouteCategory.root) _CategoryHeader(category),
+              ...routes.map((route) => _NavItem(route)),
+              const SizedBox(height: 24),
+            ];
+          }),
+        ],
+      ),
+    );
+  }
+}
+
+class _CategoryHeader extends StatelessWidget {
+  final AppRouteCategory category;
+
+  const _CategoryHeader(this.category);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 12, top: 8, bottom: 8),
+      child: Text(
+        category.displayName,
+        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+          color: Theme.of(context).colorScheme.onSurfaceVariant,
+          fontWeight: FontWeight.w600,
+          letterSpacing: 0.5,
+        ),
+      ),
+    );
+  }
+}
+
+class _NavItem extends StatelessWidget {
+  final AppRoute route;
+
+  const _NavItem(this.route);
+
+  @override
+  Widget build(BuildContext context) {
+    final currentRoute = GoRouterState.of(context).uri.toString();
+    final isSelected = currentRoute == route.path;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: () {
+            context.go(route.path);
+          },
+          borderRadius: BorderRadius.circular(
+            LayoutConstants.borderRadiusMedium,
+          ),
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+            decoration: BoxDecoration(
+              color: isSelected
+                  ? (isDark
+                        ? Colors.white.withValues(alpha: 0.1)
+                        : Theme.of(
+                            context,
+                          ).colorScheme.primaryContainer.withValues(alpha: 0.5))
+                  : Colors.transparent,
+              borderRadius: BorderRadius.circular(
+                LayoutConstants.borderRadiusMedium,
+              ),
+            ),
+            child: Row(
+              children: [
+                Icon(
+                  route.icon,
+                  size: 20,
+                  color: isSelected
+                      ? Theme.of(context).colorScheme.primary
+                      : Theme.of(context).colorScheme.onSurfaceVariant,
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Text(
+                    route.name,
+                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                      color: isSelected
+                          ? Theme.of(context).colorScheme.primary
+                          : Theme.of(context).colorScheme.onSurface,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mobile/packages/ui/showcase/pubspec.lock

@@ -0,0 +1,393 @@
+# Generated by pub
+# See https://dart.dev/tools/pub/glossary#lockfile
+packages:
+  async:
+    dependency: transitive
+    description:
+      name: async
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.13.0"
+  boolean_selector:
+    dependency: transitive
+    description:
+      name: boolean_selector
+      sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  characters:
+    dependency: transitive
+    description:
+      name: characters
+      sha256: f71061c654a3380576a52b451dd5532377954cf9dbd272a78fc8479606670803
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  clock:
+    dependency: transitive
+    description:
+      name: clock
+      sha256: fddb70d9b5277016c77a80201021d40a2247104d9f4aa7bab7157b7e3f05b84b
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.2"
+  collection:
+    dependency: transitive
+    description:
+      name: collection
+      sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.19.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.7"
+  csslib:
+    dependency: transitive
+    description:
+      name: csslib
+      sha256: "09bad715f418841f976c77db72d5398dc1253c21fb9c0c7f0b0b985860b2d58e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.2"
+  device_info_plus:
+    dependency: transitive
+    description:
+      name: device_info_plus
+      sha256: "98f28b42168cc509abc92f88518882fd58061ea372d7999aecc424345c7bff6a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.5.0"
+  device_info_plus_platform_interface:
+    dependency: transitive
+    description:
+      name: device_info_plus_platform_interface
+      sha256: e1ea89119e34903dca74b883d0dd78eb762814f97fb6c76f35e9ff74d261a18f
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.3"
+  fake_async:
+    dependency: transitive
+    description:
+      name: fake_async
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.3"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      sha256: d07d37192dbf97461359c1518788f203b0c9102cfd2c35a716b823741219542c
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.5"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.1"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      sha256: b6dc7065e46c974bc7c5f143080a6764ec7a4be6da1285ececdc37be96de53be
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  flutter:
+    dependency: "direct main"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_lints:
+    dependency: "direct dev"
+    description:
+      name: flutter_lints
+      sha256: "3105dc8492f6183fb076ccf1f351ac3d60564bff92e20bfc4af9cc1651f4e7e1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.0"
+  flutter_test:
+    dependency: "direct dev"
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  go_router:
+    dependency: "direct main"
+    description:
+      name: go_router
+      sha256: eff94d2a6fc79fa8b811dde79c7549808c2346037ee107a1121b4a644c745f2a
+      url: "https://pub.dev"
+    source: hosted
+    version: "17.0.1"
+  html:
+    dependency: transitive
+    description:
+      name: html
+      sha256: "6d1264f2dffa1b1101c25a91dff0dc2daee4c18e87cd8538729773c073dbf602"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.6"
+  immich_ui:
+    dependency: "direct main"
+    description:
+      path: ".."
+      relative: true
+    source: path
+    version: "0.0.0"
+  irondash_engine_context:
+    dependency: transitive
+    description:
+      name: irondash_engine_context
+      sha256: "2bb0bc13dfda9f5aaef8dde06ecc5feb1379f5bb387d59716d799554f3f305d7"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.5"
+  irondash_message_channel:
+    dependency: transitive
+    description:
+      name: irondash_message_channel
+      sha256: b4101669776509c76133b8917ab8cfc704d3ad92a8c450b92934dd8884a2f060
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.0"
+  leak_tracker:
+    dependency: transitive
+    description:
+      name: leak_tracker
+      sha256: "33e2e26bdd85a0112ec15400c8cbffea70d0f9c3407491f672a2fad47915e2de"
+      url: "https://pub.dev"
+    source: hosted
+    version: "11.0.2"
+  leak_tracker_flutter_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_flutter_testing
+      sha256: "1dbc140bb5a23c75ea9c4811222756104fbcd1a27173f0c34ca01e16bea473c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.10"
+  leak_tracker_testing:
+    dependency: transitive
+    description:
+      name: leak_tracker_testing
+      sha256: "8d5a2d49f4a66b49744b23b018848400d23e54caf9463f4eb20df3eb8acb2eb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
+  lints:
+    dependency: transitive
+    description:
+      name: lints
+      sha256: "12f842a479589fea194fe5c5a3095abc7be0c1f2ddfa9a0e76aed1dbd26a87df"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.0"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.0"
+  matcher:
+    dependency: transitive
+    description:
+      name: matcher
+      sha256: dc58c723c3c24bf8d3e2d3ad3f2f9d7bd9cf43ec6feaa64181775e60190153f2
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.12.17"
+  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"
+  path:
+    dependency: transitive
+    description:
+      name: path
+      sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.9.1"
+  pixel_snap:
+    dependency: transitive
+    description:
+      name: pixel_snap
+      sha256: "677410ea37b07cd37ecb6d5e6c0d8d7615a7cf3bd92ba406fd1ac57e937d1fb0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.5"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.8"
+  sky_engine:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  source_span:
+    dependency: transitive
+    description:
+      name: source_span
+      sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.10.1"
+  stack_trace:
+    dependency: transitive
+    description:
+      name: stack_trace
+      sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.12.1"
+  stream_channel:
+    dependency: transitive
+    description:
+      name: stream_channel
+      sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
+  string_scanner:
+    dependency: transitive
+    description:
+      name: string_scanner
+      sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
+  super_clipboard:
+    dependency: transitive
+    description:
+      name: super_clipboard
+      sha256: e73f3bb7e66cc9260efa1dc507f979138e7e106c3521e2dda2d0311f6d728a16
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.1"
+  super_native_extensions:
+    dependency: transitive
+    description:
+      name: super_native_extensions
+      sha256: b9611dcb68f1047d6f3ef11af25e4e68a21b1a705bbcc3eb8cb4e9f5c3148569
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.1"
+  syntax_highlight:
+    dependency: "direct main"
+    description:
+      name: syntax_highlight
+      sha256: "4d3ba40658cadba6ba55d697f29f00b43538ebb6eb4a0ca0e895c568eaced138"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.0"
+  term_glyph:
+    dependency: transitive
+    description:
+      name: term_glyph
+      sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  test_api:
+    dependency: transitive
+    description:
+      name: test_api
+      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.6"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      sha256: a11b666489b1954e01d992f3d601b1804a33937b5a8fe677bd26b8a9f96f96e8
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.2"
+  vector_math:
+    dependency: transitive
+    description:
+      name: vector_math
+      sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  vm_service:
+    dependency: transitive
+    description:
+      name: vm_service
+      sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60"
+      url: "https://pub.dev"
+    source: hosted
+    version: "15.0.2"
+  web:
+    dependency: transitive
+    description:
+      name: web
+      sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
+  win32:
+    dependency: transitive
+    description:
+      name: win32
+      sha256: d7cb55e04cd34096cd3a79b3330245f54cb96a370a1c27adb3c84b917de8b08e
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.15.0"
+  win32_registry:
+    dependency: transitive
+    description:
+      name: win32_registry
+      sha256: "6f1b564492d0147b330dd794fee8f512cec4977957f310f9951b5f9d83618dae"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
+sdks:
+  dart: ">=3.9.2 <4.0.0"
+  flutter: ">=3.35.0"

mobile/packages/ui/showcase/pubspec.yaml

@@ -0,0 +1,47 @@
+name: showcase
+publish_to: 'none'
+
+version: 1.0.0+1
+
+environment:
+  sdk: ^3.9.2
+
+dependencies:
+  flutter:
+    sdk: flutter
+  immich_ui:
+    path: ../
+  go_router: ^17.0.1
+  syntax_highlight: ^0.5.0
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+
+flutter:
+  uses-material-design: true
+  assets:
+    - assets/
+    - assets/themes/
+    - lib/pages/components/examples/
+
+  fonts:
+    - family: GoogleSans
+      fonts:
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Regular.ttf
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Italic.ttf
+          style: italic
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Medium.ttf
+          weight: 500
+        - asset: ../../../fonts/GoogleSans/GoogleSans-SemiBold.ttf
+          weight: 600
+        - asset: ../../../fonts/GoogleSans/GoogleSans-Bold.ttf
+          weight: 700
+    - family: GoogleSansCode
+      fonts:
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-Regular.ttf
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-Medium.ttf
+          weight: 500
+        - asset: ../../../fonts/GoogleSansCode/GoogleSansCode-SemiBold.ttf
+          weight: 600