feat: launch command palette

frontend/components.d.ts

@@ -42,6 +42,7 @@ declare module 'vue' {
     CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
     CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
     ColorSwatches: typeof import('./src/components/Controls/ColorSwatches.vue')['default']
+    CommandPalette: typeof import('./src/components/CommandPalette/CommandPalette.vue')['default']
     ContactUsEmail: typeof import('./src/components/ContactUsEmail.vue')['default']
     CouponDetails: typeof import('./src/components/Settings/Coupons/CouponDetails.vue')['default']
     CouponItems: typeof import('./src/components/Settings/Coupons/CouponItems.vue')['default']

frontend/src/components/AppSidebar.vue

@@ -173,6 +173,7 @@
 			:currentStep="currentStep"
 		/>
 	</div>
+	<CommandPalette v-model="settingsStore.isCommandPaletteOpen" />
 	<PageModal
 		v-model="showPageModal"
 		v-model:reloadSidebar="sidebarSettings"
@@ -181,19 +182,6 @@
 </template>
 
 <script setup>
-import UserDropdown from '@/components/UserDropdown.vue'
-import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
-import SidebarLink from '@/components/SidebarLink.vue'
-import {
-	ref,
-	onMounted,
-	inject,
-	watch,
-	reactive,
-	markRaw,
-	h,
-	onUnmounted,
-} from 'vue'
 import { getSidebarLinks } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { sessionStore } from '@/stores/session'
@@ -204,7 +192,16 @@ import PageModal from '@/components/Modals/PageModal.vue'
 import { capture } from '@/telemetry'
 import LMSLogo from '@/components/Icons/LMSLogo.vue'
 import { useRouter } from 'vue-router'
-import InviteIcon from './Icons/InviteIcon.vue'
+import {
+	ref,
+	onMounted,
+	inject,
+	watch,
+	reactive,
+	markRaw,
+	h,
+	onUnmounted,
+} from 'vue'
 import {
 	BookOpen,
 	CircleAlert,
@@ -217,7 +214,6 @@ import {
 	Users,
 	BookText,
 	Zap,
-	Check,
 } from 'lucide-vue-next'
 import {
 	TrialBanner,
@@ -228,6 +224,11 @@ import {
 	minimize,
 	IntermediateStepModal,
 } from 'frappe-ui/frappe'
+import InviteIcon from './Icons/InviteIcon.vue'
+import UserDropdown from '@/components/UserDropdown.vue'
+import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import CommandPalette from '@/components/CommandPalette/CommandPalette.vue'
 
 const { user } = sessionStore()
 const { userResource } = usersStore()
@@ -258,6 +259,7 @@ onMounted(() => {
 	addNotifications()
 	setSidebarLinks()
 	setUpOnboarding()
+	addKeyboardShortcut()
 	socket.on('publish_lms_notifications', (data) => {
 		unreadNotifications.reload()
 	})
@@ -280,6 +282,23 @@ const setSidebarLinks = () => {
 	)
 }
 
+const addKeyboardShortcut = () => {
+	window.addEventListener('keydown', (e) => {
+		if (
+			e.key === 'k' &&
+			(e.ctrlKey || e.metaKey) &&
+			!e.target.classList.contains('ProseMirror')
+		) {
+			toggleCommandPalette()
+			e.preventDefault()
+		}
+	})
+}
+
+const toggleCommandPalette = () => {
+	settingsStore.isCommandPaletteOpen = !settingsStore.isCommandPaletteOpen
+}
+
 const unreadNotifications = createResource({
 	cache: 'Unread Notifications Count',
 	url: 'frappe.client.get_count',

frontend/src/components/CommandPalette/CommandPalette.vue

@@ -0,0 +1,10 @@
+<template>
+	<Dialog v-model="show">
+		<template #body> Command Palette </template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Dialog } from 'frappe-ui'
+
+const show = defineModel<boolean>({ required: true, default: false })
+</script>

frontend/src/stores/settings.js

@@ -5,6 +5,7 @@ import { sessionStore } from './session'
 
 export const useSettings = defineStore('settings', () => {
 	const isSettingsOpen = ref(false)
+	const isCommandPaletteOpen = ref(false)
 	const activeTab = ref(null)
 
 	const allowGuestAccess = createResource({
@@ -50,6 +51,7 @@ export const useSettings = defineStore('settings', () => {
 
 	return {
 		isSettingsOpen,
+		isCommandPaletteOpen,
 		activeTab,
 		allowGuestAccess,
 		preventSkippingVideos,

frontend/src/utils/index.js

@@ -403,6 +403,11 @@ export function getUserTimezone() {
 
 export function getSidebarLinks() {
 	return [
+		{
+			label: 'Search',
+			icon: 'Search',
+			to: 'Search',
+		},
 		{
 			label: 'Courses',
 			icon: 'BookOpen',