From 8f2b29abb590e9b282362f3bcfe418c2d9d98dbc Mon Sep 17 00:00:00 2001
From: Ategon Dev <blue40465@gmail.com>
Date: Mon, 15 Jul 2024 18:29:36 +0000
Subject: [PATCH] Settings redesign

---
 .../client/src/components/Info/InfoHeader.tsx | 29 ---------
 .../src/components/Info/InfoSidebar.tsx       | 40 +++----------
 .../components/Overlay/OverlaySettings.tsx    | 11 ++--
 .../src/components/Settings/ChatSettings.tsx  | 27 +++++----
 .../components/Settings/SettingsSidebar.tsx   | 59 ++++++++-----------
 .../components/Settings/TemplateSettings.tsx  | 25 ++++----
 .../client/src/components/SidebarBase.tsx     | 56 ++++++++++++++++++
 7 files changed, 128 insertions(+), 119 deletions(-)
 delete mode 100644 packages/client/src/components/Info/InfoHeader.tsx
 create mode 100644 packages/client/src/components/SidebarBase.tsx

diff --git a/packages/client/src/components/Info/InfoHeader.tsx b/packages/client/src/components/Info/InfoHeader.tsx
deleted file mode 100644
index 90101b5..0000000
--- a/packages/client/src/components/Info/InfoHeader.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button } from "@nextui-org/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
-
-export type InfoHeaderProps = { 
-  setInfoSidebar: (value: boolean) => void 
-}
-
-export const InfoHeader = ({ setInfoSidebar }: InfoHeaderProps) => {
-  return (
-    <header className="flex p-2 justify-between items-center">
-      <div>
-        <div className="flex items-center gap-2">
-          <FontAwesomeIcon icon={faInfoCircle} size="lg" />
-          <div>
-            <h1 className="text-xl">Info</h1>
-            <p className="text-xs text-default-600">Information about the event</p>
-          </div>
-        </div>
-        
-      </div>
-
-      <Button size="sm" isIconOnly onClick={() => setInfoSidebar(false)}>
-        <FontAwesomeIcon icon={faXmark} />
-      </Button>
-    </header>
-  );
-};
diff --git a/packages/client/src/components/Info/InfoSidebar.tsx b/packages/client/src/components/Info/InfoSidebar.tsx
index 24a18c2..6abb8b3 100644
--- a/packages/client/src/components/Info/InfoSidebar.tsx
+++ b/packages/client/src/components/Info/InfoSidebar.tsx
@@ -1,9 +1,8 @@
-import { Divider } from "@nextui-org/react";
 import { useAppContext } from "../../contexts/AppContext";
-import { InfoHeader } from "./InfoHeader";
 import { InfoText } from "./InfoText";
 import { InfoButtons } from "./InfoButtons";
-import { motion } from "framer-motion"
+import { SidebarBase } from "../SidebarBase";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Information sidebar
@@ -16,39 +15,18 @@ export const InfoSidebar = () => {
   const { infoSidebar, setInfoSidebar } = useAppContext();
 
   return (
-    <div>
-      <motion.div
-        className="absolute w-screen h-screen z-50 left-0 top-0 bg-black"
-        initial={{ opacity: 0, visibility: 'hidden' }} 
-        animate={{ opacity: infoSidebar ? 0.25 : 0, visibility: infoSidebar ? 'visible' : 'hidden' }} 
-        transition={{ type: 'spring', stiffness: 50 }} 
-      />
-      <motion.div
-        className="min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black flex flex-col justify-between fixed left-0 h-full shadow-xl overflow-y-auto z-50 top-0"
-        initial={{ x: '-150%' }} 
-        animate={{ x: infoSidebar ? '-50%' : '-150%' }} 
-        transition={{ type: 'spring', stiffness: 50 }} 
-      />
-      <motion.div
-        className="min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black text-black dark:text-white flex flex-col justify-between fixed left-0 h-full shadow-xl overflow-y-auto z-50 top-0"
-        initial={{ x: '-100%' }} 
-        animate={{ x: infoSidebar ? 0 : '-100%' }} 
-        transition={{ type: 'spring', stiffness: 50 }} 
-      >
+    <SidebarBase shown={infoSidebar} setSidebarShown={setInfoSidebar} icon={faInfoCircle} title="Info" description="Information about the event" side="Left">
+      <div className="flex flex-col h-full justify-between">
         <div>
-          <InfoHeader setInfoSidebar={setInfoSidebar} />
-
-          <Divider />
-
           <InfoButtons />
           <InfoText />
         </div>
-
         <div className="p-2">
           <p className="text-xs text-default-600">Build {__COMMIT_HASH__}</p>
           <div id="grecaptcha-badge"></div>
         </div>
-      </motion.div>
-    </div>
-  );
-};
+      </div>
+      
+    </SidebarBase>
+  )
+};
\ No newline at end of file
diff --git a/packages/client/src/components/Overlay/OverlaySettings.tsx b/packages/client/src/components/Overlay/OverlaySettings.tsx
index 889ed5d..01c02ec 100644
--- a/packages/client/src/components/Overlay/OverlaySettings.tsx
+++ b/packages/client/src/components/Overlay/OverlaySettings.tsx
@@ -6,11 +6,12 @@ export const OverlaySettings = () => {
     useAppContext();
 
   return (
-    <>
-      <header>
-        <h2>Overlays</h2>
+    <div className="flex flex-col gap-4 p-2">
+      <header className="flex flex-col gap-2">
+        <h2 className="text-xl">Overlays</h2>
+        <p className="text-xs text-default-600">Overlays to display additional info over the canvas</p>
       </header>
-      <section>
+      <section className="flex flex-col gap-2">
         <Switch
           isSelected={blankOverlay.enabled}
           onValueChange={(v) =>
@@ -56,6 +57,6 @@ export const OverlaySettings = () => {
           />
         )}
       </section>
-    </>
+    </div>
   );
 };
