Refactor some code

src/app.jsx

@@ -10,7 +10,7 @@ import {
 } from 'preact/hooks';
 import { matchPath, Route, Routes, useLocation } from 'react-router-dom';
 import 'swiped-events';
-import { useSnapshot } from 'valtio';
+import { subscribe, useSnapshot } from 'valtio';
 
 import BackgroundService from './components/background-service';
 import ComposeButton from './components/compose-button';
@@ -108,8 +108,25 @@ setTimeout(() => {
   // );
 })();
 
+subscribe(states, (changes) => {
+  for (const [action, path, value, prevValue] of changes) {
+    // Change #app dataset based on settings.shortcutsViewMode
+    if (path.join('.') === 'settings.shortcutsViewMode') {
+      const $app = document.getElementById('app');
+      if ($app) {
+        $app.dataset.shortcutsViewMode = states.shortcuts?.length ? value : '';
+      }
+    }
+
+    // Add/Remove cloak class to body
+    if (path.join('.') === 'settings.cloakMode') {
+      const $body = document.body;
+      $body.classList.toggle('cloak', value);
+    }
+  }
+});
+
 function App() {
-  const snapStates = useSnapshot(states);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [uiState, setUIState] = useState('loading');
 
@@ -192,12 +209,70 @@ function App() {
   }, []);
 
   let location = useLocation();
-  states.currentLocation = location.pathname;
+  // states.currentLocation = location.pathname;
+  useLayoutEffect(() => {
+    states.currentLocation = location.pathname;
+  }, [location.pathname]);
 
   useEffect(focusDeck, [location, isLoggedIn]);
 
