feat: keybinds (WIP)

src/components/widgets/background/Favourite.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import { Star, StarBorder } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
@@ -55,6 +56,16 @@ export default class Favourite extends PureComponent {
       return null;
     }
 
-    return <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>{this.state.favourited}</Tooltip>;
+    const favourite = <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>{this.state.favourited}</Tooltip>;
+
+    if (window.keybinds.favouriteBackground && window.keybinds.favouriteBackground !== '') {
+      return (
+        <Hotkeys keyName={window.keybinds.favouriteBackground} onKeyDown={() => this.favourite()}>
+          {favourite}
+        </Hotkeys>
+      );
+    } else {
+      return favourite;
+    }
   }
 }

src/components/widgets/background/Maximise.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import { Fullscreen } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
@@ -54,10 +55,20 @@ export default class Maximise extends PureComponent {
   }
 
   render() {
-    return (
+    const maximise = (
       <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
         <Fullscreen onClick={this.maximise} className='topicons' />
       </Tooltip>
     );
+
+    if (window.keybinds.maximiseBackground && window.keybinds.maximiseBackground !== '') {
+      return (
+        <Hotkeys keyName={window.keybinds.maximiseBackground} onKeyDown={() => this.maximise()}>
+          {maximise}
+        </Hotkeys>
+      );
+    } else {
+      return maximise;
+    }
   }
 }

src/components/widgets/navbar/Notes.jsx

@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
 import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@material-ui/icons';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
 import { toast } from 'react-toastify';
+import Hotkeys from 'react-hot-keys';
 
 export default class Notes extends PureComponent {
   constructor() {
@@ -49,8 +50,8 @@ export default class Notes extends PureComponent {
   }
 
   render() {
-    return (
-      <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
+    const notes = (
+        <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
         <div className='topbarnotes'>
           <NotesRounded/>
           <h3>{this.language.title}</h3>
@@ -60,5 +61,15 @@ export default class Notes extends PureComponent {
         <button onClick={() => this.copy()} className='copyNote'><FileCopyRounded/></button>
       </span>
     );
+    
+    if (window.keybinds.pinNotes && window.keybinds.pinNotes !== '') {
+      return (
+        <Hotkeys keyName={window.keybinds.pinNotes} onKeyDown={() => this.pin()}>
+          {notes}
+        </Hotkeys>
+      );
+    } else {
+      return notes;
+    }
   }
 }