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)

frontend/src/components/DiscussionReplies.vue

@@ -151,7 +151,16 @@ const newReplyResource = createResource({
 })
 
 const mentionUsers = computed(() => {
-	return allUsers.data /* [{
+	console.log(allUsers.data['jannat@frappe.io'])
+	let users = Object.values(allUsers.data).map((user) => {
+		return {
+			value: user.name,
+			label: user.full_name,
+		}
+	})
+	return users
+
+	/* [{
 		label: "jannat",
 		value: "jannat"
 	}, {

frontend/src/components/SidebarLink.vue

@@ -6,7 +6,7 @@
 		@click="handleClick"
 	>
 		<div
-			class="flex items-center duration-300 ease-in-out"
+			class="flex items-center w-full duration-300 ease-in-out"
 			:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
 		>
 			<Tooltip :text="link.label" placement="right">
@@ -29,6 +29,9 @@
 			>
 				{{ link.label }}
 			</span>
+			<span v-if="link.count" class="!ml-auto block text-xs text-gray-600">
+				{{ link.count }}
+			</span>
 		</div>
 	</button>
 </template>