refactor: account menu controller [skip e2e]

packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx

@@ -4,16 +4,19 @@ import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
+import { observer } from 'mobx-react-lite'
+import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
 
 type Props = AccountMenuProps & {
-  isOpen: boolean
+  controller: AccountMenuController
   hasError: boolean
   toggleMenu: () => void
   user: unknown
 }
 
-const AccountMenuButton = ({ hasError, isOpen, mainApplicationGroup, onClickOutside, toggleMenu, user }: Props) => {
+const AccountMenuButton = ({ hasError, controller, mainApplicationGroup, onClickOutside, toggleMenu, user }: Props) => {
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const { show: isOpen } = controller
 
   return (
     <>
@@ -46,4 +49,4 @@ const AccountMenuButton = ({ hasError, isOpen, mainApplicationGroup, onClickOuts
   )
 }
 
-export default AccountMenuButton
+export default observer(AccountMenuButton)

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

@@ -36,7 +36,6 @@ type State = {
   showBetaWarning: boolean
   showSyncResolution: boolean
   newUpdateAvailable: boolean
-  showAccountMenu: boolean
   offline: boolean
   hasError: boolean
   arbitraryStatusMessage?: string
@@ -62,7 +61,6 @@ class Footer extends AbstractComponent<Props, State> {
       showBetaWarning: false,
       showSyncResolution: false,
       newUpdateAvailable: false,
-      showAccountMenu: false,
     }
 
     this.webEventListenerDestroyer = props.application.addWebEventObserver((event, data) => {
@@ -119,12 +117,6 @@ class Footer extends AbstractComponent<Props, State> {
         arbitraryStatusMessage: message,
       })
     })
-
-    this.autorun(() => {
-      this.setState({
-        showAccountMenu: this.application.accountMenuController.show,
-      })
-    })
   }
 
   reloadUpgradeStatus() {
@@ -347,7 +339,7 @@ class Footer extends AbstractComponent<Props, State> {
             <div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none">
               <AccountMenuButton
                 hasError={this.state.hasError}
-                isOpen={this.state.showAccountMenu}
+                controller={this.application.accountMenuController}
                 mainApplicationGroup={this.props.applicationGroup}
                 onClickOutside={this.clickOutsideAccountMenu}
                 toggleMenu={this.accountMenuClickHandler}