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 => {
 
 
 
-

app/pages/reports/new.vue

@@ -10,8 +10,6 @@ useHead({ title: 'Nuova segnalazione - Visione' })
 const router = useRouter()
 const { createReport, uploadMedia } = useReports()
 const { getCategories } = useAdmin()
-const { user } = useAuth()
-
 const { data: categoriesData } = await useAsyncData('categories', () => getCategories())
 const categories = computed(() => categoriesData.value?.categories || [])
 
@@ -67,35 +65,15 @@ const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: F
     </div>
 
     <div class="container my-5">
-      <div class="row g-4">
-        <div class="col-12 col-lg-8">
-          <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
+      <div class="row justify-content-center">
+        <div class="col-12 col-xl-10">
+          <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
             {{ errorMessage }}
             <button type="button" class="btn-close" aria-label="Chiudi" @click="errorMessage = ''"></button>
           </div>
 
           <ReportForm :categories="categories" :is-loading="isLoading" @submit="handleReportSubmit" />
         </div>
-
-        <aside class="col-12 col-lg-4">
-          <div class="card card-bg mb-4">
-            <div class="card-body">
-              <h2 class="h6 card-title mb-3">Account segnalante</h2>
-              <p class="mb-1"><strong>{{ user?.first_name }} {{ user?.last_name }}</strong></p>
-              <p class="small text-muted mb-0">{{ user?.email }}</p>
-            </div>
-          </div>
-
-          <div class="callout callout-highlight callout-primary">
-            <div class="callout-title d-flex align-items-center">
-              <BIIcon name="it-info-circle" size="sm" color="primary" class="me-2" />
-              Privacy
-            </div>
-            <p>
-              I tuoi dati personali non saranno pubblicati. Gli operatori li useranno solo per gestire la segnalazione.
-            </p>
-          </div>
-        </aside>
       </div>
     </div>
   </div>