From 3467af361ce175d96ffa17545288366f89778e51 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Fri, 12 Apr 2024 23:25:31 +0200
Subject: [PATCH] [PUI] Mobile ignore warning in dev (#7009)

* enable overwrite of mobileView warning

* only show exception on dev
---
 src/frontend/src/states/LocalState.tsx   |  6 ++++++
 src/frontend/src/views/MainView.tsx      |  4 +++-
 src/frontend/src/views/MobileAppView.tsx | 13 +++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/states/LocalState.tsx b/src/frontend/src/states/LocalState.tsx
index 9686b0640f..81d498463d 100644
--- a/src/frontend/src/states/LocalState.tsx
+++ b/src/frontend/src/states/LocalState.tsx
@@ -33,6 +33,8 @@ interface LocalStateProps {
   addDetailDrawer: (value: number | false) => void;
   navigationOpen: boolean;
   setNavigationOpen: (value: boolean) => void;
+  allowMobile: boolean;
+  setAllowMobile: (value: boolean) => void;
 }
 
 export const useLocalState = create<LocalStateProps>()(
@@ -94,6 +96,10 @@ export const useLocalState = create<LocalStateProps>()(
       navigationOpen: false,
       setNavigationOpen: (value) => {
         set({ navigationOpen: value });
+      },
+      allowMobile: false,
+      setAllowMobile: (value) => {
+        set({ allowMobile: value });
       }
     }),
     {
diff --git a/src/frontend/src/views/MainView.tsx b/src/frontend/src/views/MainView.tsx
index 1233038d37..33535757b5 100644
--- a/src/frontend/src/views/MainView.tsx
+++ b/src/frontend/src/views/MainView.tsx
@@ -3,6 +3,7 @@ import { lazy, useEffect } from 'react';
 
 import { setApiDefaults } from '../App';
 import { Loadable } from '../functions/loading';
+import { useLocalState } from '../states/LocalState';
 
 function checkMobile() {
   const { height, width } = useViewportSize();
@@ -15,6 +16,7 @@ const DesktopAppView = Loadable(lazy(() => import('./DesktopAppView')));
 
 // Main App
 export default function MainView() {
+  const [allowMobile] = useLocalState((state) => [state.allowMobile]);
   // Set initial login status
   useEffect(() => {
     // Local state initialization
@@ -22,7 +24,7 @@ export default function MainView() {
   }, []);
 
   // Check if mobile
-  if (checkMobile()) {
+  if (!allowMobile && checkMobile()) {
     return <MobileAppView />;
   }
 
diff --git a/src/frontend/src/views/MobileAppView.tsx b/src/frontend/src/views/MobileAppView.tsx
index 46f151119e..e01c626f8d 100644
--- a/src/frontend/src/views/MobileAppView.tsx
+++ b/src/frontend/src/views/MobileAppView.tsx
@@ -3,8 +3,16 @@ import { Anchor, Center, Container, Stack, Text, Title } from '@mantine/core';
 
 import { BaseContext } from '../contexts/BaseContext';
 import { docLinks } from '../defaults/links';
+import { IS_DEV } from '../main';
+import { useLocalState } from '../states/LocalState';
 
 export default function MobileAppView() {
+  const [setAllowMobile] = useLocalState((state) => [state.setAllowMobile]);
+
+  function ignore() {
+    setAllowMobile(true);
+    window.location.reload();
+  }
   return (
     <BaseContext>
       <Center h="100vh">
@@ -22,6 +30,11 @@ export default function MobileAppView() {
             <Anchor href={docLinks.app}>
               <Trans>Read the docs</Trans>
             </Anchor>
+            {IS_DEV && (
+              <Text onClick={ignore}>
+                <Trans>Ignore and continue to Desktop view</Trans>
+              </Text>
+            )}
           </Stack>
         </Container>
       </Center>