feat(ChordDictionary): added in module settings drawer

la-jarre-a-son · Jan 5, 2024 · affdd45 · affdd45
1 parent bf81f69
commit affdd45
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 51 deletions.
diff --git a/src/renderer/views/ChordDictionary/ChordDictionaryToolbar.tsx b/src/renderer/views/ChordDictionary/ChordDictionaryToolbar.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames/bind';
 import { useNavigate } from 'react-router-dom';
 import {
   Button,
   ButtonGroup,
   Divider,
+  Drawer,
   DropdownTriggerInternal,
   Menu,
   MenuGroup,
@@ -19,11 +20,12 @@ import {
 import { useSettings } from 'renderer/contexts/Settings';
 import { Icon } from 'renderer/components';
 
-import { ChordDictionarySettings } from 'main/types';
+import { ChordDictionarySettings as TChordDictionarySettings } from 'main/types';
 import { groupValues } from './utils';
 import { ChordSearch } from './ChordSearch';
 
 import styles from './ChordDictionary.module.scss';
+import ChordDictionarySettings from '../Settings/ChordDictionarySettings';
 
 const cx = classnames.bind(styles);
 
@@ -33,18 +35,19 @@ type Props = {
 
 const ChordDictionaryToolbar: React.FC<Props> = ({ disableUpdate }) => {
   const navigate = useNavigate();
-
   const { settings, updateSetting } = useSettings();
 
+  const [settingsOpen, setSettingsOpen] = useState<boolean>(false);
+
   const toggleHideDisabled = () =>
     updateSetting('chordDictionary.hideDisabled', !settings.chordDictionary.hideDisabled);
   const toggleFilterInKey = () =>
     updateSetting('chordDictionary.filterInKey', !settings.chordDictionary.filterInKey);
 
-  const handleToggleInteractive = (interactive: ChordDictionarySettings['interactive']) => () =>
+  const handleToggleInteractive = (interactive: TChordDictionarySettings['interactive']) => () =>
     updateSetting('chordDictionary.interactive', interactive);
 
-  const bindSortAndFilter = (groupBy: ChordDictionarySettings['groupBy']) => ({
+  const bindSortAndFilter = (groupBy: TChordDictionarySettings['groupBy']) => ({
     onClick: () => updateSetting('chordDictionary.groupBy', groupBy),
     checked: settings.chordDictionary.groupBy === groupBy,
   });
@@ -71,55 +74,79 @@ const ChordDictionaryToolbar: React.FC<Props> = ({ disableUpdate }) => {
     }
   };
 
+  const handleSettingsClosed = () => {
+    setSettingsOpen(false);
+  };
+
   return (
-    <Toolbar as={Stack} className={cx('header')} elevation={2}>
-      {!disableUpdate && (
-        <Menu className={cx('menu')} trigger={menuTrigger}>
-          <MenuGroup header="Group">
-            <MenuItemRadio {...bindSortAndFilter('none')}>{groupValues.none}</MenuItemRadio>
-            <MenuItemRadio {...bindSortAndFilter('quality')}>{groupValues.quality}</MenuItemRadio>
-            <MenuItemRadio {...bindSortAndFilter('intervals')}>
-              {groupValues.intervals}
-            </MenuItemRadio>
-          </MenuGroup>
-          <Divider />
-          <MenuGroup header="Filter">
-            <MenuItemCheckbox
-              checked={settings.chordDictionary.hideDisabled}
-              variant="switch"
-              onClick={toggleHideDisabled}
+    <>
+      <Toolbar as={Stack} className={cx('header')} elevation={2}>
+        {!disableUpdate && (
+          <Menu className={cx('menu')} trigger={menuTrigger}>
+            <MenuGroup header="Group">
+              <MenuItemRadio {...bindSortAndFilter('none')}>{groupValues.none}</MenuItemRadio>
+              <MenuItemRadio {...bindSortAndFilter('quality')}>{groupValues.quality}</MenuItemRadio>
+              <MenuItemRadio {...bindSortAndFilter('intervals')}>
+                {groupValues.intervals}
+              </MenuItemRadio>
+            </MenuGroup>
+            <Divider />
+            <MenuGroup header="Filter">
+              <MenuItemCheckbox
+                checked={settings.chordDictionary.hideDisabled}
+                variant="switch"
+                onClick={toggleHideDisabled}
+              >
+                Hide disabled chords
+              </MenuItemCheckbox>
+              <MenuItemCheckbox
+                checked={settings.chordDictionary.filterInKey}
+                variant="switch"
+                onClick={toggleFilterInKey}
+              >
+                Only chords in key
+              </MenuItemCheckbox>
+            </MenuGroup>
+          </Menu>
+        )}
+        <StackSeparator />
+        <ChordSearch onSelect={handleChordSelect} />
+        {!disableUpdate && (
+          <ButtonGroup>
+            <ToggleButton
+              onClick={handleToggleInteractive('detect')}
+              selected={settings.chordDictionary.interactive === 'detect'}
             >
-              Hide disabled chords
-            </MenuItemCheckbox>
-            <MenuItemCheckbox
-              checked={settings.chordDictionary.filterInKey}
-              variant="switch"
-              onClick={toggleFilterInKey}
+              Detect
+            </ToggleButton>
+            <ToggleButton
+              onClick={handleToggleInteractive('play')}
+              selected={settings.chordDictionary.interactive === 'play'}
             >
-              Only chords in key
-            </MenuItemCheckbox>
-          </MenuGroup>
-        </Menu>
-      )}
-      <StackSeparator />
-      <ChordSearch onSelect={handleChordSelect} />
-      {!disableUpdate && (
-        <ButtonGroup>
-          <ToggleButton
-            onClick={handleToggleInteractive('detect')}
-            selected={settings.chordDictionary.interactive === 'detect'}
-          >
-            Detect
-          </ToggleButton>
-          <ToggleButton
-            onClick={handleToggleInteractive('play')}
-            selected={settings.chordDictionary.interactive === 'play'}
-          >
-            Play
-          </ToggleButton>
-        </ButtonGroup>
-      )}
-    </Toolbar>
+              Play
+            </ToggleButton>
+          </ButtonGroup>
+        )}
+        <Button
+          onClick={() => setSettingsOpen(true)}
+          intent="neutral"
+          icon
+          aria-label="Open dictionary settings"
+        >
+          <Icon name="settings" />
+        </Button>
+      </Toolbar>
+      <Drawer
+        open={settingsOpen}
+        placement="right"
+        size="lg"
+        onClose={handleSettingsClosed}
+        className={cx('base')}
+        aria-label="Chord Dictionary Settings"
+      >
+        <ChordDictionarySettings />
+      </Drawer>
+    </>
   );
 };
 

diff --git a/src/renderer/views/Settings/ChordDictionarySettings/ChordDictionarySettings.tsx b/src/renderer/views/Settings/ChordDictionarySettings/ChordDictionarySettings.tsx
@@ -109,6 +109,7 @@ const ChordDictionarySettings: React.FC = () => {
           <List>
             {settings.chordDictionary.disabled.map((disabledChord) => (
               <ListItem
+                key={disabledChord}
                 className={cx('disabled')}
                 right={
                   <ButtonGroup>