Merge pull request #86 from LukaszMMazur/main

Implemented keyboard shortcuts
walnuthq · Mar 10, 2024 · b220caa · b220caa
2 parents c25e8e7 + fbaa79d
commit b220caa
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 9 deletions.
diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx
@@ -2,9 +2,9 @@ import { useRef } from 'react'
 
 import { RiLinksLine, RiQuestionLine } from '@remixicon/react'
 import cn from 'classnames'
+import { Priority, useRegisterActions } from 'kbar'
 
 import { Button, Input } from 'components/ui'
-import { Priority, useRegisterActions } from 'kbar'
 
 type EditorControlsProps = {
   isCompileDisabled: boolean
@@ -37,11 +37,24 @@ const EditorControls = ({
       perform: () => {
         onCompileRun()
       },
+      subtitle: 'Run execution',
+      priority: Priority.HIGH,
+    },
+    {
+      id: 'permalink',
+      name: 'Share permalink',
+      shortcut: ['p'],
+      keywords: 'Share permalink',
+      section: 'Execution',
+      perform: () => {
+        onCopyPermalink()
+      },
+      subtitle: 'Copy permalink',
       priority: Priority.HIGH,
     },
   ]
 
-  useRegisterActions(actions, [onCompileRun])
+  useRegisterActions(actions, [onCompileRun, onCopyPermalink])
 
   return (
     <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-x-4 px-4 py-4 md:py-2 md:border-r border-gray-200 dark:border-black-500">
@@ -50,7 +63,7 @@ const EditorControls = ({
           onClick={onCopyPermalink}
           transparent
           padded={false}
-          tooltip="Share permalink"
+          tooltip="Share permalink [p]"
           tooltipId="share-permalink"
         >
           <span className="inline-block mr-4 select-all">

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
@@ -11,6 +11,7 @@ import React, {
 import { decode, encode } from '@kunigi/string-compression'
 import cn from 'classnames'
 import copy from 'copy-to-clipboard'
+import { Priority, useRegisterActions } from 'kbar'
 import { useRouter } from 'next/router'
 import SCEditor from 'react-simple-code-editor'
 
@@ -197,6 +198,46 @@ const Editor = ({ readOnly = false }: Props) => {
 
   const isBytecode = false
 
+  const actions = [
+    {
+      id: 'cairo',
+      name: 'Cairo',
+      shortcut: ['x'],
+      keywords: 'Cairo',
+      section: 'Execution',
+      perform: () => {
+        setCodeType(CodeType.Cairo)
+      },
+      subtitle: 'Switch to Cairo',
+      priority: Priority.HIGH,
+    },
+    {
+      id: 'sierra',
+      name: 'Sierra',
+      shortcut: ['s'],
+      keywords: 'Sierra',
+      section: 'Execution',
+      perform: () => {
+        setCodeType(CodeType.Sierra)
+      },
+      subtitle: 'Switch to Sierra',
+      priority: Priority.HIGH,
+    },
+    {
+      id: 'casm',
+      name: 'Casm',
+      shortcut: ['w'],
+      keywords: 'Casm',
+      section: 'Execution',
+      perform: () => {
+        setCodeType(CodeType.CASM)
+      },
+      subtitle: 'Switch to Casm',
+      priority: Priority.HIGH,
+    },
+  ]
+  useRegisterActions(actions, [highlightCode])
+
   return (
     <>
       <div className="bg-gray-100 dark:bg-black-700 rounded-lg">

diff --git a/components/Tracer/ExecutionStatus.tsx b/components/Tracer/ExecutionStatus.tsx
@@ -45,7 +45,7 @@ const ExecutionStatus = ({
       id: 'continue',
       name: 'Continue',
       shortcut: ['c'],
-      keywords: 'execution continue',
+      keywords: 'Execution continue',
       section: 'Execution',
       perform: () => {
         onContinueExecution()
@@ -70,7 +70,7 @@ const ExecutionStatus = ({
           transparent
           onClick={onStepOut}
           padded={false}
-          tooltip="Step back"
+          tooltip="Step back [b]"
           tooltipId="step1"
         >
           <RiArrowGoBackLine size={16} className="text-indigo-500" />
@@ -79,7 +79,7 @@ const ExecutionStatus = ({
           transparent
           onClick={onStepIn}
           padded={false}
-          tooltip="Step next"
+          tooltip="Step next [n]"
           tooltipId="step2"
         >
           <RiArrowGoForwardLine size={16} className="text-indigo-500" />
@@ -88,7 +88,7 @@ const ExecutionStatus = ({
           transparent
           onClick={onContinueExecution}
           padded={false}
-          tooltip="Continue execution"
+          tooltip="Continue execution [c]"
           tooltipId="continue-execution"
         >
           <RiPlayCircleLine size={16} className="text-indigo-500" />

diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState, useRef, useReducer } from 'react'
 
 import cn from 'classnames'
+import { Priority, useRegisterActions } from 'kbar'
 
 import { CairoVMApiContext, BreakPoints } from 'context/cairoVMApiContext'
 
@@ -130,6 +131,35 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
     }
   }
 
+  const actions = [
+    {
+      id: 'debugInfo',
+      name: 'Debug Info',
+      shortcut: ['d'],
+      keywords: 'Debug info',
+      section: 'Execution',
+      perform: () => {
+        setSelectedConsoleTab(IConsoleTab.DebugInfo)
+      },
+      subtitle: 'Switch to Debug Info',
+      priority: Priority.HIGH,
+    },
+    {
+      id: 'console',
+      name: 'Console',
+      shortcut: ['e'],
+      keywords: 'Console',
+      section: 'Execution',
+      perform: () => {
+        setSelectedConsoleTab(IConsoleTab.Console)
+      },
+      subtitle: 'Switch to Console',
+      priority: Priority.HIGH,
+    },
+  ]
+
+  useRegisterActions(actions, [setSelectedConsoleTab])
+
   return (
     <>
       <div className="flex-grow">
@@ -173,7 +203,7 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
               )}`}
               onClick={() => setSelectedConsoleTab(IConsoleTab.DebugInfo)}
             >
-              Debug Info
+              Debug Info [d]
             </button>
             <button
               onClick={() => setSelectedConsoleTab(IConsoleTab.Console)}
@@ -186,7 +216,7 @@ export const Tracer = ({ mainHeight }: TracerProps) => {
                 },
               )}`}
             >
-              Console
+              Console [e]
             </button>
           </nav>
         </div>