feat: add unread notifications feature and enhance notification display

app/pages/notifications.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { Notification } from '~/types/api'
+
 definePageMeta({
   middleware: 'auth',
 })
 
 useHead({ title: 'Notifiche - Visione' })
 
-const { fetchNotifications, markNotificationRead } = useAuth()
+const { fetchNotifications, markNotificationRead, refreshUnreadNotifications } = useAuth()
 const router = useRouter()
 
 const page = ref(1)
@@ -13,27 +15,25 @@ const perPage = ref(15)
 
 const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
     'notifications',
-    () => fetchNotifications({ page: page.value, per_page: perPage.value })
+    () => fetchNotifications({ page: page.value, per_page: perPage.value }),
+    { watch: [page] }
 )
 
-const notifications = computed(() => notificationsData.value?.notifications || [])
+const notifications = computed<Notification[]>(() => notificationsData.value?.notifications || [])
 const totalNotifications = computed(() => notificationsData.value?.notifications?.length || 0)
-const unreadCount = computed(() => notifications.value.filter((n: any) => !n.read_at).length)
-
-const handlePageChange = (newPage: number) => {
-  page.value = newPage
-}
+const unreadCount = computed(() => notifications.value.filter((notification) => !notification.read_at).length)
 
 const handleMarkAsRead = async (notificationId: number) => {
   try {
     await markNotificationRead(notificationId)
     await refreshNotifications()
+    await refreshUnreadNotifications()
   } catch (error) {
     console.error('Error marking notification as read:', error)
   }
 }
 