+  if (/\/https?:/.test(location.pathname)) {
+    return <HttpRoute />;
+  }
+
+  return (
+    <>
+      <PrimaryRoutes isLoggedIn={isLoggedIn} loading={uiState === 'loading'} />
+      <SecondaryRoutes isLoggedIn={isLoggedIn} />
+      {uiState === 'default' && (
+        <Routes>
+          <Route path="/:instance?/s/:id" element={<StatusRoute />} />
+        </Routes>
+      )}
+      {isLoggedIn && <ComposeButton />}
+      {isLoggedIn && <Shortcuts />}
+      <Modals />
+      {isLoggedIn && <NotificationService />}
+      <BackgroundService isLoggedIn={isLoggedIn} />
+      {uiState !== 'loading' && <SearchCommand onClose={focusDeck} />}
+      <KeyboardShortcutsHelp />
+    </>
+  );
+}
+
+function PrimaryRoutes({ isLoggedIn, loading }) {
+  const location = useLocation();
+  const nonRootLocation = useMemo(() => {
+    const { pathname } = location;
+    return !/^\/(login|welcome)/.test(pathname);
+  }, [location]);
+
+  return (
+    <Routes location={nonRootLocation || location}>
+      <Route
+        path="/"
+        element={
+          isLoggedIn ? (
+            <Home />
+          ) : loading ? (
+            <Loader id="loader-root" />
+          ) : (
+            <Welcome />
+          )
+        }
+      />
+      <Route path="/login" element={<Login />} />
+      <Route path="/welcome" element={<Welcome />} />
+    </Routes>
+  );
+}
+
+function SecondaryRoutes({ isLoggedIn }) {
+  const snapStates = useSnapshot(states);
+  const location = useLocation();
   const prevLocation = snapStates.prevLocation;
   const backgroundLocation = useRef(prevLocation || null);
+
   const isModalPage = useMemo(() => {
     return (
       matchPath('/:instance/s/:id', location.pathname) ||
@@ -214,91 +289,32 @@ function App() {
     location,
   });
 
-  if (/\/https?:/.test(location.pathname)) {
-    return <HttpRoute />;
-  }
-
-  const nonRootLocation = useMemo(() => {
-    const { pathname } = location;
-    return !/^\/(login|welcome)/.test(pathname);
-  }, [location]);
-
-  // Change #app dataset based on snapStates.settings.shortcutsViewMode
-  useEffect(() => {
-    const $app = document.getElementById('app');
-    if ($app) {
-      $app.dataset.shortcutsViewMode = snapStates.shortcuts?.length
-        ? snapStates.settings.shortcutsViewMode
-        : '';
-    }
-  }, [snapStates.shortcuts, snapStates.settings.shortcutsViewMode]);
-
-  // Add/Remove cloak class to body
-  useEffect(() => {
-    const $body = document.body;
-    $body.classList.toggle('cloak', snapStates.settings.cloakMode);
-  }, [snapStates.settings.cloakMode]);
-
   return (
-    <>
-      <Routes location={nonRootLocation || location}>
-        <Route
-          path="/"
-          element={
-            isLoggedIn ? (
-              <Home />
-            ) : uiState === 'loading' ? (
-              <Loader id="loader-root" />
-            ) : (
-              <Welcome />
-            )
-          }
-        />
-        <Route path="/login" element={<Login />} />
-        <Route path="/welcome" element={<Welcome />} />
-      </Routes>
-      <Routes location={backgroundLocation.current || location}>
-        {isLoggedIn && (
+    <Routes location={backgroundLocation.current || location}>
+      {isLoggedIn && (
+        <>
           <Route path="/notifications" element={<Notifications />} />
-        )}
-        {isLoggedIn && <Route path="/mentions" element={<Mentions />} />}
-        {isLoggedIn && <Route path="/following" element={<Following />} />}
-        {isLoggedIn && <Route path="/b" element={<Bookmarks />} />}
-        {isLoggedIn && <Route path="/f" element={<Favourites />} />}
-        {isLoggedIn && (
+          <Route path="/mentions" element={<Mentions />} />
+          <Route path="/following" element={<Following />} />
+          <Route path="/b" element={<Bookmarks />} />
+          <Route path="/f" element={<Favourites />} />
           <Route path="/l">
             <Route index element={<Lists />} />
             <Route path=":id" element={<List />} />
           </Route>
-        )}
-        {isLoggedIn && <Route path="/ft" element={<FollowedHashtags />} />}
-        <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />
-        <Route path="/:instance?/a/:id" element={<AccountStatuses />} />
-        <Route path="/:instance?/p">
-          <Route index element={<Public />} />
-          <Route path="l" element={<Public local />} />
-        </Route>
-        <Route path="/:instance?/trending" element={<Trending />} />
-        <Route path="/:instance?/search" element={<Search />} />
-        {/* <Route path="/:anything" element={<NotFound />} /> */}
-      </Routes>
-      {uiState === 'default' && (
-        <Routes>
-          <Route path="/:instance?/s/:id" element={<StatusRoute />} />
-        </Routes>
+          <Route path="/ft" element={<FollowedHashtags />} />
+        </>
       )}
-      {isLoggedIn && <ComposeButton />}
-      {isLoggedIn &&
-        !snapStates.settings.shortcutsColumnsMode &&
-        snapStates.settings.shortcutsViewMode !== 'multi-column' && (
-          <Shortcuts />
-        )}
-      <Modals />
-      {isLoggedIn && <NotificationService />}
-      <BackgroundService isLoggedIn={isLoggedIn} />
-      {uiState !== 'loading' && <SearchCommand onClose={focusDeck} />}
-      <KeyboardShortcutsHelp />
-    </>
+      <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />
+      <Route path="/:instance?/a/:id" element={<AccountStatuses />} />
+      <Route path="/:instance?/p">
+        <Route index element={<Public />} />
+        <Route path="l" element={<Public local />} />
+      </Route>
+      <Route path="/:instance?/trending" element={<Trending />} />
+      <Route path="/:instance?/search" element={<Search />} />
+      {/* <Route path="/:anything" element={<NotFound />} /> */}
+    </Routes>
   );
 }
 

src/components/shortcuts.jsx

@@ -18,11 +18,17 @@ import MenuLink from './menu-link';
 function Shortcuts() {
   const { instance } = api();
   const snapStates = useSnapshot(states);
-  const { shortcuts } = snapStates;
+  const { shortcuts, settings } = snapStates;
 
   if (!shortcuts.length) {
     return null;
   }
+  if (
+    settings.shortcutsColumnsMode ||
+    settings.shortcutsViewMode === 'multi-column'
+  ) {
+    return null;
+  }
 
   const menuRef = useRef();