Bump version to 0.21.1 (#1069)

* New translations en.json (French)
Update translations from Crowdin [ci skip]

* New translations en.json (Spanish)
Update translations from Crowdin [ci skip]

* New translations en.json (German)
Update translations from Crowdin [ci skip]

* New translations en.json (Dutch)
Update translations from Crowdin [ci skip]

* New translations en.json (Ukrainian)
Update translations from Crowdin [ci skip]

.env.example

@@ -14,9 +14,9 @@
 # Docker containers to apply the changes.
 # ----------------------------------------------------------------------------
 
-# Set the ports that your AliasVault will be accessible at.
-# These are the default ports that will be used by the `reverse-proxy` and `smtp` containers.
-# You can change these to any other ports that are available on your system.
+# Configure the network ports used by AliasVault by the `reverse-proxy` and `smtp` containers.
+# You can change these if the defaults are in use on your system.
+# After making changes, re-run the install script to apply them.
 HTTP_PORT=80
 HTTPS_PORT=443
 SMTP_PORT=25

.github/actions/build-android-app/action.yml

@@ -0,0 +1,132 @@
+name: "Build Android App"
+description: "Builds Android APK/AAB, optionally signs and uploads to GitHub Release"
+inputs:
+  run_tests:
+    description: "Whether to run Android unit tests"
+    required: false
+    default: "false"
+  signed:
+    description: "Whether to sign the Android build"
+    required: false
+    default: "false"
+  upload_to_release:
+    description: "Whether to upload the APK to GitHub Release"
+    required: false
+    default: "false"
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: apps/mobile-app/package-lock.json
+
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Extract version
+      run: |
+        VERSION=$(node -p "require('./app.json').expo.version")
+        echo "VERSION=$VERSION" >> $GITHUB_ENV
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Setup Java
+      uses: actions/setup-java@v3
+      with:
+        distribution: 'temurin'
+        java-version: '17'
+
+    - name: Setup Android SDK
+      uses: android-actions/setup-android@v3
+
+    - name: Build JS bundle (Expo)
+      run: |
+        mkdir -p build
+        npx expo export \
+          --dev \
+          --output-dir ./build \
+          --platform android
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Run Android Unit Tests
+      if: ${{ inputs.run_tests == 'true' }}
+      run: |
+        cd android
+        ./gradlew :app:testDebugUnitTest --tests "net.aliasvault.app.*"
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Upload Android Test Reports
+      if: ${{ inputs.run_tests == 'true' }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: android-test-reports
+        path: apps/mobile-app/android/app/build/reports/tests/testDebugUnitTest/
+        retention-days: 7
+
+    - name: Decode keystore
+      if: ${{ inputs.signed == 'true' }}
+      run: echo "${{ env.ANDROID_KEYSTORE_BASE64 }}" | base64 --decode > android/app/keystore.jks
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Configure signing
+      if: ${{ inputs.signed == 'true' }}
+      run: |
+        cat >> android/gradle.properties <<EOF
+        ALIASVAULT_UPLOAD_STORE_FILE=keystore.jks
+        ALIASVAULT_UPLOAD_KEY_ALIAS=${{ env.ANDROID_KEY_ALIAS }}
+        ALIASVAULT_UPLOAD_STORE_PASSWORD=${{ env.ANDROID_KEYSTORE_PASSWORD }}
+        ALIASVAULT_UPLOAD_KEY_PASSWORD=${{ env.ANDROID_KEY_PASSWORD }}
+        EOF
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Build APK & AAB (Release only if signed)
+      if: ${{ inputs.signed == 'true' }}
+      run: |
+        cd android
+        ./gradlew bundleRelease
+        ./gradlew assembleRelease
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Rename APK and AAB files
+      if: ${{ inputs.signed == 'true' }}
+      run: |
+        mv android/app/build/outputs/apk/release/app-release.apk android/app/build/outputs/apk/release/aliasvault-${VERSION}-android.apk
+        mv android/app/build/outputs/bundle/release/app-release.aab android/app/build/outputs/bundle/release/aliasvault-${VERSION}-android.aab
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Upload AAB as artifact
+      if: ${{ inputs.signed == 'true' }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: aliasvault-${{ env.VERSION }}-android.aab
+        path: apps/mobile-app/android/app/build/outputs/bundle/release/aliasvault-${{ env.VERSION }}-android.aab
+        retention-days: 14
+
+    - name: Upload APK as artifact
+      if: ${{ inputs.signed == 'true' }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: aliasvault-${{ env.VERSION }}-android.apk
+        path: apps/mobile-app/android/app/build/outputs/apk/release/aliasvault-${{ env.VERSION }}-android.apk
+        retention-days: 14
+
+    - name: Upload APK to release
+      if: ${{ inputs.upload_to_release == 'true' }}
+      uses: softprops/action-gh-release@v2
+      with:
+        files: apps/mobile-app/android/app/build/outputs/apk/release/aliasvault-${{ env.VERSION }}-android.apk
+      env:
+        GITHUB_TOKEN: ${{ env.GITHUB_TOKEN }}
+
+

.github/actions/build-browser-extension/action.yml

@@ -0,0 +1,104 @@
+name: "Build Browser Extension"
+description: "Builds, tests, lints, zips, and optionally uploads a browser extension"
+inputs:
+  browser:
+    description: "Target browser to build for (chrome, firefox, edge)"
+    required: true
+  upload_to_release:
+    description: "Whether to upload the resulting zip to GitHub Release"
+    required: false
+    default: "false"
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: apps/browser-extension/package-lock.json
+
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Build extension
+      run: npm run build:${{ inputs.browser }}
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Run tests
+      run: npm run test
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Run linting
+      run: npm run lint
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Zip Extension
+      run: npm run zip:${{ inputs.browser }}
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Extract version
+      run: |
+        VERSION=$(node -p "require('./package.json').version")
+        echo "VERSION=$VERSION" >> $GITHUB_ENV
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Unzip extension
+      run: |
+        mkdir -p dist/${{ inputs.browser }}-unpacked
+        unzip dist/aliasvault-browser-extension-${{ env.VERSION }}-${{ inputs.browser }}.zip -d dist/${{ inputs.browser }}-unpacked
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Upload artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: aliasvault-${{ env.VERSION }}-${{ inputs.browser }}
+        path: apps/browser-extension/dist/${{ inputs.browser }}-unpacked
+
+    - name: Unzip and upload Firefox sources
+      if: ${{ inputs.browser == 'firefox' }}
+      run: |
+        mkdir -p dist/sources-unpacked
+        unzip dist/aliasvault-browser-extension-${{ env.VERSION }}-sources.zip -d dist/sources-unpacked
+      shell: bash
+      working-directory: apps/browser-extension
+
+    - name: Upload Firefox sources artifact
+      if: ${{ inputs.browser == 'firefox' }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: aliasvault-${{ env.VERSION }}-browser-extension-sources
+        path: apps/browser-extension/dist/sources-unpacked
+
+    - name: Rename zip files
+      run: |
+        mv apps/browser-extension/dist/aliasvault-browser-extension-${{ env.VERSION }}-${{ inputs.browser }}.zip apps/browser-extension/dist/aliasvault-${{ env.VERSION }}-${{ inputs.browser }}.zip
+        if [ -f apps/browser-extension/dist/aliasvault-browser-extension-${{ env.VERSION }}-sources.zip ]; then
+          mv apps/browser-extension/dist/aliasvault-browser-extension-${{ env.VERSION }}-sources.zip apps/browser-extension/dist/aliasvault-${{ env.VERSION }}-browser-extension-sources.zip
+        fi
+      shell: bash
+
+    - name: Upload to GitHub Release
+      if: ${{ inputs.upload_to_release == 'true' }}
+      uses: softprops/action-gh-release@v1
+      with:
+        files: |
+          apps/browser-extension/dist/aliasvault-${{ env.VERSION }}-${{ inputs.browser }}.zip
+      env:
+        GITHUB_TOKEN: ${{ env.GITHUB_TOKEN }}
+
+    - name: Upload Firefox sources to Release
+      if: ${{ inputs.upload_to_release == 'true' && inputs.browser == 'firefox' }}
+      uses: softprops/action-gh-release@v1
+      with:
+        files: apps/browser-extension/dist/aliasvault-${{ env.VERSION }}-browser-extension-sources.zip
+      env:
+        GITHUB_TOKEN: ${{ env.GITHUB_TOKEN }}

.github/actions/build-ios-app/action.yml

@@ -0,0 +1,118 @@
+name: "Build iOS App"
+description: "Builds iOS App, optionally signs and uploads to App Store Connect"
+inputs:
+  run_tests:
+    description: "Whether to run iOS unit tests"
+    required: false
+    default: "false"
+  signed:
+    description: "Whether to sign the iOS build"
+    required: false
+    default: "false"
+  upload_to_app_store_connect:
+    description: "Whether to upload the iOS App to App Store Connect"
+    required: false
+    default: "false"
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: apps/mobile-app/package-lock.json
+
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Extract version
+      run: |
+        VERSION=$(node -p "require('./app.json').expo.version")
+        echo "VERSION=$VERSION" >> $GITHUB_ENV
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Setup Ruby
+      uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: '3.2'
+        bundler-cache: true
+
+    - name: Install Fastlane
+      run: gem install fastlane
+      shell: bash
+
+    - name: Install CocoaPods
+      run: |
+        sudo gem install cocoapods
+      shell: bash
+
+    - name: Create ASC private key file
+      if: ${{ inputs.signed == 'true' }}
+      run: |
+        mkdir -p $RUNNER_TEMP/asc
+        echo "${{ env.ASC_PRIVATE_KEY_BASE64 }}" | base64 --decode > $RUNNER_TEMP/asc/AuthKey.p8
+      shell: bash
+
+    - name: Install CocoaPods
+      run: |
+        cd ios
+        pod install
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Build iOS IPA
+      if: ${{ inputs.signed == 'true' }}
+      env:
+        IDEFileSystemSynchronizedGroupsAreEnabled: NO
+        XCODE_WORKSPACE: AliasVault.xcworkspace
+        XCODE_SCHEME: AliasVault
+        XCODE_CONFIGURATION: Release
+        XCODE_ARCHIVE_PATH: AliasVault.xcarchive
+        XCODE_EXPORT_PATH: ./build
+        XCODE_SKIP_FILESYSTEM_SYNC: true
+      run: |
+        cd ios
+        xcodebuild clean -workspace "$XCODE_WORKSPACE" \
+          -scheme "$XCODE_SCHEME" \
+          -configuration "$XCODE_CONFIGURATION"
+        xcodebuild -workspace "$XCODE_WORKSPACE" \
+          -scheme "$XCODE_SCHEME" \
+          -configuration "$XCODE_CONFIGURATION" \
+          -archivePath "$XCODE_ARCHIVE_PATH" \
+          -destination 'generic/platform=iOS' \
+          -allowProvisioningUpdates \
+          -authenticationKeyPath $RUNNER_TEMP/asc/AuthKey.p8 \
+          -authenticationKeyID ${{ env.ASC_KEY_ID }} \
+          -authenticationKeyIssuerID ${{ env.ASC_ISSUER_ID }} \
+          archive
+        xcodebuild -exportArchive \
+          -archivePath "$XCODE_ARCHIVE_PATH" \
+          -exportOptionsPlist ../exportOptions.plist \
+          -exportPath "$XCODE_EXPORT_PATH"
+      shell: bash
+      working-directory: apps/mobile-app
+
+    - name: Upload IPA as artifact
+      if: ${{ inputs.signed == 'true' }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: aliasvault-${{ env.VERSION }}-ios.ipa
+        path: apps/mobile-app/ios/build/AliasVault.ipa
+        retention-days: 14
+
+    - name: Upload to App Store Connect via Fastlane
+      if: ${{ inputs.upload_to_app_store_connect == 'true' }}
+      env:
+        ASC_KEY_ID: ${{ env.ASC_KEY_ID }}
+        ASC_ISSUER_ID: ${{ env.ASC_ISSUER_ID }}
+      run: |
+        cd apps/mobile-app/ios
+        fastlane pilot upload \
+          --ipa "./build/AliasVault.ipa" \
+          --api_key_path "$RUNNER_TEMP/asc/AuthKey.p8" \
+          --skip_waiting_for_build_processing true
+      shell: bash

.github/workflows/browser-extension-build.yml

@@ -12,157 +12,76 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  build-chrome-extension:
+  build-shared-libraries:
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: browser-extension
-
     steps:
       - uses: actions/checkout@v4
 
-      - name: Get short SHA
-        id: vars
-        run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
-
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: browser-extension/package-lock.json
 
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build extension
-        run: npm run build:chrome
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Zip Chrome Extension
-        run: npm run zip:chrome
-
-      - name: Unzip for artifact
+      - name: Build and distribute shared libraries
         run: |
-          mkdir -p dist/chrome-unpacked
-          unzip dist/aliasvault-browser-extension-*-chrome.zip -d dist/chrome-unpacked
+          cd ./shared
+          chmod +x build-and-distribute.sh
+          ./build-and-distribute.sh
 
-      - name: Upload dist artifact Chrome
-        uses: actions/upload-artifact@v4
+      - name: Verify shared library distribution
+        run: |
+          # Check if files exist and were recently modified
+          TARGET_DIRS=(
+            "apps/browser-extension/src/utils/dist/shared/identity-generator"
+            "apps/browser-extension/src/utils/dist/shared/password-generator"
+            "apps/browser-extension/src/utils/dist/shared/models"
+            "apps/browser-extension/src/utils/dist/shared/vault-sql"
+          )
+
+          for dir in "${TARGET_DIRS[@]}"; do
+            if [ ! -d "$dir" ]; then
+              echo "❌ Directory $dir does not exist"
+              exit 1
+            fi
+
+            # Check if files were modified in the last 5 minutes
+            find "$dir" -type f -mmin -5 | grep -q . || {
+              echo "❌ Files in $dir were not recently modified"
+              exit 1
+            }
+          done
+
+          echo "✅ Shared library distribution verified"
+
+  build-chrome-extension:
+    needs: build-shared-libraries
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build Chrome Extension
+        uses: ./.github/actions/build-browser-extension
         with:
-          name: aliasvault-browser-extension-${{ github.event_name == 'release' && github.ref_name || (github.ref_name == 'main' && format('main-{0}', steps.vars.outputs.sha_short) || steps.vars.outputs.sha_short) }}-chrome
-          path: browser-extension/dist/chrome-unpacked
-
-    outputs:
-      sha_short: ${{ steps.vars.outputs.sha_short }}
+          browser: chrome
 
   build-firefox-extension:
+    needs: build-shared-libraries
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: browser-extension
-
     steps:
       - uses: actions/checkout@v4
 
-      - name: Get short SHA
-        id: vars
-        run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Build Firefox Extension
+        uses: ./.github/actions/build-browser-extension
         with:
-          node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: browser-extension/package-lock.json
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build extension
-        run: npm run build:firefox
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Zip Firefox Extension
-        run: npm run zip:firefox
-
-      - name: Unzip for artifact
-        run: |
-          mkdir -p dist/firefox-unpacked
-          unzip dist/aliasvault-browser-extension-*-firefox.zip -d dist/firefox-unpacked
-          mkdir -p dist/sources-unpacked
-          unzip dist/aliasvault-browser-extension-*-sources.zip -d dist/sources-unpacked
-
-      - name: Upload dist artifact Firefox
-        uses: actions/upload-artifact@v4
-        with:
-          name: aliasvault-browser-extension-${{ github.event_name == 'release' && github.ref_name || (github.ref_name == 'main' && format('main-{0}', steps.vars.outputs.sha_short) || steps.vars.outputs.sha_short) }}-firefox
-          path: browser-extension/dist/firefox-unpacked
-
-      - name: Upload dist artifact Firefox sources
-        uses: actions/upload-artifact@v4
-        with:
-          name: aliasvault-browser-extension-${{ github.event_name == 'release' && github.ref_name || (github.ref_name == 'main' && format('main-{0}', steps.vars.outputs.sha_short) || steps.vars.outputs.sha_short) }}-sources
-          path: browser-extension/dist/sources-unpacked
-
-    outputs:
-      sha_short: ${{ steps.vars.outputs.sha_short }}
+          browser: firefox
 
   build-edge-extension:
+    needs: build-shared-libraries
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: browser-extension
-
     steps:
       - uses: actions/checkout@v4
 
-      - name: Get short SHA
-        id: vars
-        run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Build Edge Extension
+        uses: ./.github/actions/build-browser-extension
         with:
-          node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: browser-extension/package-lock.json
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build extension
-        run: npm run build:edge
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Zip Edge Extension
-        run: npm run zip:edge
-
-      - name: Unzip for artifact
-        run: |
-          mkdir -p dist/edge-unpacked
-          unzip dist/aliasvault-browser-extension-*-edge.zip -d dist/edge-unpacked
-
-      - name: Upload dist artifact Edge
-        uses: actions/upload-artifact@v4
-        with:
-          name: aliasvault-browser-extension-${{ github.event_name == 'release' && github.ref_name || (github.ref_name == 'main' && format('main-{0}', steps.vars.outputs.sha_short) || steps.vars.outputs.sha_short) }}-edge
-          path: browser-extension/dist/edge-unpacked
-
-    outputs:
-      sha_short: ${{ steps.vars.outputs.sha_short }}
+          browser: edge

.github/workflows/docker-build.yml

@@ -0,0 +1,238 @@
+name: Docker Pull and Build
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  docker-compose-pull:
+    name: Docker Compose Pull Test
+    runs-on: ubuntu-latest
+
+    services:
+      docker:
+        image: docker:26.0.0
+        options: --privileged
+
+    steps:
+      - name: Get repository and branch information
+        id: repo-info
+        run: |
+          if [ "${{ github.event_name }}" = "pull_request" ] && [ "${{ github.event.pull_request.head.repo.fork }}" = "true" ]; then
+            echo "REPO_FULL_NAME=lanedirt/AliasVault" >> $GITHUB_ENV
+            echo "BRANCH_NAME=main" >> $GITHUB_ENV
+          else
+            echo "REPO_FULL_NAME=${GITHUB_REPOSITORY}" >> $GITHUB_ENV
+            echo "BRANCH_NAME=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_ENV
+          fi
+
+      - uses: actions/checkout@v2
+
+      - name: Check local docker-compose.yml for :latest tags
+        run: |
+          # Check for explicit version tags instead of :latest
+          if grep -E "ghcr\.io/lanedirt/aliasvault-[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml; then
+            echo "❌ Error: docker-compose.yml contains explicit version tags instead of :latest"
+            echo "Found the following explicit versions:"
+            grep -E "ghcr\.io/lanedirt/aliasvault-[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml
+            echo ""
+            echo "All AliasVault images in docker-compose.yml must use ':latest' tags, not explicit versions."
+            echo "Please update docker-compose.yml to use ':latest' for all AliasVault images."
+            exit 1
+          fi
+
+          echo "✅ docker-compose.yml correctly uses :latest tags for all AliasVault images"
+
+      - name: Download install script from current branch
+        run: |
+          INSTALL_SCRIPT_URL="https://raw.githubusercontent.com/$REPO_FULL_NAME/$BRANCH_NAME/install.sh"
+          echo "Downloading install script from: $INSTALL_SCRIPT_URL"
+          curl -f -o install.sh "$INSTALL_SCRIPT_URL"
+
+      - name: Create .env file with custom SMTP port
+        run: echo "SMTP_PORT=2525" > .env
+
+      - name: Set permissions and run install.sh (install)
+        id: install_script
+        run: |
+          chmod +x install.sh
+          {
+            ./install.sh install --verbose
+            exit_code=$?
+            if [ $exit_code -eq 2 ]; then
+              echo "skip_remaining=true" >> $GITHUB_OUTPUT
+              true
+            elif [ $exit_code -ne 0 ]; then
+              false
+            fi
+          } || {
+            if [ $exit_code -eq 2 ]; then
+              echo "skip_remaining=true" >> $GITHUB_OUTPUT
+              true
+            else
+              exit $exit_code
+            fi
+          }
+
+      - name: Run docker compose up
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        run: docker compose -f docker-compose.yml up -d
+
+      - name: Wait for services
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        run: sleep 10
+
+      - name: Test WASM App
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 2
+          max_attempts: 3
+          command: |
+            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443)
+            if [ "$http_code" -ne 200 ]; then
+              echo "WASM app failed with $http_code"
+              exit 1
+            fi
+
+      - name: Test WebApi
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 2
+          max_attempts: 3
+          command: |
+            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443/api)
+            if [ "$http_code" -ne 200 ]; then
+              echo "WebApi failed with $http_code"
+              exit 1
+            fi
+
+      - name: Test Admin App
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 2
+          max_attempts: 3
+          command: |
+            http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443/admin/user/login)
+            if [ "$http_code" -ne 200 ]; then
+              echo "Admin app failed with $http_code"
+              exit 1
+            fi
+
+      - name: Test SMTP
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 2
+          max_attempts: 3
+          command: |
+            if ! nc -zv localhost 2525 2>&1 | grep -q 'succeeded'; then
+              echo "SMTP failed"
+              exit 1
+            fi
+
+      - name: Test reset-admin-password output
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        run: |
+          output=$(./install.sh reset-admin-password | sed 's/\x1b\[[0-9;]*m//g')
+          if ! echo "$output" | grep -Eq '^\s*Password: [A-Za-z0-9+/=]{8,}'; then
+            echo "Invalid reset-admin-password output"
+            exit 1
+          fi
+
+  docker-compose-build:
+    name: Docker Compose Build Test
+    runs-on: ubuntu-latest
+
+    services:
+      docker:
+        image: docker:26.0.0
+        options: --privileged
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Check local docker-compose.yml for :latest tags
+        run: |
+          # Check for explicit version tags instead of :latest
+          if grep -E "ghcr\.io/lanedirt/aliasvault-[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml; then
+            echo "❌ Error: docker-compose.yml contains explicit version tags instead of :latest"
+            echo "Found the following explicit versions:"
+            grep -E "ghcr\.io/lanedirt/aliasvault-[^:]+:[0-9]+\.[0-9]+\.[0-9]+" docker-compose.yml
+            echo ""
+            echo "All AliasVault images in docker-compose.yml must use ':latest' tags, not explicit versions."
+            echo "Please update docker-compose.yml to use ':latest' for all AliasVault images."
+            exit 1
+          fi
+
+          echo "✅ docker-compose.yml correctly uses :latest tags for all AliasVault images"
+
+      - name: Create .env file with custom SMTP port
+        run: echo "SMTP_PORT=2525" > .env
+
+      - name: Set permissions and run install.sh build
+        run: |
+          chmod +x install.sh
+          ./install.sh build --verbose
+
+      - name: Test services are responding
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 5
+          max_attempts: 5
+          command: |
+            sleep 15
+            declare -A endpoints=(
+              ["WASM"]="https://localhost:443"
+              ["WebApi"]="https://localhost:443/api"
+              ["Admin"]="https://localhost:443/admin/user/login"
+            )
+            failed=false
+            for name in "${!endpoints[@]}"; do
+              url="${endpoints[$name]}"
+              echo "Testing $name at $url"
+              response=$(curl -k -s -w "\nHTTP_CODE=%{http_code}" "$url")
+              http_code=$(echo "$response" | grep "HTTP_CODE=" | cut -d= -f2)
+              if [ "$http_code" -ne 200 ]; then
+                echo "❌ $name failed with $http_code"
+                failed=true
+              else
+                echo "✅ $name passed"
+              fi
+            done
+
+            echo "Testing SMTP on port 2525"
+            if ! nc -zv localhost 2525 2>&1 | grep -q 'succeeded'; then
+              echo "❌ SMTP failed"
+              failed=true
+            else
+              echo "✅ SMTP passed"
+            fi
+
+            if [ "$failed" = true ]; then
+              echo "Dumping logs"
+              docker compose logs admin
+              docker compose logs api
+              docker compose logs client
+              docker compose logs smtp
+              docker compose logs reverse-proxy
+              docker compose restart
+              exit 1
+            fi
+
+      - name: Test reset-admin-password output
+        if: ${{ !steps.install_script.outputs.skip_remaining }}
+        run: |
+          output=$(./install.sh reset-admin-password | sed 's/\x1b\[[0-9;]*m//g')
+          if ! echo "$output" | grep -Eq '^\s*Password: [A-Za-z0-9+/=]{8,}'; then
+            echo "Invalid reset-admin-password output"
+            exit 1
+          fi

.github/workflows/docker-compose-build.yml

@@ -1,107 +0,0 @@
-name: Docker Compose Build
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  test-docker:
-    runs-on: ubuntu-latest
-
-    services:
-      docker:
-        image: docker:26.0.0
-        options: --privileged
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Create .env file with custom SMTP port as port 25 is not allowed in GitHub Actions
-        run: |
-          echo "SMTP_PORT=2525" > .env
-
-      - name: Set permissions and run install.sh
-        run: |
-          chmod +x install.sh
-          ./install.sh build --verbose
-
-      - name: Test if services are responding
-        uses: nick-fields/retry@v3
-        with:
-          timeout_minutes: 5
-          max_attempts: 5
-          command: |
-            sleep 15
-
-            # Array of endpoints to test
-            declare -A endpoints=(
-              ["WASM"]="https://localhost:443"
-              ["WebApi"]="https://localhost:443/api"
-              ["Admin"]="https://localhost:443/admin/user/login"
-            )
-
-            failed=false
-
-            # Test HTTP endpoints
-            for name in "${!endpoints[@]}"; do
-              url="${endpoints[$name]}"
-              echo "Testing $name at $url"
-
-              # Store both response body and HTTP code
-              response=$(curl -k -s -w "\nHTTP_CODE=%{http_code}" "$url")
-              http_code=$(echo "$response" | grep "HTTP_CODE=" | cut -d= -f2)
-              body=$(echo "$response" | sed '$d')  # Remove the last line (HTTP_CODE)
-
-              if [ "$http_code" -ne 200 ]; then
-                echo "❌ $name failed with HTTP $http_code at $url"
-                echo "Response body:"
-                echo "$body"
-                failed=true
-              else
-                echo "✅ $name responded with HTTP 200"
-              fi
-            done
-
-            # Test SMTP
-            echo "Testing SmtpService at localhost:2525"
-            if ! nc -zv localhost 2525 2>&1 | grep -q 'succeeded'; then
-              echo "❌ SmtpService failed to respond on port 2525"
-              failed=true
-            else
-              echo "✅ SmtpService responded successfully"
-            fi
-
-            # Exit with error if any service failed
-            if [ "$failed" = true ]; then
-              # Get container logs
-              echo "Container Logs admin:"
-              docker compose logs admin
-              echo "Container Logs api:"
-              docker compose logs api
-              echo "Container Logs client:"
-              docker compose logs client
-              echo "Container Logs smtp:"
-              docker compose logs smtp
-              echo "Container Logs reverse-proxy:"
-              docker compose logs reverse-proxy
-
-              # Restart containers for next test in case of failure
-              docker compose restart
-              exit 1
-            fi
-
-      - name: Test install.sh reset-admin-password output
-        run: |
-          output=$(./install.sh reset-admin-password)
-          if ! echo "$output" | grep -E '.*New admin password: [A-Za-z0-9+/=]{8,}.*'; then
-            echo "Password reset output format is incorrect"
-            echo "Expected: 'New admin password: <at least 8 base64 chars>'"
-            echo "Actual: $output"
-            exit 1
-          fi

.github/workflows/docker-compose-pull.yml

@@ -1,150 +0,0 @@
-# This workflow will test if pulling the latest Docker Compose containers from the registry works.
-name: Docker Compose Pull
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  test-docker:
-    runs-on: ubuntu-latest
-
-    services:
-      docker:
-        image: docker:26.0.0
-        options: --privileged
-
-    steps:
-      - name: Get repository and branch information
-        id: repo-info
-        run: |
-          # Check if this is a PR from a fork
-          if [ "${{ github.event_name }}" = "pull_request" ] && [ "${{ github.event.pull_request.head.repo.fork }}" = "true" ]; then
-            # If PR is from a fork, use main branch from lanedirt/AliasVault
-            echo "REPO_FULL_NAME=lanedirt/AliasVault" >> $GITHUB_ENV
-            echo "BRANCH_NAME=main" >> $GITHUB_ENV
-          else
-            # Otherwise use the current repository and branch
-            echo "REPO_FULL_NAME=${GITHUB_REPOSITORY}" >> $GITHUB_ENV
-            echo "BRANCH_NAME=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_ENV
-          fi
-
-      - name: Download install script from current branch
-        run: |
-          INSTALL_SCRIPT_URL="https://raw.githubusercontent.com/$REPO_FULL_NAME/$BRANCH_NAME/install.sh"
-          echo "Downloading install script from: $INSTALL_SCRIPT_URL"
-          curl -f -o install.sh "$INSTALL_SCRIPT_URL"
-
-      - name: Create .env file with custom SMTP port as port 25 is not allowed in GitHub Actions
-        run: |
-          echo "SMTP_PORT=2525" > .env
-
-      - name: Set permissions and run install.sh
-        id: install_script
-        run: |
-          chmod +x install.sh
-          {
-            ./install.sh install --verbose
-            exit_code=$?
-            if [ $exit_code -eq 2 ]; then
-              echo "Test skipped: Install script version is newer than latest release version. This is expected behavior if the install script is run on a branch that is ahead of the latest release."
-              echo "skip_remaining=true" >> $GITHUB_OUTPUT
-              true  # Force success exit code
-            elif [ $exit_code -ne 0 ]; then
-              false  # Propagate failure
-            fi
-          } || {
-            if [ $exit_code -eq 2 ]; then
-              echo "skip_remaining=true" >> $GITHUB_OUTPUT
-              true  # Version mismatch is okay
-            else
-              exit $exit_code  # Propagate other failures
-            fi
-          }
-
-      - name: Set up Docker Compose
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        run: docker compose -f docker-compose.yml up -d
-
-      - name: Wait for services to be up
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        run: |
-            # Wait for a few seconds
-            sleep 10
-
-      - name: Test if localhost:443 (WASM app) responds
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        uses: nick-fields/retry@v3
-        with:
-            timeout_minutes: 2
-            max_attempts: 3
-            command: |
-                http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443)
-                if [ "$http_code" -ne 200 ]; then
-                  echo "Service did not respond with 200 OK. Check if client app and/or nginx is configured correctly."
-                  exit 1
-                else
-                  echo "Service responded with 200 OK"
-                fi
-
-      -   name: Test if localhost:443/api (WebApi) responds
-          if: ${{ !steps.install_script.outputs.skip_remaining }}
-          uses: nick-fields/retry@v3
-          with:
-              timeout_minutes: 2
-              max_attempts: 3
-              command: |
-                  http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443/api)
-                  if [ "$http_code" -ne 200 ]; then
-                    echo "Service did not respond with expected 200 OK. Check if WebApi and/or nginx is configured correctly."
-                    exit 1
-                  else
-                    echo "Service responded with $http_code"
-                  fi
-
-      -   name: Test if localhost:443/admin (Admin) responds
-          if: ${{ !steps.install_script.outputs.skip_remaining }}
-          uses: nick-fields/retry@v3
-          with:
-              timeout_minutes: 2
-              max_attempts: 3
-              command: |
-                  http_code=$(curl -k -s -o /dev/null -w "%{http_code}" https://localhost:443/admin/user/login)
-                  if [ "$http_code" -ne 200 ]; then
-                    echo "Service did not respond with expected 200 OK. Check if admin app and/or nginx is configured correctly."
-                    exit 1
-                  else
-                    echo "Service responded with $http_code"
-                  fi
-
-      -   name: Test if localhost:2525 (SmtpService) responds
-          if: ${{ !steps.install_script.outputs.skip_remaining }}
-          uses: nick-fields/retry@v3
-          with:
-              timeout_minutes: 2
-              max_attempts: 3
-              command: |
-                  if ! nc -zv localhost 2525 2>&1 | grep -q 'succeeded'; then
-                    echo "SmtpService did not respond on port 2525. Check if the SmtpService service is running."
-                    exit 1
-                  else
-                    echo "SmtpService responded on port 2525"
-                  fi
-
-      - name: Test install.sh reset-admin-password output
-        if: ${{ !steps.install_script.outputs.skip_remaining }}
-        run: |
-          output=$(./install.sh reset-admin-password)
-          if ! echo "$output" | grep -E '.*New admin password: [A-Za-z0-9+/=]{8,}.*'; then
-            echo "Password reset output format is incorrect. Expected format: 'New admin password: <at least 8 base64 chars>'"
-            echo "Actual output: $output"
-            exit 1
-          else
-            echo "Password reset output format is correct"
-          fi

.github/workflows/dotnet-e2e-admin-tests.yml

@@ -1,50 +0,0 @@
-# This workflow will test if running the E2E Admin tests via Playwright CLI works.
-name: .NET E2E Admin Tests (Playwright)
-
-on:
-    push:
-        branches: [ "main" ]
-    pull_request:
-        branches: [ "main" ]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-    admin-tests:
-        timeout-minutes: 60
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v4
-
-            - name: Setup .NET
-              uses: actions/setup-dotnet@v4
-              with:
-                  dotnet-version: 9.0.x
-
-            - name: Install dependencies
-              run: dotnet workload install wasm-tools
-
-            - name: Build
-              run: dotnet build
-
-            - name: Start dev database
-              run: ./install.sh configure-dev-db start
-
-            - name: Ensure browsers are installed
-              run: pwsh src/Tests/AliasVault.E2ETests/bin/Debug/net9.0/playwright.ps1 install --with-deps
-
-            - name: Run AdminTests with retry
-              uses: nick-fields/retry@v3
-              with:
-                  timeout_minutes: 60
-                  max_attempts: 3
-                  command: dotnet test src/Tests/AliasVault.E2ETests --no-build --verbosity normal --filter "Category=AdminTests"
-
-            - name: Upload Test Results
-              if: always()
-              uses: actions/upload-artifact@v4
-              with:
-                  name: admin-test-results
-                  path: TestResults-Admin.xml

.github/workflows/dotnet-e2e-client-tests.yml

@@ -1,47 +0,0 @@
-# This workflow will test if running the E2E Client tests via Playwright CLI works.
-name: .NET E2E Client Tests (Playwright with Sharding)
-
-on:
-    push:
-        branches: [ "main" ]
-    pull_request:
-        branches: [ "main" ]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-    client-tests:
-        timeout-minutes: 60
-        runs-on: ubuntu-latest
-        strategy:
-            fail-fast: false
-            matrix:
-                shard: [1, 2, 3, 4, 5]
-        steps:
-            - uses: actions/checkout@v4
-
-            - name: Setup .NET
-              uses: actions/setup-dotnet@v4
-              with:
-                  dotnet-version: 9.0.x
-
-            - name: Install dependencies
-              run: dotnet workload install wasm-tools
-
-            - name: Build
-              run: dotnet build
-
-            - name: Start dev database
-              run: ./install.sh configure-dev-db start
-
-            - name: Ensure browsers are installed
-              run: pwsh src/Tests/AliasVault.E2ETests/bin/Debug/net9.0/playwright.ps1 install --with-deps
-
-            - name: Run ClientTests with retry (Shard ${{ matrix.shard }})
-              uses: nick-fields/retry@v3
-              with:
-                  timeout_minutes: 60
-                  max_attempts: 3
-                  command: dotnet test src/Tests/AliasVault.E2ETests --no-build --verbosity normal --filter "FullyQualifiedName~.E2ETests.Tests.Client.Shard${{ matrix.shard }}."

.github/workflows/dotnet-e2e-tests.yml

@@ -0,0 +1,88 @@
+# This workflow will test if running the e2e tests works.
+name: E2E Tests
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  admin-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: 9.0.x
+
+      - name: Install dependencies
+        run: dotnet workload install wasm-tools
+
+      - name: Build
+        working-directory: apps/server
+        run: dotnet build
+
+      - name: Start dev database
+        run: ./install.sh configure-dev-db start
+
+      - name: Ensure browsers are installed
+        working-directory: apps/server
+        run: pwsh Tests/AliasVault.E2ETests/bin/Debug/net9.0/playwright.ps1 install --with-deps
+
+      - name: Run AdminTests with retry
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 60
+          max_attempts: 3
+          command: cd apps/server && dotnet test Tests/AliasVault.E2ETests --no-build --verbosity normal --filter "Category=AdminTests"
+
+      - name: Upload Test Results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: admin-test-results
+          path: TestResults-Admin.xml
+
+  client-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3, 4, 5]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v4
+        with:
+          dotnet-version: 9.0.x
+
+      - name: Install dependencies
+        run: dotnet workload install wasm-tools
+
+      - name: Build
+        working-directory: apps/server
+        run: dotnet build
+
+      - name: Start dev database
+        run: ./install.sh configure-dev-db start
+
+      - name: Ensure browsers are installed
+        working-directory: apps/server
+        run: pwsh Tests/AliasVault.E2ETests/bin/Debug/net9.0/playwright.ps1 install --with-deps
+
+      - name: Run ClientTests with retry (Shard ${{ matrix.shard }})
+        uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 60
+          max_attempts: 3
+          command: cd apps/server && dotnet test Tests/AliasVault.E2ETests --no-build --verbosity normal --filter "FullyQualifiedName~.E2ETests.Tests.Client.Shard${{ matrix.shard }}."

.github/workflows/dotnet-integration-tests.yml

@@ -1,5 +1,5 @@
 # This workflow will test if running the integration tests works.
-name: .NET Integration Tests
+name: Integration Tests
 
 on:
   push:
@@ -27,10 +27,12 @@ jobs:
       run: dotnet workload install wasm-tools
 
     - name: Build
+      working-directory: apps/server
       run: dotnet build
 
     - name: Start dev database
       run: ./install.sh configure-dev-db start
 
     - name: Run integration tests
-      run: dotnet test src/Tests/AliasVault.IntegrationTests --no-build --verbosity normal
+      working-directory: apps/server
+      run: dotnet test Tests/AliasVault.IntegrationTests --no-build --verbosity normal

.github/workflows/dotnet-unit-tests.yml

@@ -1,5 +1,5 @@
 # This workflow will test if running the unit tests works.
-name: .NET Unit Tests
+name: Unit Tests
 
 on:
   push:
@@ -26,10 +26,13 @@ jobs:
       run: dotnet workload install wasm-tools
 
     - name: Restore dependencies
+      working-directory: apps/server
       run: dotnet restore
 
     - name: Build
+      working-directory: apps/server
       run: dotnet build --no-restore
 
     - name: Run unittests
-      run: dotnet test src/Tests/AliasVault.UnitTests --no-build --verbosity normal
+      working-directory: apps/server
+      run: dotnet test Tests/AliasVault.UnitTests --no-build --verbosity normal

.github/workflows/mobile-app-build.yml

@@ -0,0 +1,168 @@
+name: Mobile App Build
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  workflow_dispatch:
+    inputs:
+      build_android_signed:
+        description: 'Build signed Android APK/AAB'
+        required: true
+        type: boolean
+        default: false
+      build_ios_signed:
+        description: 'Build signed iOS IPA'
+        required: true
+        type: boolean
+        default: false
+      upload_to_app_store_connect:
+        description: 'Upload iOS IPA to App Store Connect'
+        required: true
+        type: boolean
+        default: false
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: apps/mobile-app
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: apps/mobile-app/package-lock.json
+
+      - name: Build and distribute shared libraries
+        run: |
+          cd ../../shared
+          chmod +x build-and-distribute.sh
+          ./build-and-distribute.sh
+
+      - name: Verify shared library distribution
+        run: |
+          # Check if files exist and were recently modified
+          TARGET_DIRS=(
+            "utils/dist/shared/identity-generator"
+            "utils/dist/shared/password-generator"
+            "utils/dist/shared/models"
+            "utils/dist/shared/vault-sql"
+          )
+
+          for dir in "${TARGET_DIRS[@]}"; do
+            if [ ! -d "$dir" ]; then
+              echo "❌ Directory $dir does not exist"
+              exit 1
+            fi
+
+            # Check if files were modified in the last 5 minutes
+            find "$dir" -type f -mmin -5 | grep -q . || {
+              echo "❌ Files in $dir were not recently modified"
+              exit 1
+            }
+          done
+
+          echo "✅ Shared library distribution verified"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test
+
+      - name: Run linting
+        run: npm run lint
+
+  build-ios:
+    needs: setup
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: apps/mobile-app
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: apps/mobile-app/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build JS bundle (iOS - Expo)
+        run: |
+          mkdir -p build
+          npx expo export \
+            --dev \
+            --output-dir ./build \
+            --platform ios
+
+  build-android:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Build Android App
+        uses: ./.github/actions/build-android-app
+        with:
+          run_tests: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
+          ANDROID_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
+          ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
+          ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
+
+  build-android-signed:
+    needs: setup
+    if: github.event_name == 'workflow_dispatch' && github.event.inputs.build_android_signed == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Build Android App
+        uses: ./.github/actions/build-android-app
+        with:
+          signed: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
+          ANDROID_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
+          ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
+          ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
+
+  build-ios-signed:
+    needs: setup
+    if: github.event_name == 'workflow_dispatch' && github.event.inputs.build_ios_signed == 'true'
+    runs-on: macos-15
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Build iOS App
+        uses: ./.github/actions/build-ios-app
+        with:
+          signed: true
+          upload_to_app_store_connect: ${{ github.event.inputs.upload_to_app_store_connect }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ASC_PRIVATE_KEY_BASE64: ${{ secrets.ASC_PRIVATE_KEY_BASE64 }}
+          ASC_KEY_ID: ${{ secrets.ASC_KEY_ID }}
+          ASC_ISSUER_ID: ${{ secrets.ASC_ISSUER_ID }}
+          ASC_TEAM_ID: ${{ secrets.ASC_TEAM_ID }}

.github/workflows/release.yml

@@ -24,42 +24,67 @@ jobs:
           files: install.sh
           token: ${{ secrets.GITHUB_TOKEN }}
 
-  package-browser-extensions:
+  build-chrome-extension:
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: browser-extension
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - name: Build Chrome Extension
+        uses: ./.github/actions/build-browser-extension
         with:
-          node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: browser-extension/package-lock.json
+          browser: chrome
+          upload_to_release: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install dependencies
-        run: npm ci
+  build-firefox-extension:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-      - name: Zip extensions
-        run: |
-          npm run zip:chrome
-          npm run zip:firefox
-          npm run zip:edge
-
-      - name: Upload extensions to release
-        uses: softprops/action-gh-release@v2
+      - name: Build Firefox Extension
+        uses: ./.github/actions/build-browser-extension
         with:
-          files: |
-            browser-extension/dist/aliasvault-browser-extension-*-chrome.zip
-            browser-extension/dist/aliasvault-browser-extension-*-firefox.zip
-            browser-extension/dist/aliasvault-browser-extension-*-edge.zip
-            browser-extension/dist/aliasvault-browser-extension-*-sources.zip
-          token: ${{ secrets.GITHUB_TOKEN }}
+          browser: firefox
+          upload_to_release: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build-edge-extension:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Build Edge Extension
+        uses: ./.github/actions/build-browser-extension
+        with:
+          browser: edge
+          upload_to_release: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build-android-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Build Android App
+        uses: ./.github/actions/build-android-app
+        with:
+          signed: true
+          upload_to_release: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
+          ANDROID_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
+          ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
+          ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
 
   build-and-push-docker:
-    needs: [upload-install-script, package-browser-extensions]
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -96,7 +121,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: src/Databases/AliasServerDb/Dockerfile
+          file: apps/server/Databases/AliasServerDb/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-postgres:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-postgres:${{ github.ref_name }}
@@ -105,7 +130,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: src/AliasVault.Api/Dockerfile
+          file: apps/server/AliasVault.Api/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-api:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-api:${{ github.ref_name }}
@@ -114,7 +139,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: src/AliasVault.Client/Dockerfile
+          file: apps/server/AliasVault.Client/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-client:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-client:${{ github.ref_name }}
@@ -123,7 +148,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: src/AliasVault.Admin/Dockerfile
+          file: apps/server/AliasVault.Admin/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-admin:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-admin:${{ github.ref_name }}
@@ -132,7 +157,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: Dockerfile
+          file: apps/server/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-reverse-proxy:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-reverse-proxy:${{ github.ref_name }}
@@ -141,7 +166,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: src/Services/AliasVault.SmtpService/Dockerfile
+          file: apps/server/Services/AliasVault.SmtpService/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-smtp:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-smtp:${{ github.ref_name }}
@@ -150,7 +175,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: src/Services/AliasVault.TaskRunner/Dockerfile
+          file: apps/server/Services/AliasVault.TaskRunner/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
           tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-task-runner:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-task-runner:${{ github.ref_name }}
@@ -159,7 +184,7 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           context: .
-          file: src/Utilities/AliasVault.InstallCli/Dockerfile
+          file: apps/server/Utilities/AliasVault.InstallCli/Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-installcli:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-installcli:${{ github.ref_name }} 
+          tags: ${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-installcli:latest,${{ env.REGISTRY }}/${{ env.REPO_LOWER }}-installcli:${{ github.ref_name }}

.github/workflows/sonarcloud-code-analysis.yml

@@ -58,16 +58,18 @@ jobs:
                   dotnet tool update dotnet-sonarscanner --tool-path .\.sonar\scanner
 
             - name: Build and analyze
+              working-directory: apps/server
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                   SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
               shell: powershell
               run: |
+                  $scanner = "${{ github.workspace }}\.sonar\scanner\dotnet-sonarscanner"
                   if ('${{ github.event_name }}' -eq 'pull_request_target') {
-                      .\.sonar\scanner\dotnet-sonarscanner begin /k:"lanedirt_AliasVault" /o:"lanedirt" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.pullrequest.key=${{ github.event.pull_request.number }} /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.opencover.reportsPaths="**/coverage.opencover.xml" /d:sonar.coverage.exclusions="**Tests*.cs" /d:sonar.exclusions="**/__tests__/test-forms/*.html"
+                      & $scanner begin /k:"lanedirt_AliasVault" /o:"lanedirt" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.pullrequest.key=${{ github.event.pull_request.number }} /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.opencover.reportsPaths="**/coverage.opencover.xml" /d:sonar.coverage.exclusions="**Tests*.cs" /d:sonar.exclusions="**/__tests__/test-forms/*.html,**/dist/shared/**,**/*.sql"
                   } else {
-                      .\.sonar\scanner\dotnet-sonarscanner begin /k:"lanedirt_AliasVault" /o:"lanedirt" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.opencover.reportsPaths="**/coverage.opencover.xml" /d:sonar.coverage.exclusions="**Tests*.cs" /d:sonar.exclusions="**/__tests__/test-forms/*.html"
+                      & $scanner begin /k:"lanedirt_AliasVault" /o:"lanedirt" /d:sonar.token="${{ secrets.SONAR_TOKEN }}" /d:sonar.host.url="https://sonarcloud.io" /d:sonar.cs.opencover.reportsPaths="**/coverage.opencover.xml" /d:sonar.coverage.exclusions="**Tests*.cs" /d:sonar.exclusions="**/__tests__/test-forms/*.html,**/dist/shared/**,**/*.sql"
                   }
                   dotnet build
                   dotnet test -c Release /p:CollectCoverage=true /p:CoverletOutput=coverage /p:CoverletOutputFormat=opencover --filter 'FullyQualifiedName!~AliasVault.E2ETests'
-                  .\.sonar\scanner\dotnet-sonarscanner end /d:sonar.token="${{ secrets.SONAR_TOKEN }}"
+                  & $scanner end /d:sonar.token="${{ secrets.SONAR_TOKEN }}"

.gitignore

@@ -9,7 +9,6 @@
 *.user
 *.userosscache
 *.sln.docstates
-*.code-workspace
 
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
@@ -197,12 +196,7 @@ PublishScripts/
 *.nupkg
 # NuGet Symbol Packages
 *.snupkg
-# The packages folder can be ignored because of Package Restore
-**/[Pp]ackages/*
-# except build/, which is used as an MSBuild target.
-!**/[Pp]ackages/build/
-# Uncomment if necessary however generally it will be regenerated when needed
-#!**/[Pp]ackages/repositories.config
+
 # NuGet v3's project.json files produces more ignorable files
 *.nuget.props
 *.nuget.targets
@@ -384,17 +378,13 @@ FodyWeavers.xsd
 # Codebuddy Rider plugin
 .codebuddy
 
+# Claude Code
+.claude
+CLAUDE.md
+
 # -------------------
 # AliasVault specifics
 # -------------------
-# index.html is generated by the build process from index.template.html and therefore should be ignored
-src/AliasVault.Client/wwwroot/index.html
-
-# appsettings.Development.json is generated by the build process from appsettings.Development.template.json and therefore should be ignored
-src/AliasVault.Client/wwwroot/appsettings.Development.json
-
-# appsettings.Development.json is added manually if needed, it should not be committed.
-src/Tests/AliasVault.E2ETests/appsettings.Development.json
 
 # .env is generated by install.sh and therefore should be ignored
 .env
@@ -405,6 +395,10 @@ install.sh.backup
 # Draw.io diagram temp files
 *.drawio.*
 
+# Dist files
+packages/**/dist/
+*.tsbuildinfo
+
 # Certificates
 certificates/**/*.crt
 certificates/**/*.key
@@ -423,3 +417,13 @@ database/postgres-dev
 
 # Temp files
 temp
+*.zip
+
+# Don't check in .js.map or .mjs.map files. These are generated by the build process in the shared
+# libraries and copied to the application so they can be used for debugging, but we don't need
+# to check them in as it's not needed for the applications to actually run.
+**/*.js.map
+**/*.mjs.map
+
+# Android keystore file (for publishing to Google Play)
+*.keystore

.vscode/AliasVault.code-workspace

@@ -0,0 +1,27 @@
+{
+	"folders": [
+		{
+			"name": "AliasVault",
+			"path": "../"
+		},
+		{
+			"name": "server",
+			"path": "../apps/server"
+		},
+		{
+			"name": "browser-extension",
+			"path": "../apps/browser-extension"
+		},
+		{
+			"name": "mobile-app",
+			"path": "../apps/mobile-app"
+		},
+		{
+			"path": "../docs"
+		},
+		{
+			"path": "../shared"
+		}
+	],
+	"settings": {}
+}

.vscode/launch.json

@@ -1,19 +0,0 @@
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "C#: AliasVault.Client [http]",
-            "type": "dotnet",
-            "request": "launch",
-            "projectPath": "${workspaceFolder}/src/AliasVault.Client/AliasVault.Client.csproj",
-            "launchConfigurationId": "TargetFramework=;http"
-        },
-        {
-            "name": "C#: AliasVault.Api [http]",
-            "type": "dotnet",
-            "request": "launch",
-            "projectPath": "${workspaceFolder}/src/AliasVault.Api/AliasVault.Api.csproj",
-            "launchConfigurationId": "TargetFramework=;http"
-        }
-    ]
-}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "typescript.tsc.autoDetect": "off",
+    "npm.autoDetect": "off",
+    "grunt.autoDetect": "off",
+    "gulp.autoDetect": "off",
+    "jake.autoDetect": "off",
+    "task.autoDetect": "off",
+    "dotnet.autoDetect": "off"
+  }

