Refatored vite.config to be a bit more streamlined before adding alternate build options. This did end up requiring me to remove @ from imports for some reason. Tests came out fine.

package.json

@@ -12,10 +12,10 @@
     "test-all": "npm run build && npx playwright test -c playwright.config-local.ts --trace on"
   },
   "dependencies": {
-    "@capacitor/android": "^6.1.2",
+    "@capacitor/android": "^6.2.0",
-    "@capacitor/cli": "^6.1.2",
+    "@capacitor/cli": "^6.2.0",
-    "@capacitor/core": "^6.1.2",
+    "@capacitor/core": "^6.2.0",
-    "@capacitor/ios": "^6.1.2",
+    "@capacitor/ios": "^6.2.0",
     "@dicebear/collection": "^5.4.1",
     "@dicebear/core": "^5.4.1",
     "@ethersproject/hdnode": "^5.7.0",
@@ -38,7 +38,7 @@
     "@veramo/did-resolver": "^5.6.0",
     "@veramo/key-manager": "^5.6.0",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^12.3.0",
     "@zxing/text-encoding": "^0.9.0",
     "asn1-ber": "^1.2.2",
     "axios": "^1.6.8",
@@ -73,12 +73,12 @@
     "three": "^0.156.1",
     "ua-parser-js": "^1.0.37",
     "util": "^0.12.5",
-    "vue": "^3.4.21",
+    "vue": "^3.5.13",
     "vue-axios": "^3.5.2",
     "vue-facing-decorator": "^3.0.4",
     "vue-picture-cropper": "^0.7.0",
     "vue-qrcode-reader": "^5.5.3",
-    "vue-router": "^4.3.0",
+    "vue-router": "^4.5.0",
     "web-did-resolver": "^2.0.27"
   },
   "devDependencies": {
@@ -92,18 +92,19 @@
     "@types/ua-parser-js": "^0.7.39",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
+    "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.23.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "npm-check-updates": "^17.1.13",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.2.2",
-    "vite": "^5.2.0",
+    "vite": "^6.0.7",
-    "vite-plugin-pwa": "^0.19.8"
+    "vite-plugin-pwa": "^0.21.1"
   }
 }

playwright.config-local.ts

@@ -46,30 +46,30 @@ export default defineConfig({
       use: { ...devices["Desktop Firefox"] },
     },
 
-    {
+    // {
-      name: "webkit",
+    //   name: "webkit",
-      use: { ...devices["Desktop Safari"] },
+    //   use: { ...devices["Desktop Safari"] },
-    },
+    // },
 
-    /* Test against mobile viewports. */
+    // /* Test against mobile viewports. */
-    {
+    // {
-      name: "Mobile Chrome",
+    //   name: "Mobile Chrome",
-      use: { ...devices["Pixel 5"] },
+    //   use: { ...devices["Pixel 5"] },
-    },
+    // },
-    {
+    // {
-      name: "Mobile Safari",
+    //   name: "Mobile Safari",
-      use: { ...devices["iPhone 12"] },
+    //   use: { ...devices["iPhone 12"] },
-    },
+    // },
 
     /* Test against branded browsers. */
     // {
     //   name: 'Microsoft Edge',
     //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
     // },
-    {
+    // {
-      name: "Google Chrome",
+    //   name: "Google Chrome",
-      use: { ...devices["Desktop Chrome"], channel: "chrome" },
+    //   use: { ...devices["Desktop Chrome"], channel: "chrome" },
-    },
+    // },
   ],
 
   /* Configure global timeout; default is 30000 milliseconds */

playwright.config.ts

@@ -40,26 +40,25 @@ export default defineConfig({
         permissions: ["clipboard-read"],
       },
     },
-
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
+//    {
-      name: 'webkit',
+//      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+//      use: { ...devices['Desktop Safari'] },
-    },
+//    },
 
     /* Test against mobile viewports. */
-    {
+//    {
-      name: 'Mobile Chrome',
+//      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
+//      use: { ...devices['Pixel 5'] },
-    },
+//    },
-    {
+//    {
-      name: 'Mobile Safari',
+//      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
+//      use: { ...devices['iPhone 12'] },
-    },
+//    },
 
     /* Test against branded browsers. */
     // {

src/App.vue

@@ -320,7 +320,7 @@
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
 
-import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "./db/index";
 import { NotificationIface } from "./constants/app";
 
 @Component

src/components/FeedFilters.vue

