feat: add unread notifications feature and enhance notification display

app/composables/useAuth.ts

@@ -29,7 +29,10 @@ export const useAuth = () => {
   type UserContext = CurrentUserResponse['user']
   const user = useState<UserContext | null>('auth_user', () => null)
   const isSyncingUser = useState<boolean>('auth_syncing', () => false)
+  const unreadNotifications = useState<number>('auth_unread_notifications', () => 0)
+  const isRefreshingNotifications = useState<boolean>('auth_refreshing_notifications', () => false)
   const isAuthenticated = computed(() => !!(tokenState.value || token.value))
+  const hasUnreadNotifications = computed(() => unreadNotifications.value > 0)
   const isAuthStatusError = (error: any) => {
     const status = error?.statusCode || error?.status || error?.response?.status
     return status === 401 || status === 403
@@ -39,6 +42,24 @@ export const useAuth = () => {
     tokenState.value = newVal || null
   })
 
+  const refreshUnreadNotifications = async () => {
+    if (!(tokenState.value || token.value) || !user.value || isRefreshingNotifications.value) {
+      unreadNotifications.value = user.value ? unreadNotifications.value : 0
+      return
+    }
+
+    isRefreshingNotifications.value = true
+
+    try {
+      const res = await fetchNotifications({ page: 1, per_page: 20 })
+      unreadNotifications.value = (res.notifications || []).filter(notification => !notification.read_at).length
+    } catch (error) {
+      console.error('[Auth] Failed to refresh notifications:', error)
+    } finally {
+      isRefreshingNotifications.value = false
+    }
+  }
+
   const syncUser = async (options: { redirectOnSuccess?: boolean; currentPath?: string } = {}) => {
     const { redirectOnSuccess = false, currentPath } = options
     const tokenVal = tokenState.value || token.value
@@ -49,6 +70,7 @@ export const useAuth = () => {
       const res = await fetchCurrentUser()
       if (res.ok) {
         user.value = res.user
+        await refreshUnreadNotifications()
         const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
 
         if (redirectOnSuccess && path.startsWith('/auth')) {
@@ -79,6 +101,7 @@ export const useAuth = () => {
     token.value = null
     tokenState.value = null
     user.value = null
+    unreadNotifications.value = 0
     nuxtApp.runWithContext(() => navigateTo('/auth/login'))
   }
 
@@ -121,6 +144,9 @@ export const useAuth = () => {
     tokenState,
     isSyncingUser,
     isAuthenticated,
+    unreadNotifications,
+    hasUnreadNotifications,
+    refreshUnreadNotifications,
     handleLoginSuccess,
     syncUser,
     logout,