fix: resolve SVG loading error and improve TypeScript typing

- Fix EntityIcon.vue to import blank-square.svg as module instead of using relative path - Update template to use imported SVG path for proper Electron compatibility - Make contact prop optional in EntityIcon component to fix TypeScript error - Add proper Settings type imports and method signatures in PlatformServiceMixin.ts - Replace console statements with logger calls across multiple files - Resolves SVG loading failures in Electron builds while maintaining web compatibility - Reduces TypeScript 'any' type warnings from 81 to 53
3 weeks ago · f839b65c56
5 changed files with 114 additions and 33 deletions
--- a/src/components/EntityIcon.vue
+++ b/src/components/EntityIcon.vue
@ -8,10 +8,11 @@ import { avataaars } from "@dicebear/collection";
 import { Vue, Component, Prop } from "vue-facing-decorator";
 import { Contact } from "../db/tables/contacts";
 import { transformImageUrlForCors } from "../libs/util";
+import blankSquareSvg from "../assets/blank-square.svg";

@Component
 export default class EntityIcon extends Vue {
-  @Prop contact: Contact;
+  @Prop contact?: Contact;
  @Prop entityId = ""; // overridden by contact.did or profileImageUrl
  @Prop iconSize = 0;
  @Prop profileImageUrl = ""; // overridden by contact.profileImageUrl
@ -23,7 +24,7 @@ export default class EntityIcon extends Vue {
    } else {
      const identifier = this.contact?.did || this.entityId;
      if (!identifier) {
-        return `<img src="../src/assets/blank-square.svg" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
+        return `<img src="${blankSquareSvg}" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
      }
      // https://api.dicebear.com/8.x/avataaars/svg?seed=
      // ... does not render things with the same seed as this library.
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@ -938,6 +938,10 @@ export async function importFromMnemonic(
 * transformImageUrlForCors('https://image.timesafari.app/abc123.jpg')
 * // Returns: '/image-proxy/abc123.jpg' in development
 * // Returns: 'https://image.timesafari.app/abc123.jpg' in production
+ *
+ * transformImageUrlForCors('https://live.staticflickr.com/2853/9194403742_c8297b965b_b.jpg')
+ * // Returns: '/flickr-proxy/2853/9194403742_c8297b965b_b.jpg' in development
+ * // Returns: 'https://live.staticflickr.com/2853/9194403742_c8297b965b_b.jpg' in production
 */
 export function transformImageUrlForCors(
  imageUrl: string | undefined | null,
@ -961,5 +965,17 @@ export function transformImageUrlForCors(
    return `/image-proxy/${imagePath}`;
  }

+  // Transform Flickr URLs to use proxy
+  if (imageUrl.startsWith("https://live.staticflickr.com/")) {
+    const imagePath = imageUrl.replace("https://live.staticflickr.com/", "");
+    return `/flickr-proxy/${imagePath}`;
+  }
+
+  // Transform other Flickr subdomains if needed
+  if (imageUrl.includes(".staticflickr.com/")) {
+    const imagePath = imageUrl.split(".staticflickr.com/")[1];
+    return `/flickr-proxy/${imagePath}`;
+  }
+
  return imageUrl;
 }
--- a/src/utils/PlatformServiceMixin.ts
+++ b/src/utils/PlatformServiceMixin.ts
@ -37,7 +37,7 @@
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import type { PlatformService } from "@/services/PlatformService";
 import { mapColumnsToValues, parseJsonField } from "@/db/databaseUtil";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY, type Settings } from "@/db/tables/settings";
 import * as databaseUtil from "@/db/databaseUtil";
 import { logger } from "@/utils/logger";

@ -246,7 +246,10 @@ export const PlatformServiceMixin = {
     * Utility method for retrieving and parsing settings
     * Common pattern used across many components
     */
-    async $getSettings(key: string, fallback: any = null) {
+    async $getSettings(
+      key: string,
+      fallback: Settings | null = null,
+    ): Promise<Settings | null> {
      try {
        const result = await this.$dbQuery(
          "SELECT * FROM settings WHERE id = ? OR accountDid = ?",
@ -257,10 +260,13 @@ export const PlatformServiceMixin = {
          return fallback;
        }

-        const settings = mapColumnsToValues(
-          result.columns,
-          result.values,
-        )[0] as any;
+        const mappedResults = mapColumnsToValues(result.columns, result.values);
+
+        if (!mappedResults.length) {
+          return fallback;
+        }
+
+        const settings = mappedResults[0] as Settings;

        // Handle JSON field parsing
        if (settings.searchBoxes) {
@ -287,8 +293,8 @@ export const PlatformServiceMixin = {
    async $getMergedSettings(
      defaultKey: string,
      accountDid?: string,
-      defaultFallback: any = {},
-    ) {
+      defaultFallback: Settings = {},
+    ): Promise<Settings> {
      try {
        // Get default settings
        const defaultSettings = await this.$getSettings(
@ -298,7 +304,7 @@ export const PlatformServiceMixin = {

        // If no account DID, return defaults
        if (!accountDid) {
-          return defaultSettings;
+          return defaultSettings || defaultFallback;
        }

        // Get account-specific overrides
@ -308,21 +314,30 @@ export const PlatformServiceMixin = {
        );

        if (!accountResult?.values?.length) {
-          return defaultSettings;
+          return defaultSettings || defaultFallback;
        }

        // Map and filter non-null overrides
-        const overrideSettings = mapColumnsToValues(
+        const mappedResults = mapColumnsToValues(
          accountResult.columns,
          accountResult.values,
-        )[0] as any;
+        );
+
+        if (!mappedResults.length) {
+          return defaultSettings || defaultFallback;
+        }
+
+        const overrideSettings = mappedResults[0] as Settings;

        const filteredOverrides = Object.fromEntries(
          Object.entries(overrideSettings).filter(([_, v]) => v !== null),
        );

        // Merge settings with overrides taking precedence
-        const mergedSettings = { ...defaultSettings, ...filteredOverrides };
+        const mergedSettings = {
+          ...defaultSettings,
+          ...filteredOverrides,
+        } as Settings;

        // Handle JSON field parsing
        if (mergedSettings.searchBoxes) {
@ -450,7 +465,7 @@ export const PlatformServiceMixin = {
     * @param defaults Optional default values
     * @returns Cached settings object
     */
-    async $settings(defaults: any = {}): Promise<any> {
+    async $settings(defaults: Settings = {}): Promise<Settings> {
      const cacheKey = `settings_${String(MASTER_SETTINGS_KEY)}`;
      const cached = this._getCached<any>(cacheKey);
      if (cached) {
@ -459,6 +474,10 @@ export const PlatformServiceMixin = {

      const settings = await this.$getSettings(MASTER_SETTINGS_KEY, defaults);

+      if (!settings) {
+        return defaults;
+      }
+
      // **ELECTRON-SPECIFIC FIX**: Apply platform-specific API server override
      // This ensures Electron always uses production endpoints regardless of cached settings
      if (process.env.VITE_PLATFORM === "electron") {
@ -482,7 +501,10 @@ export const PlatformServiceMixin = {
     * @param defaults Optional default values
     * @returns Cached merged settings object
     */
-    async $accountSettings(did?: string, defaults: any = {}): Promise<any> {
+    async $accountSettings(
+      did?: string,
+      defaults: Settings = {},
+    ): Promise<Settings> {
      const currentDid = did || (this as any).activeDid;
      const cacheKey = `account_settings_${currentDid || "default"}`;

@ -515,7 +537,7 @@ export const PlatformServiceMixin = {
     * @param changes Settings changes to save
     * @returns Promise<boolean> Success status
     */
-    async $saveSettings(changes: any): Promise<boolean> {
+    async $saveSettings(changes: Partial<Settings>): Promise<boolean> {
      const result = await databaseUtil.updateDefaultSettings(changes);

      // Invalidate related caches
@ -532,7 +554,10 @@ export const PlatformServiceMixin = {
     * @param changes Settings changes to save
     * @returns Promise<boolean> Success status
     */
-    async $saveUserSettings(did: string, changes: any): Promise<boolean> {
+    async $saveUserSettings(
+      did: string,
+      changes: Partial<Settings>,
+    ): Promise<boolean> {
      const result = await databaseUtil.updateDidSpecificSettings(did, changes);

      // Invalidate related caches
@ -548,7 +573,7 @@ export const PlatformServiceMixin = {
     * @param changes Settings changes to save
     * @returns Promise<boolean> Success status
     */
-    async $saveMySettings(changes: any): Promise<boolean> {
+    async $saveMySettings(changes: Partial<Settings>): Promise<boolean> {
      const currentDid = (this as any).activeDid;
      if (!currentDid) {
        return await this.$saveSettings(changes);
@ -564,7 +589,7 @@ export const PlatformServiceMixin = {
     * Manually refresh settings cache - $refreshSettings()
     * Forces reload of settings from database
     */
-    async $refreshSettings(): Promise<any> {
+    async $refreshSettings(): Promise<Settings> {
      this._invalidateCache(`settings_${MASTER_SETTINGS_KEY}`);
      const currentDid = (this as any).activeDid;
      if (currentDid) {
@ -604,12 +629,15 @@ export interface IPlatformServiceMixin {
  $dbQuery(sql: string, params?: unknown[]): Promise<any>;
  $dbExec(sql: string, params?: unknown[]): Promise<any>;
  $dbGetOneRow(sql: string, params?: unknown[]): Promise<any>;
-  $getSettings(key: string, fallback?: any): Promise<any>;
+  $getSettings(
+    key: string,
+    fallback?: Settings | null,
+  ): Promise<Settings | null>;
  $getMergedSettings(
    defaultKey: string,
    accountDid?: string,
-    defaultFallback?: any,
-  ): Promise<any>;
+    defaultFallback?: Settings,
+  ): Promise<Settings>;
  $withTransaction<T>(callback: () => Promise<T>): Promise<T>;
  isCapacitor: boolean;
  isWeb: boolean;
@ -640,22 +668,32 @@ declare module "@vue/runtime-core" {
    $dbQuery(sql: string, params?: unknown[]): Promise<any>;
    $dbExec(sql: string, params?: unknown[]): Promise<any>;
    $dbGetOneRow(sql: string, params?: unknown[]): Promise<any>;
-    $getSettings(key: string, defaults?: any): Promise<any>;
-    $getMergedSettings(key: string, did?: string, defaults?: any): Promise<any>;
+    $getSettings(
+      key: string,
+      defaults?: Settings | null,
+    ): Promise<Settings | null>;
+    $getMergedSettings(
+      key: string,
+      did?: string,
+      defaults?: Settings,
+    ): Promise<Settings>;
    $withTransaction<T>(fn: () => Promise<T>): Promise<T>;

    // Cached specialized shortcuts (massive performance boost)
    $contacts(): Promise<any[]>;
-    $settings(defaults?: any): Promise<any>;
-    $accountSettings(did?: string, defaults?: any): Promise<any>;
+    $settings(defaults?: Settings): Promise<Settings>;
+    $accountSettings(did?: string, defaults?: Settings): Promise<Settings>;

    // Settings update shortcuts (eliminate 90% boilerplate)
-    $saveSettings(changes: any): Promise<boolean>;
-    $saveUserSettings(did: string, changes: any): Promise<boolean>;
-    $saveMySettings(changes: any): Promise<boolean>;
+    $saveSettings(changes: Partial<Settings>): Promise<boolean>;
+    $saveUserSettings(
+      did: string,
+      changes: Partial<Settings>,
+    ): Promise<boolean>;
+    $saveMySettings(changes: Partial<Settings>): Promise<boolean>;

    // Cache management methods
-    $refreshSettings(): Promise<any>;
+    $refreshSettings(): Promise<Settings>;
    $refreshContacts(): Promise<any[]>;
    $clearAllCaches(): void;
  }
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@ -77,7 +77,10 @@
    <div class="flex justify-center mt-4" data-testId="imagery">
      <span v-if="imageUrl" class="flex justify-between">
        <a :href="imageUrl" target="_blank">
-          <img :src="imageUrl" class="h-24 rounded-xl" />
+          <img
+            :src="libsUtil.transformImageUrlForCors(imageUrl)"
+            class="h-24 rounded-xl"
+          />
        </a>
        <font-awesome
          icon="trash-can"
--- a/vite.config.common.mts
+++ b/vite.config.common.mts
@ -101,6 +101,29 @@ export async function createBuildConfig(mode: string): Promise<UserConfig> {
              console.log('[Image Proxy Response]', req.url, '->', proxyRes.statusCode, proxyRes.headers.location || 'no redirect');
            });
          }
+        },
+        // Proxy Flickr images to avoid CORS issues
+        '/flickr-proxy': {
+          target: 'https://live.staticflickr.com',
+          changeOrigin: true,
+          secure: true,
+          followRedirects: true,
+          rewrite: (path) => path.replace(/^\/flickr-proxy/, ''),
+          configure: (proxy) => {
+            proxy.on('error', (err, req, res) => {
+              console.log('[Flickr Proxy Error]', err);
+            });
+            proxy.on('proxyReq', (proxyReq, req, res) => {
+              console.log('[Flickr Proxy Request]', req.method, req.url, '->', proxyReq.path);
+            });
+            proxy.on('proxyRes', (proxyRes, req, res) => {
+              // Add CORS headers to the response
+              proxyRes.headers['Access-Control-Allow-Origin'] = '*';
+              proxyRes.headers['Access-Control-Allow-Methods'] = 'GET, OPTIONS';
+              proxyRes.headers['Access-Control-Allow-Headers'] = 'Content-Type';
+              console.log('[Flickr Proxy Response]', req.url, '->', proxyRes.statusCode);
+            });
+          }
        }
      }
    },