feat: notification on mentions

frontend/src/components/AppSidebar.vue

@@ -10,7 +10,7 @@
 			<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
 			<div class="flex flex-col overflow-y-auto">
 				<SidebarLink
-					v-for="link in links"
+					v-for="link in sidebarLinks"
 					:link="link"
 					:isCollapsed="isSidebarCollapsed"
 					class="mx-2 my-0.5"
@@ -42,22 +42,53 @@ import UserDropdown from '@/components/UserDropdown.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref, onMounted, inject, computed } from 'vue'
 import { getSidebarLinks } from '../utils'
 import { sessionStore } from '@/stores/session'
 import { Bell } from 'lucide-vue-next'
+import { createResource } from 'frappe-ui'
 
 const { user } = sessionStore()
-const links = getSidebarLinks()
+const socket = inject('$socket')
+const unreadCount = ref(0)
 
-if (user) {
-	links.push({
-		label: 'Notifications',
-		icon: Bell,
-		to: 'Notifications',
-		activeFor: ['Notifications'],
+onMounted(() => {
+	socket.on('publish_lms_notifications', (data) => {
+		unreadNotifications.reload()
 	})
-}
+})
+
+const unreadNotifications = createResource({
+	cache: 'Unread Notifications Count',
+	url: 'frappe.client.get_count',
+	makeParams(values) {
+		return {
+			doctype: 'Notification Log',
+			filters: {
+				for_user: user,
+				read: 0,
+			},
+		}
+	},
+	onSuccess(data) {
+		unreadCount.value = data
+	},
+	auto: true,
+})
+
+const sidebarLinks = computed(() => {
+	const links = getSidebarLinks()
+	if (user) {
+		links.push({
+			label: 'Notifications',
+			icon: Bell,
+			to: 'Notifications',
+			activeFor: ['Notifications'],
+			count: unreadCount.value,
+		})
+	}
+	return links
+})
 
 const getSidebarFromStorage = () => {
 	return useStorage('sidebar_is_collapsed', false)