Extract columns out & don't use dynamic imports

Vite have difficulties importing them dynamically. Sad face.

Also this makes Home look cleaner.

src/components/columns.jsx

@@ -0,0 +1,43 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useSnapshot } from 'valtio';
+
+import Bookmarks from '../pages/bookmarks';
+import Favourites from '../pages/favourites';
+import Following from '../pages/following';
+import Hashtag from '../pages/hashtag';
+import List from '../pages/list';
+import Notifications from '../pages/notifications';
+import Public from '../pages/public';
+import states from '../utils/states';
+
+function Columns() {
+  const snapStates = useSnapshot(states);
+  const { shortcuts } = snapStates;
+
+  const components = shortcuts.map((shortcut) => {
+    const { type, ...params } = shortcut;
+    const Component = {
+      following: Following,
+      notifications: Notifications,
+      list: List,
+      public: Public,
+      bookmarks: Bookmarks,
+      favourites: Favourites,
+      hashtag: Hashtag,
+    }[type];
+    return <Component {...params} />;
+  });
+
+  useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
+    try {
+      const index = parseInt(handler.keys[0], 10) - 1;
+      document.querySelectorAll('#columns > *')[index].focus();
+    } catch (e) {
+      console.error(e);
+    }
+  });
+
+  return <div id="columns">{components}</div>;
+}
+
+export default Columns;

src/pages/home.jsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect } from 'preact/hooks';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
 
+import Columns from '../components/columns';
 import Icon from '../components/icon';
 import Link from '../components/link';
 import db from '../utils/db';
@@ -26,48 +26,10 @@ function Home() {
     })();
   }, []);
 
-  const { shortcuts } = snapStates;
-  const { shortcutsColumnsMode } = snapStates.settings || {};
-  const [shortcutsComponents, setShortcutsComponents] = useState([]);
-  useEffect(() => {
-    if (shortcutsColumnsMode) {
-      const componentsPromises = shortcuts.map((shortcut) => {
-        const { type, ...params } = shortcut;
-        // Uppercase type
-        return import(`./${type}`).then((module) => {
-          const { default: Component } = module;
-          return <Component {...params} />;
-        });
-      });
-      Promise.all(componentsPromises)
-        .then((components) => {
-          setShortcutsComponents(components);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    }
-  }, [shortcutsColumnsMode, shortcuts]);
-
-  useHotkeys(
-    ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
-    (e, handler) => {
-      try {
-        const index = parseInt(handler.keys[0], 10) - 1;
-        document.querySelectorAll('#columns > *')[index].focus();
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    {
-      enabled: shortcutsColumnsMode,
-    },
-  );
-
   return (
     <>
-      {shortcutsColumnsMode ? (
+      {snapStates.settings.shortcutsColumnsMode ? (
-        <div id="columns">{shortcutsComponents}</div>
+        <Columns />
       ) : (
         <Following
           title="Home"