fix: icons

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>