From a662b5abc027b31744f9e9ea8883efd6c8af04b6 Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarmstrong95@proton.me>
Date: Sat, 12 Oct 2024 15:51:08 -0400
Subject: [PATCH] feat(notes): make basic hotkeys work

works on delete, backspace, and export
---
 src/components/NoteCard.tsx | 43 ++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx
index ff18c7b..42922c8 100644
--- a/src/components/NoteCard.tsx
+++ b/src/components/NoteCard.tsx
@@ -1,4 +1,4 @@
-import { signal, useRef } from "kaioken"
+import { signal, useCallback, useEffect, useRef } from "kaioken"
 import { NotesSigal, focusedItem } from "../signals"
 import { useDebounce } from "../utils/useDebounce"
 import notes, { NoteCardType } from "../signals/notes"
@@ -111,10 +111,14 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
     focusedItem.value = itemKey
   }
 
-  function _handleExportClick(_e: MouseEvent) {
+  function _exportFile() {
     createFileAndExport("Note", item.contents, "text/markdown")
   }
 
+  function _handleExportClick(_e: MouseEvent) {
+    _exportFile()
+  }
+
   function _handleMouseClick(e: MouseEvent) {
     e.preventDefault()
     openContextMenu.value = !openContextMenu.value
@@ -124,6 +128,39 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
     openContextMenu.value = false
   }
 
+  const _handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (!e.ctrlKey) return
+
+    // TODO: add support for other os
+    // TODO: add modal popup 
+
+    switch (e.key) {
+      case 'Delete':
+        e.preventDefault()
+        _handleClose(e)
+        break
+      case 'Backspace':
+        e.preventDefault()
+        _handleClose(e)
+        break
+      case 'e':
+        e.preventDefault()
+        _exportFile()
+        break
+      default:
+        break
+    }
+  }, [itemKey, item.position, NotesSigal.default])
+
+  useEffect(() => {
+    if (focusedItem.value !== itemKey) return
+    window.addEventListener('keydown', _handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', _handleKeyDown)
+    }
+
+  }, [focusedItem.value, itemKey])
+
   const cardPositionStyle = {
     zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
     width: `${item.dimensions.w}px`,
@@ -198,7 +235,6 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
         </div>
       </ContextMenuPortal>
     </div >
-
   )
 }
 
@@ -228,3 +264,4 @@ function ExpandIcon({ cb }: {
   )
 }
 
+