fix: screens toggle does not toggle back

src/App.tsx

@@ -12,15 +12,14 @@ import { onMount, Switch, Match, createSignal, Show } from 'solid-js';
 import { useAppSelector } from 'services/Context';
 import { listen } from '@tauri-apps/api/event';
 import { Events, QueryTaskResult } from 'interfaces';
-import { isDev } from 'solid-js/web';
 import { checkUpdate, installUpdate } from '@tauri-apps/api/updater';
 import { relaunch } from '@tauri-apps/api/process';
 import { t } from 'utils/i18n';
 
 function App() {
   const {
     connections: { store, restoreConnectionStore, getConnection, updateResultSet, loading, setLoading },
-    app: { restoreAppStore, setComponent },
+    app: { restoreAppStore, setScreen, appStore },
     backend: { getQueryMetadata },
     messages: { notify },
   } = useAppSelector();
@@ -53,10 +52,6 @@ function App() {
     }
   };
 
-  onMount(async () => {
-    await checkForUpdates();
-  });
-
   const disableMenu = () => {
     document.addEventListener('contextmenu', (e) => {
       e.preventDefault();
@@ -73,7 +68,7 @@ function App() {
     );
   };
 
-  if (!isDev) {
+  if (!appStore.enableDevTools) {
     disableMenu();
   }
 
@@ -101,22 +96,21 @@ function App() {
     }
   };
 
-  onMount(async () => {
-    await listen<QueryTaskResult>(Events.QueryFinished, async (event) => {
-      console.log(event);
-      await compareAndAssign(event.payload);
-    });
-  });
-
   onMount(async () => {
     const theme = localStorage.getItem('theme') || 'dark';
     document.documentElement.dataset.theme = theme;
     await restoreAppStore();
     await restoreConnectionStore();
     if (store.tabs.length === 0) {
-      setComponent('home');
+      setScreen('home');
     }
     setLoading(false);
+
+    await checkForUpdates();
+    await listen<QueryTaskResult>(Events.QueryFinished, async (event) => {
+      console.log(event);
+      await compareAndAssign(event.payload);
+    });
   });
 
   return (

src/components/Screens/Home/Connections/ConnectionsList/ConnectionsList.tsx

@@ -10,7 +10,7 @@ import { Refresh } from 'components/UI/Icons';
 export const ConnectionsList = () => {
   const {
     messages: { notify },
-    app: { setComponent },
+    app: { setScreen },
     connections: { connections, refreshConnections, addConnectionTab, fetchSchemaEntities, setLoading },
   } = useAppSelector();
   const [focusedConnection, setFocusedConnection] = createSignal<ConnectionConfig>();
@@ -42,7 +42,7 @@ export const ConnectionsList = () => {
         tabs: [],
         idx: 0,
       });
-      setComponent('console');
+      setScreen('console');
     } catch (error) {
       notify(error);
     } finally {

src/components/Screens/Main.tsx

@@ -12,15 +12,15 @@ import Keymaps from './Settings/Keymaps';
 
 export const Main = () => {
   const {
-    app: { setComponent, component },
+    app: { screen, setScreen, toggleScreen },
     connections: { removeConnectionTab, store, setStore },
   } = useAppSelector();
 
   const handleCloseConnection = async (id: string) => {
     await invoke<string>('disconnect', { id });
     await removeConnectionTab(id);
     if (store.tabs.length === 0) {
-      setComponent('home');
+      setScreen('home');
     }
   };
 
@@ -30,12 +30,12 @@ export const Main = () => {
         <div class="tabs tabs-md tabs-boxed gap-2 flex">
           <button
             onClick={() => {
-              setComponent('home');
+              setScreen('home');
               setStore('idx', 0);
             }}
             class="tab"
             tabIndex={0}
-            classList={{ 'tab-active': component() === 'home' }}>
+            classList={{ 'tab-active': screen() === 'home' }}>
             <span class="text-md font-bold">
               <HomeIcon />
             </span>
@@ -45,12 +45,12 @@ export const Main = () => {
               <div class="flex items-center">
                 <button
                   onClick={() => {
-                    setComponent('console');
+                    setScreen('console');
                     setStore('idx', idx());
                   }}
                   class="tab pt-1"
                   classList={{
-                    'tab-active': component() === 'console' && store.idx === idx(),
+                    'tab-active': screen() === 'console' && store.idx === idx(),
                   }}
                   tabindex={0}>
                   <span class="text-md font-bold">{tab.label}</span>
@@ -72,33 +72,31 @@ export const Main = () => {
         <div class="flex items-center py-2">
           <ThemeSwitch />
           <div class="tooltip tooltip-primary tooltip-bottom px-3" data-tip={t('settings.read_docs')}>
-            <a href="https://noir.github.io" target="_blank" class="btn btn-square btn-ghost btn-sm">
+            <a href="https://noirdb.dev" target="_blank" class="btn btn-square btn-ghost btn-sm">
               <QuestionMark />
             </a>
           </div>
           <div class="tooltip tooltip-primary tooltip-bottom px-3" data-tip={t('settings.settings')}>
-            <button
-              class="btn btn-square btn-ghost btn-sm"
-              onClick={() => setComponent((s) => (s === 'console' ? 'settings' : 'console'))}>
+            <button class="btn btn-square btn-ghost btn-sm" onClick={() => toggleScreen('settings')}>
               <Cog />
             </button>
           </div>
         </div>
       </div>
       <div class="flex-1 overflow-hidden flex">
         <Switch>
-          <Match when={component() === 'settings'}>
+          <Match when={screen() === 'settings'}>
             <Settings />
           </Match>
-          <Match when={component() === 'keymaps'}>
+          <Match when={screen() === 'keymaps'}>
             <div class="w-full bg-base-200 py-10 overflow-y-auto">
               <Keymaps />
             </div>
           </Match>
-          <Match when={component() === 'home'}>
+          <Match when={screen() === 'home'}>
             <Home />
           </Match>
-          <Match when={component() === 'console'}>
+          <Match when={screen() === 'console'}>
             <Console />
           </Match>
         </Switch>

src/components/Screens/Settings/Settings.tsx

@@ -8,7 +8,7 @@ import { OpenIssue } from './OpenIssue';
 export const Settings = () => {
   const {
     connections: { clearStore },
-    app: { setComponent },
+    app: { setScreen },
   } = useAppSelector();
 
   return (
@@ -24,7 +24,7 @@ export const Settings = () => {
         <Keymaps
           short
           suffix={
-            <button onClick={() => setComponent('keymaps')} class="btn btn-sm btn-primary w-md mt-2">
+            <button onClick={() => setScreen('keymaps')} class="btn btn-sm btn-primary w-md mt-2">
               {t('keymaps.see_all')}
             </button>
           }

src/services/App.ts

@@ -24,6 +24,7 @@ type AppStore = {
   gridTheme: string;
   editorTheme: EditorTheme;
   osType: OsType;
+  enableDevTools: boolean;
 };
 
 const getSavedData = async (key: string) => {
@@ -45,9 +46,11 @@ export const AppService = () => {
     gridTheme: 'alpine-dark',
     editorTheme: 'Dracula',
     osType: 'Linux',
+    enableDevTools: true,
   });
 
-  const [component, setComponent] = createSignal<Screen>('console');
+  const [screen, setScreen] = createSignal<Screen>('console');
+  const [lastScreen, setLastScreen] = createSignal<Screen>('console');
 
   const updateStore = debounce(async () => {
     await store.set(APP_KEY, JSON.stringify(appStore));
@@ -58,6 +61,17 @@ export const AppService = () => {
   const gridTheme = () => appStore.gridTheme;
   const editorTheme = () => appStore.editorTheme;
 
+  const toggleScreen = (s: Screen) => {
+    if (screen() === s) {
+      const last = lastScreen();
+      setLastScreen(screen());
+      setScreen(last);
+      return;
+    }
+    setLastScreen(screen());
+    setScreen(s);
+  };
+
   const altOrMeta = (short = false) => {
     if (appStore.osType === 'Darwin') return short ? 'Cmd' : 'Meta';
     return 'Alt';
@@ -96,8 +110,9 @@ export const AppService = () => {
     vimModeOn,
     toggleVimModeOn,
     restoreAppStore,
-    component,
-    setComponent,
+    screen,
+    setScreen,
+    toggleScreen,
     gridTheme,
     editorTheme,
     updateTheme,

src/services/RegisterKeymaps.tsx

@@ -13,7 +13,7 @@ export const RegisterKeymaps = (props: { children: JSXElement; osType: OsType })
       setPrevContentIdx,
       setConnectionIdx,
     },
-    app: { setComponent, setAppStore, cmdOrCtrl, altOrMeta },
+    app: { setScreen, toggleScreen, setAppStore, cmdOrCtrl, altOrMeta },
   } = useAppSelector();
   setAppStore({ osType: props.osType });
 
@@ -24,7 +24,7 @@ export const RegisterKeymaps = (props: { children: JSXElement; osType: OsType })
   }
 
   createShortcut(['F1'], () => {
-    setComponent((s) => (s === 'keymaps' ? 'console' : 'keymaps'));
+    toggleScreen('keymaps');
   });
 
   createShortcut([cmdOrCtrl(), 't'], () => {
@@ -44,12 +44,12 @@ export const RegisterKeymaps = (props: { children: JSXElement; osType: OsType })
   });
 
   createShortcut(['Control', '`'], () => {
-    setComponent('home');
+    setScreen('home');
   });
 
   for (let i = 1; i <= 9; i++) {
     createShortcut(['Control', String(i)], () => {
-      setComponent('console');
+      setScreen('console');
       setConnectionIdx(i - 1);
     });
   }