fix: rename Dialog component to ADialog

Using the same name as the native HTML dialog is a bad idea.

src/components/generic/Dialog.vue → src/components/generic/ADialog.vue

@@ -4,11 +4,13 @@
     ref="dialogEl"
     class="tw-shadow-xl tw-border tw-border-gray-200 tw-rounded tw-max-w-[95%] tw-p-0 tw-bg-white tw-z-30 tw-flex tw-flex-col"
     @click="maybeClose"
-    @keydown.esc="close"
+    @close="close"
   >
     <header class="tw-flex tw-justify-between tw-p-4 flex-none">
       <div>
-        <slot name="header" />
+        <slot name="header" :title-class="titleClass">
+          <p :class="titleClass">{{ title }}</p>
+        </slot>
       </div>
       <button
         type="button"
@@ -35,12 +37,16 @@
 import { onClickOutside } from '@vueuse/core'
 import { nextTick, ref, useSlots, watch } from 'vue'
 
+const titleClass = 'tw-text-lg tw-font-semibold tw-m-0'
+
 const props = withDefaults(
   defineProps<{
     modelValue: boolean
     isModal?: boolean
+    title?: string
   }>(),
   {
+    title: '',
     isModal: false,
   },
 )
@@ -71,8 +77,6 @@ function maybeClose(event: MouseEvent) {
   }
 }
 
-onClickOutside(dialogEl, close)
-
 watch(
   () => props.modelValue,
   async (isOpen) => {

src/components/images/ImagePickerDialog.vue

 <template>
-  <Dialog v-model="localIsOpen" class="tw-w-screen lg:tw-w-[60vw] tw-max-w-[800px]" is-modal>
+  <ADialog v-model="localIsOpen" is-modal class="tw-w-screen lg:tw-w-[60vw] tw-max-w-[800px]">
     <template #header>
       <p class="tw-text-lg tw-font-semibold tw-m-0">{{ t('imagePicker.title') }}</p>
     </template>
@@ -60,7 +60,7 @@
         </button>
       </div>
     </template>
-  </Dialog>
+  </ADialog>
 </template>
 
 <script lang="ts" setup>
@@ -68,7 +68,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from '@/i18n'
 import { Image, NewImage, useImage, useImageStore } from '@/stores/images'
 import { useAsyncFunction, useUpdatableState } from '@/util'
-import Dialog from '../generic/Dialog.vue'
+import ADialog from '../generic/ADialog.vue'
 import ImageBrowser from './ImageBrowser.vue'
 import ImageEditor from './ImageEditor.vue'
 import ImageUploader from './ImageUploader.vue'