main and settings sidebar UI updates & improve performance using Link instead of <a>

frontend/src/components/Footer/index.jsx

@@ -1,6 +1,5 @@
 import System from "@/models/system";
 import paths from "@/utils/paths";
-import { safeJsonParse } from "@/utils/request";
 import {
   BookOpen,
   DiscordLogo,

frontend/src/components/SettingsButton/index.jsx

@@ -1,17 +1,29 @@
 import useUser from "@/hooks/useUser";
 import paths from "@/utils/paths";
-import { Wrench } from "@phosphor-icons/react";
+import { ArrowUUpLeft, Wrench } from "@phosphor-icons/react";
+import { Link } from "react-router-dom";
+import { useMatch } from "react-router-dom";
 
 export default function SettingsButton() {
+  const isInSettings = !!useMatch("/settings/*");
   const { user } = useUser();
+
+  if (isInSettings)
+    return (
+      <Link
+        to={paths.home()}
+        className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+      >
+        <ArrowUUpLeft className="h-5 w-5" weight="fill" />
+      </Link>
+    );
+
   return (
-    <a
+    <Link
-      href={
+      to={!!user?.role ? paths.settings.system() : paths.settings.appearance()}
-        !!user?.role ? paths.settings.system() : paths.settings.appearance()
-      }
       className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
     >
       <Wrench className="h-5 w-5" weight="fill" />
-    </a>
+    </Link>
   );
 }

frontend/src/components/SettingsSidebar/index.jsx

@@ -13,7 +13,6 @@ import {
   Database,
   Lock,
   House,
-  X,
   List,
   FileCode,
   Plugs,
@@ -25,6 +24,7 @@ import useUser from "@/hooks/useUser";
 import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 import { isMobile } from "react-device-detect";
 import Footer from "../Footer";
+import { Link } from "react-router-dom";
 
 export default function SettingsSidebar() {
   const { logo } = useLogo();
@@ -124,50 +124,40 @@ export default function SettingsSidebar() {
   }
 
   return (
-    <>
+    <div>
+      <Link
+        to={paths.home()}
+        className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
+      >
+        <img
+          src={logo}
+          alt="Logo"
+          className="rounded max-h-[24px]"
+          style={{ objectFit: "contain" }}
+        />
+      </Link>
       <div
         ref={sidebarRef}
-        style={{ height: "calc(100% - 32px)" }}
+        style={{ height: "calc(100% - 76px)" }}
-        className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
+        className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
       >
-        <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
+        <div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
-          {/* Header Information */}
+          <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
-          <div className="flex w-full items-center justify-between">
+            Instance Settings
-            <div className="flex shrink-0 max-w-[65%] items-center justify-start ml-2">
-              <img
-                src={logo}
-                alt="Logo"
-                className="rounded max-h-[40px]"
-                style={{ objectFit: "contain" }}
-              />
-            </div>
-            <div className="flex gap-x-2 items-center text-slate-500">
-              <a
-                href={paths.home()}
-                className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-              >
-                <X className="h-4 w-4" />
-              </a>
-            </div>
           </div>
-          <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-4 mb-0 ml-2">
+          <div className="relative h-full flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
-            Settings
-          </div>
-          {/* Primary Body */}
-          <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll">
             <div className="h-auto sidebar-items">
-              {/* Options */}
               <div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll">
                 <SidebarOptions user={user} />
               </div>
             </div>
-            <div>
+            <div className="mb-2">
               <Footer />
             </div>
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
@@ -196,15 +186,16 @@ const Option = ({
   return (
     <>
       <div className="flex gap-x-2 items-center justify-between text-white">
-        <a
+        <Link
-          href={href}
+          to={href}
           className={`
           transition-all duration-[200ms]
-          flex flex-grow w-[75%] h-[36px] gap-x-2 py-[5px] px-4 rounded justify-start items-center border
+          flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
+          hover:bg-workspace-item-selected-gradient hover:text-white hover:font-bold
           ${
             isActive
-              ? "bg-menu-item-selected-gradient border-slate-100 border-opacity-50 font-medium"
+              ? "bg-menu-item-selected-gradient font-bold border-outline"
-              : "hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent"
+              : "hover:bg-menu-item-selected-gradient text-white/30"
           }
         `}
         >
@@ -212,7 +203,7 @@ const Option = ({
           <p className="text-sm leading-loose text-opacity-60 whitespace-nowrap overflow-hidden ">
             {btnText}
           </p>
-        </a>
+        </Link>
       </div>
       {!!subOptions && (isActive || hasActiveChild) && (
         <div

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -23,8 +23,7 @@ export default function ActiveWorkspaces() {
   const [uploadHover, setUploadHover] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const { user } = useUser();
-  const match = useMatch("/workspace/:slug/settings/:tab");
+  const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
-  const isInWorkspaceSettings = !!match;
 
   useEffect(() => {
     async function getWorkspaces() {
@@ -92,12 +91,12 @@ export default function ActiveWorkspaces() {
                 href={isActive ? null : paths.workspace.chat(workspace.slug)}
                 className={`
               transition-all duration-[200ms]
-                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-slate-200 justify-start items-center
+                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
-                hover:bg-workspace-item-selected-gradient
+                hover:bg-workspace-item-selected-gradient hover:font-bold border-2 border-outline
                 ${
                   isActive
-                    ? "bg-workspace-item-selected-gradient"
+                    ? "bg-workspace-item-selected-gradient font-bold"
-                    : "border-[2px] border-outline"
+                    : ""
                 }`}
               >
                 <div className="flex flex-row justify-between w-full">
@@ -108,7 +107,7 @@ export default function ActiveWorkspaces() {
                       size={24}
                     />
                     <p
-                      className={`text-white text-[14px] leading-loose font-bold whitespace-nowrap overflow-hidden ${
+                      className={`text-white text-[14px] leading-loose whitespace-nowrap overflow-hidden ${
                         isActive ? "" : "text-opacity-80"
                       }`}
                     >

frontend/src/components/Sidebar/index.jsx

@@ -9,6 +9,8 @@ import useLogo from "@/hooks/useLogo";
 import useUser from "@/hooks/useUser";
 import Footer from "../Footer";
 import SettingsButton from "../SettingsButton";
+import { Link } from "react-router-dom";
+import paths from "@/utils/paths";
 
 export default function Sidebar() {
   const { user } = useUser();
@@ -22,14 +24,17 @@ export default function Sidebar() {
 
   return (
     <div>
-      <div className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]">
+      <Link
+        to={paths.home()}
+        className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]"
+      >
         <img
           src={logo}
           alt="Logo"
           className="rounded max-h-[24px]"
           style={{ objectFit: "contain" }}
         />
-      </div>
+      </Link>
       <div
         ref={sidebarRef}
         style={{ height: "calc(100% - 76px)" }}