bak

src/components/WelcomeDialog.vue

@@ -6,13 +6,13 @@ import {
   PhFolderOpen,
   PhPlus,
   PhTrash,
-  PhX,
 } from '@phosphor-icons/vue'
 import {
   deleteStoredProject,
   listRecentProjects,
   type StoredProject,
 } from '@/lib/projectStore'
+import { Modal } from '@/components/ui'
 
 const props = defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{
@@ -101,21 +101,18 @@ watch(
 </script>
 
 <template>
-  <Teleport to="body">
-    <Transition name="fade">
-      <div v-if="modelValue" class="backdrop" @mousedown.self="close">
-        <div class="dialog" role="dialog" aria-modal="true">
-          <header class="hdr">
-            <div>
-              <h2>Willkommen bei Animatr</h2>
-              <p class="sub">Zuletzt bearbeitete Projekte</p>
-            </div>
-            <button class="close" title="Schließen" @click="close">
-              <PhX :size="14" weight="bold" />
-            </button>
-          </header>
-
-          <div class="body">
+  <Modal
+    :model-value="modelValue"
+    size="md"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template #header>
+      <div class="hdr-text">
+        <h2>Willkommen bei Animatr</h2>
+        <p class="sub">Zuletzt bearbeitete Projekte</p>
+      </div>
+    </template>
+    <div class="body">
             <div v-if="loading" class="empty">Laden…</div>
             <div v-else-if="!recents.length" class="empty">
               Keine gespeicherten Projekte vorhanden.
@@ -146,61 +143,26 @@ watch(
                 </button>
               </li>
             </ul>
-          </div>
-
-          <footer class="ftr">
-            <button class="ftr-btn" @click="startFresh">
-              <PhPlus :size="13" weight="bold" />
-              Neues Projekt
-            </button>
-            <button class="ftr-btn" @click="importFile">
-              <PhFileArrowUp :size="13" />
-              Datei importieren…
-            </button>
-            <button class="ftr-btn" @click="exportFile">
-              <PhDownloadSimple :size="13" />
-              Aktuelles exportieren
-            </button>
-          </footer>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+    </div>
+    <template #footer>
+      <button class="ftr-btn" @click="startFresh">
+        <PhPlus :size="13" weight="bold" />
+        Neues Projekt
+      </button>
+      <button class="ftr-btn" @click="importFile">
+        <PhFileArrowUp :size="13" />
+        Datei importieren…
+      </button>
+      <button class="ftr-btn" @click="exportFile">
+        <PhDownloadSimple :size="13" />
+        Aktuelles exportieren
+      </button>
+    </template>
+  </Modal>
 </template>
 
 <style scoped>
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 800;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(4px);
-}
-
-.dialog {
-  width: min(560px, calc(100% - 32px));
-  max-height: calc(100vh - 64px);
-  background: var(--panel);
-  border: 1px solid var(--border-strong);
-  border-radius: 10px;
-  box-shadow: var(--shadow-md);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.hdr {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 16px 18px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.hdr h2 {
+.hdr-text h2 {
   margin: 0;
   font-size: 15px;
   font-weight: 600;
@@ -212,24 +174,6 @@ watch(
   color: var(--text-dim);
 }
 
-.close {
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--text-dim);
-  border-radius: var(--radius-sm);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.close:hover {
-  background: var(--panel-alt);
-  color: var(--text);
-}
-
 .body {
   padding: 8px 12px;
   overflow: auto;
@@ -334,14 +278,6 @@ watch(
   border-color: var(--danger);
 }
 
-.ftr {
-  display: flex;
-  gap: 8px;
-  padding: 12px 14px;
-  border-top: 1px solid var(--border);
-  background: var(--panel-alt);
-}
-
 .ftr-btn {
   display: inline-flex;
   align-items: center;
@@ -358,13 +294,4 @@ watch(
   background: var(--panel-hover);
   border-color: var(--border-strong);
 }
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 160ms var(--ease);
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>