Clean up basic button validation

src/assets/css/fonts.css

@@ -0,0 +1,50 @@
+/* ABC ROM Font Family */
+
+@font-face {
+  font-family: 'ABC ROM Medium';
+  src: url('/fonts/abc-rom/abc-rom-medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABC ROM Regular';
+  src: url('/fonts/abc-rom/abc-rom-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABC ROM Black Italic';
+  src: url('/fonts/abc-rom/abc-rom-black-italic.woff2') format('woff2');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Simplified font family names for easier use */
+@font-face {
+  font-family: 'ABC ROM';
+  src: url('/fonts/abc-rom/abc-rom-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABC ROM';
+  src: url('/fonts/abc-rom/abc-rom-medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABC ROM';
+  src: url('/fonts/abc-rom/abc-rom-black-italic.woff2') format('woff2');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}

src/main.ts

@@ -16,6 +16,7 @@ import '@/lib/litegraph/public/css/litegraph.css'
 import router from '@/router'
 
 import App from './App.vue'
+import './assets/css/fonts.css'
 // Intentionally relative import to ensure the CSS is loaded in the right order (after litegraph.css)
 import './assets/css/style.css'
 import { i18n } from './i18n'

src/router.ts

@@ -116,6 +116,12 @@ const router = createRouter({
           name: 'DesktopUpdateView',
           component: () => import('@/views/DesktopUpdateView.vue'),
           beforeEnter: guardElectronAccess
+        },
+        {
+          path: 'desktop-dialog',
+          name: 'DesktopDialogView',
+          component: () => import('@/views/DesktopDialogView.vue'),
+          beforeEnter: guardElectronAccess
         }
       ]
     }

src/views/DesktopDialogView.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="w-full h-full flex flex-col rounded-lg p-6 bg-[#2d2d2d] justify-between"
+  >
+    <h1 class="dialog-title font-semibold text-xl m-0 italic">{{ title }}</h1>
+    <p class="whitespace-pre-wrap">{{ message }}</p>
+    <div class="flex w-full gap-2">
+      <Button
+        v-for="button in buttons"
+        :key="button.label"
+        class="first:mr-auto"
+        :label="button.label"
+        :severity="button.severity ?? 'secondary'"
+        @click="electronAPI().Dialog.clickButton(button.returnValue ?? '')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { electronAPI } from '@/utils/envUtil'
+
+interface DialogButton {
+  label: string
+  returnValue: string | null
+  severity?: 'primary' | 'secondary' | 'danger' | 'warn'
+}
+
+const route = useRoute()
+
+// Get title and message from query parameters
+const title = computed(() => {
+  const { title } = route.query
+  return typeof title === 'string' ? title : ''
+})
+const message = computed(() => {
+  const { message } = route.query
+  return typeof message === 'string' ? message : ''
+})
+
+const buttons = computed(() => {
+  const buttonsParam = route.query.buttons
+  if (typeof buttonsParam === 'string') {
+    try {
+      const parsed = JSON.parse(buttonsParam)
+      if (Array.isArray(parsed)) {
+        return parsed as DialogButton[]
+      }
+      console.error('Invalid buttons parameter: expected array')
+    } catch (error) {
+      console.error('Failed to parse buttons parameter:', error)
+    }
+  }
+  return []
+})
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.dialog-title {
+  font-family: 'ABC ROM';
+}
+
+.p-button {
+  @apply rounded-lg;
+}
+
+.p-button-secondary {
+  @apply text-white rounded-lg border-none;
+
+  background: var(--color-button-background, rgba(255, 255, 255, 0.15));
+}
+
+.p-button-secondary:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.p-button-secondary:active {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.p-button-danger {
+  background: rgba(241, 67, 82, 0.5);
+  border: 0;
+}
+
+.p-button-danger:hover {
+  background: rgba(241, 67, 82, 0.75);
+}
+
+.p-button-danger:active {
+  background: rgba(241, 67, 82, 0.88);
+}
+
+.p-button-warn {
+  background: rgba(23, 45, 215, 0.66);
+  color: #f0ff41;
+  border: 0;
+}
+
+.p-button-warn:hover {
+  background: rgba(23, 45, 215, 0.88);
+  color: #f0ff41;
+  border: 0;
+}
+
+.p-button-warn:active {
+  background: rgba(23, 45, 215, 1);
+  color: #f0ff41;
+  border: 0;
+}
+</style>