Merge pull request #2969 from aerodeval/fix/-fix-ui-inconsistency

refactor: fix UI inconsistency all over Helpdesk
(cherry picked from commit 15b246e)

# Conflicts:
#	desk/src/components/Settings/Telephony/Telephony.vue
#	desk/src/components/layouts/layoutSettings.ts
#	desk/src/components/view-controls/QuickFilters.vue
#	desk/src/pages/dashboard/Dashboard.vue
#	desk/src/pages/ticket/TicketAgent.vue
#	desk/src/pages/ticket/Tickets.vue
#	package.json

Author: aerodeval

desk/package.json

@@ -43,4 +43,4 @@
     "cheerio": "1.0.0-rc.12",
     "prosemirror-model": "1.25.4"
   }
-}
+}

desk/src/App.vue

@@ -26,14 +26,14 @@ useFavicon(favicon);
 onMounted(() => {
   window.addEventListener("online", () => {
     toast.create({
-      message: __("You are now online"),
+      message: __("You are now online."),
       icon: h(Wifi, { class: "text-white" }),
     });
   });
 
   window.addEventListener("offline", () => {
     toast.create({
-      message: __("You are now offline"),
+      message: __("You are now offline."),
       icon: h(WifiOff, { class: "text-white" }),
     });
   });

desk/src/components/CommentBox.vue

@@ -11,9 +11,9 @@
           <span class="font-medium text-gray-800">
             {{ commenter }}
           </span>
-          <span> added a</span>
+          <span> {{ __(" added a") }}</span>
           <span class="max-w-xs truncate font-medium text-gray-800">
-            comment
+            {{ __(" comment") }}
           </span>
         </p>
       </div>
@@ -26,19 +26,8 @@
         <div v-if="authStore.userId === commentedBy && !editable">
           <Dropdown
             :placement="'right'"
-            :options="[
-              {
-                label: 'Edit',
-                onClick: () => handleEditMode(),
-                icon: 'edit-2',
-                condition: () => !isTicketMergedComment,
-              },
-              {
-                label: 'Delete',
-                onClick: () => (showDialog = true),
-                icon: 'trash-2',
-              },
-            ]"
+            :options="dropdownOptions"
+            @click="isConfirmingDelete = false"
           >
             <Button
               icon="more-horizontal"
@@ -147,6 +136,7 @@
                   ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
                   : 'bg-surface-gray-3 text-ink-gray-6 hover:bg-surface-gray-4'
               "
+              v-if="reaction.count !== 0"
               @click="handleReaction(reaction.emoji)"
             >
               <span>{{ reaction.emoji }}</span>
@@ -157,21 +147,6 @@
       </div>
     </div>
   </div>
-  <Dialog
-    v-model="showDialog"
-    :options="{
-      title: 'Delete Comment',
-      message: 'Are you sure you want to confirm this action?',
-      actions: [
-        { label: 'Cancel', onClick: () => (showDialog = false) },
-        {
-          label: 'Delete',
-          onClick: () => deleteComment.submit(),
-          variant: 'solid',
-        },
-      ],
-    }"
-  />
 </template>
 
 <script setup lang="ts">
@@ -183,6 +158,7 @@ import { useConfigStore } from "@/stores/config";
 import { updateRes as updateComment } from "@/stores/knowledgeBase";
 import { useUserStore } from "@/stores/user";
 import { CommentActivity } from "@/types";
