From 44f7f713b95b8c6646a4aa4cb4f5a1db053b7e53 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 24 Mar 2025 15:19:28 -0600
Subject: [PATCH] Update SidebarSettings.tsx

---
 .../features/sidebars/SidebarPrimary.tsx      | 112 +++++++++---------
 .../features/sidebars/SidebarSettings.tsx     |  16 ++-
 2 files changed, 68 insertions(+), 60 deletions(-)

diff --git a/web/src/components/features/sidebars/SidebarPrimary.tsx b/web/src/components/features/sidebars/SidebarPrimary.tsx
index fcadba0f3..365d8ab6a 100644
--- a/web/src/components/features/sidebars/SidebarPrimary.tsx
+++ b/web/src/components/features/sidebars/SidebarPrimary.tsx
@@ -150,13 +150,16 @@ export const SidebarPrimary = React.memo(() => {
 
   const onCloseSupportModal = useMemoizedFn(() => setOpenSupportModal(false));
 
+  const HeaderMemoized = useMemo(() => <SidebarPrimaryHeader />, []);
+  const FooterMemoized = useMemo(() => <SidebarUserFooter />, []);
+
   return (
     <>
       <Sidebar
         content={sidebarItems}
-        header={<SidebarPrimaryHeader />}
+        header={HeaderMemoized}
         activeItem={currentRoute}
-        footer={<SidebarUserFooter />}
+        footer={FooterMemoized}
       />
 
       <GlobalModals openSupportModal={openSupportModal} onCloseSupportModal={onCloseSupportModal} />
@@ -166,67 +169,60 @@ export const SidebarPrimary = React.memo(() => {
 
 SidebarPrimary.displayName = 'SidebarPrimary';
 
-const SidebarPrimaryHeader = React.memo(
-  () => {
-    const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
-    useHotkeys('C', () => {
-      onChangePage(BusterRoutes.APP_HOME);
-    });
+const SidebarPrimaryHeader: React.FC = () => {
+  const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
+  useHotkeys('C', () => {
+    onChangePage(BusterRoutes.APP_HOME);
+  });
 
-    return (
-      <div className="flex items-center justify-between">
-        <BusterLogoWithText />
-        <div className="flex items-center gap-2">
-          <Tooltip title="Settings">
-            <Link href={createBusterRoute({ route: BusterRoutes.SETTINGS_PROFILE })}>
-              <Button prefix={<Gear />} variant="ghost" />
-            </Link>
-          </Tooltip>
-          <Tooltip title="Start a chat" shortcuts={['C']}>
-            <Link href={createBusterRoute({ route: BusterRoutes.APP_HOME })}>
-              <Button
-                size="tall"
-                rounding={'large'}
-                prefix={
-                  <div className="flex items-center justify-center">
-                    <PencilSquareIcon />
-                  </div>
-                }
-              />
-            </Link>
-          </Tooltip>
-        </div>
+  return (
+    <div className="flex items-center justify-between">
+      <BusterLogoWithText />
+      <div className="flex items-center gap-2">
+        <Tooltip title="Settings">
+          <Link href={createBusterRoute({ route: BusterRoutes.SETTINGS_PROFILE })}>
+            <Button prefix={<Gear />} variant="ghost" />
+          </Link>
+        </Tooltip>
+        <Tooltip title="Start a chat" shortcuts={['C']}>
+          <Link href={createBusterRoute({ route: BusterRoutes.APP_HOME })}>
+            <Button
+              size="tall"
+              rounding={'large'}
+              prefix={
+                <div className="flex items-center justify-center">
+                  <PencilSquareIcon />
+                </div>
+              }
+            />
+          </Link>
+        </Tooltip>
       </div>
-    );
-  },
-  () => true
-);
+    </div>
+  );
+};
 
-SidebarPrimaryHeader.displayName = 'SidebarPrimaryHeader';
+const GlobalModals = ({
+  openSupportModal,
+  onCloseSupportModal
+}: {
+  openSupportModal: boolean;
+  onCloseSupportModal: () => void;
+}) => {
+  const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal);
+  const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal);
+  const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false));
+  const isAnonymousUser = useUserConfigContextSelector((state) => state.isAnonymousUser);
 
-const GlobalModals = React.memo(
-  ({
-    openSupportModal,
-    onCloseSupportModal
-  }: {
-    openSupportModal: boolean;
-    onCloseSupportModal: () => void;
-  }) => {
-    const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal);
-    const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal);
-    const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false));
-    const isAnonymousUser = useUserConfigContextSelector((state) => state.isAnonymousUser);
+  if (isAnonymousUser) return null;
 
-    if (isAnonymousUser) return null;
-
-    return (
-      <>
-        <InvitePeopleModal open={openInviteModal} onClose={onCloseInviteModal} />
-        <SupportModal open={openSupportModal} onClose={onCloseSupportModal} />
-      </>
-    );
-  }
-);
+  return (
+    <>
+      <InvitePeopleModal open={openInviteModal} onClose={onCloseInviteModal} />
+      <SupportModal open={openSupportModal} onClose={onCloseSupportModal} />
+    </>
+  );
+};
 GlobalModals.displayName = 'GlobalModals';
 
 const favoritesDropdown = (
diff --git a/web/src/components/features/sidebars/SidebarSettings.tsx b/web/src/components/features/sidebars/SidebarSettings.tsx
index 35f525743..c7f1e4c32 100644
--- a/web/src/components/features/sidebars/SidebarSettings.tsx
+++ b/web/src/components/features/sidebars/SidebarSettings.tsx
@@ -74,12 +74,24 @@ export const SidebarSettings: React.FC<{}> = React.memo(({}) => {
     return items;
   }, [isAdmin]);
 
+  console.log(currentParentRoute);
+
   return (
     <Sidebar
       content={content}
-      header={<SidebarSettingsHeader />}
+      header={useMemo(
+        () => (
+          <SidebarSettingsHeader />
+        ),
+        []
+      )}
       activeItem={currentParentRoute}
-      footer={<SidebarUserFooter />}
+      footer={useMemo(
+        () => (
+          <SidebarUserFooter />
+        ),
+        []
+      )}
     />
   );
 });