refactor: split stores and use events

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

src/components/composer/ComposerToolbar.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+interface Props {
+  mode: 'new' | 'reply' | 'forward'
+  saveStatus: string
+  canSend: boolean
+  sending: boolean
+}
+
+defineProps<Props>()
+
+defineEmits<{
+  close: []
+  send: []
+}>()
+</script>
+
+<template>
+  <v-toolbar density="compact" elevation="0" class="composer-toolbar">
+    <v-btn
+      variant="text"
+      icon="mdi-close"
+      @click="$emit('close')"
+    >
+      <v-icon>mdi-close</v-icon>
+      <v-tooltip activator="parent" location="bottom">Close</v-tooltip>
+    </v-btn>
+
+    <v-toolbar-title>
+      {{ mode === 'reply' ? 'Reply' : mode === 'forward' ? 'Forward' : 'New Message' }}
+    </v-toolbar-title>
+
+    <v-spacer />
+
+    <span v-if="saveStatus" class="text-caption text-medium-emphasis mr-4">
+      {{ saveStatus }}
+    </span>
+
+    <v-btn
+      color="primary"
+      :disabled="!canSend"
+      :loading="sending"
+      prepend-icon="mdi-send"
+      @click="$emit('send')"
+    >
+      Send
+    </v-btn>
+  </v-toolbar>
+</template>
+
+<style scoped lang="scss">
+.composer-toolbar {
+  flex-shrink: 0;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+</style>