feat: popup laptop on closed laptop notification

modules/notifications/client.lua

@@ -0,0 +1,50 @@
+local inventory = require 'bridge.inventory'
+
+---@type boolean
+local doNotDisturb = false
+
+---@type number
+local lastNotificationSound = 0
+
+---@type string | nil
+local item = lib.callback.await('fd_laptop:laptopItem', false)
+
+---@param data Notification
+local function sendNotification(data)
+    if not data then return end
+    if not data.summary then return end
+    if not data.detail then return end
+
+    if doNotDisturb then
+        return
+    end
+
+    if not inventory.hasItem(item, nil) then
+        return
+    end
+
+    if GetGameTimer() - lastNotificationSound >= 5000 then
+        PlaySoundFrontend(-1, "Text_Arrive_Tone", "Phone_SoundSet_Default", true)
+        lastNotificationSound = GetGameTimer() + 5000
+    end
+
+    SendNUIMessage({
+        action = 'newNotification',
+        data = {
+            summary = data.summary,
+            detail = data.detail
+        }
+    })
+end
+exports('sendNotification', sendNotification)
+
+RegisterNUICallback('setDoNotDisturb', function(data, cb)
+    doNotDisturb = data.doNotDisturb
+
+    cb(1)
+end)
+
+RegisterNetEvent('fd_laptop:server:playerUnloaded', function()
+    doNotDisturb = false
+    lastNotificationSound = 0
+end)

web/src/App.vue

@@ -2,6 +2,7 @@
 import { defineAsyncComponent, onMounted } from 'vue'
 import { useDevelopment } from './stores/development.store'
 import { useLaptop } from './stores/laptop.store'
+import { useNotifications } from './stores/notifications.store'
 
 const Laptop = defineAsyncComponent(() => import('./components/Laptop.vue'))
 const DevelopmentToolbar = defineAsyncComponent(
@@ -10,6 +11,7 @@ const DevelopmentToolbar = defineAsyncComponent(
 
 const dev = useDevelopment()
 const laptop = useLaptop()
+const notif = useNotifications()
 
 onMounted(() => {
   if (dev.isDevEnv) {
@@ -21,6 +23,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <Laptop v-show="laptop.isOpen" />
+  <Laptop v-show="laptop.isOpen || notif.shouldBeShown" />
   <DevelopmentToolbar v-if="dev.isDevEnv" />
 </template>

web/src/components/overlays/NotificationsOverlay.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useNotifications } from '../../stores/notifications.store'
 import { onClickOutside, useTimeAgo } from '@vueuse/core'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 //@ts-ignore
 import Toast from '../../services/toast/Toast.vue'
 import { useApplications } from '../../stores/apps.store'
@@ -30,10 +30,26 @@ const openSettings = () => {
   emit('close')
   apps.open('settings', { tab: 'notifications' })
 }
+
+const styles = computed(() => {
+  if (!notif.shouldBeShown) return {}
+
+  return {
+    root: {
+      style: 'width: 80%'
+    }
+  }
+})
 </script>
 <template>
   <Teleport to="#laptop" defer>
-    <Toast position="bottom-right" group="headless" to="#laptop" v-show="!isOpen">
+    <Toast
+      :position="notif.shouldBeShown ? 'top-center' : 'bottom-right'"
+      group="headless"
+      to="#laptop"
+      v-show="!isOpen"
+      :pt="styles"
+    >
       <template #container="{ message, closeCallback }">
         <div
           class="block space-y-1 rounded bg-white/50 p-3 text-sm backdrop-blur-xl hover:bg-white/25 active:bg-white/50 dark:bg-black/30 dark:hover:bg-black/50 dark:active:bg-black/30"

web/src/services/toast/Toast.vue

@@ -39,6 +39,8 @@ import { UniqueComponentId } from '@primevue/core/utils'
 import ToastEventBus from '../toasteventbus'
 import BaseToast from './BaseToast.vue'
 import ToastMessage from './ToastMessage.vue'
+import { mapStores } from 'pinia'
+import { useNotifications } from '../../stores/notifications.store'
 
 var messageIdx = 0
 
@@ -81,6 +83,11 @@ export default {
         message.id = messageIdx++
       }
 
+      if (this.notificationsStore.shouldBeShown) {
+        this.messages = [message]
+        return
+      }
+
       this.messages = [...this.messages, message]
     },
     remove(params) {
@@ -162,6 +169,7 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useNotifications),
     attributeSelector() {
       return UniqueComponentId()
     }

web/src/stores/notifications.store.ts

@@ -3,12 +3,24 @@ import { useToast } from '../services/usetoast'
 import { computed, ref } from 'vue'
 import type { Notification } from '../types/notification.types'
 import { useSettings } from './settings.store'
+import { useLaptop } from './laptop.store'
+import { useNuiEvent } from '../composables/useNuiEvent'
 
 export const useNotifications = defineStore('notifications', () => {
   const settings = useSettings()
   const toast = useToast()
+  const laptop = useLaptop()
+  const hasNewNotification = ref<number>()
   const notifications = ref<Notification[]>([])
 
+  const shouldBeShown = computed(() => {
+    if (laptop.isOpen) return false
+    if (settings.doNotDisturb) return false
+    if (!hasNewNotification.value) return false
+
+    return true
+  })
+
   const show = (data: Omit<Notification, 'time'>) => {
     notifications.value.push({
       summary: data.summary,
@@ -18,6 +30,11 @@ export const useNotifications = defineStore('notifications', () => {
 
     if (settings.doNotDisturb) return
 
+    if (hasNewNotification.value) clearTimeout(hasNewNotification.value)
+    hasNewNotification.value = setTimeout(() => {
+      hasNewNotification.value = undefined
+    }, 4000)
+
     toast.add({
       //@ts-ignore
       severity: 'custom',
@@ -43,7 +60,14 @@ export const useNotifications = defineStore('notifications', () => {
     show,
     clear,
     close,
+    shouldBeShown,
     notifications,
     hasNotifications
   }
 })
+
+useNuiEvent<Notification>('newNotification', (data: Notification) => {
+  const notifications = useNotifications()
+
+  notifications.show(data)
+})

web/src/stores/settings.store.ts

@@ -3,6 +3,8 @@ import { computed, ref, watch } from 'vue'
 import { useDevelopment } from './development.store'
 import { useNuiEvent } from '../composables/useNuiEvent'
 import type { UpdateProfileEvent, UserSettings, UserSettingsEvent } from '../types/settings.types'
+import { useApi } from '../composables/useApi'
+import { watchDebounced } from '@vueuse/core'
 
 export const useSettings = defineStore('settings', () => {
   const development = useDevelopment()
@@ -47,6 +49,22 @@ export const useSettings = defineStore('settings', () => {
     handleDarkModeChange()
   })
 
+  watchDebounced(
+    doNotDisturb,
+    (newValue) => {
+      useApi(
+        'setDoNotDisturb',
+        {
+          method: 'POST',
+          body: JSON.stringify({ doNotDisturb: newValue })
+        },
+        undefined,
+        undefined
+      )
+    },
+    { debounce: 1000 }
+  )
+
   return {
     forApps,
     username,