Fix frontend for seperate backend, and make preferences page

src/components/ErrorMessage.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+export default {
+  props: {
+    errMessage: {
+      type: Object,
+      default() {
+        {
+          ;('Error')
+        }
+      }
+    }
+  },
+
+  setup(props) {
+    return {
+      errorMessage: props.errMessage
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col max-w-prose justify-center text-center mx-auto p-6 bg-ctp-crust rounded-lg text-white"
+  >
+    <div class="mb-6">
+      <h1 class="font-bold text-5xl">oops...</h1>
+      <p class="font-bold text-3xl">this wasn't supposed to happen</p>
+    </div>
+
+    <p class="text-xl">
+      the server was encountered an error while retriving the data, and now we're here :3
+    </p>
+
+    <div class="mt-5">
+      <p class="text-xl">please contact the administrator with this code</p>
+      <p class="text-xl">error identifier: {{ errorMessage.code }}</p>
+    </div>
+  </div>
+</template>

src/components/TwitchChat.vue

@@ -57,7 +57,9 @@ export default {
   <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col">
     <ul class="overflow-y-scroll h-[46.875rem]" ref="chatList">
       <li>
-        <p ref="initConnectingStatus" class="text-gray-500 text-sm italic"> Connecting to {{ channelName }}.</p>
+        <p ref="initConnectingStatus" class="text-gray-500 text-sm italic">
+          Connecting to {{ channelName }}.
+        </p>
       </li>
       <li v-for="message in getChat()" :key="messages.indexOf(message)">
         <div class="text-white inline-flex">