Pump build number

* Remove unncessesary line

* Pump version for release

.github/workflows/build_push_docker_latest.yml

@@ -91,3 +91,30 @@ jobs:
           push: true
           tags: |
             altran1502/immich-web:latest
+
+  build_and_push_nginx_latest:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and Push Proxy
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./nginx
+          file: ./nginx/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          push: true
+          tags: |
+            altran1502/immich-proxy:latest

.github/workflows/build_push_docker_staging.yml

@@ -93,3 +93,30 @@ jobs:
           push: ${{ github.event_name == 'pull_request' }}
           tags: |
             altran1502/immich-web:staging
+
+  build_and_push_nginx_staging:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and Push Proxy
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./nginx
+          file: ./nginx/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          push: ${{ github.event_name == 'pull_request' }}
+          tags: |
+            altran1502/immich-proxy:staging

.github/workflows/build_push_server_release.yml

@@ -6,7 +6,7 @@ on:
     types: [published]
 
 jobs:
-  build_and_push_server_release:
+  build_and_push_server_monorepo_release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -43,44 +43,40 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: |
             altran1502/immich-server:${{ steps.previoustag.outputs.tag }}
+            altran1502/immich-server:release
 
-  build_and_push_microservice_release:
+  build_and_push_machine_learning_release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: "main"
           fetch-depth: 0
-
       - name: "Get Previous tag"
         id: previoustag
         uses: "WyriHaximus/github-action-get-previous-tag@v1"
         with:
           fallback: latest
-
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2.0.0
-
       - name: Set up Docker Buildx
         id: buildx
         uses: docker/setup-buildx-action@v2.0.0
-
       - name: Login to Docker Hub
         uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push immich-microservices release
+      - name: Build and Push Machine Learning
         uses: docker/build-push-action@v3.0.0
         with:
-          context: ./microservices
-          file: ./microservices/Dockerfile
+          context: ./machine-learning
+          file: ./machine-learning/Dockerfile
           platforms: linux/arm/v7,linux/amd64
-          push: ${{ github.event_name != 'pull_request' }}
+          push: true
           tags: |
-            altran1502/immich-microservices:${{ steps.previoustag.outputs.tag }}
+            altran1502/immich-machine-learning:${{ steps.previoustag.outputs.tag }}
+            altran1502/immich-machine-learning:release
 
   build_and_push_web_release:
     runs-on: ubuntu-latest
@@ -120,3 +116,43 @@ jobs:
           target: prod
           tags: |
             altran1502/immich-web:${{ steps.previoustag.outputs.tag }}
+            altran1502/immich-web:release
+
+  build_and_push_nginx_release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: "main"
+          fetch-depth: 0
+
+      - name: "Get Previous tag"
+        id: previoustag
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        with:
+          fallback: latest
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2.0.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push immich-proxy release
+        uses: docker/build-push-action@v3.0.0
+        with:
+          context: ./nginx
+          file: ./nginx/Dockerfile
+          platforms: linux/arm/v7,linux/amd64,linux/arm64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: |
+            altran1502/immich-proxy:release
+            altran1502/immich-proxy:${{ steps.previoustag.outputs.tag }}

.github/workflows/test.yml

@@ -0,0 +1,17 @@
+name: Test
+on:
+  pull_request:
+  push: { branches: master }
+
+jobs:
+  test-server-e2e:
+    name: Run test suite
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Run Immich Server 2E2 Test
+        run: docker-compose -f ./docker/docker-compose.test.yml --env-file ./docker/.env.test up --abort-on-container-exit --exit-code-from immich_server_test

Makefile

@@ -1,11 +1,11 @@
 dev:
-	docker-compose -f ./docker/docker-compose.dev.yml up --remove-orphans
+	rm -rf ./server/dist && docker-compose -f ./docker/docker-compose.dev.yml up --remove-orphans
 
 dev-update:
-	docker-compose -f ./docker/docker-compose.dev.yml up --build -V --remove-orphans
+	rm -rf ./server/dist && docker-compose -f ./docker/docker-compose.dev.yml up --build -V --remove-orphans
 
 dev-scale:
-	docker-compose -f ./docker/docker-compose.dev.yml up --build -V  --scale immich_server=3 --remove-orphans
+	rm -rf ./server/dist && docker-compose -f ./docker/docker-compose.dev.yml up --build -V  --scale immich-server=3 --remove-orphans
 
 stage:
 	docker-compose -f ./docker/docker-compose.staging.yml up --build -V --remove-orphans
@@ -17,4 +17,4 @@ prod:
 	docker-compose -f ./docker/docker-compose.yml up --build -V --remove-orphans
 
 prod-scale:
-	docker-compose -f ./docker/docker-compose.yml up --build -V --scale immich_server=3 --scale immich_microservices=3 --remove-orphans
+	docker-compose -f ./docker/docker-compose.yml up --build -V --scale immich-server=3 --scale immich-microservices=3 --remove-orphans

README.md

@@ -8,22 +8,24 @@
     <img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndPublishIOSToTestFlight.svg?style=for-the-badge&label=iOS&logo=teamcity&logoColor=000000&labelColor=ececec" alt="iOS Build"/>
   </a>
   <a href="https://actions-badge.atrox.dev/alextran1502/immich/goto?ref=main">
-    <img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Falextran1502%2Fimmich%2Fbadge%3Fref%3Dmain&style=for-the-badge&label=Server Docker&logo=docker&labelColor=ececec" />
+    <img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Falextran1502%2Fimmich%2Fbadge%3Fref%3Dmain&style=for-the-badge&label=Github Action&logo=github&labelColor=ececec&logoColor=000000" />
+  </a>
+  <a href="https://discord.gg/D8JsnBEuKb">
+    <img src="https://img.shields.io/discord/979116623879368755.svg?label=Immich%20Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Immich Discord"/>
   </a>
-  
   <br/>  
   <br/>  
   <br/>  
   <br/>  
 
   <p align="center">
-    <img src="design/immich-logo.svg" width="200" title="Immich Logo">
+    <img src="design/feature-panel.png"  title="Immich Logo">
   </p>
 </p>
 
 # Immich
 
