add a input area for arbitrary SQL on the test page

src/db/index.ts

@@ -144,9 +144,8 @@ export async function updateDefaultSettings(
       // console.log("Database version:", db.verno);
       await safeOpenDatabase();
     } catch (openError: unknown) {
-      console.error("Failed to open database:", openError);
-      const errorMessage = openError instanceof Error ? openError.message : String(openError);
-      throw new Error(`Database connection failed: ${errorMessage}. Please try again or restart the app.`);
+      console.error("Failed to open database:", openError, String(openError));
+      throw new Error(`The database connection failed. We recommend you try again or restart the app.`);
     }
     const result = await db.settings.update(MASTER_SETTINGS_KEY, settingsChanges);
     return result;
@@ -155,7 +154,7 @@ export async function updateDefaultSettings(
     if (error instanceof Error) {
       throw error; // Re-throw if it's already an Error with a message
     } else {
-      throw new Error(`Failed to update settings: ${error}`);
+      throw new Error(`Failed to update settings. We recommend you try again or restart the app.`);
     }
   }
 }

src/views/TestView.vue

@@ -161,6 +161,38 @@
       </button>
     </div>
 
+    <div class="mt-8">
+      <h2 class="text-xl font-bold mb-4">SQL Operations</h2>
+      <div class="mb-4">
+        <div class="flex gap-2 mb-2">
+          <button
+            class="text-sm text-blue-600 hover:text-blue-800 underline"
+            @click="sqlQuery = 'SELECT * FROM sqlite_master WHERE type=\'table\';'"
+          >
+            All Tables
+          </button>
+        </div>
+        <textarea
+          v-model="sqlQuery"
+          class="w-full h-32 p-2 border border-gray-300 rounded-md font-mono"
+          placeholder="Enter your SQL query here..."
+        ></textarea>
+      </div>
+      
+      <div class="mb-4">
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="executeSql"
+        >
+          Execute
+        </button>
+      </div>
+      <div v-if="sqlResult" class="mt-4">
+        <h3 class="text-lg font-semibold mb-2">Result:</h3>
+        <pre class="bg-gray-100 p-4 rounded-md overflow-x-auto">{{ JSON.stringify(sqlResult, null, 2) }}</pre>
+      </div>
+    </div>
+
     <div class="mt-8">
       <h2 class="text-xl font-bold mb-4">Image Sharing</h2>
       Populates the "shared-photo" view as if they used "share_target".
@@ -271,6 +303,7 @@ import { AppString, NotificationIface } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import * as vcLib from "../libs/crypto/vc";
 import * as cryptoLib from "../libs/crypto";
+import databaseService from "../services/database";
 
 import {
   PeerSetup,
@@ -316,6 +349,10 @@ export default class Help extends Vue {
   peerSetup?: PeerSetup;
   userName?: string;
 
+  // for SQL operations
+  sqlQuery = "";
+  sqlResult: any = null;
+
   cryptoLib = cryptoLib;
 
   async mounted() {
@@ -492,5 +529,28 @@ export default class Help extends Vue {
     );
     logger.log("decoded", decoded);
   }
+
+  async executeSql() {
+    try {
+      const isSelect = this.sqlQuery.trim().toLowerCase().startsWith('select');
+      if (isSelect) {
+        this.sqlResult = await databaseService.query(this.sqlQuery);
+      } else {
+        this.sqlResult = await databaseService.run(this.sqlQuery);
+      }
+      console.log("SQL Result:", this.sqlResult);
+    } catch (error) {
+      console.error("SQL Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "SQL Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000
+      );
+    }
+  }
 }
 </script>