feat: keybinds (WIP)

src/components/modals/main/settings/sections/Keybinds.jsx

@@ -0,0 +1,82 @@
+import { PureComponent } from 'react';
+
+import Checkbox from '../Checkbox';
+
+export default class KeybindSettings extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+    };
+    this.language = window.language.modals.main.settings;
+  }
+
+  listen(type) {
+    let currentKeybinds = this.state.keybinds;
+    currentKeybinds[type] = 'Recording...';
+    this.setState({
+      keybinds: currentKeybinds
+    });
+    this.forceUpdate();
+
+    let keys = '';
+    const keydown = document.addEventListener('keydown', (event) => {
+      if (keys === '') {
+        keys = event.key;
+      } else {
+        keys = `${keys}+${event.key}`;
+      }
+    });
+
+    const keyup = document.addEventListener('keyup', () => {
+      document.removeEventListener('keydown', keydown);
+      let keybinds = this.state.keybinds;
+      keybinds[type] = keys;
+      localStorage.setItem('keybinds', JSON.stringify(keybinds));
+      this.setState({
+        keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+      });
+    });
+
+    document.removeEventListener('keyup', keyup);
+
+    document.querySelector('.reminder-info').style.display = 'block';
+    return localStorage.setItem('showReminder', true);
+  }
+
+  reset(type) {
+    let keybinds = this.state.keybinds;
+    keybinds[type] = '';
+    localStorage.setItem('keybinds', JSON.stringify(keybinds));
+    this.setState({
+      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+    });
+
+    document.querySelector('.reminder-info').style.display = 'block';
+    return localStorage.setItem('showReminder', true);
+  }
+
+  render() {
+    return (
+      <>
+        <h2>Keybinds</h2>
+        <Checkbox name='keybindsEnabled' text='Enabled' element='.other' />
+        <div className='keybind'>
+          <p>Favourite Background</p>
+          <input type='text' onClick={() => this.listen('favouriteBackground')} value={this.state.keybinds['favouriteBackground'] || ''} readOnly/>
+          <span className='modalLink' onClick={() => this.reset('favouriteBackground')}>Reset</span>
+        </div>
+        <div className='keybind'>
+          <p>Maximise Background</p>
+          <input type='text' onClick={() => this.listen('maximiseBackground')} value={this.state.keybinds['maximiseBackground'] || ''} readOnly/>
+          <span className='modalLink' onClick={() => this.reset('maximiseBackground')}>Reset</span>
+        </div>
+        <div className='keybind'>
+          <p>Pin Notes</p>
+          <input type='text' onClick={() => this.listen('pinNotes')} value={this.state.keybinds['pinNotes'] || ''} readOnly/>
+          <span className='modalLink' onClick={() => this.reset('pinNotes')}>Reset</span>
+        </div>
+      </>
+    );
+  }
+}

src/components/modals/main/tabs/Settings.jsx

@@ -15,6 +15,7 @@ import Experimental from '../settings/sections/Experimental';
 import QuickLinks from '../settings/sections/QuickLinks';
 import Weather from '../settings/sections/Weather';
 import Stats from '../settings/sections/Stats';
+import Keybinds from '../settings/sections/Keybinds';
 
 export default function Settings() {
   const { reminder, sections } = window.language.modals.main.settings;
@@ -34,6 +35,7 @@ export default function Settings() {
         <div label={sections.order.title} name='order'><Order/></div>
         <div label={sections.language.title} name='language'><Language/></div>
         <div label={sections.advanced.title} name='advanced'><Advanced/></div>
+        <div label='Keybinds' name='keybinds'><Keybinds/></div>
         <div label={sections.stats.title} name='stats'><Stats/></div>
         <div label={sections.experimental.title} name='experimental'><Experimental/></div>
         <div label={sections.changelog} name='changelog'><Changelog/></div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -20,7 +20,8 @@ import {
   AssessmentOutlined as Stats,
   Code as Sideload,
   AddCircleOutline as Added,
-  CreateNewFolderOutlined as Create
+  CreateNewFolderOutlined as Create,
+  KeyboardAltOutlined as Keybinds
 } from '@material-ui/icons';
 
 function Tab(props) {
@@ -58,6 +59,7 @@ function Tab(props) {
     case settings.order.title: icon = <Order/>; break;
     case settings.language.title: icon = <Language/>; divider = true; break;
     case settings.advanced.title: icon = <Advanced/>; break;
+    case 'Keybinds': icon = <Keybinds/>; break;
     case settings.stats.title: icon = <Stats/>; break;
     case settings.experimental.title: icon = <Experimental/>; divider = true; break;
     case settings.changelog: icon = <Changelog/>; break;