feat: mail composition

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/composer/ComposerEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import type { PropType } from 'vue'
 import { EditorContent, type Editor } from '@tiptap/vue-3'
 
@@ -33,14 +34,32 @@ defineProps({
   },
 })
 
-defineEmits<{
+const emit = defineEmits<{
   bold: []
   italic: []
   underline: []
   bulletList: []
   orderedList: []
   link: []
+  attach: [files: File[]]
 }>()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+function openFilePicker() {
+  fileInput.value?.click()
+}
+
+function handleFileChange(event: Event) {
+  const input = event.target as HTMLInputElement | null
+  const files = input?.files ? Array.from(input.files) : []
+  if (files.length > 0) {
+    emit('attach', files)
+  }
+  if (input) {
+    input.value = ''
+  }
+}
 </script>
 
 <template>
@@ -111,7 +130,15 @@ defineEmits<{
 
     <v-spacer />
 
-    <v-btn icon size="small">
+    <input
+      ref="fileInput"
+      type="file"
+      multiple
+      class="sr-only"
+      @change="handleFileChange"
+    >
+
+    <v-btn icon size="small" @click="openFilePicker">
       <v-icon>mdi-paperclip</v-icon>
       <v-tooltip activator="parent" location="bottom">Attach Files</v-tooltip>
     </v-btn>
@@ -120,7 +147,7 @@ defineEmits<{
   <v-divider />
 
   <div class="editor-container">
-    <EditorContent :editor="editor" />
+    <EditorContent :editor="editor ?? undefined" />
   </div>
 </template>
 
@@ -136,6 +163,10 @@ defineEmits<{
   background-color: rgb(var(--v-theme-background));
 }
 
+.sr-only {
+  display: none;
+}
+
 .v-btn--active {
   background-color: rgba(var(--v-theme-primary), 0.12);
   color: rgb(var(--v-theme-primary));