many fixes and improvements - rework for modules/ and common/

feat(emailer): add Postmark and Resend providers

frontend/src/views/creators/AboutCreator.vue

@@ -87,16 +87,21 @@
 
         <!-- Contact Information Section -->
         <div v-if="phoneNumber || email" class="contact-info mt-6">
+
           <!-- Phone Number -->
-          <div v-if="phoneNumber" class="contact-item">
-            {{ phoneNumber }}
+          <div v-if="phoneNumber" class="contact-capsule" @click="callPhone">
+              <v-icon :icon="mdiPhone" class="contact-icon" />
+              <span class="contact-text">{{ phoneNumber }}</span>
           </div>
 
           <!-- Email -->
-          <div v-if="email" class="contact-item">
-            {{ email }}
+          <div v-if="email" class="contact-capsule" @click="sendEmail">
+              <v-icon :icon="mdiEmail" class="contact-icon" />
+              <span class="contact-text">{{ email }}</span>
           </div>
+
         </div>
+
       </div>
     </div>
   </div>
@@ -112,12 +117,14 @@ import { buildEmbedUrl, isValidYouTubeUrlOrId, extractVideoId } from '@/utils/yo
 import AlbumEditor from "@/views/creators/AlbumEditor.vue";
 import AlbumView from "@/views/creators/AlbumView.vue";
 import AlbumViewer from './AlbumViewer.vue';
-import { mdiPencil, mdiCheck, mdiClose } from '@mdi/js';
+import { useToast } from 'vue-toastification';
+import { mdiPencil, mdiCheck, mdiClose, mdiPhone, mdiEmail } from '@mdi/js';
 
 const { t } = useI18n();
 const creatorProfileStore = useCreatorProfileStore();
 const brandingStore = useBrandingStore();
 const client = useClient();
+const toast = useToast();
 
 const isLoading = ref(true);
 const isSaving = ref(false);
@@ -143,6 +150,21 @@ const editableVideoUrl = ref("");
 const videoUrlError = ref("");
 const descriptionError = ref("");
 
+function callPhone() {
+    if (phoneNumber.value) {
+        toast.info('Calling your contact');
+        // Remove formatting and create tel: link
+        const cleanPhone = phoneNumber.value.replace(/\D/g, '');
+        window.location.href = `tel:+1${cleanPhone}`;
+    }
+}
+
+function sendEmail() {
+    if (email.value) {
+        window.location.href = `mailto:${email.value}`;
+    }
+}
+
 // Computed property to check if we can save
 const canSave = computed(() => {
   if (isSaving.value == true) { return false; }
@@ -400,11 +422,13 @@ function cancelEdit() {
   // Désactiver le mode édition
   isEditMode.value = false;
 }
+
 // Add this function to handle photo clicks
 function handlePhotoClick(index) {
   selectedPhotoIndex.value = index;
   showAlbumViewer.value = true;
 }
+
 </script>
 
 <style scoped>
@@ -446,12 +470,27 @@ function handlePhotoClick(index) {
 }
 
 .contact-info {
-  @apply text-lg text-justify whitespace-pre-line;
-  @apply flex flex-col items-center;
+    @apply flex flex-col items-center gap-3;
 }
 
-.contact-item {
-  @apply text-lg text-center mb-2;
+.contact-capsule {
+    @apply flex items-center gap-2 px-2 py-1 bg-hSurface ;
+    @apply rounded-xl cursor-pointer transition-all duration-200;
+    @apply hover:shadow-md min-w-fit;
+    @apply border border-hutopyPrimary;
+}
+
+.contact-capsule:hover {
+    @apply transform scale-105;
+}
+
+.contact-icon {
+    @apply text-hutopyPrimary;
+    @apply text-xl
+}
+
+.contact-text {
+    @apply text-hOnSurface font-medium text-base;
 }
 
 /* Formatting styles for description */