[UX] Add Keyboard global shortcuts

src/backend/api/misc.ts

@@ -155,3 +155,11 @@ export const getWikiGameInfo = async (
   appName: string,
   runner: Runner
 ) => ipcRenderer.invoke('getWikiGameInfo', title, appName, runner)
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const handleGoToScreen = (callback: any) => {
+  ipcRenderer.on('openScreen', callback)
+  return () => {
+    ipcRenderer.removeListener('openScreen', callback)
+  }
+}

src/backend/main.ts

@@ -19,7 +19,8 @@ import {
   powerSaveBlocker,
   protocol,
   screen,
-  clipboard
+  clipboard,
+  globalShortcut
 } from 'electron'
 import 'backend/updater'
 import { autoUpdater } from 'electron-updater'
@@ -397,6 +398,36 @@ if (!gotTheLock) {
 
     initTrayIcon(mainWindow)
 
+    // hotkey to reload the app
+    globalShortcut.register('CommandOrControl+R', () => {
+      mainWindow.reload()
+    })
+
+    // hotkey to quit the app
+    globalShortcut.register('CommandOrControl+Q', () => {
+      handleExit()
+    })
+
+    // hotkey to open the dev tools
+    globalShortcut.register('CommandOrControl+Shift+I', () => {
+      mainWindow.webContents.openDevTools()
+    })
+
+    // hotkey to open the settings on frontend
+    globalShortcut.register('CommandOrControl+K', () => {
+      sendFrontendMessage('openScreen', '/settings/app/default/general')
+    })
+
+    // hotkey to open the library screen on frontend
+    globalShortcut.register('CommandOrControl+L', () => {
+      sendFrontendMessage('openScreen', '/library')
+    })
+
+    // hotkey to open the downloads screen on frontend
+    globalShortcut.register('CommandOrControl+J', () => {
+      sendFrontendMessage('openScreen', '/download-manager')
+    })
+
     return
   })
 }

src/frontend/components/UI/Sidebar/index.tsx

@@ -7,6 +7,7 @@ import HeroicVersion from './components/HeroicVersion'
 import { DMQueueElement } from 'common/types'
 
 import { ReactComponent as HeroicIcon } from 'frontend/assets/heroic-icon.svg'
+import { useNavigate } from 'react-router-dom'
 
 let sidebarSize = localStorage.getItem('sidebar-width') || 240
 const minWidth = 60
@@ -17,6 +18,8 @@ export default React.memo(function Sidebar() {
   const sidebarEl = useRef<HTMLDivElement | null>(null)
   const [currentDMElement, setCurrentDMElement] = useState<DMQueueElement>()
 
+  const navigate = useNavigate()
+
   useEffect(() => {
     window.api.getDMQueueInformation().then(({ elements }) => {
       setCurrentDMElement(elements[0])
@@ -36,7 +39,7 @@ export default React.memo(function Sidebar() {
   useEffect(() => {
     if (!sidebarEl.current) return
 
-    if (sidebarSize < collapsedWidth) {
+    if (Number(sidebarSize) < collapsedWidth) {
       sidebarEl.current.classList.add('collapsed')
     } else {
       sidebarEl.current.classList.remove('collapsed')
@@ -45,6 +48,13 @@ export default React.memo(function Sidebar() {
     sidebarEl.current.style.setProperty('--sidebar-width', `${sidebarSize}px`)
   }, [sidebarEl])
 
+  useEffect(() => {
+    window.api.handleGoToScreen((e: Event, screen: string) => {
+      // handle navigate to screen
+      navigate(screen, { state: { fromGameCard: false } })
+    })
+  }, [])
+
   const handleDragStart = (e: React.MouseEvent<HTMLDivElement>) => {
     let mouseDragX = e.clientX
     let dragging = true