diff --git a/packages/client/src/components/Settings/ChatSettings.tsx b/packages/client/src/components/Settings/ChatSettings.tsx
index fa90cb8..8653355 100644
--- a/packages/client/src/components/Settings/ChatSettings.tsx
+++ b/packages/client/src/components/Settings/ChatSettings.tsx
@@ -8,18 +8,25 @@ export const ChatSettings = () => {
   const { loadChat, setLoadChat } = useAppContext();
 
   return (
-    <>
-      <header>
-        <Switch
-          size="sm"
-          isSelected={loadChat || false}
-          onValueChange={setLoadChat}
-        />
-        <h2>Chat</h2>
+    <div className="flex flex-col p-2">
+      <header className="flex flex-col gap-2">
+        <div className="flex items-center">
+          <Switch
+            size="sm"
+            isSelected={loadChat || false}
+            onValueChange={setLoadChat}
+          />
+          <h2 className="text-xl">Chat</h2>
+        </div>
+        <p className="text-default-600 text-xs">Chatting with other canvas users</p>
       </header>
       <section>
-        <React.Suspense>{loadChat && <InnerChatSettings />}</React.Suspense>
+        <React.Suspense>{loadChat && 
+          <div className="mt-4">
+            <InnerChatSettings />
+          </div>  
+        }</React.Suspense>
       </section>
-    </>
+    </div>
   );
 };
diff --git a/packages/client/src/components/Settings/SettingsSidebar.tsx b/packages/client/src/components/Settings/SettingsSidebar.tsx
index cc00779..7334faa 100644
--- a/packages/client/src/components/Settings/SettingsSidebar.tsx
+++ b/packages/client/src/components/Settings/SettingsSidebar.tsx
@@ -1,41 +1,34 @@
-import { Button } from "@nextui-org/react";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
 import { useAppContext } from "../../contexts/AppContext";