-Self-hosted photo and video backup solution directly from your mobile phone.
+**High performance self-hosted photo and video backup solution.**
 
 ![](https://media.giphy.com/media/y8ZeaAigGmNvlSoKhU/giphy.gif)
 
@@ -31,7 +33,7 @@ Loading ~4000 images/videos
 
 ## Screenshots
 
-### Mobile client
+### Mobile
 <p align="left">
   <img src="design/login-screen.png" width="150" title="Login With Custom URL">
   <img src="design/backup-screen.png" width="150" title="Backup Setting Info">
@@ -42,9 +44,10 @@ Loading ~4000 images/videos
   <img src="design/nsc6.png" width="150" title="EXIF Info">
 </p>
 
-### Web client
-<p align="center">
-  <img src="design/dashboard_photos.jpeg" width="100%" title="Home Dashboard">
+### Web
+<p align="left">
+  <img src="design/web-home.jpeg"  width="49%" title="Home Dashboard">
+  <img src="design/web-detail.jpeg" width="49%" title="Detail">
 </p>
 
 # Note
@@ -53,26 +56,22 @@ Loading ~4000 images/videos
 
 This project is under heavy development, there will be continuous functions, features and api changes.
 
-# Features
+# Features 
+
+|  | Mobile | Web |
+| - | - | - |
+| Upload and view videos and photos | Yes | Yes
+| Auto backup when app is opened | Yes | N/A
+| Selective album(s) for backup | Yes | N/A
+| Download photos and videos to local device | Yes | Yes
+| Multi-user support | Yes | Yes
+| Shared Albums | Yes | No
+| Quick navigation with draggable scrollbar | Yes | Yes
+| Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes | Yes
+| Metadata view (EXIF, map) | Yes | Yes
+| Search by metadata, objects and image tags | Yes | No
+| Administrative functions (user management) | No | Yes
 
-- Upload and view assets (videos/images).
-- Auto Backup.
-- Download asset to local device.
-- Multi-user supported.
-- Quick navigation with drag scroll bar.
-- Support HEIC/HEIF Backup.
-- Extract and display EXIF info.
-- Real-time render from multi-device upload event.
-- Image Tagging/Classification based on ImageNet dataset
-- Object detection based on COCO SSD.
-- Search assets based on tags and exif data (lens, make, model, orientation)
-- [Optional] Reverse geocoding using Mapbox (Generous free-tier of 100,000 search/month)
-- Show asset's location information on map (OpenStreetMap).
-- Show curated places on the search page
-- Show curated objects on the search page
-- Shared album with users on the same server
-- Selective backup - albums can be included and excluded during the backup process.
-- Web interface is available for administrative tasks (creating new users) and viewing assets on the server - additional features are coming.
 
 # System Requirement
 
@@ -95,7 +94,7 @@ You can use docker compose for development and testing out the application, ther
 3. **PostgreSQL** - Main database of the application
 4. **Redis** - For sharing websocket instance between docker instances and background tasks message queue.
 5. **Nginx** - Load balancing and optimized file uploading.
-6. **TensorFlow** - Object Detection and Image Classification.
+6. **TensorFlow** - Object Detection (COCO SSD) and Image Classification (ImageNet).
 
 ## Step 1: Populate .env file
 
@@ -144,8 +143,8 @@ MAPBOX_KEY=
 # This is the URL of your vm/server where you host Immich, so that the web frontend
 # know where can it make the request to.
 # For example: If your server IP address is 10.1.11.50, the environment variable will
-# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283
-VITE_SERVER_ENDPOINT=http://192.168.1.216:2283
+# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283/api
+VITE_SERVER_ENDPOINT=http://192.168.1.216:2283/api
 ```
 
 ## Step 2: Start the server
@@ -156,23 +155,17 @@ To **start**, run
 docker-compose -f ./docker/docker-compose.yml up 
 ```
 
-If you have a few thousand photos/videos, I suggest running docker-compose with *scaling* option for the `immich_server` container to handle high I/O load when using fast scrolling.
-
-```bash
-docker-compose -f ./docker/docker-compose.yml up --scale immich-server=5 
-```
-
 To *update* docker-compose with newest image (if you have started the docker-compose previously)
 
 ```bash
 docker-compose -f ./docker/docker-compose.yml pull && docker-compose -f ./docker/docker-compose.yml up
 ```
 
-The server will be running at `http://your-ip:2283` through `Nginx`
+The server will be running at `http://your-ip:2283/api`
 
 ## Step 3: Register User
 
-Access the web interface at `http://your-ip:2285` to register an admin account.
+Access the web interface at `http://your-ip:2283` to register an admin account.
 
 <p align="left">
   <img src="design/admin-registration-form.png" width="300" title="Admin Registration">
@@ -186,7 +179,11 @@ Additional accounts on the server can be created by the admin account.
 
 ## Step 4: Run mobile app
 
-The app is distributed on several platforms below.
+Login the mobile app with your server address
+
+<p align="left">
+  <img src="design/login-screen.jpeg" width="250" title="Example login screen">
+<p/>
 
 ## F-Droid
 You can get the app on F-droid by clicking the image below.
@@ -228,6 +225,15 @@ make dev # required Makefile installed on the system.
 
 All servers and web container are hot reload for quick feedback loop.
 
+## Note for developers
+### 1 - OpenAPI
+OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). When you add a new or modify an existing endpoint, you must run the generate command below to update the client SDK.
+
+```bash
+npm run api:generate # Run from server directory
+```
+You can find the generated client SDK in the [`web/src/api`](web/src/api) for Typescript SDK and [`mobile/openapi`](mobile/openapi) for Dart SDK.
+
 # Support
 
 If you like the app, find it helpful, and want to support me to offset the cost of publishing to AppStores, you can sponsor the project with [**Github Sponsor**](https://github.com/sponsors/alextran1502), or a one time donation with the Buy Me a coffee link below.
@@ -257,5 +263,5 @@ You need to change the CPU type from `kvm64` to `host` under VMs hardware tab.
 `Hardware > Processors > Edit > Advanced > Type (dropdown menu) > host`
  
 Otherwise you can:
-- edit `docker-compose.yml` file and comment the whole `immich_microservices` service **which will disable machine learning features like object detection and image classification**
+- edit `docker-compose.yml` file and comment the whole `immich-machine-learning` service **which will disable machine learning features like object detection and image classification**
 - switch to a different VM/desktop with different architecture.

docker/.env.example

@@ -7,6 +7,8 @@ DB_USERNAME=postgres
 DB_PASSWORD=postgres
 DB_DATABASE_NAME=immich
 
+# Optional Database settings:
+# DB_PORT=5432
 
 
 
@@ -17,6 +19,12 @@ DB_DATABASE_NAME=immich
 
 REDIS_HOSTNAME=immich_redis
 
+# Optional Redis settings:
+# REDIS_PORT=6379
+# REDIS_DBINDEX=0
+# REDIS_PASSWORD=
+# REDIS_SOCKET=
+
 
 
 
@@ -51,13 +59,23 @@ MAPBOX_KEY=
 
 
 ###################################################################################
-# WEB
+# WEB - Required
 ###################################################################################
 
 # This is the URL of your vm/server where you host Immich, so that the web frontend
 # know where can it make the request to.
 # For example: If your server IP address is 10.1.11.50, the environment variable will
-# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283
+# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283/api
 # !CAUTION! THERE IS NO FORWARD SLASH AT THE END
 
 VITE_SERVER_ENDPOINT=
+
+
+####################################################################################
+# WEB - Optional
+####################################################################################
+
+# Custom message on the login page, should be written in HTML form.
+# For example VITE_LOGIN_PAGE_MESSAGE="This is a demo instance of Immich.<br><br>Email: <i>demo@demo.de</i><br>Password: <i>demo</i>"
+
+VITE_LOGIN_PAGE_MESSAGE=

docker/.env.test

@@ -19,4 +19,4 @@ ENABLE_MAPBOX=false
 
 # WEB
 MAPBOX_KEY=
-VITE_SERVER_ENDPOINT=http://localhost:2283
+VITE_SERVER_ENDPOINT=http://localhost:2283/api

docker/docker-compose.dev.yml

@@ -2,13 +2,11 @@ version: "3.8"
 
 services:
   immich-server:
-    image: immich-server-dev:1.9.0
+    image: immich-server-dev:latest
     build:
       context: ../server
       dockerfile: Dockerfile
     command: npm run start:dev immich
-    expose:
-      - "3000"
     volumes:
       - ../server:/usr/src/app
       - ${UPLOAD_LOCATION}:/usr/src/app/upload
@@ -20,17 +18,13 @@ services:
     depends_on:
       - redis
       - database
-    networks:
-      - immich-network
 
   immich-machine-learning:
-    image: immich-machine-learning-dev:1.9.0
+    image: immich-machine-learning-dev:latest
     build:
       context: ../machine-learning
       dockerfile: Dockerfile
     command: npm run start:dev
-    expose:
-      - "3001"
     volumes:
       - ../machine-learning:/usr/src/app
       - ${UPLOAD_LOCATION}:/usr/src/app/upload
@@ -41,11 +35,9 @@ services:
       - NODE_ENV=development
     depends_on:
       - database
-    networks:
-      - immich-network
 
   immich-microservices:
-    image: immich-microservices:1.9.0
+    image: immich-microservices:latest
     build:
       context: ../server
       dockerfile: Dockerfile
@@ -60,8 +52,7 @@ services:
       - NODE_ENV=development
     depends_on:
       - database
-    networks:
-      - immich-network
+      - immich-server
 
   immich-web:
     image: immich-web-dev:1.9.0
@@ -73,20 +64,16 @@ services:
     env_file:
       - .env
     ports:
-      - 3002:3002
+      - 3000:3000
       - 24678:24678
     volumes:
       - ../web:/usr/src/app
       - /usr/src/app/node_modules
-    networks:
-      - immich-network
     restart: always
 
   redis:
     container_name: immich_redis
     image: redis:6.2
-    networks:
-      - immich-network
 
   database:
     container_name: immich_postgres
@@ -102,25 +89,21 @@ services:
       - pgdata:/var/lib/postgresql/data
     ports:
       - 5432:5432
-    networks:
-      - immich-network
 
-  nginx:
-    container_name: proxy_nginx
-    image: nginx:latest
-    volumes:
-      - ./settings/nginx-conf:/etc/nginx/conf.d
+  immich-proxy:
+    container_name: immich_proxy
+    image: immich-proxy-dev:latest
+    build:
+      context: ../nginx
+      dockerfile: Dockerfile
     ports:
       - 2283:80
       - 2284:443
     logging:
       driver: none
-    networks:
-      - immich-network
     depends_on:
       - immich-server
+    restart: always
 
-networks:
-  immich-network:
 volumes:
   pgdata:

docker/docker-compose.gpu.yml

@@ -1,92 +0,0 @@
-version: "3.8"
-
-services:
-  immich-server:
-    image: immich-server-dev:1.9.0
-    build:
-      context: ../server
-      dockerfile: Dockerfile
-    command: npm run start:dev
-    expose:
-      - "3000"
-    volumes:
-      - ../server:/usr/src/app
-      - ${UPLOAD_LOCATION}:/usr/src/app/upload
-      - /usr/src/app/node_modules
-    env_file:
-      - .env
-    depends_on:
-      - redis
-      - database
-    networks:
-      - immich-network
-
-  immich-microservices:
-    image: immich-microservices-dev:1.9.0
-    build:
-      context: ../microservices
-      dockerfile: Dockerfile
-    command: npm run start:dev
-    deploy:
-      resources:
-        reservations:
-          devices:
-            - driver: nvidia
-              count: 1
-              capabilities: [ gpu ]
-    expose:
-      - "3001"
-    volumes:
-      - ../microservices:/usr/src/app
-      - ${UPLOAD_LOCATION}:/usr/src/app/upload
-      - /usr/src/app/node_modules
-    env_file:
-      - .env
-    depends_on:
-      - database
-      - immich_server
-    networks:
-      - immich-network
-
-  redis:
-    container_name: immich_redis
-    image: redis:6.2
-    networks:
-      - immich-network
-
-  database:
-    container_name: immich_postgres
-    image: postgres:14
-    env_file:
-      - .env
-    environment:
-      POSTGRES_PASSWORD: ${DB_PASSWORD}
-      POSTGRES_USER: ${DB_USERNAME}
-      POSTGRES_DB: ${DB_DATABASE_NAME}
-      PG_DATA: /var/lib/postgresql/data
-    volumes:
-      - pgdata:/var/lib/postgresql/data
-    ports:
-      - 5432:5432
-    networks:
-      - immich-network
-
-  nginx:
-    container_name: proxy_nginx
-    image: nginx:latest
-    volumes:
-      - ./settings/nginx-conf:/etc/nginx/conf.d
-    ports:
-      - 2283:80
-      - 2284:443
-    logging:
-      driver: none
-    networks:
-      - immich-network
-    depends_on:
-      - immich-server
-
-networks:
-  immich-network:
-volumes:
-  pgdata:

docker/docker-compose.staging.yml

@@ -4,8 +4,6 @@ services:
   immich-server:
     image: altran1502/immich-server:staging
     entrypoint: ["/bin/sh", "./start-server.sh"]
-    expose:
-      - "3000"
     volumes:
       - ${UPLOAD_LOCATION}:/usr/src/app/upload
     env_file:
@@ -15,8 +13,6 @@ services:
     depends_on:
       - redis
       - database
-    networks:
-      - immich-network
     restart: always
 
   immich-microservices:
@@ -31,15 +27,11 @@ services:
     depends_on:
       - redis
       - database
-    networks:
-      - immich-network
     restart: always
 
   immich-machine-learning:
     image: altran1502/immich-machine-learning:staging
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
-    expose:
-      - "3001"
     volumes:
       - ${UPLOAD_LOCATION}:/usr/src/app/upload
     env_file:
@@ -48,8 +40,6 @@ services:
       - NODE_ENV=production
     depends_on:
       - database
-    networks:
-      - immich-network
     restart: always
 
   immich-web:
@@ -57,17 +47,11 @@ services:
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
     env_file:
       - .env
-    ports:
-      - 2285:3000
-    networks:
-      - immich-network
     restart: always
 
   redis:
     container_name: immich_redis
     image: redis:6.2
-    networks:
-      - immich-network
     restart: always
 
   database:
@@ -82,29 +66,19 @@ services:
       PG_DATA: /var/lib/postgresql/data
     volumes:
       - pgdata:/var/lib/postgresql/data
-    ports:
-      - 5432:5432
-    networks:
-      - immich-network
     restart: always
 
-  nginx:
-    container_name: proxy_nginx
-    image: nginx:latest
-    volumes:
-      - ./settings/nginx-conf:/etc/nginx/conf.d
+  immich-proxy:
+    container_name: immich_proxy
+    image: altran1502/immich-proxy:staging
     ports:
       - 2283:80
       - 2284:443
     logging:
       driver: none
-    networks:
-      - immich-network
     depends_on:
       - immich-server
     restart: always
 
-networks:
-  immich-network:
 volumes:
   pgdata:

docker/docker-compose.test.yml

@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   immich_server_test:
-    image: immich-server-dev:1.9.0
+    image: immich-server-dev:latest
     build:
       context: ../server
       dockerfile: Dockerfile
@@ -19,15 +19,10 @@ services:
     depends_on:
       - redis
       - database
-    networks:
-      - immich_network_test
-
 
   redis:
     container_name: immich_redis_test
     image: redis:6.2
-    networks:
-      - immich_network_test
 
   database:
     container_name: immich_postgres_test
@@ -43,8 +38,3 @@ services:
       - /var/lib/postgresql/data
     ports:
       - 5432:5432
-    networks:
-      - immich_network_test
-
-networks:
-  immich_network_test:

docker/docker-compose.yml

@@ -2,10 +2,8 @@ version: "3.8"
 
 services:
   immich-server:
-    image: altran1502/immich-server:latest
+    image: altran1502/immich-server:release
     entrypoint: ["/bin/sh", "./start-server.sh"]
-    expose:
-      - "3000"
     volumes:
       - ${UPLOAD_LOCATION}:/usr/src/app/upload
     env_file:
@@ -15,12 +13,10 @@ services:
     depends_on:
       - redis
       - database
-    networks:
-      - immich-network
     restart: always
 
   immich-microservices:
-    image: altran1502/immich-server:latest
+    image: altran1502/immich-server:release
     entrypoint: ["/bin/sh", "./start-microservices.sh"]
     volumes:
       - ${UPLOAD_LOCATION}:/usr/src/app/upload
@@ -31,15 +27,11 @@ services:
     depends_on:
       - redis
       - database
-    networks:
-      - immich-network
     restart: always
 
   immich-machine-learning:
-    image: altran1502/immich-machine-learning:latest
+    image: altran1502/immich-machine-learning:release
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
-    expose:
-      - "3001"
     volumes:
       - ${UPLOAD_LOCATION}:/usr/src/app/upload
     env_file:
@@ -48,26 +40,18 @@ services:
       - NODE_ENV=production
     depends_on:
       - database
-    networks:
-      - immich-network
     restart: always
 
   immich-web:
-    image: altran1502/immich-web:latest
+    image: altran1502/immich-web:release
     entrypoint: ["/bin/sh", "./entrypoint.sh"]
     env_file:
       - .env
-    ports:
-      - 2285:3000
-    networks:
-      - immich-network
     restart: always
 
   redis:
     container_name: immich_redis
     image: redis:6.2
-    networks:
-      - immich-network
     restart: always
 
   database:
@@ -82,29 +66,18 @@ services:
       PG_DATA: /var/lib/postgresql/data
     volumes:
       - pgdata:/var/lib/postgresql/data
-    ports:
-      - 5432:5432
-    networks:
-      - immich-network
     restart: always
 
-  nginx:
-    container_name: proxy_nginx
-    image: nginx:latest
-    volumes:
-      - ./settings/nginx-conf:/etc/nginx/conf.d
+  immich-proxy:
+    container_name: immich_proxy
+    image: altran1502/immich-proxy:release
     ports:
       - 2283:80
-      - 2284:443
     logging:
       driver: none
-    networks:
-      - immich-network
     depends_on:
       - immich-server
     restart: always
 
-networks:
-  immich-network:
 volumes:
   pgdata:

docker/settings/nginx-conf/nginx.conf

@@ -1,46 +0,0 @@
-
-map $http_upgrade $connection_upgrade {
-  default upgrade;
-  '' close;
-}
-
-# events {
-#   worker_connections 1000;
-# }
-
-server {
-
-  gzip on;
-  gzip_min_length 1000;
-  gunzip on;
-
-  client_max_body_size 50000M;
-
-  listen 80;
-  access_log off;
-
-  location / {
-
-    # Compression
-    gzip_static         on;
-    gzip_min_length     1000;
-    gzip_comp_level     2;
-
-    proxy_buffering off;
-    proxy_buffer_size 16k;
-    proxy_busy_buffers_size 24k;
-    proxy_buffers 64 4k;
-    proxy_force_ranges on;
-
-    proxy_http_version 1.1;
-    proxy_set_header Host $host;
-    proxy_set_header X-Real-IP $remote_addr;
-    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    proxy_set_header X-Forwarded-Proto $scheme;
-    proxy_set_header Upgrade $http_upgrade;
-    proxy_set_header Connection "upgrade";
-    proxy_set_header Host $host;
-
-    proxy_pass http://immich-server:3000;
-  }
-}

localizely.yml

@@ -0,0 +1,15 @@
+config_version: 1.0
+project_id: ead34689-ec52-41d9-b675-09bc85a6cbd7
+file_type: json
+upload:
+  files:
+    - file: mobile/assets/i18n/en-US.json
+      locale_code: en
+    - file: mobile/assets/i18n/de-DE.json
+      locale_code: de
+download:
+  files:
+    - file: mobile/assets/i18n/en-US.json
+      locale_code: en
+    - file: mobile/assets/i18n/de-DE.json
+      locale_code: de

machine-learning/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-bullseye-slim 
+FROM node:16-bullseye-slim
 
 ARG DEBIAN_FRONTEND=noninteractive
 
@@ -9,7 +9,7 @@ COPY package.json package-lock.json ./
 RUN apt-get update
 RUN apt-get install gcc g++ make cmake python3 python3-pip ffmpeg -y
 
-RUN npm install
+RUN npm ci
 
 COPY . .
 

machine-learning/src/config/database.config.ts

@@ -3,7 +3,7 @@ import { TypeOrmModuleOptions } from '@nestjs/typeorm';
 export const databaseConfig: TypeOrmModuleOptions = {
   type: 'postgres',
   host: process.env.DB_HOSTNAME || 'immich_postgres',
-  port: 5432,
+  port: parseInt(process.env.DB_PORT || '5432'),
   username: process.env.DB_USERNAME,
   password: process.env.DB_PASSWORD,
   database: process.env.DB_DATABASE_NAME,

machine-learning/src/main.ts

@@ -5,7 +5,7 @@ import { Logger } from '@nestjs/common';
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
-  await app.listen(3001, () => {
+  await app.listen(3003, () => {
     if (process.env.NODE_ENV == 'development') {
       Logger.log(
         'Running Immich Machine Learning in DEVELOPMENT environment',

mobile/.metadata

@@ -1,10 +1,45 @@
 # 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.
+# This file should be version controlled.
 
 version:
-  revision: 77d935af4db863f6abd0b9c31c7e6df2a13de57b
+  revision: cd41fdd495f6944ecd3506c21e94c6567b073278
   channel: stable
 
 project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: android
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: ios
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: linux
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: macos
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: web
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+    - platform: windows
+      create_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+      base_revision: cd41fdd495f6944ecd3506c21e94c6567b073278
+
+  # 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/analysis_options.yaml

@@ -21,9 +21,18 @@ linter:
   # or a specific dart file by using the `// ignore: name_of_lint` and
   # `// ignore_for_file: name_of_lint` syntax on the line or in the file
   # producing the lint.
+
   rules:
     # avoid_print: false  # Uncomment to disable the `avoid_print` rule
-    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+    # prefer_single_quotes: true # Uncomment to enable the `prefer_single_quotes` rule
+    use_build_context_synchronously: false
+    require_trailing_commas: true
+    unrelated_type_equality_checks: true
 
 # Additional information about this file can be found at
 # https://dart.dev/guides/language/analysis-options
+analyzer:
+  exclude:
+    - openapi/
+    - openapi/test/
+    - lib/generated_plugin_registrant.dart

mobile/android/app/build.gradle

@@ -81,5 +81,4 @@ flutter {
 
 dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
-    implementation 'com.android.support:multidex:1.0.3'
 }

mobile/android/app/src/main/java/io/flutter/app/FlutterMultiDexApplication.java

@@ -1,25 +0,0 @@
-// Generated file.
-//
-// If you wish to remove Flutter's multidex support, delete this entire file.
-//
-// Modifications to this file should be done in a copy under a different name
-// as this file may be regenerated.
-
-package io.flutter.app;
-
-import android.app.Application;
-import android.content.Context;
-import androidx.annotation.CallSuper;
-import androidx.multidex.MultiDex;
-
-/**
- * Extension of {@link android.app.Application}, adding multidex support.
- */
-public class FlutterMultiDexApplication extends Application {
-  @Override
-  @CallSuper
-  protected void attachBaseContext(Context base) {
-    super.attachBaseContext(base);
-    MultiDex.install(this);
-  }
-}

mobile/android/build.gradle

@@ -6,7 +6,7 @@ buildscript {
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.0'
+        classpath 'com.android.tools.build:gradle:7.1.2'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

mobile/android/fastlane/metadata/android/en-US/changelogs/18.txt

@@ -0,0 +1,2 @@
+* Fixed crash issue when upload large file on slow network
+* Updated album to conform with server refactoring of SharedAlbum to Album

mobile/android/fastlane/metadata/android/en-US/changelogs/19.txt

@@ -0,0 +1,2 @@
+* Added zoom functionality to the image viewer
+* Fixed issue with the user is logged out after turning off the app

mobile/android/fastlane/metadata/android/en-US/changelogs/20.txt

@@ -0,0 +1 @@
+* Fixed WebSocket endpoint to confirm with the new settings on the server

mobile/android/fastlane/metadata/android/en-US/changelogs/21.txt

@@ -0,0 +1,3 @@
+* Fixed app does not resume back up when reopening a closed app
+* Fixed wrong asset count on the upload page
+* Added mechanism to change the password of new user on the first login (except Admin)

mobile/android/fastlane/metadata/android/en-US/changelogs/22.txt

@@ -0,0 +1,2 @@
+* Fixed admin is forced to change password upon logging in on mobile app
+* Fixed change password form validation

mobile/android/fastlane/metadata/android/en-US/changelogs/23.txt

@@ -0,0 +1 @@
+* Removed thumbnail generation on mobile - the operation now will be on the server to reduce CPU load and battery usage.

mobile/android/fastlane/metadata/android/en-US/changelogs/24.txt

@@ -0,0 +1 @@
+* Hot fix: Restore shared album functionality

mobile/android/fastlane/metadata/android/en-US/changelogs/25.txt

@@ -0,0 +1 @@
+* Add information for uploading asset and error indication with error message for each failed upload.

mobile/android/fastlane/metadata/android/en-US/changelogs/26.txt

@@ -0,0 +1 @@
+* Refactored app to use OpenAPI SDK to improve performance and project structure.

mobile/android/gradle/wrapper/gradle-wrapper.properties

@@ -3,5 +3,5 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
-distributionSha256Sum=0080de8491f0918e4f529a6db6820fa0b9e818ee2386117f4394f95feb1d5583
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip
+distributionSha256Sum=cd5c2958a107ee7f0722004a12d0f8559b4564c34daad7df06cffd4d12a426d0

mobile/assets/i18n/de-DE.json

@@ -0,0 +1,103 @@
+{
+  "album_info_card_backup_album_excluded": "AUSGESCHLOSSEN",
+  "album_info_card_backup_album_included": "EINGESCHLOSSEN",
+  "album_viewer_appbar_share_delete": "Album löschen",
+  "album_viewer_appbar_share_err_delete": "Album konnte nicht gelöscht werden",
+  "album_viewer_appbar_share_err_leave": "Album konnte nicht verlassen werden",
+  "album_viewer_appbar_share_err_remove": "Beim Löschen von Elementen aus dem Album ist ein Problem aufgetreten",
+  "album_viewer_appbar_share_err_title": "Der Titel konnte nicht geändert werden",
+  "album_viewer_appbar_share_leave": "Album verlassen",
+  "album_viewer_appbar_share_remove": "Entferne vom Album",
+  "album_viewer_page_share_add_users": "Nutzer hinzufügen",
+  "backup_album_selection_page_albums_device": "Alben auf dem Gerät ({})",
+  "backup_album_selection_page_albums_tap": "Tippen um einzuschließen, doppelt tippen um zu entfernen",
+  "backup_album_selection_page_assets_scatter": "Elemente können sich über mehrere Alben verteilen. Daher können diese vor der Sicherung eingeschlossen oder ausgeschlossen werden",
+  "backup_album_selection_page_select_albums": "Alben auswählen",
+  "backup_album_selection_page_selection_info": "Auswahl",
+  "backup_album_selection_page_total_assets": "Elemente",
+  "backup_all": "Alle",
+  "backup_controller_page_albums": "Gesicherte Alben",
+  "backup_controller_page_backup": "Sicherung",
+  "backup_controller_page_backup_selected": "Ausgewählt: ",
+  "backup_controller_page_backup_sub": "Gesicherte Fotos und Videos",
+  "backup_controller_page_cancel": "Abbrechen",
+  "backup_controller_page_created": "Erstellt: {}",
+  "backup_controller_page_desc_backup": "Aktiviere die Sicherung um Elemente automatisch auf den Server zu laden.",
+  "backup_controller_page_excluded": "Ausgeschlossen: ",
+  "backup_controller_page_failed": "Fehlgeschlagen ({})",
+  "backup_controller_page_filename": "Dateiname: {} [{}]",
+  "backup_controller_page_id": "ID: {}",
+  "backup_controller_page_info": "Informationen zur Sicherung",
+  "backup_controller_page_none_selected": "Keine ausgewählt",
+  "backup_controller_page_remainder": "Übrig",
+  "backup_controller_page_remainder_sub": "Noch zu sichernde Fotos und Videos",
+  "backup_controller_page_select": "Auswählen",
+  "backup_controller_page_server_storage": "Server Speicher",
+  "backup_controller_page_start_backup": "Sicherung starten",
+  "backup_controller_page_status_off": "Sicherung ist inaktiv",
+  "backup_controller_page_status_on": "Sicherung ist aktiv",
+  "backup_controller_page_storage_format": "{} von {} genutzt",
+  "backup_controller_page_to_backup": "Zu sichernde Alben",
+  "backup_controller_page_total": "Gesamt",
+  "backup_controller_page_total_sub": "Alle Fotos und Videos",
+  "backup_controller_page_turn_off": "Sicherung ausschalten",
+  "backup_controller_page_turn_on": "Sicherung einschalten",
+  "backup_controller_page_uploading_file_info": "Informationen",
+  "backup_err_only_album": "Das einzige Album kann nicht entfernt werden",
+  "backup_info_card_assets": "Elemente",
+  "control_bottom_app_bar_delete": "Löschen",
+  "create_shared_album_page_share": "Teilen",
+  "create_shared_album_page_share_add_assets": "ELEMENTE HINZUFÜGEN",
+  "create_shared_album_page_share_select_photos": "Fotos auswählen",
+  "daily_title_text_date": "E, dd MMM",
+  "daily_title_text_date_year": "E, dd MMM, yyyy",
+  "date_format": "E d. LLL y • hh:mm",
+  "delete_dialog_alert": "Diese Elemente werden unwiderruflich von Immich und dem Gerät entfernt",
+  "delete_dialog_cancel": "Abbrechen",
+  "delete_dialog_ok": "Löschen",
+  "delete_dialog_title": "Für immer löschen",
+  "exif_bottom_sheet_description": "Beschreibung hinzufügen...",
+  "exif_bottom_sheet_details": "DETAILS",
+  "exif_bottom_sheet_location": "STANDORT",
+  "login_form_button_text": "Anmelden",
+  "login_form_email_hint": "deine@email.de",
+  "login_form_endpoint_hint": "http://deine-server-ip:port/api",
+  "login_form_endpoint_url": "Server URL",
+  "login_form_err_http": "Bitte gebe http:// oder https:// an",
+  "login_form_err_invalid_email": "Ungültige E-Mail",
+  "login_form_err_leading_whitespace": "Führendes Leerzichen",
+  "login_form_err_trailing_whitespace": "Folgendes Leerzeichen",
+  "login_form_label_email": "E-Mail",
+  "login_form_label_password": "Passwort",
+  "login_form_password_hint": "password",
+  "login_form_save_login": "Angemeldet bleiben",
+  "monthly_title_text_date_format": "MMMM y",
+  "profile_drawer_client_server_up_to_date": "App und Server sind aktuell",
+  "profile_drawer_sign_out": "Abmelden",
+  "search_bar_hint": "Durchsuche deine Fotos",
+  "search_page_no_places": "Keine Informationen über Orte verfügbar",
+  "search_page_places": "Orte",
+  "search_page_things": "Dinge",
+  "search_result_page_new_search_hint": "Neue Suche",
+  "select_additional_user_for_sharing_page_suggestions": "Vorschläge",
+  "select_user_for_sharing_page_err_album": "Album konnte nicht erstellt werden",
+  "share_add": "Hinzufügen",
+  "share_add_photos": "Fotos hinzufügen",
+  "share_add_title": "Titel hinzufügen",
+  "share_create_album": "Album erstellen",
+  "share_invite": "Zum Album einladen",
+  "sharing_page_album": "Geteilte Alben",
+  "sharing_page_description": "Erstelle ein geteiltes Album um Fotos und Videos mit Personen in deinem Netzwerk zu teilen.",
+  "sharing_page_empty_list": "LEERE LISTE",
+  "sharing_silver_appbar_create_shared_album": "Neues geteiltes Album",
+  "sharing_silver_appbar_share_partner": "Teile mit Partner",
+  "tab_controller_nav_photos": "Fotos",
+  "tab_controller_nav_search": "Suche",
+  "tab_controller_nav_sharing": "Teilen",
+  "version_announcement_overlay_ack": "Ich habe verstanden",
+  "version_announcement_overlay_release_notes": "Änderungsprotokoll",
+  "version_announcement_overlay_text_1": "Hallo mein Freund! Es gibt eine neue Version von",
+  "version_announcement_overlay_text_2": "Bitte nehm dir die Zeit und lese das ",
+  "version_announcement_overlay_text_3": " und achte darauf, dass deine docker-compose und .env Dateien aktuell sind, vor allem wenn du ein System für automatische Updates benutzt (z.B. Watchtower).",
+  "version_announcement_overlay_title": "Neue Server-Version verfügbar \uD83C\uDF89"
+}

mobile/assets/i18n/en-US.json

@@ -0,0 +1,105 @@
+{
+  "album_info_card_backup_album_excluded": "EXCLUDED",
+  "album_info_card_backup_album_included": "INCLUDED",
+  "album_viewer_appbar_share_delete": "Delete album",
+  "album_viewer_appbar_share_err_delete": "Failed to delete album",
+  "album_viewer_appbar_share_err_leave": "Failed to leave album",
+  "album_viewer_appbar_share_err_remove": "There are problems in removing assets from album",
+  "album_viewer_appbar_share_err_title": "Failed to change album title",
+  "album_viewer_appbar_share_leave": "Leave album",
+  "album_viewer_appbar_share_remove": "Remove from album",
+  "album_viewer_page_share_add_users": "Add users",
+  "backup_album_selection_page_albums_device": "Albums on device ({})",
+  "backup_album_selection_page_albums_tap": "Tap to include, double tap to exclude",
+  "backup_album_selection_page_assets_scatter": "Assets can scatter across multiple albums. Thus, albums can be included or excluded during the backup process.",
+  "backup_album_selection_page_select_albums": "Select Albums",
+  "backup_album_selection_page_selection_info": "Selection Info",
+  "backup_album_selection_page_total_assets": "Total unique assets",
+  "backup_all": "All",
+  "backup_controller_page_albums": "Backup Albums",
+  "backup_controller_page_backup": "Backup",
+  "backup_controller_page_backup_selected": "Selected: ",
+  "backup_controller_page_backup_sub": "Backed up photos and videos",
+  "backup_controller_page_cancel": "Cancel",
+  "backup_controller_page_created": "Created on: {}",
+  "backup_controller_page_desc_backup": "Turn on backup to automatically upload new assets to the server.",
+  "backup_controller_page_excluded": "Excluded: ",
+  "backup_controller_page_failed": "Failed ({})",
+  "backup_controller_page_filename": "File name: {} [{}]",
+  "backup_controller_page_id": "ID: {}",
+  "backup_controller_page_info": "Backup Information",
+  "backup_controller_page_none_selected": "None selected",
+  "backup_controller_page_remainder": "Remainder",
+  "backup_controller_page_remainder_sub": "Remaining photos and albums to back up from selection",
+  "backup_controller_page_select": "Select",
+  "backup_controller_page_server_storage": "Server Storage",
+  "backup_controller_page_start_backup": "Start Backup",
+  "backup_controller_page_status_off": "Backup is off",
+  "backup_controller_page_status_on": "Backup is on",
+  "backup_controller_page_storage_format": "{} of {} used",
+  "backup_controller_page_to_backup": "Albums to be backup",
+  "backup_controller_page_total": "Total",
+  "backup_controller_page_total_sub": "All unique photos and videos from selected albums",
+  "backup_controller_page_turn_off": "Turn off Backup",
+  "backup_controller_page_turn_on": "Turn on Backup",
+  "backup_controller_page_uploading_file_info": "Uploading file info",
+  "backup_err_only_album": "Cannot remove the only album",
+  "backup_info_card_assets": "assets",
+  "control_bottom_app_bar_delete": "Delete",
+  "create_shared_album_page_share": "Share",
+  "create_shared_album_page_share_add_assets": "ADD ASSETS",
+  "create_shared_album_page_share_select_photos": "Select Photos",
+  "daily_title_text_date": "E, MMM dd",
+  "daily_title_text_date_year": "E, MMM dd, yyyy",
+  "date_format": "E, LLL d, y • h:mm a",
+  "delete_dialog_alert": "These items will be permanently deleted from Immich and from your device",
+  "delete_dialog_cancel": "Cancel",
+  "delete_dialog_ok": "Delete",
+  "delete_dialog_title": "Delete Permanently",
+  "exif_bottom_sheet_description": "Add Description...",
+  "exif_bottom_sheet_details": "DETAILS",
+  "exif_bottom_sheet_location": "LOCATION",
+  "login_form_button_text": "Login",
+  "login_form_email_hint": "youremail@email.com",
+  "login_form_endpoint_hint": "http://your-server-ip:port/api",
+  "login_form_endpoint_url": "Server Endpoint URL",
+  "login_form_err_http": "Please specify http:// or https://",
+  "login_form_err_invalid_email": "Invalid Email",
+  "login_form_err_leading_whitespace": "Leading whitespace",
+  "login_form_err_trailing_whitespace": "Trailing whitespace",
+  "login_form_label_email": "Email",
+  "login_form_label_password": "Password",
+  "login_form_password_hint": "password",
+  "login_form_save_login": "Stay logged in",
+  "login_form_failed_login": "Error logging you in, check server url, email and password",
+  "monthly_title_text_date_format": "MMMM y",
+  "profile_drawer_client_server_up_to_date": "Client and Server are up-to-date",
+  "profile_drawer_sign_out": "Sign Out",
+  "search_bar_hint": "Search your photos",
+  "search_page_no_places": "No Places Info Available",
+  "search_page_places": "Places",
+  "search_page_things": "Things",
+  "search_result_page_new_search_hint": "New Search",
+  "select_additional_user_for_sharing_page_suggestions": "Suggestions",
+  "select_user_for_sharing_page_err_album": "Failed to create album",
+  "select_user_for_sharing_page_share_suggestions": "Suggestions",
+  "share_add": "Add",
+  "share_add_photos": "Add photos",
+  "share_add_title": "Add a title",
+  "share_create_album": "Create album",
+  "share_invite": "Invite to album",
+  "sharing_page_album": "Shared albums",
+  "sharing_page_description": "Create shared albums to share photos and videos with people in your network.",
+  "sharing_page_empty_list": "EMPTY LIST",
+  "sharing_silver_appbar_create_shared_album": "Create shared album",
+  "sharing_silver_appbar_share_partner": "Share with partner",
+  "tab_controller_nav_photos": "Photos",
+  "tab_controller_nav_search": "Search",
+  "tab_controller_nav_sharing": "Sharing",
+  "version_announcement_overlay_ack": "Acknowledge",
+  "version_announcement_overlay_release_notes": "release notes",
+  "version_announcement_overlay_text_1": "Hi friend, there is a new release of",
+  "version_announcement_overlay_text_2": "please take your time to visit the ",
+  "version_announcement_overlay_text_3": " and ensure your docker-compose and .env setup is up-to-date to prevent any misconfigurations, especially if you use WatchTower or any mechanism that handles updating your server application automatically.",
+  "version_announcement_overlay_title": "New Server Version Available \uD83C\uDF89"
+}

mobile/ios/Podfile.lock

@@ -23,6 +23,8 @@ PODS:
     - Flutter
     - FMDB (>= 2.7.5)
   - Toast (4.0.0)
+  - url_launcher_ios (0.0.1):
+    - Flutter
   - video_player_avfoundation (0.0.1):
     - Flutter
   - wakelock (0.0.1):
@@ -37,6 +39,7 @@ DEPENDENCIES:
   - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
   - photo_manager (from `.symlinks/plugins/photo_manager/ios`)
   - sqflite (from `.symlinks/plugins/sqflite/ios`)
+  - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
   - video_player_avfoundation (from `.symlinks/plugins/video_player_avfoundation/ios`)
   - wakelock (from `.symlinks/plugins/wakelock/ios`)
 
@@ -63,6 +66,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/photo_manager/ios"
   sqflite:
     :path: ".symlinks/plugins/sqflite/ios"
+  url_launcher_ios:
+    :path: ".symlinks/plugins/url_launcher_ios/ios"
   video_player_avfoundation:
     :path: ".symlinks/plugins/video_player_avfoundation/ios"
   wakelock:
@@ -80,6 +85,7 @@ SPEC CHECKSUMS:
   SAMKeychain: 483e1c9f32984d50ca961e26818a534283b4cd5c
   sqflite: 6d358c025f5b867b29ed92fc697fd34924e11904
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
+  url_launcher_ios: 839c58cdb4279282219f5e248c3321761ff3c4de
   video_player_avfoundation: e489aac24ef5cf7af82702979ed16f2a5ef84cff
   wakelock: d0fc7c864128eac40eba1617cb5264d9c940b46f
 

mobile/ios/Runner/Info.plist

@@ -82,5 +82,11 @@
     <array>
       <string>https</string>
     </array>
+
+    <key>CFBundleLocalizations</key>
+    <array>
+      <string>en</string>
+      <string>de</string>
+    </array>
   </dict>
 </plist>

mobile/ios/fastlane/Fastfile

@@ -19,7 +19,7 @@ platform :ios do
   desc "iOS Beta"
   lane :beta do
     increment_version_number(
-      version_number: "1.11.0"
+      version_number: "1.18.0"
     )
     increment_build_number(
       build_number: latest_testflight_build_number + 1,

mobile/lib/constants/hive_box.dart

@@ -2,18 +2,17 @@
 const String userInfoBox = "immichBoxUserInfo"; // Box
 const String accessTokenKey = "immichBoxAccessTokenKey"; // Key 1
 const String deviceIdKey = 'immichBoxDeviceIdKey'; // Key 2
-
-// Server endpoint
-const String serverEndpointKey = 'immichBoxServerEndpoint';
+const String isLoggedInKey = 'immichIsLoggedInKey'; // Key 3
+const String serverEndpointKey = 'immichBoxServerEndpoint'; // Key 4
 
 // Login Info
-const String hiveLoginInfoBox = "immichLoginInfoBox";
-const String savedLoginInfoKey = "immichSavedLoginInfoKey";
+const String hiveLoginInfoBox = "immichLoginInfoBox"; // Box
+const String savedLoginInfoKey = "immichSavedLoginInfoKey"; // Key 1
 
 // Backup Info
-const String hiveBackupInfoBox = "immichBackupAlbumInfoBox";
-const String backupInfoKey = "immichBackupAlbumInfoKey";
+const String hiveBackupInfoBox = "immichBackupAlbumInfoBox"; // Box
+const String backupInfoKey = "immichBackupAlbumInfoKey"; // Key 1
 
 // Github Release Info
-const String hiveGithubReleaseInfoBox = "immichGithubReleaseInfoBox";
-const String githubReleaseInfoKey = "immichGithubReleaseInfoKey";
+const String hiveGithubReleaseInfoBox = "immichGithubReleaseInfoBox"; // Box
+const String githubReleaseInfoKey = "immichGithubReleaseInfoKey"; // Key 1

mobile/lib/main.dart

@@ -1,21 +1,23 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/immich_colors.dart';
 import 'package:immich_mobile/modules/backup/models/hive_backup_albums.model.dart';
+import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/modules/login/models/hive_saved_login_info.model.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
-import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/routing/tab_navigation_observer.dart';
 import 'package:immich_mobile/shared/providers/app_state.provider.dart';
-import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/shared/providers/release_info.provider.dart';
 import 'package:immich_mobile/shared/providers/server_info.provider.dart';
 import 'package:immich_mobile/shared/providers/websocket.provider.dart';
 import 'package:immich_mobile/shared/views/immich_loading_overlay.dart';
 import 'package:immich_mobile/shared/views/version_announcement_overlay.dart';
+
 import 'constants/hive_box.dart';
 
 void main() async {
@@ -35,17 +37,35 @@ void main() async {
     ),
   );
 
-  runApp(const ProviderScope(child: ImmichApp()));
+  await EasyLocalization.ensureInitialized();
+
+  var locales = const [
+    // Default locale
+    Locale('en', 'US'),
+    // Additional locales
+    Locale('de', 'DE')
+  ];
+
+  runApp(
+    EasyLocalization(
+      supportedLocales: locales,
+      path: 'assets/i18n',
+      useFallbackTranslations: true,
+      fallbackLocale: locales.first,
+      child: const ProviderScope(child: ImmichApp()),
+    ),
+  );
 }
 
 class ImmichApp extends ConsumerStatefulWidget {
-  const ImmichApp({Key? key}) : super(key: key);
+  const ImmichApp({super.key});
 
   @override
-  _ImmichAppState createState() => _ImmichAppState();
+  ImmichAppState createState() => ImmichAppState();
 }
 
-class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserver {
+class ImmichAppState extends ConsumerState<ImmichApp>
+    with WidgetsBindingObserver {
   @override
   void didChangeAppLifecycleState(AppLifecycleState state) {
     switch (state) {
@@ -94,6 +114,7 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
   @override
   initState() {
     super.initState();
+
     initApp().then((_) => debugPrint("App Init Completed"));
   }
 
@@ -103,13 +124,15 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
     super.dispose();
   }
 
-  final _immichRouter = AppRouter();
-
   @override
   Widget build(BuildContext context) {
+    var router = ref.watch(appRouterProvider);
     ref.watch(releaseInfoProvider.notifier).checkGithubReleaseInfo();
 
     return MaterialApp(
+      localizationsDelegates: context.localizationDelegates,
+      supportedLocales: context.supportedLocales,
+      locale: context.locale,
       debugShowCheckedModeBanner: false,
       home: Stack(
         children: [
@@ -121,7 +144,9 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
               brightness: Brightness.light,
               primarySwatch: Colors.indigo,
               fontFamily: 'WorkSans',
-              snackBarTheme: const SnackBarThemeData(contentTextStyle: TextStyle(fontFamily: 'WorkSans')),
+              snackBarTheme: const SnackBarThemeData(
+                contentTextStyle: TextStyle(fontFamily: 'WorkSans'),
+              ),
               scaffoldBackgroundColor: immichBackgroundColor,
               appBarTheme: const AppBarTheme(
                 backgroundColor: immichBackgroundColor,
@@ -131,8 +156,10 @@ class _ImmichAppState extends ConsumerState<ImmichApp> with WidgetsBindingObserv
                 systemOverlayStyle: SystemUiOverlayStyle.dark,
               ),
             ),
-            routeInformationParser: _immichRouter.defaultRouteParser(),
-            routerDelegate: _immichRouter.delegate(navigatorObservers: () => [TabNavigationObserver(ref: ref)]),
+            routeInformationParser: router.defaultRouteParser(),
+            routerDelegate: router.delegate(
+              navigatorObservers: () => [TabNavigationObserver(ref: ref)],
+            ),
           ),
           const ImmichLoadingOverlay(),
           const VersionAnnouncementOverlay(),

mobile/lib/modules/asset_viewer/models/image_viewer_page_state.model.dart

@@ -28,22 +28,26 @@ class ImageViewerPageState {
 
   factory ImageViewerPageState.fromMap(Map<String, dynamic> map) {
     return ImageViewerPageState(
-      downloadAssetStatus: DownloadAssetStatus.values[map['downloadAssetStatus'] ?? 0],
+      downloadAssetStatus:
+          DownloadAssetStatus.values[map['downloadAssetStatus'] ?? 0],
     );
   }
 
   String toJson() => json.encode(toMap());
 
-  factory ImageViewerPageState.fromJson(String source) => ImageViewerPageState.fromMap(json.decode(source));
+  factory ImageViewerPageState.fromJson(String source) =>
+      ImageViewerPageState.fromMap(json.decode(source));
 
   @override
-  String toString() => 'ImageViewerPageState(downloadAssetStatus: $downloadAssetStatus)';
+  String toString() =>
+      'ImageViewerPageState(downloadAssetStatus: $downloadAssetStatus)';
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
 
-    return other is ImageViewerPageState && other.downloadAssetStatus == downloadAssetStatus;
+    return other is ImageViewerPageState &&
+        other.downloadAssetStatus == downloadAssetStatus;
   }
 
   @override

mobile/lib/modules/asset_viewer/providers/image_viewer_page_state.provider.dart

@@ -3,15 +3,20 @@ import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_state.model.dart';
 import 'package:immich_mobile/modules/asset_viewer/services/image_viewer.service.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
 import 'package:immich_mobile/shared/ui/immich_toast.dart';
+import 'package:openapi/api.dart';
 
 class ImageViewerStateNotifier extends StateNotifier<ImageViewerPageState> {
-  final ImageViewerService _imageViewerService = ImageViewerService();
+  final ImageViewerService _imageViewerService;
 
-  ImageViewerStateNotifier() : super(ImageViewerPageState(downloadAssetStatus: DownloadAssetStatus.idle));
+  ImageViewerStateNotifier(this._imageViewerService)
+      : super(
+          ImageViewerPageState(
+            downloadAssetStatus: DownloadAssetStatus.idle,
+          ),
+        );
 
-  void downloadAsset(ImmichAsset asset, BuildContext context) async {
+  void downloadAsset(AssetResponseDto asset, BuildContext context) async {
     state = state.copyWith(downloadAssetStatus: DownloadAssetStatus.loading);
 
     bool isSuccess = await _imageViewerService.downloadAssetToDevice(asset);
@@ -40,4 +45,6 @@ class ImageViewerStateNotifier extends StateNotifier<ImageViewerPageState> {
 }
 
 final imageViewerStateProvider =
-    StateNotifierProvider<ImageViewerStateNotifier, ImageViewerPageState>(((ref) => ImageViewerStateNotifier()));
+    StateNotifierProvider<ImageViewerStateNotifier, ImageViewerPageState>(
+  ((ref) => ImageViewerStateNotifier(ref.watch(imageViewerServiceProvider))),
+);

mobile/lib/modules/asset_viewer/services/image_viewer.service.dart

@@ -1,31 +1,35 @@
 import 'dart:io';
 
 import 'package:flutter/foundation.dart';
-import 'package:hive_flutter/hive_flutter.dart';
-import 'package:immich_mobile/constants/hive_box.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
+import 'package:openapi/api.dart';
 import 'package:path/path.dart' as p;
-import 'package:http/http.dart' as http;
 
 import 'package:photo_manager/photo_manager.dart';
 import 'package:path_provider/path_provider.dart';
 
+final imageViewerServiceProvider =
+    Provider((ref) => ImageViewerService(ref.watch(apiServiceProvider)));
+
 class ImageViewerService {
-  Future<bool> downloadAssetToDevice(ImmichAsset asset) async {
+  final ApiService _apiService;
+  ImageViewerService(this._apiService);
+
+  Future<bool> downloadAssetToDevice(AssetResponseDto asset) async {
     try {
       String fileName = p.basename(asset.originalPath);
-      var savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-      Uri filePath =
-          Uri.parse("$savedEndpoint/asset/download?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false");
 
-      var res = await http.get(
-        filePath,
-        headers: {"Authorization": "Bearer ${Hive.box(userInfoBox).get(accessTokenKey)}"},
+      var res = await _apiService.assetApi.downloadFileWithHttpInfo(
+        asset.deviceAssetId,
+        asset.deviceId,
+        isThumb: false,
+        isWeb: false,
       );
 
       final AssetEntity? entity;
 
-      if (asset.type == 'IMAGE') {
+      if (asset.type == AssetTypeEnum.IMAGE) {
         entity = await PhotoManager.editor.saveImage(
           res.bodyBytes,
           title: p.basename(asset.originalPath),
@@ -37,14 +41,10 @@ class ImageViewerService {
         entity = await PhotoManager.editor.saveVideo(tempFile, title: fileName);
       }
 
-      if (entity != null) {
-        return true;
-      }
+      return entity != null;
     } catch (e) {
       debugPrint("Error saving file $e");
       return false;
     }
-
-    return false;
   }
 }

mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart

@@ -1,173 +1,185 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/shared/models/immich_asset_with_exif.model.dart';
-import 'package:intl/intl.dart';
+import 'package:openapi/api.dart';
 import 'package:path/path.dart' as p;
 import 'package:latlong2/latlong.dart';
 
 class ExifBottomSheet extends ConsumerWidget {
-  final ImmichAssetWithExif assetDetail;
+  final AssetResponseDto assetDetail;
 
-  const ExifBottomSheet({Key? key, required this.assetDetail}) : super(key: key);
+  const ExifBottomSheet({Key? key, required this.assetDetail})
+      : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     _buildMap() {
-      return (assetDetail.exifInfo!.latitude != null && assetDetail.exifInfo!.longitude != null)
-          ? Padding(
-              padding: const EdgeInsets.symmetric(vertical: 16.0),
-              child: Container(
-                height: 150,
-                width: MediaQuery.of(context).size.width,
-                decoration: const BoxDecoration(
-                  borderRadius: BorderRadius.all(Radius.circular(15)),
-                ),
-                child: FlutterMap(
-                  options: MapOptions(
-                    center: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
-                    zoom: 16.0,
-                  ),
-                  layers: [
-                    TileLayerOptions(
-                      urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                      subdomains: ['a', 'b', 'c'],
-                      attributionBuilder: (_) {
-                        return const Text(
-                          "© OpenStreetMap",
-                          style: TextStyle(fontSize: 10),
-                        );
-                      },
-                    ),
-                    MarkerLayerOptions(
-                      markers: [
-                        Marker(
-                          anchorPos: AnchorPos.align(AnchorAlign.top),
-                          point: LatLng(assetDetail.exifInfo!.latitude!, assetDetail.exifInfo!.longitude!),
-                          builder: (ctx) => const Image(image: AssetImage('assets/location-pin.png')),
-                        ),
-                      ],
-                    ),
-                  ],
-                ),
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 16.0),
+        child: Container(
+          height: 150,
+          width: MediaQuery.of(context).size.width,
+          decoration: const BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(15)),
+          ),
+          child: FlutterMap(
+            options: MapOptions(
+              center: LatLng(
+                assetDetail.exifInfo?.latitude?.toDouble() ?? 0,
+                assetDetail.exifInfo?.longitude?.toDouble() ?? 0,
               ),
-            )
-          : Container();
+              zoom: 16.0,
+            ),
+            layers: [
+              TileLayerOptions(
+                urlTemplate:
+                    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                subdomains: ['a', 'b', 'c'],
+                attributionBuilder: (_) {
+                  return const Text(
+                    "© OpenStreetMap",
+                    style: TextStyle(fontSize: 10),
+                  );
+                },
+              ),
+              MarkerLayerOptions(
+                markers: [
+                  Marker(
+                    anchorPos: AnchorPos.align(AnchorAlign.top),
+                    point: LatLng(
+                      assetDetail.exifInfo?.latitude?.toDouble() ?? 0,
+                      assetDetail.exifInfo?.longitude?.toDouble() ?? 0,
+                    ),
+                    builder: (ctx) => const Image(
+                      image: AssetImage('assets/location-pin.png'),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      );
     }
 
     _buildLocationText() {
-      return (assetDetail.exifInfo!.city != null && assetDetail.exifInfo!.state != null)
-          ? Text(
-              "${assetDetail.exifInfo!.city}, ${assetDetail.exifInfo!.state}",
-              style: TextStyle(fontSize: 12, color: Colors.grey[200], fontWeight: FontWeight.bold),
-            )
-          : Container();
+      return Text(
+        "${assetDetail.exifInfo!.city}, ${assetDetail.exifInfo!.state}",
+        style: TextStyle(
+          fontSize: 12,
+          color: Colors.grey[200],
+          fontWeight: FontWeight.bold,
+        ),
+      );
     }
 
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8),
       child: ListView(
         children: [
-          assetDetail.exifInfo?.dateTimeOriginal != null
-              ? Text(
-                  DateFormat('E, LLL d, y • h:mm a').format(
-                    DateTime.parse(assetDetail.exifInfo!.dateTimeOriginal!),
-                  ),
-                  style: TextStyle(
-                    color: Colors.grey[400],
-                    fontWeight: FontWeight.bold,
-                    fontSize: 14,
-                  ),
-                )
-              : Container(),
+          if (assetDetail.exifInfo?.dateTimeOriginal != null)
+            Text(
+              DateFormat('date_format'.tr()).format(
+                assetDetail.exifInfo!.dateTimeOriginal!,
+              ),
+              style: TextStyle(
+                color: Colors.grey[400],
+                fontWeight: FontWeight.bold,
+                fontSize: 14,
+              ),
+            ),
           Padding(
             padding: const EdgeInsets.only(top: 16.0),
             child: Text(
-              "Add Description...",
+              "exif_bottom_sheet_description",
               style: TextStyle(
                 color: Colors.grey[500],
                 fontSize: 11,
               ),
-            ),
+            ).tr(),
           ),
 
           // Location
-          assetDetail.exifInfo?.latitude != null
-              ? Padding(
-                  padding: const EdgeInsets.only(top: 32.0),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Divider(
-                        thickness: 1,
-                        color: Colors.grey[600],
-                      ),
-                      Text(
-                        "LOCATION",
-                        style: TextStyle(fontSize: 11, color: Colors.grey[400]),
-                      ),
-                      _buildMap(),
-                      _buildLocationText(),
-                      Text(
-                        "${assetDetail.exifInfo!.latitude!.toStringAsFixed(4)}, ${assetDetail.exifInfo!.longitude!.toStringAsFixed(4)}",
-                        style: TextStyle(fontSize: 12, color: Colors.grey[400]),
-                      )
-                    ],
+          if (assetDetail.exifInfo?.latitude != null)
+            Padding(
+              padding: const EdgeInsets.only(top: 32.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Divider(
+                    thickness: 1,
+                    color: Colors.grey[600],
                   ),
-                )
-              : Container(),
+                  Text(
+                    "exif_bottom_sheet_location",
+                    style: TextStyle(fontSize: 11, color: Colors.grey[400]),
+                  ).tr(),
+                  if (assetDetail.exifInfo?.latitude != null &&
+                      assetDetail.exifInfo?.longitude != null)
+                    _buildMap(),
+                  if (assetDetail.exifInfo?.city != null &&
+                      assetDetail.exifInfo?.state != null)
+                    _buildLocationText(),
+                  Text(
+                    "${assetDetail.exifInfo?.latitude?.toStringAsFixed(4)}, ${assetDetail.exifInfo?.longitude?.toStringAsFixed(4)}",
+                    style: TextStyle(fontSize: 12, color: Colors.grey[400]),
+                  )
+                ],
+              ),
+            ),
           // Detail
-          assetDetail.exifInfo != null
-              ? Padding(
-                  padding: const EdgeInsets.only(top: 32.0),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Divider(
-                        thickness: 1,
-                        color: Colors.grey[600],
-                      ),
-                      Padding(
-                        padding: const EdgeInsets.only(bottom: 8.0),
-                        child: Text(
-                          "DETAILS",
-                          style: TextStyle(fontSize: 11, color: Colors.grey[400]),
-                        ),
-                      ),
-                      ListTile(
-                        contentPadding: const EdgeInsets.all(0),
-                        dense: true,
-                        textColor: Colors.grey[300],
-                        iconColor: Colors.grey[300],
-                        leading: const Icon(Icons.image),
-                        title: Text(
-                          "${assetDetail.exifInfo?.imageName!}${p.extension(assetDetail.originalPath)}",
-                          style: const TextStyle(fontWeight: FontWeight.bold),
-                        ),
-                        subtitle: assetDetail.exifInfo?.exifImageHeight != null
-                            ? Text(
-                                "${assetDetail.exifInfo?.exifImageHeight} x ${assetDetail.exifInfo?.exifImageWidth}  ${assetDetail.exifInfo?.fileSizeInByte!}B ")
-                            : Container(),
-                      ),
-                      assetDetail.exifInfo?.make != null
-                          ? ListTile(
-                              contentPadding: const EdgeInsets.all(0),
-                              dense: true,
-                              textColor: Colors.grey[300],
-                              iconColor: Colors.grey[300],
-                              leading: const Icon(Icons.camera),
-                              title: Text(
-                                "${assetDetail.exifInfo?.make} ${assetDetail.exifInfo?.model}",
-                                style: const TextStyle(fontWeight: FontWeight.bold),
-                              ),
-                              subtitle: Text(
-                                  "ƒ/${assetDetail.exifInfo?.fNumber}   1/${(1 / assetDetail.exifInfo!.exposureTime!).toStringAsFixed(0)}   ${assetDetail.exifInfo?.focalLength}mm   ISO${assetDetail.exifInfo?.iso} "),
-                            )
-                          : Container()
-                    ],
+          if (assetDetail.exifInfo != null)
+            Padding(
+              padding: const EdgeInsets.only(top: 32.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Divider(
+                    thickness: 1,
+                    color: Colors.grey[600],
                   ),
-                )
-              : Container()
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 8.0),
+                    child: Text(
+                      "exif_bottom_sheet_details",
+                      style: TextStyle(fontSize: 11, color: Colors.grey[400]),
+                    ).tr(),
+                  ),
+                  ListTile(
+                    contentPadding: const EdgeInsets.all(0),
+                    dense: true,
+                    textColor: Colors.grey[300],
+                    iconColor: Colors.grey[300],
+                    leading: const Icon(Icons.image),
+                    title: Text(
+                      "${assetDetail.exifInfo?.imageName!}${p.extension(assetDetail.originalPath)}",
+                      style: const TextStyle(fontWeight: FontWeight.bold),
+                    ),
+                    subtitle: assetDetail.exifInfo?.exifImageHeight != null
+                        ? Text(
+                            "${assetDetail.exifInfo?.exifImageHeight} x ${assetDetail.exifInfo?.exifImageWidth}  ${assetDetail.exifInfo?.fileSizeInByte!}B ",
+                          )
+                        : null,
+                  ),
+                  if (assetDetail.exifInfo?.make != null)
+                    ListTile(
+                      contentPadding: const EdgeInsets.all(0),
+                      dense: true,
+                      textColor: Colors.grey[300],
+                      iconColor: Colors.grey[300],
+                      leading: const Icon(Icons.camera),
+                      title: Text(
+                        "${assetDetail.exifInfo?.make} ${assetDetail.exifInfo?.model}",
+                        style: const TextStyle(fontWeight: FontWeight.bold),
+                      ),
+                      subtitle: Text(
+                        "ƒ/${assetDetail.exifInfo?.fNumber}   1/${(1 / (assetDetail.exifInfo?.exposureTime ?? 1)).toStringAsFixed(0)}   ${assetDetail.exifInfo?.focalLength}mm   ISO${assetDetail.exifInfo?.iso} ",
+                      ),
+                    ),
+                ],
+              ),
+            ),
         ],
       ),
     );

mobile/lib/modules/asset_viewer/ui/remote_photo_view.dart

@@ -0,0 +1,125 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:photo_view/photo_view.dart';
+
+enum _RemoteImageStatus { empty, thumbnail, full }
+
+class _RemotePhotoViewState extends State<RemotePhotoView> {
+  late CachedNetworkImageProvider _imageProvider;
+  _RemoteImageStatus _status = _RemoteImageStatus.empty;
+  bool _zoomedIn = false;
+
+  static const int swipeThreshold = 100;
+
+  @override
+  Widget build(BuildContext context) {
+    bool allowMoving = _status == _RemoteImageStatus.full;
+
+    return PhotoView(
+      imageProvider: _imageProvider,
+      minScale: PhotoViewComputedScale.contained,
+      maxScale: allowMoving ? 1.0 : PhotoViewComputedScale.contained,
+      enablePanAlways: true,
+      scaleStateChangedCallback: _scaleStateChanged,
+      onScaleEnd: _onScaleListener,
+    );
+  }
+
+  void _onScaleListener(
+    BuildContext context,
+    ScaleEndDetails details,
+    PhotoViewControllerValue controllerValue,
+  ) {
+    // Disable swipe events when zoomed in
+    if (_zoomedIn) return;
+
+    if (controllerValue.position.dy > swipeThreshold) {
+      widget.onSwipeDown();
+    } else if (controllerValue.position.dy < -swipeThreshold) {
+      widget.onSwipeUp();
+    }
+  }
+
+  void _scaleStateChanged(PhotoViewScaleState state) {
+    _zoomedIn = state == PhotoViewScaleState.zoomedIn;
+  }
+
+  CachedNetworkImageProvider _authorizedImageProvider(String url) {
+    return CachedNetworkImageProvider(
+      url,
+      headers: {"Authorization": widget.authToken},
+      cacheKey: url,
+    );
+  }
+
+  void _performStateTransition(
+    _RemoteImageStatus newStatus,
+    CachedNetworkImageProvider provider,
+  ) {
+    // Transition to same status is forbidden
+    if (_status == newStatus) return;
+    // Transition full -> thumbnail is forbidden
+    if (_status == _RemoteImageStatus.full &&
+        newStatus == _RemoteImageStatus.thumbnail) return;
+
+    if (!mounted) return;
+
+    setState(() {
+      _status = newStatus;
+      _imageProvider = provider;
+    });
+  }
+
+  void _loadImages() {
+    CachedNetworkImageProvider thumbnailProvider =
+        _authorizedImageProvider(widget.thumbnailUrl);
+    _imageProvider = thumbnailProvider;
+
+    thumbnailProvider.resolve(const ImageConfiguration()).addListener(
+      ImageStreamListener((ImageInfo imageInfo, _) {
+        _performStateTransition(
+          _RemoteImageStatus.thumbnail,
+          thumbnailProvider,
+        );
+      }),
+    );
+
+    CachedNetworkImageProvider fullProvider =
+        _authorizedImageProvider(widget.imageUrl);
+    fullProvider.resolve(const ImageConfiguration()).addListener(
+      ImageStreamListener((ImageInfo imageInfo, _) {
+        _performStateTransition(_RemoteImageStatus.full, fullProvider);
+      }),
+    );
+  }
+
+  @override
+  void initState() {
+    _loadImages();
+    super.initState();
+  }
+}
+
+class RemotePhotoView extends StatefulWidget {
+  const RemotePhotoView({
+    Key? key,
+    required this.thumbnailUrl,
+    required this.imageUrl,
+    required this.authToken,
+    required this.onSwipeDown,
+    required this.onSwipeUp,
+  }) : super(key: key);
+
+  final String thumbnailUrl;
+  final String imageUrl;
+  final String authToken;
+
+  final void Function() onSwipeDown;
+  final void Function() onSwipeUp;
+
+  @override
+  State<StatefulWidget> createState() {
+    return _RemotePhotoViewState();
+  }
+}

mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart

@@ -1,14 +1,19 @@
+import 'dart:developer';
+
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:openapi/api.dart';
 
 class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
-  const TopControlAppBar(
-      {Key? key, required this.asset, required this.onMoreInfoPressed, required this.onDownloadPressed})
-      : super(key: key);
+  const TopControlAppBar({
+    Key? key,
+    required this.asset,
+    required this.onMoreInfoPressed,
+    required this.onDownloadPressed,
+  }) : super(key: key);
 
-  final ImmichAsset asset;
+  final AssetResponseDto asset;
   final Function onMoreInfoPressed;
   final Function onDownloadPressed;
 
@@ -42,17 +47,20 @@ class TopControlAppBar extends ConsumerWidget with PreferredSizeWidget {
           iconSize: iconSize,
           splashRadius: iconSize,
           onPressed: () {
-            print("favorite");
+            log("favorite");
           },
-          icon: asset.isFavorite ? const Icon(Icons.favorite_rounded) : const Icon(Icons.favorite_border_rounded),
+          icon: asset.isFavorite
+              ? const Icon(Icons.favorite_rounded)
+              : const Icon(Icons.favorite_border_rounded),
         ),
         IconButton(
-            iconSize: iconSize,
-            splashRadius: iconSize,
-            onPressed: () {
-              onMoreInfoPressed();
-            },
-            icon: const Icon(Icons.more_horiz_rounded))
+          iconSize: iconSize,
+          splashRadius: iconSize,
+          onPressed: () {
+            onMoreInfoPressed();
+          },
+          icon: const Icon(Icons.more_horiz_rounded),
+        )
       ],
     );
   }

mobile/lib/modules/asset_viewer/views/image_viewer_page.dart

@@ -1,8 +1,6 @@
 import 'package:auto_route/auto_route.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:flutter_swipe_detector/flutter_swipe_detector.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
@@ -10,31 +8,37 @@ import 'package:immich_mobile/modules/asset_viewer/models/image_viewer_page_stat
 import 'package:immich_mobile/modules/asset_viewer/providers/image_viewer_page_state.provider.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
+import 'package:immich_mobile/modules/asset_viewer/ui/remote_photo_view.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
-import 'package:immich_mobile/shared/models/immich_asset_with_exif.model.dart';
+import 'package:openapi/api.dart';
 
 // ignore: must_be_immutable
 class ImageViewerPage extends HookConsumerWidget {
   final String imageUrl;
   final String heroTag;
   final String thumbnailUrl;
-  final ImmichAsset asset;
-  final AssetService _assetService = AssetService();
-  ImmichAssetWithExif? assetDetail;
+  final AssetResponseDto asset;
 
-  ImageViewerPage(
-      {Key? key, required this.imageUrl, required this.heroTag, required this.thumbnailUrl, required this.asset})
-      : super(key: key);
+  AssetResponseDto? assetDetail;
+
+  ImageViewerPage({
+    Key? key,
+    required this.imageUrl,
+    required this.heroTag,
+    required this.thumbnailUrl,
+    required this.asset,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final downloadAssetStatus = ref.watch(imageViewerStateProvider).downloadAssetStatus;
+    final downloadAssetStatus =
+        ref.watch(imageViewerStateProvider).downloadAssetStatus;
     var box = Hive.box(userInfoBox);
 
     getAssetExif() async {
-      assetDetail = await _assetService.getAssetById(asset.id);
+      assetDetail =
+          await ref.watch(assetServiceProvider).getAssetById(asset.id);
     }
 
     showInfo() {
@@ -49,10 +53,13 @@ class ImageViewerPage extends HookConsumerWidget {
       );
     }
 
-    useEffect(() {
-      getAssetExif();
-      return null;
-    }, []);
+    useEffect(
+      () {
+        getAssetExif();
+        return null;
+      },
+      [],
+    );
 
     return Scaffold(
       backgroundColor: Colors.black,
@@ -60,75 +67,31 @@ class ImageViewerPage extends HookConsumerWidget {
         asset: asset,
         onMoreInfoPressed: showInfo,
         onDownloadPressed: () {
-          ref.watch(imageViewerStateProvider.notifier).downloadAsset(asset, context);
+          ref
+              .watch(imageViewerStateProvider.notifier)
+              .downloadAsset(asset, context);
         },
       ),
-      body: SwipeDetector(
-        onSwipeDown: (_) {
-          AutoRouter.of(context).pop();
-        },
-        onSwipeUp: (_) {
-          showInfo();
-        },
-        child: SafeArea(
-          child: Stack(
-            children: [
-              Center(
-                child: Hero(
-                  tag: heroTag,
-                  child: CachedNetworkImage(
-                    fit: BoxFit.cover,
-                    imageUrl: imageUrl,
-                    httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-                    fadeInDuration: const Duration(milliseconds: 250),
-                    errorWidget: (context, url, error) => ConstrainedBox(
-                      constraints: const BoxConstraints(maxWidth: 300),
-                      child: Wrap(
-                        spacing: 32,
-                        runSpacing: 32,
-                        alignment: WrapAlignment.center,
-                        children: [
-                          const Text(
-                            "Failed To Render Image - Possibly Corrupted Data",
-                            textAlign: TextAlign.center,
-                            style: TextStyle(fontSize: 16, color: Colors.white),
-                          ),
-                          SingleChildScrollView(
-                            child: Text(
-                              error.toString(),
-                              textAlign: TextAlign.center,
-                              style: TextStyle(fontSize: 12, color: Colors.grey[400]),
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                    placeholder: (context, url) {
-                      return CachedNetworkImage(
-                        cacheKey: thumbnailUrl,
-                        fit: BoxFit.cover,
-                        imageUrl: thumbnailUrl,
-                        httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
-                        placeholderFadeInDuration: const Duration(milliseconds: 0),
-                        progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
-                          scale: 0.2,
-                          child: CircularProgressIndicator(value: downloadProgress.progress),
-                        ),
-                        errorWidget: (context, url, error) => Icon(
-                          Icons.error,
-                          color: Colors.grey[300],
-                        ),
-                      );
-                    },
-                  ),
+      body: SafeArea(
+        child: Stack(
+          children: [
+            Center(
+              child: Hero(
+                tag: heroTag,
+                child: RemotePhotoView(
+                  thumbnailUrl: thumbnailUrl,
+                  imageUrl: imageUrl,
+                  authToken: "Bearer ${box.get(accessTokenKey)}",
+                  onSwipeDown: () => AutoRouter.of(context).pop(),
+                  onSwipeUp: () => showInfo(),
                 ),
               ),
-              if (downloadAssetStatus == DownloadAssetStatus.loading)
-                const Center(
-                  child: DownloadLoadingIndicator(),
-                ),
-            ],
-          ),
+            ),
+            if (downloadAssetStatus == DownloadAssetStatus.loading)
+              const Center(
+                child: DownloadLoadingIndicator(),
+              ),
+          ],
         ),
       ),
     );

mobile/lib/modules/asset_viewer/views/video_viewer_page.dart

@@ -12,22 +12,22 @@ import 'package:immich_mobile/modules/asset_viewer/ui/download_loading_indicator
 import 'package:immich_mobile/modules/asset_viewer/ui/exif_bottom_sheet.dart';
 import 'package:immich_mobile/modules/asset_viewer/ui/top_control_app_bar.dart';
 import 'package:immich_mobile/modules/home/services/asset.service.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
-import 'package:immich_mobile/shared/models/immich_asset_with_exif.model.dart';
+import 'package:openapi/api.dart';
 import 'package:video_player/video_player.dart';
 
 // ignore: must_be_immutable
 class VideoViewerPage extends HookConsumerWidget {
   final String videoUrl;
-  final ImmichAsset asset;
-  ImmichAssetWithExif? assetDetail;
-  final AssetService _assetService = AssetService();
+  final AssetResponseDto asset;
+  AssetResponseDto? assetDetail;
 
-  VideoViewerPage({Key? key, required this.videoUrl, required this.asset}) : super(key: key);
+  VideoViewerPage({Key? key, required this.videoUrl, required this.asset})
+      : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final downloadAssetStatus = ref.watch(imageViewerStateProvider).downloadAssetStatus;
+    final downloadAssetStatus =
+        ref.watch(imageViewerStateProvider).downloadAssetStatus;
 
     String jwtToken = Hive.box(userInfoBox).get(accessTokenKey);
 
@@ -44,13 +44,17 @@ class VideoViewerPage extends HookConsumerWidget {
     }
 
     getAssetExif() async {
-      assetDetail = await _assetService.getAssetById(asset.id);
+      assetDetail =
+          await ref.watch(assetServiceProvider).getAssetById(asset.id);
     }
 
-    useEffect(() {
-      getAssetExif();
-      return null;
-    }, []);
+    useEffect(
+      () {
+        getAssetExif();
+        return null;
+      },
+      [],
+    );
 
     return Scaffold(
       backgroundColor: Colors.black,
@@ -60,7 +64,9 @@ class VideoViewerPage extends HookConsumerWidget {
           showInfo();
         },
         onDownloadPressed: () {
-          ref.watch(imageViewerStateProvider.notifier).downloadAsset(asset, context);
+          ref
+              .watch(imageViewerStateProvider.notifier)
+              .downloadAsset(asset, context);
         },
       ),
       body: SwipeDetector(
@@ -93,7 +99,8 @@ class VideoThumbnailPlayer extends StatefulWidget {
   final String url;
   final String? jwtToken;
 
-  const VideoThumbnailPlayer({Key? key, required this.url, this.jwtToken}) : super(key: key);
+  const VideoThumbnailPlayer({Key? key, required this.url, this.jwtToken})
+      : super(key: key);
 
   @override
   State<VideoThumbnailPlayer> createState() => _VideoThumbnailPlayerState();
@@ -111,8 +118,10 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
 
   Future<void> initializePlayer() async {
     try {
-      videoPlayerController =
-          VideoPlayerController.network(widget.url, httpHeaders: {"Authorization": "Bearer ${widget.jwtToken}"});
+      videoPlayerController = VideoPlayerController.network(
+        widget.url,
+        httpHeaders: {"Authorization": "Bearer ${widget.jwtToken}"},
+      );
 
       await videoPlayerController.initialize();
       _createChewieController();
@@ -142,7 +151,7 @@ class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
 
   @override
   Widget build(BuildContext context) {
-    return chewieController != null && chewieController!.videoPlayerController.value.isInitialized
+    return chewieController?.videoPlayerController.value.isInitialized == true
         ? SizedBox(
             child: Chewie(
               controller: chewieController!,

mobile/lib/modules/backup/models/available_album.model.dart

@@ -21,13 +21,16 @@ class AvailableAlbum {
   }
 
   @override
-  String toString() => 'AvailableAlbum(albumEntity: $albumEntity, thumbnailData: $thumbnailData)';
+  String toString() =>
+      'AvailableAlbum(albumEntity: $albumEntity, thumbnailData: $thumbnailData)';
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
 
-    return other is AvailableAlbum && other.albumEntity == albumEntity && other.thumbnailData == thumbnailData;
+    return other is AvailableAlbum &&
+        other.albumEntity == albumEntity &&
+        other.thumbnailData == thumbnailData;
   }
 
   @override

mobile/lib/modules/backup/models/backup_state.model.dart

@@ -1,19 +1,20 @@
-import 'package:dio/dio.dart';
-import 'package:equatable/equatable.dart';
+import 'package:cancellation_token_http/http.dart';
+import 'package:collection/collection.dart';
+import 'package:openapi/api.dart';
 import 'package:photo_manager/photo_manager.dart';
 
 import 'package:immich_mobile/modules/backup/models/available_album.model.dart';
-import 'package:immich_mobile/shared/models/server_info.model.dart';
+import 'package:immich_mobile/modules/backup/models/current_upload_asset.model.dart';
 
 enum BackUpProgressEnum { idle, inProgress, done }
 
-class BackUpState extends Equatable {
+class BackUpState {
   // enum
   final BackUpProgressEnum backupProgress;
-  final List<String> allAssetOnDatabase;
+  final List<String> allAssetsInDatabase;
   final double progressInPercentage;
-  final CancelToken cancelToken;
-  final ServerInfo serverInfo;
+  final CancellationToken cancelToken;
+  final ServerInfoResponseDto serverInfo;
 
   /// All available albums on the device
   final List<AvailableAlbum> availableAlbums;
@@ -26,9 +27,12 @@ class BackUpState extends Equatable {
   /// All assets from the selected albums that have been backup
   final Set<String> selectedAlbumsBackupAssetsIds;
 
+  // Current Backup Asset
+  final CurrentUploadAsset currentUploadAsset;
+
   const BackUpState({
     required this.backupProgress,
-    required this.allAssetOnDatabase,
+    required this.allAssetsInDatabase,
     required this.progressInPercentage,
     required this.cancelToken,
     required this.serverInfo,
@@ -37,23 +41,25 @@ class BackUpState extends Equatable {
     required this.excludedBackupAlbums,
     required this.allUniqueAssets,
     required this.selectedAlbumsBackupAssetsIds,
+    required this.currentUploadAsset,
   });
 
   BackUpState copyWith({
     BackUpProgressEnum? backupProgress,
-    List<String>? allAssetOnDatabase,
+    List<String>? allAssetsInDatabase,
     double? progressInPercentage,
-    CancelToken? cancelToken,
-    ServerInfo? serverInfo,
+    CancellationToken? cancelToken,
+    ServerInfoResponseDto? serverInfo,
     List<AvailableAlbum>? availableAlbums,
     Set<AssetPathEntity>? selectedBackupAlbums,
     Set<AssetPathEntity>? excludedBackupAlbums,
     Set<AssetEntity>? allUniqueAssets,
     Set<String>? selectedAlbumsBackupAssetsIds,
+    CurrentUploadAsset? currentUploadAsset,
   }) {
     return BackUpState(
       backupProgress: backupProgress ?? this.backupProgress,
-      allAssetOnDatabase: allAssetOnDatabase ?? this.allAssetOnDatabase,
+      allAssetsInDatabase: allAssetsInDatabase ?? this.allAssetsInDatabase,
       progressInPercentage: progressInPercentage ?? this.progressInPercentage,
       cancelToken: cancelToken ?? this.cancelToken,
       serverInfo: serverInfo ?? this.serverInfo,
@@ -61,28 +67,51 @@ class BackUpState extends Equatable {
       selectedBackupAlbums: selectedBackupAlbums ?? this.selectedBackupAlbums,
       excludedBackupAlbums: excludedBackupAlbums ?? this.excludedBackupAlbums,
       allUniqueAssets: allUniqueAssets ?? this.allUniqueAssets,
-      selectedAlbumsBackupAssetsIds: selectedAlbumsBackupAssetsIds ?? this.selectedAlbumsBackupAssetsIds,
+      selectedAlbumsBackupAssetsIds:
+          selectedAlbumsBackupAssetsIds ?? this.selectedAlbumsBackupAssetsIds,
+      currentUploadAsset: currentUploadAsset ?? this.currentUploadAsset,
     );
   }
 
   @override
   String toString() {
-    return 'BackUpState(backupProgress: $backupProgress, allAssetOnDatabase: $allAssetOnDatabase, progressInPercentage: $progressInPercentage, cancelToken: $cancelToken, serverInfo: $serverInfo, availableAlbums: $availableAlbums, selectedBackupAlbums: $selectedBackupAlbums, excludedBackupAlbums: $excludedBackupAlbums, allUniqueAssets: $allUniqueAssets, selectedAlbumsBackupAssetsIds: $selectedAlbumsBackupAssetsIds)';
+    return 'BackUpState(backupProgress: $backupProgress, allAssetsInDatabase: $allAssetsInDatabase, progressInPercentage: $progressInPercentage, cancelToken: $cancelToken, serverInfo: $serverInfo, availableAlbums: $availableAlbums, selectedBackupAlbums: $selectedBackupAlbums, excludedBackupAlbums: $excludedBackupAlbums, allUniqueAssets: $allUniqueAssets, selectedAlbumsBackupAssetsIds: $selectedAlbumsBackupAssetsIds, currentUploadAsset: $currentUploadAsset)';
   }
 
   @override
-  List<Object> get props {
-    return [
-      backupProgress,
-      allAssetOnDatabase,
-      progressInPercentage,
-      cancelToken,
-      serverInfo,
-      availableAlbums,
-      selectedBackupAlbums,
-      excludedBackupAlbums,
-      allUniqueAssets,
-      selectedAlbumsBackupAssetsIds,
-    ];
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    final collectionEquals = const DeepCollectionEquality().equals;
+
+    return other is BackUpState &&
+        other.backupProgress == backupProgress &&
+        collectionEquals(other.allAssetsInDatabase, allAssetsInDatabase) &&
+        other.progressInPercentage == progressInPercentage &&
+        other.cancelToken == cancelToken &&
+        other.serverInfo == serverInfo &&
+        collectionEquals(other.availableAlbums, availableAlbums) &&
+        collectionEquals(other.selectedBackupAlbums, selectedBackupAlbums) &&
+        collectionEquals(other.excludedBackupAlbums, excludedBackupAlbums) &&
+        collectionEquals(other.allUniqueAssets, allUniqueAssets) &&
+        collectionEquals(
+          other.selectedAlbumsBackupAssetsIds,
+          selectedAlbumsBackupAssetsIds,
+        ) &&
+        other.currentUploadAsset == currentUploadAsset;
+  }
+
+  @override
+  int get hashCode {
+    return backupProgress.hashCode ^
+        allAssetsInDatabase.hashCode ^
+        progressInPercentage.hashCode ^
+        cancelToken.hashCode ^
+        serverInfo.hashCode ^
+        availableAlbums.hashCode ^
+        selectedBackupAlbums.hashCode ^
+        excludedBackupAlbums.hashCode ^
+        allUniqueAssets.hashCode ^
+        selectedAlbumsBackupAssetsIds.hashCode ^
+        currentUploadAsset.hashCode;
   }
 }

mobile/lib/modules/backup/models/current_upload_asset.model.dart

@@ -0,0 +1,78 @@
+import 'dart:convert';
+
+class CurrentUploadAsset {
+  final String id;
+  final DateTime createdAt;
+  final String fileName;
+  final String fileType;
+
+  CurrentUploadAsset({
+    required this.id,
+    required this.createdAt,
+    required this.fileName,
+    required this.fileType,
+  });
+
+  CurrentUploadAsset copyWith({
+    String? id,
+    DateTime? createdAt,
+    String? fileName,
+    String? fileType,
+  }) {
+    return CurrentUploadAsset(
+      id: id ?? this.id,
+      createdAt: createdAt ?? this.createdAt,
+      fileName: fileName ?? this.fileName,
+      fileType: fileType ?? this.fileType,
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    final result = <String, dynamic>{};
+
+    result.addAll({'id': id});
+    result.addAll({'createdAt': createdAt.millisecondsSinceEpoch});
+    result.addAll({'fileName': fileName});
+    result.addAll({'fileType': fileType});
+
+    return result;
+  }
+
+  factory CurrentUploadAsset.fromMap(Map<String, dynamic> map) {
+    return CurrentUploadAsset(
+      id: map['id'] ?? '',
+      createdAt: DateTime.fromMillisecondsSinceEpoch(map['createdAt']),
+      fileName: map['fileName'] ?? '',
+      fileType: map['fileType'] ?? '',
+    );
+  }
+
+  String toJson() => json.encode(toMap());
+
+  factory CurrentUploadAsset.fromJson(String source) =>
+      CurrentUploadAsset.fromMap(json.decode(source));
+
+  @override
+  String toString() {
+    return 'CurrentUploadAsset(id: $id, createdAt: $createdAt, fileName: $fileName, fileType: $fileType)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+
+    return other is CurrentUploadAsset &&
+        other.id == id &&
+        other.createdAt == createdAt &&
+        other.fileName == fileName &&
+        other.fileType == fileType;
+  }
+
+  @override
+  int get hashCode {
+    return id.hashCode ^
+        createdAt.hashCode ^
+        fileName.hashCode ^
+        fileType.hashCode;
+  }
+}

mobile/lib/modules/backup/models/error_upload_asset.model.dart

@@ -0,0 +1,53 @@
+import 'package:equatable/equatable.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+class ErrorUploadAsset extends Equatable {
+  final String id;
+  final DateTime createdAt;
+  final String fileName;
+  final String fileType;
+  final AssetEntity asset;
+  final String errorMessage;
+
+  const ErrorUploadAsset({
+    required this.id,
+    required this.createdAt,
+    required this.fileName,
+    required this.fileType,
+    required this.asset,
+    required this.errorMessage,
+  });
+
+  ErrorUploadAsset copyWith({
+    String? id,
+    DateTime? createdAt,
+    String? fileName,
+    String? fileType,
+    AssetEntity? asset,
+    String? errorMessage,
+  }) {
+    return ErrorUploadAsset(
+      id: id ?? this.id,
+      createdAt: createdAt ?? this.createdAt,
+      fileName: fileName ?? this.fileName,
+      fileType: fileType ?? this.fileType,
+      asset: asset ?? this.asset,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  String toString() {
+    return 'ErrorUploadAsset(id: $id, createdAt: $createdAt, fileName: $fileName, fileType: $fileType, asset: $asset, errorMessage: $errorMessage)';
+  }
+
+  @override
+  List<Object> get props {
+    return [
+      id,
+      fileName,
+      fileType,
+      errorMessage,
+    ];
+  }
+}

mobile/lib/modules/backup/models/hive_backup_albums.model.dart

@@ -19,7 +19,8 @@ class HiveBackupAlbums {
   });
 
   @override
-  String toString() => 'HiveBackupAlbums(selectedAlbumIds: $selectedAlbumIds, excludedAlbumsIds: $excludedAlbumsIds)';
+  String toString() =>
+      'HiveBackupAlbums(selectedAlbumIds: $selectedAlbumIds, excludedAlbumsIds: $excludedAlbumsIds)';
 
   HiveBackupAlbums copyWith({
     List<String>? selectedAlbumIds,
@@ -49,7 +50,8 @@ class HiveBackupAlbums {
 
   String toJson() => json.encode(toMap());
 
-  factory HiveBackupAlbums.fromJson(String source) => HiveBackupAlbums.fromMap(json.decode(source));
+  factory HiveBackupAlbums.fromJson(String source) =>
+      HiveBackupAlbums.fromMap(json.decode(source));
 
   @override
   bool operator ==(Object other) {

mobile/lib/modules/backup/providers/backup.provider.dart

@@ -1,31 +1,39 @@
-import 'package:dio/dio.dart';
+import 'package:cancellation_token_http/http.dart';
 import 'package:flutter/foundation.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/backup/models/available_album.model.dart';
+import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
+import 'package:immich_mobile/modules/backup/models/current_upload_asset.model.dart';
+import 'package:immich_mobile/modules/backup/models/error_upload_asset.model.dart';
 import 'package:immich_mobile/modules/backup/models/hive_backup_albums.model.dart';
+import 'package:immich_mobile/modules/backup/providers/error_backup_list.provider.dart';
+import 'package:immich_mobile/modules/backup/services/backup.service.dart';
+import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/shared/services/server_info.service.dart';
-import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
-import 'package:immich_mobile/shared/models/server_info.model.dart';
-import 'package:immich_mobile/modules/backup/services/backup.service.dart';
+import 'package:openapi/api.dart';
 import 'package:photo_manager/photo_manager.dart';
 
 class BackupNotifier extends StateNotifier<BackUpState> {
-  BackupNotifier({this.ref})
-      : super(
+  BackupNotifier(
+    this._backupService,
+    this._serverInfoService,
+    this._authState,
+    this.ref,
+  ) : super(
           BackUpState(
             backupProgress: BackUpProgressEnum.idle,
-            allAssetOnDatabase: const [],
+            allAssetsInDatabase: const [],
             progressInPercentage: 0,
-            cancelToken: CancelToken(),
-            serverInfo: ServerInfo(
+            cancelToken: CancellationToken(),
+            serverInfo: ServerInfoResponseDto(
               diskAvailable: "0",
               diskAvailableRaw: 0,
               diskSize: "0",
               diskSizeRaw: 0,
-              diskUsagePercentage: 0.0,
+              diskUsagePercentage: 0,
               diskUse: "0",
               diskUseRaw: 0,
             ),
@@ -34,12 +42,21 @@ class BackupNotifier extends StateNotifier<BackUpState> {
             excludedBackupAlbums: const {},
             allUniqueAssets: const {},
             selectedAlbumsBackupAssetsIds: const {},
+            currentUploadAsset: CurrentUploadAsset(
+              id: '...',
+              createdAt: DateTime.parse('2020-10-04'),
+              fileName: '...',
+              fileType: '...',
+            ),
           ),
-        );
+        ) {
+    getBackupInfo();
+  }
 
-  Ref? ref;
-  final BackupService _backupService = BackupService();
-  final ServerInfoService _serverInfoService = ServerInfoService();
+  final BackupService _backupService;
+  final ServerInfoService _serverInfoService;
+  final AuthenticationState _authState;
+  final Ref ref;
 
   ///
   /// UI INTERACTION
@@ -54,7 +71,8 @@ class BackupNotifier extends StateNotifier<BackUpState> {
       removeExcludedAlbumForBackup(album);
     }
 
-    state = state.copyWith(selectedBackupAlbums: {...state.selectedBackupAlbums, album});
+    state = state
+        .copyWith(selectedBackupAlbums: {...state.selectedBackupAlbums, album});
     _updateBackupAssetCount();
   }
 
@@ -62,7 +80,8 @@ class BackupNotifier extends StateNotifier<BackUpState> {
     if (state.selectedBackupAlbums.contains(album)) {
       removeAlbumForBackup(album);
     }
-    state = state.copyWith(excludedBackupAlbums: {...state.excludedBackupAlbums, album});
+    state = state
+        .copyWith(excludedBackupAlbums: {...state.excludedBackupAlbums, album});
     _updateBackupAssetCount();
   }
 
@@ -90,19 +109,24 @@ class BackupNotifier extends StateNotifier<BackUpState> {
   /// If this is the first time performing backup - set the default selected album to be
   /// the one that has all assets (Recent on Android, Recents on iOS)
   ///
-  Future<void> getBackupAlbumsInfo() async {
+  Future<void> _getBackupAlbumsInfo() async {
     // Get all albums on the device
     List<AvailableAlbum> availableAlbums = [];
-    List<AssetPathEntity> albums = await PhotoManager.getAssetPathList(hasAll: true, type: RequestType.common);
+    List<AssetPathEntity> albums = await PhotoManager.getAssetPathList(
+      hasAll: true,
+      type: RequestType.common,
+    );
 
     for (AssetPathEntity album in albums) {
       AvailableAlbum availableAlbum = AvailableAlbum(albumEntity: album);
 
-      var assetList = await album.getAssetListRange(start: 0, end: album.assetCount);
+      var assetList =
+          await album.getAssetListRange(start: 0, end: album.assetCount);
 
       if (assetList.isNotEmpty) {
         var thumbnailAsset = assetList.first;
-        var thumbnailData = await thumbnailAsset.thumbnailDataWithSize(const ThumbnailSize(512, 512));
+        var thumbnailData = await thumbnailAsset
+            .thumbnailDataWithSize(const ThumbnailSize(512, 512));
         availableAlbum = availableAlbum.copyWith(thumbnailData: thumbnailData);
       }
 
@@ -113,7 +137,8 @@ class BackupNotifier extends StateNotifier<BackUpState> {
 
     // Put persistent storage info into local state of the app
     // Get local storage on selected backup album
-    Box<HiveBackupAlbums> backupAlbumInfoBox = Hive.box<HiveBackupAlbums>(hiveBackupInfoBox);
+    Box<HiveBackupAlbums> backupAlbumInfoBox =
+        Hive.box<HiveBackupAlbums>(hiveBackupInfoBox);
     HiveBackupAlbums? backupAlbumInfo = backupAlbumInfoBox.get(
       backupInfoKey,
       defaultValue: HiveBackupAlbums(
@@ -132,7 +157,11 @@ class BackupNotifier extends StateNotifier<BackUpState> {
       debugPrint("First time backup setup recent album as default");
 
       // Get album that contains all assets
-      var list = await PhotoManager.getAssetPathList(hasAll: true, onlyAll: true, type: RequestType.common);
+      var list = await PhotoManager.getAssetPathList(
+        hasAll: true,
+        onlyAll: true,
+        type: RequestType.common,
+      );
       AssetPathEntity albumHasAllAssets = list.first;
 
       backupAlbumInfoBox.put(
@@ -150,12 +179,16 @@ class BackupNotifier extends StateNotifier<BackUpState> {
     try {
       for (var selectedAlbumId in backupAlbumInfo!.selectedAlbumIds) {
         var albumAsset = await AssetPathEntity.fromId(selectedAlbumId);
-        state = state.copyWith(selectedBackupAlbums: {...state.selectedBackupAlbums, albumAsset});
+        state = state.copyWith(
+          selectedBackupAlbums: {...state.selectedBackupAlbums, albumAsset},
+        );
       }
 
       for (var excludedAlbumId in backupAlbumInfo.excludedAlbumsIds) {
         var albumAsset = await AssetPathEntity.fromId(excludedAlbumId);
-        state = state.copyWith(excludedBackupAlbums: {...state.excludedBackupAlbums, albumAsset});
+        state = state.copyWith(
+          excludedBackupAlbums: {...state.excludedBackupAlbums, albumAsset},
+        );
       }
     } catch (e) {
       debugPrint("[ERROR] Failed to generate album from id $e");
@@ -167,39 +200,48 @@ class BackupNotifier extends StateNotifier<BackUpState> {
   /// Find the assets that are not overlapping between the two sets
   /// Those assets are unique and are used as the total assets
   ///
-  void _updateBackupAssetCount() async {
+  Future<void> _updateBackupAssetCount() async {
     Set<AssetEntity> assetsFromSelectedAlbums = {};
     Set<AssetEntity> assetsFromExcludedAlbums = {};
 
     for (var album in state.selectedBackupAlbums) {
-      var assets = await album.getAssetListRange(start: 0, end: album.assetCount);
+      var assets =
+          await album.getAssetListRange(start: 0, end: album.assetCount);
       assetsFromSelectedAlbums.addAll(assets);
     }
 
     for (var album in state.excludedBackupAlbums) {
-      var assets = await album.getAssetListRange(start: 0, end: album.assetCount);
+      var assets =
+          await album.getAssetListRange(start: 0, end: album.assetCount);
       assetsFromExcludedAlbums.addAll(assets);
     }
 
-    Set<AssetEntity> allUniqueAssets = assetsFromSelectedAlbums.difference(assetsFromExcludedAlbums);
-    List<String> allAssetOnDatabase = await _backupService.getDeviceBackupAsset();
+    Set<AssetEntity> allUniqueAssets =
+        assetsFromSelectedAlbums.difference(assetsFromExcludedAlbums);
+    var allAssetsInDatabase = await _backupService.getDeviceBackupAsset();
+
+    if (allAssetsInDatabase == null) {
+      return;
+    }
 
     // Find asset that were backup from selected albums
-    Set<String> selectedAlbumsBackupAssets = Set.from(allUniqueAssets.map((e) => e.id));
-    selectedAlbumsBackupAssets.removeWhere((assetId) => !allAssetOnDatabase.contains(assetId));
+    Set<String> selectedAlbumsBackupAssets =
+        Set.from(allUniqueAssets.map((e) => e.id));
+    selectedAlbumsBackupAssets
+        .removeWhere((assetId) => !allAssetsInDatabase.contains(assetId));
 
     if (allUniqueAssets.isEmpty) {
       debugPrint("No Asset On Device");
       state = state.copyWith(
         backupProgress: BackUpProgressEnum.idle,
-        allAssetOnDatabase: allAssetOnDatabase,
+        allAssetsInDatabase: allAssetsInDatabase,
         allUniqueAssets: {},
         selectedAlbumsBackupAssetsIds: selectedAlbumsBackupAssets,
       );
       return;
     } else {
       state = state.copyWith(
-        allAssetOnDatabase: allAssetOnDatabase,
+        allAssetsInDatabase: allAssetsInDatabase,
         allUniqueAssets: allUniqueAssets,
         selectedAlbumsBackupAssetsIds: selectedAlbumsBackupAssets,
       );
@@ -207,6 +249,8 @@ class BackupNotifier extends StateNotifier<BackUpState> {
 
     // Save to persistent storage
     _updatePersistentAlbumsSelection();
+
+    return;
   }
 
   ///
@@ -214,10 +258,13 @@ class BackupNotifier extends StateNotifier<BackUpState> {
   /// which albums are selected or excluded
   /// and then update the UI according to those information
   ///
-  void getBackupInfo() async {
-    await getBackupAlbumsInfo();
-    _updateServerInfo();
-    _updateBackupAssetCount();
+  Future<void> getBackupInfo() async {
+    await Future.wait([
+      _getBackupAlbumsInfo(),
+      _updateServerInfo(),
+    ]);
+
+    await _updateBackupAssetCount();
   }
 
   ///
@@ -225,7 +272,8 @@ class BackupNotifier extends StateNotifier<BackUpState> {
   /// Hive database
   ///
   void _updatePersistentAlbumsSelection() {
-    Box<HiveBackupAlbums> backupAlbumInfoBox = Hive.box<HiveBackupAlbums>(hiveBackupInfoBox);
+    Box<HiveBackupAlbums> backupAlbumInfoBox =
+        Hive.box<HiveBackupAlbums>(hiveBackupInfoBox);
     backupAlbumInfoBox.put(
       backupInfoKey,
       HiveBackupAlbums(
@@ -239,11 +287,10 @@ class BackupNotifier extends StateNotifier<BackUpState> {
   /// Invoke backup process
   ///
   void startBackupProcess() async {
-    _updateServerInfo();
-    _updateBackupAssetCount();
-
     state = state.copyWith(backupProgress: BackUpProgressEnum.inProgress);
 
+    await getBackupInfo();
+
     var authResult = await PhotoManager.requestPermissionExtend();
     if (authResult.isAuth) {
       await PhotoManager.clearFileCache();
@@ -254,10 +301,10 @@ class BackupNotifier extends StateNotifier<BackUpState> {
         return;
       }
 
-      Set<AssetEntity> assetsWillBeBackup = state.allUniqueAssets;
+      Set<AssetEntity> assetsWillBeBackup = Set.from(state.allUniqueAssets);
 
       // Remove item that has already been backed up
-      for (var assetId in state.allAssetOnDatabase) {
+      for (var assetId in state.allAssetsInDatabase) {
         assetsWillBeBackup.removeWhere((e) => e.id == assetId);
       }
 
@@ -266,82 +313,108 @@ class BackupNotifier extends StateNotifier<BackUpState> {
       }
 
       // Perform Backup
-      state = state.copyWith(cancelToken: CancelToken());
-      _backupService.backupAsset(assetsWillBeBackup, state.cancelToken, _onAssetUploaded, _onUploadProgress);
+      state = state.copyWith(cancelToken: CancellationToken());
+      _backupService.backupAsset(
+        assetsWillBeBackup,
+        state.cancelToken,
+        _onAssetUploaded,
+        _onUploadProgress,
+        _onSetCurrentBackupAsset,
+        _onBackupError,
+      );
     } else {
       PhotoManager.openSetting();
     }
   }
 
+  void _onBackupError(ErrorUploadAsset errorAssetInfo) {
+    ref.watch(errorBackupListProvider.notifier).add(errorAssetInfo);
+  }
+
+  void _onSetCurrentBackupAsset(CurrentUploadAsset currentUploadAsset) {
+    state = state.copyWith(currentUploadAsset: currentUploadAsset);
+  }
+
   void cancelBackup() {
-    state.cancelToken.cancel('Cancel Backup');
-    state = state.copyWith(backupProgress: BackUpProgressEnum.idle, progressInPercentage: 0.0);
+    state.cancelToken.cancel();
+    state = state.copyWith(
+      backupProgress: BackUpProgressEnum.idle,
+      progressInPercentage: 0.0,
+    );
   }
 
   void _onAssetUploaded(String deviceAssetId, String deviceId) {
     state = state.copyWith(
-        selectedAlbumsBackupAssetsIds: {...state.selectedAlbumsBackupAssetsIds, deviceAssetId},
-        allAssetOnDatabase: [...state.allAssetOnDatabase, deviceAssetId]);
+      selectedAlbumsBackupAssetsIds: {
+        ...state.selectedAlbumsBackupAssetsIds,
+        deviceAssetId
+      },
+      allAssetsInDatabase: [...state.allAssetsInDatabase, deviceAssetId],
+    );
 
-    if (state.allUniqueAssets.length - state.selectedAlbumsBackupAssetsIds.length == 0) {
-      state = state.copyWith(backupProgress: BackUpProgressEnum.done, progressInPercentage: 0.0);
+    if (state.allUniqueAssets.length -
+            state.selectedAlbumsBackupAssetsIds.length ==
+        0) {
+      state = state.copyWith(
+        backupProgress: BackUpProgressEnum.done,
+        progressInPercentage: 0.0,
+      );
     }
 
     _updateServerInfo();
   }
 
   void _onUploadProgress(int sent, int total) {
-    state = state.copyWith(progressInPercentage: (sent.toDouble() / total.toDouble() * 100));
-  }
-
-  void _updateServerInfo() async {
-    var serverInfo = await _serverInfoService.getServerInfo();
-
-    // Update server info
     state = state.copyWith(
-      serverInfo: ServerInfo(
-        diskSize: serverInfo.diskSize,
-        diskUse: serverInfo.diskUse,
-        diskAvailable: serverInfo.diskAvailable,
-        diskSizeRaw: serverInfo.diskSizeRaw,
-        diskUseRaw: serverInfo.diskUseRaw,
-        diskAvailableRaw: serverInfo.diskAvailableRaw,
-        diskUsagePercentage: serverInfo.diskUsagePercentage,
-      ),
+      progressInPercentage: (sent.toDouble() / total.toDouble() * 100),
     );
   }
 
-  void resumeBackup() {
-    var authState = ref?.read(authenticationProvider);
+  Future<void> _updateServerInfo() async {
+    var serverInfo = await _serverInfoService.getServerInfo();
 
+    // Update server info
+    if (serverInfo != null) {
+      state = state.copyWith(
+        serverInfo: serverInfo,
+      );
+    }
+  }
+
+  void resumeBackup() {
     // Check if user is login
     var accessKey = Hive.box(userInfoBox).get(accessTokenKey);
 
     // User has been logged out return
-    if (authState != null) {
-      if (accessKey == null || !authState.isAuthenticated) {
-        debugPrint("[resumeBackup] not authenticated - abort");
+    if (accessKey == null || !_authState.isAuthenticated) {
+      debugPrint("[resumeBackup] not authenticated - abort");
+      return;
+    }
+
+    // Check if this device is enable backup by the user
+    if ((_authState.deviceInfo.deviceId == _authState.deviceId) &&
+        _authState.deviceInfo.isAutoBackup) {
+      // check if backup is alreayd in process - then return
+      if (state.backupProgress == BackUpProgressEnum.inProgress) {
+        debugPrint("[resumeBackup] Backup is already in progress - abort");
         return;
       }
 
-      // Check if this device is enable backup by the user
-      if ((authState.deviceInfo.deviceId == authState.deviceId) && authState.deviceInfo.isAutoBackup) {
-        // check if backup is alreayd in process - then return
-        if (state.backupProgress == BackUpProgressEnum.inProgress) {
-          debugPrint("[resumeBackup] Backup is already in progress - abort");
-          return;
-        }
-
-        // Run backup
-        debugPrint("[resumeBackup] Start back up");
-        startBackupProcess();
-      }
-
-      return;
+      // Run backup
+      debugPrint("[resumeBackup] Start back up");
+      startBackupProcess();
     }
+
+    return;
   }
 }
 
-final backupProvider = StateNotifierProvider<BackupNotifier, BackUpState>((ref) {
-  return BackupNotifier(ref: ref);
+final backupProvider =
+    StateNotifierProvider<BackupNotifier, BackUpState>((ref) {
+  return BackupNotifier(
+    ref.watch(backupServiceProvider),
+    ref.watch(serverInfoServiceProvider),
+    ref.watch(authenticationProvider),
+    ref,
+  );
 });

mobile/lib/modules/backup/providers/error_backup_list.provider.dart

@@ -0,0 +1,23 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/backup/models/error_upload_asset.model.dart';
+
+class ErrorBackupListNotifier extends StateNotifier<Set<ErrorUploadAsset>> {
+  ErrorBackupListNotifier() : super({});
+
+  add(ErrorUploadAsset errorAsset) {
+    state = state.union({errorAsset});
+  }
+
+  remove(ErrorUploadAsset errorAsset) {
+    state = state.difference({errorAsset});
+  }
+
+  empty() {
+    state = {};
+  }
+}
+
+final errorBackupListProvider =
+    StateNotifierProvider<ErrorBackupListNotifier, Set<ErrorUploadAsset>>(
+  (ref) => ErrorBackupListNotifier(),
+);

mobile/lib/modules/backup/services/backup.service.dart

@@ -2,42 +2,53 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:io';
 
-import 'package:dio/dio.dart';
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
-import 'package:immich_mobile/shared/services/network.service.dart';
-import 'package:immich_mobile/shared/models/device_info.model.dart';
-import 'package:immich_mobile/utils/dio_http_interceptor.dart';
+import 'package:immich_mobile/modules/backup/models/current_upload_asset.model.dart';
+import 'package:immich_mobile/modules/backup/models/error_upload_asset.model.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
 import 'package:immich_mobile/utils/files_helper.dart';
+import 'package:openapi/api.dart';
 import 'package:photo_manager/photo_manager.dart';
 import 'package:http_parser/http_parser.dart';
 import 'package:path/path.dart' as p;
+import 'package:cancellation_token_http/http.dart' as http;
+
+final backupServiceProvider = Provider(
+  (ref) => BackupService(
+    ref.watch(apiServiceProvider),
+  ),
+);
 
 class BackupService {
-  final NetworkService _networkService = NetworkService();
+  final ApiService _apiService;
+  BackupService(this._apiService);
 
-  Future<List<String>> getDeviceBackupAsset() async {
+  Future<List<String>?> getDeviceBackupAsset() async {
     String deviceId = Hive.box(userInfoBox).get(deviceIdKey);
 
-    Response response = await _networkService.getRequest(url: "asset/$deviceId");
-    List<dynamic> result = jsonDecode(response.toString());
-
-    return result.cast<String>();
+    try {
+      return await _apiService.assetApi.getUserAssetsByDeviceId(deviceId);
+    } catch (e) {
+      debugPrint('Error [getDeviceBackupAsset] ${e.toString()}');
+      return null;
+    }
   }
 
-  backupAsset(Set<AssetEntity> assetList, CancelToken cancelToken, Function(String, String) singleAssetDoneCb,
-      Function(int, int) uploadProgress) async {
-    var dio = Dio();
-    dio.interceptors.add(AuthenticatedRequestInterceptor());
-
+  backupAsset(
+    Set<AssetEntity> assetList,
+    http.CancellationToken cancelToken,
+    Function(String, String) singleAssetDoneCb,
+    Function(int, int) uploadProgressCb,
+    Function(CurrentUploadAsset) setCurrentUploadAssetCb,
+    Function(ErrorUploadAsset) errorCb,
+  ) async {
     String deviceId = Hive.box(userInfoBox).get(deviceIdKey);
     String savedEndpoint = Hive.box(userInfoBox).get(serverEndpointKey);
     File? file;
 
-    MultipartFile assetRawUploadData;
-    MultipartFile thumbnailUploadData;
-
     for (var entity in assetList) {
       try {
         if (entity.type == AssetType.video) {
@@ -47,75 +58,81 @@ class BackupService {
         }
 
         if (file != null) {
-          FormData formData;
           String originalFileName = await entity.titleAsync;
-          String fileNameWithoutPath = originalFileName.toString().split(".")[0];
+          String fileNameWithoutPath =
+              originalFileName.toString().split(".")[0];
           var fileExtension = p.extension(file.path);
           var mimeType = FileHelper.getMimeType(file.path);
-          assetRawUploadData = await MultipartFile.fromFile(
-            file.path,
+          var fileStream = file.openRead();
+          var assetRawUploadData = http.MultipartFile(
+            "assetData",
+            fileStream,
+            file.lengthSync(),
             filename: fileNameWithoutPath,
             contentType: MediaType(
               mimeType["type"],
               mimeType["subType"],
             ),
           );
-          formData = FormData.fromMap({
-            'deviceAssetId': entity.id,
-            'deviceId': deviceId,
-            'assetType': _getAssetType(entity.type),
-            'createdAt': entity.createDateTime.toIso8601String(),
-            'modifiedAt': entity.modifiedDateTime.toIso8601String(),
-            'isFavorite': entity.isFavorite,
-            'fileExtension': fileExtension,
-            'duration': entity.videoDuration,
-            'assetData': [assetRawUploadData]
-          });
 
-          // Build thumbnail multipart data
-          var thumbnailData = await entity.thumbnailDataWithSize(const ThumbnailSize(1440, 2560));
-          if (thumbnailData != null) {
-            thumbnailUploadData = MultipartFile.fromBytes(
-              List.from(thumbnailData),
-              filename: fileNameWithoutPath,
-              contentType: MediaType(
-                "image",
-                "jpeg",
-              ),
-            );
+          var box = Hive.box(userInfoBox);
 
-            // Send thumbnail data if it is exist
-            formData = FormData.fromMap({
-              'deviceAssetId': entity.id,
-              'deviceId': deviceId,
-              'assetType': _getAssetType(entity.type),
-              'createdAt': entity.createDateTime.toIso8601String(),
-              'modifiedAt': entity.modifiedDateTime.toIso8601String(),
-              'isFavorite': entity.isFavorite,
-              'fileExtension': fileExtension,
-              'duration': entity.videoDuration,
-              'thumbnailData': [thumbnailUploadData],
-              'assetData': [assetRawUploadData]
-            });
-          }
+          var req = MultipartRequest(
+            'POST',
+            Uri.parse('$savedEndpoint/asset/upload'),
+            onProgress: ((bytes, totalBytes) =>
+                uploadProgressCb(bytes, totalBytes)),
+          );
+          req.headers["Authorization"] = "Bearer ${box.get(accessTokenKey)}";
 
-          Response res = await dio.post(
-            '$savedEndpoint/asset/upload',
-            data: formData,
-            cancelToken: cancelToken,
-            onSendProgress: (sent, total) => uploadProgress(sent, total),
+          req.fields['deviceAssetId'] = entity.id;
+          req.fields['deviceId'] = deviceId;
+          req.fields['assetType'] = _getAssetType(entity.type);
+          req.fields['createdAt'] = entity.createDateTime.toIso8601String();
+          req.fields['modifiedAt'] = entity.modifiedDateTime.toIso8601String();
+          req.fields['isFavorite'] = entity.isFavorite.toString();
+          req.fields['fileExtension'] = fileExtension;
+          req.fields['duration'] = entity.videoDuration.toString();
+
+          req.files.add(assetRawUploadData);
+
+          setCurrentUploadAssetCb(
+            CurrentUploadAsset(
+              id: entity.id,
+              createdAt: entity.createDateTime,
+              fileName: originalFileName,
+              fileType: _getAssetType(entity.type),
+            ),
           );
 
-          if (res.statusCode == 201) {
+          var response = await req.send(cancellationToken: cancelToken);
+
+          if (response.statusCode == 201) {
             singleAssetDoneCb(entity.id, deviceId);
+          } else {
+            var data = await response.stream.bytesToString();
+            var error = jsonDecode(data);
+
+            debugPrint(
+              "Error(${error['statusCode']}) uploading ${entity.id} | $originalFileName | Created on ${entity.createDateTime} | ${error['error']}",
+            );
+
+            errorCb(
+              ErrorUploadAsset(
+                asset: entity,
+                id: entity.id,
+                createdAt: entity.createDateTime,
+                fileName: originalFileName,
+                fileType: _getAssetType(entity.type),
+                errorMessage: error['error'],
+              ),
+            );
+            continue;
           }
         }
-      } on DioError catch (e) {
-        debugPrint("DioError backupAsset: ${e.response}");
-        if (e.type == DioErrorType.cancel || e.type == DioErrorType.other) {
-          return;
-        }
-        continue;
+      } on http.CancelledException {
+        debugPrint("Backup was cancelled by the user");
+        return;
       } catch (e) {
         debugPrint("ERROR backupAsset: ${e.toString()}");
         continue;
@@ -140,13 +157,60 @@ class BackupService {
     }
   }
 
-  Future<DeviceInfoRemote> setAutoBackup(bool status, String deviceId, String deviceType) async {
-    var res = await _networkService.patchRequest(url: 'device-info', data: {
-      "isAutoBackup": status,
-      "deviceId": deviceId,
-      "deviceType": deviceType,
-    });
+  Future<DeviceInfoResponseDto> setAutoBackup(
+    bool status,
+    String deviceId,
+    DeviceTypeEnum deviceType,
+  ) async {
+    try {
+      var updatedDeviceInfo = await _apiService.deviceInfoApi.updateDeviceInfo(
+        UpdateDeviceInfoDto(
+          deviceId: deviceId,
+          deviceType: deviceType,
+          isAutoBackup: status,
+        ),
+      );
 
-    return DeviceInfoRemote.fromJson(res.toString());
+      if (updatedDeviceInfo == null) {
+        throw Exception("Error updating device info");
+      }
+
+      return updatedDeviceInfo;
+    } catch (e) {
+      debugPrint("Error setAutoBackup: ${e.toString()}");
+      throw Error();
+    }
+  }
+}
+
+class MultipartRequest extends http.MultipartRequest {
+  /// Creates a new [MultipartRequest].
+  MultipartRequest(
+    String method,
+    Uri url, {
+    required this.onProgress,
+  }) : super(method, url);
+
+  final void Function(int bytes, int totalBytes) onProgress;
+
+  /// Freezes all mutable fields and returns a
+  /// single-subscription [http.ByteStream]
+  /// that will emit the request body.
+  @override
+  http.ByteStream finalize() {
+    final byteStream = super.finalize();
+
+    final total = contentLength;
+    var bytes = 0;
+
+    final t = StreamTransformer.fromHandlers(
+      handleData: (List<int> data, EventSink<List<int>> sink) {
+        bytes += data.length;
+        onProgress.call(bytes, total);
+        sink.add(data);
+      },
+    );
+    final stream = byteStream.transform(t);
+    return http.ByteStream(stream);
   }
 }

mobile/lib/modules/backup/ui/album_info_card.dart

@@ -1,6 +1,7 @@
 import 'dart:typed_data';
 
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:fluttertoast/fluttertoast.dart';
@@ -14,16 +15,24 @@ class AlbumInfoCard extends HookConsumerWidget {
   final Uint8List? imageData;
   final AssetPathEntity albumInfo;
 
-  const AlbumInfoCard({Key? key, this.imageData, required this.albumInfo}) : super(key: key);
+  const AlbumInfoCard({Key? key, this.imageData, required this.albumInfo})
+      : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final bool isSelected = ref.watch(backupProvider).selectedBackupAlbums.contains(albumInfo);
-    final bool isExcluded = ref.watch(backupProvider).excludedBackupAlbums.contains(albumInfo);
+    final bool isSelected =
+        ref.watch(backupProvider).selectedBackupAlbums.contains(albumInfo);
+    final bool isExcluded =
+        ref.watch(backupProvider).excludedBackupAlbums.contains(albumInfo);
 
-    ColorFilter selectedFilter = ColorFilter.mode(Theme.of(context).primaryColor.withAlpha(100), BlendMode.darken);
-    ColorFilter excludedFilter = ColorFilter.mode(Colors.red.withAlpha(75), BlendMode.darken);
-    ColorFilter unselectedFilter = const ColorFilter.mode(Colors.black, BlendMode.color);
+    ColorFilter selectedFilter = ColorFilter.mode(
+      Theme.of(context).primaryColor.withAlpha(100),
+      BlendMode.darken,
+    );
+    ColorFilter excludedFilter =
+        ColorFilter.mode(Colors.red.withAlpha(75), BlendMode.darken);
+    ColorFilter unselectedFilter =
+        const ColorFilter.mode(Colors.black, BlendMode.color);
 
     _buildSelectedTextBox() {
       if (isSelected) {
@@ -31,9 +40,13 @@ class AlbumInfoCard extends HookConsumerWidget {
           visualDensity: VisualDensity.compact,
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
           label: const Text(
-            "INCLUDED",
-            style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
-          ),
+            "album_info_card_backup_album_included",
+            style: TextStyle(
+              fontSize: 10,
+              color: Colors.white,
+              fontWeight: FontWeight.bold,
+            ),
+          ).tr(),
           backgroundColor: Theme.of(context).primaryColor,
         );
       } else if (isExcluded) {
@@ -41,14 +54,18 @@ class AlbumInfoCard extends HookConsumerWidget {
           visualDensity: VisualDensity.compact,
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
           label: const Text(
-            "EXCLUDED",
-            style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
-          ),
+            "album_info_card_backup_album_excluded",
+            style: TextStyle(
+              fontSize: 10,
+              color: Colors.white,
+              fontWeight: FontWeight.bold,
+            ),
+          ).tr(),
           backgroundColor: Colors.red[300],
         );
       }
 
-      return Container();
+      return const SizedBox();
     }
 
     _buildImageFilter() {
@@ -69,7 +86,7 @@ class AlbumInfoCard extends HookConsumerWidget {
           if (ref.watch(backupProvider).selectedBackupAlbums.length == 1) {
             ImmichToast.show(
               context: context,
-              msg: "Cannot remove the only album",
+              msg: "backup_err_only_album".tr(),
               toastType: ToastType.error,
               gravity: ToastGravity.BOTTOM,
             );
@@ -85,20 +102,27 @@ class AlbumInfoCard extends HookConsumerWidget {
         HapticFeedback.selectionClick();
 
         if (isExcluded) {
-          ref.watch(backupProvider.notifier).removeExcludedAlbumForBackup(albumInfo);
+          ref
+              .watch(backupProvider.notifier)
+              .removeExcludedAlbumForBackup(albumInfo);
         } else {
           if (ref.watch(backupProvider).selectedBackupAlbums.length == 1 &&
-              ref.watch(backupProvider).selectedBackupAlbums.contains(albumInfo)) {
+              ref
+                  .watch(backupProvider)
+                  .selectedBackupAlbums
+                  .contains(albumInfo)) {
             ImmichToast.show(
               context: context,
-              msg: "Cannot exclude the only album",
+              msg: "backup_err_only_album".tr(),
               toastType: ToastType.error,
               gravity: ToastGravity.BOTTOM,
             );
             return;
           }
 
-          ref.watch(backupProvider.notifier).addExcludedAlbumForBackup(albumInfo);
+          ref
+              .watch(backupProvider.notifier)
+              .addExcludedAlbumForBackup(albumInfo);
         }
       },
       child: Card(
@@ -121,18 +145,27 @@ class AlbumInfoCard extends HookConsumerWidget {
                   width: 200,
                   height: 200,
                   decoration: BoxDecoration(
-                    borderRadius: const BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),
+                    borderRadius: const BorderRadius.only(
+                      topLeft: Radius.circular(12),
+                      topRight: Radius.circular(12),
+                    ),
                     image: DecorationImage(
                       colorFilter: _buildImageFilter(),
                       image: imageData != null
                           ? MemoryImage(imageData!)
-                          : const AssetImage('assets/immich-logo-no-outline.png') as ImageProvider,
+                          : const AssetImage(
+                              'assets/immich-logo-no-outline.png',
+                            ) as ImageProvider,
                       fit: BoxFit.cover,
                     ),
                   ),
                   child: null,
                 ),
-                Positioned(bottom: 10, left: 25, child: _buildSelectedTextBox())
+                Positioned(
+                  bottom: 10,
+                  left: 25,
+                  child: _buildSelectedTextBox(),
+                )
               ],
             ),
             Padding(
@@ -150,13 +183,22 @@ class AlbumInfoCard extends HookConsumerWidget {
                           Text(
                             albumInfo.name,
                             style: TextStyle(
-                                fontSize: 14, color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold),
+                              fontSize: 14,
+                              color: Theme.of(context).primaryColor,
+                              fontWeight: FontWeight.bold,
+                            ),
                           ),
                           Padding(
                             padding: const EdgeInsets.only(top: 2.0),
                             child: Text(
-                              albumInfo.assetCount.toString() + (albumInfo.isAll ? " (ALL)" : ""),
-                              style: TextStyle(fontSize: 12, color: Colors.grey[600]),
+                              albumInfo.assetCount.toString() +
+                                  (albumInfo.isAll
+                                      ? " (${'backup_all'.tr()})"
+                                      : ""),
+                              style: TextStyle(
+                                fontSize: 12,
+                                color: Colors.grey[600],
+                              ),
                             ),
                           )
                         ],
@@ -165,7 +207,8 @@ class AlbumInfoCard extends HookConsumerWidget {
                   ),
                   IconButton(
                     onPressed: () {
-                      AutoRouter.of(context).push(AlbumPreviewRoute(album: albumInfo));
+                      AutoRouter.of(context)
+                          .push(AlbumPreviewRoute(album: albumInfo));
                     },
                     icon: Icon(
                       Icons.image_outlined,

mobile/lib/modules/backup/ui/backup_info_card.dart

@@ -1,10 +1,16 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 class BackupInfoCard extends StatelessWidget {
   final String title;
   final String subtitle;
   final String info;
-  const BackupInfoCard({Key? key, required this.title, required this.subtitle, required this.info}) : super(key: key);
+  const BackupInfoCard({
+    Key? key,
+    required this.title,
+    required this.subtitle,
+    required this.info,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -39,7 +45,7 @@ class BackupInfoCard extends StatelessWidget {
               info,
               style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
             ),
-            const Text("assets"),
+            const Text("backup_info_card_assets").tr(),
           ],
         ),
       ),

mobile/lib/modules/backup/views/album_preview_page.dart

@@ -16,13 +16,17 @@ class AlbumPreviewPage extends HookConsumerWidget {
     final assets = useState<List<AssetEntity>>([]);
 
     _getAssetsInAlbum() async {
-      assets.value = await album.getAssetListRange(start: 0, end: album.assetCount);
+      assets.value =
+          await album.getAssetListRange(start: 0, end: album.assetCount);
     }
 
-    useEffect(() {
-      _getAssetsInAlbum();
-      return null;
-    }, []);
+    useEffect(
+      () {
+        _getAssetsInAlbum();
+        return null;
+      },
+      [],
+    );
 
     return Scaffold(
       appBar: AppBar(
@@ -37,7 +41,11 @@ class AlbumPreviewPage extends HookConsumerWidget {
               padding: const EdgeInsets.only(top: 4.0),
               child: Text(
                 "ID ${album.id}",
-                style: TextStyle(fontSize: 10, color: Colors.grey[600], fontWeight: FontWeight.bold),
+                style: TextStyle(
+                  fontSize: 10,
+                  color: Colors.grey[600],
+                  fontWeight: FontWeight.bold,
+                ),
               ),
             ),
           ],
@@ -56,7 +64,10 @@ class AlbumPreviewPage extends HookConsumerWidget {
         itemCount: assets.value.length,
         itemBuilder: (context, index) {
           Future<Uint8List?> thumbData =
-              assets.value[index].thumbnailDataWithSize(const ThumbnailSize(200, 200), quality: 50);
+              assets.value[index].thumbnailDataWithSize(
+            const ThumbnailSize(200, 200),
+            quality: 50,
+          );
 
           return FutureBuilder<Uint8List?>(
             future: thumbData,

mobile/lib/modules/backup/views/backup_album_selection_page.dart

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:fluttertoast/fluttertoast.dart';
@@ -16,10 +17,13 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
     final selectedBackupAlbums = ref.watch(backupProvider).selectedBackupAlbums;
     final excludedBackupAlbums = ref.watch(backupProvider).excludedBackupAlbums;
 
-    useEffect(() {
-      ref.read(backupProvider.notifier).getBackupAlbumsInfo();
-      return null;
-    }, []);
+    useEffect(
+      () {
+        ref.read(backupProvider.notifier).getBackupInfo();
+        return null;
+      },
+      [],
+    );
 
     _buildAlbumSelectionList() {
       if (availableAlbums.isEmpty) {
@@ -37,8 +41,13 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
           itemBuilder: ((context, index) {
             var thumbnailData = availableAlbums[index].thumbnailData;
             return Padding(
-              padding: index == 0 ? const EdgeInsets.only(left: 16.00) : const EdgeInsets.all(0),
-              child: AlbumInfoCard(imageData: thumbnailData, albumInfo: availableAlbums[index].albumEntity),
+              padding: index == 0
+                  ? const EdgeInsets.only(left: 16.00)
+                  : const EdgeInsets.all(0),
+              child: AlbumInfoCard(
+                imageData: thumbnailData,
+                albumInfo: availableAlbums[index].albumEntity,
+              ),
             );
           }),
         ),
@@ -51,7 +60,7 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
           if (ref.watch(backupProvider).selectedBackupAlbums.length == 1) {
             ImmichToast.show(
               context: context,
-              msg: "Cannot remove the only album",
+              msg: "backup_err_only_album".tr(),
               toastType: ToastType.error,
               gravity: ToastGravity.BOTTOM,
             );
@@ -67,10 +76,16 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
             onTap: removeSelection,
             child: Chip(
               visualDensity: VisualDensity.compact,
-              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(5),
+              ),
               label: Text(
                 album.name,
-                style: const TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
+                style: const TextStyle(
+                  fontSize: 10,
+                  color: Colors.white,
+                  fontWeight: FontWeight.bold,
+                ),
               ),
               backgroundColor: Theme.of(context).primaryColor,
               deleteIconColor: Colors.white,
@@ -88,7 +103,9 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
     _buildExcludedAlbumNameChip() {
       return excludedBackupAlbums.map((album) {
         void removeSelection() {
-          ref.watch(backupProvider.notifier).removeExcludedAlbumForBackup(album);
+          ref
+              .watch(backupProvider.notifier)
+              .removeExcludedAlbumForBackup(album);
         }
 
         return GestureDetector(
@@ -97,10 +114,16 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
             padding: const EdgeInsets.only(right: 8.0),
             child: Chip(
               visualDensity: VisualDensity.compact,
-              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(5),
+              ),
               label: Text(
                 album.name,
-                style: const TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold),
+                style: const TextStyle(
+                  fontSize: 10,
+                  color: Colors.white,
+                  fontWeight: FontWeight.bold,
+                ),
               ),
               backgroundColor: Colors.red[300],
               deleteIconColor: Colors.white,
@@ -122,27 +145,31 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
           icon: const Icon(Icons.arrow_back_ios_rounded),
         ),
         title: const Text(
-          "Select Albums",
+          "backup_album_selection_page_select_albums",
           style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
-        ),
+        ).tr(),
         elevation: 0,
       ),
       body: ListView(
         physics: const ClampingScrollPhysics(),
         children: [
-          const Padding(
-            padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
-            child: Text(
-              "Selection Info",
+          Padding(
+            padding:
+                const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
+            child: const Text(
+              "backup_album_selection_page_selection_info",
               style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
-            ),
+            ).tr(),
           ),
           // Selected Album Chips
 
           Padding(
             padding: const EdgeInsets.symmetric(horizontal: 16.0),
             child: Wrap(
-              children: [..._buildSelectedAlbumNameChip(), ..._buildExcludedAlbumNameChip()],
+              children: [
+                ..._buildSelectedAlbumNameChip(),
+                ..._buildExcludedAlbumNameChip()
+              ],
             ),
           ),
 
@@ -164,11 +191,19 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                   ListTile(
                     visualDensity: VisualDensity.compact,
                     title: Text(
-                      "Total unique assets",
-                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Colors.grey[700]),
-                    ),
+                      "backup_album_selection_page_total_assets",
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 14,
+                        color: Colors.grey[700],
+                      ),
+                    ).tr(),
                     trailing: Text(
-                      ref.watch(backupProvider).allUniqueAssets.length.toString(),
+                      ref
+                          .watch(backupProvider)
+                          .allUniqueAssets
+                          .length
+                          .toString(),
                       style: const TextStyle(fontWeight: FontWeight.bold),
                     ),
                   ),
@@ -179,19 +214,20 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
 
           ListTile(
             title: Text(
-              "Albums on device (${availableAlbums.length.toString()})",
+              "backup_album_selection_page_albums_device"
+                  .tr(args: [availableAlbums.length.toString()]),
               style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
             ),
             subtitle: Padding(
               padding: const EdgeInsets.symmetric(vertical: 8.0),
               child: Text(
-                "Tap to include, double tap to exclude",
+                "backup_album_selection_page_albums_tap",
                 style: TextStyle(
                   fontSize: 12,
                   color: Theme.of(context).primaryColor,
                   fontWeight: FontWeight.bold,
                 ),
-              ),
+              ).tr(),
             ),
             trailing: IconButton(
               splashRadius: 16,
@@ -206,23 +242,28 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                   context: context,
                   builder: (BuildContext context) {
                     return AlertDialog(
-                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(12),
+                      ),
                       elevation: 5,
                       title: Text(
-                        'Selection Info',
+                        'backup_album_selection_page_selection_info',
                         style: TextStyle(
                           fontSize: 16,
                           fontWeight: FontWeight.bold,
                           color: Theme.of(context).primaryColor,
                         ),
-                      ),
+                      ).tr(),
                       content: SingleChildScrollView(
                         child: ListBody(
                           children: [
                             Text(
-                              'Assets can scatter across multiple albums. Thus, albums can be included or excluded during the backup process.',
-                              style: TextStyle(fontSize: 14, color: Colors.grey[700]),
-                            ),
+                              'backup_album_selection_page_assets_scatter',
+                              style: TextStyle(
+                                fontSize: 14,
+                                color: Colors.grey[700],
+                              ),
+                            ).tr(),
                           ],
                         ),
                       ),

mobile/lib/modules/backup/views/backup_controller_page.dart

@@ -1,7 +1,9 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/backup/providers/error_backup_list.provider.dart';
 import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
 import 'package:immich_mobile/modules/backup/models/backup_state.model.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
@@ -17,18 +19,26 @@ class BackupControllerPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     BackUpState backupState = ref.watch(backupProvider);
-    AuthenticationState _authenticationState = ref.watch(authenticationProvider);
-    bool shouldBackup =
-        backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length == 0 ? false : true;
+    AuthenticationState authenticationState = ref.watch(authenticationProvider);
+    bool shouldBackup = backupState.allUniqueAssets.length -
+                backupState.selectedAlbumsBackupAssetsIds.length ==
+            0
+        ? false
+        : true;
 
-    useEffect(() {
-      if (backupState.backupProgress != BackUpProgressEnum.inProgress) {
-        ref.read(backupProvider.notifier).getBackupInfo();
-      }
+    useEffect(
+      () {
+        if (backupState.backupProgress != BackUpProgressEnum.inProgress) {
+          ref.watch(backupProvider.notifier).getBackupInfo();
+        }
 
-      ref.watch(websocketProvider.notifier).stopListenToEvent('on_upload_success');
-      return null;
-    }, []);
+        ref
+            .watch(websocketProvider.notifier)
+            .stopListenToEvent('on_upload_success');
+        return null;
+      },
+      [],
+    );
 
     Widget _buildStorageInformation() {
       return ListTile(
@@ -37,9 +47,9 @@ class BackupControllerPage extends HookConsumerWidget {
           color: Theme.of(context).primaryColor,
         ),
         title: const Text(
-          "Server Storage",
+          "backup_controller_page_server_storage",
           style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
-        ),
+        ).tr(),
         subtitle: Padding(
           padding: const EdgeInsets.only(top: 8.0),
           child: Column(
@@ -48,9 +58,10 @@ class BackupControllerPage extends HookConsumerWidget {
               Padding(
                 padding: const EdgeInsets.only(top: 8.0),
                 child: LinearPercentIndicator(
-                  padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
                   barRadius: const Radius.circular(2),
-                  lineHeight: 6.0,
+                  lineHeight: 10.0,
                   percent: backupState.serverInfo.diskUsagePercentage / 100.0,
                   backgroundColor: Colors.grey,
                   progressColor: Theme.of(context).primaryColor,
@@ -58,7 +69,12 @@ class BackupControllerPage extends HookConsumerWidget {
               ),
               Padding(
                 padding: const EdgeInsets.only(top: 12.0),
-                child: Text('${backupState.serverInfo.diskUse} of ${backupState.serverInfo.diskSize} used'),
+                child: const Text('backup_controller_page_storage_format').tr(
+                  args: [
+                    backupState.serverInfo.diskUse,
+                    backupState.serverInfo.diskSize
+                  ],
+                ),
               ),
             ],
           ),
@@ -67,9 +83,13 @@ class BackupControllerPage extends HookConsumerWidget {
     }
 
     ListTile _buildBackupController() {
-      var backUpOption = _authenticationState.deviceInfo.isAutoBackup ? "on" : "off";
-      var isAutoBackup = _authenticationState.deviceInfo.isAutoBackup;
-      var backupBtnText = _authenticationState.deviceInfo.isAutoBackup ? "off" : "on";
+      var backUpOption = authenticationState.deviceInfo.isAutoBackup
+          ? "backup_controller_page_status_on".tr()
+          : "backup_controller_page_status_off".tr();
+      var isAutoBackup = authenticationState.deviceInfo.isAutoBackup;
+      var backupBtnText = authenticationState.deviceInfo.isAutoBackup
+          ? "backup_controller_page_turn_off".tr()
+          : "backup_controller_page_turn_on".tr();
       return ListTile(
         isThreeLine: true,
         leading: isAutoBackup
@@ -79,7 +99,7 @@ class BackupControllerPage extends HookConsumerWidget {
               )
             : const Icon(Icons.cloud_off_rounded),
         title: Text(
-          "Back up is $backUpOption",
+          backUpOption,
           style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
         ),
         subtitle: Padding(
@@ -87,12 +107,11 @@ class BackupControllerPage extends HookConsumerWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              !isAutoBackup
-                  ? const Text(
-                      "Turn on backup to automatically upload new assets to the server.",
-                      style: TextStyle(fontSize: 14),
-                    )
-                  : Container(),
+              if (!isAutoBackup)
+                const Text(
+                  "backup_controller_page_desc_backup",
+                  style: TextStyle(fontSize: 14),
+                ).tr(),
               Padding(
                 padding: const EdgeInsets.only(top: 8.0),
                 child: OutlinedButton(
@@ -103,11 +122,20 @@ class BackupControllerPage extends HookConsumerWidget {
                     ),
                   ),
                   onPressed: () {
-                    isAutoBackup
-                        ? ref.watch(authenticationProvider.notifier).setAutoBackup(false)
-                        : ref.watch(authenticationProvider.notifier).setAutoBackup(true);
+                    if (isAutoBackup) {
+                      ref
+                          .read(authenticationProvider.notifier)
+                          .setAutoBackup(false);
+                    } else {
+                      ref
+                          .read(authenticationProvider.notifier)
+                          .setAutoBackup(true);
+                    }
                   },
-                  child: Text("Turn $backupBtnText Backup", style: const TextStyle(fontWeight: FontWeight.bold)),
+                  child: Text(
+                    backupBtnText,
+                    style: const TextStyle(fontWeight: FontWeight.bold),
+                  ),
                 ),
               )
             ],
@@ -117,13 +145,13 @@ class BackupControllerPage extends HookConsumerWidget {
     }
 
     Widget _buildSelectedAlbumName() {
-      var text = "Selected: ";
+      var text = "backup_controller_page_backup_selected".tr();
       var albums = ref.watch(backupProvider).selectedBackupAlbums;
 
       if (albums.isNotEmpty) {
         for (var album in albums) {
           if (album.name == "Recent" || album.name == "Recents") {
-            text += "${album.name} (All), ";
+            text += "${album.name} (${'backup_all'.tr()}), ";
           } else {
             text += "${album.name}, ";
           }
@@ -133,22 +161,30 @@ class BackupControllerPage extends HookConsumerWidget {
           padding: const EdgeInsets.only(top: 8.0),
           child: Text(
             text.trim().substring(0, text.length - 2),
-            style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 12, fontWeight: FontWeight.bold),
+            style: TextStyle(
+              color: Theme.of(context).primaryColor,
+              fontSize: 12,
+              fontWeight: FontWeight.bold,
+            ),
           ),
         );
       } else {
         return Padding(
           padding: const EdgeInsets.only(top: 8.0),
           child: Text(
-            "None selected",
-            style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 12, fontWeight: FontWeight.bold),
+            "backup_controller_page_none_selected".tr(),
+            style: TextStyle(
+              color: Theme.of(context).primaryColor,
+              fontSize: 12,
+              fontWeight: FontWeight.bold,
+            ),
           ),
         );
       }
     }
 
     Widget _buildExcludedAlbumName() {
-      var text = "Excluded: ";
+      var text = "backup_controller_page_excluded".tr();
       var albums = ref.watch(backupProvider).excludedBackupAlbums;
 
       if (albums.isNotEmpty) {
@@ -160,11 +196,15 @@ class BackupControllerPage extends HookConsumerWidget {
           padding: const EdgeInsets.only(top: 8.0),
           child: Text(
             text.trim().substring(0, text.length - 2),
-            style: TextStyle(color: Colors.red[300], fontSize: 12, fontWeight: FontWeight.bold),
+            style: TextStyle(
+              color: Colors.red[300],
+              fontSize: 12,
+              fontWeight: FontWeight.bold,
+            ),
           ),
         );
       } else {
-        return Container();
+        return const SizedBox();
       }
     }
 
@@ -181,16 +221,19 @@ class BackupControllerPage extends HookConsumerWidget {
         borderOnForeground: false,
         child: ListTile(
           minVerticalPadding: 15,
-          title: const Text("Backup Albums", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
+          title: const Text(
+            "backup_controller_page_albums",
+            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
+          ).tr(),
           subtitle: Padding(
             padding: const EdgeInsets.only(top: 8.0),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 const Text(
-                  "Albums to be backup",
+                  "backup_controller_page_to_backup",
                   style: TextStyle(color: Color(0xFF808080), fontSize: 12),
-                ),
+                ).tr(),
                 _buildSelectedAlbumName(),
                 _buildExcludedAlbumName()
               ],
@@ -207,111 +250,263 @@ class BackupControllerPage extends HookConsumerWidget {
             onPressed: () {
               AutoRouter.of(context).push(const BackupAlbumSelectionRoute());
             },
-            child: const Padding(
-              padding: EdgeInsets.symmetric(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(
                 vertical: 16.0,
               ),
-              child: Text(
-                "Select",
+              child: const Text(
+                "backup_controller_page_select",
                 style: TextStyle(fontWeight: FontWeight.bold),
-              ),
+              ).tr(),
             ),
           ),
         ),
       );
     }
 
+    _buildCurrentBackupAssetInfoCard() {
+      return ListTile(
+        leading: Icon(
+          Icons.info_outline_rounded,
+          color: Theme.of(context).primaryColor,
+        ),
+        title: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const Text(
+              "backup_controller_page_uploading_file_info",
+              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+            ).tr(),
+            if (ref.watch(errorBackupListProvider).isNotEmpty)
+              ActionChip(
+                avatar: Icon(
+                  Icons.info,
+                  size: 24,
+                  color: Colors.red[400],
+                ),
+                elevation: 1,
+                visualDensity: VisualDensity.compact,
+                label: Text(
+                  "backup_controller_page_failed",
+                  style: TextStyle(
+                    color: Colors.red[400],
+                    fontWeight: FontWeight.bold,
+                    fontSize: 11,
+                  ),
+                ).tr(
+                  args: [ref.watch(errorBackupListProvider).length.toString()],
+                ),
+                backgroundColor: Colors.white,
+                onPressed: () {
+                  AutoRouter.of(context).push(const FailedBackupStatusRoute());
+                },
+              ),
+          ],
+        ),
+        subtitle: Column(
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: LinearPercentIndicator(
+                padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
+                barRadius: const Radius.circular(2),
+                lineHeight: 10.0,
+                trailing: Text(
+                  " ${backupState.progressInPercentage.toStringAsFixed(0)}%",
+                  style: const TextStyle(fontSize: 12),
+                ),
+                percent: backupState.progressInPercentage / 100.0,
+                backgroundColor: Colors.grey,
+                progressColor: Theme.of(context).primaryColor,
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0),
+              child: Table(
+                border: TableBorder.all(
+                  color: Colors.black12,
+                  width: 1,
+                ),
+                children: [
+                  TableRow(
+                    decoration: BoxDecoration(
+                      color: Colors.grey[100],
+                    ),
+                    children: [
+                      TableCell(
+                        verticalAlignment: TableCellVerticalAlignment.middle,
+                        child: Padding(
+                          padding: const EdgeInsets.all(6.0),
+                          child: const Text(
+                            'backup_controller_page_filename',
+                            style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              fontSize: 10.0,
+                            ),
+                          ).tr(
+                            args: [
+                              backupState.currentUploadAsset.fileName,
+                              backupState.currentUploadAsset.fileType
+                                  .toLowerCase()
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                  TableRow(
+                    decoration: BoxDecoration(
+                      color: Colors.grey[200],
+                    ),
+                    children: [
+                      TableCell(
+                        verticalAlignment: TableCellVerticalAlignment.middle,
+                        child: Padding(
+                          padding: const EdgeInsets.all(6.0),
+                          child: const Text(
+                            "backup_controller_page_created",
+                            style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              fontSize: 10.0,
+                            ),
+                          ).tr(
+                            args: [
+                              DateFormat.yMMMMd('en_US').format(
+                                DateTime.parse(
+                                  backupState.currentUploadAsset.createdAt
+                                      .toString(),
+                                ),
+                              )
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                  TableRow(
+                    decoration: BoxDecoration(
+                      color: Colors.grey[100],
+                    ),
+                    children: [
+                      TableCell(
+                        child: Padding(
+                          padding: const EdgeInsets.all(6.0),
+                          child: const Text(
+                            "backup_controller_page_id",
+                            style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              fontSize: 10.0,
+                            ),
+                          ).tr(args: [backupState.currentUploadAsset.id]),
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    void startBackup() {
+      ref.watch(errorBackupListProvider.notifier).empty();
+      ref.watch(backupProvider.notifier).startBackupProcess();
+    }
+
     return Scaffold(
       appBar: AppBar(
         elevation: 0,
         title: const Text(
-          "Backup",
+          "backup_controller_page_backup",
           style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
-        ),
+        ).tr(),
         leading: IconButton(
-            onPressed: () {
-              ref.watch(websocketProvider.notifier).listenUploadEvent();
-              AutoRouter.of(context).pop(true);
-            },
-            splashRadius: 24,
-            icon: const Icon(
-              Icons.arrow_back_ios_rounded,
-            )),
+          onPressed: () {
+            ref.watch(websocketProvider.notifier).listenUploadEvent();
+            AutoRouter.of(context).pop(true);
+          },
+          splashRadius: 24,
+          icon: const Icon(
+            Icons.arrow_back_ios_rounded,
+          ),
+        ),
       ),
       body: Padding(
-        padding: const EdgeInsets.all(16.0),
+        padding: const EdgeInsets.only(left: 16.0, right: 16, bottom: 32),
         child: ListView(
           // crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const Padding(
-              padding: EdgeInsets.all(8.0),
-              child: Text(
-                "Backup Information",
+            Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: const Text(
+                "backup_controller_page_info",
                 style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
-              ),
+              ).tr(),
             ),
             _buildFolderSelectionTile(),
             BackupInfoCard(
-              title: "Total",
-              subtitle: "All unique photos and videos from selected albums",
+              title: "backup_controller_page_total".tr(),
+              subtitle: "backup_controller_page_total_sub".tr(),
               info: "${backupState.allUniqueAssets.length}",
             ),
             BackupInfoCard(
-              title: "Backup",
-              subtitle: "Photos and videos from selected albums that are backup",
+              title: "backup_controller_page_backup".tr(),
+              subtitle: "backup_controller_page_backup_sub".tr(),
               info: "${backupState.selectedAlbumsBackupAssetsIds.length}",
             ),
             BackupInfoCard(
-              title: "Remainder",
-              subtitle: "Photos and videos that has not been backing up from selected albums",
-              info: "${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length}",
+              title: "backup_controller_page_remainder".tr(),
+              subtitle: "backup_controller_page_remainder_sub".tr(),
+              info:
+                  "${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length}",
             ),
             const Divider(),
             _buildBackupController(),
             const Divider(),
             _buildStorageInformation(),
             const Divider(),
+            _buildCurrentBackupAssetInfoCard(),
             Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: Text(
-                  "Asset that were being backup: ${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length} [${backupState.progressInPercentage.toStringAsFixed(0)}%]"),
-            ),
-            Padding(
-              padding: const EdgeInsets.only(left: 8.0),
-              child: Row(children: [
-                const Text("Backup Progress:"),
-                const Padding(padding: EdgeInsets.symmetric(horizontal: 2)),
-                backupState.backupProgress == BackUpProgressEnum.inProgress
-                    ? const CircularProgressIndicator.adaptive()
-                    : const Text("Done"),
-              ]),
-            ),
-            Padding(
-              padding: const EdgeInsets.all(8.0),
+              padding: const EdgeInsets.only(
+                top: 24,
+              ),
               child: Container(
-                child: backupState.backupProgress == BackUpProgressEnum.inProgress
-                    ? ElevatedButton(
-                        style: ElevatedButton.styleFrom(
-                          primary: Colors.red[300],
-                          onPrimary: Colors.grey[50],
-                        ),
-                        onPressed: () {
-                          ref.read(backupProvider.notifier).cancelBackup();
-                        },
-                        child: const Text("Cancel"),
-                      )
-                    : ElevatedButton(
-                        style: ElevatedButton.styleFrom(
-                          primary: Theme.of(context).primaryColor,
-                          onPrimary: Colors.grey[50],
-                        ),
-                        onPressed: shouldBackup
-                            ? () {
-                                ref.read(backupProvider.notifier).startBackupProcess();
-                              }
-                            : null,
-                        child: const Text("Start Backup"),
-                      ),
+                child:
+                    backupState.backupProgress == BackUpProgressEnum.inProgress
+                        ? ElevatedButton(
+                            style: ElevatedButton.styleFrom(
+                              primary: Colors.red[300],
+                              onPrimary: Colors.grey[50],
+                              padding: const EdgeInsets.all(14),
+                            ),
+                            onPressed: () {
+                              ref.read(backupProvider.notifier).cancelBackup();
+                            },
+                            child: const Text(
+                              "backup_controller_page_cancel",
+                              style: TextStyle(
+                                fontSize: 14,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ).tr(),
+                          )
+                        : ElevatedButton(
+                            style: ElevatedButton.styleFrom(
+                              primary: Theme.of(context).primaryColor,
+                              onPrimary: Colors.grey[50],
+                              padding: const EdgeInsets.all(14),
+                            ),
+                            onPressed: shouldBackup ? startBackup : null,
+                            child: const Text(
+                              "backup_controller_page_start_backup",
+                              style: TextStyle(
+                                fontSize: 14,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ).tr(),
+                          ),
               ),
             )
           ],

mobile/lib/modules/backup/views/failed_backup_status_page.dart

@@ -0,0 +1,141 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/backup/providers/error_backup_list.provider.dart';
+import 'package:intl/intl.dart';
+import 'package:photo_manager/photo_manager.dart';
+
+class FailedBackupStatusPage extends HookConsumerWidget {
+  const FailedBackupStatusPage({Key? key}) : super(key: key);
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final errorBackupList = ref.watch(errorBackupListProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0,
+        title: Text(
+          "Failed Backup (${errorBackupList.length})",
+          style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+        ),
+        leading: IconButton(
+          onPressed: () {
+            AutoRouter.of(context).pop(true);
+          },
+          splashRadius: 24,
+          icon: const Icon(
+            Icons.arrow_back_ios_rounded,
+          ),
+        ),
+      ),
+      body: ListView.builder(
+        shrinkWrap: true,
+        itemCount: errorBackupList.length,
+        itemBuilder: ((context, index) {
+          var errorAsset = errorBackupList.elementAt(index);
+
+          return Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: 12.0,
+              vertical: 4,
+            ),
+            child: Card(
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(15), // if you need this
+                side: const BorderSide(
+                  color: Colors.black12,
+                  width: 1,
+                ),
+              ),
+              elevation: 0,
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  ConstrainedBox(
+                    constraints: const BoxConstraints(
+                      minWidth: 100,
+                      minHeight: 150,
+                      maxWidth: 100,
+                      maxHeight: 200,
+                    ),
+                    child: ClipRRect(
+                      borderRadius: const BorderRadius.only(
+                        bottomLeft: Radius.circular(15),
+                        topLeft: Radius.circular(15),
+                      ),
+                      clipBehavior: Clip.hardEdge,
+                      child: Image(
+                        fit: BoxFit.cover,
+                        image: AssetEntityImageProvider(
+                          errorAsset.asset,
+                          isOriginal: false,
+                          thumbnailSize: const ThumbnailSize.square(512),
+                          thumbnailFormat: ThumbnailFormat.jpeg,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.all(16.0),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: [
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Text(
+                                DateFormat.yMMMMd('en_US').format(
+                                  DateTime.parse(
+                                    errorAsset.createdAt.toString(),
+                                  ),
+                                ),
+                                style: TextStyle(
+                                  fontSize: 12,
+                                  fontWeight: FontWeight.w600,
+                                  color: Colors.grey[700],
+                                ),
+                              ),
+                              Icon(
+                                Icons.error,
+                                color: Colors.red.withAlpha(200),
+                                size: 18,
+                              ),
+                            ],
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.symmetric(vertical: 8.0),
+                            child: Text(
+                              errorAsset.fileName,
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                fontSize: 12,
+                                color: Theme.of(context).primaryColor,
+                              ),
+                            ),
+                          ),
+                          Text(
+                            errorAsset.errorMessage,
+                            style: TextStyle(
+                              fontSize: 12,
+                              fontWeight: FontWeight.w500,
+                              color: Colors.grey[800],
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            ),
+          );
+        }),
+      ),
+    );
+  }
+}

mobile/lib/modules/home/models/delete_asset_response.model.dart

@@ -1,52 +0,0 @@
-import 'dart:convert';
-
-class DeleteAssetResponse {
-  final String id;
-  final String status;
-
-  DeleteAssetResponse({
-    required this.id,
-    required this.status,
-  });
-
-  DeleteAssetResponse copyWith({
-    String? id,
-    String? status,
-  }) {
-    return DeleteAssetResponse(
-      id: id ?? this.id,
-      status: status ?? this.status,
-    );
-  }
-
-  Map<String, dynamic> toMap() {
-    return {
-      'id': id,
-      'status': status,
-    };
-  }
-
-  factory DeleteAssetResponse.fromMap(Map<String, dynamic> map) {
-    return DeleteAssetResponse(
-      id: map['id'] ?? '',
-      status: map['status'] ?? '',
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory DeleteAssetResponse.fromJson(String source) => DeleteAssetResponse.fromMap(json.decode(source));
-
-  @override
-  String toString() => 'DeleteAssetResponse(id: $id, status: $status)';
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-
-    return other is DeleteAssetResponse && other.id == id && other.status == status;
-  }
-
-  @override
-  int get hashCode => id.hashCode ^ status.hashCode;
-}

mobile/lib/modules/home/models/get_all_asset_response.model.dart

@@ -1,11 +1,9 @@
-import 'dart:convert';
-
 import 'package:flutter/foundation.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:openapi/api.dart';
 
 class ImmichAssetGroupByDate {
   final String date;
-  List<ImmichAsset> assets;
+  List<AssetResponseDto> assets;
   ImmichAssetGroupByDate({
     required this.date,
     required this.assets,
@@ -13,7 +11,7 @@ class ImmichAssetGroupByDate {
 
   ImmichAssetGroupByDate copyWith({
     String? date,
-    List<ImmichAsset>? assets,
+    List<AssetResponseDto>? assets,
   }) {
     return ImmichAssetGroupByDate(
       date: date ?? this.date,
@@ -21,24 +19,6 @@ class ImmichAssetGroupByDate {
     );
   }
 
-  Map<String, dynamic> toMap() {
-    return {
-      'date': date,
-      'assets': assets.map((x) => x.toMap()).toList(),
-    };
-  }
-
-  factory ImmichAssetGroupByDate.fromMap(Map<String, dynamic> map) {
-    return ImmichAssetGroupByDate(
-      date: map['date'] ?? '',
-      assets: List<ImmichAsset>.from(map['assets']?.map((x) => ImmichAsset.fromMap(x))),
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory ImmichAssetGroupByDate.fromJson(String source) => ImmichAssetGroupByDate.fromMap(json.decode(source));
-
   @override
   String toString() => 'ImmichAssetGroupByDate(date: $date, assets: $assets)';
 
@@ -46,7 +26,9 @@ class ImmichAssetGroupByDate {
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
 
-    return other is ImmichAssetGroupByDate && other.date == date && listEquals(other.assets, assets);
+    return other is ImmichAssetGroupByDate &&
+        other.date == date &&
+        listEquals(other.assets, assets);
   }
 
   @override
@@ -75,28 +57,9 @@ class GetAllAssetResponse {
     );
   }
 
-  Map<String, dynamic> toMap() {
-    return {
-      'count': count,
-      'data': data.map((x) => x.toMap()).toList(),
-      'nextPageKey': nextPageKey,
-    };
-  }
-
-  factory GetAllAssetResponse.fromMap(Map<String, dynamic> map) {
-    return GetAllAssetResponse(
-      count: map['count']?.toInt() ?? 0,
-      data: List<ImmichAssetGroupByDate>.from(map['data']?.map((x) => ImmichAssetGroupByDate.fromMap(x))),
-      nextPageKey: map['nextPageKey'] ?? '',
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory GetAllAssetResponse.fromJson(String source) => GetAllAssetResponse.fromMap(json.decode(source));
-
   @override
-  String toString() => 'GetAllAssetResponse(count: $count, data: $data, nextPageKey: $nextPageKey)';
+  String toString() =>
+      'GetAllAssetResponse(count: $count, data: $data, nextPageKey: $nextPageKey)';
 
   @override
   bool operator ==(Object other) {

mobile/lib/modules/home/models/home_page_state.model.dart

@@ -1,12 +1,10 @@
-import 'dart:convert';
-
 import 'package:collection/collection.dart';
 
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:openapi/api.dart';
 
 class HomePageState {
   final bool isMultiSelectEnable;
-  final Set<ImmichAsset> selectedItems;
+  final Set<AssetResponseDto> selectedItems;
   final Set<String> selectedDateGroup;
   HomePageState({
     required this.isMultiSelectEnable,
@@ -16,7 +14,7 @@ class HomePageState {
 
   HomePageState copyWith({
     bool? isMultiSelectEnable,
-    Set<ImmichAsset>? selectedItems,
+    Set<AssetResponseDto>? selectedItems,
     Set<String>? selectedDateGroup,
   }) {
     return HomePageState(
@@ -26,26 +24,6 @@ class HomePageState {
     );
   }
 
-  Map<String, dynamic> toMap() {
-    return {
-      'isMultiSelectEnable': isMultiSelectEnable,
-      'selectedItems': selectedItems.map((x) => x.toMap()).toList(),
-      'selectedDateGroup': selectedDateGroup.toList(),
-    };
-  }
-
-  factory HomePageState.fromMap(Map<String, dynamic> map) {
-    return HomePageState(
-      isMultiSelectEnable: map['isMultiSelectEnable'] ?? false,
-      selectedItems: Set<ImmichAsset>.from(map['selectedItems']?.map((x) => ImmichAsset.fromMap(x))),
-      selectedDateGroup: Set<String>.from(map['selectedDateGroup']),
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory HomePageState.fromJson(String source) => HomePageState.fromMap(json.decode(source));
-
   @override
   String toString() =>
       'HomePageState(isMultiSelectEnable: $isMultiSelectEnable, selectedItems: $selectedItems, selectedDateGroup: $selectedDateGroup)';
@@ -62,5 +40,8 @@ class HomePageState {
   }
 
   @override
-  int get hashCode => isMultiSelectEnable.hashCode ^ selectedItems.hashCode ^ selectedDateGroup.hashCode;
+  int get hashCode =>
+      isMultiSelectEnable.hashCode ^
+      selectedItems.hashCode ^
+      selectedDateGroup.hashCode;
 }

mobile/lib/modules/home/providers/home_page_state.provider.dart

@@ -1,6 +1,6 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/models/home_page_state.model.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:openapi/api.dart';
 
 class HomePageStateNotifier extends StateNotifier<HomePageState> {
   HomePageStateNotifier()
@@ -13,7 +13,9 @@ class HomePageStateNotifier extends StateNotifier<HomePageState> {
         );
 
   void addSelectedDateGroup(String dateGroupTitle) {
-    state = state.copyWith(selectedDateGroup: {...state.selectedDateGroup, dateGroupTitle});
+    state = state.copyWith(
+      selectedDateGroup: {...state.selectedDateGroup, dateGroupTitle},
+    );
   }
 
   void removeSelectedDateGroup(String dateGroupTitle) {
@@ -24,34 +26,39 @@ class HomePageStateNotifier extends StateNotifier<HomePageState> {
     state = state.copyWith(selectedDateGroup: currentDateGroup);
   }
 
-  void enableMultiSelect(Set<ImmichAsset> selectedItems) {
-    state = state.copyWith(isMultiSelectEnable: true, selectedItems: selectedItems);
+  void enableMultiSelect(Set<AssetResponseDto> selectedItems) {
+    state =
+        state.copyWith(isMultiSelectEnable: true, selectedItems: selectedItems);
   }
 
   void disableMultiSelect() {
-    state = state.copyWith(isMultiSelectEnable: false, selectedItems: {}, selectedDateGroup: {});
+    state = state.copyWith(
+      isMultiSelectEnable: false,
+      selectedItems: {},
+      selectedDateGroup: {},
+    );
   }
 
-  void addSingleSelectedItem(ImmichAsset asset) {
+  void addSingleSelectedItem(AssetResponseDto asset) {
     state = state.copyWith(selectedItems: {...state.selectedItems, asset});
   }
 
-  void addMultipleSelectedItems(List<ImmichAsset> assets) {
+  void addMultipleSelectedItems(List<AssetResponseDto> assets) {
     state = state.copyWith(selectedItems: {...state.selectedItems, ...assets});
   }
 
-  void removeSingleSelectedItem(ImmichAsset asset) {
-    Set<ImmichAsset> currentList = state.selectedItems;
+  void removeSingleSelectedItem(AssetResponseDto asset) {
+    Set<AssetResponseDto> currentList = state.selectedItems;
 
     currentList.removeWhere((e) => e.id == asset.id);
 
     state = state.copyWith(selectedItems: currentList);
   }
 
-  void removeMultipleSelectedItem(List<ImmichAsset> assets) {
-    Set<ImmichAsset> currentList = state.selectedItems;
+  void removeMultipleSelectedItem(List<AssetResponseDto> assets) {
+    Set<AssetResponseDto> currentList = state.selectedItems;
 
-    for (ImmichAsset asset in assets) {
+    for (AssetResponseDto asset in assets) {
       currentList.removeWhere((e) => e.id == asset.id);
     }
 
@@ -60,4 +67,6 @@ class HomePageStateNotifier extends StateNotifier<HomePageState> {
 }
 
 final homePageStateProvider =
-    StateNotifierProvider<HomePageStateNotifier, HomePageState>(((ref) => HomePageStateNotifier()));
+    StateNotifierProvider<HomePageStateNotifier, HomePageState>(
+  ((ref) => HomePageStateNotifier()),
+);

mobile/lib/modules/home/providers/upload_profile_image.provider.dart

@@ -50,37 +50,49 @@ class UploadProfileImageState {
 
   String toJson() => json.encode(toMap());
 
-  factory UploadProfileImageState.fromJson(String source) => UploadProfileImageState.fromMap(json.decode(source));
+  factory UploadProfileImageState.fromJson(String source) =>
+      UploadProfileImageState.fromMap(json.decode(source));
 
   @override
-  String toString() => 'UploadProfileImageState(status: $status, profileImagePath: $profileImagePath)';
+  String toString() =>
+      'UploadProfileImageState(status: $status, profileImagePath: $profileImagePath)';
 
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
 
-    return other is UploadProfileImageState && other.status == status && other.profileImagePath == profileImagePath;
+    return other is UploadProfileImageState &&
+        other.status == status &&
+        other.profileImagePath == profileImagePath;
   }
 
   @override
   int get hashCode => status.hashCode ^ profileImagePath.hashCode;
 }
 
-class UploadProfileImageNotifier extends StateNotifier<UploadProfileImageState> {
-  UploadProfileImageNotifier()
-      : super(UploadProfileImageState(
-          profileImagePath: '',
-          status: UploadProfileStatus.idle,
-        ));
+class UploadProfileImageNotifier
+    extends StateNotifier<UploadProfileImageState> {
+  UploadProfileImageNotifier(this._userSErvice)
+      : super(
+          UploadProfileImageState(
+            profileImagePath: '',
+            status: UploadProfileStatus.idle,
+          ),
+        );
+
+  final UserService _userSErvice;
 
   Future<bool> upload(XFile file) async {
     state = state.copyWith(status: UploadProfileStatus.loading);
 
-    var res = await UserService().uploadProfileImage(file);
+    var res = await _userSErvice.uploadProfileImage(file);
 
     if (res != null) {
       debugPrint("Succesfully upload profile image");
-      state = state.copyWith(status: UploadProfileStatus.success, profileImagePath: res.profileImagePath);
+      state = state.copyWith(
+        status: UploadProfileStatus.success,
+        profileImagePath: res.profileImagePath,
+      );
       return true;
     }
 
@@ -90,4 +102,6 @@ class UploadProfileImageNotifier extends StateNotifier<UploadProfileImageState>
 }
 
 final uploadProfileImageProvider =
-    StateNotifierProvider<UploadProfileImageNotifier, UploadProfileImageState>(((ref) => UploadProfileImageNotifier()));
+    StateNotifierProvider<UploadProfileImageNotifier, UploadProfileImageState>(
+  ((ref) => UploadProfileImageNotifier(ref.watch(userServiceProvider))),
+);

mobile/lib/modules/home/services/asset.service.dart

@@ -1,110 +1,51 @@
-import 'dart:convert';
+import 'dart:async';
 
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/modules/home/models/delete_asset_response.model.dart';
-import 'package:immich_mobile/modules/home/models/get_all_asset_response.model.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
-import 'package:immich_mobile/shared/models/immich_asset_with_exif.model.dart';
-import 'package:immich_mobile/shared/services/network.service.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
+import 'package:openapi/api.dart';
+
+final assetServiceProvider = Provider(
+  (ref) => AssetService(
+    ref.watch(apiServiceProvider),
+  ),
+);
 
 class AssetService {
-  final NetworkService _networkService = NetworkService();
+  final ApiService _apiService;
 
-  Future<List<ImmichAsset>?> getAllAsset() async {
-    var res = await _networkService.getRequest(url: "asset/");
+  AssetService(this._apiService);
+
+  Future<List<AssetResponseDto>?> getAllAsset() async {
     try {
-      List<dynamic> decodedData = jsonDecode(res.toString());
-
-      List<ImmichAsset> result = List.from(decodedData.map((a) => ImmichAsset.fromMap(a)));
-      return result;
+      return await _apiService.assetApi.getAllAssets();
     } catch (e) {
-      debugPrint("Error getAllAsset  ${e.toString()}");
-    }
-    return null;
-  }
-
-  Future<GetAllAssetResponse?> getAllAssetWithPagination() async {
-    var res = await _networkService.getRequest(url: "asset/all");
-    try {
-      Map<String, dynamic> decodedData = jsonDecode(res.toString());
-
-      GetAllAssetResponse result = GetAllAssetResponse.fromMap(decodedData);
-      return result;
-    } catch (e) {
-      debugPrint("Error getAllAsset  ${e.toString()}");
-    }
-    return null;
-  }
-
-  Future<GetAllAssetResponse?> getOlderAsset(String? nextPageKey) async {
-    try {
-      var res = await _networkService.getRequest(
-        url: "asset/all?nextPageKey=$nextPageKey",
-      );
-
-      Map<String, dynamic> decodedData = jsonDecode(res.toString());
-
-      GetAllAssetResponse result = GetAllAssetResponse.fromMap(decodedData);
-      if (result.count != 0) {
-        return result;
-      }
-    } catch (e) {
-      debugPrint("Error getAllAsset  ${e.toString()}");
-    }
-    return null;
-  }
-
-  Future<List<ImmichAsset>> getNewAsset(String latestDate) async {
-    try {
-      var res = await _networkService.getRequest(
-        url: "asset/new?latestDate=$latestDate",
-      );
-
-      List<dynamic> decodedData = jsonDecode(res.toString());
-
-      List<ImmichAsset> result = List.from(decodedData.map((a) => ImmichAsset.fromMap(a)));
-      if (result.isNotEmpty) {
-        return result;
-      }
-
-      return [];
-    } catch (e) {
-      debugPrint("Error getAllAsset  ${e.toString()}");
-      return [];
-    }
-  }
-
-  Future<ImmichAssetWithExif?> getAssetById(String assetId) async {
-    try {
-      var res = await _networkService.getRequest(
-        url: "asset/assetById/$assetId",
-      );
-
-      Map<String, dynamic> decodedData = jsonDecode(res.toString());
-
-      ImmichAssetWithExif result = ImmichAssetWithExif.fromMap(decodedData);
-      return result;
-    } catch (e) {
-      debugPrint("Error getAllAsset  ${e.toString()}");
+      debugPrint("Error [getAllAsset]  ${e.toString()}");
       return null;
     }
   }
 
-  Future<List<DeleteAssetResponse>?> deleteAssets(Set<ImmichAsset> deleteAssets) async {
+  Future<AssetResponseDto?> getAssetById(String assetId) async {
     try {
-      var payload = [];
+      return await _apiService.assetApi.getAssetById(assetId);
+    } catch (e) {
+      debugPrint("Error [getAssetById]  ${e.toString()}");
+      return null;
+    }
+  }
+
+  Future<List<DeleteAssetResponseDto>?> deleteAssets(
+    Set<AssetResponseDto> deleteAssets,
+  ) async {
+    try {
+      List<String> payload = [];
 
       for (var asset in deleteAssets) {
         payload.add(asset.id);
       }
 
-      var res = await _networkService.deleteRequest(url: "asset/", data: {"ids": payload});
-
-      List<dynamic> decodedData = jsonDecode(res.toString());
-
-      List<DeleteAssetResponse> result = List.from(decodedData.map((a) => DeleteAssetResponse.fromMap(a)));
-
-      return result;
+      return await _apiService.assetApi
+          .deleteAsset(DeleteAssetDto(ids: payload));
     } catch (e) {
       debugPrint("Error getAllAsset  ${e.toString()}");
       return null;

mobile/lib/modules/home/ui/control_bottom_app_bar.dart

@@ -1,3 +1,4 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/modules/home/ui/delete_diaglog.dart';
 
@@ -13,7 +14,10 @@ class ControlBottomAppBar extends StatelessWidget {
         width: MediaQuery.of(context).size.width,
         height: MediaQuery.of(context).size.height * 0.15,
         decoration: BoxDecoration(
-          borderRadius: const BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
+          borderRadius: const BorderRadius.only(
+            topLeft: Radius.circular(15),
+            topRight: Radius.circular(15),
+          ),
           color: Colors.grey[300]?.withOpacity(0.98),
         ),
         child: Column(
@@ -25,7 +29,7 @@ class ControlBottomAppBar extends StatelessWidget {
                 children: [
                   ControlBoxButton(
                     iconData: Icons.delete_forever_rounded,
-                    label: "Delete",
+                    label: "control_bottom_app_bar_delete".tr(),
                     onPressed: () {
                       showDialog(
                         context: context,
@@ -46,8 +50,12 @@ class ControlBottomAppBar extends StatelessWidget {
 }
 
 class ControlBoxButton extends StatelessWidget {
-  const ControlBoxButton({Key? key, required this.label, required this.iconData, required this.onPressed})
-      : super(key: key);
+  const ControlBoxButton({
+    Key? key,
+    required this.label,
+    required this.iconData,
+    required this.onPressed,
+  }) : super(key: key);
 
   final String label;
   final IconData iconData;

mobile/lib/modules/home/ui/daily_title_text.dart

@@ -1,8 +1,8 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
-import 'package:intl/intl.dart';
+import 'package:openapi/api.dart';
 
 class DailyTitleText extends ConsumerWidget {
   const DailyTitleText({
@@ -12,15 +12,19 @@ class DailyTitleText extends ConsumerWidget {
   }) : super(key: key);
 
   final String isoDate;
-  final List<ImmichAsset> assetGroup;
+  final List<AssetResponseDto> assetGroup;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     var currentYear = DateTime.now().year;
     var groupYear = DateTime.parse(isoDate).year;
-    var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
-    var dateText = DateFormat(formatDateTemplate).format(DateTime.parse(isoDate));
-    var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable;
+    var formatDateTemplate = currentYear == groupYear
+        ? "daily_title_text_date".tr()
+        : "daily_title_text_date_year".tr();
+    var dateText =
+        DateFormat(formatDateTemplate).format(DateTime.parse(isoDate));
+    var isMultiSelectEnable =
+        ref.watch(homePageStateProvider).isMultiSelectEnable;
     var selectedDateGroup = ref.watch(homePageStateProvider).selectedDateGroup;
     var selectedItems = ref.watch(homePageStateProvider).selectedItems;
 
@@ -35,23 +39,46 @@ class DailyTitleText extends ConsumerWidget {
           selectedDateGroup.contains(dateText) &&
           selectedItems.length != assetGroup.length) {
         // Multi select is active - click again on the icon while it is not the only active group -> remove that group from selected group/items
-        ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
-        ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
-      } else if (isMultiSelectEnable && selectedDateGroup.contains(dateText) && selectedDateGroup.length > 1) {
-        ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText);
-        ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup);
+        ref
+            .watch(homePageStateProvider.notifier)
+            .removeSelectedDateGroup(dateText);
+        ref
+            .watch(homePageStateProvider.notifier)
+            .removeMultipleSelectedItem(assetGroup);
+      } else if (isMultiSelectEnable &&
+          selectedDateGroup.contains(dateText) &&
+          selectedDateGroup.length > 1) {
+        ref
+            .watch(homePageStateProvider.notifier)
+            .removeSelectedDateGroup(dateText);
+        ref
+            .watch(homePageStateProvider.notifier)
+            .removeMultipleSelectedItem(assetGroup);
       } else if (isMultiSelectEnable && !selectedDateGroup.contains(dateText)) {
-        ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
-        ref.watch(homePageStateProvider.notifier).addMultipleSelectedItems(assetGroup);
+        ref
+            .watch(homePageStateProvider.notifier)
+            .addSelectedDateGroup(dateText);
+        ref
+            .watch(homePageStateProvider.notifier)
+            .addMultipleSelectedItems(assetGroup);
       } else {
-        ref.watch(homePageStateProvider.notifier).enableMultiSelect(assetGroup.toSet());
-        ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText);
+        ref
+            .watch(homePageStateProvider.notifier)
+            .enableMultiSelect(assetGroup.toSet());
+        ref
+            .watch(homePageStateProvider.notifier)
+            .addSelectedDateGroup(dateText);
       }
     }
 
     return SliverToBoxAdapter(
       child: Padding(
-        padding: const EdgeInsets.only(top: 29.0, bottom: 29.0, left: 12.0, right: 12.0),
+        padding: const EdgeInsets.only(
+          top: 29.0,
+          bottom: 29.0,
+          left: 12.0,
+          right: 12.0,
+        ),
         child: Row(
           children: [
             Text(

mobile/lib/modules/home/ui/delete_diaglog.dart

@@ -1,3 +1,4 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
@@ -13,29 +14,31 @@ class DeleteDialog extends ConsumerWidget {
     return AlertDialog(
       backgroundColor: Colors.grey[200],
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-      title: const Text("Delete Permanently"),
-      content: const Text("These items will be permanently deleted from Immich and from your device"),
+      title: const Text("delete_dialog_title").tr(),
+      content: const Text("delete_dialog_alert").tr(),
       actions: [
         TextButton(
           onPressed: () {
             Navigator.of(context).pop();
           },
           child: const Text(
-            "Cancel",
+            "delete_dialog_cancel",
             style: TextStyle(color: Colors.blueGrey),
-          ),
+          ).tr(),
         ),
         TextButton(
           onPressed: () {
-            ref.watch(assetProvider.notifier).deleteAssets(homePageState.selectedItems);
+            ref
+                .watch(assetProvider.notifier)
+                .deleteAssets(homePageState.selectedItems);
             ref.watch(homePageStateProvider.notifier).disableMultiSelect();
 
             Navigator.of(context).pop();
           },
           child: Text(
-            "Delete",
+            "delete_dialog_ok",
             style: TextStyle(color: Colors.red[400]),
-          ),
+          ).tr(),
         ),
       ],
     );

mobile/lib/modules/home/ui/disable_multi_select_button.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart';
 
 class DisableMultiSelectButton extends ConsumerWidget {
   const DisableMultiSelectButton({
@@ -30,14 +29,18 @@ class DisableMultiSelectButton extends ConsumerWidget {
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 4.0),
               child: TextButton.icon(
-                  onPressed: () {
-                    onPressed();
-                  },
-                  icon: const Icon(Icons.close_rounded),
-                  label: Text(
-                    selectedItemCount.toString(),
-                    style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
-                  )),
+                onPressed: () {
+                  onPressed();
+                },
+                icon: const Icon(Icons.close_rounded),
+                label: Text(
+                  '$selectedItemCount',
+                  style: const TextStyle(
+                    fontWeight: FontWeight.w600,
+                    fontSize: 18,
+                  ),
+                ),
+              ),
             ),
           ),
         ),

mobile/lib/modules/home/ui/draggable_scrollbar.dart

@@ -81,7 +81,8 @@ class DraggableScrollbar extends StatefulWidget {
     this.labelTextBuilder,
     this.labelConstraints,
   })  : assert(child.scrollDirection == Axis.vertical),
-        scrollThumbBuilder = _thumbRRectBuilder(scrollThumbKey, alwaysVisibleScrollThumb),
+        scrollThumbBuilder =
+            _thumbRRectBuilder(scrollThumbKey, alwaysVisibleScrollThumb),
         super(key: key);
 
   DraggableScrollbar.arrows({
@@ -98,7 +99,8 @@ class DraggableScrollbar extends StatefulWidget {
     this.labelTextBuilder,
     this.labelConstraints,
   })  : assert(child.scrollDirection == Axis.vertical),
-        scrollThumbBuilder = _thumbArrowBuilder(scrollThumbKey, alwaysVisibleScrollThumb),
+        scrollThumbBuilder =
+            _thumbArrowBuilder(scrollThumbKey, alwaysVisibleScrollThumb),
         super(key: key);
 
   DraggableScrollbar.semicircle({
@@ -115,20 +117,25 @@ class DraggableScrollbar extends StatefulWidget {
     this.labelTextBuilder,
     this.labelConstraints,
   })  : assert(child.scrollDirection == Axis.vertical),
-        scrollThumbBuilder = _thumbSemicircleBuilder(heightScrollThumb * 0.6, scrollThumbKey, alwaysVisibleScrollThumb),
+        scrollThumbBuilder = _thumbSemicircleBuilder(
+          heightScrollThumb * 0.6,
+          scrollThumbKey,
+          alwaysVisibleScrollThumb,
+        ),
         super(key: key);
 
   @override
-  _DraggableScrollbarState createState() => _DraggableScrollbarState();
+  DraggableScrollbarState createState() => DraggableScrollbarState();
 
-  static buildScrollThumbAndLabel(
-      {required Widget scrollThumb,
-      required Color backgroundColor,
-      required Animation<double>? thumbAnimation,
-      required Animation<double>? labelAnimation,
-      required Text? labelText,
-      required BoxConstraints? labelConstraints,
-      required bool alwaysVisibleScrollThumb}) {
+  static buildScrollThumbAndLabel({
+    required Widget scrollThumb,
+    required Color backgroundColor,
+    required Animation<double>? thumbAnimation,
+    required Animation<double>? labelAnimation,
+    required Text? labelText,
+    required BoxConstraints? labelConstraints,
+    required bool alwaysVisibleScrollThumb,
+  }) {
     var scrollThumbAndLabel = labelText == null
         ? scrollThumb
         : Row(
@@ -137,9 +144,9 @@ class DraggableScrollbar extends StatefulWidget {
             children: [
               ScrollLabel(
                 animation: labelAnimation,
-                child: labelText,
                 backgroundColor: backgroundColor,
                 constraints: labelConstraints,
+                child: labelText,
               ),
               scrollThumb,
             ],
@@ -154,7 +161,11 @@ class DraggableScrollbar extends StatefulWidget {
     );
   }
 
-  static ScrollThumbBuilder _thumbSemicircleBuilder(double width, Key? scrollThumbKey, bool alwaysVisibleScrollThumb) {
+  static ScrollThumbBuilder _thumbSemicircleBuilder(
+    double width,
+    Key? scrollThumbKey,
+    bool alwaysVisibleScrollThumb,
+  ) {
     return (
       Color backgroundColor,
       Animation<double> thumbAnimation,
@@ -168,9 +179,6 @@ class DraggableScrollbar extends StatefulWidget {
         foregroundPainter: ArrowCustomPainter(Colors.white),
         child: Material(
           elevation: 4.0,
-          child: Container(
-            constraints: BoxConstraints.tight(Size(width, height)),
-          ),
           color: backgroundColor,
           borderRadius: BorderRadius.only(
             topLeft: Radius.circular(height),
@@ -178,6 +186,9 @@ class DraggableScrollbar extends StatefulWidget {
             topRight: const Radius.circular(4.0),
             bottomRight: const Radius.circular(4.0),
           ),
+          child: Container(
+            constraints: BoxConstraints.tight(Size(width, height)),
+          ),
         ),
       );
 
@@ -193,7 +204,10 @@ class DraggableScrollbar extends StatefulWidget {
     };
   }
 
-  static ScrollThumbBuilder _thumbArrowBuilder(Key? scrollThumbKey, bool alwaysVisibleScrollThumb) {
+  static ScrollThumbBuilder _thumbArrowBuilder(
+    Key? scrollThumbKey,
+    bool alwaysVisibleScrollThumb,
+  ) {
     return (
       Color backgroundColor,
       Animation<double> thumbAnimation,
@@ -203,6 +217,7 @@ class DraggableScrollbar extends StatefulWidget {
       BoxConstraints? labelConstraints,
     }) {
       final scrollThumb = ClipPath(
+        clipper: ArrowClipper(),
         child: Container(
           height: height,
           width: 20.0,
@@ -213,7 +228,6 @@ class DraggableScrollbar extends StatefulWidget {
             ),
           ),
         ),
-        clipper: ArrowClipper(),
       );
 
       return buildScrollThumbAndLabel(
@@ -228,7 +242,10 @@ class DraggableScrollbar extends StatefulWidget {
     };
   }
 
-  static ScrollThumbBuilder _thumbRRectBuilder(Key? scrollThumbKey, bool alwaysVisibleScrollThumb) {
+  static ScrollThumbBuilder _thumbRRectBuilder(
+    Key? scrollThumbKey,
+    bool alwaysVisibleScrollThumb,
+  ) {
     return (
       Color backgroundColor,
       Animation<double> thumbAnimation,
@@ -239,13 +256,13 @@ class DraggableScrollbar extends StatefulWidget {
     }) {
       final scrollThumb = Material(
         elevation: 4.0,
+        color: backgroundColor,
+        borderRadius: const BorderRadius.all(Radius.circular(7.0)),
         child: Container(
           constraints: BoxConstraints.tight(
             Size(16.0, height),
           ),
         ),
-        color: backgroundColor,
-        borderRadius: const BorderRadius.all(Radius.circular(7.0)),
       );
 
       return buildScrollThumbAndLabel(
@@ -267,7 +284,8 @@ class ScrollLabel extends StatelessWidget {
   final Text child;
 
   final BoxConstraints? constraints;
-  static const BoxConstraints _defaultConstraints = BoxConstraints.tightFor(width: 72.0, height: 28.0);
+  static const BoxConstraints _defaultConstraints =
+      BoxConstraints.tightFor(width: 72.0, height: 28.0);
 
   const ScrollLabel({
     Key? key,
@@ -298,7 +316,8 @@ class ScrollLabel extends StatelessWidget {
   }
 }
 
-class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProviderStateMixin {
+class DraggableScrollbarState extends State<DraggableScrollbar>
+    with TickerProviderStateMixin {
   late double _barOffset;
   late double _viewOffset;
   late bool _isDragInProcess;
@@ -345,7 +364,8 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
     super.dispose();
   }
 
-  double get barMaxScrollExtent => context.size!.height - widget.heightScrollThumb;
+  double get barMaxScrollExtent =>
+      context.size!.height - widget.heightScrollThumb;
 
   double get barMinScrollExtent => 0;
 
@@ -362,42 +382,45 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
       );
     }
 
-    return LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
-      //print("LayoutBuilder constraints=$constraints");
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        //print("LayoutBuilder constraints=$constraints");
 
-      return NotificationListener<ScrollNotification>(
-        onNotification: (ScrollNotification notification) {
-          changePosition(notification);
-          return false;
-        },
-        child: Stack(
-          children: <Widget>[
-            RepaintBoundary(
-              child: widget.child,
-            ),
-            RepaintBoundary(
+        return NotificationListener<ScrollNotification>(
+          onNotification: (ScrollNotification notification) {
+            changePosition(notification);
+            return false;
+          },
+          child: Stack(
+            children: <Widget>[
+              RepaintBoundary(
+                child: widget.child,
+              ),
+              RepaintBoundary(
                 child: GestureDetector(
-              onVerticalDragStart: _onVerticalDragStart,
-              onVerticalDragUpdate: _onVerticalDragUpdate,
-              onVerticalDragEnd: _onVerticalDragEnd,
-              child: Container(
-                alignment: Alignment.topRight,
-                margin: EdgeInsets.only(top: _barOffset),
-                padding: widget.padding,
-                child: widget.scrollThumbBuilder(
-                  widget.backgroundColor,
-                  _thumbAnimation,
-                  _labelAnimation,
-                  widget.heightScrollThumb,
-                  labelText: labelText,
-                  labelConstraints: widget.labelConstraints,
+                  onVerticalDragStart: _onVerticalDragStart,
+                  onVerticalDragUpdate: _onVerticalDragUpdate,
+                  onVerticalDragEnd: _onVerticalDragEnd,
+                  child: Container(
+                    alignment: Alignment.topRight,
+                    margin: EdgeInsets.only(top: _barOffset),
+                    padding: widget.padding,
+                    child: widget.scrollThumbBuilder(
+                      widget.backgroundColor,
+                      _thumbAnimation,
+                      _labelAnimation,
+                      widget.heightScrollThumb,
+                      labelText: labelText,
+                      labelConstraints: widget.labelConstraints,
+                    ),
+                  ),
                 ),
               ),
-            )),
-          ],
-        ),
-      );
-    });
+            ],
+          ),
+        );
+      },
+    );
   }
 
   //scroll bar has received notification that it's view was scrolled
@@ -432,7 +455,8 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
         }
       }
 
-      if (notification is ScrollUpdateNotification || notification is OverscrollNotification) {
+      if (notification is ScrollUpdateNotification ||
+          notification is OverscrollNotification) {
         if (_thumbAnimationController.status != AnimationStatus.forward) {
           _thumbAnimationController.forward();
         }
@@ -486,7 +510,11 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
           _barOffset = barMaxScrollExtent;
         }
 
-        double viewDelta = getScrollViewDelta(details.delta.dy, barMaxScrollExtent, viewMaxScrollExtent);
+        double viewDelta = getScrollViewDelta(
+          details.delta.dy,
+          barMaxScrollExtent,
+          viewMaxScrollExtent,
+        );
 
         _viewOffset = widget.controller.position.pixels + viewDelta;
         if (_viewOffset < widget.controller.position.minScrollExtent) {
@@ -566,7 +594,10 @@ class ArrowClipper extends CustomClipper<Path> {
     path.lineTo(startPointX + arrowWidth / 2, startPointY - arrowWidth / 2);
     path.lineTo(startPointX + arrowWidth, startPointY);
     path.lineTo(startPointX + arrowWidth, startPointY + 1.0);
-    path.lineTo(startPointX + arrowWidth / 2, startPointY - arrowWidth / 2 + 1.0);
+    path.lineTo(
+      startPointX + arrowWidth / 2,
+      startPointY - arrowWidth / 2 + 1.0,
+    );
     path.lineTo(startPointX, startPointY + 1.0);
     path.close();
 
@@ -575,7 +606,10 @@ class ArrowClipper extends CustomClipper<Path> {
     path.lineTo(startPointX + arrowWidth / 2, startPointY + arrowWidth / 2);
     path.lineTo(startPointX, startPointY);
     path.lineTo(startPointX, startPointY - 1.0);
-    path.lineTo(startPointX + arrowWidth / 2, startPointY + arrowWidth / 2 - 1.0);
+    path.lineTo(
+      startPointX + arrowWidth / 2,
+      startPointY + arrowWidth / 2 - 1.0,
+    );
     path.lineTo(startPointX + arrowWidth, startPointY - 1.0);
     path.close();
 
@@ -600,7 +634,8 @@ class SlideFadeTransition extends StatelessWidget {
   Widget build(BuildContext context) {
     return AnimatedBuilder(
       animation: animation,
-      builder: (context, child) => animation.value == 0.0 ? Container() : child!,
+      builder: (context, child) =>
+          animation.value == 0.0 ? const SizedBox() : child!,
       child: SlideTransition(
         position: Tween(
           begin: const Offset(0.3, 0.0),

mobile/lib/modules/home/ui/image_grid.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/home/ui/thumbnail_image.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:openapi/api.dart';
 
 class ImageGrid extends ConsumerWidget {
-  final List<ImmichAsset> assetGroup;
+  final List<AssetResponseDto> assetGroup;
 
   const ImageGrid({Key? key, required this.assetGroup}) : super(key: key);
 
@@ -25,27 +25,26 @@ class ImageGrid extends ConsumerWidget {
             child: Stack(
               children: [
                 ThumbnailImage(asset: assetGroup[index]),
-                assetType == 'IMAGE'
-                    ? Container()
-                    : Positioned(
-                        top: 5,
-                        right: 5,
-                        child: Row(
-                          children: [
-                            Text(
-                              assetGroup[index].duration.toString().substring(0, 7),
-                              style: const TextStyle(
-                                color: Colors.white,
-                                fontSize: 10,
-                              ),
-                            ),
-                            const Icon(
-                              Icons.play_circle_outline_rounded,
-                              color: Colors.white,
-                            ),
-                          ],
+                if (assetType != AssetTypeEnum.IMAGE)
+                  Positioned(
+                    top: 5,
+                    right: 5,
+                    child: Row(
+                      children: [
+                        Text(
+                          assetGroup[index].duration.toString().substring(0, 7),
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 10,
+                          ),
                         ),
-                      )
+                        const Icon(
+                          Icons.play_circle_outline_rounded,
+                          color: Colors.white,
+                        ),
+                      ],
+                    ),
+                  ),
               ],
             ),
           );

mobile/lib/modules/home/ui/immich_sliver_appbar.dart

@@ -20,16 +20,19 @@ class ImmichSliverAppBar extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final BackUpState _backupState = ref.watch(backupProvider);
-    bool _isEnableAutoBackup = ref.watch(authenticationProvider).deviceInfo.isAutoBackup;
-    final ServerInfoState _serverInfoState = ref.watch(serverInfoProvider);
+    final BackUpState backupState = ref.watch(backupProvider);
+    bool isEnableAutoBackup =
+        ref.watch(authenticationProvider).deviceInfo.isAutoBackup;
+    final ServerInfoState serverInfoState = ref.watch(serverInfoProvider);
 
     return SliverAppBar(
       centerTitle: true,
       floating: true,
       pinned: false,
       snap: false,
-      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.all(Radius.circular(5)),
+      ),
       leading: Builder(
         builder: (BuildContext context) {
           return Stack(
@@ -47,30 +50,29 @@ class ImmichSliverAppBar extends ConsumerWidget {
                   },
                 ),
               ),
-              _serverInfoState.isVersionMismatch
-                  ? Positioned(
-                      bottom: 12,
-                      right: 12,
-                      child: GestureDetector(
-                        onTap: () => Scaffold.of(context).openDrawer(),
-                        child: Material(
-                          color: Colors.grey[200],
-                          elevation: 1,
-                          shape: RoundedRectangleBorder(
-                            borderRadius: BorderRadius.circular(50.0),
-                          ),
-                          child: const Padding(
-                            padding: EdgeInsets.all(2.0),
-                            child: Icon(
-                              Icons.info,
-                              color: Color.fromARGB(255, 243, 188, 106),
-                              size: 15,
-                            ),
-                          ),
+              if (serverInfoState.isVersionMismatch)
+                Positioned(
+                  bottom: 12,
+                  right: 12,
+                  child: GestureDetector(
+                    onTap: () => Scaffold.of(context).openDrawer(),
+                    child: Material(
+                      color: Colors.grey[200],
+                      elevation: 1,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(50.0),
+                      ),
+                      child: const Padding(
+                        padding: EdgeInsets.all(2.0),
+                        child: Icon(
+                          Icons.info,
+                          color: Color.fromARGB(255, 243, 188, 106),
+                          size: 15,
                         ),
                       ),
-                    )
-                  : Container(),
+                    ),
+                  ),
+                ),
             ],
           );
         },
@@ -88,24 +90,25 @@ class ImmichSliverAppBar extends ConsumerWidget {
         Stack(
           alignment: AlignmentDirectional.center,
           children: [
-            _backupState.backupProgress == BackUpProgressEnum.inProgress
-                ? Positioned(
-                    top: 10,
-                    right: 12,
-                    child: SizedBox(
-                      height: 8,
-                      width: 8,
-                      child: CircularProgressIndicator(
-                        strokeWidth: 1,
-                        valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
-                      ),
+            if (backupState.backupProgress == BackUpProgressEnum.inProgress)
+              Positioned(
+                top: 10,
+                right: 12,
+                child: SizedBox(
+                  height: 8,
+                  width: 8,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 1,
+                    valueColor: AlwaysStoppedAnimation<Color>(
+                      Theme.of(context).primaryColor,
                     ),
-                  )
-                : Container(),
+                  ),
+                ),
+              ),
             IconButton(
               splashRadius: 25,
               iconSize: 30,
-              icon: _isEnableAutoBackup
+              icon: isEnableAutoBackup
                   ? const Icon(Icons.backup_rounded)
                   : Badge(
                       padding: const EdgeInsets.all(4),
@@ -116,25 +119,26 @@ class ImmichSliverAppBar extends ConsumerWidget {
                         Icons.cloud_off_rounded,
                         size: 8,
                       ),
-                      child: const Icon(Icons.backup_rounded)),
+                      child: const Icon(Icons.backup_rounded),
+                    ),
               onPressed: () async {
-                var onPop = await AutoRouter.of(context).push(const BackupControllerRoute());
+                var onPop = await AutoRouter.of(context)
+                    .push(const BackupControllerRoute());
 
                 if (onPop != null && onPop == true) {
                   onPopBack!();
                 }
               },
             ),
-            _backupState.backupProgress == BackUpProgressEnum.inProgress
-                ? Positioned(
-                    bottom: 5,
-                    child: Text(
-                      (_backupState.allUniqueAssets.length - _backupState.selectedAlbumsBackupAssetsIds.length)
-                          .toString(),
-                      style: const TextStyle(fontSize: 9, fontWeight: FontWeight.bold),
-                    ),
-                  )
-                : Container()
+            if (backupState.backupProgress == BackUpProgressEnum.inProgress)
+              Positioned(
+                bottom: 5,
+                child: Text(
+                  '${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length}',
+                  style:
+                      const TextStyle(fontSize: 9, fontWeight: FontWeight.bold),
+                ),
+              ),
           ],
         ),
       ],

mobile/lib/modules/home/ui/monthly_title_text.dart

@@ -1,5 +1,5 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 
 class MonthlyTitleText extends StatelessWidget {
   const MonthlyTitleText({
@@ -11,7 +11,8 @@ class MonthlyTitleText extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var monthTitleText = DateFormat('MMMM y').format(DateTime.parse(isoDate));
+    var monthTitleText = DateFormat("monthly_title_text_date_format".tr())
+        .format(DateTime.parse(isoDate));
 
     return SliverToBoxAdapter(
       child: Padding(

mobile/lib/modules/home/ui/profile_drawer.dart

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hive_flutter/hive_flutter.dart';
@@ -6,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/home/providers/upload_profile_image.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
@@ -23,9 +25,10 @@ class ProfileDrawer extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     String endpoint = Hive.box(userInfoBox).get(serverEndpointKey);
-    AuthenticationState _authState = ref.watch(authenticationProvider);
-    ServerInfoState _serverInfoState = ref.watch(serverInfoProvider);
-    final uploadProfileImageStatus = ref.watch(uploadProfileImageProvider).status;
+    AuthenticationState authState = ref.watch(authenticationProvider);
+    ServerInfoState serverInfoState = ref.watch(serverInfoProvider);
+    final uploadProfileImageStatus =
+        ref.watch(uploadProfileImageProvider).status;
     final appInfo = useState({});
     var dummmy = Random().nextInt(1024);
 
@@ -39,7 +42,7 @@ class ProfileDrawer extends HookConsumerWidget {
     }
 
     _buildUserProfileImage() {
-      if (_authState.profileImagePath.isEmpty) {
+      if (authState.profileImagePath.isEmpty) {
         return const CircleAvatar(
           radius: 35,
           backgroundImage: AssetImage('assets/immich-logo-no-outline.png'),
@@ -48,10 +51,12 @@ class ProfileDrawer extends HookConsumerWidget {
       }
 
       if (uploadProfileImageStatus == UploadProfileStatus.idle) {
-        if (_authState.profileImagePath.isNotEmpty) {
+        if (authState.profileImagePath.isNotEmpty) {
           return CircleAvatar(
             radius: 35,
-            backgroundImage: NetworkImage('$endpoint/user/profile-image/${_authState.userId}?d=${dummmy++}'),
+            backgroundImage: NetworkImage(
+              '$endpoint/user/profile-image/${authState.userId}?d=${dummmy++}',
+            ),
             backgroundColor: Colors.transparent,
           );
         } else {
@@ -66,7 +71,9 @@ class ProfileDrawer extends HookConsumerWidget {
       if (uploadProfileImageStatus == UploadProfileStatus.success) {
         return CircleAvatar(
           radius: 35,
-          backgroundImage: NetworkImage('$endpoint/user/profile-image/${_authState.userId}?d=${dummmy++}'),
+          backgroundImage: NetworkImage(
+            '$endpoint/user/profile-image/${authState.userId}?d=${dummmy++}',
+          ),
           backgroundColor: Colors.transparent,
         );
       }
@@ -83,28 +90,36 @@ class ProfileDrawer extends HookConsumerWidget {
         return const ImmichLoadingIndicator();
       }
 
-      return Container();
+      return const SizedBox();
     }
 
     _pickUserProfileImage() async {
-      final XFile? image = await ImagePicker().pickImage(source: ImageSource.gallery, maxHeight: 1024, maxWidth: 1024);
+      final XFile? image = await ImagePicker().pickImage(
+        source: ImageSource.gallery,
+        maxHeight: 1024,
+        maxWidth: 1024,
+      );
 
       if (image != null) {
-        var success = await ref.watch(uploadProfileImageProvider.notifier).upload(image);
+        var success =
+            await ref.watch(uploadProfileImageProvider.notifier).upload(image);
 
         if (success) {
-          ref
-              .watch(authenticationProvider.notifier)
-              .updateUserProfileImagePath(ref.read(uploadProfileImageProvider).profileImagePath);
+          ref.watch(authenticationProvider.notifier).updateUserProfileImagePath(
+                ref.read(uploadProfileImageProvider).profileImagePath,
+              );
         }
       }
     }
 
-    useEffect(() {
-      _getPackageInfo();
-      _buildUserProfileImage();
-      return null;
-    }, []);
+    useEffect(
+      () {
+        _getPackageInfo();
+        _buildUserProfileImage();
+        return null;
+      },
+      [],
+    );
     return Drawer(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -116,7 +131,10 @@ class ProfileDrawer extends HookConsumerWidget {
               DrawerHeader(
                 decoration: const BoxDecoration(
                   gradient: LinearGradient(
-                    colors: [Color.fromARGB(255, 216, 219, 238), Color.fromARGB(255, 226, 230, 231)],
+                    colors: [
+                      Color.fromARGB(255, 216, 219, 238),
+                      Color.fromARGB(255, 226, 230, 231)
+                    ],
                     begin: Alignment.centerRight,
                     end: Alignment.centerLeft,
                   ),
@@ -154,7 +172,7 @@ class ProfileDrawer extends HookConsumerWidget {
                       ],
                     ),
                     Text(
-                      "${_authState.firstName} ${_authState.lastName}",
+                      "${authState.firstName} ${authState.lastName}",
                       style: TextStyle(
                         color: Theme.of(context).primaryColor,
                         fontWeight: FontWeight.bold,
@@ -162,7 +180,7 @@ class ProfileDrawer extends HookConsumerWidget {
                       ),
                     ),
                     Text(
-                      _authState.userEmail,
+                      authState.userEmail,
                       style: TextStyle(color: Colors.grey[800], fontSize: 12),
                     )
                   ],
@@ -175,17 +193,23 @@ class ProfileDrawer extends HookConsumerWidget {
                   color: Colors.black54,
                 ),
                 title: const Text(
-                  "Sign Out",
-                  style: TextStyle(color: Colors.black54, fontSize: 14, fontWeight: FontWeight.bold),
-                ),
+                  "profile_drawer_sign_out",
+                  style: TextStyle(
+                    color: Colors.black54,
+                    fontSize: 14,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ).tr(),
                 onTap: () async {
-                  bool res = await ref.read(authenticationProvider.notifier).logout();
+                  bool res =
+                      await ref.watch(authenticationProvider.notifier).logout();
 
                   if (res) {
                     ref.watch(backupProvider.notifier).cancelBackup();
                     ref.watch(assetProvider.notifier).clearAllAsset();
                     ref.watch(websocketProvider.notifier).disconnect();
-                    AutoRouter.of(context).popUntilRoot();
+                    // AutoRouter.of(context).popUntilRoot();
+                    AutoRouter.of(context).replace(const LoginRoute());
                   }
                 },
               )
@@ -204,19 +228,23 @@ class ProfileDrawer extends HookConsumerWidget {
                 ),
               ),
               child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8),
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                     Padding(
                       padding: const EdgeInsets.all(8.0),
                       child: Text(
-                        _serverInfoState.isVersionMismatch
-                            ? _serverInfoState.versionMismatchErrorMessage
-                            : "Client and Server are up-to-date",
+                        serverInfoState.isVersionMismatch
+                            ? serverInfoState.versionMismatchErrorMessage
+                            : "profile_drawer_client_server_up_to_date".tr(),
                         textAlign: TextAlign.center,
-                        style:
-                            TextStyle(fontSize: 11, color: Theme.of(context).primaryColor, fontWeight: FontWeight.w600),
+                        style: TextStyle(
+                          fontSize: 11,
+                          color: Theme.of(context).primaryColor,
+                          fontWeight: FontWeight.w600,
+                        ),
                       ),
                     ),
                     const Divider(),
@@ -254,7 +282,7 @@ class ProfileDrawer extends HookConsumerWidget {
                           ),
                         ),
                         Text(
-                          "${_serverInfoState.serverVersion.major}.${_serverInfoState.serverVersion.minor}.${_serverInfoState.serverVersion.patch}",
+                          "${serverInfoState.serverVersion.major}.${serverInfoState.serverVersion.minor}.${serverInfoState.serverVersion.patch_}",
                           style: TextStyle(
                             fontSize: 11,
                             color: Colors.grey[500],

mobile/lib/modules/home/ui/thumbnail_image.dart

@@ -8,11 +8,11 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
 import 'package:immich_mobile/routing/router.dart';
+import 'package:openapi/api.dart';
 
 class ThumbnailImage extends HookConsumerWidget {
-  final ImmichAsset asset;
+  final AssetResponseDto asset;
 
   const ThumbnailImage({Key? key, required this.asset}) : super(key: key);
 
@@ -22,13 +22,13 @@ class ThumbnailImage extends HookConsumerWidget {
 
     var box = Hive.box(userInfoBox);
     var thumbnailRequestUrl =
-        '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=true';
-
+        '${box.get(serverEndpointKey)}/asset/thumbnail/${asset.id}';
     var selectedAsset = ref.watch(homePageStateProvider).selectedItems;
-    var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable;
+    var isMultiSelectEnable =
+        ref.watch(homePageStateProvider).isMultiSelectEnable;
     var deviceId = ref.watch(authenticationProvider).deviceId;
 
-    Widget _buildSelectionIcon(ImmichAsset asset) {
+    Widget _buildSelectionIcon(AssetResponseDto asset) {
       if (selectedAsset.contains(asset)) {
         return Icon(
           Icons.check_circle,
@@ -45,14 +45,22 @@ class ThumbnailImage extends HookConsumerWidget {
     return GestureDetector(
       onTap: () {
         debugPrint("View ${asset.id}");
-        if (isMultiSelectEnable && selectedAsset.contains(asset) && selectedAsset.length == 1) {
+        if (isMultiSelectEnable &&
+            selectedAsset.contains(asset) &&
+            selectedAsset.length == 1) {
           ref.watch(homePageStateProvider.notifier).disableMultiSelect();
-        } else if (isMultiSelectEnable && selectedAsset.contains(asset) && selectedAsset.length > 1) {
-          ref.watch(homePageStateProvider.notifier).removeSingleSelectedItem(asset);
+        } else if (isMultiSelectEnable &&
+            selectedAsset.contains(asset) &&
+            selectedAsset.length > 1) {
+          ref
+              .watch(homePageStateProvider.notifier)
+              .removeSingleSelectedItem(asset);
         } else if (isMultiSelectEnable && !selectedAsset.contains(asset)) {
-          ref.watch(homePageStateProvider.notifier).addSingleSelectedItem(asset);
+          ref
+              .watch(homePageStateProvider.notifier)
+              .addSingleSelectedItem(asset);
         } else {
-          if (asset.type == 'IMAGE') {
+          if (asset.type == AssetTypeEnum.IMAGE) {
             AutoRouter.of(context).push(
               ImageViewerRoute(
                 imageUrl:
@@ -65,8 +73,10 @@ class ThumbnailImage extends HookConsumerWidget {
           } else {
             AutoRouter.of(context).push(
               VideoViewerRoute(
-                  videoUrl: '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
-                  asset: asset),
+                videoUrl:
+                    '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
+                asset: asset,
+              ),
             );
           }
         }
@@ -83,23 +93,32 @@ class ThumbnailImage extends HookConsumerWidget {
             Container(
               decoration: BoxDecoration(
                 border: isMultiSelectEnable && selectedAsset.contains(asset)
-                    ? Border.all(color: Theme.of(context).primaryColorLight, width: 10)
+                    ? Border.all(
+                        color: Theme.of(context).primaryColorLight,
+                        width: 10,
+                      )
                     : const Border(),
               ),
               child: CachedNetworkImage(
                 cacheKey: "${asset.id}-${cacheKey.value}",
                 width: 300,
                 height: 300,
-                memCacheHeight: asset.type == 'IMAGE' ? 250 : 400,
+                memCacheHeight: asset.type == AssetTypeEnum.IMAGE ? 250 : 400,
                 fit: BoxFit.cover,
                 imageUrl: thumbnailRequestUrl,
-                httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
+                httpHeaders: {
+                  "Authorization": "Bearer ${box.get(accessTokenKey)}"
+                },
                 fadeInDuration: const Duration(milliseconds: 250),
-                progressIndicatorBuilder: (context, url, downloadProgress) => Transform.scale(
+                progressIndicatorBuilder: (context, url, downloadProgress) =>
+                    Transform.scale(
                   scale: 0.2,
-                  child: CircularProgressIndicator(value: downloadProgress.progress),
+                  child: CircularProgressIndicator(
+                    value: downloadProgress.progress,
+                  ),
                 ),
                 errorWidget: (context, url, error) {
+                  debugPrint("Error getting thumbnail $url = $error");
                   return Icon(
                     Icons.image_not_supported_outlined,
                     color: Theme.of(context).primaryColor,
@@ -107,22 +126,21 @@ class ThumbnailImage extends HookConsumerWidget {
                 },
               ),
             ),
-            Container(
-              child: isMultiSelectEnable
-                  ? Padding(
-                      padding: const EdgeInsets.all(3.0),
-                      child: Align(
-                        alignment: Alignment.topLeft,
-                        child: _buildSelectionIcon(asset),
-                      ),
-                    )
-                  : Container(),
-            ),
+            if (isMultiSelectEnable)
+              Padding(
+                padding: const EdgeInsets.all(3.0),
+                child: Align(
+                  alignment: Alignment.topLeft,
+                  child: _buildSelectionIcon(asset),
+                ),
+              ),
             Positioned(
               right: 10,
               bottom: 5,
               child: Icon(
-                (deviceId != asset.deviceId) ? Icons.cloud_done_outlined : Icons.photo_library_rounded,
+                (deviceId != asset.deviceId)
+                    ? Icons.cloud_done_outlined
+                    : Icons.photo_library_rounded,
                 color: Colors.white,
                 size: 18,
               ),

mobile/lib/modules/home/views/home_page.dart

@@ -19,34 +19,32 @@ class HomePage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    ScrollController _scrollController = useScrollController();
+    ScrollController scrollController = useScrollController();
     var assetGroupByDateTime = ref.watch(assetGroupByDateTimeProvider);
-    List<Widget> _imageGridGroup = [];
-    var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable;
+    List<Widget> imageGridGroup = [];
+    var isMultiSelectEnable =
+        ref.watch(homePageStateProvider).isMultiSelectEnable;
     var homePageState = ref.watch(homePageStateProvider);
 
-    useEffect(() {
-      ref.read(websocketProvider.notifier).connect();
-      ref.read(assetProvider.notifier).getAllAsset();
-      ref.watch(serverInfoProvider.notifier).getServerVersion();
-      return null;
-    }, []);
+    useEffect(
+      () {
+        ref.read(websocketProvider.notifier).connect();
+        ref.read(assetProvider.notifier).getAllAsset();
+        ref.watch(serverInfoProvider.notifier).getServerVersion();
+        return null;
+      },
+      [],
+    );
 
     void reloadAllAsset() {
       ref.read(assetProvider.notifier).getAllAsset();
     }
 
     _buildSelectedItemCountIndicator() {
-      return isMultiSelectEnable
-          ? DisableMultiSelectButton(
-              onPressed: ref.watch(homePageStateProvider.notifier).disableMultiSelect,
-              selectedItemCount: homePageState.selectedItems.length,
-            )
-          : Container();
-    }
-
-    _buildBottomAppBar() {
-      return isMultiSelectEnable ? const ControlBottomAppBar() : Container();
+      return DisableMultiSelectButton(
+        onPressed: ref.watch(homePageStateProvider.notifier).disableMultiSelect,
+        selectedItemCount: homePageState.selectedItems.length,
+      );
     }
 
     Widget _buildBody() {
@@ -59,7 +57,7 @@ class HomePage extends HookConsumerWidget {
 
           if (lastMonth != null) {
             if (currentMonth - lastMonth! != 0) {
-              _imageGridGroup.add(
+              imageGridGroup.add(
                 MonthlyTitleText(
                   isoDate: dateGroup,
                 ),
@@ -67,14 +65,14 @@ class HomePage extends HookConsumerWidget {
             }
           }
 
-          _imageGridGroup.add(
+          imageGridGroup.add(
             DailyTitleText(
               isoDate: dateGroup,
               assetGroup: immichAssetList,
             ),
           );
 
-          _imageGridGroup.add(
+          imageGridGroup.add(
             ImageGrid(assetGroup: immichAssetList),
           );
 
@@ -109,18 +107,20 @@ class HomePage extends HookConsumerWidget {
               padding: const EdgeInsets.only(top: 50.0),
               child: DraggableScrollbar.semicircle(
                 backgroundColor: Theme.of(context).primaryColor,
-                controller: _scrollController,
+                controller: scrollController,
                 heightScrollThumb: 48.0,
                 child: CustomScrollView(
-                  controller: _scrollController,
+                  controller: scrollController,
                   slivers: [
-                    ..._imageGridGroup,
+                    ...imageGridGroup,
                   ],
                 ),
               ),
             ),
-            _buildSelectedItemCountIndicator(),
-            _buildBottomAppBar(),
+            if (isMultiSelectEnable) ...[
+              _buildSelectedItemCountIndicator(),
+              const ControlBottomAppBar(),
+            ],
           ],
         ),
       );

mobile/lib/modules/login/models/authentication_state.model.dart

@@ -1,20 +1,17 @@
-import 'dart:convert';
-
-import 'package:immich_mobile/shared/models/device_info.model.dart';
+import 'package:openapi/api.dart';
 
 class AuthenticationState {
   final String deviceId;
-  final String deviceType;
+  final DeviceTypeEnum deviceType;
   final String userId;
   final String userEmail;
   final bool isAuthenticated;
   final String firstName;
   final String lastName;
   final bool isAdmin;
-  final bool isFirstLogin;
+  final bool shouldChangePassword;
   final String profileImagePath;
-  final DeviceInfoRemote deviceInfo;
-
+  final DeviceInfoResponseDto deviceInfo;
   AuthenticationState({
     required this.deviceId,
     required this.deviceType,
@@ -24,23 +21,23 @@ class AuthenticationState {
     required this.firstName,
     required this.lastName,
     required this.isAdmin,
-    required this.isFirstLogin,
+    required this.shouldChangePassword,
     required this.profileImagePath,
     required this.deviceInfo,
   });
 
   AuthenticationState copyWith({
     String? deviceId,
-    String? deviceType,
+    DeviceTypeEnum? deviceType,
     String? userId,
     String? userEmail,
     bool? isAuthenticated,
     String? firstName,
     String? lastName,
     bool? isAdmin,
-    bool? isFirstLoggedIn,
+    bool? shouldChangePassword,
     String? profileImagePath,
-    DeviceInfoRemote? deviceInfo,
+    DeviceInfoResponseDto? deviceInfo,
   }) {
     return AuthenticationState(
       deviceId: deviceId ?? this.deviceId,
@@ -51,7 +48,7 @@ class AuthenticationState {
       firstName: firstName ?? this.firstName,
       lastName: lastName ?? this.lastName,
       isAdmin: isAdmin ?? this.isAdmin,
-      isFirstLogin: isFirstLoggedIn ?? isFirstLogin,
+      shouldChangePassword: shouldChangePassword ?? this.shouldChangePassword,
       profileImagePath: profileImagePath ?? this.profileImagePath,
       deviceInfo: deviceInfo ?? this.deviceInfo,
     );
@@ -59,47 +56,9 @@ class AuthenticationState {
 
   @override
   String toString() {
-    return 'AuthenticationState(deviceId: $deviceId, deviceType: $deviceType, userId: $userId, userEmail: $userEmail, isAuthenticated: $isAuthenticated, firstName: $firstName, lastName: $lastName, isAdmin: $isAdmin, isFirstLoggedIn: $isFirstLogin, profileImagePath: $profileImagePath, deviceInfo: $deviceInfo)';
+    return 'AuthenticationState(deviceId: $deviceId, deviceType: $deviceType, userId: $userId, userEmail: $userEmail, isAuthenticated: $isAuthenticated, firstName: $firstName, lastName: $lastName, isAdmin: $isAdmin, shouldChangePassword: $shouldChangePassword, profileImagePath: $profileImagePath, deviceInfo: $deviceInfo)';
   }
 
-  Map<String, dynamic> toMap() {
-    final result = <String, dynamic>{};
-
-    result.addAll({'deviceId': deviceId});
-    result.addAll({'deviceType': deviceType});
-    result.addAll({'userId': userId});
-    result.addAll({'userEmail': userEmail});
-    result.addAll({'isAuthenticated': isAuthenticated});
-    result.addAll({'firstName': firstName});
-    result.addAll({'lastName': lastName});
-    result.addAll({'isAdmin': isAdmin});
-    result.addAll({'isFirstLogin': isFirstLogin});
-    result.addAll({'profileImagePath': profileImagePath});
-    result.addAll({'deviceInfo': deviceInfo.toMap()});
-
-    return result;
-  }
-
-  factory AuthenticationState.fromMap(Map<String, dynamic> map) {
-    return AuthenticationState(
-      deviceId: map['deviceId'] ?? '',
-      deviceType: map['deviceType'] ?? '',
-      userId: map['userId'] ?? '',
-      userEmail: map['userEmail'] ?? '',
-      isAuthenticated: map['isAuthenticated'] ?? false,
-      firstName: map['firstName'] ?? '',
-      lastName: map['lastName'] ?? '',
-      isAdmin: map['isAdmin'] ?? false,
-      isFirstLogin: map['isFirstLogin'] ?? false,
-      profileImagePath: map['profileImagePath'] ?? '',
-      deviceInfo: DeviceInfoRemote.fromMap(map['deviceInfo']),
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory AuthenticationState.fromJson(String source) => AuthenticationState.fromMap(json.decode(source));
-
   @override
   bool operator ==(Object other) {
     if (identical(this, other)) return true;
@@ -113,7 +72,7 @@ class AuthenticationState {
         other.firstName == firstName &&
         other.lastName == lastName &&
         other.isAdmin == isAdmin &&
-        other.isFirstLogin == isFirstLogin &&
+        other.shouldChangePassword == shouldChangePassword &&
         other.profileImagePath == profileImagePath &&
         other.deviceInfo == deviceInfo;
   }
@@ -128,7 +87,7 @@ class AuthenticationState {
         firstName.hashCode ^
         lastName.hashCode ^
         isAdmin.hashCode ^
-        isFirstLogin.hashCode ^
+        shouldChangePassword.hashCode ^
         profileImagePath.hashCode ^
         deviceInfo.hashCode;
   }

mobile/lib/modules/login/models/hive_saved_login_info.model.dart

@@ -16,5 +16,10 @@ class HiveSavedLoginInfo {
   @HiveField(3)
   bool isSaveLogin;
 
-  HiveSavedLoginInfo({required this.email, required this.password, required this.serverUrl, required this.isSaveLogin});
+  HiveSavedLoginInfo({
+    required this.email,
+    required this.password,
+    required this.serverUrl,
+    required this.isSaveLogin,
+  });
 }

mobile/lib/modules/login/models/login_response.model.dart

@@ -8,7 +8,7 @@ class LogInReponse {
   final String lastName;
   final String profileImagePath;
   final bool isAdmin;
-  final bool isFirstLogin;
+  final bool shouldChangePassword;
 
   LogInReponse({
     required this.accessToken,
@@ -18,7 +18,7 @@ class LogInReponse {
     required this.lastName,
     required this.profileImagePath,
     required this.isAdmin,
-    required this.isFirstLogin,
+    required this.shouldChangePassword,
   });
 
   LogInReponse copyWith({
@@ -29,7 +29,7 @@ class LogInReponse {
     String? lastName,
     String? profileImagePath,
     bool? isAdmin,
-    bool? isFirstLogin,
+    bool? shouldChangePassword,
   }) {
     return LogInReponse(
       accessToken: accessToken ?? this.accessToken,
@@ -39,7 +39,7 @@ class LogInReponse {
       lastName: lastName ?? this.lastName,
       profileImagePath: profileImagePath ?? this.profileImagePath,
       isAdmin: isAdmin ?? this.isAdmin,
-      isFirstLogin: isFirstLogin ?? this.isFirstLogin,
+      shouldChangePassword: shouldChangePassword ?? this.shouldChangePassword,
     );
   }
 
@@ -53,7 +53,7 @@ class LogInReponse {
     result.addAll({'lastName': lastName});
     result.addAll({'profileImagePath': profileImagePath});
     result.addAll({'isAdmin': isAdmin});
-    result.addAll({'isFirstLogin': isFirstLogin});
+    result.addAll({'shouldChangePassword': shouldChangePassword});
 
     return result;
   }
@@ -67,17 +67,18 @@ class LogInReponse {
       lastName: map['lastName'] ?? '',
       profileImagePath: map['profileImagePath'] ?? '',
       isAdmin: map['isAdmin'] ?? false,
-      isFirstLogin: map['isFirstLogin'] ?? false,
+      shouldChangePassword: map['shouldChangePassword'] ?? false,
     );
   }
 
   String toJson() => json.encode(toMap());
 
-  factory LogInReponse.fromJson(String source) => LogInReponse.fromMap(json.decode(source));
+  factory LogInReponse.fromJson(String source) =>
+      LogInReponse.fromMap(json.decode(source));
 
   @override
   String toString() {
-    return 'LogInReponse(accessToken: $accessToken, userId: $userId, userEmail: $userEmail, firstName: $firstName, lastName: $lastName, profileImagePath: $profileImagePath, isAdmin: $isAdmin, isFirstLogin: $isFirstLogin)';
+    return 'LogInReponse(accessToken: $accessToken, userId: $userId, userEmail: $userEmail, firstName: $firstName, lastName: $lastName, profileImagePath: $profileImagePath, isAdmin: $isAdmin, shouldChangePassword: $shouldChangePassword)';
   }
 
   @override
@@ -92,7 +93,7 @@ class LogInReponse {
         other.lastName == lastName &&
         other.profileImagePath == profileImagePath &&
         other.isAdmin == isAdmin &&
-        other.isFirstLogin == isFirstLogin;
+        other.shouldChangePassword == shouldChangePassword;
   }
 
   @override
@@ -104,6 +105,6 @@ class LogInReponse {
         lastName.hashCode ^
         profileImagePath.hashCode ^
         isAdmin.hashCode ^
-        isFirstLogin.hashCode;
+        shouldChangePassword.hashCode;
   }
 }

mobile/lib/modules/login/providers/authentication.provider.dart

@@ -1,48 +1,52 @@
-import 'package:dio/dio.dart';
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
 import 'package:immich_mobile/modules/login/models/hive_saved_login_info.model.dart';
-import 'package:immich_mobile/modules/login/models/login_response.model.dart';
 import 'package:immich_mobile/modules/backup/services/backup.service.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
 import 'package:immich_mobile/shared/services/device_info.service.dart';
-import 'package:immich_mobile/shared/services/network.service.dart';
-import 'package:immich_mobile/shared/models/device_info.model.dart';
+import 'package:openapi/api.dart';
 
 class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
-  AuthenticationNotifier(this.ref)
-      : super(
+  AuthenticationNotifier(
+    this._deviceInfoService,
+    this._backupService,
+    this._apiService,
+  ) : super(
           AuthenticationState(
             deviceId: "",
-            deviceType: "",
+            deviceType: DeviceTypeEnum.ANDROID,
             userId: "",
             userEmail: "",
             firstName: '',
             lastName: '',
             profileImagePath: '',
             isAdmin: false,
-            isFirstLogin: false,
+            shouldChangePassword: false,
             isAuthenticated: false,
-            deviceInfo: DeviceInfoRemote(
+            deviceInfo: DeviceInfoResponseDto(
               id: 0,
               userId: "",
               deviceId: "",
-              deviceType: "",
-              notificationToken: "",
+              deviceType: DeviceTypeEnum.ANDROID,
               createdAt: "",
               isAutoBackup: false,
             ),
           ),
         );
 
-  final Ref ref;
-  final DeviceInfoService _deviceInfoService = DeviceInfoService();
-  final BackupService _backupService = BackupService();
-  final NetworkService _networkService = NetworkService();
+  final DeviceInfoService _deviceInfoService;
+  final BackupService _backupService;
+  final ApiService _apiService;
 
-  Future<bool> login(String email, String password, String serverEndpoint, bool isSavedLoginInfo) async {
+  Future<bool> login(
+    String email,
+    String password,
+    String serverEndpoint,
+    bool isSavedLoginInfo,
+  ) async {
     // Store server endpoint to Hive and test endpoint
     if (serverEndpoint[serverEndpoint.length - 1] == "/") {
       var validUrl = serverEndpoint.substring(0, serverEndpoint.length - 1);
@@ -51,12 +55,12 @@ class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
       Hive.box(userInfoBox).put(serverEndpointKey, serverEndpoint);
     }
 
+    // Check Server URL validity
     try {
-      bool isServerEndpointVerified = await _networkService.pingServer();
-      if (!isServerEndpointVerified) {
-        return false;
-      }
+      _apiService.setEndpoint(Hive.box(userInfoBox).get(serverEndpointKey));
+      await _apiService.serverInfoApi.pingServer();
     } catch (e) {
+      debugPrint('Invalid Server Endpoint Url $e');
       return false;
     }
 
@@ -71,49 +75,73 @@ class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
 
     // Make sign-in request
     try {
-      Response res = await _networkService.postRequest(url: 'auth/login', data: {'email': email, 'password': password});
+      var loginResponse = await _apiService.authenticationApi.login(
+        LoginCredentialDto(
+          email: email,
+          password: password,
+        ),
+      );
 
-      var payload = LogInReponse.fromJson(res.toString());
+      if (loginResponse == null) {
+        debugPrint('Login Response is null');
+        return false;
+      }
 
-      Hive.box(userInfoBox).put(accessTokenKey, payload.accessToken);
+      Hive.box(userInfoBox).put(accessTokenKey, loginResponse.accessToken);
 
       state = state.copyWith(
         isAuthenticated: true,
-        userId: payload.userId,
-        userEmail: payload.userEmail,
-        firstName: payload.firstName,
-        lastName: payload.lastName,
-        profileImagePath: payload.profileImagePath,
-        isAdmin: payload.isAdmin,
-        isFirstLoggedIn: payload.isFirstLogin,
+        userId: loginResponse.userId,
+        userEmail: loginResponse.userEmail,
+        firstName: loginResponse.firstName,
+        lastName: loginResponse.lastName,
+        profileImagePath: loginResponse.profileImagePath,
+        isAdmin: loginResponse.isAdmin,
+        shouldChangePassword: loginResponse.shouldChangePassword,
       );
 
+      // Login Success - Set Access Token to API Client
+      _apiService.setAccessToken(loginResponse.accessToken);
+
       if (isSavedLoginInfo) {
         // Save login info to local storage
         Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox).put(
           savedLoginInfoKey,
           HiveSavedLoginInfo(
-              email: email,
-              password: password,
-              isSaveLogin: true,
-              serverUrl: Hive.box(userInfoBox).get(serverEndpointKey)),
+            email: email,
+            password: password,
+            isSaveLogin: true,
+            serverUrl: Hive.box(userInfoBox).get(serverEndpointKey),
+          ),
         );
       } else {
-        Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox).delete(savedLoginInfoKey);
+        Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox)
+            .delete(savedLoginInfoKey);
       }
     } catch (e) {
+      debugPrint("Error logging in $e");
       return false;
     }
 
     // Register device info
     try {
-      Response res = await _networkService
-          .postRequest(url: 'device-info', data: {'deviceId': state.deviceId, 'deviceType': state.deviceType});
+      DeviceInfoResponseDto? deviceInfo =
+          await _apiService.deviceInfoApi.createDeviceInfo(
+        CreateDeviceInfoDto(
+          deviceId: state.deviceId,
+          deviceType: state.deviceType,
+        ),
+      );
+
+      if (deviceInfo == null) {
+        debugPrint('Device Info Response is null');
+        return false;
+      }
 
-      DeviceInfoRemote deviceInfo = DeviceInfoRemote.fromJson(res.toString());
       state = state.copyWith(deviceInfo: deviceInfo);
     } catch (e) {
       debugPrint("ERROR Register Device Info: $e");
+      return false;
     }
 
     return true;
@@ -121,27 +149,7 @@ class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
 
   Future<bool> logout() async {
     Hive.box(userInfoBox).delete(accessTokenKey);
-    state = AuthenticationState(
-      deviceId: "",
-      deviceType: "",
-      userId: "",
-      userEmail: "",
-      firstName: '',
-      lastName: '',
-      profileImagePath: '',
-      isFirstLogin: false,
-      isAuthenticated: false,
-      isAdmin: false,
-      deviceInfo: DeviceInfoRemote(
-        id: 0,
-        userId: "",
-        deviceId: "",
-        deviceType: "",
-        notificationToken: "",
-        createdAt: "",
-        isAutoBackup: false,
-      ),
-    );
+    state = state.copyWith(isAuthenticated: false);
 
     return true;
   }
@@ -149,17 +157,44 @@ class AuthenticationNotifier extends StateNotifier<AuthenticationState> {
   setAutoBackup(bool backupState) async {
     var deviceInfo = await _deviceInfoService.getDeviceInfo();
     var deviceId = deviceInfo["deviceId"];
-    var deviceType = deviceInfo["deviceType"];
 
-    DeviceInfoRemote deviceInfoRemote = await _backupService.setAutoBackup(backupState, deviceId, deviceType);
-    state = state.copyWith(deviceInfo: deviceInfoRemote);
+    DeviceTypeEnum deviceType = deviceInfo["deviceType"];
+
+    DeviceInfoResponseDto updatedDeviceInfo =
+        await _backupService.setAutoBackup(backupState, deviceId, deviceType);
+
+    state = state.copyWith(deviceInfo: updatedDeviceInfo);
   }
 
   updateUserProfileImagePath(String path) {
     state = state.copyWith(profileImagePath: path);
   }
+
+  Future<bool> changePassword(String newPassword) async {
+    try {
+      await _apiService.userApi.updateUser(
+        UpdateUserDto(
+          id: state.userId,
+          password: newPassword,
+          shouldChangePassword: false,
+        ),
+      );
+
+      state = state.copyWith(shouldChangePassword: false);
+
+      return true;
+    } catch (e) {
+      debugPrint("Error changing password $e");
+      return false;
+    }
+  }
 }
 
-final authenticationProvider = StateNotifierProvider<AuthenticationNotifier, AuthenticationState>((ref) {
-  return AuthenticationNotifier(ref);
+final authenticationProvider =
+    StateNotifierProvider<AuthenticationNotifier, AuthenticationState>((ref) {
+  return AuthenticationNotifier(
+    ref.watch(deviceInfoServiceProvider),
+    ref.watch(backupServiceProvider),
+    ref.watch(apiServiceProvider),
+  );
 });

mobile/lib/modules/login/ui/change_password_form.dart

@@ -0,0 +1,175 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
+import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/shared/providers/asset.provider.dart';
+import 'package:immich_mobile/shared/providers/websocket.provider.dart';
+
+class ChangePasswordForm extends HookConsumerWidget {
+  const ChangePasswordForm({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final passwordController =
+        useTextEditingController.fromValue(TextEditingValue.empty);
+    final confirmPasswordController =
+        useTextEditingController.fromValue(TextEditingValue.empty);
+    final authState = ref.watch(authenticationProvider);
+    final formKey = GlobalKey<FormState>();
+
+    return Center(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 300),
+        child: SingleChildScrollView(
+          child: Wrap(
+            spacing: 16,
+            runSpacing: 16,
+            alignment: WrapAlignment.start,
+            children: [
+              Text(
+                'Change Password',
+                style: TextStyle(
+                  fontSize: 24,
+                  fontWeight: FontWeight.bold,
+                  color: Theme.of(context).primaryColor,
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 24.0),
+                child: Text(
+                  'Hi ${authState.firstName} ${authState.lastName},\n\nThis is either the first time you are signing into the system or a request has been made to change your password. Please enter the new password below.',
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Colors.grey[700],
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ),
+              Form(
+                key: formKey,
+                child: Column(
+                  children: [
+                    PasswordInput(controller: passwordController),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 16.0),
+                      child: ConfirmPasswordInput(
+                        originalController: passwordController,
+                        confirmController: confirmPasswordController,
+                      ),
+                    ),
+                    ChangePasswordButton(
+                      passwordController: passwordController,
+                      formKey: formKey,
+                    ),
+                  ],
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class PasswordInput extends StatelessWidget {
+  final TextEditingController controller;
+
+  const PasswordInput({Key? key, required this.controller}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      obscureText: true,
+      controller: controller,
+      decoration: const InputDecoration(
+        labelText: 'New Password',
+        border: OutlineInputBorder(),
+        hintText: 'New Password',
+      ),
+    );
+  }
+}
+
+class ConfirmPasswordInput extends StatelessWidget {
+  final TextEditingController originalController;
+  final TextEditingController confirmController;
+
+  const ConfirmPasswordInput({
+    Key? key,
+    required this.originalController,
+    required this.confirmController,
+  }) : super(key: key);
+
+  String? _validateInput(String? email) {
+    if (confirmController.value != originalController.value) {
+      return 'Passwords do not match';
+    }
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      obscureText: true,
+      controller: confirmController,
+      decoration: const InputDecoration(
+        labelText: 'Confirm Password',
+        hintText: 'Re-enter New Password',
+        border: OutlineInputBorder(),
+      ),
+      validator: _validateInput,
+      autovalidateMode: AutovalidateMode.always,
+    );
+  }
+}
+
+class ChangePasswordButton extends ConsumerWidget {
+  final TextEditingController passwordController;
+  final GlobalKey<FormState> formKey;
+
+  const ChangePasswordButton({
+    Key? key,
+    required this.passwordController,
+    required this.formKey,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ElevatedButton(
+      style: ElevatedButton.styleFrom(
+        visualDensity: VisualDensity.standard,
+        primary: Theme.of(context).primaryColor,
+        onPrimary: Colors.grey[50],
+        elevation: 2,
+        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 25),
+      ),
+      onPressed: () async {
+        if (formKey.currentState!.validate()) {
+          var isSuccess = await ref
+              .watch(authenticationProvider.notifier)
+              .changePassword(passwordController.value.text);
+
+          if (isSuccess) {
+            bool res =
+                await ref.watch(authenticationProvider.notifier).logout();
+
+            if (res) {
+              ref.watch(backupProvider.notifier).cancelBackup();
+              ref.watch(assetProvider.notifier).clearAllAsset();
+              ref.watch(websocketProvider.notifier).disconnect();
+              AutoRouter.of(context).replace(const LoginRoute());
+            }
+          }
+        }
+      },
+      child: const Text(
+        "Change Password",
+        style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+      ),
+    );
+  }
+}

mobile/lib/modules/login/ui/login_form.dart

@@ -1,10 +1,12 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hive/hive.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/hive_box.dart';
 import 'package:immich_mobile/modules/login/models/hive_saved_login_info.model.dart';
+import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
@@ -15,23 +17,30 @@ class LoginForm extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final usernameController = useTextEditingController.fromValue(TextEditingValue.empty);
-    final passwordController = useTextEditingController.fromValue(TextEditingValue.empty);
-    final serverEndpointController = useTextEditingController(text: 'http://your-server-ip:2283');
+    final usernameController =
+        useTextEditingController.fromValue(TextEditingValue.empty);
+    final passwordController =
+        useTextEditingController.fromValue(TextEditingValue.empty);
+    final serverEndpointController =
+        useTextEditingController(text: 'login_form_endpoint_hint'.tr());
     final isSaveLoginInfo = useState<bool>(false);
 
-    useEffect(() {
-      var loginInfo = Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox).get(savedLoginInfoKey);
+    useEffect(
+      () {
+        var loginInfo = Hive.box<HiveSavedLoginInfo>(hiveLoginInfoBox)
+            .get(savedLoginInfoKey);
 
-      if (loginInfo != null) {
-        usernameController.text = loginInfo.email;
-        passwordController.text = loginInfo.password;
-        serverEndpointController.text = loginInfo.serverUrl;
-        isSaveLoginInfo.value = loginInfo.isSaveLogin;
-      }
+        if (loginInfo != null) {
+          usernameController.text = loginInfo.email;
+          passwordController.text = loginInfo.password;
+          serverEndpointController.text = loginInfo.serverUrl;
+          isSaveLoginInfo.value = loginInfo.isSaveLogin;
+        }
 
-      return null;
-    }, []);
+        return null;
+      },
+      [],
+    );
 
     return Center(
       child: ConstrainedBox(
@@ -64,12 +73,18 @@ class LoginForm extends HookConsumerWidget {
                 contentPadding: const EdgeInsets.symmetric(horizontal: 8),
                 dense: true,
                 side: const BorderSide(color: Colors.grey, width: 1.5),
-                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(5),
+                ),
                 enableFeedback: true,
                 title: const Text(
-                  "Save login",
-                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.grey),
-                ),
+                  "login_form_save_login",
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.grey,
+                  ),
+                ).tr(),
                 value: isSaveLoginInfo.value,
                 onChanged: (switchValue) {
                   if (switchValue != null) {
@@ -94,14 +109,28 @@ class LoginForm extends HookConsumerWidget {
 class ServerEndpointInput extends StatelessWidget {
   final TextEditingController controller;
 
-  const ServerEndpointInput({Key? key, required this.controller}) : super(key: key);
+  const ServerEndpointInput({Key? key, required this.controller})
+      : super(key: key);
+
+  String? _validateInput(String? url) {
+    if (url?.startsWith(RegExp(r'https?://')) == true) {
+      return null;
+    } else {
+      return 'login_form_err_http'.tr();
+    }
+  }
 
   @override
   Widget build(BuildContext context) {
     return TextFormField(
       controller: controller,
-      decoration: const InputDecoration(
-          labelText: 'Server Endpoint URL', border: OutlineInputBorder(), hintText: 'http://your-server-ip:port'),
+      decoration: InputDecoration(
+        labelText: 'login_form_endpoint_url'.tr(),
+        border: const OutlineInputBorder(),
+        hintText: 'login_form_endpoint_hint'.tr(),
+      ),
+      validator: _validateInput,
+      autovalidateMode: AutovalidateMode.always,
     );
   }
 }
@@ -111,12 +140,27 @@ class EmailInput extends StatelessWidget {
 
   const EmailInput({Key? key, required this.controller}) : super(key: key);
 
+  String? _validateInput(String? email) {
+    if (email == null || email == '') return null;
+    if (email.endsWith(' ')) return 'login_form_err_trailing_whitespace'.tr();
+    if (email.startsWith(' ')) return 'login_form_err_leading_whitespace'.tr();
+    if (email.contains(' ') || !email.contains('@')) {
+      return 'login_form_err_invalid_email'.tr();
+    }
+    return null;
+  }
+
   @override
   Widget build(BuildContext context) {
     return TextFormField(
       controller: controller,
-      decoration:
-          const InputDecoration(labelText: 'Email', border: OutlineInputBorder(), hintText: 'youremail@email.com'),
+      decoration: InputDecoration(
+        labelText: 'login_form_label_email'.tr(),
+        border: const OutlineInputBorder(),
+        hintText: 'login_form_email_hint'.tr(),
+      ),
+      validator: _validateInput,
+      autovalidateMode: AutovalidateMode.always,
     );
   }
 }
@@ -131,7 +175,11 @@ class PasswordInput extends StatelessWidget {
     return TextFormField(
       obscureText: true,
       controller: controller,
-      decoration: const InputDecoration(labelText: 'Password', border: OutlineInputBorder(), hintText: 'password'),
+      decoration: InputDecoration(
+        labelText: 'login_form_label_password'.tr(),
+        border: const OutlineInputBorder(),
+        hintText: 'login_form_password_hint'.tr(),
+      ),
     );
   }
 }
@@ -153,36 +201,47 @@ class LoginButton extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return ElevatedButton(
-        style: ElevatedButton.styleFrom(
-          visualDensity: VisualDensity.standard,
-          primary: Theme.of(context).primaryColor,
-          onPrimary: Colors.grey[50],
-          elevation: 2,
-          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 25),
-        ),
-        onPressed: () async {
-          // This will remove current cache asset state of previous user login.
-          ref.watch(assetProvider.notifier).clearAllAsset();
+      style: ElevatedButton.styleFrom(
+        visualDensity: VisualDensity.standard,
+        primary: Theme.of(context).primaryColor,
+        onPrimary: Colors.grey[50],
+        elevation: 2,
+        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 25),
+      ),
+      onPressed: () async {
+        // This will remove current cache asset state of previous user login.
+        ref.watch(assetProvider.notifier).clearAllAsset();
 
-          var isAuthenticated = await ref
-              .read(authenticationProvider.notifier)
-              .login(emailController.text, passwordController.text, serverEndpointController.text, isSavedLoginInfo);
+        var isAuthenticated =
+            await ref.watch(authenticationProvider.notifier).login(
+                  emailController.text,
+                  passwordController.text,
+                  serverEndpointController.text,
+                  isSavedLoginInfo,
+                );
 
-          if (isAuthenticated) {
-            // Resume backup (if enable) then navigate
+        if (isAuthenticated) {
+          // Resume backup (if enable) then navigate
+
+          if (ref.watch(authenticationProvider).shouldChangePassword &&
+              !ref.watch(authenticationProvider).isAdmin) {
+            AutoRouter.of(context).push(const ChangePasswordRoute());
+          } else {
             ref.watch(backupProvider.notifier).resumeBackup();
             AutoRouter.of(context).pushNamed("/tab-controller-page");
-          } else {
-            ImmichToast.show(
-              context: context,
-              msg: "Error logging you in, check server url, email and password!",
-              toastType: ToastType.error,
-            );
           }
-        },
-        child: const Text(
-          "Login",
-          style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
-        ));
+        } else {
+          ImmichToast.show(
+            context: context,
+            msg: "login_form_failed_login".tr(),
+            toastType: ToastType.error,
+          );
+        }
+      },
+      child: const Text(
+        "login_form_button_text",
+        style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+      ).tr(),
+    );
   }
 }

mobile/lib/modules/login/views/change_password_page.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/login/ui/change_password_form.dart';
+
+class ChangePasswordPage extends HookConsumerWidget {
+  const ChangePasswordPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return const Scaffold(
+      body: ChangePasswordForm(),
+    );
+  }
+}

mobile/lib/modules/search/models/curated_location.model.dart

@@ -1,79 +0,0 @@
-import 'dart:convert';
-
-class CuratedLocation {
-  final String id;
-  final String city;
-  final String resizePath;
-  final String deviceAssetId;
-  final String deviceId;
-
-  CuratedLocation({
-    required this.id,
-    required this.city,
-    required this.resizePath,
-    required this.deviceAssetId,
-    required this.deviceId,
-  });
-
-  CuratedLocation copyWith({
-    String? id,
-    String? city,
-    String? resizePath,
-    String? deviceAssetId,
-    String? deviceId,
-  }) {
-    return CuratedLocation(
-      id: id ?? this.id,
-      city: city ?? this.city,
-      resizePath: resizePath ?? this.resizePath,
-      deviceAssetId: deviceAssetId ?? this.deviceAssetId,
-      deviceId: deviceId ?? this.deviceId,
-    );
-  }
-
-  Map<String, dynamic> toMap() {
-    return {
-      'id': id,
-      'city': city,
-      'resizePath': resizePath,
-      'deviceAssetId': deviceAssetId,
-      'deviceId': deviceId,
-    };
-  }
-
-  factory CuratedLocation.fromMap(Map<String, dynamic> map) {
-    return CuratedLocation(
-      id: map['id'] ?? '',
-      city: map['city'] ?? '',
-      resizePath: map['resizePath'] ?? '',
-      deviceAssetId: map['deviceAssetId'] ?? '',
-      deviceId: map['deviceId'] ?? '',
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory CuratedLocation.fromJson(String source) => CuratedLocation.fromMap(json.decode(source));
-
-  @override
-  String toString() {
-    return 'CuratedLocation(id: $id, city: $city, resizePath: $resizePath, deviceAssetId: $deviceAssetId, deviceId: $deviceId)';
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-
-    return other is CuratedLocation &&
-        other.id == id &&
-        other.city == city &&
-        other.resizePath == resizePath &&
-        other.deviceAssetId == deviceAssetId &&
-        other.deviceId == deviceId;
-  }
-
-  @override
-  int get hashCode {
-    return id.hashCode ^ city.hashCode ^ resizePath.hashCode ^ deviceAssetId.hashCode ^ deviceId.hashCode;
-  }
-}

mobile/lib/modules/search/models/curated_object.model.dart

@@ -1,80 +0,0 @@
-import 'dart:convert';
-
-class CuratedObject {
-  final String id;
-  final String object;
-  final String resizePath;
-  final String deviceAssetId;
-  final String deviceId;
-  CuratedObject({
-    required this.id,
-    required this.object,
-    required this.resizePath,
-    required this.deviceAssetId,
-    required this.deviceId,
-  });
-
-  CuratedObject copyWith({
-    String? id,
-    String? object,
-    String? resizePath,
-    String? deviceAssetId,
-    String? deviceId,
-  }) {
-    return CuratedObject(
-      id: id ?? this.id,
-      object: object ?? this.object,
-      resizePath: resizePath ?? this.resizePath,
-      deviceAssetId: deviceAssetId ?? this.deviceAssetId,
-      deviceId: deviceId ?? this.deviceId,
-    );
-  }
-
-  Map<String, dynamic> toMap() {
-    final result = <String, dynamic>{};
-
-    result.addAll({'id': id});
-    result.addAll({'object': object});
-    result.addAll({'resizePath': resizePath});
-    result.addAll({'deviceAssetId': deviceAssetId});
-    result.addAll({'deviceId': deviceId});
-
-    return result;
-  }
-
-  factory CuratedObject.fromMap(Map<String, dynamic> map) {
-    return CuratedObject(
-      id: map['id'] ?? '',
-      object: map['object'] ?? '',
-      resizePath: map['resizePath'] ?? '',
-      deviceAssetId: map['deviceAssetId'] ?? '',
-      deviceId: map['deviceId'] ?? '',
-    );
-  }
-
-  String toJson() => json.encode(toMap());
-
-  factory CuratedObject.fromJson(String source) => CuratedObject.fromMap(json.decode(source));
-
-  @override
-  String toString() {
-    return 'CuratedObject(id: $id, object: $object, resizePath: $resizePath, deviceAssetId: $deviceAssetId, deviceId: $deviceId)';
-  }
-
-  @override
-  bool operator ==(Object other) {
-    if (identical(this, other)) return true;
-
-    return other is CuratedObject &&
-        other.id == id &&
-        other.object == object &&
-        other.resizePath == resizePath &&
-        other.deviceAssetId == deviceAssetId &&
-        other.deviceId == deviceId;
-  }
-
-  @override
-  int get hashCode {
-    return id.hashCode ^ object.hashCode ^ resizePath.hashCode ^ deviceAssetId.hashCode ^ deviceId.hashCode;
-  }
-}

mobile/lib/modules/search/models/search_page_state.model.dart

@@ -25,7 +25,8 @@ class SearchPageState {
       searchTerm: searchTerm ?? this.searchTerm,
       isSearchEnabled: isSearchEnabled ?? this.isSearchEnabled,
       searchSuggestion: searchSuggestion ?? this.searchSuggestion,
-      userSuggestedSearchTerms: userSuggestedSearchTerms ?? this.userSuggestedSearchTerms,
+      userSuggestedSearchTerms:
+          userSuggestedSearchTerms ?? this.userSuggestedSearchTerms,
     );
   }
 
@@ -43,13 +44,15 @@ class SearchPageState {
       searchTerm: map['searchTerm'] ?? '',
       isSearchEnabled: map['isSearchEnabled'] ?? false,
       searchSuggestion: List<String>.from(map['searchSuggestion']),
-      userSuggestedSearchTerms: List<String>.from(map['userSuggestedSearchTerms']),
+      userSuggestedSearchTerms:
+          List<String>.from(map['userSuggestedSearchTerms']),
     );
   }
 
   String toJson() => json.encode(toMap());
 
-  factory SearchPageState.fromJson(String source) => SearchPageState.fromMap(json.decode(source));
+  factory SearchPageState.fromJson(String source) =>
+      SearchPageState.fromMap(json.decode(source));
 
   @override
   String toString() {

mobile/lib/modules/search/models/search_result_page_state.model.dart

@@ -1,13 +1,13 @@
 import 'dart:convert';
 
 import 'package:collection/collection.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
+import 'package:openapi/api.dart';
 
 class SearchResultPageState {
   final bool isLoading;
   final bool isSuccess;
   final bool isError;
-  final List<ImmichAsset> searchResult;
+  final List<AssetResponseDto> searchResult;
 
   SearchResultPageState({
     required this.isLoading,
@@ -20,7 +20,7 @@ class SearchResultPageState {
     bool? isLoading,
     bool? isSuccess,
     bool? isError,
-    List<ImmichAsset>? searchResult,
+    List<AssetResponseDto>? searchResult,
   }) {
     return SearchResultPageState(
       isLoading: isLoading ?? this.isLoading,
@@ -35,7 +35,7 @@ class SearchResultPageState {
       'isLoading': isLoading,
       'isSuccess': isSuccess,
       'isError': isError,
-      'searchResult': searchResult.map((x) => x.toMap()).toList(),
+      'searchResult': searchResult.map((x) => x.toJson()).toList(),
     };
   }
 
@@ -44,13 +44,16 @@ class SearchResultPageState {
       isLoading: map['isLoading'] ?? false,
       isSuccess: map['isSuccess'] ?? false,
       isError: map['isError'] ?? false,
-      searchResult: List<ImmichAsset>.from(map['searchResult']?.map((x) => ImmichAsset.fromMap(x))),
+      searchResult: List<AssetResponseDto>.from(
+        map['searchResult']?.map((x) => AssetResponseDto.mapFromJson(x)),
+      ),
     );
   }
 
   String toJson() => json.encode(toMap());
 
-  factory SearchResultPageState.fromJson(String source) => SearchResultPageState.fromMap(json.decode(source));
+  factory SearchResultPageState.fromJson(String source) =>
+      SearchResultPageState.fromMap(json.decode(source));
 
   @override
   String toString() {
@@ -71,6 +74,9 @@ class SearchResultPageState {
 
   @override
   int get hashCode {
-    return isLoading.hashCode ^ isSuccess.hashCode ^ isError.hashCode ^ searchResult.hashCode;
+    return isLoading.hashCode ^
+        isSuccess.hashCode ^
+        isError.hashCode ^
+        searchResult.hashCode;
   }
 }

mobile/lib/modules/search/providers/search_page_state.provider.dart

@@ -1,12 +1,11 @@
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/modules/search/models/curated_location.model.dart';
-import 'package:immich_mobile/modules/search/models/curated_object.model.dart';
 import 'package:immich_mobile/modules/search/models/search_page_state.model.dart';
 
 import 'package:immich_mobile/modules/search/services/search.service.dart';
+import 'package:openapi/api.dart';
 
 class SearchPageStateNotifier extends StateNotifier<SearchPageState> {
-  SearchPageStateNotifier()
+  SearchPageStateNotifier(this._searchService)
       : super(
           SearchPageState(
             searchTerm: "",
@@ -16,7 +15,7 @@ class SearchPageStateNotifier extends StateNotifier<SearchPageState> {
           ),
         );
 
-  final SearchService _searchService = SearchService();
+  final SearchService _searchService;
 
   void enableSearch() {
     state = state.copyWith(isSearchEnabled: true);
@@ -45,34 +44,31 @@ class SearchPageStateNotifier extends StateNotifier<SearchPageState> {
   }
 
   void getSuggestedSearchTerms() async {
-    var userSuggestedSearchTerms = await _searchService.getUserSuggestedSearchTerms();
+    var userSuggestedSearchTerms =
+        await _searchService.getUserSuggestedSearchTerms();
 
     state = state.copyWith(userSuggestedSearchTerms: userSuggestedSearchTerms);
   }
 }
 
-final searchPageStateProvider = StateNotifierProvider<SearchPageStateNotifier, SearchPageState>((ref) {
-  return SearchPageStateNotifier();
+final searchPageStateProvider =
+    StateNotifierProvider<SearchPageStateNotifier, SearchPageState>((ref) {
+  return SearchPageStateNotifier(ref.watch(searchServiceProvider));
 });
 
-final getCuratedLocationProvider = FutureProvider.autoDispose<List<CuratedLocation>>((ref) async {
-  final SearchService _searchService = SearchService();
+final getCuratedLocationProvider =
+    FutureProvider.autoDispose<List<CuratedLocationsResponseDto>>((ref) async {
+  final SearchService searchService = ref.watch(searchServiceProvider);
 
-  var curatedLocation = await _searchService.getCuratedLocation();
-  if (curatedLocation != null) {
-    return curatedLocation;
-  } else {
-    return [];
-  }
+  var curatedLocation = await searchService.getCuratedLocation();
+  return curatedLocation ?? [];
 });
 
-final getCuratedObjectProvider = FutureProvider.autoDispose<List<CuratedObject>>((ref) async {
-  final SearchService _searchService = SearchService();
+final getCuratedObjectProvider =
+    FutureProvider.autoDispose<List<CuratedObjectsResponseDto>>((ref) async {
+  final SearchService searchService = ref.watch(searchServiceProvider);
 
-  var curatedObject = await _searchService.getCuratedObjects();
-  if (curatedObject != null) {
-    return curatedObject;
-  } else {
-    return [];
-  }
+  var curatedObject = await searchService.getCuratedObjects();
+
+  return curatedObject ?? [];
 });

mobile/lib/modules/search/providers/search_result_page.provider.dart

@@ -3,35 +3,66 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/search/models/search_result_page_state.model.dart';
 
 import 'package:immich_mobile/modules/search/services/search.service.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
 import 'package:intl/intl.dart';
+import 'package:openapi/api.dart';
 
 class SearchResultPageNotifier extends StateNotifier<SearchResultPageState> {
-  SearchResultPageNotifier()
-      : super(SearchResultPageState(searchResult: [], isError: false, isLoading: true, isSuccess: false));
+  SearchResultPageNotifier(this._searchService)
+      : super(
+          SearchResultPageState(
+            searchResult: [],
+            isError: false,
+            isLoading: true,
+            isSuccess: false,
+          ),
+        );
 
-  final SearchService _searchService = SearchService();
+  final SearchService _searchService;
 
   void search(String searchTerm) async {
-    state = state.copyWith(searchResult: [], isError: false, isLoading: true, isSuccess: false);
+    state = state.copyWith(
+      searchResult: [],
+      isError: false,
+      isLoading: true,
+      isSuccess: false,
+    );
 
-    List<ImmichAsset>? assets = await _searchService.searchAsset(searchTerm);
+    List<AssetResponseDto>? assets =
+        await _searchService.searchAsset(searchTerm);
 
     if (assets != null) {
-      state = state.copyWith(searchResult: assets, isError: false, isLoading: false, isSuccess: true);
+      state = state.copyWith(
+        searchResult: assets,
+        isError: false,
+        isLoading: false,
+        isSuccess: true,
+      );
     } else {
-      state = state.copyWith(searchResult: [], isError: true, isLoading: false, isSuccess: false);
+      state = state.copyWith(
+        searchResult: [],
+        isError: true,
+        isLoading: false,
+        isSuccess: false,
+      );
     }
   }
 }
 
-final searchResultPageProvider = StateNotifierProvider<SearchResultPageNotifier, SearchResultPageState>((ref) {
-  return SearchResultPageNotifier();
+final searchResultPageProvider =
+    StateNotifierProvider<SearchResultPageNotifier, SearchResultPageState>(
+        (ref) {
+  return SearchResultPageNotifier(ref.watch(searchServiceProvider));
 });
 
 final searchResultGroupByDateTimeProvider = StateProvider((ref) {
   var assets = ref.watch(searchResultPageProvider).searchResult;
 
-  assets.sortByCompare<DateTime>((e) => DateTime.parse(e.createdAt), (a, b) => b.compareTo(a));
-  return assets.groupListsBy((element) => DateFormat('y-MM-dd').format(DateTime.parse(element.createdAt)));
+  assets.sortByCompare<DateTime>(
+    (e) => DateTime.parse(e.createdAt),
+    (a, b) => b.compareTo(a),
+  );
+  return assets.groupListsBy(
+    (element) =>
+        DateFormat('y-MM-dd').format(DateTime.parse(element.createdAt)),
+  );
 });

mobile/lib/modules/search/services/search.service.dart

@@ -1,71 +1,54 @@
-import 'dart:convert';
-
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/modules/search/models/curated_location.model.dart';
-import 'package:immich_mobile/modules/search/models/curated_object.model.dart';
-import 'package:immich_mobile/shared/models/immich_asset.model.dart';
-import 'package:immich_mobile/shared/services/network.service.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/shared/services/api.service.dart';
+import 'package:openapi/api.dart';
+
+final searchServiceProvider = Provider(
+  (ref) => SearchService(
+    ref.watch(apiServiceProvider),
+  ),
+);
 
 class SearchService {
-  final NetworkService _networkService = NetworkService();
+  final ApiService _apiService;
+  SearchService(this._apiService);
 
   Future<List<String>?> getUserSuggestedSearchTerms() async {
     try {
-      var res = await _networkService.getRequest(url: "asset/searchTerm");
-      List<dynamic> decodedData = jsonDecode(res.toString());
-
-      return List.from(decodedData);
+      return await _apiService.assetApi.getAssetSearchTerms();
     } catch (e) {
       debugPrint("[ERROR] [getUserSuggestedSearchTerms] ${e.toString()}");
       return [];
     }
   }
 
-  Future<List<ImmichAsset>?> searchAsset(String searchTerm) async {
+  Future<List<AssetResponseDto>?> searchAsset(String searchTerm) async {
     try {
-      var res = await _networkService.postRequest(
-        url: "asset/search",
-        data: {"searchTerm": searchTerm},
-      );
-
-      List<dynamic> decodedData = jsonDecode(res.toString());
-
-      List<ImmichAsset> result = List.from(decodedData.map((a) => ImmichAsset.fromMap(a)));
-
-      return result;
+      return await _apiService.assetApi
+          .searchAsset(SearchAssetDto(searchTerm: searchTerm));
     } catch (e) {
       debugPrint("[ERROR] [searchAsset] ${e.toString()}");
       return null;
     }
   }
 
-  Future<List<CuratedLocation>?> getCuratedLocation() async {
+  Future<List<CuratedLocationsResponseDto>?> getCuratedLocation() async {
     try {
-      var res = await _networkService.getRequest(url: "asset/allLocation");
+      var locations = await _apiService.assetApi.getCuratedLocations();
 
-      List<dynamic> decodedData = jsonDecode(res.toString());
-
-      List<CuratedLocation> result = List.from(decodedData.map((a) => CuratedLocation.fromMap(a)));
-
-      return result;
+      return locations;
     } catch (e) {
-      debugPrint("[ERROR] [getCuratedLocation] ${e.toString()}");
-      throw Error();
+      debugPrint("Error [getCuratedLocation] ${e.toString()}");
+      return [];
     }
   }
 
-  Future<List<CuratedObject>?> getCuratedObjects() async {
+  Future<List<CuratedObjectsResponseDto>?> getCuratedObjects() async {
     try {
-      var res = await _networkService.getRequest(url: "asset/allObjects");
-
-      List<dynamic> decodedData = jsonDecode(res.toString());
-
-      List<CuratedObject> result = List.from(decodedData.map((a) => CuratedObject.fromMap(a)));
-
-      return result;
+      return await _apiService.assetApi.getCuratedObjects();
     } catch (e) {
-      debugPrint("[ERROR] [CuratedObject] ${e.toString()}");
-      throw Error();
+      debugPrint("Error [getCuratedObjects] ${e.toString()}");
+      throw [];
     }
   }
 }

mobile/lib/modules/search/ui/search_bar.dart

@@ -1,10 +1,15 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/search/providers/search_page_state.provider.dart';
 
 class SearchBar extends HookConsumerWidget with PreferredSizeWidget {
-  SearchBar({Key? key, required this.searchFocusNode, required this.onSubmitted}) : super(key: key);
+  SearchBar({
+    Key? key,
+    required this.searchFocusNode,
+    required this.onSubmitted,
+  }) : super(key: key);
 
   final FocusNode searchFocusNode;
   final Function(String) onSubmitted;
@@ -23,7 +28,8 @@ class SearchBar extends HookConsumerWidget with PreferredSizeWidget {
                 ref.watch(searchPageStateProvider.notifier).disableSearch();
                 searchTermController.clear();
               },
-              icon: const Icon(Icons.arrow_back_ios_rounded))
+              icon: const Icon(Icons.arrow_back_ios_rounded),
+            )
           : const Icon(Icons.search_rounded),
       title: TextField(
         controller: searchTermController,
@@ -45,12 +51,12 @@ class SearchBar extends HookConsumerWidget with PreferredSizeWidget {
         onChanged: (value) {
           ref.watch(searchPageStateProvider.notifier).setSearchTerm(value);
         },
-        decoration: const InputDecoration(
-          hintText: 'Search your photos',
-          enabledBorder: UnderlineInputBorder(
+        decoration: InputDecoration(
+          hintText: 'search_bar_hint'.tr(),
+          enabledBorder: const UnderlineInputBorder(
             borderSide: BorderSide(color: Colors.transparent),
           ),
-          focusedBorder: UnderlineInputBorder(
+          focusedBorder: const UnderlineInputBorder(
             borderSide: BorderSide(color: Colors.transparent),
           ),
         ),