Merge pull request #940 from buster-so/big-nate-bus-1785-settings-side-bar-when-toggled

setting uses a different cookie

apps/web/src/components/features/sidebars/SidebarSettings.tsx

@@ -3,7 +3,9 @@ import { useIsUserAdmin, useIsUserRegistered } from '@/api/buster_rest/users/use
 import { BackButton } from '@/components/ui/buttons/BackButton';
 import ApartmentBuilding from '@/components/ui/icons/NucleoIconOutlined/apartment-building';
 import CircleUser from '@/components/ui/icons/NucleoIconOutlined/circle-user';
+import { COLLAPSED_HIDDEN, COLLAPSED_VISIBLE } from '@/components/ui/sidebar/config';
 import { createSidebarGroup } from '@/components/ui/sidebar/create-sidebar-item';
+import { AppTooltip } from '@/components/ui/tooltip';
 import LockCircle from '../../ui/icons/NucleoIconOutlined/lock-circle';
 import { type ISidebarGroup, Sidebar } from '../../ui/sidebar';
 import { ComponentErrorCard } from '../global/ComponentErrorCard';
@@ -96,7 +98,6 @@ const permissionAndSecurityItems: ISidebarGroup = createSidebarGroup({
 
 export const SidebarSettings = () => {
   const isAdmin = useIsUserAdmin();
-  const isUserRegistered = useIsUserRegistered();
 
   const sidebarItems = useMemo(() => {
     const items = [accountItems];
@@ -113,7 +114,7 @@ export const SidebarSettings = () => {
         content={sidebarItems}
         header={useMemo(() => <SidebarSettingsHeader />, [])}
         footer={useMemo(() => <SidebarUserFooter />, [])}
-        useCollapsible={isUserRegistered}
+        useCollapsible={false}
       />
     </ComponentErrorCard>
   );
@@ -124,6 +125,7 @@ SidebarSettings.displayName = 'SidebarSettings';
 const SidebarSettingsHeader = () => {
   return (
     <BackButton
+      className={COLLAPSED_HIDDEN}
       linkUrl={{
         to: '/app/home',
       }}

apps/web/src/components/ui/dropdown/DropdownBase.tsx

@@ -102,7 +102,6 @@ const DropdownMenuItem = React.forwardRef<
     )}
     //some weird bug in a nested menu required this
     onMouseDown={(e) => {
-      console.log('onMouseDown', closeOnSelect, e);
       if (!closeOnSelect) {
         e.stopPropagation();
         e.preventDefault();

apps/web/src/routes/app.tsx

@@ -1,16 +1,9 @@
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
-import { prefetchListDatasources } from '@/api/buster_rest/data_source';
-import { prefetchGetDatasets } from '@/api/buster_rest/datasets';
-import { prefetchGetUserFavorites } from '@/api/buster_rest/users/favorites/queryRequests';
 import { prefetchGetMyUserInfo } from '@/api/buster_rest/users/queryRequests';
 import { getAppLayout } from '@/api/server-functions/getAppLayout';
 import { AppProviders } from '@/context/Providers';
 import { getSupabaseSession } from '@/integrations/supabase/getSupabaseUserClient';
 import { preventBrowserCacheHeaders } from '@/middleware/shared-headers';
-import type { LayoutSize } from '../components/ui/layouts/AppLayout';
-
-const PRIMARY_APP_LAYOUT_ID = 'primary-sidebar';
-const DEFAULT_LAYOUT: LayoutSize = ['230px', 'auto'];
 
 export const Route = createFileRoute('/app')({
   head: () => {
@@ -35,13 +28,9 @@ export const Route = createFileRoute('/app')({
   loader: async ({ context }) => {
     const { queryClient } = context;
     try {
-      const [initialLayout, supabaseSession] = await Promise.all([
-        getAppLayout({ id: PRIMARY_APP_LAYOUT_ID }),
+      const [supabaseSession] = await Promise.all([
         getSupabaseSession(),
         prefetchGetMyUserInfo(queryClient),
-        prefetchGetUserFavorites(queryClient),
-        prefetchListDatasources(queryClient),
-        prefetchGetDatasets(queryClient),
       ]);
 
       if (!supabaseSession?.accessToken) {
@@ -50,10 +39,6 @@ export const Route = createFileRoute('/app')({
       }
 
       return {
-        initialLayout,
-        layoutId: PRIMARY_APP_LAYOUT_ID,
-        defaultLayout: DEFAULT_LAYOUT,
-
         supabaseSession,
       };
     } catch (error) {

apps/web/src/routes/app/_app.tsx

@@ -1,15 +1,36 @@
-import { createFileRoute, getRouteApi, Outlet } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { prefetchListDatasources } from '@/api/buster_rest/data_source';
+import { prefetchGetDatasets } from '@/api/buster_rest/datasets';
+import { prefetchGetUserFavorites } from '@/api/buster_rest/users/favorites';
+import { getAppLayout } from '@/api/server-functions/getAppLayout';
+import type { LayoutSize } from '@/components/ui/layouts/AppLayout';
 import { PrimaryAppLayout } from '../../layouts/PrimaryAppLayout';
 
-const routeApi = getRouteApi('/app');
+const PRIMARY_APP_LAYOUT_ID = 'primary-sidebar';
+const DEFAULT_LAYOUT: LayoutSize = ['230px', 'auto'];
 
 export const Route = createFileRoute('/app/_app')({
+  loader: async ({ context }) => {
+    const { queryClient } = context;
+    const [initialLayout] = await Promise.all([
+      getAppLayout({ id: PRIMARY_APP_LAYOUT_ID }),
+      prefetchGetUserFavorites(queryClient),
+      prefetchListDatasources(queryClient),
+      prefetchGetDatasets(queryClient),
+    ]);
+
+    return {
+      initialLayout,
+      defaultLayout: DEFAULT_LAYOUT,
+      layoutId: PRIMARY_APP_LAYOUT_ID,
+    };
+  },
   component: () => {
-    const { initialLayout, defaultLayout, layoutId } = routeApi.useLoaderData();
+    const { initialLayout, defaultLayout } = Route.useLoaderData();
     return (
       <PrimaryAppLayout
         initialLayout={initialLayout}
-        layoutId={layoutId}
+        layoutId={PRIMARY_APP_LAYOUT_ID}
         defaultLayout={defaultLayout}
       >
         <Outlet />

apps/web/src/routes/app/_settings.tsx

@@ -1,11 +1,22 @@
-import { createFileRoute, getRouteApi, Outlet } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { getAppLayout } from '@/api/server-functions/getAppLayout';
+import type { LayoutSize } from '@/components/ui/layouts/AppLayout';
 import { SettingsAppLayout } from '../../layouts/SettingsAppLayout';
 
-const routeApi = getRouteApi('/app');
+const SETTINGS_APP_LAYOUT_ID = 'settings-sidebar';
+const DEFAULT_LAYOUT: LayoutSize = ['230px', 'auto'];
 
 export const Route = createFileRoute('/app/_settings')({
+  loader: async () => {
+    const [initialLayout] = await Promise.all([getAppLayout({ id: SETTINGS_APP_LAYOUT_ID })]);
+    return {
+      initialLayout,
+      defaultLayout: DEFAULT_LAYOUT,
+      layoutId: SETTINGS_APP_LAYOUT_ID,
+    };
+  },
   component: () => {
-    const { initialLayout, layoutId, defaultLayout } = routeApi.useLoaderData();
+    const { initialLayout, layoutId, defaultLayout } = Route.useLoaderData();
 
     return (
       <SettingsAppLayout