Fix time display, fix file attachments not working properly after sending without refresh

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

@@ -34,6 +34,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const fileExtension = computed(() => {
+  if (!props.file.original_name) return ''
   return props.file.original_name.split('.').pop()?.toLowerCase() || ''
 })
 

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

@@ -20,8 +20,12 @@
     </div>
     
     <div class="message__meta">
-      <time v-if="!isUnsent && 'created_at' in message" class="message__time">
-        {{ formatTime(message.created_at) }}
+      <time 
+        v-if="!isUnsent && 'created_at' in message" 
+        class="message__time"
+        :datetime="message.created_at"
+      >
+        {{ formatSmartTimestamp(message.created_at) }}
       </time>
       <span v-else class="message__status">Sending...</span>
     </div>
@@ -33,6 +37,7 @@ import { computed } from 'vue'
 import { useAudio } from '@/composables/useAudio'
 import { useToastStore } from '@/stores/toast'
 import { useAppStore } from '@/stores/app'
+import { formatSmartTimestamp, formatTimestampForScreenReader } from '@/utils/time'
 import FileAttachment from './FileAttachment.vue'
 import type { ExtendedMessage, UnsentMessage, FileAttachment as FileAttachmentType } from '@/types'
 
@@ -61,21 +66,30 @@ const hasFileAttachment = computed(() => {
 const fileAttachment = computed((): FileAttachmentType | null => {
   if (!hasFileAttachment.value || !('fileId' in props.message)) return null
   
+  // Check if we have the minimum required file metadata
+  if (!props.message.filePath || !props.message.originalName) {
+    console.warn('File attachment missing metadata:', {
+      fileId: props.message.fileId,
+      filePath: props.message.filePath,
+      originalName: props.message.originalName,
+      fileType: props.message.fileType
+    })
+    return null
+  }
+  
   return {
     id: props.message.fileId!,
     channel_id: props.message.channel_id,
     message_id: props.message.id,
     file_path: props.message.filePath!,
-    file_type: props.message.fileType!,
-    file_size: props.message.fileSize!,
+    file_type: props.message.fileType || 'application/octet-stream',
+    file_size: props.message.fileSize || 0,
     original_name: props.message.originalName!,
     created_at: props.message.fileCreatedAt || props.message.created_at
   }
 })
 
-const formatTime = (timestamp: string): string => {
-  return new Date(timestamp).toLocaleTimeString()
-}
+// formatTime function removed - now using formatSmartTimestamp from utils
 
 // Create comprehensive aria-label for screen readers
 const messageAriaLabel = computed(() => {
@@ -95,8 +109,8 @@ const messageAriaLabel = computed(() => {
   
   // Add timestamp
   if ('created_at' in props.message && props.message.created_at) {
-    const time = formatTime(props.message.created_at)
-    label += `. Sent at ${time}`
+    const time = formatTimestampForScreenReader(props.message.created_at)
+    label += `. Sent ${time}`
   }
   
   // Add status for unsent messages

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

@@ -58,7 +58,7 @@
             {{ result.content }}
           </div>
           <div class="result-time">
-            {{ formatTime(result.created_at) }}
+            {{ formatSmartTimestamp(result.created_at) }}
           </div>
         </div>
       </div>
@@ -79,6 +79,7 @@ import { ref, onMounted } from 'vue'
 import { useAppStore } from '@/stores/app'
 import { useToastStore } from '@/stores/toast'
 import { apiService } from '@/services/api'
+import { formatSmartTimestamp } from '@/utils/time'
 import BaseInput from '@/components/base/BaseInput.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import type { Message, ExtendedMessage } from '@/types'
@@ -140,16 +141,7 @@ const getChannelName = (channelId: number): string => {
   return channel?.name || `Channel ${channelId}`
 }
 
-const formatTime = (timestamp: string): string => {
-  if (!timestamp) return 'Unknown time'
-  
-  const date = new Date(timestamp)
-  if (isNaN(date.getTime())) {
-    return 'Invalid date'
-  }
-  
-  return date.toLocaleString()
-}
+// formatTime function removed - now using formatSmartTimestamp from utils
 
 onMounted(() => {
   searchInput.value?.focus()