feat: #270 Improve error view (#1617)

* feat: #270 Improve error view

Reverting change

Lint & Format

PR comments

Fixing typo

* nit

---------

Co-authored-by: Oto Ciulis <oto.ciulis@gmail.com>
Co-authored-by: huchenlei <huchenlei@proton.me>

src/i18n.ts

@@ -53,6 +53,18 @@ const messages = {
         }
       }
     },
+    serverStart: {
+      reinstall: 'Reinstall',
+      reportIssue: 'Report Issue',
+      openLogs: 'Open Logs',
+      process: {
+        'initial-state': 'Loading...',
+        'python-setup': 'Setting up Python Environment...',
+        'starting-server': 'Starting ComfyUI server...',
+        ready: 'Finishing...',
+        error: 'Unable to start ComfyUI'
+      }
+    },
     firstTimeUIMessage:
       'This is the first time you use the new UI. Choose "Menu > Use New Menu > Disabled" to restore the old UI.',
     download: 'Download',

src/views/ServerStartView.vue

@@ -2,23 +2,45 @@
   <div
     class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
   >
-    <h2 class="text-2xl font-bold">{{ ProgressMessages[status] }}</h2>
+    <h2 class="text-2xl font-bold">{{ t(`serverStart.process.${status}`) }}</h2>
+    <div
+      v-if="status == ProgressStatus.ERROR"
+      class="flex items-center my-4 gap-2"
+    >
+      <Button
+        icon="pi pi-flag"
+        severity="secondary"
+        :label="t('serverStart.reportIssue')"
+        @click="reportIssue"
+      />
+      <Button
+        icon="pi pi-file"
+        severity="secondary"
+        :label="t('serverStart.openLogs')"
+        @click="openLogs"
+      />
+      <Button
+        icon="pi pi-refresh"
+        :label="t('serverStart.reinstall')"
+        @click="reinstall"
+      />
+    </div>
     <BaseTerminal @created="terminalCreated" />
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import { ref, onMounted, Ref } from 'vue'
 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
-import {
-  ProgressStatus,
-  ProgressMessages
-} from '@comfyorg/comfyui-electron-types'
+import { ProgressStatus } from '@comfyorg/comfyui-electron-types'
 import { electronAPI } from '@/utils/envUtil'
 import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 import { Terminal } from '@xterm/xterm'
+import { useI18n } from 'vue-i18n'
 
 const electron = electronAPI()
+const { t } = useI18n()
 
 const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
 let xterm: Terminal | undefined
@@ -44,6 +66,12 @@ const terminalCreated = (
   terminal.options.cursorInactiveStyle = 'block'
 }
 
+const reinstall = () => electron.reinstall()
+const reportIssue = () => {
+  window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
+}
+const openLogs = () => electron.openLogsFolder()
+
 onMounted(() => {
   electron.sendReady()
   electron.onProgressUpdate(updateProgress)