rm some unused icons, lazy-load some views

package.json

@@ -30,6 +30,7 @@
     "nostr-relaypool": "^0.6.28",
     "nostr-tools": "^1.14.2",
     "preact": "^10.17.1",
+    "preact-async-route": "^2.2.1",
     "preact-router": "^4.1.2",
     "react-helmet": "^6.1.0",
     "react-string-replace": "^1.1.1"

src/js/Main.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import AsyncRoute from 'preact-async-route';
 import { Router, RouterOnChangeArgs } from 'preact-router';
 
 import useLocalState from '@/state/useLocalState.ts';
-import Explorer from '@/views/explorer/Explorer.tsx';
 
 import Footer from './components/Footer';
 import Show from './components/helpers/Show';
@@ -13,7 +13,6 @@ import localState from './state/LocalState.ts';
 import { translationLoaded } from './translations/Translation.mjs';
 import Helpers from './utils/Helpers';
 import About from './views/About';
-import Chat from './views/chat/Chat';
 import Global from './views/feeds/Global';
 import Home from './views/feeds/Home';
 import Notifications from './views/feeds/Notifications';
@@ -26,7 +25,6 @@ import Follows from './views/profile/Follows.tsx';
 import Profile from './views/profile/Profile.tsx';
 import Search from './views/Search';
 import LogoutConfirmation from './views/settings/LogoutConfirmation.tsx';
-import Settings from './views/settings/Settings';
 import Subscribe from './views/Subscribe';
 
 import '@fontsource/lato/400.css';
@@ -99,10 +97,18 @@ const Main = () => {
             <SearchFeed path="/search/:query" />
             <Login path="/login" fullScreen={true} />
             <Notifications path="/notifications" />
-            <Chat path="/chat/:id?" />
+            <AsyncRoute
+              path="/chat/:id?"
+              getComponent={() => import('./views/chat/Chat').then((module) => module.default)}
+            />
             <Note path="/post/:id+" />
             <About path="/about" />
-            <Settings path="/settings/:page?" />
+            <AsyncRoute
+              path="/settings/:page?"
+              getComponent={() =>
+                import('./views/settings/Settings').then((module) => module.default)
+              }
+            />
             <LogoutConfirmation path="/logout" />
             <EditProfile path="/profile/edit" />
             <Subscribe path="/subscribe" />
@@ -111,7 +117,12 @@ const Main = () => {
             <Profile path="/:id/likes" tab="likes" />
             <Follows path="/follows/:id" />
             <Follows followers={true} path="/followers/:id" />
-            <Explorer path="/explorer/:p?" />
+            <AsyncRoute
+              path="/explorer/:p?"
+              getComponent={() =>
+                import('./views/explorer/Explorer').then((module) => module.default)
+              }
+            />
             <NoteOrProfile path="/:id" />
           </Router>
         </div>

src/js/utils/Icons.tsx

@@ -22,41 +22,6 @@ export default {
     </svg>
   ),
 
-  close: (
-    <svg height="25px" viewBox="0 0 329.26933 329" width="25px" fill="currentColor">
-      <path d="m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0" />
-    </svg>
-  ),
-
-  play: (
-    <svg
-      x="0px"
-      y="0px"
-      height="25px"
-      width="25px"
-      viewBox="0 0 30.051 30.051"
-      fill="currentColor"
-      style="enable-background:new 0 0 30.051 30.051;"
-    >
-      <path d="M19.982,14.438l-6.24-4.536c-0.229-0.166-0.533-0.191-0.784-0.062c-0.253,0.128-0.411,0.388-0.411,0.669v9.069 c0,0.284,0.158,0.543,0.411,0.671c0.107,0.054,0.224,0.081,0.342,0.081c0.154,0,0.31-0.049,0.442-0.146l6.24-4.532 c0.197-0.145,0.312-0.369,0.312-0.607C20.295,14.803,20.177,14.58,19.982,14.438z" />
-      <path d="M15.026,0.002C6.726,0.002,0,6.728,0,15.028c0,8.297,6.726,15.021,15.026,15.021c8.298,0,15.025-6.725,15.025-15.021 C30.052,6.728,23.324,0.002,15.026,0.002z M15.026,27.542c-6.912,0-12.516-5.601-12.516-12.514c0-6.91,5.604-12.518,12.516-12.518 c6.911,0,12.514,5.607,12.514,12.518C27.541,21.941,21.937,27.542,15.026,27.542z" />
-    </svg>
-  ),
-
-  pause: (
-    <svg
-      enable-background="new 0 0 511.448 511.448"
-      height="25px"
-      width="25px"
-      viewBox="0 0 511.448 511.448"
-      fill="currentColor"
-    >
-      <path d="m436.508 74.94c-99.913-99.913-261.64-99.928-361.567 0-99.913 99.913-99.928 261.64 0 361.567 99.913 99.913 261.64 99.928 361.567 0 99.912-99.912 99.927-261.639 0-361.567zm-180.784 394.45c-117.816 0-213.667-95.851-213.667-213.667s95.851-213.666 213.667-213.666 213.666 95.851 213.666 213.667-95.85 213.666-213.666 213.666z" />
-      <path d="m298.39 160.057c-11.598 0-21 9.402-21 21v149.333c0 11.598 9.402 21 21 21s21-9.402 21-21v-149.333c0-11.598-9.401-21-21-21z" />
-      <path d="m213.057 160.057c-11.598 0-21 9.402-21 21v149.333c0 11.598 9.402 21 21 21s21-9.402 21-21v-149.333c0-11.598-9.401-21-21-21z" />
-    </svg>
-  ),
-
   newFollower: (
     <svg
       width="24"
@@ -73,23 +38,6 @@ export default {
       />
     </svg>
   ),
-  menu: (
-    <svg
-      width="28"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-      />
-    </svg>
-  ),
   attach: (
     <svg
       width="24"
@@ -106,32 +54,6 @@ export default {
       />
     </svg>
   ),
-  search: (
-    <svg width="28" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
-      <path
-        fill-rule="evenodd"
-        d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  ),
-  global: (
-    <svg
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
-      />
-    </svg>
-  ),
   network: (
     <svg
       fill="currentColor"

yarn.lock

@@ -4298,6 +4298,11 @@ postcss@^8, postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.29:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact-async-route@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/preact-async-route/-/preact-async-route-2.2.1.tgz#729f8f8650281973251fbbf852d5004f32f48594"
+  integrity sha512-8bg1007akXs3YDmzYT4McaTe6ji2FIzcc0/NTlu+vjJaKPNQ8lNG/HQ6LP+FoIxQ4m/KH5vvJCHJN5ADp2iNGA==
+
 preact-router@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/preact-router/-/preact-router-4.1.2.tgz#f44b03737b670eeaec958563582eb8c4efaa87a5"