Added sidebar

package-lock.json

@@ -23,6 +23,7 @@
         "lucide-react": "^1.31.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-resizable-panels": "^4.12.3",
         "shadcn": "^4.18.0",
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.3.3",
@@ -5348,6 +5349,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "4.12.3",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.12.3.tgz",
+      "integrity": "sha512-GHMJWnDXui/3RX4bT+cgBP+N3N2nkwcoZATr/2xLFpqQQe7TlBrE0cGM0dUa9ceT7A90tUrSRsiqgRG+g0/2AA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/recast": {
       "version": "0.23.21",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.21.tgz",

package.json

@@ -25,6 +25,7 @@
     "lucide-react": "^1.31.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-resizable-panels": "^4.12.3",
     "shadcn": "^4.18.0",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",

src/App.tsx

@@ -2,6 +2,12 @@ import { useReducer, useRef } from "react";
 import Enclave from "@/app/app";
 import ServerList from "./components/view/ServerList";
 import { NewProfilePage } from "./components/view/NewProfileView";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "./components/ui/resizable";
+import Sidebar from "./components/view/Sidebar";
 
 export default function App() {
   const appRef = useRef<Enclave | null>(null);
@@ -21,12 +27,23 @@ export default function App() {
   }
 
   return (
-    <main className="size-screen">
+    <main className="size-screen flex">
       {appRef.current?.accounts &&
       appRef.current.accounts.accounts.length === 0 ? (
         <NewProfilePage appRef={appRef} />
       ) : (
-        <ServerList appRef={appRef} />
+        <>
+          <ServerList appRef={appRef} />
+          <ResizablePanelGroup orientation="horizontal" className="h-screen">
+            <ResizablePanel defaultSize="420px">
+              <Sidebar appRef={appRef} />
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize="100%">
+              <div className="h-screen"></div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </>
       )}
     </main>
   );

src/components/ui/resizable.tsx

@@ -0,0 +1,48 @@
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

src/components/view/Sidebar.tsx

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