feat: allow running elk with a single server (#1606)

components/modal/ModalContainer.vue

@@ -5,6 +5,7 @@ import {
   isCommandPanelOpen,
   isConfirmDialogOpen,
   isEditHistoryDialogOpen,
+  isErrorDialogOpen,
   isFavouritedBoostedByDialogOpen,
   isMediaPreviewOpen,
   isPreviewHelpOpen,
@@ -87,6 +88,9 @@ const handleFavouritedBoostedByClose = () => {
     <ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125>
       <ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" />
     </ModalDialog>
+    <ModalDialog v-model="isErrorDialogOpen" py-4 px-8 max-w-125>
+      <ModalError v-if="errorDialogData" v-bind="errorDialogData" />
+    </ModalDialog>
     <ModalDialog
       v-model="isFavouritedBoostedByDialogOpen"
       max-w-180

components/modal/ModalError.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ErrorDialogData } from '~/types'
+
+defineProps<ErrorDialogData>()
+</script>
+
+<template>
+  <div flex="~ col" gap-6>
+    <div font-bold text-lg text-center>
+      {{ title }}
+    </div>
+    <div
+      flex="~ col"
+      gap-1 text-sm
+      pt-1 ps-2 pe-1 pb-2
+      text-red-600 dark:text-red-400
+      border="~ base rounded red-600 dark:red-400"
+    >
+      <ol ps-2 sm:ps-1>
+        <li v-for="(message, i) in messages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+          {{ message }}
+        </li>
+      </ol>
+    </div>
+    <div flex justify-end gap-2>
+      <button btn-text @click="closeErrorDialog()">
+        {{ close }}
+      </button>
+    </div>
+  </div>
+</template>