feat: finish reimplementation of server list

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,25 +1,40 @@
 import { observer } from "mobx-react-lite";
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+
+import { useCallback } from "preact/hooks";
 
 import { ServerList } from "@revoltchat/ui";
 
+import { useApplicationState } from "../../../mobx/State";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
+/**
+ * Server list sidebar shim component
+ */
 export default observer(() => {
     const client = useClient();
-
+    const state = useApplicationState();
+    const { openScreen } = useIntermediate();
     const { server: server_id } = useParams<{ server?: string }>();
-    const servers = [...client.servers.values()];
+
+    const createServer = useCallback(
+        () =>
+            openScreen({
+                id: "special_input",
+                type: "create_server",
+            }),
+        [],
+    );
 
     return (
         <ServerList
-            active={server_id!}
-            servers={servers as any}
-            linkComponent={({ id, children }) => (
-                <Link to={`/server/${id}`}>
-                    <a>{children}</a>
-                </Link>
-            )}
+            client={client}
+            active={server_id}
+            createServer={createServer}
+            permit={state.notifications}
+            home={state.layout.getLastHomePath}
         />
     );
 });

src/context/index.tsx

@@ -1,11 +1,14 @@
-import { BrowserRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router, Link } from "react-router-dom";
 
+import { ContextMenuTrigger } from "preact-context-menu";
+import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
+import { LinkProvider, TextProvider, TrigProvider } from "@revoltchat/ui";
+
 import { hydrateState } from "../mobx/State";
 
 import Preloader from "../components/ui/Preloader";
-
 import { Children } from "../types/Preact";
 import Locale from "./Locale";
 import Theme from "./Theme";
@@ -28,14 +31,20 @@ export default function Context({ children }: { children: Children }) {
 
     return (
         <Router basename={import.meta.env.BASE_URL}>
-            <Locale>
-                <Intermediate>
-                    <Client>
-                        {children}
-                        <SyncManager />
-                    </Client>
-                </Intermediate>
-            </Locale>
+            <LinkProvider value={Link}>
+                <TextProvider value={Text as any}>
+                    <TrigProvider value={ContextMenuTrigger}>
+                        <Locale>
+                            <Intermediate>
+                                <Client>
+                                    {children}
+                                    <SyncManager />
+                                </Client>
+                            </Intermediate>
+                        </Locale>
+                    </TrigProvider>
+                </TextProvider>
+            </LinkProvider>
             <Theme />
         </Router>
     );

src/mobx/stores/Layout.ts

@@ -58,6 +58,9 @@ export default class Layout implements Store, Persistent<Data> {
         this.lastDiscoverPath = "/discover/servers";
         this.lastOpened = new ObservableMap();
         this.openSections = new ObservableMap();
+
+        this.getLastHomePath = this.getLastHomePath.bind(this);
+
         makeAutoObservable(this);
     }
 

src/pages/app.tsx

@@ -2,15 +2,15 @@ import { Route, Switch } from "react-router-dom";
 
 import { lazy, Suspense } from "preact/compat";
 
+import { Masks } from "@revoltchat/ui";
+
 import ErrorBoundary from "../lib/ErrorBoundary";
 import FakeClient from "../lib/FakeClient";
 
 import Context from "../context";
 import { CheckAuth } from "../context/revoltjs/CheckAuth";
 
-import Masks from "../components/ui/Masks";
 import Preloader from "../components/ui/Preloader";
-
 import Invite from "./invite/Invite";
 
 const Login = lazy(() => import("./login/Login"));