From c9f8a51cfe05262197aff75e09062dd0ab978c83 Mon Sep 17 00:00:00 2001
From: serxka <serxka@protonmail.com>
Date: Wed, 21 Dec 2022 18:41:27 +1100
Subject: [PATCH] Add navigation sidebar toggle keybind

---
 src/app/templates/client/Client.jsx | 13 +++++++++++++
 src/client/action/settings.js       |  6 ++++++
 src/client/event/hotkeys.js         |  8 ++++++++
 src/client/state/cons.js            |  2 ++
 src/client/state/settings.js        |  3 +++
 5 files changed, 32 insertions(+)

diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
index d83845b8..984a6bf6 100644
--- a/src/app/templates/client/Client.jsx
+++ b/src/app/templates/client/Client.jsx
@@ -17,6 +17,7 @@ import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
 
 import initMatrix from '../../../client/initMatrix';
 import navigation from '../../../client/state/navigation';
+import settings from '../../../client/state/settings';
 import cons from '../../../client/state/cons';
 import DragDrop from '../../organisms/drag-drop/DragDrop';
 
@@ -26,6 +27,7 @@ function Client() {
   const [isLoading, changeLoading] = useState(true);
   const [loadingMsg, setLoadingMsg] = useState('Heating up');
   const [dragCounter, setDragCounter] = useState(0);
+  const [navBarVis, setNavBarVis] = useState(true);
   const classNameHidden = 'client__item-hidden';
 
   const navWrapperRef = useRef(null);
@@ -39,14 +41,25 @@ function Client() {
     navWrapperRef.current?.classList.remove(classNameHidden);
     roomWrapperRef.current?.classList.add(classNameHidden);
   }
+  function onNavigationBarToggle() {
+    setNavBarVis(navBarVis => {
+      if (!navBarVis)
+        navWrapperRef.current.style.display = '';
+      else
+        navWrapperRef.current.style.display = 'none';
+      return !navBarVis;
+    });
+  }
 
   useEffect(() => {
     navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
     navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+    settings.on(cons.events.settings.NAVIGATION_BAR_TOGGLED, onNavigationBarToggle);
 
     return (() => {
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
       navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
+      settings.removeListener(cons.events.settings.NAVIGATION_BAR_TOGGLED, onNavigationBarToggle);
     });
   }, []);
 
diff --git a/src/client/action/settings.js b/src/client/action/settings.js
index 7b539c8d..411bcce5 100644
--- a/src/client/action/settings.js
+++ b/src/client/action/settings.js
@@ -13,6 +13,12 @@ export function toggleMarkdown() {
   });
 }
 
+export function toggleNavigationBar() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_NAVIGATION_BAR,
+  });
+}
+
 export function togglePeopleDrawer() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_PEOPLE_DRAWER,
diff --git a/src/client/event/hotkeys.js b/src/client/event/hotkeys.js
index e59ce3d7..d473a647 100644
--- a/src/client/event/hotkeys.js
+++ b/src/client/event/hotkeys.js
@@ -1,4 +1,5 @@
 import { openSearch, toggleRoomSettings } from '../action/navigation';
+import { toggleNavigationBar, togglePeopleDrawer } from '../action/settings';
 import navigation from '../state/navigation';
 import { markAsRead } from '../action/notifications';
 
@@ -47,6 +48,13 @@ function listenKeyboard(event) {
       ) return;
       msgTextarea?.focus();
     }
+
+    // toggle navigation bar
+    if (event.key === ',') {
+      event.preventDefault();
+      if (navigation.isRawModalVisible) return;
+      toggleNavigationBar();
+    }
   }
 
   if (!event.ctrlKey && !event.altKey && !event.metaKey) {
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index 785047d7..2ded5b6f 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -67,6 +67,7 @@ const cons = {
     settings: {
       TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
       TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
+      TOGGLE_NAVIGATION_BAR: 'TOGGLE_NAVIGATION_BAR',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
       TOGGLE_NICKAVATAR_EVENT: 'TOGGLE_NICKAVATAR_EVENT',
@@ -139,6 +140,7 @@ const cons = {
     settings: {
       SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
       MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
+      NAVIGATION_BAR_TOGGLED: 'NAVIGATION_BAR_TOGGLED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
       MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
       NICKAVATAR_EVENTS_TOGGLED: 'NICKAVATAR_EVENTS_TOGGLED',
diff --git a/src/client/state/settings.js b/src/client/state/settings.js
index 32f55fcc..316e572d 100644
--- a/src/client/state/settings.js
+++ b/src/client/state/settings.js
@@ -157,6 +157,9 @@ class Settings extends EventEmitter {
         setSettings('isMarkdown', this.isMarkdown);
         this.emit(cons.events.settings.MARKDOWN_TOGGLED, this.isMarkdown);
       },
+      [cons.actions.settings.TOGGLE_NAVIGATION_BAR]: () => {
+        this.emit(cons.events.settings.NAVIGATION_BAR_TOGGLED, this.isMarkdown);
+      },
       [cons.actions.settings.TOGGLE_PEOPLE_DRAWER]: () => {
         this.isPeopleDrawer = !this.isPeopleDrawer;
         setSettings('isPeopleDrawer', this.isPeopleDrawer);