feat: enhance message handling and UI improvements across components

app/pages/operator/reports/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ReportStatus } from '~/types/api'
+import type { Message, ReportStatus } from '~/types/api'
 
 definePageMeta({
   middleware: 'auth',
@@ -16,8 +16,9 @@ if (!reportId) {
   navigateTo('/operator')
 }
 
-const { getReportDetail, getMessages, addMessage } = useReports()
+const { getReportDetail, getMessages, addMessage, flagMessage } = useReports()
 const { getInterventionSummary, updateReportStatus, assignTeam } = useOperator()
+const { user } = useAuth()
 
 // Dati principali
 const { data: reportData, refresh: refreshReport } = await useAsyncData(`op-report-${reportId}`, () => getReportDetail(reportId))
@@ -53,6 +54,7 @@ const isAssigning = ref(false)
 
 // Messaggi
 const isSubmittingMessage = ref(false)
+const isFlaggingMessageId = ref<number | null>(null)
 
 const availableStatuses: { value: ReportStatus, label: string }[] = [
   { value: 'OPEN', label: 'Aperta' },
@@ -123,6 +125,26 @@ const handleSendMessage = async (msgText: string, files: File[]) => {
   }
 }
 
+const canFlagMessage = (message: Message) => {
+  if (!user.value) return false
+  return message.user_id !== user.value.id && message.user_id === report.value?.user_id
+}
+
+const handleFlagMessage = async (message: Message) => {
+  if (!canFlagMessage(message)) return
+
+  isFlaggingMessageId.value = message.id
+  try {
+    await flagMessage(reportId, message.id, {
+      reason: 'Messaggio segnalato da operatore responsabile per verifica moderazione',
+    })
+  } catch (e) {
+    console.error('Failed to flag message', e)
+  } finally {
+    isFlaggingMessageId.value = null
+  }
+}
+
 const formatDate = (dateString: string) => {
   if (!dateString) return '-'
   return new Date(dateString).toLocaleDateString('it-IT', {
@@ -220,7 +242,12 @@ const formatDate = (dateString: string) => {
                 </div>
                 <span class="badge bg-light text-dark border">{{ messages.length }} messaggi</span>
               </div>
-              <MessageList :messages="messages" />
+              <MessageList
+                :messages="messages"
+                :can-flag-message="canFlagMessage"
+                :is-flagging-message-id="isFlaggingMessageId"
+                @flag="handleFlagMessage"
+              />
               <MessageComposer @send="handleSendMessage" />
             </div>
           </div>
@@ -347,7 +374,7 @@ const formatDate = (dateString: string) => {
 
 <style scoped>
 .report-hero {
-  background: linear-gradient(180deg, #f0f6fc 0%, #ffffff 100%);
+  background: #f5f7f9;
   border-bottom: 1px solid #d9e3ee;
 }
 
@@ -376,7 +403,7 @@ const formatDate = (dateString: string) => {
 .report-hero-stats {
   background: #fff;
   border: 1px solid #d9e3ee;
-  border-radius: 8px;
+  border-radius: 4px;
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -410,9 +437,9 @@ const formatDate = (dateString: string) => {
 }
 
 .report-description {
-  background: #f7fafc;
+  background: #f5f7f9;
   border: 1px solid #e4ebf1;
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 1rem;
 }