add warning if on unexpected server

src/components/TopMessage.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="text-center text-red-500">{{ message }}</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-facing-decorator";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { AppString } from "@/constants/app";
+
+interface Notification {
+  group: string;
+  type: string;
+  title: string;
+  text: string;
+}
+
+@Component
+export default class TopMessage extends Vue {
+  $notify!: (notification: Notification, timeout?: number) => void;
+
+  @Prop selected = "";
+
+  message = "";
+
+  async mounted() {
+    try {
+      await db.open();
+
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      if (
+        settings?.warnIfTestServer &&
+        window.location.hostname !== AppString.PROD_TIME_SAFARI_SERVER
+      ) {
+        const didPrefix = settings.activeDid?.slice(11, 14);
+        this.message = "You're linked to a test server, user " + didPrefix;
+      } else if (
+        settings?.warnIfProdServer &&
+        window.location.hostname === AppString.PROD_TIME_SAFARI_SERVER
+      ) {
+        const didPrefix = settings.activeDid?.slice(1, 14);
+        this.message =
+          "You're linked to the production server, user " + didPrefix;
+      }
+    } catch (err: unknown) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Detecting Server",
+          text: JSON.stringify(err),
+        },
+        10000,
+      );
+    }
+  }
+}
+</script>