feat(auth): integrate codice-fiscale-js for fiscal code validation in registration

app/components/MessageList.vue

@@ -28,6 +28,9 @@ const formatDate = (dateString: string): string => {
 const auth = useAuth()
 
 const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userId
+
+const senderInitials = (msg: Message): string =>
+  `${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
 </script>
 
 <template>
@@ -38,38 +41,46 @@ const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userI
       </div>
     </div>
 
-    <div v-else-if="messages.length === 0" class="alert alert-info text-center" role="alert">
-      Nessun messaggio disponibile. Sii il primo a scrivere!
+    <div v-else-if="messages.length === 0" class="message-empty-state" role="alert">
+      <BIIcon name="it-comment" size="lg" color="primary" class="mb-2" />
+      <strong class="d-block mb-1">Nessun messaggio</strong>
+      <span>Usa chat per aggiornamenti rapidi tra cittadino e operatori.</span>
     </div>
 
     <div v-else class="messages-container">
-      <div 
-        v-for="msg in messages" 
-        :key="msg.id" 
-        class="message-bubble mb-3 d-flex"
-        :class="{ 'justify-content-end': isCurrentUser(msg.user_id), 'justify-content-start': !isCurrentUser(msg.user_id) }"
+      <div
+        v-for="msg in messages"
+        :key="msg.id"
+        class="message-row"
+        :class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
       >
+        <div v-if="!isCurrentUser(msg.user_id)" class="message-avatar" aria-hidden="true">
+          {{ senderInitials(msg) }}
+        </div>
         <div
-          class="message-bubble-content p-3 rounded-3"
+          class="message-bubble-content"
           :class="{
-            'bg-primary text-white': isCurrentUser(msg.user_id),
-            'bg-light border': !isCurrentUser(msg.user_id)
+            'message-bubble-outgoing': isCurrentUser(msg.user_id),
+            'message-bubble-incoming': !isCurrentUser(msg.user_id)
           }"
         >
-          <!-- Nome mittente (solo per messaggi non miei) -->
-          <div v-if="!isCurrentUser(msg.user_id)" class="small font-weight-bold mb-2 text-primary">
+          <div class="message-meta">
+            <span v-if="!isCurrentUser(msg.user_id)" class="message-author">
+              {{ msg.first_name }} {{ msg.last_name }}
+            </span>
+            <span v-else class="message-author">Tu</span>
+            <span class="message-time">
+              {{ formatDate(msg.created_at) }}
+            </span>
+          </div>
+
+          <div v-if="!isCurrentUser(msg.user_id)" class="small font-weight-bold mb-2 text-primary d-none">
             {{ msg.first_name }} {{ msg.last_name }}
           </div>
 
-          <!-- Corpo messaggio -->
-          <div class="message-body" :class="{ 'text-break': true }">
+          <div class="message-body">
             {{ msg.body }}
           </div>
-
-          <!-- Timestamp -->
-          <div class="small mt-2" :class="{ 'text-white-50': isCurrentUser(msg.user_id), 'text-muted': !isCurrentUser(msg.user_id) }">
-            {{ formatDate(msg.created_at) }}
-          </div>
         </div>
       </div>
     </div>
@@ -78,34 +89,99 @@ const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userI
 
 <style scoped>
 .message-list {
-  max-height: 500px;
+  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
+  border: 1px solid #d9e3ee;
+  border-radius: 8px;
+  max-height: 34rem;
   overflow-y: auto;
   padding: 1rem;
-  background-color: #f9f9f9;
-  border-radius: 0.5rem;
-  border: 1px solid #e9ecef;
 }
 
 .messages-container {
   display: flex;
   flex-direction: column;
+  gap: 0.875rem;
 }
 
-.message-bubble {
+.message-empty-state {
+  align-items: center;
+  color: #5c6f82;
   display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 14rem;
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+.message-row {
+  align-items: flex-end;
+  display: flex;
+  gap: 0.75rem;
   justify-content: flex-start;
 }
 
+.message-row.is-current-user {
+  justify-content: flex-end;
+}
+
+.message-avatar {
+  align-items: center;
+  background: #dceeff;
+  border-radius: 999px;
+  color: #17324d;
+  display: inline-flex;
+  flex: 0 0 2.25rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  height: 2.25rem;
+  justify-content: center;
+}
+
 .message-bubble-content {
-  max-width: 75%;
-  word-wrap: break-word;
+  border-radius: 8px;
+  max-width: min(100%, 40rem);
+  padding: 0.875rem 1rem;
+  word-break: break-word;
+}
+
+.message-bubble-incoming {
+  background: #fff;
+  border: 1px solid #d9e3ee;
+  color: #17324d;
+}
+
+.message-bubble-outgoing {
+  background: #06c;
+  color: #fff;
+}
+
+.message-meta {
+  align-items: center;
+  display: flex;
+  font-size: 0.8125rem;
+  gap: 0.75rem;
+  justify-content: space-between;
+  margin-bottom: 0.375rem;
+}
+
+.message-author {
+  font-weight: 700;
+}
+
+.message-time {
+  opacity: 0.78;
+  white-space: nowrap;
 }
 
 .message-body {
-  white-space: pre-wrap;
   line-height: 1.4;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 767.98px) {
+  .message-bubble-content {
+    max-width: calc(100% - 3rem);
+  }
 }
 </style>
-
-
-