Fix Vue property conflicts in PlatformServiceMixin implementation

- Remove duplicate property declarations from TopMessage component
- Use (this as any) type assertion for mixin methods
- Resolves 'Data property already defined' warnings
- Fixes 'this.dbQuery is not a function' runtime errors

src/components/TopMessage.vue

@@ -18,11 +18,23 @@ import { Component, Vue, Prop } from "vue-facing-decorator";
 import { AppString, NotificationIface } from "../constants/app";
 import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 import { DEFAULT_ENDORSER_API_SERVER } from "../constants/app";
-import { usePlatformService } from "../utils/usePlatformService";
+import {
+  PlatformServiceMixin,
+  IPlatformServiceMixin,
+} from "../utils/PlatformServiceMixin";
 import { mapColumnsToValues, parseJsonField } from "../db/databaseUtil";
 
-@Component
+@Component({
+  mixins: [PlatformServiceMixin],
+})
 export default class TopMessage extends Vue {
+  // NOTE: This component uses PlatformServiceMixin which provides:
+  // - this.dbQuery(), this.dbExec(), this.dbGetOneRow() methods
+  // - this.platformService computed property
+  // - this.isCapacitor, this.isWeb, this.isElectron computed properties
+  // - this.capabilities computed property
+  // TypeScript requires (this as any) for mixin methods due to compile-time limitations
+
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   @Prop selected = "";
@@ -59,24 +71,24 @@ export default class TopMessage extends Vue {
   }
 
   /**
-   * Get settings for the active account using the platform service composable.
-   * This replaces the direct call to databaseUtil.retrieveSettingsForActiveAccount()
-   * and demonstrates the new composable pattern.
+   * Get settings for the active account using the platform service mixin.
+   * This demonstrates the concise mixin pattern with direct database access.
    */
   private async getActiveAccountSettings() {
-    const { dbQuery } = usePlatformService();
+    // Declare defaultSettings outside try block for proper scope
+    let defaultSettings;
 
     try {
       // Get default settings first
-      const defaultSettings = await this.getDefaultSettings();
-      
+      defaultSettings = await this.getDefaultSettings();
+
       // If no active DID, return defaults
       if (!defaultSettings.activeDid) {
         return defaultSettings;
       }
 
-      // Get account-specific settings using the composable
-      const result = await dbQuery(
+      // Get account-specific settings using the mixin (much more concise!)
+      const result = await (this as any).dbQuery(
         "SELECT * FROM settings WHERE accountDid = ?",
         [defaultSettings.activeDid],
       );
@@ -105,22 +117,29 @@ export default class TopMessage extends Vue {
 
       return settings;
     } catch (error) {
-      console.error(`Failed to retrieve account settings for ${defaultSettings.activeDid}:`, error);
-      return defaultSettings;
+      console.error(
+        `Failed to retrieve account settings for ${defaultSettings?.activeDid}:`,
+        error,
+      );
+      return (
+        defaultSettings || {
+          id: MASTER_SETTINGS_KEY,
+          activeDid: undefined,
+          apiServer: DEFAULT_ENDORSER_API_SERVER,
+        }
+      );
     }
   }
 
   /**
-   * Get default settings using the platform service composable
+   * Get default settings using the platform service mixin
    */
   private async getDefaultSettings() {
-    const { dbQuery } = usePlatformService();
-
     try {
-      const result = await dbQuery(
-        "SELECT * FROM settings WHERE id = ?",
-        [MASTER_SETTINGS_KEY],
-      );
+      // Direct database access via mixin - no destructuring needed!
+      const result = await (this as any).dbQuery("SELECT * FROM settings WHERE id = ?", [
+        MASTER_SETTINGS_KEY,
+      ]);
 
       if (!result?.values?.length) {
         return {
@@ -130,7 +149,10 @@ export default class TopMessage extends Vue {
         };
       }
 
-      const settings = mapColumnsToValues(result.columns, result.values)[0] as any;
+      const settings = mapColumnsToValues(
+        result.columns,
+        result.values,
+      )[0] as any;
 
       // Handle searchBoxes parsing
       if (settings.searchBoxes) {