Added sidebar

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>;
+}