fix: icons

app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue

@@ -2,6 +2,7 @@
 import { computed, useTemplateRef } from 'vue';
 import { useElementSize } from '@vueuse/core';
 import { REPLY_EDITOR_MODES } from './constants';
+import Icon from 'next/icon/Icon.vue';
 
 const props = defineProps({
   mode: {
@@ -12,6 +13,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  iconOnly: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 defineEmits(['toggleMode']);
@@ -59,30 +64,31 @@ const translateValue = computed(() => {
 
 <template>
   <button
-    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 z-0 active:scale-[0.995] active:duration-75"
+    class="flex items-center w-auto p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0 active:scale-[0.995] active:duration-75"
     :disabled="disabled"
-    :class="{
-      'cursor-not-allowed': disabled,
-    }"
+    :class="[iconOnly ? 'h-7' : 'h-8', { 'cursor-not-allowed': disabled }]"
     @click="$emit('toggleMode')"
   >
     <div
       ref="wootEditorReplyMode"
       class="flex items-center gap-1 px-2 z-20 text-n-slate-11"
     >
-      {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
+      <Icon v-if="iconOnly" icon="i-lucide-message-circle" class="size-4" />
+      <template v-else>{{ $t('CONVERSATION.REPLYBOX.REPLY') }}</template>
     </div>
     <div
       ref="wootEditorPrivateMode"
       class="flex items-center gap-1 px-2 z-20 text-n-slate-11"
     >
-      {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
+      <Icon v-if="iconOnly" icon="i-lucide-lock-keyhole" class="size-4" />
+      <template v-else>{{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}</template>
     </div>
     <div
-      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
-      :class="{
-        'transition-all duration-300': !disabled,
-      }"
+      class="absolute shadow-sm rounded-full w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      :class="[
+        iconOnly ? 'h-5' : 'h-6',
+        { 'transition-all duration-300': !disabled },
+      ]"
       :style="{
         '--chip-width': width,
         '--translate-x': translateValue,