feat: enhance message handling and UI improvements across components

app/pages/reports/[id].vue

@@ -8,7 +8,7 @@ useHead({ title: 'Dettaglio Segnalazione - Visione' })
 const runtimeConfig = useRuntimeConfig()
 
 const route = useRoute()
-const { getReportDetail, getMessages, addMessage, addFeedback, flagReport } = useReports()
+const { getReportDetail, getMessages, addMessage, addFeedback } = useReports()
 const { user } = useAuth()
 
 const reportId = Number(route.params.id)
@@ -36,8 +36,6 @@ const isFeedbackOpen = ref(false)
 const feedbackRating = ref(5)
 const feedbackComment = ref('')
 const isSubmittingFeedback = ref(false)
-const flagMessage = ref('')
-const isFlagging = ref(false)
 const selectedMediaIndex = ref(0)
 const isGalleryOpen = ref(false)
 
@@ -76,24 +74,6 @@ const handleSubmitFeedback = async () => {
   }
 }
 
-// Segnala abuso
-const handleFlag = async () => {
-  if (!flagMessage.value.trim()) return
-
-  isFlagging.value = true
-  try {
-    await flagReport(reportId, {
-      reason: flagMessage.value,
-    })
-    flagMessage.value = ''
-    // Mostra messaggio di successo
-  } catch (error) {
-    console.error('Error flagging report:', error)
-  } finally {
-    isFlagging.value = false
-  }
-}
-
 const isOwner = computed(() => report.value?.user_id === user.value?.id)
 const canFeedback = computed(() => report.value?.status === 'RESOLVED' || report.value?.status === 'CLOSED')
 const statusMeta: Record<string, { label: string; tone: string }> = {
@@ -317,27 +297,6 @@ const formatDate = (dateString: string): string => {
               </div>
             </div>
 
-            <div class="card card-bg border-0 shadow-sm">
-              <div class="card-body">
-                <h2 class="h6 mb-3">Segnala abuso</h2>
-                <p class="text-muted small mb-3">Usa questo canale solo per contenuti impropri o uso scorretto del servizio.</p>
-                <textarea
-                  v-model="flagMessage"
-                  class="form-control mb-3"
-                  placeholder="Specifica motivo"
-                  rows="3"
-                />
-                <button
-                  type="button"
-                  class="btn btn-outline-danger w-100"
-                  @click="handleFlag"
-                  :disabled="isFlagging || !flagMessage.trim()"
-                >
-                  <BIIcon name="it-flag" size="xs" class="me-1" />
-                  Invia segnalazione
-                </button>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -352,7 +311,7 @@ const formatDate = (dateString: string): string => {
 
 <style scoped>
 .report-hero {
-  background: linear-gradient(180deg, #f0f6fc 0%, #ffffff 100%);
+  background: #f5f7f9;
   border-bottom: 1px solid #d9e3ee;
 }
 
@@ -381,7 +340,7 @@ const formatDate = (dateString: string): 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));
@@ -415,9 +374,9 @@ const formatDate = (dateString: string): string => {
 }
 
 .report-description {
-  background: #f7fafc;
+  background: #f5f7f9;
   border: 1px solid #e4ebf1;
-  border-radius: 8px;
+  border-radius: 4px;
   padding: 1rem;
 }
 
@@ -501,4 +460,3 @@ const formatDate = (dateString: string): string => {
 
 
 
-