+import { ConfirmDelete } from "@/utils";
 import { useDevice } from "@/composables";
 import { useScreenSize } from "@/composables/screen";
 import {
@@ -195,7 +171,6 @@ import {
 } from "@/utils";
 import {
   Avatar,
-  Dialog,
   Dropdown,
   Popover,
   TextEditor,
@@ -204,6 +179,7 @@ import {
   toast,
 } from "frappe-ui";
 import { PropType, computed, onMounted, ref } from "vue";
+import { __ } from "@/translation";
 
 const authStore = useAuthStore();
 const props = defineProps({
@@ -228,12 +204,26 @@ const agentStore = useAgentStore();
 const userMentions = computed(() => agentStore.dropdown ?? []);
 
 const emit = defineEmits(["update"]);
-const showDialog = ref(false);
+const isConfirmingDelete = ref(false);
 const editable = ref(false);
 const _content = ref(content);
 
 const emojiList = ["👍", "👎", "❤️", "🎉", "👀", "✅"];
 
+const dropdownOptions = computed(() => [
+  {
+    label: "Edit",
+    onClick: () => handleEditMode(),
+    icon: "edit-2",
+    condition: () => !isTicketMergedComment.value,
+  },
+  ...ConfirmDelete({
+    onConfirmDelete: () => deleteComment.submit(),
+    isConfirmingDelete,
+  }),
+]);
+// editor.commands.focus('end')
+
 const reactions = ref<
   Array<{
     emoji: string;
@@ -263,6 +253,37 @@ const toggleReaction = createResource({
 });
 
 function handleReaction(emoji: string) {
+  const previousReaction = reactions.value.find(
+    (r) => r.current_user_reacted && r.emoji !== emoji
+  );
+  if (previousReaction) {
+    previousReaction.count = Math.max(0, previousReaction.count - 1);
+    previousReaction.current_user_reacted = false;
+  }
+
+  const existingReaction = reactions.value.find((r) => r.emoji === emoji);
+  if (existingReaction) {
+    if (existingReaction.current_user_reacted) {
+      existingReaction.count = Math.max(0, existingReaction.count - 1);
+      existingReaction.current_user_reacted = false;
+    } else {
+      existingReaction.count += 1;
+      existingReaction.current_user_reacted = true;
+    }
+  } else {
+    reactions.value.push({
+      emoji,
+      count: 1,
+      current_user_reacted: true,
+      users: [
+        {
+          user: authStore.userId,
+          full_name: getUser(authStore.userId).full_name,
+        },
+      ],
+    });
+  }
+
   toggleReaction.submit(emoji);
 }
 
@@ -274,7 +295,7 @@ const commentBoxState = ref(content);
 function handleEditMode() {
   editable.value = true;
   commentBoxState.value = _content.value;
-  editorRef.value.editor.chain().focus("start");
+  editorRef.value?.editor.chain().focus("end").run();
 }
 
 function handleDiscard() {
@@ -290,8 +311,7 @@ const deleteComment = createResource({
   }),
   onSuccess() {
     emit("update");
-    showDialog.value = false;
-    toast.success("Comment deleted");
+    toast.success(__("Comment deleted sucessfully."));
   },
 });
 
@@ -301,7 +321,7 @@ function handleSaveComment() {
     return;
   }
   if (isContentEmpty(_content.value)) {
-    toast.error("Comment cannot be empty");
+    toast.error(__("Comment cannot be empty."));
     return;
   }
 
@@ -317,7 +337,7 @@ function handleSaveComment() {
         editable.value = false;
         lastSavedContent.value = _content.value;
         emit("update");
-        toast.success("Comment updated");
+        toast.success(__("Comment updated successfully."));
       },
     }
   );

desk/src/components/CommunicationArea.vue

@@ -34,6 +34,7 @@
       class="flex gap-1.5 flex-1"
       @keydown.ctrl.enter.capture.stop="submitEmail"
       @keydown.meta.enter.capture.stop="submitEmail"
+      @keydown.esc.capture.stop="showEmailBox = false"
     >
       <EmailEditor
         ref="emailEditorRef"
@@ -64,6 +65,7 @@
       v-show="showCommentBox"
       @keydown.ctrl.enter.capture.stop="submitComment"
       @keydown.meta.enter.capture.stop="submitComment"
+      @keydown.esc.capture.stop="showCommentBox = false"
     >
       <CommentTextEditor
         ref="commentTextEditorRef"
@@ -222,7 +224,7 @@ onClickOutside(
     }
   },
   {
-    ignore: [".tippy-box", ".tippy-content"],
+    ignore: [".tippy-box", ".tippy-content", ".PopoverContent"],
   }
 );
 
@@ -234,7 +236,7 @@ onClickOutside(
     }
   },
   {
-    ignore: [".tippy-box", ".tippy-content"],
+    ignore: [".tippy-box", ".tippy-content", ".PopoverContent"],
   }
 );
 </script>

desk/src/components/DiscardButton.vue

@@ -34,7 +34,9 @@ function handleDiscard() {
     },
     actions: [
       {
-        label: "Confirm",
+        label: "Delete",
+        theme: "red",
+        iconLeft: "trash-2",
         variant: "solid",
         onClick(close: Function) {
           emit("discard");

desk/src/components/EmailEditor.vue

@@ -269,6 +269,8 @@ const { onUserType, cleanup } = useTyping(props.ticketId);
 
 const attachments = ref([]);
 const isUploading = ref(false);
+const contentEmpty = computed(() => isContentEmpty(newEmail.value));
+
 const isDisabled = computed(() => {
   return (
     (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) ||

desk/src/components/EmptyState.vue

@@ -1,33 +1,44 @@
 <template>
-  <div class="flex h-full items-center justify-center">
+  <div class="flex h-full items-center justify-center w-[stretch]">
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
+      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4 w-9/12 md:w-4/12"
     >
       <!-- Icon -->
       <component v-if="icon" :is="icon" class="h-10 w-10" />
       <!-- title -->
-      <span>{{ title }}</span>
-      <!-- Button which emits Empty State Action -->
-      <Button label="Create" @click="emit('emptyStateAction')" variant="subtle">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <div class="flex flex-col items-center justify-center">
+        <span class="text-lg font-medium text-ink-gray-8">{{ __(title) }}</span>
+        <span
+          v-if="descriptionText"
+          class="text-center text-p-base text-ink-gray-6 mt-1"
+        >
+          {{ __(descriptionText) }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { VNode } from "vue";
+import { VNode, computed } from "vue";
 interface Props {
   title: string;
   icon?: VNode | string;
+  description?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   title: "No Data Found",
   icon: "",
 });
 
-const emit = defineEmits(["emptyStateAction"]);
+const descriptionText = computed(() =>
+  props.description !== undefined && props.description !== ""
+    ? props.description
+    : `Create new ${props.title
+        .split(" ")[1]
+        .toLocaleLowerCase()} using the Create button.`
+);
 </script>
 
 <style lang="scss" scoped></style>

desk/src/components/LayoutHeader.vue

@@ -2,7 +2,7 @@
   <Teleport to="#app-header" v-if="showHeader">
     <slot>
       <header class="flex h-10.5 items-center justify-between mx-4 md:mr-0">
-        <div class="flex items-center gap-2 max-w-[50%]">
+        <div class="flex items-center gap-2 max-w-[70%] md:max-w-[50%]">
           <slot name="left-header" />
         </div>
         <div class="flex items-center gap-2">