feat(explore): Persist explore toolbar state with local storage (#97952)

We want the open/closed state of the toolbar to persist across sessions.

Closes EXP-443

Author: Zylphrex

static/app/views/explore/logs/logsTab.tsx

@@ -19,6 +19,7 @@ import {parsePeriodToHours} from 'sentry/utils/duration/parsePeriodToHours';
 import {AggregationKey} from 'sentry/utils/fields';
 import {HOUR} from 'sentry/utils/formatters';
 import {useQueryClient, type InfiniteData} from 'sentry/utils/queryClient';
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import SchemaHintsList, {
@@ -131,7 +132,7 @@ export function LogsTabContent({
     return sortBys.map(formatSort);
   }, [sortBys]);
 
-  const [sidebarOpen, setSidebarOpen] = useState(
+  const [sidebarOpen, setSidebarOpen] = useSidebarOpen(
     !!(
       groupBys.some(Boolean) ||
       visualizes.some(
@@ -256,7 +257,7 @@ export function LogsTabContent({
         setMode(Mode.SAMPLES);
       }
     },
-    [setMode]
+    [setSidebarOpen, setMode]
   );
 
   const saveAsItems = useSaveAsItems({
@@ -360,7 +361,7 @@ export function LogsTabContent({
                     size="xs"
                   />
                 }
-                onClick={() => setSidebarOpen(x => !x)}
+                onClick={() => setSidebarOpen(!sidebarOpen)}
               />
             </Feature>
             <LogsGraphContainer>
@@ -424,3 +425,18 @@ export function LogsTabContent({
     </SearchQueryBuilderProvider>
   );
 }
+
+function useSidebarOpen(defaultExpanded: boolean) {
+  const [sidebarOpen, _setSidebarOpen] = useLocalStorageState(
+    'explore-logs-toolbar',
+    defaultExpanded ? 'expanded' : ''
+  );
+
+  const setSidebarOpen = useCallback(
+    (expanded: boolean) => {
+      _setSidebarOpen(expanded ? 'expanded' : '');
+    },
+    [_setSidebarOpen]
+  );
+  return [sidebarOpen === 'expanded', setSidebarOpen] as const;
+}

static/app/views/explore/spans/spansTab.tsx

@@ -31,12 +31,10 @@ import {
   ALLOWED_EXPLORE_VISUALIZE_AGGREGATES,
   type AggregationKey,
 } from 'sentry/utils/fields';
-import {decodeScalar} from 'sentry/utils/queryString';
 import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import {useLocation} from 'sentry/utils/useLocation';
-import {useNavigate} from 'sentry/utils/useNavigate';
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import usePrevious from 'sentry/utils/usePrevious';
@@ -104,24 +102,19 @@ export function SpansTabOnboarding({
 }
 
 function useControlSectionExpanded() {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const controlSectionExpanded = decodeScalar(location.query.toolbar);
+  const [controlSectionExpanded, _setControlSectionExpanded] = useLocalStorageState(
+    'explore-spans-toolbar',
+    'expanded'
+  );
+
   const setControlSectionExpanded = useCallback(
     (expanded: boolean) => {
-      const newControlSectionExpanded = expanded ? undefined : 'collapsed';
-      navigate({
-        ...location,
-        query: {
-          ...location.query,
-          toolbar: newControlSectionExpanded,
-        },
-      });
+      _setControlSectionExpanded(expanded ? 'expanded' : '');
     },
-    [location, navigate]
+    [_setControlSectionExpanded]
   );
 
-  return [controlSectionExpanded !== 'collapsed', setControlSectionExpanded] as const;
+  return [controlSectionExpanded === 'expanded', setControlSectionExpanded] as const;
 }
 
 interface SpanTabProps {