feat: keyboard shortcuts for primary actions (#2030)

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -23,27 +23,13 @@ import PanelSettingsSection from './PanelSettingsSection'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { classNames } from '@/Utils/ConcatenateClassNames'
 
-const focusModeAnimationDuration = 1255
+export const focusModeAnimationDuration = 1255
 
 type MenuProps = {
   quickSettingsMenuController: QuickSettingsController
   application: WebApplication
 }
 
-const toggleFocusMode = (enabled: boolean) => {
-  if (enabled) {
-    document.body.classList.add('focus-mode')
-  } else {
-    if (document.body.classList.contains('focus-mode')) {
-      document.body.classList.add('disable-focus-mode')
-      document.body.classList.remove('focus-mode')
-      setTimeout(() => {
-        document.body.classList.remove('disable-focus-mode')
-      }, focusModeAnimationDuration)
-    }
-  }
-}
-
 const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSettingsMenuController }) => {
   const { closeQuickSettingsMenu, focusModeEnabled, setFocusModeEnabled } = quickSettingsMenuController
   const [themes, setThemes] = useState<ThemeItem[]>([])
@@ -71,10 +57,6 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
   const prefsButtonRef = useRef<HTMLButtonElement>(null)
   const defaultThemeButtonRef = useRef<HTMLButtonElement>(null)
 
-  useEffect(() => {
-    toggleFocusMode(focusModeEnabled)
-  }, [focusModeEnabled])
-
   const reloadThemes = useCallback(() => {
     const themes = application.items
       .getDisplayableComponents()
@@ -210,13 +192,14 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
       {themes.map((theme) => (
         <ThemesMenuButton item={theme} application={application} key={theme.component?.uuid ?? theme.identifier} />
       ))}
+      <HorizontalSeparator classes="my-2" />
       <FocusModeSwitch
         application={application}
         onToggle={setFocusModeEnabled}
         onClose={closeQuickSettingsMenu}
         isEnabled={focusModeEnabled}
       />
-      <PanelSettingsSection application={application} />
+      <PanelSettingsSection />
     </div>
   )
 }