-const handleNotificationClick = async (notification: any) => {
+const handleNotificationClick = async (notification: Notification) => {
   if (!notification.read_at) {
     await handleMarkAsRead(notification.id)
   }
@@ -111,73 +111,71 @@ const getNotificationColor = (type: string): string => {
     <div class="container mb-5">
       <div class="row">
         <div class="col-12 col-lg-10 offset-lg-1">
-
-          <div class="d-flex gap-2 mb-4">
-            <button class="btn btn-sm btn-outline-primary active">Tutti</button>
-            <button class="btn btn-sm btn-outline-secondary">Solo non letti</button>
+          <div v-if="notifications.length === 0" class="card card-bg border-0 shadow-sm">
+            <div class="card-body py-5 text-center">
+              <BIIcon name="it-bell" size="lg" color="secondary" class="mb-3 d-block mx-auto" />
+              <h2 class="h5 mb-2">Nessuna notifica</h2>
+              <p class="text-muted mb-3">Quando arriveranno aggiornamenti sulle tue segnalazioni, li troverai qui.</p>
+              <NuxtLink to="/reports" class="btn btn-outline-primary btn-sm">
+                Vai alle segnalazioni
+              </NuxtLink>
+            </div>
           </div>
 
-          <div v-if="notifications.length === 0" class="text-center py-5">
-            <BIIcon name="it-bell" size="xl" color="info" class="mb-3 d-block" />
-            <h6 class="text-muted">Nessuna notifica</h6>
-            <p class="small text-muted">Quando riceverai nuovi aggiornamenti sulle tue segnalazioni, appariranno qui.</p>
-          </div>
-
-          <div v-else class="list-group">
-            <button
-              v-for="notification in notifications"
-              :key="notification.id"
-              type="button"
-              class="list-group-item list-group-item-action border-0 p-3 mb-3 rounded-2"
-              :class="{
-                'bg-light': !notification.read_at,
-                'bg-white': notification.read_at,
-              }"
-              @click="handleNotificationClick(notification)"
-            >
-              <div class="d-flex align-items-start gap-3">
-                <div class="flex-shrink-0 mt-1">
-                  <div class="rounded-circle p-2" :class="`bg-${getNotificationColor(notification.type)}`" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
-                    <BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
-                  </div>
-                </div>
-
-                <div class="flex-grow-1">
-                  <div class="d-flex align-items-start justify-content-between">
-                    <div>
-                      <h6 class="mb-1 font-weight-bold" :class="{ 'text-dark': !notification.read_at }">
-                        {{ notification.title }}
-                      </h6>
-                      <p class="mb-1 small" :class="{ 'text-muted': notification.read_at }">
-                        {{ notification.body }}
-                      </p>
-                      <small class="text-muted">
-                        {{ formatDate(notification.created_at) }}
-                      </small>
-                    </div>
-
-                    <div v-if="!notification.read_at" class="flex-shrink-0">
-                      <span class="badge bg-primary rounded-pill">Nuovo</span>
-                    </div>
-                  </div>
-
-                  <div v-if="notification.report_id" class="mt-2 d-flex gap-2">
-                    <NuxtLink :to="`/reports/${notification.report_id}`" class="btn btn-sm btn-outline-primary">
-                      <BIIcon name="it-arrow-right" size="xs" class="me-1" />
-                      Vedi segnalazione
-                    </NuxtLink>
-                    <button
-                      v-if="!notification.read_at"
-                      type="button"
-                      class="btn btn-sm btn-outline-secondary"
-                      @click.stop="handleMarkAsRead(notification.id)"
+          <div v-else class="card card-bg border-0 shadow-sm">
+            <div class="card-body p-0">
+              <div
+                v-for="notification in notifications"
+                :key="notification.id"
+                class="notification-row p-3"
+                :class="{ 'notification-row-unread': !notification.read_at }"
+              >
+                <div class="d-flex align-items-start gap-3">
+                  <div class="flex-shrink-0 mt-1">
+                    <div
+                      class="rounded-circle d-flex align-items-center justify-content-center notification-icon"
+                      :class="`bg-${getNotificationColor(notification.type)}`"
                     >
-                      Segna come letta
-                    </button>
+                      <BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
+                    </div>
+                  </div>
+
+                  <div class="flex-grow-1">
+                    <div class="d-flex flex-wrap justify-content-between gap-2">
+                      <div>
+                        <h2 class="h6 mb-1">{{ notification.title }}</h2>
+                        <p class="mb-1 text-muted">{{ notification.body }}</p>
+                        <small class="text-muted">{{ formatDate(notification.created_at) }}</small>
+                      </div>
+                      <div v-if="!notification.read_at" class="flex-shrink-0">
+                        <span class="badge bg-primary">Nuovo</span>
+                      </div>
+                    </div>
+
+                    <div class="mt-3 d-flex flex-wrap gap-2">
+                      <button
+                        type="button"
+                        class="btn btn-outline-primary btn-sm"
+                        @click="handleNotificationClick(notification)"
+                      >
+                        Apri notifica
+                      </button>
+                      <NuxtLink v-if="notification.report_id" :to="`/reports/${notification.report_id}`" class="btn btn-outline-primary btn-sm">
+                        Vedi segnalazione
+                      </NuxtLink>
+                      <button
+                        v-if="!notification.read_at"
+                        type="button"
+                        class="btn btn-outline-secondary btn-sm"
+                        @click.stop="handleMarkAsRead(notification.id)"
+                      >
+                        Segna come letta
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
-            </button>
+            </div>
           </div>
 
           <Pagination
@@ -185,7 +183,7 @@ const getNotificationColor = (type: string): string => {
             :current-page="page"
             :per-page="perPage"
             :total-items="totalNotifications"
-            @page-change="handlePageChange"
+            @page-change="page = $event"
           />
 
         </div>
@@ -196,23 +194,17 @@ const getNotificationColor = (type: string): string => {
 </template>
 
 <style scoped>
-.list-group-item {
-  border: 1px solid #e9ecef;
-  transition: all 0.2s ease;
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transform: translateY(-1px);
-  }
-
-  &.bg-light {
-    border-left: 4px solid #006f9d;
-  }
+.notification-row + .notification-row {
+  border-top: 1px solid #e9ecef;
 }
 
-.rounded-2 {
-  border-radius: 0.5rem;
+.notification-row-unread {
+  border-left: 4px solid #0066cc;
+  background: #f8fbff;
+}
+
+.notification-icon {
+  width: 40px;
+  height: 40px;
 }
 </style>
-