@@ -99,8 +99,8 @@ import {
   LTileLayer,
 } from "@vue-leaflet/vue-leaflet";
 
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
 
 @Component({
   components: {

src/components/GiftedDialog.vue

@@ -89,12 +89,12 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
+import { createAndSubmitGive, didInfo } from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { retrieveAccountDids } from "@/libs/util";
+import { retrieveAccountDids } from "../libs/util";
 
 @Component
 export default class GiftedDialog extends Vue {

src/components/GiftedPrompts.vue

@@ -73,10 +73,10 @@
 import { Vue, Component } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { AppString, NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface } from "../constants/app";
-import { db } from "@/db/index";
+import { db } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { GiverReceiverInputInfo } from "@/libs/util";
+import { GiverReceiverInputInfo } from "../libs/util";
 
 @Component
 export default class GivenPrompts extends Vue {

src/components/ImageMethodDialog.vue

@@ -56,8 +56,8 @@ import axios from "axios";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 
-import PhotoDialog from "@/components/PhotoDialog.vue";
+import PhotoDialog from "../components/PhotoDialog.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 
 const inputImageFileNameRef = ref<Blob>();
 

src/components/OfferDialog.vue

@@ -82,10 +82,10 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { createAndSubmitOffer } from "@/libs/endorserServer";
+import { createAndSubmitOffer } from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "../db/index";
 
 @Component
 export default class OfferDialog extends Vue {

src/components/OnboardingDialog.vue

@@ -201,13 +201,13 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   db,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
-} from "@/db/index";
+} from "../db/index";
-import { OnboardPage } from "@/libs/util";
+import { OnboardPage } from "../libs/util";
 
 @Component({
   computed: {

src/components/PhotoDialog.vue

@@ -126,9 +126,9 @@ import Camera from "simple-vue-camera";
 import { Component, Vue } from "vue-facing-decorator";
 import VuePictureCropper, { cropper } from "vue-picture-cropper";
 
-import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
+import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "../db/index";
-import { accessToken } from "@/libs/crypto";
+import { accessToken } from "../libs/crypto";
 
 @Component({ components: { Camera, VuePictureCropper } })
 export default class PhotoDialog extends Vue {

src/components/PushNotificationPermission.vue

@@ -100,15 +100,15 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
+import { DEFAULT_PUSH_SERVER, NotificationIface } from "../constants/app";
 import {
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
   secretDB,
-} from "@/db/index";
+} from "../db/index";
-import { MASTER_SECRET_KEY } from "@/db/tables/secret";
+import { MASTER_SECRET_KEY } from "../db/tables/secret";
-import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
+import { urlBase64ToUint8Array } from "../libs/crypto/vc/util";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
 
 // Example interface for error
 interface ErrorResponse {

src/components/TopMessage.vue

@@ -15,8 +15,8 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
 
-import { AppString, NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface } from "../constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "../db/index";
 
 @Component
 export default class TopMessage extends Vue {

src/components/UserNameDialog.vue

@@ -38,9 +38,9 @@
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
 
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 
 @Component
 export default class UserNameDialog extends Vue {

src/components/World/components/objects/landmarks.js

@@ -3,8 +3,8 @@ import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
 import * as SkeletonUtils from "three/addons/utils/SkeletonUtils";
 import * as TWEEN from "@tweenjs/tween.js";
-import { retrieveSettingsForActiveAccount } from "@/db";
+import { retrieveSettingsForActiveAccount } from "../../../../db";
-import { getHeaders } from "@/libs/endorserServer";
+import { getHeaders } from "../../../../libs/endorserServer";
 
 const ANIMATION_DURATION_SECS = 10;
 const ENDORSER_ENTITY_PREFIX = "https://endorser.ch/entity/";

src/db/index.ts

@@ -12,7 +12,7 @@ import {
   SettingsSchema,
 } from "./tables/settings";
 import { Temp, TempSchema } from "./tables/temp";
-import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
+import { DEFAULT_ENDORSER_API_SERVER } from "../constants/app";
 
 // Define types for tables that hold sensitive and non-sensitive data
 type SecretTable = { secret: Table<Secret> };

src/libs/crypto/index.ts

@@ -7,9 +7,9 @@ import { HDNode } from "@ethersproject/hdnode";
 import {
   createEndorserJwtForDid,
   ENDORSER_JWT_URL_LOCATION,
-} from "@/libs/endorserServer";
+} from "../../libs/endorserServer";
 import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
-import { decodeEndorserJwt } from "@/libs/crypto/vc";
+import { decodeEndorserJwt } from "../../libs/crypto/vc";
 
 export const DEFAULT_ROOT_DERIVATION_PATH = "m/84737769'/0'/0'/0'";
 

src/libs/crypto/vc/didPeer.ts

@@ -2,7 +2,7 @@ import { Buffer } from "buffer/";
 import { decode as cborDecode } from "cbor-x";
 import { bytesToMultibase, multibaseToBytes } from "did-jwt";
 
-import { getWebCrypto } from "@/libs/crypto/vc/passkeyHelpers";
+import { getWebCrypto } from "../../../libs/crypto/vc/passkeyHelpers";
 
 export const PEER_DID_PREFIX = "did:peer:";
 const PEER_DID_MULTIBASE_PREFIX = PEER_DID_PREFIX + "0";

src/libs/crypto/vc/passkeyDidPeer.ts

@@ -19,14 +19,14 @@ import {
   PublicKeyCredentialRequestOptionsJSON,
 } from "@simplewebauthn/types";
 
-import { AppString } from "@/constants/app";
+import { AppString } from "../../../constants/app";
-import { unwrapEC2Signature } from "@/libs/crypto/vc/passkeyHelpers";
+import { unwrapEC2Signature } from "../../../libs/crypto/vc/passkeyHelpers";
 import {
   arrayToBase64Url,
   cborToKeys,
   peerDidToPublicKeyBytes,
   verifyPeerSignature,
-} from "@/libs/crypto/vc/didPeer";
+} from "../../../libs/crypto/vc/didPeer";
 
 export interface JWK {
   kty: string;

src/libs/endorserServer.ts

@@ -4,18 +4,18 @@ import { sha256 } from "ethereum-cryptography/sha256";
 import { LRUCache } from "lru-cache";
 import * as R from "ramda";
 
-import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
+import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { accessToken, deriveAddress, nextDerivationPath } from "@/libs/crypto";
+import { accessToken, deriveAddress, nextDerivationPath } from "../libs/crypto";
-import { logConsoleAndDb, NonsensitiveDexie } from "@/db/index";
+import { logConsoleAndDb, NonsensitiveDexie } from "../db/index";
 import {
   retrieveAccountMetadata,
   retrieveFullyDecryptedAccount,
   getPasskeyExpirationSeconds,
   GiverReceiverInputInfo,
-} from "@/libs/util";
+} from "../libs/util";
-import { createEndorserJwtForKey, KeyMeta } from "@/libs/crypto/vc";
+import { createEndorserJwtForKey, KeyMeta } from "../libs/crypto/vc";
-import { Account } from "@/db/tables/accounts";
+import { Account } from "../db/tables/accounts";
 
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 // the object in RegisterAction claims

src/libs/util.ts

@@ -5,28 +5,28 @@ import { Buffer } from "buffer";
 import * as R from "ramda";
 import { useClipboard } from "@vueuse/core";
 
-import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
+import { DEFAULT_PUSH_SERVER, NotificationIface } from "../constants/app";
 import {
   accountsDBPromise,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
   updateDefaultSettings,
-} from "@/db/index";
+} from "../db/index";
-import { Account } from "@/db/tables/accounts";
+import { Account } from "../db/tables/accounts";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { DEFAULT_PASSKEY_EXPIRATION_MINUTES } from "@/db/tables/settings";
+import { DEFAULT_PASSKEY_EXPIRATION_MINUTES } from "../db/tables/settings";
-import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
+import { deriveAddress, generateSeed, newIdentifier } from "../libs/crypto";
-import * as serverUtil from "@/libs/endorserServer";
+import * as serverUtil from "../libs/endorserServer";
 import {
   containsHiddenDid,
   GenericCredWrapper,
   GenericVerifiableCredential,
   GiveSummaryRecord,
   OfferVerifiableCredential,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { KeyMeta } from "@/libs/crypto/vc";
+import { KeyMeta } from "../libs/crypto/vc";
-import { createPeerDid } from "@/libs/crypto/vc/didPeer";
+import { createPeerDid } from "../libs/crypto/vc/didPeer";
-import { registerCredential } from "@/libs/crypto/vc/passkeyDidPeer";
+import { registerCredential } from "../libs/crypto/vc/passkeyDidPeer";
 
 export interface GiverReceiverInputInfo {
   did?: string;

src/router/index.ts

@@ -5,7 +5,7 @@ import {
   RouteLocationNormalized,
   RouteRecordRaw,
 } from "vue-router";
-import { accountsDBPromise } from "@/db/index";
+import { accountsDBPromise } from "../db/index";
 
 /**
  *
@@ -57,7 +57,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/confirm-gift/:id?",
     name: "confirm-gift",
-    component: () => import("@/views/ConfirmGiftView.vue"),
+    component: () => import("../views/ConfirmGiftView.vue"),
   },
   {
     path: "/contact-amounts",
@@ -97,7 +97,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/gifted-details",
     name: "gifted-details",
-    component: () => import("@/views/GiftedDetailsView.vue"),
+    component: () => import("../views/GiftedDetailsView.vue"),
   },
   {
     path: "/help",
@@ -147,7 +147,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/invite-one-accept/:jwt?",
     name: "InviteOneAcceptView",
-    component: () => import("@/views/InviteOneAcceptView.vue"),
+    component: () => import("../views/InviteOneAcceptView.vue"),
   },
   {
     path: "/new-activity",
@@ -228,12 +228,12 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/share-my-contact-info",
     name: "share-my-contact-info",
-    component: () => import("@/views/ShareMyContactInfoView.vue"),
+    component: () => import("../views/ShareMyContactInfoView.vue"),
   },
   {
     path: "/shared-photo",
     name: "shared-photo",
-    component: () => import("@/views/SharedPhotoView.vue"),
+    component: () => import("../views/SharedPhotoView.vue"),
   },
 
   // /share-target is also an endpoint in the service worker

src/views/AccountViewView.vue

@@ -803,12 +803,12 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
+import ImageMethodDialog from "../components/ImageMethodDialog.vue";
-import PushNotificationPermission from "@/components/PushNotificationPermission.vue";
+import PushNotificationPermission from "../components/PushNotificationPermission.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import UserNameDialog from "@/components/UserNameDialog.vue";
+import UserNameDialog from "../components/UserNameDialog.vue";
 import {
   AppString,
   DEFAULT_IMAGE_API_SERVER,
@@ -816,18 +816,18 @@ import {
   DEFAULT_PUSH_SERVER,
   IMAGE_TYPE_PROFILE,
   NotificationIface,
-} from "@/constants/app";
+} from "../constants/app";
 import {
   db,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
-} from "@/db/index";
+} from "../db/index";
-import { Account } from "@/db/tables/accounts";
+import { Account } from "../db/tables/accounts";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   DEFAULT_PASSKEY_EXPIRATION_MINUTES,
   MASTER_SETTINGS_KEY,
-} from "@/db/tables/settings";
+} from "../db/tables/settings";
 import {
   clearPasskeyToken,
   ErrorResponse,
@@ -837,12 +837,12 @@ import {
   getHeaders,
   ImageRateLimits,
   tokenExpiryTimeDescription,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
 import {
   DAILY_CHECK_TITLE,
   DIRECT_PUSH_TITLE,
   retrieveAccountMetadata,
-} from "@/libs/util";
+} from "../libs/util";
 
 const inputImportFileNameRef = ref<Blob>();
 

src/views/ClaimAddRawView.vue

@@ -32,12 +32,12 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "../db/index";
-import * as serverUtil from "@/libs/endorserServer";
+import * as serverUtil from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { errorStringForLog } from "@/libs/endorserServer";
+import { errorStringForLog } from "../libs/endorserServer";
 
 @Component({
   components: { QuickNav },

src/views/ClaimCertificateView.vue

@@ -15,9 +15,9 @@ import { Component, Vue } from "vue-facing-decorator";
 import { nextTick } from "vue";
 import QRCode from "qrcode";
 
-import { APP_SERVER, NotificationIface } from "@/constants/app";
+import { APP_SERVER, NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import * as serverUtil from "@/libs/endorserServer";
+import * as serverUtil from "../libs/endorserServer";
 
 @Component
 export default class ClaimCertificateView extends Vue {

src/views/ClaimView.vue

@@ -503,21 +503,21 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   db,
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
-} from "@/db/index";
+} from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import * as serverUtil from "@/libs/endorserServer";
+import * as serverUtil from "../libs/endorserServer";
 import {
   GenericCredWrapper,
   OfferVerifiableCredential,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
 
 interface ProviderInfo {
   identifier: string; // could be a DID or a handleId

src/views/ConfirmGiftView.vue

@@ -410,15 +410,15 @@ import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import * as serverUtil from "@/libs/endorserServer";
+import * as serverUtil from "../libs/endorserServer";
-import { displayAmount, GiveSummaryRecord } from "@/libs/endorserServer";
+import { displayAmount, GiveSummaryRecord } from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { isGiveAction, retrieveAccountDids } from "@/libs/util";
+import { isGiveAction, retrieveAccountDids } from "../libs/util";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
 
 @Component({
   methods: { displayAmount },

src/views/ContactAmountsView.vue

@@ -110,10 +110,10 @@ import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   AgreeVerifiableCredential,
   createEndorserJwtVcFromClaim,
@@ -122,8 +122,8 @@ import {
   GiveSummaryRecord,
   GiveVerifiableCredential,
   SCHEMA_ORG_CONTEXT,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { retrieveAccountCount } from "@/libs/util";
+import { retrieveAccountCount } from "../libs/util";
 
 @Component({ components: { QuickNav } })
 export default class ContactAmountssView extends Vue {

src/views/ContactGiftingView.vue

@@ -73,13 +73,13 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { GiverReceiverInputInfo } from "@/libs/util";
+import { GiverReceiverInputInfo } from "../libs/util";
 
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },

src/views/ContactImportView.vue

@@ -97,15 +97,15 @@ import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import OfferDialog from "@/components/OfferDialog.vue";
+import OfferDialog from "../components/OfferDialog.vue";
-import { AppString, NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { decodeAndVerifyJwt } from "@/libs/crypto/vc/index";
+import { decodeAndVerifyJwt } from "../libs/crypto/vc/index";
-import { setVisibilityUtil } from "@/libs/endorserServer";
+import { setVisibilityUtil } from "../libs/endorserServer";
 
 @Component({
   components: { EntityIcon, OfferDialog, QuickNav },

src/views/ContactQRScanShowView.vue

@@ -95,21 +95,21 @@ import { Component, Vue } from "vue-facing-decorator";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { useClipboard } from "@vueuse/core";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import UserNameDialog from "@/components/UserNameDialog.vue";
+import UserNameDialog from "../components/UserNameDialog.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
-import { getContactPayloadFromJwtUrl } from "@/libs/crypto";
+import { getContactPayloadFromJwtUrl } from "../libs/crypto";
 import {
   generateEndorserJwtForAccount,
   isDid,
   register,
   setVisibilityUtil,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { ETHR_DID_PREFIX } from "@/libs/crypto/vc";
+import { ETHR_DID_PREFIX } from "../libs/crypto/vc";
-import { retrieveAccountMetadata } from "@/libs/util";
+import { retrieveAccountMetadata } from "../libs/util";
 
 @Component({
   components: {

src/views/ContactsView.vue

@@ -317,23 +317,23 @@ import { Component, Vue } from "vue-facing-decorator";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import OfferDialog from "@/components/OfferDialog.vue";
+import OfferDialog from "../components/OfferDialog.vue";
-import ContactNameDialog from "@/components/ContactNameDialog.vue";
+import ContactNameDialog from "../components/ContactNameDialog.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { APP_SERVER, AppString, NotificationIface } from "@/constants/app";
+import { APP_SERVER, AppString, NotificationIface } from "../constants/app";
 import {
   db,
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
   updateDefaultSettings,
-} from "@/db/index";
+} from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { getContactPayloadFromJwtUrl } from "@/libs/crypto";
+import { getContactPayloadFromJwtUrl } from "../libs/crypto";
-import { decodeEndorserJwt } from "@/libs/crypto/vc";
+import { decodeEndorserJwt } from "../libs/crypto/vc";
 import {
   CONTACT_CSV_HEADER,
   CONTACT_URL_PREFIX,
@@ -346,9 +346,9 @@ import {
   setVisibilityUtil,
   UserInfo,
   VerifiableCredential,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { generateSaveAndActivateIdentity } from "@/libs/util";
+import { generateSaveAndActivateIdentity } from "../libs/util";
 
 @Component({
   components: {

src/views/DIDView.vue

@@ -250,13 +250,13 @@ import * as yaml from "js-yaml";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import InfiniteScroll from "../components/InfiniteScroll.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { BoundingBox } from "@/db/tables/settings";
+import { BoundingBox } from "../db/tables/settings";
 import {
   capitalizeAndInsertSpacesBeforeCaps,
   didInfoForContact,
@@ -268,9 +268,9 @@ import {
   OfferVerifiableCredential,
   register,
   setVisibilityUtil,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
 
 @Component({
   components: {

src/views/DiscoverView.vue

@@ -199,26 +199,26 @@ import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import InfiniteScroll from "../components/InfiniteScroll.vue";
-import ProjectIcon from "@/components/ProjectIcon.vue";
+import ProjectIcon from "../components/ProjectIcon.vue";
-import OnboardingDialog from "@/components/OnboardingDialog.vue";
+import OnboardingDialog from "../components/OnboardingDialog.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   db,
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
-} from "@/db/index";
+} from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { BoundingBox } from "@/db/tables/settings";
+import { BoundingBox } from "../db/tables/settings";
 import {
   didInfo,
   errorStringForLog,
   getHeaders,
   PlanData,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { OnboardPage, retrieveAccountDids } from "@/libs/util";
+import { OnboardPage, retrieveAccountDids } from "../libs/util";
 
 @Component({
   components: {

src/views/GiftedDetailsView.vue

@@ -263,11 +263,11 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
+import ImageMethodDialog from "../components/ImageMethodDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
+import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import {
   createAndSubmitGive,
   didInfo,
@@ -277,9 +277,9 @@ import {
   getPlanFromCache,
   GiveVerifiableCredential,
   hydrateGive,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { retrieveAccountDids } from "@/libs/util";
+import { retrieveAccountDids } from "../libs/util";
 
 @Component({
   components: {

src/views/HelpNotificationTypesView.vue

@@ -61,7 +61,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
 
 @Component({ components: { QuickNav } })
 export default class HelpNotificationTypesView extends Vue {}

src/views/HelpNotificationsView.vue

@@ -307,12 +307,12 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { DIRECT_PUSH_TITLE, sendTestThroughPushServer } from "@/libs/util";
+import { DIRECT_PUSH_TITLE, sendTestThroughPushServer } from "../libs/util";
-import PushNotificationPermission from "@/components/PushNotificationPermission.vue";
+import PushNotificationPermission from "../components/PushNotificationPermission.vue";
-import { db } from "@/db/index";
+import { db } from "../db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 
 @Component({ components: { PushNotificationPermission, QuickNav } })
 export default class HelpNotificationsView extends Vue {

src/views/HelpOnboardingView.vue

@@ -108,7 +108,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {}

src/views/HelpView.vue

@@ -578,12 +578,12 @@ import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import * as Package from "../../package.json";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
-} from "@/db/index";
+} from "../db/index";
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {

src/views/HomeView.vue

@@ -374,32 +374,32 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
 import App from "../App.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import GiftedPrompts from "@/components/GiftedPrompts.vue";
+import GiftedPrompts from "../components/GiftedPrompts.vue";
-import FeedFilters from "@/components/FeedFilters.vue";
+import FeedFilters from "../components/FeedFilters.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import InfiniteScroll from "../components/InfiniteScroll.vue";
-import OnboardingDialog from "@/components/OnboardingDialog.vue";
+import OnboardingDialog from "../components/OnboardingDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import UserNameDialog from "@/components/UserNameDialog.vue";
+import UserNameDialog from "../components/UserNameDialog.vue";
 import {
   AppString,
   NotificationIface,
   PASSKEYS_ENABLED,
-} from "@/constants/app";
+} from "../constants/app";
 import {
   db,
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
-} from "@/db/index";
+} from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   BoundingBox,
   checkIsAnyFeedFilterOn,
   MASTER_SETTINGS_KEY,
-} from "@/db/tables/settings";
+} from "../db/tables/settings";
 import {
   contactForDid,
   containsNonHiddenDid,
@@ -410,14 +410,14 @@ import {
   getNewOffersToUserProjects,
   getPlanFromCache,
   GiveSummaryRecord,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
 import {
   generateSaveAndActivateIdentity,
   retrieveAccountDids,
   GiverReceiverInputInfo,
   OnboardPage,
   registerSaveAndActivatePasskey,
-} from "@/libs/util";
+} from "../libs/util";
 
 interface GiveRecordWithContactInfo extends GiveSummaryRecord {
   giver: {

src/views/IdentitySwitcherView.vue

@@ -101,15 +101,15 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   accountsDBPromise,
   db,
   retrieveSettingsForActiveAccount,
-} from "@/db/index";
+} from "../db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
-import { retrieveAllAccountsMetadata } from "@/libs/util";
+import { retrieveAllAccountsMetadata } from "../libs/util";
 
 @Component({ components: { QuickNav } })
 export default class IdentitySwitcherView extends Vue {

src/views/ImportAccountView.vue

@@ -86,19 +86,19 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { AppString, NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface } from "../constants/app";
 import {
   accountsDBPromise,
   db,
   retrieveSettingsForActiveAccount,
-} from "@/db/index";
+} from "../db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 import {
   DEFAULT_ROOT_DERIVATION_PATH,
   deriveAddress,
   newIdentifier,
-} from "@/libs/crypto";
+} from "../libs/crypto";
-import { retrieveAccountCount } from "@/libs/util";
+import { retrieveAccountCount } from "../libs/util";
 
 @Component({
   components: {},

src/views/ImportDerivedAccountView.vue

@@ -77,10 +77,10 @@ import {
   deriveAddress,
   newIdentifier,
   nextDerivationPath,
-} from "@/libs/crypto";
+} from "../libs/crypto";
-import { accountsDBPromise, db } from "@/db/index";
+import { accountsDBPromise, db } from "../db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
-import { retrieveAllFullyDecryptedAccounts } from "@/libs/util";
+import { retrieveAllFullyDecryptedAccounts } from "../libs/util";
 
 @Component({
   components: {},

src/views/InviteOneAcceptView.vue

@@ -42,16 +42,16 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   db,
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
-} from "@/db/index";
+} from "../db/index";
-import { decodeEndorserJwt } from "@/libs/crypto/vc";
+import { decodeEndorserJwt } from "../libs/crypto/vc";
-import { errorStringForLog } from "@/libs/endorserServer";
+import { errorStringForLog } from "../libs/endorserServer";
-import { generateSaveAndActivateIdentity } from "@/libs/util";
+import { generateSaveAndActivateIdentity } from "../libs/util";
 
 @Component({ components: { QuickNav } })
 export default class InviteOneAcceptView extends Vue {

src/views/InviteOneView.vue

@@ -133,14 +133,14 @@ import axios from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
-import ContactNameDialog from "@/components/ContactNameDialog.vue";
+import ContactNameDialog from "../components/ContactNameDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import InviteDialog from "@/components/InviteDialog.vue";
+import InviteDialog from "../components/InviteDialog.vue";
-import { APP_SERVER, AppString, NotificationIface } from "@/constants/app";
+import { APP_SERVER, AppString, NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { createInviteJwt, getHeaders } from "@/libs/endorserServer";
+import { createInviteJwt, getHeaders } from "../libs/endorserServer";
 
 interface Invite {
   inviteIdentifier: string;

src/views/NewActivityView.vue

@@ -144,16 +144,16 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   db,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
-} from "@/db/index";
+} from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   didInfo,
   displayAmount,
@@ -161,8 +161,8 @@ import {
   getNewOffersToUserProjects,
   OfferSummaryRecord,
   OfferToPlanSummaryRecord,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { retrieveAccountDids } from "@/libs/util";
+import { retrieveAccountDids } from "../libs/util";
 
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },

src/views/NewEditAccountView.vue

@@ -47,8 +47,8 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 
 @Component({
   components: {},

src/views/NewEditProjectView.vue

@@ -202,24 +202,24 @@ import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
-import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
+import ImageMethodDialog from "../components/ImageMethodDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
 import {
   DEFAULT_IMAGE_API_SERVER,
   DEFAULT_PARTNER_API_SERVER,
   NotificationIface,
-} from "@/constants/app";
+} from "../constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "../db/index";
 import {
   createEndorserJwtVcFromClaim,
   getHeaders,
   PlanVerifiableCredential,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
 import {
   retrieveAccountCount,
   retrieveAccountMetadata,
   retrieveFullyDecryptedAccount,
-} from "@/libs/util";
+} from "../libs/util";
 
 @Component({
   components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },

src/views/NewIdentifierView.vue

@@ -56,8 +56,8 @@ import "dexie-export-import";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { generateSaveAndActivateIdentity } from "@/libs/util";
+import { generateSaveAndActivateIdentity } from "../libs/util";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
 
 @Component({ components: { QuickNav } })
 export default class NewIdentifierView extends Vue {

src/views/OfferDetailsView.vue

@@ -178,10 +178,10 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import {
   createAndSubmitOffer,
   didInfo,
@@ -190,9 +190,9 @@ import {
   getPlanFromCache,
   hydrateOffer,
   OfferVerifiableCredential,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { retrieveAccountDids } from "@/libs/util";
+import { retrieveAccountDids } from "../libs/util";
 
 @Component({
   components: {

src/views/ProjectViewView.vue

@@ -15,18 +15,18 @@
           <fa icon="chevron-left" class="fa-fw"></fa>
         </button>
         Project Idea
-        <h2 class="text-xl font-semibold">
-          {{ name }}
-          <button
-            v-if="activeDid === issuer || activeDid === agentDid"
-            @click="onEditClick()"
-            title="Edit"
-            data-testId="editClaimButton"
-          >
-            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-          </button>
-        </h2>
       </h1>
+      <h2 class="text-xl font-semibold">
+        {{ name }}
+        <button
+          v-if="activeDid === issuer || activeDid === agentDid"
+          @click="onEditClick()"
+          title="Edit"
+          data-testId="editClaimButton"
+        >
+          <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+        </button>
+      </h2>
     </div>
 
     <!-- Project Details -->
@@ -482,20 +482,20 @@ import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import OfferDialog from "@/components/OfferDialog.vue";
+import OfferDialog from "../components/OfferDialog.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import ProjectIcon from "@/components/ProjectIcon.vue";
+import ProjectIcon from "../components/ProjectIcon.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   db,
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
-} from "@/db/index";
+} from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
 import {
   GenericCredWrapper,
   GiveSummaryRecord,
@@ -503,9 +503,9 @@ import {
   OfferSummaryRecord,
   OfferVerifiableCredential,
   PlanSummaryRecord,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as serverUtil from "@/libs/endorserServer";
+import * as serverUtil from "../libs/endorserServer";
-import { retrieveAccountDids } from "@/libs/util";
+import { retrieveAccountDids } from "../libs/util";
 
 @Component({
   components: {

src/views/ProjectsView.vue

@@ -262,25 +262,25 @@ import { AxiosRequestConfig } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import InfiniteScroll from "../components/InfiniteScroll.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import OnboardingDialog from "@/components/OnboardingDialog.vue";
+import OnboardingDialog from "../components/OnboardingDialog.vue";
-import ProjectIcon from "@/components/ProjectIcon.vue";
+import ProjectIcon from "../components/ProjectIcon.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import UserNameDialog from "@/components/UserNameDialog.vue";
+import UserNameDialog from "../components/UserNameDialog.vue";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   didInfo,
   getHeaders,
   getPlanFromCache,
   OfferSummaryRecord,
   PlanData,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
-import { OnboardPage } from "@/libs/util";
+import { OnboardPage } from "../libs/util";
 
 @Component({
   components: {

src/views/QuickActionBvcBeginView.vue

@@ -70,17 +70,17 @@ import { DateTime } from "luxon";
 import { Router } from "vue-router";
 import { Component, Vue } from "vue-facing-decorator";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "../db/index";
 import {
   BVC_MEETUPS_PROJECT_CLAIM_ID,
   bvcMeetingJoinClaim,
   createAndSubmitClaim,
   createAndSubmitGive,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import * as libsUtil from "@/libs/util";
+import * as libsUtil from "../libs/util";
 
 @Component({
   components: {

src/views/QuickActionBvcEndView.vue

@@ -142,15 +142,15 @@ import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 import {
   accountsDBPromise,
   db,
   retrieveSettingsForActiveAccount,
-} from "@/db/index";
+} from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   BVC_MEETUPS_PROJECT_CLAIM_ID,
   claimSpecialDescription,
@@ -161,7 +161,7 @@ import {
   GenericVerifiableCredential,
   getHeaders,
   ErrorResult,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
 
 @Component({
   methods: { claimSpecialDescription },

src/views/QuickActionBvcView.vue

@@ -39,8 +39,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
 
 @Component({
   components: {

src/views/RecentOffersToUserProjectsView.vue

@@ -76,20 +76,20 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import InfiniteScroll from "../components/InfiniteScroll.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   didInfo,
   displayAmount,
   getNewOffersToUserProjects,
   OfferToPlanSummaryRecord,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { retrieveAccountDids } from "@/libs/util";
+import { retrieveAccountDids } from "../libs/util";
 
 @Component({
   components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },

src/views/RecentOffersToUserView.vue

@@ -69,20 +69,20 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedDialog from "../components/GiftedDialog.vue";
-import EntityIcon from "@/components/EntityIcon.vue";
+import EntityIcon from "../components/EntityIcon.vue";
-import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import InfiniteScroll from "../components/InfiniteScroll.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
 import {
   didInfo,
   displayAmount,
   getNewOffersToUser,
   OfferSummaryRecord,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { retrieveAccountDids } from "@/libs/util";
+import { retrieveAccountDids } from "../libs/util";
 
 @Component({
   components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },

src/views/SearchAreaView.vue

@@ -111,10 +111,10 @@ import {
 } from "@vue-leaflet/vue-leaflet";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { BoundingBox, MASTER_SETTINGS_KEY } from "../db/tables/settings";
 
 const DEFAULT_LAT_LONG_DIFF = 0.01;
 const WORLD_ZOOM = 2;

src/views/SeedBackupView.vue

@@ -102,14 +102,14 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "../db/index";
-import { Account } from "@/db/tables/accounts";
+import { Account } from "../db/tables/accounts";
 import {
   retrieveAccountCount,
   retrieveFullyDecryptedAccount,
-} from "@/libs/util";
+} from "../libs/util";
 
 @Component({ components: { QuickNav } })
 export default class SeedBackupView extends Vue {

src/views/ShareMyContactInfoView.vue

@@ -45,12 +45,12 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import TopMessage from "@/components/TopMessage.vue";
+import TopMessage from "../components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { generateEndorserJwtForAccount } from "@/libs/endorserServer";
+import { generateEndorserJwtForAccount } from "../libs/endorserServer";
-import { retrieveAccountMetadata } from "@/libs/util";
+import { retrieveAccountMetadata } from "../libs/util";
 
 @Component({
   components: { QuickNav, TopMessage },

src/views/SharedPhotoView.vue

@@ -68,17 +68,17 @@ import axios from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 import { RouteLocationRaw, Router } from "vue-router";
 
-import PhotoDialog from "@/components/PhotoDialog.vue";
+import PhotoDialog from "../components/PhotoDialog.vue";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
 import {
   DEFAULT_IMAGE_API_SERVER,
   IMAGE_TYPE_PROFILE,
   NotificationIface,
-} from "@/constants/app";
+} from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
-import { accessToken } from "@/libs/crypto";
+import { accessToken } from "../libs/crypto";
-import { base64ToBlob, SHARED_PHOTO_BASE64_KEY } from "@/libs/util";
+import { base64ToBlob, SHARED_PHOTO_BASE64_KEY } from "../libs/util";
 
 @Component({ components: { PhotoDialog, QuickNav } })
 export default class SharedPhotoView extends Vue {

src/views/StartView.vue

@@ -91,12 +91,12 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { AppString, PASSKEYS_ENABLED } from "@/constants/app";
+import { AppString, PASSKEYS_ENABLED } from "../constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "../db/index";
 import {
   registerSaveAndActivatePasskey,
   retrieveAccountCount,
-} from "@/libs/util";
+} from "../libs/util";
 
 @Component({
   components: {},

src/views/StatisticsView.vue

@@ -57,9 +57,9 @@
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
 
-import { World } from "@/components/World/World.js";
+import { World } from "../components/World/World.js";
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "@/constants/app";
+import { NotificationIface } from "../constants/app";
 
 interface RendererSVGType {
   domElement: Element;

src/views/TestView.vue

@@ -23,23 +23,6 @@
 
     <div>
       <h2 class="text-xl font-bold mb-4">Notiwind Alerts</h2>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'alert',
-              type: 'toast',
-              text: 'I\'m a toast. Without a timeout, I\'m stuck.',
-            },
-            5000,
-          )
-        "
-        class="font-bold uppercase bg-slate-900 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Toast
-      </button>
-
       <button
         @click="
           this.$notify(
@@ -107,51 +90,6 @@
       >
         Danger
       </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-permission',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Notif ON
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-mute',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Notif MUTE
-      </button>
-
-      <button
-        @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-off',
-            },
-            -1,
-          )
-        "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
-      >
-        Notif OFF
-      </button>
     </div>
 
     <div class="mt-8">
@@ -245,23 +183,23 @@ import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import QuickNav from "@/components/QuickNav.vue";
+import QuickNav from "../components/QuickNav.vue";
-import { AppString, NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface } from "../constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import * as vcLib from "@/libs/crypto/vc";
+import * as vcLib from "../libs/crypto/vc";
 import {
   PeerSetup,
   verifyJwtP256,
   verifyJwtSimplewebauthn,
   verifyJwtWebCrypto,
-} from "@/libs/crypto/vc/passkeyDidPeer";
+} from "../libs/crypto/vc/passkeyDidPeer";
 import {
   AccountKeyInfo,
   blobToBase64,
   retrieveAccountMetadata,
   registerAndSavePasskey,
   SHARED_PHOTO_BASE64_KEY,
-} from "@/libs/util";
+} from "../libs/util";
 
 const inputFileNameRef = ref<Blob>();
 

src/vite.config.utils.js

@@ -0,0 +1,69 @@
+import * as path from "path";
+import { promises as fs } from "fs";
+
+export async function loadAppConfig() {
+  const packageJson = await loadPackageJson();
+  const appName = process.env.TIME_SAFARI_APP_TITLE || packageJson.name;
+
+  return {
+    pwaConfig: {
+      registerType: "autoUpdate",
+      strategies: "injectManifest",
+      srcDir: ".",
+      filename: "sw_scripts-combined.js",
+      manifest: {
+        name: appName,
+        short_name: appName,
+        icons: [
+          {
+            src: "./img/icons/android-chrome-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "./img/icons/android-chrome-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "./img/icons/android-chrome-maskable-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "maskable",
+          },
+          {
+            src: "./img/icons/android-chrome-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+        share_target: {
+          action: "/share-target",
+          method: "POST",
+          enctype: "multipart/form-data",
+          params: {
+            files: [
+              {
+                name: "photo",
+                accept: ["image/*"],
+              },
+            ],
+          },
+        },
+      },
+    },
+    aliasConfig: {
+      "@": path.resolve(__dirname, "./src"),
+      buffer: path.resolve(__dirname, "node_modules", "buffer"),
+      "dexie-export-import/dist/import":
+        "dexie-export-import/dist/import/index.js",
+    },
+  };
+}
+
+async function loadPackageJson() {
+  const packageJsonPath = path.resolve(__dirname, "package.json");
+  const packageJsonData = await fs.readFile(packageJsonPath, "utf-8");
+  return JSON.parse(packageJsonData);
+}

vite.config.mjs

@@ -1,53 +1,26 @@
-import * as path from 'path';
+import { defineConfig } from "vite";
-import { defineConfig } from 'vite';
+import { VitePWA } from "vite-plugin-pwa";
-import { VitePWA } from 'vite-plugin-pwa';
+import vue from "@vitejs/plugin-vue";
-import vue from '@vitejs/plugin-vue';
+import dotenv from "dotenv";
+import { loadAppConfig } from "./vite.config.utils";
+
+// Load environment variables from .env file
+dotenv.config();
+
+// Load application configuration
+const appConfig = loadAppConfig();
 
-// https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 8080
+    port: process.env.VITE_PORT || 8080,
   },
   plugins: [
     vue(),
     VitePWA({
-      registerType: 'autoUpdate',
+      ...appConfig.pwaConfig,
-      strategies: 'injectManifest',
-      srcDir: '.',
-      filename: 'sw_scripts-combined.js',
-      manifest: {
-        // This is used for the app name. It doesn't include a space, because iOS complains if I recall correctly.
-        // There is a name with spaces in the constants/app.js file for use internally.
-        name: process.env.TIME_SAFARI_APP_TITLE || require('./package.json').name,
-        short_name: process.env.TIME_SAFARI_APP_TITLE || require('./package.json').name,
-        // 192x192 and 512x512 are important for Chrome to show that it's installable
-        "icons":[
-          {"src":"./img/icons/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},
-          {"src":"./img/icons/android-chrome-512x512.png","sizes":"512x512","type":"image/png"},
-          {"src":"./img/icons/android-chrome-maskable-192x192.png","sizes":"192x192","type":"image/png","purpose":"maskable"},
-          {"src":"./img/icons/android-chrome-maskable-512x512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}
-        ],
-        share_target: {
-          action: '/share-target',
-          method: 'POST',
-          enctype: 'multipart/form-data',
-          params: {
-            files: [
-              {
-                name: 'photo',
-                accept: ['image/*'],
-              },
-            ],
-          },
-        },
-      },
     }),
   ],
   resolve: {
-    alias: {
+    alias: appConfig.aliasConfig,
-      '@': path.resolve(__dirname, './src'),
-      buffer: path.resolve(__dirname, 'node_modules', 'buffer'),
-      'dexie-export-import/dist/import': 'dexie-export-import/dist/import/index.js',
-    },
   },
 });

vite.config.utils.js

@@ -0,0 +1,69 @@
+import * as path from "path";
+import { promises as fs } from "fs";
+
+export async function loadAppConfig() {
+  const packageJson = await loadPackageJson();
+  const appName = process.env.TIME_SAFARI_APP_TITLE || packageJson.name;
+
+  return {
+    pwaConfig: {
+      registerType: "autoUpdate",
+      strategies: "injectManifest",
+      srcDir: ".",
+      filename: "sw_scripts-combined.js",
+      manifest: {
+        name: appName,
+        short_name: appName,
+        icons: [
+          {
+            src: "./img/icons/android-chrome-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "./img/icons/android-chrome-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "./img/icons/android-chrome-maskable-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "maskable",
+          },
+          {
+            src: "./img/icons/android-chrome-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+        share_target: {
+          action: "/share-target",
+          method: "POST",
+          enctype: "multipart/form-data",
+          params: {
+            files: [
+              {
+                name: "photo",
+                accept: ["image/*"],
+              },
+            ],
+          },
+        },
+      },
+    },
+    aliasConfig: {
+      "@": path.resolve(__dirname, "./src"),
+      buffer: path.resolve(__dirname, "node_modules", "buffer"),
+      "dexie-export-import/dist/import":
+        "dexie-export-import/dist/import/index.js",
+    },
+  };
+}
+
+async function loadPackageJson() {
+  const packageJsonPath = path.resolve(__dirname, "package.json");
+  const packageJsonData = await fs.readFile(packageJsonPath, "utf-8");
+  return JSON.parse(packageJsonData);
+}