feat: add hot key

app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] w-[23rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    :class="{
+      'border border-solid border-woot-300 dark:border-woot-400': active,
+    }"
+  >
+    <div
+      class="flex justify-between items-center px-2 w-full h-10 rounded-t-[5px]"
+    >
+      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
+      <!-- <fluent-icon
+        v-if="active"
+        icon="checkmark-circle"
+        type="solid"
+        size="24"
+        class="text-woot-500 dark:text-woot-500"
+      /> -->
+      <div>
+        <input type="radio" name="hotkey" value="enter" :checked="active" />
+      </div>
+    </div>
+    <div
+      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pb-0 text-start"
+    >
+      {{ content }}
+    </div>
+    <div v-if="src" class="p-3">
+      <img :src="src" class="object-cover w-full" />
+    </div>
+    <slot v-else />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: 'Active',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue

@@ -19,6 +19,30 @@
             <message-signature />
           </template>
         </personal-wrapper>
+
+        <personal-wrapper
+          header="Hot key to send messages"
+          description="You can select a hotkey (either Enter or Cmd/Ctrl+Enter) based on your
+          preference of writing."
+          :show-action-button="false"
+        >
+          <template #settingsItem>
+            <div class="flex flex-col justify-between w-full gap-4 sm:flex-row">
+              <button
+                v-for="keyOption in keyOptions"
+                :key="keyOption.key"
+                class="p-0 cursor-pointer"
+              >
+                <hot-key-card
+                  :heading="keyOption.heading"
+                  :content="keyOption.content"
+                  :src="keyOption.src"
+                  :active="keyOption.key === 'enter'"
+                />
+              </button>
+            </div>
+          </template>
+        </personal-wrapper>
       </div>
     </div>
   </div>
@@ -27,4 +51,22 @@
 import UserBasicProfile from './UserBasicProfile.vue';
 import MessageSignature from './MessageSignature.vue';
 import PersonalWrapper from './PersonalWrapper.vue';
+import HotKeyCard from './HotKeyCard.vue';
+
+const keyOptions = [
+  {
+    key: 'enter',
+    src: '/assets/images/dashboard/profile/hot-key-enter.svg',
+    heading: 'Enter (↵)',
+    content:
+      'Send messages by pressing Enter key instead of clicking send button.',
+  },
+  {
+    key: 'cmd_enter',
+    src: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
+    heading: 'CMD / Ctrl + Enter (⌘ + ↵)',
+    content:
+      'Send messages by pressing Enter key instead of clicking send button.',
+  },
+];
 </script>