Various fixes

frontend/package.json

@@ -42,7 +42,7 @@
     "vue-router": "^4.4.0",
     "vue3-apexcharts": "^1.5.3",
     "vue3-gettext": "^3.0.0-beta.6",
-    "vuetify": "^3.6.12"
+    "vuetify": "^3.8.3"
   },
   "devDependencies": {
     "@vitejs/plugin-basic-ssl": "^1.1.0",
@@ -53,7 +53,7 @@
     "prettier": "^3.3.2",
     "sass": "1.77.1",
     "unplugin-fonts": "^1.0.3",
-    "vite": "^5.4.18",
+    "vite": "^6.3.4",
     "vite-plugin-vuetify": "^2.0.3"
   }
 }

frontend/src/components/webmail/ContactCard.vue

@@ -36,7 +36,6 @@ import { useGettext } from 'vue3-gettext'
 import { useBusStore } from '@/stores'
 import contactsApi from '@/api/contacts'
 
-const emit = defineEmits(['contact-added'])
 const model = defineModel()
 
 const router = useRouter()
@@ -51,15 +50,17 @@ const addContact = async () => {
   }
   if (model.value.name) {
     body.display_name = model.value.name
+  } else {
+    body.display_name = model.value.address
   }
   working.value = true
   let resp
   try {
     resp = await contactsApi.createContact(body)
+    model.value.contact_id = resp.data.pk
   } finally {
     working.value = false
   }
-  emit('contact-added', resp.data)
   displayNotification({ msg: $gettext('Contact added to address book') })
 }
 

frontend/src/views/webmail/EmailView.vue

@@ -86,7 +86,7 @@
     <div v-if="email" ref="headers" class="bg-white pa-4">
       <h2>{{ email.subject }}</h2>
       <div class="d-flex mt-2">
-        <v-menu key="sender" open-on-hover>
+        <v-menu key="sender">
           <template #activator="{ props }">
             <h3 v-bind="props">
               <template v-if="email.from_address.name">
@@ -100,32 +100,29 @@
               </template>
             </h3>
           </template>
-          <ContactCard
-            v-model="email.from_address"
-            @contact-added="
-              (contact) => (email.from_address.contact_id = contact.id)
-            "
-          />
+          <ContactCard v-model="email.from_address" />
         </v-menu>
         <v-spacer />
         <span class="text-grey">{{ email.date }}</span>
       </div>
       <div class="mt-2 text-grey">
         {{ $gettext('To') }}
-        <v-menu
-          v-for="(rcpt, index) in recipients"
-          :key="`rcpt-${index}`"
-          open-on-hover
-        >
+        <v-menu v-for="(rcpt, index) in email.to" :key="`to-${index}`">
           <template #activator="{ props }">
             <span v-if="index > 0">, </span>
             <span v-bind="props">{{ rcpt.name || rcpt.address }}</span>
           </template>
-          <ContactCard
-            :model-value="rcpt"
-            @contact-added="(contact) => storeContactId(rcpt, contact)"
-          />
+          <ContactCard v-model="email.to[index]" />
         </v-menu>
+        <template v-if="email.cc?.length">
+          <v-menu v-for="(rcpt, index) in email.cc" :key="`cc-${index}`">
+            <template #activator="{ props }">
+              <span>, </span>
+              <span v-bind="props">{{ rcpt.name || rcpt.address }}</span>
+            </template>
+            <ContactCard v-model="email.cc[index]" />
+          </v-menu>
+        </template>
       </div>
       <div v-if="email.attachments.length" class="mt-2">
         <v-icon icon="mdi-paperclip" />
@@ -162,7 +159,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 import { useBusStore } from '@/stores'
@@ -182,17 +179,6 @@ const loaded = ref(false)
 const showEmailSource = ref(false)
 const working = ref(false)
 
-const recipients = computed(() => {
-  if (!email.value) {
-    return ''
-  }
-  let result = email.value.to
-  if (email.value.cc && email.value.cc.length) {
-    result = result.concat(email.value.cc)
-  }
-  return result
-})
-
 onMounted(() => {
   window.addEventListener('resize', resizeEmailIframe)
   fetchMailContent()