feat: notifications

frontend/src/components/AppSidebar.vue

@@ -44,9 +44,21 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
 import { ref } from 'vue'
 import { getSidebarLinks } from '../utils'
+import { sessionStore } from '@/stores/session'
+import { Bell } from 'lucide-vue-next'
 
+const { user } = sessionStore()
 const links = getSidebarLinks()
 
+if (user) {
+	links.push({
+		label: 'Notifications',
+		icon: Bell,
+		to: 'Notifications',
+		activeFor: ['Notifications'],
+	})
+}
+
 const getSidebarFromStorage = () => {
 	return useStorage('sidebar_is_collapsed', false)
 }

frontend/src/components/DesktopLayout.vue

@@ -5,7 +5,6 @@
 				<div
 					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
 				>
-					<slot name="sidebar" />
 					<AppSidebar />
 				</div>
 				<div class="w-full overflow-auto" id="scrollContainer">

frontend/src/components/DiscussionReplies.vue

@@ -69,9 +69,11 @@
 				/>
 			</div>
 		</div>
+
 		<TextEditor
 			class="mt-5"
 			:content="newReply"
+			:mentions="mentionUsers"
 			@change="(val) => (newReply = val)"
 			placeholder="Type your reply here..."
 			:fixedMenu="true"
@@ -92,13 +94,14 @@ import { createResource, TextEditor, Button, Dropdown } from 'frappe-ui'
 import { timeAgo } from '../utils'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { ChevronLeft, MoreHorizontal } from 'lucide-vue-next'
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, computed } from 'vue'
 import { createToast } from '../utils'
 
 const showTopics = defineModel('showTopics')
 const newReply = ref('')
 const socket = inject('$socket')
 const user = inject('$user')
+const allUsers = inject('$allUsers')
 
 const props = defineProps({
 	topic: {
@@ -147,6 +150,16 @@ const newReplyResource = createResource({
 	},
 })
 
+const mentionUsers = computed(() => {
+	return allUsers.data /* [{
+		label: "jannat",
+		value: "jannat"
+	}, {
+		label: "samreen",
+		value: "samreen"
+	}] */
+})
+
 const postReply = () => {
 	newReplyResource.submit(
 		{},

frontend/src/components/Discussions.vue

@@ -42,14 +42,14 @@
 	</div>
 	<div
 		v-else
-		class="flex items-center justify-center border mt-5 p-5 rounded-md"
+		class="flex flex-col items-center justify-center border-2 border-dashed mt-5 py-8 rounded-md"
 	>
-		<MessageSquareIcon class="w-5 h-5 stroke-1.5 mr-2" />
-		<div>
+		<MessageSquareText class="w-7 h-7 text-gray-500 stroke-1.5 mr-2" />
+		<div class="">
 			<div v-if="emptyStateTitle" class="font-medium mb-2">
 				{{ __(emptyStateTitle) }}
 			</div>
-			<div class="">
+			<div class="text-gray-600">
 				{{ __(emptyStateText) }}
 			</div>
 		</div>
@@ -69,7 +69,7 @@ import { timeAgo } from '../utils'
 import { ref, onMounted, inject } from 'vue'
 import DiscussionReplies from '@/components/DiscussionReplies.vue'
 import DiscussionModal from '@/components/Modals/DiscussionModal.vue'
-import { MessageSquareIcon } from 'lucide-vue-next'
+import { MessageSquareText } from 'lucide-vue-next'
 
 const showTopics = ref(true)
 const currentTopic = ref(null)
@@ -96,7 +96,7 @@ const props = defineProps({
 	},
 	emptyStateText: {
 		type: String,
-		default: 'Be the first to start a discussion',
+		default: 'Start a discussion',
 	},
 	singleThread: {
 		type: Boolean,

frontend/src/components/MobileLayout.vue

@@ -34,7 +34,7 @@ import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/user'
 import { LogOut, LogIn, UserRound } from 'lucide-vue-next'
 
-const { logout, user, username } = sessionStore()
+const { logout, user } = sessionStore()
 let { isLoggedIn } = sessionStore()
 const router = useRouter()
 let { userResource } = usersStore()