add LogView for those cases where the log download doesn't work

src/router/index.ts

@@ -157,6 +157,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "InviteOneAcceptView",
     component: () => import("../views/InviteOneAcceptView.vue"),
   },
+  {
+    path: "/logs",
+    name: "logs",
+    component: () => import("../views/LogView.vue"),
+  },
   {
     path: "/new-activity",
     name: "new-activity",

src/views/AccountViewView.vue

@@ -562,11 +562,22 @@
       <router-link
         id="switch-identity-link"
         :to="{ name: 'identity-switcher' }"
-        class="block w-fit text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
+        class="block w-fit text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
       >
         Switch Identifier
       </router-link>
 
+      <div class="flex mt-4">
+        <button>
+          <router-link
+            :to="{ name: 'statistics' }"
+            class="block w-fit text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
+          >
+            See Global Animated History of Giving
+          </router-link>
+        </button>
+      </div>
+
       <div id="sectionImportContactsSettings" class="mt-4">
         <h2 class="text-slate-500 text-sm font-bold">
           Import Contacts & Settings Database
@@ -856,17 +867,6 @@
         </div>
       </label>
 
-      <div class="flex mt-4">
-        <button>
-          <router-link
-            :to="{ name: 'statistics' }"
-            class="block w-fit text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
-          >
-            See Global Animated History of Giving
-          </router-link>
-        </button>
-      </div>
-
       <div id="sectionPasskeyExpiration" class="flex justify-between">
         <span>
           <span class="text-slate-500 text-sm font-bold mb-2">
@@ -912,6 +912,13 @@
           />
         </div>
       </label>
+
+      <router-link
+        :to="{ name: 'logs' }"
+        class="block w-fit text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
+      >
+        View Logs
+      </router-link>
     </div>
   </section>
 </template>

src/views/ContactQRScanShowView.vue

@@ -5,9 +5,9 @@
     <!-- Breadcrumb -->
     <div class="mb-8">
       <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
+      <div class="relative px-7">
         <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
           <font-awesome icon="chevron-left" class="fa-fw" />

src/views/LogView.vue

@@ -0,0 +1,98 @@
+<!-- This is useful in an environment where the download doesn't work. -->
+<template>
+  <QuickNav selected="" />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Back Button -->
+    <div class="relative px-7">
+      <h1
+        class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
+        @click="$router.back()"
+      >
+        <font-awesome icon="chevron-left" class="mr-2" />
+      </h1>
+    </div>
+
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-6">Logs</h1>
+
+    <!-- Error Message -->
+    <div
+      v-if="error"
+      class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"
+    >
+      <span>{{ error }}</span>
+    </div>
+
+    <!-- Log Content -->
+    <div v-if="loading" class="text-center">
+      <font-awesome icon="spinner" class="fa-spin text-slate-400" />
+      Loading logs...
+    </div>
+    <div v-else-if="!logs.length" class="text-center text-slate-500">
+      No logs found.
+    </div>
+    <div v-else>
+      <div v-for="(log, index) in logs" :key="index" class="mb-8">
+        <h2 class="text-lg font-semibold mb-2">{{ log.date }}</h2>
+        <pre
+          class="bg-slate-100 p-4 rounded-md overflow-x-auto whitespace-pre-wrap"
+          >{{ log.message }}</pre
+        >
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
+import QuickNav from "../components/QuickNav.vue";
+import TopMessage from "../components/TopMessage.vue";
+import { db } from "../db/index";
+import { Log } from "../db/tables/logs";
+import { logger } from "../utils/logger";
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class LogView extends Vue {
+  $router!: Router;
+
+  loading = true;
+  logs: Log[] = [];
+  error: string | null = null;
+
+  async mounted() {
+    await this.loadLogs();
+  }
+
+  async loadLogs() {
+    try {
+      this.error = null; // Clear any previous errors
+      await db.open();
+      // Get all logs and sort by date in reverse chronological order
+      const allLogs = await db.logs.toArray();
+      this.logs = allLogs.sort((a, b) => {
+        const dateA = new Date(a.date);
+        const dateB = new Date(b.date);
+        return dateB.getTime() - dateA.getTime();
+      });
+    } catch (error) {
+      logger.error("Error loading logs:", error);
+      this.error =
+        error instanceof Error
+          ? error.message
+          : `An unknown error occurred while loading logs: ${String(error)}`;
+    } finally {
+      this.loading = false;
+    }
+  }
+}
+</script>