chore: Update inline input

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -36,7 +36,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+const emit = defineEmits([
+  'enterPress',
+  'escapePress',
+  'input',
+  'blur',
+  'focus',
+]);
 
 const modelValue = defineModel({
   type: [String, Number],
@@ -49,6 +55,10 @@ const onEnterPress = () => {
   emit('enterPress');
 };
 
+const onEscapePress = () => {
+  emit('escapePress');
+};
+
 const handleInput = event => {
   emit('input', event.target.value);
   modelValue.value = event.target.value;
@@ -102,6 +112,7 @@ defineExpose({
       @focus="handleFocus"
       @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
+      @keydown.escape.prevent="onEscapePress"
     />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -12,6 +12,7 @@ import ComposeConversation from 'dashboard/components-next/NewConversation/Compo
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 
 import {
   isAConversationRoute,
@@ -30,6 +31,7 @@ export default {
     SocialIcons,
     ContactMergeModal,
     VoiceCallButton,
+    InlineInput,
   },
   props: {
     contact: {
@@ -228,14 +230,14 @@ export default {
 
       <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
         <div v-if="showAvatar" class="flex items-center w-full min-w-0 gap-3">
-          <input
+          <InlineInput
             v-if="isEditingName"
             ref="nameInput"
             v-model="editName"
-            type="text"
-            class="!mb-0 !h-7 !text-base !py-0 !px-1.5 !rounded !min-w-0 flex-shrink max-w-full w-full"
-            @keydown.enter="saveNameEdit"
-            @keydown.escape="cancelNameEdit"
+            custom-input-class="!text-base !font-medium"
+            class="!w-fit"
+            @enter-press="saveNameEdit"
+            @escape-press="cancelNameEdit"
             @blur="saveNameEdit"
           />
           <h3

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -3,11 +3,13 @@ import { useAlert } from 'dashboard/composables';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 
 export default {
   components: {
     EmojiOrIcon,
     NextButton,
+    InlineInput,
   },
   props: {
     href: {
@@ -85,14 +87,13 @@ export default {
         icon-size="14"
         class="flex-shrink-0 ltr:ml-1 rtl:mr-1"
       />
-      <input
+      <InlineInput
         ref="editInput"
         v-model="editValue"
-        type="text"
         :placeholder="title"
-        class="!mb-0 !h-6 !text-sm !py-0 !px-1.5 !rounded !min-w-0 w-full"
-        @keydown.enter="saveEdit"
-        @keydown.escape="cancelEdit"
+        class="!w-fit"
+        @enter-press="saveEdit"
+        @escape-press="cancelEdit"
         @blur="saveEdit"
       />
     </div>