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,

app/javascript/ui/LiteReplyBox.vue

@@ -6,7 +6,7 @@ import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixi
 
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
-import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel.vue';
+import LiteReplyTopPanel from './LiteReplyTopPanel.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
@@ -18,7 +18,7 @@ import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
 export default {
   components: {
     AttachmentPreview,
-    ReplyTopPanel,
+    LiteReplyTopPanel,
     ReplyBottomPanel,
     WootMessageEditor,
   },
@@ -118,10 +118,7 @@ export default {
       return window.__EDITOR_DISABLE_UPLOAD__ !== true;
     },
     replyButtonLabel() {
-      if (this.isPrivate) {
-        return this.$t('CONVERSATION.REPLYBOX.CREATE');
-      }
-      return this.$t('CONVERSATION.REPLYBOX.SEND');
+      return '↑';
     },
     replyBoxClass() {
       return {
@@ -387,9 +384,8 @@ export default {
 
 <template>
   <div ref="replyEditor" class="reply-box" :class="replyBoxClass">
-    <ReplyTopPanel
+    <LiteReplyTopPanel
       :mode="replyType"
-      disable-popout
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       @set-reply-mode="setReplyMode"

app/javascript/ui/LiteReplyTopPanel.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue';
+import {
+  REPLY_EDITOR_MODES,
+  CHAR_LENGTH_WARNING,
+} from 'dashboard/components/widgets/WootWriter/constants';
+import EditorModeToggle from 'dashboard/components/widgets/WootWriter/EditorModeToggle.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: REPLY_EDITOR_MODES.REPLY,
+  },
+  isReplyRestricted: {
+    type: Boolean,
+    default: false,
+  },
+  isMessageLengthReachingThreshold: {
+    type: Boolean,
+    default: false,
+  },
+  charactersRemaining: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['setReplyMode']);
+
+const charLengthClass = computed(() => {
+  return props.charactersRemaining < 0 ? 'text-n-ruby-9' : 'text-n-slate-11';
+});
+
+const characterLengthWarning = computed(() => {
+  return props.charactersRemaining < 0
+    ? `${-props.charactersRemaining} ${CHAR_LENGTH_WARNING.NEGATIVE}`
+    : `${props.charactersRemaining} ${CHAR_LENGTH_WARNING.UNDER_50}`;
+});
+
+const handleModeToggle = () => {
+  const newMode =
+    props.mode === REPLY_EDITOR_MODES.REPLY
+      ? REPLY_EDITOR_MODES.NOTE
+      : REPLY_EDITOR_MODES.REPLY;
+  emit('setReplyMode', newMode);
+};
+</script>
+
+<template>
+  <div class="flex justify-between items-center h-[3.25rem] gap-2 px-3">
+    <div class="flex items-center flex-1">
+      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
+        <span :class="charLengthClass">
+          {{ characterLengthWarning }}
+        </span>
+      </div>
+    </div>
+    <EditorModeToggle
+      :mode="mode"
+      :disabled="isReplyRestricted"
+      icon-only
+      @toggle-mode="handleModeToggle"
+    />
+  </div>
+</template>