starting keyboard shortcuts and all

packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx

@@ -4,13 +4,13 @@ import { GlobalHotKeys, KeyMap, configure } from "react-hotkeys";
 import { selectedPriorityConvoAtom } from "../../recoil/main";
 import { useSetRecoilState } from "recoil";
 
-configure({
-  ignoreTags: [],
-});
-
 export default function KeyboardShortcutHandler() {
   const router = useRouter();
 
+  configure({
+    ignoreTags: [],
+  });
+
   const setSelectedPriorityConvo = useSetRecoilState(selectedPriorityConvoAtom);
 
   const handleEscape = () => {

packages/web/components/MainTabsOrPages/Priority.tsx

@@ -13,7 +13,7 @@ import {
   selectedPriorityConvoAtom,
 } from "../../recoil/main";
 import PriorityConvoRow from "../Conversations/PriorityConvoRow";
-import { GlobalHotKeys, HotKeys } from "react-hotkeys";
+import { configure, GlobalHotKeys, HotKeys, KeyMap } from "react-hotkeys";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 
@@ -62,12 +62,37 @@ export default function Priority() {
     }
   };
 
-  const keyMap = {
+  configure({
+    ignoreTags: ["input", "select", "textarea"],
+  });
+
+  const startRecording = () => {
+    toast.loading("speaking to Patels");
+  };
+
+  const stopRecording = () => {
+    console.log("stop recording");
+    toast.dismiss();
+  };
+
+  const keyMap: KeyMap = {
     SELECT_PRIORITY_CONVO: ["1", "2", "3", "4", "5", "6", "7", "8"],
+    START_RECORDING: {
+      name: "START RECORDING",
+      sequence: "r",
+      action: "keydown",
+    },
+    STOP_RECORDING: {
+      name: "STOP RECORDING",
+      sequence: "r",
+      action: "keyup",
+    },
   };
 
   const handlers = {
     SELECT_PRIORITY_CONVO: selectingPriorityConvoHandler,
+    START_RECORDING: startRecording,
+    STOP_RECORDING: stopRecording,
   };
 
   return (

packages/web/components/MainTabsOrPages/Sidebar.tsx

@@ -165,10 +165,10 @@ function Sidebar() {
           />
 
           <span className="text-md text-slate-400 font-semibold group-hover:text-slate-600">
-            Drawer
+            Drawer{" "}
           </span>
 
-          <span className="text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
+          <span className="ml-2 text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
             <HiSpeakerphone />
             <span>new</span>
           </span>