From 7da0f97e60f071f75f5aca18a341d3bb95ca3a52 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 29 Aug 2026 14:37:17 +0200
Subject: [PATCH] SIdebar

---
 src/App.tsx                                    |  2 +-
 src/app/app.ts                                 |  4 ++++
 src/components/dialog/AddServerDialog.tsx      |  2 +-
 src/components/sidebar/MainPageSidebar.tsx     |  9 +++++++++
 .../Sidebar.tsx => sidebar/ServerSidebar.tsx}  |  4 ++--
 src/components/sidebar/Sidebar.tsx             | 18 ++++++++++++++++++
 src/components/view/ServerList.tsx             | 16 +++++++++++++++-
 7 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/components/sidebar/MainPageSidebar.tsx
 rename src/components/{view/Sidebar.tsx => sidebar/ServerSidebar.tsx} (98%)
 create mode 100644 src/components/sidebar/Sidebar.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 423ecfb..52d1655 100644
--- a/src/App.tsx
+++ b/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);
diff --git a/src/app/app.ts b/src/app/app.ts
index e8a298b..0878c61 100644
--- a/src/app/app.ts
+++ b/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();
     }
diff --git a/src/components/dialog/AddServerDialog.tsx b/src/components/dialog/AddServerDialog.tsx
index 580a198..e04e328 100644
--- a/src/components/dialog/AddServerDialog.tsx
+++ b/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 />
diff --git a/src/components/sidebar/MainPageSidebar.tsx b/src/components/sidebar/MainPageSidebar.tsx
new file mode 100644
index 0000000..258fd85
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/view/Sidebar.tsx b/src/components/sidebar/ServerSidebar.tsx
similarity index 98%
rename from src/components/view/Sidebar.tsx
rename to src/components/sidebar/ServerSidebar.tsx
index 47cdbdb..3b20c19 100644
--- a/src/components/view/Sidebar.tsx
+++ b/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>;
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
new file mode 100644
index 0000000..2eca1ea
--- /dev/null
+++ b/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} />;
+}
diff --git a/src/components/view/ServerList.tsx b/src/components/view/ServerList.tsx
index f23fd30..d6a8674 100644
--- a/src/components/view/ServerList.tsx
+++ b/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) {