From 23a74a24fd46cce4fcff8e97ea93dee2c38a039e Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.company>
Date: Wed, 25 Dec 2024 11:09:15 -0700
Subject: [PATCH] [wip] initial work

---
 packages/client/src/components/App.tsx         |  2 +-
 packages/client/src/components/Chat/Chat.tsx   | 18 ++++++++++++++----
 .../src/components/Chat/OpenChatButton.tsx     | 13 +++++--------
 .../src/components/Settings/ChatSettings.tsx   | 16 ++++++++++------
 packages/client/src/contexts/AppContext.tsx    |  9 +++++++--
 5 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx
index 1ed9799..770166a 100644
--- a/packages/client/src/components/App.tsx
+++ b/packages/client/src/components/App.tsx
@@ -140,7 +140,7 @@ const AppInner = () => {
       <CanvasWrapper />
       <ToolbarWrapper />
 
-      {/* <DynamicallyLoadChat /> */}
+      <DynamicallyLoadChat />
 
       <DebugModal />
       <SettingsSidebar />
diff --git a/packages/client/src/components/Chat/Chat.tsx b/packages/client/src/components/Chat/Chat.tsx
index d270935..31cbee7 100644
--- a/packages/client/src/components/Chat/Chat.tsx
+++ b/packages/client/src/components/Chat/Chat.tsx
@@ -1,12 +1,22 @@
 import { useEffect, useRef, useState } from "react";
+import { faComments } from "@fortawesome/free-solid-svg-icons";
+import { useAppContext } from "../../contexts/AppContext";
+import { SidebarBase } from "../SidebarBase";
 
 const Chat = () => {
-  const ref = useRef<HTMLDivElement | null>(null);
+  const { chatSidebar, setChatSidebar } = useAppContext();
 
   return (
-    <div ref={ref} style={{ position: "fixed", top: 0, left: 0, zIndex: 999 }}>
-      chat
-    </div>
+    <SidebarBase
+      shown={chatSidebar}
+      setSidebarShown={setChatSidebar}
+      icon={faComments}
+      title="Chat"
+      description=""
+      side="Right"
+    >
+      <div>hi</div>
+    </SidebarBase>
   );
 };
 
diff --git a/packages/client/src/components/Chat/OpenChatButton.tsx b/packages/client/src/components/Chat/OpenChatButton.tsx
index 1f16221..7e83bbb 100644
--- a/packages/client/src/components/Chat/OpenChatButton.tsx
+++ b/packages/client/src/components/Chat/OpenChatButton.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faComments } from "@fortawesome/free-solid-svg-icons";
 
 const OpenChatButton = () => {
-  const { config } = useAppContext();
+  const { config, setChatSidebar } = useAppContext();
   const { notificationCount, doLogin } = useChatContext();
 
   return (
@@ -15,15 +15,12 @@ const OpenChatButton = () => {
       color="danger"
       size="sm"
     >
-      {
-        config?.chat?.element_host && 
-        <Button 
-          onPress={doLogin}
-          variant="faded"
-        >
+      {config?.chat?.element_host && (
+        <Button onPress={() => setChatSidebar((v) => !v)} variant="faded">
           <FontAwesomeIcon icon={faComments} />
           <p>Chat</p>
-        </Button>}
+        </Button>
+      )}
     </Badge>
   );
 };
diff --git a/packages/client/src/components/Settings/ChatSettings.tsx b/packages/client/src/components/Settings/ChatSettings.tsx
index 8653355..6673dc6 100644
--- a/packages/client/src/components/Settings/ChatSettings.tsx
+++ b/packages/client/src/components/Settings/ChatSettings.tsx
@@ -18,14 +18,18 @@ export const ChatSettings = () => {
           />
           <h2 className="text-xl">Chat</h2>
         </div>
-        <p className="text-default-600 text-xs">Chatting with other canvas users</p>
+        <p className="text-default-600 text-xs">
+          Chatting with other canvas users
+        </p>
       </header>
       <section>
-        <React.Suspense>{loadChat && 
-          <div className="mt-4">
-            <InnerChatSettings />
-          </div>  
-        }</React.Suspense>
+        <React.Suspense>
+          {loadChat && (
+            <div className="mt-4">
+              <InnerChatSettings />
+            </div>
+          )}
+        </React.Suspense>
       </section>
     </div>
   );
diff --git a/packages/client/src/contexts/AppContext.tsx b/packages/client/src/contexts/AppContext.tsx
index 6651ad3..aa7e391 100644
--- a/packages/client/src/contexts/AppContext.tsx
+++ b/packages/client/src/contexts/AppContext.tsx
@@ -24,6 +24,8 @@ interface IAppContext {
 
   loadChat: boolean;
   setLoadChat: (v: boolean) => void;
+  chatSidebar: boolean;
+  setChatSidebar: React.Dispatch<React.SetStateAction<boolean>>;
 
   infoSidebar: boolean;
   setInfoSidebar: (v: boolean) => void;
@@ -39,7 +41,7 @@ interface IAppContext {
   heatmapOverlay: IMapOverlay;
   setHeatmapOverlay: React.Dispatch<React.SetStateAction<IMapOverlay>>;
   pixelPulses: boolean;
-  setPixelPulses: (state: boolean) => void
+  setPixelPulses: (state: boolean) => void;
 
   profile?: string; // sub
   setProfile: (v?: string) => void;
@@ -101,6 +103,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
 
   // --- settings ---
   const [loadChat, _setLoadChat] = useState(false);
+  const [chatSidebar, setChatSidebar] = useState(false);
 
   const [pixels, setPixels] = useState({ available: 0 });
   const [undo, setUndo] = useState<{ available: true; expireAt: number }>();
@@ -125,7 +128,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
     opacity: 1,
     loading: false,
   });
-  const [pixelPulses, setPixelPulses] = useState<boolean>(false)
+  const [pixelPulses, setPixelPulses] = useState<boolean>(false);
 
   const [profile, setProfile] = useState<string>();
 
@@ -222,6 +225,8 @@ export const AppContext = ({ children }: PropsWithChildren) => {
         undo,
         loadChat,
         setLoadChat,
+        chatSidebar,
+        setChatSidebar,
         connected,
         hasAdmin,
         pixelWhois,
-- 
GitLab