fix: add action buttons for each tab

desk/src/components/CommunicationArea.vue

@@ -135,6 +135,7 @@ const props = defineProps({
 defineExpose({
   replyToEmail,
   toggleEmailBox,
+  toggleCommentBox,
   editor: emailEditorRef,
 });
 </script>

desk/src/components/ticket/ActivityHeader.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="mx-10 my-8 flex items-center justify-between">
+    <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
+      {{ title }}
+    </div>
+    <Button
+      v-if="title == 'Emails'"
+      variant="solid"
+      @click="communicationAreaRef.toggleEmailBox()"
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ "New Email" }}</span>
+    </Button>
+    <Button
+      v-else-if="title == 'Comments'"
+      variant="solid"
+      @click="communicationAreaRef.toggleCommentBox()"
+    >
+      <template #prefix>
+        <FeatherIcon name="plus" class="h-4 w-4" />
+      </template>
+      <span>{{ "New Comment" }}</span>
+    </Button>
+    <Dropdown v-else :options="defaultActions" @click.stop>
+      <template v-slot="{ open }">
+        <Button variant="solid" class="flex items-center gap-1">
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4 w-4" />
+          </template>
+          <span>{{ "New" }}</span>
+          <template #suffix>
+            <FeatherIcon
+              :name="open ? 'chevron-up' : 'chevron-down'"
+              class="h-4 w-4"
+            />
+          </template>
+        </Button>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h } from "vue";
+import { computed } from "vue";
+import { EmailIcon, CommentIcon } from "@/components/icons";
+import { Dropdown } from "frappe-ui";
+import { inject } from "vue";
+import { Ref } from "vue";
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const communicationAreaRef: Ref = inject("communicationArea");
+
+const defaultActions = computed(() => {
+  let actions = [
+    {
+      icon: h(EmailIcon, { class: "h-4 w-4" }),
+      label: "New Email",
+      onClick: () => communicationAreaRef.value.toggleEmailBox(),
+    },
+    {
+      icon: h(CommentIcon, { class: "h-4 w-4" }),
+      label: "New Comment",
+      onClick: () => communicationAreaRef.value.toggleCommentBox(),
+    },
+  ];
+  return actions;
+});
+</script>
+
+<style scoped></style>

desk/src/components/ticket/TicketAgentActivities.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="h-screen py-3.5 comm-area px-3 lg:px-6">
+    <ActivityHeader :title="title" />
     <div v-for="(activity, i) in activities" :key="activity.key">
       <!-- single activity -->
       <div class="flex gap-4 w-full">
@@ -52,9 +53,9 @@ defineProps({
     type: Array,
     required: true,
   },
-  tab: {
+  title: {
     type: String,
-    required: false,
+    required: true,
   },
 });
 

desk/src/pages/TicketAgent.vue

@@ -56,7 +56,7 @@
             <TicketAgentActivities
               ref="ticketAgentActivitiesRef"
               :activities="filterActivities(tab.name)"
-              :tab="tab.name"
+              :title="tab.label"
               @update="
                 () => {
                   ticket.reload();
@@ -182,9 +182,7 @@ const props = defineProps({
   },
 });
 
-onMounted(() => {
-  provide("communicationArea", communicationAreaRef.value);
-});
+provide("communicationArea", communicationAreaRef);
 
 let storage = useStorage("ticket_agent", {
   showAllActivity: true,