.vscode/tasks.json

@@ -12,7 +12,7 @@
                 "isDefault": true
             },
             "options": {
-                "cwd": "${workspaceFolder}/src/AliasVault.Api"
+                "cwd": "${workspaceFolder}/apps/server/AliasVault.Api"
             }
         },
         {
@@ -26,7 +26,7 @@
                 "isDefault": true
             },
             "options": {
-                "cwd": "${workspaceFolder}/src/AliasVault.Client"
+                "cwd": "${workspaceFolder}/apps/server/AliasVault.Client"
             }
         },
         {
@@ -40,7 +40,21 @@
                 "isDefault": true
             },
             "options": {
-                "cwd": "${workspaceFolder}/src/AliasVault.Admin"
+                "cwd": "${workspaceFolder}/apps/server/AliasVault.Admin"
+            }
+        },
+        {
+            "label": "Build and watch SMTP Service",
+            "type": "shell",
+            "command": "dotnet watch",
+            "args": [],
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/apps/server/Services/AliasVault.SmtpService"
             }
         },
         {
@@ -50,7 +64,7 @@
             "args": ["run", "build:client-css"],
             "problemMatcher": [],
             "options": {
-                "cwd": "${workspaceFolder}/src/AliasVault.Client"
+                "cwd": "${workspaceFolder}/apps/server/AliasVault.Client"
             },
             "group": {
                 "kind": "build",
@@ -64,7 +78,7 @@
             "args": ["run", "build:admin-css"],
             "problemMatcher": [],
             "options": {
-                "cwd": "${workspaceFolder}/src/AliasVault.Admin"
+                "cwd": "${workspaceFolder}/apps/server/AliasVault.Admin"
             },
             "group": {
                 "kind": "build",
@@ -91,7 +105,7 @@
             "args": ["test"],
             "problemMatcher": "$msCompile",
             "options": {
-                "cwd": "${workspaceFolder}/src/Tests/AliasVault.UnitTests"
+                "cwd": "${workspaceFolder}/apps/server/Tests/AliasVault.UnitTests"
             },
             "group": {
                 "kind": "test",
@@ -105,12 +119,81 @@
             "args": ["run", "dev:chrome"],
             "problemMatcher": [],
             "options": {
-                "cwd": "${workspaceFolder}/browser-extension"
+                "cwd": "${workspaceFolder}/apps/browser-extension"
             },
             "group": {
                 "kind": "build",
                 "isDefault": true
             }
-        }
+        },
+        {
+            "label": "Run debug iOS App (simulator)",
+            "type": "shell",
+            "command": "npx",
+            "args": ["expo", "run:ios"],
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/apps/mobile-app"
+            }
+        },
+        {
+            "label": "Run debug iOS App (device)",
+            "type": "shell",
+            "command": "npx",
+            "args": ["expo", "run:ios", "--device"],
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/apps/mobile-app"
+            }
+        },
+        {
+            "label": "Run release iOS App (device)",
+            "type": "shell",
+            "command": "npx",
+            "args": ["expo", "run:ios", "--device", "--configuration", "Release"],
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/apps/mobile-app"
+            }
+        },
+        {
+            "label": "Run release Android App (device)",
+            "type": "shell",
+            "command": "npx",
+            "args": ["expo", "run:android", "--device", "--variant", "release"],
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/apps/mobile-app"
+            }
+        },
+        {
+            "label": "Build and watch Docs",
+            "type": "shell",
+            "command": "docker compose up",
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "options": {
+                "cwd": "${workspaceFolder}/docs"
+            }
+        },
     ]
 }

