Toggle-able sidebar

src/app/chat/[id]/page.tsx

@@ -9,9 +9,6 @@ import { StringMap } from "@/types/typeUtils";
 import { useParams } from "next/navigation";
 import { useMessages } from "@/hooks/use-messages";
 
-// In this testing instance we are assuming that the target's node is localhost
-// To make this functional we need to add a settings feature to the api
-
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
@@ -19,9 +16,12 @@ export default function DMs() {
   const addMessage = useMessages((s) => s.addMessage);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const [user, setUser] = useState<UserProfile | undefined>();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       addMessage={addMessage}
       wsRef={wsRef}
       userList={userList}
@@ -31,6 +31,7 @@ export default function DMs() {
       messages={messages}
     >
       <MessageBox
+        toggleSidebar={() => setSidebarOpen(true)}
         channelName={userList[id]?.display_name || id}
         userList={userList}
         setUserList={setUserList}

src/app/chat/page.tsx

@@ -14,9 +14,12 @@ export default function Chat() {
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
   const addMessage = useMessages((s) => s.addMessage);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       wsRef={wsRef}
       userList={userList}
       setUserList={setUserList}

src/app/server/[ip]/page.tsx

@@ -18,6 +18,7 @@ export default function Server() {
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
   const addMessage = useMessages((s) => s.addMessage);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   useEffect(() => {
     if (!ip) return;
@@ -26,6 +27,8 @@ export default function Server() {
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       wsRef={wsNodeRef}
       addMessage={() => {}}
       userList={userList}
@@ -33,6 +36,7 @@ export default function Server() {
       server={server}
     >
       <MessageBox
+        toggleSidebar={() => setSidebarOpen(true)}
         channelName="General"
         userList={userList}
         setUserList={setUserList}