Update useActions

src/components/App.vue

@@ -251,6 +251,7 @@ registerActions([
 		id: 'reset-zoom',
 		label: 'Reset Zoom',
 		icon: 'zoom_out_map',
+		input: 'esc',
 		perform() {
 			viewTransform.value = initialViewTransform.value
 		},
@@ -283,6 +284,7 @@ registerActions([
 	{
 		id: 'open-project',
 		label: 'Open Project',
+		icon: 'file_open',
 		async perform() {
 			const handles = await window.showOpenFilePicker(filePickerOptions)
 
@@ -296,6 +298,7 @@ registerActions([
 	{
 		id: 'save-project',
 		label: 'Save Project',
+		icon: 'save',
 		async perform() {
 			if (!fileHandle.value) {
 				fileHandle.value = await window.showSaveFilePicker(filePickerOptions)

src/tweeq/CommandPalette/CommandPalette.vue

@@ -3,12 +3,10 @@ import * as Bndr from 'bndr-js'
 import {search} from 'fast-fuzzy'
 import {computed, ref, watch} from 'vue'
 
-import {type Action, useActions} from '../action'
+import {type Action, useActions} from '../useActions'
 
 const {actions} = useActions()
 
-// console.log(toRaw(actions))
-
 const $popover = ref<HTMLElement | null>(null)
 const searchWord = ref('')
 
@@ -23,7 +21,7 @@ const selectedAction = ref<null | Action>(null)
 watch(filteredActions, () => {
 	if (filteredActions.value.length > 0) {
 		const notFoundInFiltered = !filteredActions.value.includes(
-			selectedAction.value!
+			selectedAction.value as any
 		)
 
 		if (notFoundInFiltered) {
@@ -51,7 +49,7 @@ function onKeydown(e: KeyboardEvent) {
 	}
 
 	if (selectedAction.value && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-		const index = filteredActions.value.indexOf(selectedAction.value)
+		const index = filteredActions.value.indexOf(selectedAction.value as any)
 		const length = filteredActions.value.length
 
 		const move = e.key === 'ArrowDown' ? 1 : -1
@@ -157,3 +155,4 @@ function perform(action: Action) {
 	width 20px
 	font-size 20px
 </style>
+../useAction

src/tweeq/action.ts → src/tweeq/useActions.ts

@@ -1,15 +1,21 @@
+import * as Bndr from 'bndr-js'
 import {inject, InjectionKey, onBeforeUnmount, provide, reactive} from 'vue'
 
 export interface Action {
 	id: string
 	label: string
 	shortLabel?: string
 	icon?: string
-	perform(...args: any): any
+	input?: string
+	perform(): any
 }
 
+const Emitters = new Map<string, Bndr.Emitter>()
+
 const ActionsKey: InjectionKey<Record<string, Action>> = Symbol('tqActions')
 
+const keyboard = Bndr.keyboard()
+
 export function provideActions() {
 	const allActions = reactive<Record<string, Action>>({})
 
@@ -22,22 +28,30 @@ export function provideActions() {
 			}
 
 			allActions[action.id] = action
+
+			if (action.input) {
+				const emitter = keyboard.keydown(action.input)
+				emitter?.on(() => action.perform())
+
+				Emitters.set(action.id, emitter)
+			}
 		}
 
 		onBeforeUnmount(() => {
 			for (const action of actions) {
 				delete allActions[action.id]
+				Emitters.get(action.id)?.dispose()
 			}
 		})
 	}
 
-	function performAction(id: string, ...args: any) {
+	function performAction(id: string) {
 		const action = allActions[id]
 		if (!action) {
 			throw new Error(`Action ${id} is not registered`)
 		}
 
-		action.perform(...args)
+		action.perform()
 	}
 
 	return {registerActions, performAction}

src/tweeq/useTweeq.ts

@@ -1,4 +1,4 @@
-import {provideActions} from './action'
+import {provideActions} from './useActions'
 import {provideAppStorage} from './useAppStorage'
 import {ColorMode, provideTheme} from './useTheme'