feat: allow toggle bg

app/javascript/dashboard/components-next/message/Message.vue

@@ -318,6 +318,7 @@ const contextMenuEnabledOptions = computed(() => {
     delete: hasText || hasAttachments,
     cannedResponse: isOutgoing && hasText,
     replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
+    toggleBg: variant.value === MESSAGE_VARIANTS.EMAIL,
   };
 });
 
@@ -353,6 +354,20 @@ function handleReplyTo() {
   emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, props);
 }
 
+function toggleBg() {
+  const key = `bg-light-toggle::${props.id}`;
+  const isToggled = LocalStorage.get(key);
+
+  if (isToggled) {
+    LocalStorage.remove(key);
+  } else {
+    LocalStorage.set(`bg-light-toggle::${props.id}`, true);
+  }
+
+  emitter.emit(BUS_EVENTS.TOGGLE_MESSAGE_BG, props.id);
+  closeContextMenu();
+}
+
 provideMessageContext({
   ...toRefs(props),
   isPrivate: computed(() => props.private),
@@ -425,6 +440,7 @@ provideMessageContext({
         @open="openContextMenu"
         @close="closeContextMenu"
         @reply-to="handleReplyTo"
+        @toggle-bg="toggleBg"
       />
     </div>
   </div>

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { Letter } from 'vue-letter';
+import { LocalStorage } from 'shared/helpers/localStorage';
 
 import Icon from 'next/icon/Icon.vue';
 import { EmailQuoteExtractor } from './removeReply.js';
@@ -12,16 +15,22 @@ import EmailMeta from './EmailMeta.vue';
 import { useMessageContext } from '../../provider.js';
 import { MESSAGE_TYPES } from 'next/message/constants.js';
 
-const { content, contentAttributes, attachments, messageType } =
+const { id, content, contentAttributes, attachments, messageType } =
   useMessageContext();
 
 const isExpandable = ref(false);
 const isExpanded = ref(false);
 const showQuotedMessage = ref(false);
+const useWhiteBackground = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
 onMounted(() => {
   isExpandable.value = contentContainer.value.scrollHeight > 400;
+
+  useWhiteBackground.value = LocalStorage.get(`bg-light-toggle::${id.value}`);
+  emitter.on(BUS_EVENTS.TOGGLE_MESSAGE_BG, () => {
+    useWhiteBackground.value = LocalStorage.get(`bg-light-toggle::${id.value}`);
+  });
 });
 
 const isOutgoing = computed(() => {
@@ -70,7 +79,12 @@ const textToShow = computed(() => {
           </button>
         </div>
         <FormattedContent v-if="isOutgoing && content" :content="content" />
-        <template v-else>
+        <div
+          v-else
+          :class="{
+            'dark:bg-white dark:p-4 rounded-lg text-black': useWhiteBackground,
+          }"
+        >
           <Letter
             v-if="showQuotedMessage"
             class-name="prose prose-email !max-w-none"
@@ -83,7 +97,7 @@ const textToShow = computed(() => {
             :html="unquotedHTML"
             :text="textToShow"
           />
-        </template>
+        </div>
         <button
           v-if="hasQuotedMessage"
           class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -218,6 +218,7 @@
       "DELETE": "Delete",
       "CREATE_A_CANNED_RESPONSE": "Add to canned responses",
       "TRANSLATE": "Translate",
+      "TOGGLE_BG": "Toggle background color",
       "COPY_PERMALINK": "Copy link to the message",
       "LINK_COPIED": "Message URL copied to the clipboard",
       "DELETE_CONFIRMATION": {

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -44,7 +44,7 @@ export default {
       default: false,
     },
   },
-  emits: ['open', 'close', 'replyTo'],
+  emits: ['open', 'close', 'replyTo', 'toggleBg'],
   setup() {
     const { getPlainText } = useMessageFormatter();
     return {
@@ -116,6 +116,9 @@ export default {
     handleClose(e) {
       this.$emit('close', e);
     },
+    toggleBackground(e) {
+      this.$emit('toggleBg', e);
+    },
     handleTranslate() {
       const { locale } = this.getAccount(this.currentAccountId);
       this.$store.dispatch('translateMessage', {
@@ -232,6 +235,15 @@ export default {
           variant="icon"
           @click.stop="handleTranslate"
         />
+        <MenuItem
+          v-if="enabledOptions['toggleBg']"
+          :option="{
+            icon: 'arrow-rotate-clockwise',
+            label: $t('CONVERSATION.CONTEXT_MENU.TOGGLE_BG'),
+          }"
+          variant="icon"
+          @click.stop="toggleBackground"
+        />
         <hr />
         <MenuItem
           :option="{

app/javascript/shared/constants/busEvents.js

@@ -15,4 +15,5 @@ export const BUS_EVENTS = {
   NEW_CONVERSATION_MODAL: 'newConversationModal',
   INSERT_INTO_RICH_EDITOR: 'insertIntoRichEditor',
   INSERT_INTO_NORMAL_EDITOR: 'insertIntoNormalEditor',
+  TOGGLE_MESSAGE_BG: 'toggleMessageBackground',
 };