CONTRIBUTING.md

@@ -1,14 +1,74 @@
-# Contributing to the source code
-We welcome contributions to AliasVault. Please read the guidelines on the official AliasVault docs website on how to get your local development environment setup and the general contribution guidelines:
+# Contributing to AliasVault
+
+Thanks for your interest in contributing to the AliasVault project! There are a lot of ways to help out.
+
+## Table of Contents
+
+1. [Help spread the word](#1-help-spread-the-word)
+2. [Contributing to Translations](#2-contributing-to-translations)
+3. [Contributing to the Documentation](#3-contributing-to-the-documentation)
+4. [Contributing to the Main Codebase](#4-contributing-to-the-main-codebase)
+   - [4.1 Get in contact](#41-get-in-contact)
+   - [4.2 Set up your local development environment](#42-set-up-your-local-development-environment)
+5. [License and Contributions](#5-license-and-contributions)
+
+---
+
+## 1. Help spread the word
+
+Help grow the AliasVault community by:
+
+- Answering questions and helping users in our [Discord](https://discord.gg/DsaXMTEtpF)
+- Reporting bugs and suggesting improvements
+- Sharing on social media and writing about your experience
+- Creating tutorials and documentation
+- Spreading the word about privacy and self-hosting
+
+## 2. Contributing to Translations
+
+Help make AliasVault accessible to users worldwide by contributing translations! AliasVault is currently available in English and Dutch, but we're looking for volunteers to help translate it into other languages such as German, French, Spanish, Ukrainian, Italian, and more.
+
+AliasVault translations are managed through [Crowdin](https://crowdin.com/), an online translation platform. If you’d like to help translate AliasVault into your native language, please [request access to the Crowdin project](https://crowdin.com/project/aliasvault).
+
+If you're willing to help, we also encourage you to get in contact via [Discord](https://discord.gg/DsaXMTEtpF) to chat (quickest), or contact us via email at [contact@support.aliasvault.net](mailto:contact@support.aliasvault.net) to discuss the language(s) you are willing to contribute to, and so we can answer any technical questions you might have.
+
+Your translation contributions will help make AliasVault more accessible to privacy-conscious users around the world!
+
+## 3. Contributing to the Documentation
+
+The docs are built using Jekyll and automatically deploy to GitHub Pages via GitHub Actions. You can build the docs locally by running `docker compose up` in the `./docs` folder.
+
+The docs site is based on the open-source template called Just The Docs. Find more information about how this template works in the [official docs](https://just-the-docs.github.io/just-the-docs/).
+
+To make changes to the AliasVault documentation please make a PR that directly edits the `docs` markdown files in this repository.
+
+## 4. Contributing to the Main Codebase
+
+### 4.1 Get in contact
+If you're planning to work on a new feature or improvement for AliasVault, we strongly encourage you to get in touch with us first. This ensures that your proposed changes align with the project's direction and increases the likelihood of your work being accepted into the official repository. You can reach us through:
+
+- Opening an issue on GitHub to discuss your proposed changes
+- Reaching out via Discord or email
+- Contacting the maintainers directly
+
+### 4.2 Set up your local development environment
+You can find instructions on how to get your local development environment setup for the different parts of the AliasVault codebase here:
 
 https://docs.aliasvault.net/misc/dev/
 
 > Tip: if the URL above is not available, the raw doc pages can also be found in the `docs` folder in this repository.
 
-## Contributing to the documentation
-The docs are built using Jekyll and automatically deploy to GitHub Pages via GitHub Actions. You can build the docs locally by running `docker compose up` in in the `./docs` folder.
+If you run into any issues, feel free to join our [Discord](https://discord.gg/DsaXMTEtpF) to chat with the maintainers and author.
 
-The docs site is based on the open-source template called Just The Docs. Find more information about how this template works in the [official docs](https://just-the-docs.github.io/just-the-docs/).
+## 5. License and Contributions
 
+AliasVault is licensed under the GNU Affero General Public License v3.0 (AGPLv3). By submitting code, documentation, or other contributions to this project, you agree that:
 
-To make changes to the AliasVault documentation please make a PR that directly edits the `docs` markdown files in this repository.
+1. Your contribution will be licensed under the same AGPLv3 license as the project
+2. You have the legal right to grant this license (e.g., you are the author, or have permission)
+3. You understand that your contribution will be made public under the AGPLv3 terms
+4. You are not expected to provide support or warranties for your contribution
+
+✅ There is no Contributor License Agreement (CLA) required. We believe in a balanced open source model where all contributors are treated equally under the terms of the AGPLv3.
+
+> By opening a pull request, you agree to these terms. Your contributions will be published under the AGPLv3 license.

LICENSE.md

@@ -1,21 +1,660 @@
-MIT License
+# GNU AFFERO GENERAL PUBLIC LICENSE
 
-Copyright (c) 2024 lanedirt
+Version 3, 19 November 2007
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Copyright (C) 2007 Free Software Foundation, Inc.
+<https://fsf.org/>
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+## Preamble
+
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains
+free software for all its users.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing
+under this license.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+## TERMS AND CONDITIONS
+
+### 0. Definitions.
+
+"This License" refers to version 3 of the GNU Affero General Public
+License.
+
+"Copyright" also means copyright-like laws that apply to other kinds
+of works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of
+an exact copy. The resulting work is called a "modified version" of
+the earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user
+through a computer network, with no transfer of a copy, is not
+conveying.
+
+An interactive user interface displays "Appropriate Legal Notices" to
+the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+### 1. Source Code.
+
+The "source code" for a work means the preferred form of the work for
+making modifications to it. "Object code" means any non-source form of
+a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users can
+regenerate automatically from other parts of the Corresponding Source.
+
+The Corresponding Source for a work in source code form is that same
+work.
+
+### 2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not convey,
+without conditions so long as your license otherwise remains in force.
+You may convey covered works to others for the sole purpose of having
+them make modifications exclusively for you, or provide you with
+facilities for running those works, provided that you comply with the
+terms of this License in conveying all material for which you do not
+control copyright. Those thus making or running the covered works for
+you must do so exclusively on your behalf, under your direction and
+control, on terms that prohibit them from making any copies of your
+copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under the
+conditions stated below. Sublicensing is not allowed; section 10 makes
+it unnecessary.
+
+### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such
+circumvention is effected by exercising rights under this License with
+respect to the covered work, and you disclaim any intention to limit
+operation or modification of the work as a means of enforcing, against
+the work's users, your or third parties' legal rights to forbid
+circumvention of technological measures.
+
+### 4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+### 5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these
+conditions:
+
+-   a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+-   b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under
+    section 7. This requirement modifies the requirement in section 4
+    to "keep intact all notices".
+-   c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy. This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged. This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+-   d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+### 6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms of
+sections 4 and 5, provided that you also convey the machine-readable
+Corresponding Source under the terms of this License, in one of these
+ways:
+
+-   a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+-   b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the Corresponding
+    Source from a network server at no charge.
+-   c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source. This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+-   d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge. You need not require recipients to copy the
+    Corresponding Source along with the object code. If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source. Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+-   e) Convey the object code using peer-to-peer transmission,
+    provided you inform other peers where the object code and
+    Corresponding Source of the work are being offered to the general
+    public at no charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal,
+family, or household purposes, or (2) anything designed or sold for
+incorporation into a dwelling. In determining whether a product is a
+consumer product, doubtful cases shall be resolved in favor of
+coverage. For a particular product received by a particular user,
+"normally used" refers to a typical or common use of that class of
+product, regardless of the status of the particular user or of the way
+in which the particular user actually uses, or expects or is expected
+to use, the product. A product is a consumer product regardless of
+whether the product has substantial commercial, industrial or
+non-consumer uses, unless such uses represent the only significant
+mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to
+install and execute modified versions of a covered work in that User
+Product from a modified version of its Corresponding Source. The
+information must suffice to ensure that the continued functioning of
+the modified object code is in no case prevented or interfered with
+solely because modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or
+updates for a work that has been modified or installed by the
+recipient, or for the User Product in which it has been modified or
+installed. Access to a network may be denied when the modification
+itself materially and adversely affects the operation of the network
+or violates the rules and protocols for communication across the
+network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+### 7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders
+of that material) supplement the terms of this License with terms:
+
+-   a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+-   b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+-   c) Prohibiting misrepresentation of the origin of that material,
+    or requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+-   d) Limiting the use for publicity purposes of names of licensors
+    or authors of the material; or
+-   e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+-   f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions
+    of it) with contractual assumptions of liability to the recipient,
+    for any liability that these contractual assumptions directly
+    impose on those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions; the
+above requirements apply either way.
+
+### 8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your license
+from a particular copyright holder is reinstated (a) provisionally,
+unless and until the copyright holder explicitly and finally
+terminates your license, and (b) permanently, if the copyright holder
+fails to notify you of the violation by some reasonable means prior to
+60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+### 9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or run
+a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+### 10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+### 11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims owned
+or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within the
+scope of its coverage, prohibits the exercise of, or is conditioned on
+the non-exercise of one or more of the rights that are specifically
+granted under this License. You may not convey a covered work if you
+are a party to an arrangement with a third party that is in the
+business of distributing software, under which you make payment to the
+third party based on the extent of your activity of conveying the
+work, and under which the third party grants, to any of the parties
+who would receive the covered work from you, a discriminatory patent
+license (a) in connection with copies of the covered work conveyed by
+you (or copies made from those copies), or (b) primarily for and in
+connection with specific products or compilations that contain the
+covered work, unless you entered into that arrangement, or that patent
+license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+### 12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under
+this License and any other pertinent obligations, then as a
+consequence you may not convey it at all. For example, if you agree to
+terms that obligate you to collect a royalty for further conveying
+from those to whom you convey the Program, the only way you could
+satisfy both those terms and this License would be to refrain entirely
+from conveying the Program.
+
+### 13. Remote Network Interaction; Use with the GNU General Public License.
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your
+version supports such interaction) an opportunity to receive the
+Corresponding Source of your version by providing access to the
+Corresponding Source from a network server at no charge, through some
+standard or customary means of facilitating copying of software. This
+Corresponding Source shall include the Corresponding Source for any
+work covered by version 3 of the GNU General Public License that is
+incorporated pursuant to the following paragraph.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+### 14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions
+of the GNU Affero General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number. If the Program
+specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever
+published by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future versions
+of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+### 15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
+WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
+PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
+DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
+CORRECTION.
+
+### 16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
+CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
+ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
+NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
+LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
+TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
+PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+### 17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+END OF TERMS AND CONDITIONS
+
+## How to Apply These Terms to Your New Programs
+
+If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these
+terms.
+
+To do so, attach the following notices to the program. It is safest to
+attach them to the start of each source file to most effectively state
+the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+        <one line to give the program's name and a brief idea of what it does.>
+        Copyright (C) <year>  <name of author>
+
+        This program is free software: you can redistribute it and/or modify
+        it under the terms of the GNU Affero General Public License as
+        published by the Free Software Foundation, either version 3 of the
+        License, or (at your option) any later version.
+
+        This program is distributed in the hope that it will be useful,
+        but WITHOUT ANY WARRANTY; without even the implied warranty of
+        MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+        GNU Affero General Public License for more details.
+
+        You should have received a copy of the GNU Affero General Public License
+        along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper
+mail.
+
+If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source. For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code. There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for
+the specific requirements.
+
+You should also get your employer (if you work as a programmer) or
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary. For more information on this, and how to apply and follow
+the GNU AGPL, see <https://www.gnu.org/licenses/>.

README.md

@@ -1,72 +1,78 @@
-# AliasVault: password & (email) alias manager [<img src="https://github.com/user-attachments/assets/933c8b45-a190-4df6-913e-b7c64ad9938b" width="100" align="right" alt="AliasVault">](https://github.com/lanedirt/AliasVault)
+# <img src="https://github.com/user-attachments/assets/933c8b45-a190-4df6-913e-b7c64ad9938b" width="35" alt="AliasVault"> AliasVault
+AliasVault is a privacy-first password and email alias manager. Create unique identities, strong passwords, and random email aliases for every website you use. Fully end-to-end encrypted, with a built-in email server and zero third-party dependencies.
 
-[<img src="https://img.shields.io/github/v/release/lanedirt/AliasVault?include_prereleases&logo=github">](https://github.com/lanedirt/AliasVault/releases)
-[<img src="https://img.shields.io/github/actions/workflow/status/lanedirt/AliasVault/dotnet-unit-tests.yml?label=unit tests">](https://github.com/lanedirt/AliasVault/actions/workflows/dotnet-build-run-tests.yml)
-[<img src="https://img.shields.io/github/actions/workflow/status/lanedirt/AliasVault/dotnet-integration-tests.yml?label=integration tests">](https://github.com/lanedirt/AliasVault/actions/workflows/dotnet-build-run-tests.yml)
-[<img src="https://img.shields.io/github/actions/workflow/status/lanedirt/AliasVault/dotnet-e2e-client-tests.yml?label=e2e tests">](https://github.com/lanedirt/AliasVault/actions/workflows/dotnet-e2e-client-tests.yml)
-[<img src="https://img.shields.io/sonar/quality_gate/lanedirt_AliasVault?server=https%3A%2F%2Fsonarcloud.io&label=sonarcloud&logo=sonarcloud">](https://sonarcloud.io/summary/new_code?id=lanedirt_AliasVault)
-[<img alt="Discord" src="https://img.shields.io/discord/1309300619026235422?logo=discord&logoColor=%237289da&label=discord&color=%237289da">](https://discord.gg/DsaXMTEtpF)
+[<img src="https://img.shields.io/github/v/release/lanedirt/AliasVault?include_prereleases&logo=github&label=Release">](https://github.com/lanedirt/AliasVault/releases)
+[![.NET E2E Tests (with Sharding)](https://github.com/lanedirt/AliasVault/actions/workflows/dotnet-e2e-tests.yml/badge.svg)](https://github.com/lanedirt/AliasVault/actions/workflows/dotnet-e2e-tests.yml)
+[<img src="https://img.shields.io/sonar/quality_gate/lanedirt_AliasVault?server=https%3A%2F%2Fsonarcloud.io&label=Sonarcloud&logo=sonarcloud">](https://sonarcloud.io/summary/new_code?id=lanedirt_AliasVault)
+[<img src="https://badges.crowdin.net/aliasvault/localized.svg">](https://crowdin.com/project/aliasvault)
+[<img alt="Discord" src="https://img.shields.io/discord/1309300619026235422?logo=discord&logoColor=%237289da&label=Discord&color=%237289da">](https://discord.gg/DsaXMTEtpF)
 
-> AliasVault is an end-to-end encrypted password and (email) alias manager that protects your privacy by creating alternative identities, passwords and email addresses for every website you use. Use the official supported cloud version or self-host AliasVault on your own server with Docker.
+<a href="https://app.aliasvault.net">Try the cloud version 🔥</a> | <a href="https://aliasvault.net?utm_source=gh-readme">Website </a> | <a href="https://docs.aliasvault.net?utm_source=gh-readme">Documentation </a> | <a href="#self-hosting">Self-host instructions</a>
 
-- <a href="https://app.aliasvault.net">Try the cloud version 🔥</a> - <a href="https://aliasvault.net?utm_source=gh-readme">Website 🌐</a> - <a href="https://docs.aliasvault.net?utm_source=gh-readme">Documentation 📚</a> - <a href="#self-hosting">Self-host instructions ⚙️</a> - <a href="https://aliasvault.net/plugins?utm_source=gh-readme">Browser Extensions 🔌</a>
+⭐ Star us on GitHub, it motivates us a lot!
 
-### What makes AliasVault unique:
-- **Zero-knowledge architecture**:
-    - All data is end-to-end encrypted on the client and stored in encrypted state on the server. Your master password never leaves your device and the server never has access to your data.
-- **Built-in email server**:
-    - AliasVault includes its own email server that allows you to generate real working email addresses for each alias. Emails sent to these addresses are instantly visible in the AliasVault app and browser extension.
-- **Alias generation**:
-     - Generate aliases and assign them to a website, allowing you to use different email addresses and usernames for each website. Keeping your online identities separate and secure, making it harder for bad actors to link your accounts.
-- **Open-source & Self-hostable**:
-    - The source code is available on GitHub and AliasVault can be self-hosted on your own server via an easy install script.
+## About
+Built on 15 years of experience, AliasVault is independent, open-source, self-hostable and community-driven. It’s the response to a web that tracks everything: a way to take back control of your digital privacy and help you stay secure online.
+
+– Leendert de Borst ([@lanedirt](https://github.com/lanedirt)), Creator of AliasVault
 
 ## Screenshots
 
 <table>
     <tr>
-        <th align="center">Browser Extension</th>
-        <th align="center">Generate email and aliases</th>
+        <th align="center">Responsive web app</th>
+        <th align="center">Browser extensions</th>
     </tr>
     <tr>
         <td align="center">
-            <img src="https://github.com/user-attachments/assets/d9ffd3dc-08a0-462d-8148-e8da5ec5a520" alt="Browser Autofill" />
+            <img src="https://github.com/user-attachments/assets/fa5bf64a-704d-4f09-b4e0-0310ab662204" alt="Responsive web app" />
         </td>
         <td align="center">
-            <img src="https://github.com/user-attachments/assets/86752994-d469-4b0e-b633-c089e0aed12b" alt="Generate Aliases" />
+            <img src="https://github.com/user-attachments/assets/b5218609-217b-4c8d-8d5d-8c71e19bf057"alt="Browser extensions" />
 		</td>
     </tr>
     <tr>
-        <th align="center">Strong security</th>
-        <th align="center">Easy self-host</th>
+        <th align="center">Native iOS & Android apps</th>
+        <th align="center">& much more</th>
     </tr>
     <tr>
 		<td align="center">
-            <img src="https://github.com/user-attachments/assets/26b66379-10a5-4b8b-9c69-e64b553a10be" alt="Strong security" />
+            <img src="https://github.com/user-attachments/assets/5d09ad78-d145-48a1-b8da-c5a1dc708886" alt="Native iOS & Android Apps" />
 		</td>
 		<td align="center">
-           <img src="https://github.com/user-attachments/assets/47c7002a-e326-4507-8801-194e134e00dd" alt="Easy self-host installation" />
+           <img src="https://github.com/user-attachments/assets/34fe650d-f08d-4c92-92e0-4e750b7a662a" alt="Lots of features" />
         </td>
 	</tr>
 </table>
 
-## Official Cloud Version
-The official cloud version of AliasVault is freely available at [app.aliasvault.net](https://app.aliasvault.net). This fully supported platform is always up to date with our latest release. Create an account to protect your privacy today.
+## Cloud-hosted
+Use the official cloud version of AliasVault at [app.aliasvault.net](https://app.aliasvault.net). This fully supported platform is always up to date with our latest release.
+
+AliasVault is available on:
+- [Web (universal)](https://app.aliasvault.net)
+- [Chrome](https://chromewebstore.google.com/detail/aliasvault/bmoggiinmnodjphdjnmpcnlleamkfedj)
+- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/aliasvault/)
+- [Edge](https://microsoftedge.microsoft.com/addons/detail/aliasvault/kabaanafahnjkfkplbnllebdmppdemfo)
+- [Safari](https://apps.apple.com/app/id6743163173)
+
+<p>
+  <a href="https://apps.apple.com/app/id6745490915" style="display: inline-block; margin-right: 20px;"><img src="https://github.com/user-attachments/assets/bad09b85-2635-4e3e-b154-9f348b88f6d6" style="height: 40px;margin-right:10px;"  alt="Download on the App Store"></a>
+  <a href="https://play.google.com/store/apps/details?id=net.aliasvault.app" style="display: inline-block;"><img src="https://github.com/user-attachments/assets/b28979c9-f4b8-4090-8735-e384a7fdaa47" style="height: 40px;" alt="Get it on Google Play"></a>
+      <a href="https://f-droid.org/packages/net.aliasvault.app" style="display: inline-block;"><img src="https://github.com/user-attachments/assets/0fb25df1-0ea2-46a6-bfee-a9d70f22a02a" style="height: 40px;" alt="Get it on F-Droid"></a>
+</p>
 
 [<img width="700" alt="Screenshot of AliasVault" src="docs/assets/img/screenshot.png">](https://app.aliasvault.net)
 
 ## Self-hosting
-For full control over your own data you can self-host and install AliasVault on your own servers. The easiest method is to use the provided install script. This will download the pre-built Docker images and start the containers.
+For full control over your own data you can self-host and install AliasVault on your own servers.
 
 ### Install using install script
 
 This method uses pre-built Docker images and works on minimal hardware specifications:
 
-- Linux VM with root access (Ubuntu/AlmaLinux recommended) or Raspberry Pi
-- 1 vCPU
-- 1GB RAM
-- 16GB disk space
-- Docker installed
+- 64-bit Linux VM (Ubuntu/AlmaLinux) or Raspberry Pi, with root access
+- Minimum: 1 vCPU, 1GB RAM, 16GB disk
+- Docker ≥ 20.10 and Docker Compose ≥ 2.0
 
 ```bash
 # Download install script from latest stable release
@@ -83,7 +89,7 @@ The install script will output the URL where the app is available. By default th
 
 > Note: If you want to change the default AliasVault ports you can do so in the `.env` file.
 
-## Documentation
+## Technical documentation
 For more information about the installation process, manual setup instructions and other topics, please see the official documentation website:
 - [Documentation website (docs.aliasvault.net) 📚](https://docs.aliasvault.net)
 
@@ -100,12 +106,12 @@ For detailed information about our encryption implementation and security archit
 - [SECURITY.md](SECURITY.md)
 - [Security Architecture Diagram](https://docs.aliasvault.net/architecture)
 
-## Roadmap
+## Features & Roadmap
 
-AliasVault is under active development, with a strong focus on usability, security, and cross-platform support.  
+AliasVault is under active development, with a strong focus on usability, security, and cross-platform support.
 The main focus is on ensuring robust usability for everyday tasks, including comprehensive autofill capabilities across all platforms.
 
-🛠️ Incremental releases are published every 2–3 weeks, with a strong emphasis on real-world testing and user feedback. 
+🛠️ Incremental releases are published every 2–3 weeks, with a strong emphasis on real-world testing and user feedback.
 During this phase, AliasVault can safely be used in production as it maintains strict data integrity and automatic migration guarantees.
 
 Core features that are being worked on:
@@ -117,18 +123,20 @@ Core features that are being worked on:
 - [x] Browser extensions with autofill feature (Chrome, Firefox, Edge, Safari, Brave)
 - [x] Built-in TOTP authenticator
 - [x] Import passwords from traditional password managers
-- [ ] iOS and Android native apps
-- [ ] Data model improvements to support reusable identities in combination with aliases
+- [x] iOS native app
+- [x] Android native app
+- [x] Editing in browser extension
+- [x] Multi-language support across all client applications
+- [ ] Data model and usability improvements (more flexible aliases and credential types, folder support, bulk selecting etc.)
 - [ ] Support for FIDO2/WebAuthn hardware keys and passkeys
 - [ ] Adding support for family/team sharing (organization features)
 
 👉 [View the full AliasVault roadmap here](https://github.com/lanedirt/AliasVault/issues/731)
 
-### Got feedback or ideas?  
+### Got feedback or ideas?
 Feel free to open an issue or join our [Discord](https://discord.gg/DsaXMTEtpF)! Contributions are warmly welcomed—whether in feature development, testing, or spreading the word. Get in touch on Discord if you're interested in contributing.
 
 ### Support the mission
 Your donation helps me dedicate more time and resources to improving AliasVault, making the internet safer for everyone!
 
-<a href="https://www.buymeacoffee.com/lanedirt" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
-
+<a href="https://www.buymeacoffee.com/lanedirt" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 50px !important;" ></a>

apps/browser-extension/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+dist
+!src/utils/dist
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/browser-extension/eslint.config.js

@@ -0,0 +1,174 @@
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import importPlugin from "eslint-plugin-import";
+import jsdocPlugin from "eslint-plugin-jsdoc";
+import globals from 'globals';
+
+export default [
+    {
+        ignores: [
+            "dist/**",
+            "node_modules/**",
+            "src/utils/dist/**",
+        ]
+    },
+    js.configs.recommended,
+    {
+        files: ["src/**/*.{ts,tsx}"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                ecmaFeatures: { jsx: true },
+                ecmaVersion: "latest",
+                sourceType: "module",
+                project: "./tsconfig.json",
+                tsconfigRootDir: ".",
+            },
+        },
+        plugins: {
+            "@typescript-eslint": tsPlugin,
+            "react": reactPlugin,
+            "react-hooks": reactHooksPlugin,
+            "import": importPlugin,
+            "jsdoc": jsdocPlugin,
+        },
+        rules: {
+            ...tsPlugin.configs.recommended.rules,
+            ...reactPlugin.configs.recommended.rules,
+            ...reactHooksPlugin.configs.recommended.rules,
+            "curly": ["error", "all"],
+            "brace-style": ["error", "1tbs", { "allowSingleLine": false }],
+            "@typescript-eslint/await-thenable": "error",
+            "react/react-in-jsx-scope": "off",
+            "react/no-unused-prop-types": "error",
+            "@typescript-eslint/explicit-module-boundary-types": "off",
+            "@typescript-eslint/no-unused-vars": ["error", {
+                "vars": "all",
+                "args": "after-used",
+                "ignoreRestSiblings": true,
+                "varsIgnorePattern": "^_",
+                "argsIgnorePattern": "^_"
+            }],
+            "indent": ["error", 2, {
+                "SwitchCase": 1,
+                "VariableDeclarator": 1,
+                "outerIIFEBody": 1,
+                "MemberExpression": 1,
+                "FunctionDeclaration": { "parameters": 1, "body": 1 },
+                "FunctionExpression": { "parameters": 1, "body": 1 },
+                "CallExpression": { "arguments": 1 },
+                "ArrayExpression": 1,
+                "ObjectExpression": 1,
+                "ImportDeclaration": 1,
+                "flatTernaryExpressions": false,
+                "ignoreComments": false
+            }],
+            "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1, "maxBOF": 0 }],
+            "no-console": ["error", { allow: ["warn", "error", "info", "debug"] }],
+            "jsdoc/require-jsdoc": ["error", {
+                "require": {
+                    "FunctionDeclaration": true,
+                    "MethodDefinition": true,
+                    "ClassDeclaration": true,
+                    "ArrowFunctionExpression": true,
+                    "FunctionExpression": true
+                }
+            }],
+            "jsdoc/require-description": ["error", {
+                "contexts": [
+                    "FunctionDeclaration",
+                    "MethodDefinition",
+                    "ClassDeclaration",
+                    "ArrowFunctionExpression",
+                    "FunctionExpression"
+                ]
+            }],
+            "spaced-comment": ["error", "always"],
+            "multiline-comment-style": ["error", "starred-block"],
+            "@typescript-eslint/explicit-member-accessibility": ["error"],
+            "@typescript-eslint/explicit-function-return-type": ["error"],
+            "@typescript-eslint/typedef": ["error"],
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": ["PascalCase"],
+                    "prefix": ["I"]
+                },
+                {
+                    "selector": "class",
+                    "format": ["PascalCase"]
+                }
+            ],
+            "react-hooks/exhaustive-deps": "warn",
+            "react/jsx-no-constructed-context-values": "error",
+            "import/no-unresolved": [
+                "error",
+                {
+                  ignore: ['^#imports$'] // Ignore virtual imports from WXT which are not resolved by the typescript compiler
+                }
+              ],
+            "import/order": [
+                "error",
+                {
+                    "groups": [
+                    "builtin",    // Node "fs", "path", etc.
+                    "external",   // "react", "lodash", etc.
+                    "internal",   // Aliased paths like "@/utils"
+                    "parent",     // "../"
+                    "sibling",    // "./"
+                    "index",      // "./index"
+                    "object",     // import 'foo'
+                    "type"        // import type ...
+                    ],
+                    "pathGroups": [
+                    {
+                        pattern: "@/entrypoints/**",
+                        group: "internal",
+                        position: "before"
+                    },
+                    {
+                        pattern: "@/utils/**",
+                        group: "internal",
+                        position: "before"
+                    },
+                    {
+                        pattern: "@/hooks/**",
+                        group: "internal",
+                        position: "before"
+                    }
+                    ],
+                    "pathGroupsExcludedImportTypes": ["builtin"],
+                    "newlines-between": "always",
+                    "alphabetize": {
+                    order: "asc",
+                    caseInsensitive: true
+                    }
+                }
+              ],
+            },
+        settings: {
+            'import/resolver': {
+                typescript: {
+                project: './tsconfig.json',
+                },
+            },
+            react: {
+                version: "detect",
+            },
+        },
+    },
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                NodeJS: true,
+                chrome: 'readonly',
+            }
+        }
+    }
+];

apps/browser-extension/package.json

@@ -2,12 +2,13 @@
   "name": "aliasvault-browser-extension",
   "description": "AliasVault Browser Extension",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.21.1",
   "type": "module",
   "scripts": {
     "dev:chrome": "wxt -b chrome",
     "dev:firefox": "wxt -b firefox",
     "dev:edge": "wxt -b edge",
+    "dev:safari": "wxt -b safari",
     "build:chrome": "wxt build -b chrome",
     "build:firefox": "wxt build -b firefox",
     "build:edge": "wxt build -b edge",
@@ -25,31 +26,38 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
-    "@types/node": "^22.13.10",
+    "@hookform/resolvers": "^5.1.1",
     "argon2-browser": "^1.18.0",
     "buffer": "^6.0.3",
     "globals": "^16.0.0",
+    "i18next": "^25.3.1",
     "otpauth": "^9.3.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.57.0",
+    "react-i18next": "^15.6.0",
     "react-router-dom": "^7.5.2",
     "secure-remote-password": "github:LinusU/secure-remote-password#73e5f732b6ca0cdbdc19da1a0c5f48cdbad2cbf0",
     "sql.js": "^1.12.0",
     "vitest": "^3.0.8",
-    "webext-bridge": "^6.0.1"
+    "webext-bridge": "^6.0.1",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.280",
     "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.13.10",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@types/sql.js": "^1.4.9",
+    "@types/yup": "^0.29.14",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "@vitest/coverage-v8": "^3.0.8",
     "@wxt-dev/module-react": "^1.1.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.19.0",
+    "eslint-import-resolver-typescript": "^4.4.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.3",
     "eslint-plugin-react": "^7.37.4",
@@ -59,6 +67,6 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.3",
     "vite-plugin-static-copy": "^2.2.0",
-    "wxt": "^0.19.13"
+    "wxt": "^0.20.6"
   }
 }

apps/browser-extension/safari-xcode/AliasVault/AliasVault Extension/SafariWebExtensionHandler.swift

@@ -1,10 +1,3 @@
-//
-//  SafariWebExtensionHandler.swift
-//  AliasVault Extension
-//
-//  Created by Leendert de Borst on 12/03/2025.
-//
-
 import SafariServices
 import os.log
 

apps/browser-extension/safari-xcode/AliasVault/AliasVault.xcodeproj/project.pbxproj

@@ -447,7 +447,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 25;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -460,7 +460,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 1.0;
+				MARKETING_VERSION = 0.21.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -479,7 +479,7 @@
 			buildSettings = {
 				CODE_SIGN_ENTITLEMENTS = "AliasVault Extension/AliasVault_Extension.entitlements";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 25;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -492,7 +492,7 @@
 					"@executable_path/../../../../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 1.0;
+				MARKETING_VERSION = 0.21.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -515,7 +515,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 15;
+				CURRENT_PROJECT_VERSION = 25;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -530,7 +530,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.16.2;
+				MARKETING_VERSION = 0.21.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,
@@ -554,7 +554,7 @@
 				CODE_SIGN_ENTITLEMENTS = AliasVault/AliasVault.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				COMBINE_HIDPI_IMAGES = YES;
-				CURRENT_PROJECT_VERSION = 15;
+				CURRENT_PROJECT_VERSION = 25;
 				DEVELOPMENT_TEAM = 8PHW4HN3F7;
 				ENABLE_HARDENED_RUNTIME = YES;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -569,7 +569,7 @@
 					"@executable_path/../Frameworks",
 				);
 				MACOSX_DEPLOYMENT_TARGET = 10.14;
-				MARKETING_VERSION = 0.16.2;
+				MARKETING_VERSION = 0.21.1;
 				OTHER_LDFLAGS = (
 					"-framework",
 					SafariServices,

apps/browser-extension/safari-xcode/AliasVault/AliasVault/AppDelegate.swift

@@ -1,10 +1,3 @@
-//
-//  AppDelegate.swift
-//  AliasVault
-//
-//  Created by Leendert de Borst on 12/03/2025.
-//
-
 import Cocoa
 
 @main

apps/browser-extension/safari-xcode/AliasVault/AliasVault/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>ITSAppUsesNonExemptEncryption</key>
+	<false/>
 	<key>SFSafariWebExtensionConverterVersion</key>
 	<string>15.4</string>
 </dict>

apps/browser-extension/safari-xcode/AliasVault/AliasVault/ViewController.swift

@@ -1,10 +1,3 @@
-//
-//  ViewController.swift
-//  AliasVault
-//
-//  Created by Leendert de Borst on 12/03/2025.
-//
-
 import Cocoa
 import SafariServices
 import WebKit

apps/browser-extension/src/assets/tailwind.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@media (max-width: 380px) {
+    html, body {
+      width: 350px;
+      max-width: 350px;
+      height: 600px;
+      max-height: 600px;
+      overflow: hidden;
+    }
+  }

apps/browser-extension/src/entrypoints/background.ts

@@ -0,0 +1,80 @@
+import { onMessage, sendMessage } from "webext-bridge/background";
+
+import { setupContextMenus } from '@/entrypoints/background/ContextMenu';
+import { handleOpenPopup, handlePopupWithCredential, handleToggleContextMenu } from '@/entrypoints/background/PopupMessageHandler';
+import { handleCheckAuthStatus, handleClearPersistedFormValues, handleClearVault, handleCreateIdentity, handleGetCredentials, handleGetDefaultEmailDomain, handleGetDefaultIdentitySettings, handleGetDerivedKey, handleGetPasswordSettings, handleGetPersistedFormValues, handleGetVault, handlePersistFormValues, handleStoreVault, handleSyncVault, handleUploadVault } from '@/entrypoints/background/VaultMessageHandler';
+
+import { GLOBAL_CONTEXT_MENU_ENABLED_KEY } from '@/utils/Constants';
+
+import { defineBackground, storage, browser } from '#imports';
+
+export default defineBackground({
+  /**
+   * This is the main entry point for the background script.
+   */
+  async main() {
+    // Listen for messages using webext-bridge
+    onMessage('CHECK_AUTH_STATUS', () => handleCheckAuthStatus());
+    onMessage('STORE_VAULT', ({ data }) => handleStoreVault(data));
+    onMessage('UPLOAD_VAULT', ({ data }) => handleUploadVault(data));
+    onMessage('SYNC_VAULT', () => handleSyncVault());
+    onMessage('GET_VAULT', () => handleGetVault());
+    onMessage('CLEAR_VAULT', () => handleClearVault());
+    onMessage('GET_CREDENTIALS', () => handleGetCredentials());
+    onMessage('CREATE_IDENTITY', ({ data }) => handleCreateIdentity(data));
+    onMessage('GET_DEFAULT_EMAIL_DOMAIN', () => handleGetDefaultEmailDomain());
+    onMessage('GET_DEFAULT_IDENTITY_SETTINGS', () => handleGetDefaultIdentitySettings());
+    onMessage('GET_PASSWORD_SETTINGS', () => handleGetPasswordSettings());
+    onMessage('GET_DERIVED_KEY', () => handleGetDerivedKey());
+    onMessage('OPEN_POPUP', () => handleOpenPopup());
+    onMessage('OPEN_POPUP_WITH_CREDENTIAL', ({ data }) => handlePopupWithCredential(data));
+    onMessage('TOGGLE_CONTEXT_MENU', ({ data }) => handleToggleContextMenu(data));
+
+    onMessage('PERSIST_FORM_VALUES', ({ data }) => handlePersistFormValues(data));
+    onMessage('GET_PERSISTED_FORM_VALUES', () => handleGetPersistedFormValues());
+    onMessage('CLEAR_PERSISTED_FORM_VALUES', () => handleClearPersistedFormValues());
+
+    // Setup context menus
+    const isContextMenuEnabled = await storage.getItem(GLOBAL_CONTEXT_MENU_ENABLED_KEY) ?? true;
+    if (isContextMenuEnabled) {
+      await setupContextMenus();
+    }
+
+    // Listen for custom commands
+    try {
+      browser.commands.onCommand.addListener(async (command) => {
+        if (command === "show-autofill-popup") {
+          // Get the currently active tab
+          const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+          if (!tab?.id) {
+            return;
+          }
+
+          // Execute script in the active tab
+          await browser.scripting.executeScript({
+            target: { tabId: tab.id },
+            func: getActiveElementIdentifier,
+          }).then((results) => {
+            const elementIdentifier = results[0]?.result;
+            if (elementIdentifier) {
+              sendMessage('OPEN_AUTOFILL_POPUP', { elementIdentifier }, `content-script@${tab.id}`);
+            }
+          }).catch(console.error);
+        }
+      });
+    } catch (error) {
+      console.error('Error setting up command listener:', error);
+    }
+  }
+});
+
+/**
+ * Activate AliasVault for the active input element.
+ */
+function getActiveElementIdentifier() : string {
+  const target = document.activeElement;
+  if (target instanceof HTMLInputElement) {
+    return target.id || target.name || '';
+  }
+  return '';
+}

apps/browser-extension/src/entrypoints/background/ContextMenu.ts

@@ -1,11 +1,16 @@
+import { type Browser } from '@wxt-dev/browser';
 import { sendMessage } from 'webext-bridge/background';
-import { PasswordGenerator } from '../../utils/generators/Password/PasswordGenerator';
-import { browser } from 'wxt/browser';
+
+import { PasswordGenerator } from '@/utils/dist/shared/password-generator';
+
+import { t } from '@/i18n/StandaloneI18n';
+
+import { browser } from "#imports";
 
 /**
  * Setup the context menus.
  */
-export function setupContextMenus() : void {
+export async function setupContextMenus() : Promise<void> {
   // Create root menu
   browser.contextMenus.create({
     id: "aliasvault-root",
@@ -17,7 +22,7 @@ export function setupContextMenus() : void {
   browser.contextMenus.create({
     id: "aliasvault-activate-form",
     parentId: "aliasvault-root",
-    title: "Autofill with AliasVault",
+    title: await t('content.autofillWithAliasVault'),
     contexts: ["editable"],
   });
 
@@ -33,15 +38,19 @@ export function setupContextMenus() : void {
   browser.contextMenus.create({
     id: "aliasvault-generate-password",
     parentId: "aliasvault-root",
-    title: "Generate random password (copy to clipboard)",
+    title: await t('content.generateRandomPassword'),
     contexts: ["all"]
   });
+
+  browser.contextMenus.onClicked.addListener((info: Browser.contextMenus.OnClickData, tab?: Browser.tabs.Tab) =>
+    handleContextMenuClick(info, tab)
+  );
 }
 
 /**
  * Handle context menu clicks.
  */
-export function handleContextMenuClick(info: browser.contextMenus.OnClickData, tab?: browser.tabs.Tab) : void {
+export function handleContextMenuClick(info: Browser.contextMenus.OnClickData, tab?: Browser.tabs.Tab) : void {
   if (info.menuItemId === "aliasvault-generate-password") {
     // Initialize password generator
     const passwordGenerator = new PasswordGenerator();
@@ -49,15 +58,16 @@ export function handleContextMenuClick(info: browser.contextMenus.OnClickData, t
 
     // Use browser.scripting to write password to clipboard from active tab
     if (tab?.id) {
-      browser.scripting.executeScript({
-        target: { tabId: tab.id },
-        func: copyPasswordToClipboard,
-        args: [password]
+      // Get confirm text translation.
+      t('content.passwordCopiedToClipboard').then((message) => {
+        browser.scripting.executeScript({
+          target: { tabId: tab.id },
+          func: copyPasswordToClipboard,
+          args: [message, password]
+        });
       });
     }
-  }
-
-  if (info.menuItemId === "aliasvault-activate-form" && tab?.id) {
+  } else if (info.menuItemId === "aliasvault-activate-form" && tab?.id) {
     // First get the active element's identifier
     browser.scripting.executeScript({
       target: { tabId: tab.id },
@@ -75,9 +85,9 @@ export function handleContextMenuClick(info: browser.contextMenus.OnClickData, t
 /**
  * Copy provided password to clipboard.
  */
-function copyPasswordToClipboard(generatedPassword: string) : void {
+function copyPasswordToClipboard(message: string, generatedPassword: string) : void {
   navigator.clipboard.writeText(generatedPassword).then(() => {
-    showToast('Password copied to clipboard');
+    showToast(message);
   });
 
   /**

apps/browser-extension/src/entrypoints/background/PopupMessageHandler.ts

@@ -1,6 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { browser } from "wxt/browser";
-import { BoolResponse } from '../../utils/types/messaging/BoolResponse';
+import { setupContextMenus } from '@/entrypoints/background/ContextMenu';
+
+import { BoolResponse } from '@/utils/types/messaging/BoolResponse';
+
+import { browser } from '#imports';
+
 /**
  * Handle opening the popup.
  */
@@ -31,4 +35,18 @@ export function handlePopupWithCredential(message: any) : Promise<BoolResponse>
     });
     return { success: true };
   })();
+}
+
+/**
+ * Handle toggling the context menu.
+ */
+export function handleToggleContextMenu(message: any) : Promise<BoolResponse> {
+  return (async () : Promise<BoolResponse> => {
+    if (!message.enabled) {
+      browser.contextMenus.removeAll();
+    } else {
+      await setupContextMenus();
+    }
+    return { success: true };
+  })();
 }

apps/browser-extension/src/entrypoints/background/VaultMessageHandler.ts

@@ -1,21 +1,25 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import EncryptionUtility from '../../utils/EncryptionUtility';
-import SqliteClient from '../../utils/SqliteClient';
-import { WebApiService } from '../../utils/WebApiService';
-import { Vault } from '../../utils/types/webapi/Vault';
-import { VaultResponse } from '../../utils/types/webapi/VaultResponse';
-import { VaultPostResponse } from '../../utils/types/webapi/VaultPostResponse';
-import { storage } from 'wxt/storage';
-import { BoolResponse as messageBoolResponse } from '../../utils/types/messaging/BoolResponse';
-import { VaultResponse as messageVaultResponse } from '../../utils/types/messaging/VaultResponse';
-import { CredentialsResponse as messageCredentialsResponse } from '../../utils/types/messaging/CredentialsResponse';
-import { StringResponse as stringResponse } from '../../utils/types/messaging/StringResponse';
-import { PasswordSettingsResponse as messagePasswordSettingsResponse } from '../../utils/types/messaging/PasswordSettingsResponse';
+import { storage } from 'wxt/utils/storage';
+
+import type { Vault, VaultResponse, VaultPostResponse } from '@/utils/dist/shared/models/webapi';
+import { EncryptionUtility } from '@/utils/EncryptionUtility';
+import { SqliteClient } from '@/utils/SqliteClient';
+import { BoolResponse as messageBoolResponse } from '@/utils/types/messaging/BoolResponse';
+import { CredentialsResponse as messageCredentialsResponse } from '@/utils/types/messaging/CredentialsResponse';
+import { IdentitySettingsResponse } from '@/utils/types/messaging/IdentitySettingsResponse';
+import { PasswordSettingsResponse as messagePasswordSettingsResponse } from '@/utils/types/messaging/PasswordSettingsResponse';
+import { StoreVaultRequest } from '@/utils/types/messaging/StoreVaultRequest';
+import { StringResponse as stringResponse } from '@/utils/types/messaging/StringResponse';
+import { VaultResponse as messageVaultResponse } from '@/utils/types/messaging/VaultResponse';
+import { VaultUploadResponse as messageVaultUploadResponse } from '@/utils/types/messaging/VaultUploadResponse';
+import { WebApiService } from '@/utils/WebApiService';
+
+import { t } from '@/i18n/StandaloneI18n';
 
 /**
- * Check if the user is logged in and if the vault is locked.
+ * Check if the user is logged in and if the vault is locked, and also check for pending migrations.
  */
-export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, isVaultLocked: boolean }> {
+export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, isVaultLocked: boolean, hasPendingMigrations: boolean, error?: string }> {
   const username = await storage.getItem('local:username');
   const accessToken = await storage.getItem('local:accessToken');
   const vaultData = await storage.getItem('session:encryptedVault');
@@ -23,10 +27,42 @@ export async function handleCheckAuthStatus() : Promise<{ isLoggedIn: boolean, i
   const isLoggedIn = username !== null && accessToken !== null;
   const isVaultLocked = isLoggedIn && vaultData === null;
 
-  return {
-    isLoggedIn,
-    isVaultLocked
-  };
+  // If vault is locked, we can't check for pending migrations
+  if (isVaultLocked) {
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations: false
+    };
+  }
+
+  // If not logged in, no need to check migrations
+  if (!isLoggedIn) {
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations: false
+    };
+  }
+
+  // Vault is unlocked, check for pending migrations
+  try {
+    const sqliteClient = await createVaultSqliteClient();
+    const hasPendingMigrations = await sqliteClient.hasPendingMigrations();
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations
+    };
+  } catch (error) {
+    console.error('Error checking pending migrations:', error);
+    return {
+      isLoggedIn,
+      isVaultLocked,
+      hasPendingMigrations: false,
+      error: error instanceof Error ? error.message : await t('common.errors.unknownError')
+    };
+  }
 }
 
 /**
@@ -36,22 +72,37 @@ export async function handleStoreVault(
   message: any,
 ) : Promise<messageBoolResponse> {
   try {
-    const vaultResponse = message.vaultResponse as VaultResponse;
-    const encryptedVaultBlob = vaultResponse.vault.blob;
+    const vaultRequest = message as StoreVaultRequest;
 
-    // Store encrypted vault and derived key in session storage.
-    await storage.setItems([
-      { key: 'session:encryptedVault', value: encryptedVaultBlob },
-      { key: 'session:derivedKey', value: message.derivedKey },
-      { key: 'session:publicEmailDomains', value: vaultResponse.vault.publicEmailDomainList },
-      { key: 'session:privateEmailDomains', value: vaultResponse.vault.privateEmailDomainList },
-      { key: 'session:vaultRevisionNumber', value: vaultResponse.vault.currentRevisionNumber }
-    ]);
+    // Store new encrypted vault in session storage.
+    await storage.setItem('session:encryptedVault', vaultRequest.vaultBlob);
+
+    /*
+     * For all other values, check if they have a value and store them in session storage if they do.
+     * Some updates, e.g. when mutating local database, these values will not be set.
+     */
+
+    // Store derived key in session storage (if it has a value)
+    if (vaultRequest.derivedKey) {
+      await storage.setItem('session:derivedKey', vaultRequest.derivedKey);
+    }
+
+    if (vaultRequest.publicEmailDomainList) {
+      await storage.setItem('session:publicEmailDomains', vaultRequest.publicEmailDomainList);
+    }
+
+    if (vaultRequest.privateEmailDomainList) {
+      await storage.setItem('session:privateEmailDomains', vaultRequest.privateEmailDomainList);
+    }
+
+    if (vaultRequest.vaultRevisionNumber) {
+      await storage.setItem('session:vaultRevisionNumber', vaultRequest.vaultRevisionNumber);
+    }
 
     return { success: true };
   } catch (error) {
     console.error('Failed to store vault:', error);
-    return { success: false, error: 'Failed to store vault' };
+    return { success: false, error: await t('common.errors.failedToStoreVault') };
   }
 }
 
@@ -64,7 +115,7 @@ export async function handleSyncVault(
   const statusResponse = await webApi.getStatus();
   const statusError = webApi.validateStatusResponse(statusResponse);
   if (statusError !== null) {
-    return { success: false, error: statusError };
+    return { success: false, error: await t('common.errors.' + statusError) };
   }
 
   const vaultRevisionNumber = await storage.getItem('session:vaultRevisionNumber') as number;
@@ -98,7 +149,7 @@ export async function handleGetVault(
 
     if (!encryptedVault) {
       console.error('Vault not available');
-      return { success: false, error: 'Vault not available' };
+      return { success: false, error: await t('common.errors.vaultNotAvailable') };
     }
 
     const decryptedVault = await EncryptionUtility.symmetricDecrypt(
@@ -115,7 +166,7 @@ export async function handleGetVault(
     };
   } catch (error) {
     console.error('Failed to get vault:', error);
-    return { success: false, error: 'Failed to get vault' };
+    return { success: false, error: await t('common.errors.failedToGetVault') };
   }
 }
 
@@ -143,7 +194,7 @@ export async function handleGetCredentials(
   const derivedKey = await storage.getItem('session:derivedKey') as string;
 
   if (!derivedKey) {
-    return { success: false, error: 'Vault is locked' };
+    return { success: false, error: await t('common.errors.vaultIsLocked') };
   }
 
   try {
@@ -152,7 +203,7 @@ export async function handleGetCredentials(
     return { success: true, credentials: credentials };
   } catch (error) {
     console.error('Error getting credentials:', error);
-    return { success: false, error: 'Failed to get credentials' };
+    return { success: false, error: await t('common.errors.failedToGetCredentials') };
   }
 }
 
@@ -165,7 +216,7 @@ export async function handleCreateIdentity(
   const derivedKey = await storage.getItem('session:derivedKey') as string;
 
   if (!derivedKey) {
-    return { success: false, error: 'Vault is locked' };
+    return { success: false, error: await t('common.errors.vaultIsLocked') };
   }
 
   try {
@@ -180,7 +231,7 @@ export async function handleCreateIdentity(
     return { success: true };
   } catch (error) {
     console.error('Failed to create identity:', error);
-    return { success: false, error: 'Failed to create identity' };
+    return { success: false, error: await t('common.errors.failedToCreateIdentity') };
   }
 }
 
@@ -210,68 +261,43 @@ export async function getEmailAddressesForVault(
 /**
  * Get default email domain for a vault.
  */
-export function handleGetDefaultEmailDomain(
-) : Promise<stringResponse> {
-  return (async () : Promise<stringResponse> => {
+export function handleGetDefaultEmailDomain(): Promise<stringResponse> {
+  return (async (): Promise<stringResponse> => {
     try {
       const privateEmailDomains = await storage.getItem('session:privateEmailDomains') as string[];
       const publicEmailDomains = await storage.getItem('session:publicEmailDomains') as string[];
 
       const sqliteClient = await createVaultSqliteClient();
-      const defaultEmailDomain = sqliteClient.getDefaultEmailDomain();
+      const defaultEmailDomain = sqliteClient.getDefaultEmailDomain(privateEmailDomains, publicEmailDomains);
 
-      /**
-       * Check if a domain is valid.
-       */
-      const isValidDomain = (domain: string) : boolean => {
-        const isValid = (domain &&
-                    domain !== 'DISABLED.TLD' &&
-                    (privateEmailDomains.includes(domain) || publicEmailDomains.includes(domain))) as boolean;
-
-        return isValid;
-      };
-
-      // First check if the default domain that is configured in the vault is still valid.
-      if (defaultEmailDomain && isValidDomain(defaultEmailDomain)) {
-        return { success: true, value: defaultEmailDomain };
-      }
-
-      // If default domain is not valid, fall back to first available private domain.
-      const firstPrivate = privateEmailDomains.find(isValidDomain);
-
-      if (firstPrivate) {
-        return { success: true, value: firstPrivate };
-      }
-
-      // Return first valid public domain if no private domains are available.
-      const firstPublic = publicEmailDomains.find(isValidDomain);
-
-      if (firstPublic) {
-        return { success: true, value: firstPublic };
-      }
-
-      // Return null if no valid domains are found
-      return { success: true };
+      return { success: true, value: defaultEmailDomain ?? undefined };
     } catch (error) {
       console.error('Error getting default email domain:', error);
-      return { success: false, error: 'Failed to get default email domain' };
+      return { success: false, error: await t('common.errors.failedToGetDefaultEmailDomain') };
     }
   })();
 }
 
 /**
- * Get the default identity language.
+ * Get the default identity settings.
  */
-export async function handleGetDefaultIdentityLanguage(
-) : Promise<stringResponse> {
+export async function handleGetDefaultIdentitySettings(
+) : Promise<IdentitySettingsResponse> {
   try {
     const sqliteClient = await createVaultSqliteClient();
-    const settingValue = sqliteClient.getDefaultIdentityLanguage();
+    const language = sqliteClient.getDefaultIdentityLanguage();
+    const gender = sqliteClient.getDefaultIdentityGender();
 
-    return { success: true, value: settingValue };
+    return {
+      success: true,
+      settings: {
+        language,
+        gender
+      }
+    };
   } catch (error) {
-    console.error('Error getting default identity language:', error);
-    return { success: false, error: 'Failed to get default identity language' };
+    console.error('Error getting default identity settings:', error);
+    return { success: false, error: await t('common.errors.failedToGetDefaultIdentitySettings') };
   }
 }
 
@@ -287,7 +313,7 @@ export async function handleGetPasswordSettings(
     return { success: true, settings: passwordSettings };
   } catch (error) {
     console.error('Error getting password settings:', error);
-    return { success: false, error: 'Failed to get password settings' };
+    return { success: false, error: await t('common.errors.failedToGetPasswordSettings') };
   }
 }
 
@@ -300,10 +326,82 @@ export async function handleGetDerivedKey(
   return derivedKey;
 }
 
+/**
+ * Upload the vault to the server.
+ */
+export async function handleUploadVault(
+  message: any
+) : Promise<messageVaultUploadResponse> {
+  try {
+    // Store the new vault blob in session storage.
+    await storage.setItem('session:encryptedVault', message.vaultBlob);
+
+    // Create new sqlite client which will use the new vault blob.
+    const sqliteClient = await createVaultSqliteClient();
+
+    // Upload the new vault to the server.
+    const response = await uploadNewVaultToServer(sqliteClient);
+    return { success: true, status: response.status, newRevisionNumber: response.newRevisionNumber };
+  } catch (error) {
+    console.error('Failed to upload vault:', error);
+    return { success: false, error: await t('common.errors.failedToUploadVault') };
+  }
+}
+
+/**
+ * Handle persisting form values to storage.
+ * Data is encrypted using the derived key for additional security.
+ */
+export async function handlePersistFormValues(data: any): Promise<void> {
+  const derivedKey = await storage.getItem('session:derivedKey') as string;
+  if (!derivedKey) {
+    throw new Error(await t('common.errors.noDerivedKeyAvailable'));
+  }
+
+  // Always stringify the data properly
+  const serializedData = JSON.stringify(data);
+  const encryptedData = await EncryptionUtility.symmetricEncrypt(
+    serializedData,
+    derivedKey
+  );
+  await storage.setItem('session:persistedFormValues', encryptedData);
+}
+
+/**
+ * Handle retrieving persisted form values from storage.
+ * Data is decrypted using the derived key.
+ */
+export async function handleGetPersistedFormValues(): Promise<any | null> {
+  const derivedKey = await storage.getItem('session:derivedKey') as string;
+  const encryptedData = await storage.getItem('session:persistedFormValues') as string | null;
+
+  if (!encryptedData || !derivedKey) {
+    return null;
+  }
+
+  try {
+    const decryptedData = await EncryptionUtility.symmetricDecrypt(
+      encryptedData,
+      derivedKey
+    );
+    return JSON.parse(decryptedData);
+  } catch (error) {
+    console.error('Failed to decrypt or parse persisted form values:', error);
+    return null;
+  }
+}
+
+/**
+ * Handle clearing persisted form values from storage.
+ */
+export async function handleClearPersistedFormValues(): Promise<void> {
+  await storage.removeItem('session:persistedFormValues');
+}
+
 /**
  * Upload a new version of the vault to the server using the provided sqlite client.
  */
-async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<void> {
+async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<VaultPostResponse> {
   const updatedVaultData = sqliteClient.exportToBase64();
   const derivedKey = await storage.getItem('session:derivedKey') as string;
 
@@ -335,7 +433,7 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<void
     client: '', // Empty on purpose, API will not use this for vault updates.
     updatedAt: new Date().toISOString(),
     username: username,
-    version: sqliteClient.getDatabaseVersion() ?? '0.0.0'
+    version: sqliteClient.getDatabaseVersion().version
   };
 
   const webApi = new WebApiService(() => {});
@@ -345,8 +443,10 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<void
   if (response.status === 0) {
     await storage.setItem('session:vaultRevisionNumber', response.newRevisionNumber);
   } else {
-    throw new Error('Failed to upload new vault to server');
+    throw new Error(await t('common.errors.failedToUploadVaultToServer'));
   }
+
+  return response;
 }
 
 /**
@@ -355,9 +455,8 @@ async function uploadNewVaultToServer(sqliteClient: SqliteClient) : Promise<void
 async function createVaultSqliteClient() : Promise<SqliteClient> {
   const encryptedVault = await storage.getItem('session:encryptedVault') as string;
   const derivedKey = await storage.getItem('session:derivedKey') as string;
-
   if (!encryptedVault || !derivedKey) {
-    throw new Error('No vault or derived key found');
+    throw new Error(await t('common.errors.noVaultOrDerivedKeyFound'));
   }
 
   // Decrypt the vault.

apps/browser-extension/src/entrypoints/content.ts

@@ -0,0 +1,188 @@
+import '@/entrypoints/contentScript/style.css';
+import { onMessage } from "webext-bridge/content-script";
+
+import { injectIcon, popupDebounceTimeHasPassed, validateInputField } from '@/entrypoints/contentScript/Form';
+import { isAutoShowPopupEnabled, openAutofillPopup, removeExistingPopup, createUpgradeRequiredPopup } from '@/entrypoints/contentScript/Popup';
+
+import { FormDetector } from '@/utils/formDetector/FormDetector';
+import { BoolResponse as messageBoolResponse } from '@/utils/types/messaging/BoolResponse';
+
+import { t } from '@/i18n/StandaloneI18n';
+
+import { defineContentScript } from '#imports';
+import { createShadowRootUi } from '#imports';
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  cssInjectionMode: 'ui',
+  allFrames: true,
+  matchAboutBlank: true,
+  runAt: 'document_start',
+
+  /**
+   * Main entry point for the content script.
+   */
+  async main(ctx) {
+    if (ctx.isInvalid) {
+      return;
+    }
+
+    // Wait for 750ms to give the host page time to load and to increase the chance that the body is available and ready.
+    await new Promise(resolve => setTimeout(resolve, 750));
+
+    // Create a shadow root UI for isolation
+    const ui = await createShadowRootUi(ctx, {
+      name: 'aliasvault-ui',
+      position: 'inline',
+      anchor: 'body',
+      /**
+       * Handle mount.
+       */
+      onMount(container) {
+        /**
+         * Handle input field focus.
+         */
+        const handleFocusIn = async (e: FocusEvent) : Promise<void> => {
+          if (ctx.isInvalid) {
+            return;
+          }
+
+          // Check if element itself, html or body has av-disable attribute like av-disable="true"
+          const avDisable = ((e.target as HTMLElement).getAttribute('av-disable') ?? document.body?.getAttribute('av-disable') ?? document.documentElement.getAttribute('av-disable')) === 'true';
+          if (avDisable) {
+            return;
+          }
+
+          const { isValid, inputElement } = validateInputField(e.target as Element);
+          if (isValid && inputElement) {
+            const formDetector = new FormDetector(document, inputElement);
+            if (!formDetector.containsLoginForm()) {
+              return;
+            }
+
+            // Only show popup for autofill-triggerable fields
+            if (!formDetector.isAutofillTriggerableField()) {
+              return;
+            }
+
+            // Only inject icon and show popup if autofill popup is enabled
+            if (await isAutoShowPopupEnabled()) {
+              injectIcon(inputElement, container);
+
+              // Only show popup if debounce time has passed
+              if (popupDebounceTimeHasPassed()) {
+                await showPopupWithAuthCheck(inputElement, container);
+              }
+            }
+          }
+        };
+
+        // Listen for input field focus in the main document
+        document.addEventListener('focusin', handleFocusIn);
+
+        // Check if currently something is focused, if so, apply check for that element
+        const currentFocusedElement = document.activeElement;
+        if (currentFocusedElement) {
+          showPopupForElement(currentFocusedElement);
+        }
+
+        // Listen for popstate events (back/forward navigation)
+        window.addEventListener('popstate', () => {
+          if (ctx.isInvalid) {
+            return;
+          }
+
+          removeExistingPopup(container);
+        });
+
+        // Listen for messages from the background script
+        onMessage('OPEN_AUTOFILL_POPUP', async (message: { data: { elementIdentifier: string } }) : Promise<messageBoolResponse> => {
+          const { data } = message;
+          const { elementIdentifier } = data;
+
+          if (!elementIdentifier) {
+            return { success: false, error: 'No element identifier provided' };
+          }
+
+          const target = document.getElementById(elementIdentifier) ?? document.getElementsByName(elementIdentifier)[0];
+
+          await showPopupForElement(target, true);
+
+          return { success: true };
+        });
+
+        /**
+         * Show popup for element.
+         */
+        async function showPopupForElement(element: Element, forceShow: boolean = false) : Promise<void> {
+          const { isValid, inputElement } = validateInputField(element);
+
+          if (!isValid || !inputElement) {
+            return;
+          }
+
+          const formDetector = new FormDetector(document, inputElement);
+          if (!formDetector.containsLoginForm()) {
+            return;
+          }
+
+          /**
+           * By default we check if the popup is not disabled (for current site) and if the field is autofill-triggerable
+           * but if forceShow is true, we show the popup regardless.
+           */
+          const canShowPopup = forceShow || (await isAutoShowPopupEnabled() && formDetector.isAutofillTriggerableField());
+
+          if (canShowPopup) {
+            injectIcon(inputElement, container);
+            await showPopupWithAuthCheck(inputElement, container);
+          }
+        }
+
+        /**
+         * Show popup with auth check.
+         */
+        async function showPopupWithAuthCheck(inputElement: HTMLInputElement, container: HTMLElement) : Promise<void> {
+          try {
+            // Check auth status and pending migrations in a single call
+            const { sendMessage } = await import('webext-bridge/content-script');
+            const authStatus = await sendMessage('CHECK_AUTH_STATUS', {}, 'background') as {
+              isLoggedIn: boolean,
+              isVaultLocked: boolean,
+              hasPendingMigrations: boolean,
+              error?: string
+            };
+
+            if (authStatus.isVaultLocked) {
+              // Vault is locked, show vault locked popup
+              const { createVaultLockedPopup } = await import('@/entrypoints/contentScript/Popup');
+              createVaultLockedPopup(inputElement, container);
+              return;
+            }
+
+            if (authStatus.hasPendingMigrations) {
+              // Show upgrade required popup
+              await createUpgradeRequiredPopup(inputElement, container, await t('content.vaultUpgradeRequired'));
+              return;
+            }
+
+            if (authStatus.error) {
+              // Show upgrade required popup for version-related errors
+              await createUpgradeRequiredPopup(inputElement, container, authStatus.error);
+              return;
+            }
+
+            // No upgrade required, show normal autofill popup
+            openAutofillPopup(inputElement, container);
+          } catch (error) {
+            console.error('Error checking vault status:', error);
+            // Fall back to normal autofill popup if check fails
+            openAutofillPopup(inputElement, container);
+          }
+        }
+      },
+    });
+
+    // Mount the UI to create the shadow root
+    ui.autoMount();
+  },
+});

apps/browser-extension/src/entrypoints/contentScript/Filter.ts

@@ -1,5 +1,5 @@
-import { CombinedStopWords } from "@/utils/formDetector/FieldPatterns";
-import { Credential } from "../../utils/types/Credential";
+import type { Credential } from '@/utils/dist/shared/models/vault';
+import { CombinedStopWords } from '@/utils/formDetector/FieldPatterns';
 
 type CredentialWithPriority = Credential & {
   priority: number;

apps/browser-extension/src/entrypoints/contentScript/Form.ts

@@ -1,7 +1,8 @@
-import { FormDetector } from "../../utils/formDetector/FormDetector";
-import { FormFiller } from "../../utils/formDetector/FormFiller";
-import { Credential } from "../../utils/types/Credential";
-import { openAutofillPopup } from "./Popup";
+import { openAutofillPopup } from '@/entrypoints/contentScript/Popup';
+
+import type { Credential } from '@/utils/dist/shared/models/vault';
+import { FormDetector } from '@/utils/formDetector/FormDetector';
+import { FormFiller } from '@/utils/formDetector/FormFiller';
 
 /**
  * Global timestamp to track popup debounce time.

apps/browser-extension/src/entrypoints/contentScript/style.css

@@ -196,6 +196,7 @@ body {
   justify-content: center;
   gap: 4px;
   transition: background-color 0.2s ease;
+  min-width: 0px;
 }
 
 .av-button:hover {
@@ -231,6 +232,7 @@ body {
   outline: none;
   line-height: 1;
   text-align: center;
+  min-width: 0px;
 }
 
 .av-search-input::placeholder {
@@ -297,6 +299,71 @@ body {
   border: 1px solid #6f6f6f;
 }
 
+/* Upgrade Required Popup */
+.av-upgrade-required {
+  padding: 12px 16px;
+  position: relative;
+}
+
+.av-upgrade-required:hover {
+  background-color: #374151;
+}
+
+.av-upgrade-required-container {
+  display: flex;
+  align-items: center;
+  padding-right: 32px;
+  width: 100%;
+  transition: background-color 0.2s ease;
+  border-radius: 4px;
+}
+
+.av-upgrade-required-message {
+  color: #d1d5db;
+  font-size: 14px;
+  flex-grow: 1;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.av-upgrade-required-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  padding-right: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f59e0b;
+  border-radius: 4px;
+  margin-left: 8px;
+}
+
+.av-upgrade-required-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  border: 1px solid #6f6f6f;
+}
+
+.av-icon-upgrade {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 /* Create Name Popup */
 .av-create-popup-overlay {
   position: fixed;
@@ -787,4 +854,331 @@ body {
   margin: 4px 0 0;
   font-size: 12px;
   color: #9ca3af;
+}
+
+/* Context Menu */
+.av-context-menu {
+  position: fixed;
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 6px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+              0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 2147483647;
+  min-width: 180px;
+  padding: 4px;
+  margin-top: 4px;
+}
+
+.av-context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  color: #e5e7eb;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.av-context-menu-item:hover {
+  background-color: #374151;
+}
+
+.av-context-menu-item .av-icon {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Password Configuration Styles */
+.av-password-length-container {
+  margin-top: 12px;
+  padding-top: 8px;
+}
+
+.av-password-length-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.av-password-length-header label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.av-password-length-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.av-password-length-value {
+  font-size: 0.875rem;
+  color: #e5e7eb;
+  font-family: 'Courier New', monospace;
+  min-width: 24px;
+  text-align: center;
+}
+
+.av-password-config-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #9ca3af;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.av-password-config-btn:hover {
+  color: #e5e7eb;
+  background-color: rgba(75, 85, 99, 0.3);
+}
+
+.av-password-config-btn .av-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.av-password-length-slider {
+  width: 100%;
+  height: 8px;
+  background: #374151;
+  border-radius: 4px;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.av-password-length-slider::-webkit-slider-thumb {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: #d68338;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.av-password-length-slider::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: #d68338;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Password Config Dialog */
+.av-password-config-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 2147483647;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.av-password-config-dialog {
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  width: 400px;
+  max-width: 90vw;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.av-password-config-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #374151;
+}
+
+.av-password-config-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #f8f9fa;
+}
+
+.av-password-config-close {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #9ca3af;
+  border-radius: 4px;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.av-password-config-close:hover {
+  color: #e5e7eb;
+  background-color: #374151;
+}
+
+.av-password-config-close .av-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.av-password-config-content {
+  padding: 20px;
+}
+
+.av-password-preview-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.av-password-config-preview {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #374151;
+  border-radius: 6px;
+  background: #374151;
+  color: #f8f9fa;
+  font-size: 14px;
+  font-family: 'Courier New', monospace;
+  outline: none;
+}
+
+.av-password-config-refresh {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  background: #374151;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #e5e7eb;
+  transition: background-color 0.2s ease;
+}
+
+.av-password-config-refresh:hover {
+  background-color: #4b5563;
+}
+
+.av-password-config-refresh .av-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.av-password-config-options {
+  margin-bottom: 20px;
+}
+
+.av-password-config-toggles {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.av-password-config-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  background: #374151;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #9ca3af;
+  transition: all 0.2s ease;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.av-password-config-toggle:hover {
+  background-color: #4b5563;
+}
+
+.av-password-config-toggle.active {
+  background-color: #d68338;
+  color: white;
+}
+
+.av-password-config-toggle.active:hover {
+  background-color: #c97731;
+}
+
+.av-password-config-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.av-password-config-checkbox label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #e5e7eb;
+  margin: 0;
+}
+
+.av-password-config-checkbox input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: #d68338;
+  cursor: pointer;
+}
+
+.av-password-config-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.av-password-config-use {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: #6b7280;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+}
+
+.av-password-config-use:hover {
+  background-color: #4b5563;
+}
+
+.av-password-config-use .av-icon {
+  width: 16px;
+  height: 16px;
 }

apps/browser-extension/src/entrypoints/popup/App.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+
+import BottomNav from '@/entrypoints/popup/components/Layout/BottomNav';
+import Header from '@/entrypoints/popup/components/Layout/Header';
+import LoadingSpinner from '@/entrypoints/popup/components/LoadingSpinner';
+import { useAuth } from '@/entrypoints/popup/context/AuthContext';
+import { useHeaderButtons } from '@/entrypoints/popup/context/HeaderButtonsContext';
+import { useLoading } from '@/entrypoints/popup/context/LoadingContext';
+import { NavigationProvider } from '@/entrypoints/popup/context/NavigationContext';
+import AuthSettings from '@/entrypoints/popup/pages/AuthSettings';
+import CredentialAddEdit from '@/entrypoints/popup/pages/CredentialAddEdit';
+import CredentialDetails from '@/entrypoints/popup/pages/CredentialDetails';
+import CredentialsList from '@/entrypoints/popup/pages/CredentialsList';
+import EmailDetails from '@/entrypoints/popup/pages/EmailDetails';
+import EmailsList from '@/entrypoints/popup/pages/EmailsList';
+import Index from '@/entrypoints/popup/pages/Index';
+import Login from '@/entrypoints/popup/pages/Login';
+import Logout from '@/entrypoints/popup/pages/Logout';
+import Reinitialize from '@/entrypoints/popup/pages/Reinitialize';
+import Settings from '@/entrypoints/popup/pages/Settings';
+import Unlock from '@/entrypoints/popup/pages/Unlock';
+import UnlockSuccess from '@/entrypoints/popup/pages/UnlockSuccess';
+import Upgrade from '@/entrypoints/popup/pages/Upgrade';
+
+import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
+
+import '@/entrypoints/popup/style.css';
+
+/**
+ * Route configuration.
+ */
+type RouteConfig = {
+  path: string;
+  element: React.ReactNode;
+  showBackButton?: boolean;
+  title?: string;
+};
+
+/**
+ * App component.
+ */
+const App: React.FC = () => {
+  const { t } = useTranslation();
+  const authContext = useAuth();
+  const { isInitialLoading } = useLoading();
+  const [isLoading, setIsLoading] = useMinDurationLoading(true, 150);
+  const [message, setMessage] = useState<string | null>(null);
+  const { headerButtons } = useHeaderButtons();
+
+  // Move routes definition to useMemo to prevent recreation on every render
+  const routes: RouteConfig[] = React.useMemo(() => [
+    { path: '/', element: <Index />, showBackButton: false },
+    { path: '/reinitialize', element: <Reinitialize />, showBackButton: false },
+    { path: '/login', element: <Login />, showBackButton: false },
+    { path: '/unlock', element: <Unlock />, showBackButton: false },
+    { path: '/unlock-success', element: <UnlockSuccess />, showBackButton: false },
+    { path: '/upgrade', element: <Upgrade />, showBackButton: false },
+    { path: '/auth-settings', element: <AuthSettings />, showBackButton: true, title: t('settings.title') },
+    { path: '/credentials', element: <CredentialsList />, showBackButton: false },
+    { path: '/credentials/add', element: <CredentialAddEdit />, showBackButton: true, title: t('credentials.addCredential') },
+    { path: '/credentials/:id', element: <CredentialDetails />, showBackButton: true, title: t('credentials.credentialDetails') },
+    { path: '/credentials/:id/edit', element: <CredentialAddEdit />, showBackButton: true, title: t('credentials.editCredential') },
+    { path: '/emails', element: <EmailsList />, showBackButton: false },
+    { path: '/emails/:id', element: <EmailDetails />, showBackButton: true, title: t('emails.title') },
+    { path: '/settings', element: <Settings />, showBackButton: false },
+    { path: '/logout', element: <Logout />, showBackButton: false },
+  ], [t]);
+
+  useEffect(() => {
+    if (!isInitialLoading) {
+      setIsLoading(false);
+    }
+  }, [isInitialLoading, setIsLoading]);
+
+  /**
+   * Print global message if it exists.
+   */
+  useEffect(() => {
+    if (authContext.globalMessage) {
+      setMessage(authContext.globalMessage);
+    } else {
+      setMessage(null);
+    }
+  }, [authContext, authContext.globalMessage]);
+
+  return (
+    <Router>
+      <NavigationProvider>
+        <div className="min-h-screen min-w-[350px] bg-white dark:bg-gray-900 flex flex-col max-h-[600px]">
+          {isLoading && (
+            <div className="fixed inset-0 bg-white dark:bg-gray-900 z-50 flex items-center justify-center">
+              <LoadingSpinner />
+            </div>
+          )}
+
+          <Header
+            routes={routes}
+            rightButtons={headerButtons}
+          />
+
+          <main
+            className="flex-1 overflow-y-auto bg-gray-100 dark:bg-gray-900"
+            style={{
+              paddingTop: '64px',
+              height: 'calc(100% - 120px)',
+            }}
+          >
+            <div className="p-4 mb-16">
+              {message && (
+                <p className="text-red-500 mb-4">{message}</p>
+              )}
+              <Routes>
+                {routes.map((route) => (
+                  <Route
+                    key={route.path}
+                    path={route.path}
+                    element={route.element}
+                  />
+                ))}
+              </Routes>
+            </div>
+          </main>
+          <BottomNav />
+        </div>
+      </NavigationProvider>
+    </Router>
+  );
+};
+
+export default App;

apps/browser-extension/src/entrypoints/popup/components/CredentialCard.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import type { Credential } from '@/utils/dist/shared/models/vault';
+import SqliteClient from '@/utils/SqliteClient';
+
+type CredentialCardProps = {
+  credential: Credential;
+};
+
+/**
+ * CredentialCard component
+ *
+ * This component displays a credential card with a service name, username, and email.
+ * It allows the user to navigate to the credential details page when clicked.
+ *
+ */
+const CredentialCard: React.FC<CredentialCardProps> = ({ credential }) => {
+  const navigate = useNavigate();
+
+  /**
+   * Get the display text for the credential
+   * @param cred - The credential to get the display text for
+   * @returns The display text for the credential
+   */
+  const getDisplayText = (cred: Credential): string => {
+    let returnValue = '';
+
+    // Show username if available
+    if (cred.Username) {
+      returnValue = cred.Username;
+    }
+
+    // Show email if username is not available
+    if (cred.Alias?.Email) {
+      returnValue = cred.Alias.Email;
+    }
+
+    // Trim the return value to max. 33 characters.
+    return returnValue.length > 33 ? returnValue.slice(0, 30) + '...' : returnValue;
+  };
+
+  /**
+   * Get the service name for a credential, trimming it to maximum length so it doesn't overflow the UI.
+   */
+  const getCredentialServiceName = (cred: Credential): string => {
+    let returnValue = 'Untitled';
+
+    if (cred.ServiceName) {
+      returnValue = cred.ServiceName;
+    }
+
+    // Trim the return value to max. 33 characters.
+    return returnValue.length > 33 ? returnValue.slice(0, 30) + '...' : returnValue;
+  };
+
+  return (
+    <li>
+      <button
+        onClick={() => navigate(`/credentials/${credential.Id}`)}
+        className="w-full p-2 border dark:border-gray-600 rounded flex items-center bg-white dark:bg-gray-800 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        <img
+          src={SqliteClient.imgSrcFromBytes(credential.Logo)}
+          alt={credential.ServiceName}
+          className="w-8 h-8 mr-2 flex-shrink-0"
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            target.src = '/assets/images/service-placeholder.webp';
+          }}
+        />
+        <div className="text-left">
+          <p className="font-medium text-gray-900 dark:text-white">{getCredentialServiceName(credential)}</p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">{getDisplayText(credential)}</p>
+        </div>
+      </button>
+    </li>
+  );
+};
+
+export default CredentialCard;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/AliasBlock.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/FormInputCopyToClipboard';
+
+import { IdentityHelperUtils } from '@/utils/dist/shared/identity-generator';
+import type { Credential } from '@/utils/dist/shared/models/vault';
+
+type AliasBlockProps = {
+  credential: Credential;
+}
+
+/**
+ * Render the alias block.
+ */
+const AliasBlock: React.FC<AliasBlockProps> = ({ credential }) => {
+  const { t } = useTranslation();
+  const hasFirstName = Boolean(credential.Alias?.FirstName?.trim());
+  const hasLastName = Boolean(credential.Alias?.LastName?.trim());
+  const hasNickName = Boolean(credential.Alias?.NickName?.trim());
+  const hasBirthDate = IdentityHelperUtils.isValidBirthDate(credential.Alias?.BirthDate);
+
+  if (!hasFirstName && !hasLastName && !hasNickName && !hasBirthDate) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.alias')}</h2>
+      {(hasFirstName || hasLastName) && (
+        <FormInputCopyToClipboard
+          id="fullName"
+          label={t('common.fullName')}
+          value={[credential.Alias?.FirstName, credential.Alias?.LastName].filter(Boolean).join(' ')}
+        />
+      )}
+      {hasFirstName && (
+        <FormInputCopyToClipboard
+          id="firstName"
+          label={t('common.firstName')}
+          value={credential.Alias?.FirstName ?? ''}
+        />
+      )}
+      {hasLastName && (
+        <FormInputCopyToClipboard
+          id="lastName"
+          label={t('common.lastName')}
+          value={credential.Alias?.LastName ?? ''}
+        />
+      )}
+      {hasBirthDate && (
+        <FormInputCopyToClipboard
+          id="birthDate"
+          label={t('common.birthDate')}
+          value={IdentityHelperUtils.normalizeBirthDateForDisplay(credential.Alias?.BirthDate)}
+        />
+      )}
+      {hasNickName && (
+        <FormInputCopyToClipboard
+          id="nickName"
+          label={t('common.nickname')}
+          value={credential.Alias?.NickName ?? ''}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AliasBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/AttachmentBlock.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+
+import type { Attachment } from '@/utils/dist/shared/models/vault';
+
+type AttachmentBlockProps = {
+  credentialId: string;
+}
+
+/**
+ * This component shows attachments for a credential.
+ */
+const AttachmentBlock: React.FC<AttachmentBlockProps> = ({ credentialId }) => {
+  const { t } = useTranslation();
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const dbContext = useDb();
+
+  /**
+   * Downloads an attachment file.
+   */
+  const downloadAttachment = (attachment: Attachment): void => {
+    try {
+      // Convert Uint8Array or number[] to Uint8Array
+      const byteArray = attachment.Blob instanceof Uint8Array
+        ? attachment.Blob
+        : new Uint8Array(attachment.Blob);
+
+      // Create blob and download
+      const blob = new Blob([byteArray as BlobPart]);
+      const url = URL.createObjectURL(blob);
+
+      // Create temporary download link
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = attachment.Filename;
+      document.body.appendChild(a);
+      a.click();
+
+      // Cleanup
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error downloading attachment:', error);
+    }
+  };
+
+  useEffect(() => {
+    /**
+     * Loads the attachments for the credential.
+     */
+    const loadAttachments = async (): Promise<void> => {
+      if (!dbContext?.sqliteClient) {
+        return;
+      }
+
+      try {
+        const attachmentList = dbContext.sqliteClient.getAttachmentsForCredential(credentialId);
+        setAttachments(attachmentList);
+      } catch (error) {
+        console.error('Error loading attachments:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadAttachments();
+  }, [credentialId, dbContext?.sqliteClient]);
+
+  if (loading) {
+    return (
+      <div className="text-gray-500 dark:text-gray-400 mb-4">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('common.attachments')}</h2>
+        {t('common.loadingAttachments')}
+      </div>
+    );
+  }
+
+  if (attachments.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-4">
+      <div className="space-y-2">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('common.attachments')}</h2>
+        <div className="grid grid-cols-1 gap-2">
+          {attachments.map(attachment => (
+            <button
+              key={attachment.Id}
+              className="w-full text-left p-2 ps-3 pe-3 rounded bg-white dark:bg-gray-800 shadow hover:shadow-md transition-all border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+              onClick={() => downloadAttachment(attachment)}
+              aria-label={`Download ${attachment.Filename}`}
+            >
+              <div className="flex justify-between items-center gap-2">
+                <div className="flex items-center flex-1">
+                  <div className="flex flex-col">
+                    <h4 className="text-sm font-medium text-gray-900 dark:text-white">{attachment.Filename}</h4>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {new Date(attachment.CreatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex items-center">
+                  <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5m0 0l5-5m-5 5V4" />
+                  </svg>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AttachmentBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/AttachmentUploader.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { Attachment } from '@/utils/dist/shared/models/vault';
+
+type AttachmentUploaderProps = {
+  attachments: Attachment[];
+  onAttachmentsChange: (attachments: Attachment[]) => void;
+}
+
+/**
+ * This component allows uploading and managing attachments for a credential.
+ */
+const AttachmentUploader: React.FC<AttachmentUploaderProps> = ({
+  attachments,
+  onAttachmentsChange
+}) => {
+  const { t } = useTranslation();
+  const [statusMessage, setStatusMessage] = useState<string>('');
+
+  /**
+   * Handles file selection and upload.
+   */
+  const handleFileSelection = async (event: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+    const files = event.target.files;
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    setStatusMessage('Uploading...');
+
+    try {
+      const newAttachments = [...attachments];
+
+      for (const file of Array.from(files)) {
+        const arrayBuffer = await file.arrayBuffer();
+        const byteArray = new Uint8Array(arrayBuffer);
+
+        const attachment: Attachment = {
+          Id: crypto.randomUUID(),
+          Filename: file.name,
+          Blob: byteArray,
+          CredentialId: '', // Will be set when saving credential
+          CreatedAt: new Date().toISOString(),
+          UpdatedAt: new Date().toISOString(),
+          IsDeleted: false,
+        };
+
+        newAttachments.push(attachment);
+      }
+
+      onAttachmentsChange(newAttachments);
+      setStatusMessage('Files uploaded successfully.');
+
+      // Clear status message after 3 seconds
+      setTimeout(() => setStatusMessage(''), 3000);
+    } catch (error) {
+      console.error('Error uploading files:', error);
+      setStatusMessage('Error uploading files.');
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+
+    // Reset file input
+    event.target.value = '';
+  };
+
+  /**
+   * Deletes an attachment.
+   */
+  const deleteAttachment = (attachmentToDelete: Attachment): void => {
+    try {
+      const updatedAttachments = [...attachments];
+
+      // Remove attachment from array
+      const index = updatedAttachments.findIndex(a => a.Id === attachmentToDelete.Id);
+      if (index !== -1) {
+        updatedAttachments.splice(index, 1);
+      }
+
+      onAttachmentsChange(updatedAttachments);
+      setStatusMessage('Attachment deleted successfully.');
+      setTimeout(() => setStatusMessage(''), 3000);
+    } catch (error) {
+      console.error('Error deleting attachment:', error);
+      setStatusMessage('Error deleting attachment.');
+      setTimeout(() => setStatusMessage(''), 3000);
+    }
+  };
+
+  const activeAttachments = attachments.filter(a => !a.IsDeleted);
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('common.attachments')}</h2>
+
+      <div className="space-y-4">
+        <div>
+          <input
+            type="file"
+            multiple
+            onChange={handleFileSelection}
+            className="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+          />
+          {statusMessage && (
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">{statusMessage}</p>
+          )}
+        </div>
+
+        {activeAttachments.length > 0 && (
+          <div>
+            <h4 className="mb-2 text-md font-medium text-gray-900 dark:text-white">Current attachments:</h4>
+            <div className="space-y-2">
+              {activeAttachments.map(attachment => (
+                <div
+                  key={attachment.Id}
+                  className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600"
+                >
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      {attachment.Filename}
+                    </span>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {new Date(attachment.CreatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => deleteAttachment(attachment)}
+                    className="text-red-500 hover:text-red-700 focus:outline-none"
+                    aria-label={`Delete ${attachment.Filename}`}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AttachmentUploader;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/EmailBlock.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { EmailPreview } from '@/entrypoints/popup/components/EmailPreview';
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+
+type EmailBlockProps = {
+  email: string;
+}
+
+/**
+ * Render the email block.
+ */
+const EmailBlock: React.FC<EmailBlockProps> = ({ email }) => {
+  const dbContext = useDb();
+
+  /**
+   * Check if the email domain is supported.
+   */
+  const isEmailDomainSupported = async (email: string): Promise<boolean> => {
+    const domain = email.split('@')[1]?.toLowerCase();
+    if (!domain) {
+      return false;
+    }
+
+    const vaultMetadata = await dbContext.getVaultMetadata();
+    const publicDomains = vaultMetadata?.publicEmailDomains ?? [];
+    const privateDomains = vaultMetadata?.privateEmailDomains ?? [];
+
+    return [...publicDomains, ...privateDomains].some(supportedDomain =>
+      domain === supportedDomain || domain.endsWith(`.${supportedDomain}`)
+    );
+  };
+
+  if (!isEmailDomainSupported(email)) {
+    return null;
+  }
+
+  return (
+    <>
+      {<EmailPreview email={email} />}
+    </>
+  );
+};
+
+export default EmailBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/HeaderBlock.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import type { Credential } from '@/utils/dist/shared/models/vault';
+import SqliteClient from '@/utils/SqliteClient';
+
+type HeaderBlockProps = {
+  credential: Credential;
+}
+
+/**
+ * Render the header block.
+ */
+const HeaderBlock: React.FC<HeaderBlockProps> = ({ credential }) => (
+  <div className="flex items-center justify-between">
+    <div className="flex items-center">
+      <img
+        src={SqliteClient.imgSrcFromBytes(credential.Logo)}
+        alt={credential.ServiceName}
+        className="w-12 h-12 rounded-lg mr-4"
+      />
+      <div>
+        <h1 className="text-lg font-bold text-gray-900 dark:text-white">{credential.ServiceName}</h1>
+        {credential.ServiceUrl && (
+          <a
+            href={credential.ServiceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 break-all"
+          >
+            {credential.ServiceUrl}
+          </a>
+        )}
+      </div>
+    </div>
+  </div>
+);
+
+export default HeaderBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/LoginCredentialsBlock.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FormInputCopyToClipboard } from '@/entrypoints/popup/components/FormInputCopyToClipboard';
+
+import type { Credential } from '@/utils/dist/shared/models/vault';
+
+type LoginCredentialsBlockProps = {
+  credential: Credential;
+}
+
+/**
+ * Render the login credentials block.
+ */
+const LoginCredentialsBlock: React.FC<LoginCredentialsBlockProps> = ({ credential }) => {
+  const { t } = useTranslation();
+  const email = credential.Alias?.Email?.trim();
+  const username = credential.Username?.trim();
+  const password = credential.Password?.trim();
+
+  if (!email && !username && !password) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.loginCredentials')}</h2>
+      {email && (
+        <FormInputCopyToClipboard
+          id="email"
+          label={t('common.email')}
+          value={email}
+        />
+      )}
+      {username && (
+        <FormInputCopyToClipboard
+          id="username"
+          label={t('common.username')}
+          value={username}
+        />
+      )}
+      {password && (
+        <FormInputCopyToClipboard
+          id="password"
+          label={t('common.password')}
+          value={password}
+          type="password"
+        />
+      )}
+    </div>
+  );
+};
+
+export default LoginCredentialsBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/NotesBlock.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type NotesBlockProps = {
+  notes: string | undefined;
+}
+
+/**
+ * Convert URLs in text to clickable links.
+ */
+const convertUrlsToLinks = (text: string): string => {
+  const urlPattern = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g;
+
+  return text.replace(urlPattern, (url) => {
+    const href = url.startsWith('http') ? url : `http://${url}`;
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">${url}</a>`;
+  });
+};
+
+/**
+ * Render the notes block.
+ */
+const NotesBlock: React.FC<NotesBlockProps> = ({ notes }) => {
+  const { t } = useTranslation();
+  if (!notes) {
+    return null;
+  }
+
+  const formattedNotes = convertUrlsToLinks(notes);
+
+  return (
+    <div>
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t('common.notes')}</h2>
+      <div className="p-4 bg-gray-50 rounded-lg dark:bg-gray-700">
+        <p
+          className="text-gray-900 dark:text-gray-100 whitespace-pre-wrap"
+          dangerouslySetInnerHTML={{ __html: formattedNotes }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NotesBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/TotpBlock.tsx

@@ -1,16 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import { useDb } from '../context/DbContext';
-import { TotpCode } from '../../../utils/types/TotpCode';
 import  * as OTPAuth from 'otpauth';
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
-type TotpViewerProps = {
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+
+import type { TotpCode } from '@/utils/dist/shared/models/vault';
+
+type TotpBlockProps = {
   credentialId: string;
 }
 
 /**
  * This component shows TOTP codes for a credential.
  */
-export const TotpViewer: React.FC<TotpViewerProps> = ({ credentialId }) => {
+const TotpBlock: React.FC<TotpBlockProps> = ({ credentialId }) => {
+  const { t } = useTranslation();
   const [totpCodes, setTotpCodes] = useState<TotpCode[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentCodes, setCurrentCodes] = useState<Record<string, string>>({});
@@ -136,8 +140,8 @@ export const TotpViewer: React.FC<TotpViewerProps> = ({ credentialId }) => {
   if (loading) {
     return (
       <div className="text-gray-500 dark:text-gray-400 mb-4">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Two-factor authentication</h2>
-        Loading TOTP codes...
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('common.twoFactorAuthentication')}</h2>
+        {t('common.loadingTotpCodes')}
       </div>
     );
   }
@@ -149,7 +153,7 @@ export const TotpViewer: React.FC<TotpViewerProps> = ({ credentialId }) => {
   return (
     <div className="mb-4">
       <div className="space-y-2">
-        <h2 className="text-base font-semibold text-gray-900 dark:text-white">Two-factor authentication</h2>
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('common.twoFactorAuthentication')}</h2>
         <div className="grid grid-cols-1 gap-2">
           {totpCodes.map(totpCode => (
             <button
@@ -169,7 +173,7 @@ export const TotpViewer: React.FC<TotpViewerProps> = ({ credentialId }) => {
                     </span>
                     <div className="text-xs">
                       {copiedId === totpCode.Id ? (
-                        <span className="text-green-600 dark:text-green-400">Copied!</span>
+                        <span className="text-green-600 dark:text-green-400">{t('common.copied')}</span>
                       ) : (
                         <span className="text-gray-500 dark:text-gray-400">{getRemainingSeconds()}s</span>
                       )}
@@ -189,4 +193,6 @@ export const TotpViewer: React.FC<TotpViewerProps> = ({ credentialId }) => {
       </div>
     </div>
   );
-};
+};
+
+export default TotpBlock;

apps/browser-extension/src/entrypoints/popup/components/CredentialDetails/index.tsx

@@ -0,0 +1,17 @@
+import AliasBlock from './AliasBlock';
+import AttachmentBlock from './AttachmentBlock';
+import EmailBlock from './EmailBlock';
+import HeaderBlock from './HeaderBlock';
+import LoginCredentialsBlock from './LoginCredentialsBlock';
+import NotesBlock from './NotesBlock';
+import TotpBlock from './TotpBlock';
+
+export {
+  HeaderBlock,
+  EmailBlock,
+  TotpBlock,
+  LoginCredentialsBlock,
+  AliasBlock,
+  NotesBlock,
+  AttachmentBlock
+};

apps/browser-extension/src/entrypoints/popup/components/EmailPreview.tsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import { useDb } from '@/entrypoints/popup/context/DbContext';
+import { useWebApi } from '@/entrypoints/popup/context/WebApiContext';
+
+import { AppInfo } from '@/utils/AppInfo';
+import type { ApiErrorResponse, MailboxEmail } from '@/utils/dist/shared/models/webapi';
+import { EncryptionUtility } from '@/utils/EncryptionUtility';
+
+import { storage } from '#imports';
+
+type EmailPreviewProps = {
+  email: string;
+}
+
+/**
+ * This component shows a preview of the latest emails in the inbox.
+ */
+export const EmailPreview: React.FC<EmailPreviewProps> = ({ email }) => {
+  const { t } = useTranslation();
+  const [emails, setEmails] = useState<MailboxEmail[]>([]);
+  const [displayedEmails, setDisplayedEmails] = useState<MailboxEmail[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [lastEmailId, setLastEmailId] = useState<number>(0);
+  const [isSpamOk, setIsSpamOk] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSupportedDomain, setIsSupportedDomain] = useState(false);
+  const [displayedCount, setDisplayedCount] = useState(2);
+  const webApi = useWebApi();
+  const dbContext = useDb();
+
+  const emailsPerLoad = 3;
+  const canLoadMore = displayedCount < emails.length;
+
+  /**
+   * Updates the displayed emails based on the current count.
+   */
+  const updateDisplayedEmails = (allEmails: MailboxEmail[], count: number) : void => {
+    const displayed = allEmails.slice(0, count);
+    setDisplayedEmails(displayed);
+  };
+
+  /**
+   * Loads more emails.
+   */
+  const loadMoreEmails = (): void => {
+    const newCount = Math.min(displayedCount + emailsPerLoad, emails.length);
+    setDisplayedCount(newCount);
+    updateDisplayedEmails(emails, newCount);
+  };
+
+  /**
+   * Checks if the email is a public domain.
+   */
+  const isPublicDomain = async (emailAddress: string): Promise<boolean> => {
+    // Get metadata from storage
+    const publicEmailDomains = await storage.getItem('session:publicEmailDomains') as string[] ?? [];
+    return publicEmailDomains.some(domain => emailAddress.toLowerCase().endsWith(domain));
+  };
+
+  /**
+   * Checks if the email is a private domain.
+   */
+  const isPrivateDomain = async (emailAddress: string): Promise<boolean> => {
+    // Get metadata from storage
+    const privateEmailDomains = await storage.getItem('session:privateEmailDomains') as string[] ?? [];
+    return privateEmailDomains.some(domain => emailAddress.toLowerCase().endsWith(domain));
+  };
+
+  useEffect(() => {
+    /**
+     * Loads the latest emails from the server and decrypts them locally if needed.
+     */
+    const loadEmails = async (): Promise<void> => {
+      try {
+        setError(null);
+        const isPublic = await isPublicDomain(email);
+        const isPrivate = await isPrivateDomain(email);
+        const isSupported = isPublic || isPrivate;
+
+        setIsSpamOk(isPublic);
+        setIsSupportedDomain(isSupported);
+
+        if (!isSupported) {
+          return;
+        }
+
+        if (isPublic) {
+          // For public domains (SpamOK), use the SpamOK API directly
+          const emailPrefix = email.split('@')[0];
+          const response = await fetch(`https://api.spamok.com/v2/EmailBox/${emailPrefix}`, {
+            headers: {
+              'X-Asdasd-Platform-Id': 'av-chrome',
+              'X-Asdasd-Platform-Version': AppInfo.VERSION,
+            }
+          });
+
+          if (!response.ok) {
+            setError(t('emails.errors.emailLoadError'));
+            return;
+          }
+
+          const data = await response.json();
+
+          // Store all emails, sorted by date
+          const allMails = data?.mails
+            ?.toSorted((a: MailboxEmail, b: MailboxEmail) =>
+              new Date(b.dateSystem).getTime() - new Date(a.dateSystem).getTime()) ?? [];
+
+          if (loading && allMails.length > 0) {
+            setLastEmailId(allMails[0].id);
+          }
+
+          // Only update emails if they actually changed to preserve displayedCount
+          setEmails(prevEmails => {
+            const emailsChanged = JSON.stringify(prevEmails.map(e => e.id)) !== JSON.stringify(allMails.map(e => e.id));
+            if (emailsChanged) {
+              updateDisplayedEmails(allMails, displayedCount);
+              return allMails;
+            }
+            return prevEmails;
+          });
+        } else if (isPrivate) {
+          // For private domains, use existing encrypted email logic
+          try {
+            /**
+             * We use authFetch here because we don't want to the inner method to throw an error if HTTP status is not 200.
+             * Instead we want to catch the error ourselves.
+             */
+            const response = await webApi.authFetch(`EmailBox/${email}`, { method: 'GET' }, true, false);
+            try {
+              const data = response as { mails: MailboxEmail[] };
+
+              // Store all emails, sorted by date
+              const allMails = data.mails
+                .toSorted((a, b) => new Date(b.dateSystem).getTime() - new Date(a.dateSystem).getTime());
+
+              if (allMails) {
+                // Loop through all emails and decrypt them locally
+                const decryptedEmails: MailboxEmail[] = await EncryptionUtility.decryptEmailList(
+                  allMails,
+                  dbContext.sqliteClient!.getAllEncryptionKeys()
+                );
+
+                if (loading && decryptedEmails.length > 0) {
+                  setLastEmailId(decryptedEmails[0].id);
+                }
+
+                // Only update emails if they actually changed to preserve displayedCount
+                setEmails(prevEmails => {
+                  const emailsChanged = JSON.stringify(prevEmails.map(e => e.id)) !== JSON.stringify(decryptedEmails.map(e => e.id));
+                  if (emailsChanged) {
+                    updateDisplayedEmails(decryptedEmails, displayedCount);
+                    return decryptedEmails;
+                  }
+                  return prevEmails;
+                });
+              }
+            } catch {
+              // Try to parse as error response instead
+              const apiErrorResponse = response as ApiErrorResponse;
+              setError(t('emails.apiErrors.' + apiErrorResponse?.code));
+              return;
+            }
+          } catch {
+            setError(t('emails.errors.emailLoadError'));
+            return;
+          }
+        }
+      } catch (err) {
+        console.error('Error loading emails:', err);
+        setError(t('emails.errors.emailUnexpectedError'));
+      }
+      setLoading(false);
+    };
+
+    loadEmails();
+    // Set up auto-refresh interval
+    const interval = setInterval(loadEmails, 2000);
+    return () : void => clearInterval(interval);
+  }, [email, loading, webApi, dbContext, t, displayedCount]);
+
+  // Don't render anything if the domain is not supported
+  if (!isSupportedDomain) {
+    return null;
+  }
+
+  if (error) {
+    return (
+      <div className="text-gray-500 dark:text-gray-400 mb-4">
+        <div className="flex items-center gap-2 mb-2">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
+        </div>
+        <div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded">
+          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="text-gray-500 dark:text-gray-400 mb-4">
+        <div className="flex items-center gap-2 mb-2">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
+          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+        </div>
+        {t('common.loadingEmails')}
+      </div>
+    );
+  }
+  if (emails.length === 0) {
+    return (
+      <div className="text-gray-500 dark:text-gray-400 mb-4">
+        <div className="flex items-center gap-2 mb-2">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
+          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+        </div>
+        {t('emails.noEmails')}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2 mb-4">
+      <div className="flex items-center gap-2 mb-2">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t('common.recentEmails')}</h2>
+        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+      </div>
+
+      {displayedEmails.map((mail) => (
+        isSpamOk ? (
+          <a
+            key={mail.id}
+            href={`https://spamok.com/${email.split('@')[0]}/${mail.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`flex justify-between items-center p-2 ps-3 pe-3 rounded cursor-pointer bg-white dark:bg-gray-800 shadow hover:shadow-md transition-all border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 ${
+              mail.id > lastEmailId ? 'bg-yellow-50 dark:bg-yellow-900/30' : ''
+            }`}
+          >
+            <div className="truncate flex-1">
+              <span className="text-sm text-gray-900 dark:text-white">
+                {mail.subject.substring(0, 30)}{mail.subject.length > 30 ? '...' : ''}
+              </span>
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 ml-2">
+              {new Date(mail.dateSystem).toLocaleDateString()}
+            </div>
+          </a>
+        ) : (
+          <Link
+            key={mail.id}
+            to={`/emails/${mail.id}`}
+            className={`flex justify-between items-center p-2 ps-3 pe-3 rounded cursor-pointer bg-white dark:bg-gray-800 shadow hover:shadow-md transition-all border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 ${
+              mail.id > lastEmailId ? 'bg-yellow-50 dark:bg-yellow-900/30' : ''
+            }`}
+          >
+            <span className="truncate flex-1">
+              <span className="text-sm text-gray-900 dark:text-white">
+                {mail.subject.substring(0, 30)}{mail.subject.length > 30 ? '...' : ''}
+              </span>
+            </span>
+            <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">
+              {new Date(mail.dateSystem).toLocaleDateString()}
+            </span>
+          </Link>
+        )
+      ))}
+
+      {canLoadMore && (
+        <button
+          onClick={loadMoreEmails}
+          className="w-full mt-2 py-1 px-3 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md transition-colors duration-200 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 flex items-center justify-center gap-1"
+        >
+          <span>{t('common.loadMore')}</span>
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};

apps/browser-extension/src/entrypoints/popup/components/FormInput.tsx

@@ -0,0 +1,180 @@
+import React, { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Button configuration for form input.
+ */
+type FormInputButton = {
+  icon: string;
+  onClick: () => void;
+  title?: string;
+}
+
+/**
+ * Icon component for form input buttons.
+ */
+const Icon: React.FC<{ name: string }> = ({ name }) => {
+  switch (name) {
+    case 'visibility':
+      return (
+        <>
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3" />
+        </>
+      );
+    case 'visibility-off':
+      return (
+        <>
+          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+          <line x1="1" y1="1" x2="23" y2="23" />
+        </>
+      );
+    case 'refresh':
+      return (
+        <>
+          <path d="M23 4v6h-6" />
+          <path d="M1 20v-6h6" />
+          <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+        </>
+      );
+    case 'settings':
+      return (
+        <>
+          <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+          <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        </>
+      );
+    default:
+      return null;
+  }
+};
+
+/**
+ * Form input props.
+ */
+type FormInputProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: 'text' | 'password';
+  placeholder?: string;
+  required?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  error?: string;
+  buttons?: FormInputButton[];
+  showPassword?: boolean;
+  onShowPasswordChange?: (show: boolean) => void;
+}
+
+/**
+ * Form input component.
+ */
+export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(({
+  id,
+  label,
+  value,
+  onChange,
+  type = 'text',
+  placeholder,
+  required = false,
+  multiline = false,
+  rows = 1,
+  error,
+  buttons = [],
+  showPassword: controlledShowPassword,
+  onShowPasswordChange
+}, ref) => {
+  const { t } = useTranslation();
+  const [internalShowPassword, setInternalShowPassword] = React.useState(false);
+
+  /**
+   * Use controlled or uncontrolled showPassword state.
+   * If controlledShowPassword is provided, use that value and call onShowPasswordChange.
+   * Otherwise, use internal state.
+   */
+  const showPassword = controlledShowPassword !== undefined ? controlledShowPassword : internalShowPassword;
+
+  /**
+   * Set the showPassword state.
+   * If controlledShowPassword is provided, use that value and call onShowPasswordChange.
+   * Otherwise, use internal state.
+   */
+  const setShowPassword = (value: boolean): void => {
+    if (controlledShowPassword !== undefined) {
+      onShowPasswordChange?.(value);
+    } else {
+      setInternalShowPassword(value);
+    }
+  };
+
+  const inputClasses = `mt-1 block w-full rounded-md ${
+    error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
+  } text-gray-900 sm:text-sm rounded-lg shadow-sm border focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 py-2 px-3`;
+
+  // Add password visibility button if type is password
+  const allButtons = type === 'password'
+    ? [...buttons, {
+      icon: showPassword ? 'visibility-off' : 'visibility',
+      /**
+       * Toggle password visibility.
+       */
+      onClick: (): void => setShowPassword(!showPassword),
+      title: showPassword ? t('common.hidePassword') : t('common.showPassword')
+    }]
+    : buttons;
+
+  return (
+    <div>
+      <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <div className="relative">
+        {multiline ? (
+          <textarea
+            id={id}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            rows={rows}
+            placeholder={placeholder}
+            className={inputClasses}
+          />
+        ) : (
+          <input
+            ref={ref}
+            type={type === 'password' && !showPassword ? 'password' : 'text'}
+            id={id}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            className={inputClasses}
+          />
+        )}
+        {allButtons.length > 0 && (
+          <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-2">
+            {allButtons.map((button, index) => (
+              <button
+                type="button"
+                key={index}
+                onClick={button.onClick}
+                title={button.title}
+                className="p-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
+              >
+                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <Icon name={button.icon} />
+                </svg>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className="mt-1 text-sm text-red-500">{error}</p>
+      )}
+    </div>
+  );
+});
+
+FormInput.displayName = 'FormInput';

apps/browser-extension/src/entrypoints/popup/components/FormInputCopyToClipboard.tsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ClipboardCopyService } from '@/entrypoints/popup/utils/ClipboardCopyService';
+
+/**
+ * Form input copy to clipboard props.
+ */
+type FormInputCopyToClipboardProps = {
+  id: string;
+  label: string;
+  value: string;
+  type?: 'text' | 'password';
+}
+
+const clipboardService = new ClipboardCopyService();
+
+/**
+ * Icon component for form input buttons.
+ */
+const Icon: React.FC<{ name: string }> = ({ name }) => {
+  switch (name) {
+    case 'visibility':
+      return (
+        <>
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3" />
+        </>
+      );
+    case 'visibility-off':
+      return (
+        <>
+          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+          <line x1="1" y1="1" x2="23" y2="23" />
+        </>
+      );
+    case 'copy':
+      return (
+        <>
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </>
+      );
+    case 'check':
+      return (
+        <>
+          <polyline points="20 6 9 17 4 12" />
+        </>
+      );
+    default:
+      return null;
+  }
+};
+
+/**
+ * Form input copy to clipboard component.
+ */
+export const FormInputCopyToClipboard: React.FC<FormInputCopyToClipboardProps> = ({
+  id,
+  label,
+  value,
+  type = 'text'
+}) => {
+  const { t } = useTranslation();
+  const [showPassword, setShowPassword] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = clipboardService.subscribe((copiedId) : void => {
+      setCopied(copiedId === id);
+    });
+    return () : void => {
+      unsubscribe();
+    };
+  }, [id]);
+
+  /**
+   * Copy to clipboard.
+   */
+  const copyToClipboard = async () : Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(value);
+      clipboardService.setCopied(id);
+
+      // Reset copied state after 2 seconds
+      setTimeout(() => {
+        if (clipboardService.getCopiedId() === id) {
+          clipboardService.setCopied('');
+        }
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy text:', err);
+    }
+  };
+
+  return (
+    <div>
+      <label htmlFor={id} className="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+        {label}
+      </label>
+      <div className="relative">
+        <input
+          type={type === 'password' && !showPassword ? 'password' : 'text'}
+          id={id}
+          readOnly
+          value={value}
+          onClick={copyToClipboard}
+          className={`w-full px-3 py-2.5 bg-white border ${
+            copied ? 'border-green-500 border-2' : 'border-gray-300'
+          } text-gray-900 sm:text-sm rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400`}
+        />
+        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-2">
+          {copied ? (
+            <button
+              type="button"
+              className="p-1 text-green-500 dark:text-green-400 transition-colors duration-200"
+              title={t('common.copied')}
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <Icon name="check" />
+              </svg>
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={copyToClipboard}
+              className="p-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
+              title={t('common.copyToClipboard')}
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <Icon name="copy" />
+              </svg>
+            </button>
+          )}
+          {type === 'password' && (
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="p-1 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
+              title={showPassword ? t('common.hidePassword') : t('common.showPassword')}
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <Icon name={showPassword ? 'visibility-off' : 'visibility'} />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/browser-extension/src/entrypoints/popup/components/HeaderButton.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { HeaderIcon, HeaderIconType } from '@/entrypoints/popup/components/Icons/HeaderIcons';
+
+type HeaderButtonProps = {
+  onClick: () => void;
+  title: string;
+  iconType: HeaderIconType;
+  variant?: 'default' | 'primary' | 'danger';
+};
+
+/**
+ * Header button component for consistent header button styling
+ */
+const HeaderButton: React.FC<HeaderButtonProps> = ({
+  onClick,
+  title,
+  iconType,
+  variant = 'default'
+}) => {
+  const colorClasses = {
+    default: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700',
+    primary: 'text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/20',
+    danger: 'text-red-500 hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-900/20'
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      className={`p-2 rounded-lg ${colorClasses[variant]}`}
+      title={title}
+    >
+      <HeaderIcon type={iconType} />
+    </button>
+  );
+};
+
+export default HeaderButton;

apps/browser-extension/src/entrypoints/popup/components/Icons/HeaderIcons.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+
+export enum HeaderIconType {
+  EXPAND = 'expand',
+  EDIT = 'edit',
+  DELETE = 'delete',
+  SETTINGS = 'settings',
+  RELOAD = 'reload',
+  EXTERNAL_LINK = 'external_link',
+  SAVE = 'save',
+  PLUS = 'plus',
+  TAB = 'tab'
+}
+
+type HeaderIconProps = {
+  type: HeaderIconType;
+  className?: string;
+};
+
+/**
+ * Component to render header icons
+ */
+export const HeaderIcon: React.FC<HeaderIconProps> = ({ type, className = 'w-5 h-5' }) => {
+  const icons = {
+    [HeaderIconType.EXPAND]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+        />
+      </svg>
+    ),
+    [HeaderIconType.EDIT]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+        />
+      </svg>
+    ),
+    [HeaderIconType.DELETE]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+        />
+      </svg>
+    ),
+    [HeaderIconType.SETTINGS]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        />
+      </svg>
+    ),
+    [HeaderIconType.RELOAD]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+        />
+      </svg>
+    ),
+    [HeaderIconType.EXTERNAL_LINK]: (
+      <svg
+        className={className}
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+        <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+      </svg>
+    ),
+    [HeaderIconType.SAVE]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M17 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V7l-4-4z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M7 3v5h10"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M12 12a2 2 0 100 4 2 2 0 000-4z"
+        />
+      </svg>
+    ),
+    [HeaderIconType.PLUS]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+      </svg>
+    ),
+    [HeaderIconType.TAB]: (
+      <svg
+        className={className}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"
+        />
+      </svg>
+    )
+  };
+
+  return icons[type] || null;
+};

apps/browser-extension/src/entrypoints/popup/components/LanguageSwitcher.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AVAILABLE_LANGUAGES, getLanguageConfig, ILanguageConfig } from '../../../i18n/config';
+
+import { storage } from '#imports';
+
+type LanguageSwitcherProps = {
+  variant?: 'dropdown' | 'buttons';
+  size?: 'sm' | 'md';
+};
+
+/**
+ * Language switcher component that allows users to switch between supported languages
+ * @param props - Component props including variant and size
+ * @returns JSX element for the language switcher
+ */
+const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  variant = 'dropdown',
+  size = 'md'
+}): React.JSX.Element => {
+  const { i18n } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const currentLanguage = getLanguageConfig(i18n.language) || AVAILABLE_LANGUAGES[0];
+
+  // Close dropdown when clicking outside
+  useEffect((): (() => void) => {
+    /**
+     * Handle clicks outside the dropdown to close it
+     * @param event - Mouse event
+     */
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  /**
+   * Change the application language
+   * @param lng - Language code to switch to
+   */
+  const changeLanguage = async (lng: string): Promise<void> => {
+    await i18n.changeLanguage(lng);
+    await storage.setItem('local:language', lng);
+
+    setIsOpen(false);
+
+    // Force immediate re-render by dispatching the event that react-i18next listens to
+    i18n.emit('languageChanged', lng);
+  };
+
+  if (variant === 'buttons') {
+    return (
+      <div className="flex space-x-2">
+        {AVAILABLE_LANGUAGES.map((lang: ILanguageConfig) => (
+          <button
+            key={lang.code}
+            onClick={() => changeLanguage(lang.code)}
+            className={`flex items-center space-x-1 px-2 py-1 text-xs rounded transition-colors ${
+              i18n.language === lang.code
+                ? 'bg-primary-500 text-white'
+                : 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-500'
+            }`}
+            title={lang.nativeName}
+          >
+            <span className="text-sm">{lang.flag}</span>
+            <span>{lang.code.toUpperCase()}</span>
+          </button>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`w-full flex items-center justify-between px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors ${
+          size === 'sm' ? 'text-sm' : 'text-base'
+        }`}
+      >
+        <div className="flex items-center space-x-2">
+          <span className="text-lg">{currentLanguage.flag}</span>
+          <span>{currentLanguage.nativeName}</span>
+        </div>
+        <svg
+          className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-full bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg z-50">
+          {AVAILABLE_LANGUAGES.map((lang: ILanguageConfig) => (
+            <button
+              key={lang.code}
+              onClick={() => changeLanguage(lang.code)}
+              className={`w-full flex items-center justify-between px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors first:rounded-t-lg last:rounded-b-lg ${
+                size === 'sm' ? 'text-sm' : 'text-base'
+              }`}
+            >
+              <div className="flex items-center space-x-2">
+                <span className="text-lg">{lang.flag}</span>
+                <span className="text-gray-700 dark:text-gray-200">{lang.nativeName}</span>
+              </div>
+              {i18n.language === lang.code && (
+                <svg className="w-4 h-4 text-primary-500" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LanguageSwitcher;

apps/browser-extension/src/entrypoints/popup/components/Layout/BottomNav.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useAuth } from '../../context/AuthContext';
-import { useDb } from '../../context/DbContext';
 
 type TabName = 'credentials' | 'emails' | 'settings';
 
@@ -9,17 +8,20 @@ type TabName = 'credentials' | 'emails' | 'settings';
  * Bottom nav component.
  */
 const BottomNav: React.FC = () => {
-  const authContext = useAuth();
-  const dbContext = useDb();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
   const [currentTab, setCurrentTab] = useState<TabName>('credentials');
 
   // Add effect to update currentTab based on route
   useEffect(() => {
-    const path = location.pathname.substring(1) as TabName;
-    if (['credentials', 'emails', 'settings'].includes(path)) {
-      setCurrentTab(path);
+    const path = location.pathname.substring(1); // Remove leading slash
+    const tabNames: TabName[] = ['credentials', 'emails', 'settings'];
+
+    // Find the first tab name that matches the start of the path
+    const matchingTab = tabNames.find(tab => path === tab || path.startsWith(`${tab}/`));
+    if (matchingTab) {
+      setCurrentTab(matchingTab);
     }
   }, [location]);
 
@@ -31,7 +33,11 @@ const BottomNav: React.FC = () => {
     navigate(`/${tab}`);
   };
 
-  if (!authContext.isLoggedIn || !dbContext.dbAvailable) {
+  // Auth pages that don't show bottom navigation but still show header
+  const authPages = ['/login', '/auth-settings', '/unlock', '/unlock-success', '/upgrade'];
+  const isAuthPage = authPages.includes(location.pathname);
+
+  if (isAuthPage) {
     return null;
   }
 
@@ -56,7 +62,7 @@ const BottomNav: React.FC = () => {
           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
           </svg>
-          <span className="text-xs mt-1">Credentials</span>
+          <span className="text-xs mt-1">{t('menu.credentials')}</span>
         </button>
         <button
           onClick={() => handleTabChange('emails')}
@@ -67,7 +73,7 @@ const BottomNav: React.FC = () => {
           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
           </svg>
-          <span className="text-xs mt-1">Emails</span>
+          <span className="text-xs mt-1">{t('menu.emails')}</span>
         </button>
         <button
           onClick={() => handleTabChange('settings')}
@@ -79,7 +85,7 @@ const BottomNav: React.FC = () => {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
           </svg>
-          <span className="text-xs mt-1">Settings</span>
+          <span className="text-xs mt-1">{t('menu.settings')}</span>
         </button>
       </div>
     </div>