feat: add shortcuts display

view/App.tsx

@@ -6,9 +6,10 @@ import { BottomControlsIsland } from "./BottomControlsIsland";
 import { brushUnavailableHint } from "./canvas/brush";
 import { CanvasViewport } from "./CanvasViewport";
 import { LayersSheet } from "./LayersSheet";
+import { ShortcutsDisplay } from "./ShortcutsDisplay";
 import { ToolOverlay } from "./ToolOverlay";
 import { resolveTransformTargetBounds, selectedTransformTarget } from "@editor/transform-targets";
-import { handleDeleteSelectionKey, handleHistoryKey, keybindEventFromKeyboardEvent } from "@input/index";
+import { handleDeleteSelectionKey, handleHistoryKey, handleToolKey, keybindEventFromKeyboardEvent } from "@input/index";
 import { useAppState } from "./useAppState";
 import { downloadArtboardPng } from "./exportArtboardPng";
 import { useImageImport } from "./useImageImport";
@@ -50,14 +51,23 @@ export function App({ app }: AppProps) {
         return;
       }
 
-      if (event.key.toLowerCase() === "l") {
+      const keybindEvent = keybindEventFromKeyboardEvent(event);
+      const toolConsumed = handleToolKey({ event: keybindEvent, dispatch: app.store.dispatch });
+      if (toolConsumed) {
+        event.preventDefault();
+        return;
+      }
+
+      const key = event.key.toLowerCase();
+
+      if (key === "l") {
         setLayersOpen((open) => !open);
         event.preventDefault();
         return;
       }
 
       const consumed = handleDeleteSelectionKey({
-        event: keybindEventFromKeyboardEvent(event),
+        event: keybindEvent,
         selection: app.store.getState().editor.selection,
         dispatch: app.store.dispatch,
       });
@@ -115,6 +125,9 @@ export function App({ app }: AppProps) {
           dispatch={app.store.dispatch}
         />
       </div>
+      <div className="absolute bottom-4 left-4 z-10">
+        <ShortcutsDisplay />
+      </div>
       <CanvasViewport store={app.store} />
     </main>
   );