feat(notes): add hint to notes so we can see available hotkeys

src/components/NoteCard.tsx

@@ -10,6 +10,7 @@ import { Divider } from "./Divider"
 import { ExportIcon } from "./icons/ExportIcon"
 import { createFileAndExport } from "../utils/createFileAndExport"
 import { ContextMenuPortal } from "./ContextMenuPortal"
+import { HelpIcon } from "./icons/HelpIcon"
 
 namespace NoteCard {
   export interface NoteCardProps {
@@ -28,6 +29,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
   const initialResizeX = useRef(0)
   const initialResizeY = useRef(0)
   const openContextMenu = signal(false)
+  const showHelp = signal(false)
 
   const { debounce } = useDebounce()
 
@@ -128,6 +130,16 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
     openContextMenu.value = false
   }
 
+  function _handleHelpHover() {
+    if (showHelp.value) return
+    showHelp.value = true
+  }
+
+  function _handleHelpOut() {
+    if (!showHelp.value) return
+    showHelp.value = false
+  }
+
   const _handleKeyDown = useCallback((e: KeyboardEvent) => {
     if (!e.ctrlKey) return
 
@@ -174,6 +186,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
   }
 
   return (
+    <>
       <div
         oncontextmenu={_handleMouseClick}
         onmousedown={_handleFocusCard}
@@ -183,8 +196,8 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
         <div className="overflow-hidden flex-1 flex flex-col gap-1">
           {/* Header Bar */}
           <div className="px-2 flex justify-between items-center cursor-move" onmousedown={_handleMouseDown}>
+            <HelpIcon onMouseOver={_handleHelpHover} onMouseOut={_handleHelpOut} />
             <div style={saveIndicatorStyle} className="rounded-full w-1 h-1 dark:bg-white bg-green-500"></div>
-
             <div className="flex gap-2">
               <div
                 onclick={_handleExportClick}
@@ -235,6 +248,23 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
           </div>
         </ContextMenuPortal>
       </div >
+
+      {showHelp.value &&
+        <div
+          className={"text-white absolute bg-[#1c1c1c] rounded-md p-1"}
+          style={{
+            top: `${item.position.y}px`,
+            left: `${item.position.x - 120}px`
+          }}
+        >
+          <div className="flex flex-col text-sm dark:text-[#999] text-black">
+            <small>ctrl + del = delete</small>
+            <small>ctrl + back = delete</small>
+            <small>ctrl + e = export</small>
+          </div>
+        </div>
+      }
+    </>
   )
 }
 

src/components/icons/HelpIcon.tsx

@@ -0,0 +1,35 @@
+namespace HelpIcon {
+  export interface Props {
+    onMouseOver?: () => void
+    onMouseOut?: () => void
+  }
+}
+export function HelpIcon({ onMouseOver, onMouseOut }: HelpIcon.Props) {
+
+  return (
+    <svg
+      onmouseout={onMouseOut}
+      onmouseover={onMouseOver}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className="w-4 h-4 hover:text-blue-500 cursor-pointer"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+      <path
+        d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+      <path
+        d="M12 17h.01"
+      />
+    </svg>)
+}