From 26187c3ebf399ccec2e041d80a908fa94d8672c1 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 14 Jan 2025 16:28:29 +0530
Subject: [PATCH] fix: toggle for reply editor (#10680)

The reply editor toggle was a bit confusing for a few users, where it's
not clear that it's clickable. This PR updates it to make it more clear

### Pending Work

- [x] RTL view

### Preview

##### Dark Mode


https://github.com/user-attachments/assets/9e377eda-34d5-4f64-a06a-23ae822da50e

##### Light Mode


https://github.com/user-attachments/assets/84c6b23c-cd17-4805-8e63-9d7d1cc0d799
---
 .../widgets/WootWriter/EditorModeToggle.vue   | 97 +++++++++++--------
 1 file changed, 55 insertions(+), 42 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue b/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
index cfab37e1d..43eb1c101 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useTemplateRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
 import { REPLY_EDITOR_MODES } from './constants';
 
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
 const props = defineProps({
   mode: {
     type: String,
@@ -13,52 +12,66 @@ const props = defineProps({
 
 defineEmits(['toggleMode']);
 
+const wootEditorReplyMode = useTemplateRef('wootEditorReplyMode');
+const wootEditorPrivateMode = useTemplateRef('wootEditorPrivateMode');
+
+const replyModeSize = useElementSize(wootEditorReplyMode);
+const privateModeSize = useElementSize(wootEditorPrivateMode);
+
+/**
+ * Computed boolean indicating if the editor is in private note mode
+ * @type {ComputedRef<boolean>}
+ */
 const isPrivate = computed(() => props.mode === REPLY_EDITOR_MODES.NOTE);
+
+/**
+ * Computes the width of the sliding background chip in pixels
+ * Includes 16px of padding in the calculation
+ * @type {ComputedRef<string>}
+ */
+const width = computed(() => {
+  const widthToUse = isPrivate.value
+    ? privateModeSize.width.value
+    : replyModeSize.width.value;
+
+  const widthWithPadding = widthToUse + 16;
+  return `${widthWithPadding}px`;
+});
+
+/**
+ * Computes the X translation value for the sliding background chip
+ * Translates by the width of reply mode + padding when in private mode
+ * @type {ComputedRef<string>}
+ */
+const translateValue = computed(() => {
+  const xTranslate = isPrivate.value ? replyModeSize.width.value + 16 : 0;
+
+  return `${xTranslate}px`;
+});
 </script>
 
 <template>
   <button
-    class="flex items-center h-8 p-1 transition-all border rounded-full duration-600 bg-n-alpha-2 dark:bg-n-alpha-2 hover:bg-n-alpha-1 dark:hover:brightness-105 group relative transition-all duration-300 ease-in-out"
-    :class="[
-      isPrivate
-        ? 'border-n-amber-12/10 dark:border-n-amber-3/30 w-[128px]'
-        : 'border-n-weak dark:border-n-weak ',
-    ]"
+    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out"
     @click="$emit('toggleMode')"
   >
-    <div
-      class="flex absolute items-center justify-center w-6 transition-all duration-200 rounded-full bg-n-alpha-black1 size-6 transition-all duration-300 ease-in-out"
-      :class="[
-        isPrivate
-          ? 'ltr:translate-x-[94px] rtl:-translate-x-[94px]'
-          : 'translate-x-0',
-      ]"
-    >
-      <Icon
-        :icon="
-          isPrivate
-            ? 'i-material-symbols-lock'
-            : 'i-material-symbols-lock-open-rounded'
-        "
-        class="flex-shrink-0 size-3.5"
-        :class="[
-          isPrivate ? 'dark:text-n-amber-9 text-n-amber-11' : 'text-n-slate-10',
-        ]"
-      />
+    <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
+      {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
     </div>
-    <span
-      class="flex items-center text-sm font-medium transition-all duration-200 w-fit whitespace-nowrap"
-      :class="[
-        isPrivate
-          ? 'text-n-amber-12 ltr:mr-7 ltr:ml-1.5 rtl:ml-7 rtl:mr-1.5'
-          : 'text-n-slate-12 ltr:ml-7 ltr:mr-1.5 rtl:mr-7 rtl:ml-1.5',
-      ]"
-    >
-      {{
-        isPrivate
-          ? $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE')
-          : $t('CONVERSATION.REPLYBOX.REPLY')
-      }}
-    </span>
+    <div ref="wootEditorPrivateMode" class="flex items-center gap-1 px-2 z-20">
+      {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
+    </div>
+    <div
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)]"
+      :class="{
+        'bg-n-solid-1': !isPrivate,
+        'bg-n-amber-2': isPrivate,
+      }"
+      :style="{
+        '--chip-width': width,
+        '--translate-x': translateValue,
+        '--rtl-translate-x': `calc(-1 * var(--translate-x))`,
+      }"
+    />
   </button>
 </template>