feat: add panel settings section in quick settings (#1669)

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

@@ -12,7 +12,7 @@ import PreferencesViewWrapper from '@/Components/Preferences/PreferencesViewWrap
 import ChallengeModal from '@/Components/ChallengeModal/ChallengeModal'
 import NotesContextMenu from '@/Components/NotesContextMenu/NotesContextMenu'
 import PurchaseFlowWrapper from '@/Components/PurchaseFlow/PurchaseFlowWrapper'
-import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import RevisionHistoryModal from '@/Components/RevisionHistoryModal/RevisionHistoryModal'
 import PremiumModalProvider from '@/Hooks/usePremiumModal'
 import ConfirmSignoutContainer from '@/Components/ConfirmSignoutModal/ConfirmSignoutModal'
@@ -35,13 +35,14 @@ type Props = {
 
 const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicationGroup }) => {
   const platformString = getPlatformString()
-  const [appClass, setAppClass] = useState('')
   const [launched, setLaunched] = useState(false)
   const [needsUnlock, setNeedsUnlock] = useState(true)
   const [challenges, setChallenges] = useState<Challenge[]>([])
 
   const viewControllerManager = application.getViewControllerManager()
 
+  const appColumnContainerRef = useRef<HTMLDivElement>(null)
+
   useEffect(() => {
     const desktopService = application.getDesktopService()
 
@@ -125,15 +126,27 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
   useEffect(() => {
     const removeObserver = application.addWebEventObserver(async (eventName, data) => {
       if (eventName === WebAppEvent.PanelResized) {
+        if (!appColumnContainerRef.current) {
+          return
+        }
+
         const { panel, collapsed } = data as PanelResizedData
-        let appClass = ''
-        if (panel === PANEL_NAME_NOTES && collapsed) {
-          appClass += 'collapsed-notes'
+
+        if (panel === PANEL_NAME_NOTES) {
+          if (collapsed) {
+            appColumnContainerRef.current.classList.add('collapsed-notes')
+          } else {
+            appColumnContainerRef.current.classList.remove('collapsed-notes')
+          }
         }
-        if (panel === PANEL_NAME_NAVIGATION && collapsed) {
-          appClass += ' collapsed-navigation'
+
+        if (panel === PANEL_NAME_NAVIGATION) {
+          if (collapsed) {
+            appColumnContainerRef.current.classList.add('collapsed-navigation')
+          } else {
+            appColumnContainerRef.current.classList.remove('collapsed-navigation')
+          }
         }
-        setAppClass(appClass)
       } else if (eventName === WebAppEvent.WindowDidFocus) {
         if (!(await application.isLocked())) {
           application.sync.sync().catch(console.error)
@@ -180,7 +193,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
       <ResponsivePaneProvider>
         <PremiumModalProvider application={application} viewControllerManager={viewControllerManager}>
           <div className={platformString + ' main-ui-view sn-component'}>
-            <div id="app" className={appClass + ' app app-column-container'}>
+            <div id="app" className="app app-column-container" ref={appColumnContainerRef}>
               <FileDragNDropProvider
                 application={application}
                 featuresController={viewControllerManager.featuresController}