refactor: split stores and use events

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

src/components/composer/ComposerRecipients.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+interface Props {
+  to: string[]
+  cc: string[]
+  bcc: string[]
+  subject: string
+  showCc: boolean
+  showBcc: boolean
+}
+
+defineProps<Props>()
+
+defineEmits<{
+  'update:to': [value: string[]]
+  'update:cc': [value: string[]]
+  'update:bcc': [value: string[]]
+  'update:subject': [value: string]
+  'toggle:cc': []
+  'toggle:bcc': []
+}>()
+</script>
+
+<template>
+  <div class="composer-fields pa-4">
+    <v-combobox
+      :model-value="to"
+      label="To"
+      chips
+      multiple
+      closable-chips
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      @update:model-value="$emit('update:to', $event)"
+    >
+      <template #append-inner>
+        <v-btn
+          size="x-small"
+          variant="text"
+          class="mr-1"
+          @click="$emit('toggle:cc')"
+        >
+          Cc
+        </v-btn>
+        <v-btn
+          size="x-small"
+          variant="text"
+          @click="$emit('toggle:bcc')"
+        >
+          Bcc
+        </v-btn>
+      </template>
+    </v-combobox>
+
+    <v-combobox
+      v-if="showCc"
+      :model-value="cc"
+      label="Cc"
+      chips
+      multiple
+      closable-chips
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      @update:model-value="$emit('update:cc', $event)"
+    />
+
+    <v-combobox
+      v-if="showBcc"
+      :model-value="bcc"
+      label="Bcc"
+      chips
+      multiple
+      closable-chips
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      @update:model-value="$emit('update:bcc', $event)"
+    />
+
+    <v-text-field
+      :model-value="subject"
+      label="Subject"
+      variant="outlined"
+      density="compact"
+      @update:model-value="$emit('update:subject', $event)"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.composer-fields {
+  flex-shrink: 0;
+}
+</style>