moved penMode from state to context

src/components/App.tsx

@@ -258,6 +258,7 @@ import {
 const defaultDeviceTypeContext: DeviceType = {
   isMobile: false,
   isTouchScreen: false,
+  penDetected: false,
 };
 const DeviceTypeContext = React.createContext(defaultDeviceTypeContext);
 export const useDeviceType = () => useContext(DeviceTypeContext);
@@ -295,6 +296,7 @@ class App extends React.Component<AppProps, AppState> {
   deviceType: DeviceType = {
     isMobile: false,
     isTouchScreen: false,
+    penDetected: false,
   };
   detachIsMobileMqHandler?: () => void;
 
@@ -2863,11 +2865,11 @@ class App extends React.Component<AppProps, AppState> {
 
     //fires only once, if pen is detected, penMode is enabled
     //the user can disable this by toggling the penMode button
-    if (!this.state.penDetected && event.pointerType === "pen") {
+    if (!this.deviceType.penDetected && event.pointerType === "pen") {
+      this.deviceType = updateObject(this.deviceType, { penDetected: true });
       this.setState((prevState) => {
         return {
           penMode: true,
-          penDetected: true,
         };
       });
     }

src/components/LayerUI.tsx

@@ -321,7 +321,7 @@ const LayerUI = ({
                       checked={appState.penMode}
                       onChange={onPenModeToggle}
                       title={t("toolBar.penMode")}
-                      penDetected={appState.penDetected}
+                      penDetected={deviceType.penDetected}
                     />
                     <LockButton
                       zenModeEnabled={zenModeEnabled}

src/components/MobileMenu.tsx

@@ -18,6 +18,7 @@ import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
+import { useDeviceType } from "./App";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -61,6 +62,7 @@ export const MobileMenu = ({
   onImageAction,
   renderTopRightUI,
 }: MobileMenuProps) => {
+  const deviceType = useDeviceType();
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
@@ -101,7 +103,7 @@ export const MobileMenu = ({
                   onChange={onPenModeToggle}
                   title={t("toolBar.penMode")}
                   isMobile
-                  penDetected={appState.penDetected}
+                  penDetected={deviceType.penDetected}
                 />
               </Stack.Row>
               {libraryMenu}