feat: press e to edit

frontend-vue/src/components/chat/MessageItem.vue

@@ -66,6 +66,7 @@ interface Props {
 
 const emit = defineEmits<{
   'open-dialog': [message: ExtendedMessage | UnsentMessage]
+  'open-dialog-edit': [message: ExtendedMessage | UnsentMessage]
   'focus': []
 }>()
 
@@ -211,6 +212,12 @@ const handleKeydown = (event: KeyboardEvent) => {
     navigator.clipboard.writeText(props.message.content)
     playSound('copy')
     toastStore.success('Message copied to clipboard')
+  } else if (event.key === 'e') {
+    // Edit message - open the message dialog in edit mode
+    if (!props.isUnsent) {
+      event.preventDefault()
+      emit('open-dialog-edit', props.message)
+    }
   } else if (event.key === 'r') {
     // Read message aloud (only when no modifiers are pressed)
     if (appStore.settings.ttsEnabled) {

frontend-vue/src/components/chat/MessagesContainer.vue

@@ -6,15 +6,17 @@
       <MessageItem v-for="(message, index) in messages" :key="message.id" :message="message"
         :tabindex="index === focusedMessageIndex ? 0 : -1" :data-message-index="index"
         :aria-selected="index === focusedMessageIndex ? 'true' : 'false'"
-        @focus="focusedMessageIndex = index" 
+        @focus="focusedMessageIndex = index"
-        @open-dialog="emit('open-message-dialog', $event)" />
+        @open-dialog="emit('open-message-dialog', $event)"
+        @open-dialog-edit="emit('open-message-dialog-edit', $event)" />
 
       <!-- Unsent Messages -->
       <MessageItem v-for="(unsentMsg, index) in unsentMessages" :key="unsentMsg.id" :message="unsentMsg"
         :is-unsent="true" :tabindex="(messages.length + index) === focusedMessageIndex ? 0 : -1"
         :aria-selected="(messages.length + index) === focusedMessageIndex ? 'true' : 'false'"
-        :data-message-index="messages.length + index" @focus="focusedMessageIndex = messages.length + index" 
+        :data-message-index="messages.length + index" @focus="focusedMessageIndex = messages.length + index"
-        @open-dialog="emit('open-message-dialog', $event)" />
+        @open-dialog="emit('open-message-dialog', $event)"
+        @open-dialog-edit="emit('open-message-dialog-edit', $event)" />
     </div>
   </div>
 </template>
@@ -32,6 +34,7 @@ interface Props {
 const emit = defineEmits<{
   'message-selected': [message: ExtendedMessage | UnsentMessage, index: number]
   'open-message-dialog': [message: ExtendedMessage | UnsentMessage]
+  'open-message-dialog-edit': [message: ExtendedMessage | UnsentMessage]
 }>()
 
 const props = defineProps<Props>()

frontend-vue/src/components/dialogs/MessageDialog.vue

@@ -202,6 +202,7 @@ import type { ExtendedMessage } from '@/types'
 interface Props {
   message: ExtendedMessage
   open: boolean
+  startEditing?: boolean
 }
 
 const emit = defineEmits<{
@@ -404,6 +405,11 @@ const handleKeydown = (event: KeyboardEvent) => {
 
 onMounted(() => {
   document.addEventListener('keydown', handleKeydown)
+
+  // Auto-start editing if requested
+  if (props.startEditing) {
+    startEditing()
+  }
 })
 
 // Cleanup on unmount

frontend-vue/src/views/MainView.vue

@@ -55,6 +55,7 @@
           :unsent-messages="appStore.unsentMessagesForChannel"
           ref="messagesContainer"
           @open-message-dialog="handleOpenMessageDialog"
+          @open-message-dialog-edit="handleOpenMessageDialogEdit"
         />
         
         <!-- Message Input -->
@@ -122,11 +123,12 @@
     </BaseDialog>
 
     <BaseDialog v-model:show="showMessageDialog" title="">
-      <MessageDialog 
+      <MessageDialog
         v-if="selectedMessage"
         :message="selectedMessage"
         :open="showMessageDialog"
-        @close="handleCloseMessageDialog" 
+        :start-editing="shouldStartEditing"
+        @close="handleCloseMessageDialog"
         @edit="handleEditMessage"
         @delete="handleDeleteMessage"
         @move="handleMoveMessage"
@@ -197,6 +199,7 @@ const showVoiceDialog = ref(false)
 const showMessageDialog = ref(false)
 const showCameraDialog = ref(false)
 const selectedMessage = ref<ExtendedMessage | null>(null)
+const shouldStartEditing = ref(false)
 
 // Mobile sidebar state
 const sidebarOpen = ref(false)
@@ -460,6 +463,16 @@ const handleOpenMessageDialog = (message: ExtendedMessage | UnsentMessage) => {
   // Only allow dialog for sent messages (ExtendedMessage), not unsent ones
   if ('created_at' in message) {
     selectedMessage.value = message as ExtendedMessage
+    shouldStartEditing.value = false
+    showMessageDialog.value = true
+  }
+}
+
+const handleOpenMessageDialogEdit = (message: ExtendedMessage | UnsentMessage) => {
+  // Only allow dialog for sent messages (ExtendedMessage), not unsent ones
+  if ('created_at' in message) {
+    selectedMessage.value = message as ExtendedMessage
+    shouldStartEditing.value = true
     showMessageDialog.value = true
   }
 }
@@ -467,6 +480,7 @@ const handleOpenMessageDialog = (message: ExtendedMessage | UnsentMessage) => {
 const handleCloseMessageDialog = () => {
   showMessageDialog.value = false
   selectedMessage.value = null
+  shouldStartEditing.value = false
 }
 
 const handleEditMessage = async (messageId: number, content: string) => {