make SLA badges react to prop changes and hide draft label on open conversation

frontend/apps/main/src/composables/useSla.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { calculateSla } from '../utils/sla'
 
 export function useSla (dueAt, actualAt) {
@@ -10,6 +10,7 @@ export function useSla (dueAt, actualAt) {
         }
         sla.value = calculateSla(dueAt.value, actualAt.value)
     }
+    watch([dueAt, actualAt], updateSla)
     onMounted(() => {
         updateSla()
         // Update the SLA every 30 seconds.

frontend/apps/main/src/features/conversation/list/ConversationListItem.vue

@@ -87,7 +87,7 @@
                 <template v-if="isTyping">
                   <span class="italic text-primary">{{ $t('globals.terms.typing') }}</span>
                 </template>
-                <template v-else-if="hasDraftForConversation">
+                <template v-else-if="hasDraftForConversation && !isCurrent">
                   <span class="font-medium text-primary">{{ $t('globals.terms.draft') }}:</span>
                   {{ draftPreview }}
                 </template>
@@ -116,7 +116,6 @@
                 :label="'FRD'"
                 :showExtra="false"
                 @status="frdStatus = $event"
-                :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
               />
               <SlaBadge
                 v-show="rdStatus === 'overdue' || rdStatus === 'remaining'"
@@ -125,7 +124,6 @@
                 :label="'RD'"
                 :showExtra="false"
                 @status="rdStatus = $event"
-                :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
               />
               <SlaBadge
                 v-show="nrdStatus === 'overdue' || nrdStatus === 'remaining'"
@@ -134,7 +132,6 @@
                 :label="'NRD'"
                 :showExtra="false"
                 @status="nrdStatus = $event"
-                :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
               />
             </div>
           </div>

frontend/apps/main/src/features/sla/SlaBadge.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { toRef, watch } from 'vue'
 import { useSla } from '../../composables/useSla'
 import { AlertCircle, CheckCircle, Clock } from 'lucide-vue-next'
 const props = defineProps({
@@ -38,7 +38,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['status'])
-let sla = useSla(ref(props.dueAt), ref(props.actualAt))
+let sla = useSla(toRef(props, 'dueAt'), toRef(props, 'actualAt'))
 
 // Watch for status change and emit
 watch(