feat: enhance message handling and UI improvements across components

app/components/MessageList.vue

@@ -4,12 +4,20 @@ import type { Message } from '~/types/api'
 interface Props {
   messages: Message[]
   isLoading?: boolean
+  canFlagMessage?: (message: Message) => boolean
+  isFlaggingMessageId?: number | null
 }
 
 withDefaults(defineProps<Props>(), {
-  isLoading: false
+  isLoading: false,
+  canFlagMessage: () => false,
+  isFlaggingMessageId: null,
 })
 
+const emit = defineEmits<{
+  (e: 'flag', message: Message): void
+}>()
+
 const formatDate = (dateString: string): string => {
   const date = new Date(dateString)
   const today = new Date()
@@ -81,6 +89,19 @@ const senderInitials = (msg: Message): string =>
           <div class="message-body">
             {{ msg.body }}
           </div>
+
+          <div v-if="canFlagMessage(msg)" class="message-actions">
+            <button
+              type="button"
+              class="btn btn-link btn-xs px-0"
+              :disabled="isFlaggingMessageId === msg.id"
+              @click="emit('flag', msg)"
+            >
+              <span v-if="isFlaggingMessageId === msg.id" class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
+              <BIIcon v-else name="it-flag" size="xs" class="me-1" />
+              Segnala messaggio
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -89,9 +110,8 @@ const senderInitials = (msg: Message): string =>
 
 <style scoped>
 .message-list {
-  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
   border: 1px solid #d9e3ee;
-  border-radius: 8px;
+  border-radius: 4px;
   max-height: 34rem;
   overflow-y: auto;
   padding: 1rem;
@@ -127,7 +147,7 @@ const senderInitials = (msg: Message): string =>
 
 .message-avatar {
   align-items: center;
-  background: #dceeff;
+  background: #e6f0fa;
   border-radius: 999px;
   color: #17324d;
   display: inline-flex;
@@ -139,14 +159,14 @@ const senderInitials = (msg: Message): string =>
 }
 
 .message-bubble-content {
-  border-radius: 8px;
+  border-radius: 4px;
   max-width: min(100%, 40rem);
   padding: 0.875rem 1rem;
   word-break: break-word;
 }
 
 .message-bubble-incoming {
-  background: #fff;
+  background: #f5f7f9;
   border: 1px solid #d9e3ee;
   color: #17324d;
 }
@@ -179,6 +199,15 @@ const senderInitials = (msg: Message): string =>
   white-space: pre-wrap;
 }
 
+.message-actions {
+  margin-top: 0.5rem;
+  text-align: right;
+}
+
+.message-actions .btn {
+  font-size: 0.75rem;
+}
+
 @media (max-width: 767.98px) {
   .message-bubble-content {
     max-width: calc(100% - 3rem);