SIdebar

src/App.tsx

@@ -7,11 +7,11 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "./components/ui/resizable";
-import Sidebar from "./components/view/Sidebar";
 import { ThemeProvider } from "next-themes";
 import Page from "./components/page/PageView";
 import { SettingsDialog } from "./components/settings/SettingsDialog";
 import { TooltipProvider } from "./components/ui/tooltip";
+import Sidebar from "./components/sidebar/Sidebar";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);

src/app/app.ts

@@ -36,6 +36,7 @@ export default class Enclave<P = Page> {
   public isSettingsOpen: boolean;
   public forceRender: () => void;
   public page?: P;
+  public sidebarPageKind: "server" | "main";
   public config?: Config;
   public backendConfig: BackendConfig;
 
@@ -47,6 +48,7 @@ export default class Enclave<P = Page> {
       isMuted: false,
       isDeaf: false,
     };
+    this.sidebarPageKind = "main";
   }
 
   public async init() {
@@ -106,6 +108,8 @@ export default class Enclave<P = Page> {
   }
 
   public async connectToServer(hostname: string, isSecure: boolean) {
+    this.sidebarPageKind = "server";
+
     if (this.server) {
       this.server.disconnect();
     }

src/components/dialog/AddServerDialog.tsx

@@ -77,7 +77,7 @@ export function AddServerDialog({ onAdd }: AddServerDialogProps) {
         render={() => (
           <Button
             variant="secondary"
-            className="aspect-square w-full h-auto rounded-full"
+            className="aspect-square w-full h-auto rounded-lg"
             onClick={() => setOpen(true)}
           >
             <PlusIcon />

src/components/sidebar/MainPageSidebar.tsx

@@ -0,0 +1,9 @@
+import Enclave from "@/app/app";
+
+export default function MainPageSidebar({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {
+  return null;
+}

src/components/sidebar/ServerSidebar.tsx

@@ -2,7 +2,7 @@ import Enclave from "@/app/app";
 import { Channel, ChannelKind } from "@/lib/types";
 import { ChevronDown, ChevronUp, HashIcon, Volume2Icon } from "lucide-react";
 import { useState } from "react";
-import StatusCard from "./StatusCard";
+import StatusCard from "../view/StatusCard";
 import { cn } from "@/lib/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 
@@ -150,7 +150,7 @@ export function RenderChannels({
   );
 }
 
-export default function Sidebar({
+export default function ServerSidebar({
   appRef,
 }: {
   appRef: React.RefObject<Enclave | null>;

src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,18 @@
+import Enclave from "@/app/app";
+import ServerSidebar from "./ServerSidebar";
+import MainPageSidebar from "./MainPageSidebar";
+
+export default function Sidebar({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {
+  switch (appRef.current?.sidebarPageKind) {
+    case "main":
+      return <MainPageSidebar appRef={appRef} />;
+    case "server":
+      return <ServerSidebar appRef={appRef} />;
+  }
+
+  return <MainPageSidebar appRef={appRef} />;
+}

src/components/view/ServerList.tsx

@@ -2,6 +2,8 @@ import Enclave from "@/app/app";
 import { getHTTPUrl, saveServerList } from "@/lib/serverList";
 import { AddServerDialog } from "../dialog/AddServerDialog";
 import { cn } from "@/lib/utils";
+import { Button } from "../ui/button";
+import { CommandIcon } from "lucide-react";
 
 export default function ServerList({
   appRef,
@@ -12,6 +14,19 @@ export default function ServerList({
 
   return (
     <aside className="w-16 h-screen p-2 flex flex-col gap-2.5 border-r border-r-border shrink-0">
+      <Button
+        variant="secondary"
+        className="aspect-square w-full h-auto rounded-full"
+        onClick={() => {
+          if (appRef.current) {
+            appRef.current.sidebarPageKind = "main";
+            appRef.current.page = undefined;
+            appRef.current.forceRender();
+          }
+        }}
+      >
+        <CommandIcon />
+      </Button>
       {appRef.current.serverList.map((server) => {
         return (
           <img
@@ -34,7 +49,6 @@ export default function ServerList({
           />
         );
       })}
-
       <AddServerDialog
         onAdd={(hostname, isSecure) => {
           if (!appRef.current) {