+import { SidebarBase } from "../SidebarBase";
+import { Button, Divider } from "@nextui-org/react";
 import { TemplateSettings } from "./TemplateSettings";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
 import { ChatSettings } from "./ChatSettings";
 import { OverlaySettings } from "../Overlay/OverlaySettings";
 
 export const SettingsSidebar = () => {
-  const { settingsSidebar, setSettingsSidebar, setShowKeybinds } =
-    useAppContext();
+  const { settingsSidebar, setSettingsSidebar, setShowKeybinds } = useAppContext();
 
   return (
-    <div
-      className="sidebar sidebar-right bg-white text-black dark:bg-black dark:text-white"
-      style={{ ...(settingsSidebar ? {} : { display: "none" }) }}
-    >
-      <header>
-        <h1>Settings</h1>
-        <div className="flex-grow" />
-        <Button size="sm" isIconOnly onClick={() => setSettingsSidebar(false)}>
-          <FontAwesomeIcon icon={faXmark} />
-        </Button>
-      </header>
-      <section>
-        abc
-        <Button
-          onPress={() => {
-            setShowKeybinds(true);
-            setSettingsSidebar(false);
-          }}
-        >
-          Keybinds
-        </Button>
-      </section>
-      <TemplateSettings />
-      <ChatSettings />
-      <OverlaySettings />
-    </div>
-  );
-};
+    <SidebarBase shown={settingsSidebar} setSidebarShown={setSettingsSidebar} icon={faGear}  title="Settings" description="Configuration options for customizing your experience" side="Right">
+      <div className="p-4 flex flex-col gap-4">
+        <TemplateSettings />
+        <Divider />
+        <ChatSettings />
+        <Divider />
+        <OverlaySettings />
+        <Divider />
+        <section>
+          <Button
+            onPress={() => {
+              setShowKeybinds(true);
+              setSettingsSidebar(false);
+            }}
+          >
+            Keybinds
+          </Button>
+        </section>
+      </div>
+    </SidebarBase>
+  )
+};
\ No newline at end of file
diff --git a/packages/client/src/components/Settings/TemplateSettings.tsx b/packages/client/src/components/Settings/TemplateSettings.tsx
index 3bd7ae1..e7027e9 100644
--- a/packages/client/src/components/Settings/TemplateSettings.tsx
+++ b/packages/client/src/components/Settings/TemplateSettings.tsx
@@ -22,16 +22,19 @@ export const TemplateSettings = () => {
   } = useTemplateContext();
 
   return (
-    <>
-      <header>
-        <Switch
-          size="sm"
-          isSelected={enable || false}
-          onValueChange={setEnable}
-        />
-        <h2>Template</h2>
+    <div className="flex flex-col p-2">
+      <header className="flex flex-col gap-2">
+        <div className="flex items-center">
+          <Switch
+            size="sm"
+            isSelected={enable || false}
+            onValueChange={setEnable}
+          />
+          <h2 className="text-xl">Template</h2>
+        </div>
+        <p className="text-default-600 text-xs">Displaying an image over the canvas to help guide placing</p>
       </header>
-      <section>
+      {enable && <section className="flex flex-col gap-2 mt-4">
         <Input
           label="Template URL"
           size="sm"
@@ -102,7 +105,7 @@ export const TemplateSettings = () => {
         >
           Show Mobile Tools
         </Switch>
-      </section>
-    </>
+      </section>}
+    </div>
   );
 };
diff --git a/packages/client/src/components/SidebarBase.tsx b/packages/client/src/components/SidebarBase.tsx
new file mode 100644
index 0000000..b29d87f
--- /dev/null
+++ b/packages/client/src/components/SidebarBase.tsx
@@ -0,0 +1,56 @@
+import { motion } from "framer-motion"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { Button, Divider } from "@nextui-org/react";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Information sidebar
+ *
+ * TODO: add customization for this post-event (#46)
+ *
+ * @returns
+ */
+export const SidebarBase = ({children, shown, icon, setSidebarShown, title, description, side}: { children: string | JSX.Element | JSX.Element[], icon: IconProp, shown: boolean, setSidebarShown: (value: boolean) => void, title: string, description: string, side: "Left" | "Right" }) => {
+  return (
+    <div>
+      <motion.div
+        className={`absolute w-screen h-screen z-50 left-0 top-0 bg-black`}
+        initial={{ opacity: 0, visibility: 'hidden' }} 
+        animate={{ opacity: shown ? 0.25 : 0, visibility: shown ? 'visible' : 'hidden' }} 
+        transition={{ type: 'spring', stiffness: 50 }} 
+      />
+      <motion.div
+        className={`min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black flex flex-col justify-between fixed ${side == "Left" ? "left-0" : "right-0"}  h-full shadow-xl overflow-y-auto z-50 top-0`}
+        initial={{ x: side == "Left" ? '-150%' : '150%' }} 
+        animate={{ x: shown ? side == "Left" ? '-50%' : '50%' : side == "Left" ? '-150%' : '150%' }} 
+        transition={{ type: 'spring', stiffness: 50 }} 
+      />
+      <motion.div
+        className={`min-w-[20rem] max-w-[75vw] md:max-w-[30vw] bg-white dark:bg-black text-black dark:text-white flex flex-col fixed ${side == "Left" ? "left-0" : "right-0"} h-full shadow-xl overflow-y-auto z-50 top-0`}
+        initial={{ x: side == "Left" ? '-100%' : '100%' }} 
+        animate={{ x: shown ? 0 : side == "Left" ? '-100%' : '100%' }} 
+        transition={{ type: 'spring', stiffness: 50 }} 
+      >
+        <header className="flex p-4 justify-between items-center">
+          <div>
+            <div className="flex items-center gap-2">
+              <FontAwesomeIcon icon={icon} size="lg" />
+              <div>
+                <h1 className="text-xl">{title}</h1>
+                <p className="text-xs text-default-600">{description}</p>
+              </div>
+            </div>
+            
+          </div>
+
+          <Button size="sm" isIconOnly onClick={() => setSidebarShown(false)} variant="solid" className="ml-4">
+            <FontAwesomeIcon icon={faXmark} />
+          </Button>
+        </header>
+        <Divider />
+        {children}
+      </motion.div>
+    </div>
+  );
+};