Make the data selector checkboxes work like checkboxes (#5992)

## Problem
The scope selector checkboxes in the data picker don't behave like
checkboxes - only one at a time can be selected

## Fix
Update the code so that multiple scopes can be selected, and
checking/unchecking adds/removes from these scopes

### Manual Tests
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

editor/src/components/inspector/sections/component-section/data-selector-left-sidebar.tsx

@@ -17,12 +17,13 @@ interface SelectableScope {
 
 interface DataSelectorLeftSidebarProps {
   scopes: Array<SelectableScope>
-  activeScope: ElementPath | FileRootPath
+  activeScopes: Array<ElementPath | FileRootPath>
   setSelectedScope: (scope: ElementPath | FileRootPath) => void
 }
 
 export const DataSelectorLeftSidebar = React.memo((props: DataSelectorLeftSidebarProps) => {
-  const { scopes, setSelectedScope, activeScope } = props
+  const { scopes, setSelectedScope, activeScopes } = props
+
   return (
     <FlexColumn
       onClick={stopPropagation}
@@ -42,7 +43,7 @@ export const DataSelectorLeftSidebar = React.memo((props: DataSelectorLeftSideba
             <ScopeRow
               key={insertionCeilingToString(scope.scope)}
               scope={scope}
-              selected={insertionCeilingsEqual(scope.scope, activeScope)}
+              selected={activeScopes.some((s) => insertionCeilingsEqual(scope.scope, s))}
               disabled={!scope.hasContent}
               setSelectedScope={setSelectedScope}
             />

editor/src/components/inspector/sections/component-section/data-selector-modal.tsx

@@ -20,7 +20,7 @@ import {
   useColorTheme,
 } from '../../../../uuiui'
 import type { FileRootPath } from '../../../canvas/ui-jsx-canvas'
-import { insertionCeilingToString } from '../../../canvas/ui-jsx-canvas'
+import { insertionCeilingToString, insertionCeilingsEqual } from '../../../canvas/ui-jsx-canvas'
 import { Substores, useEditorState } from '../../../editor/store/store-hook'
 import { InspectorModal } from '../../widgets/inspector-modal'
 import {
@@ -84,21 +84,25 @@ export const DataSelectorModal = React.memo(
         return matchingScope
       }, [lowestInsertionCeiling, startingSelectedValuePath, scopeBuckets])
 
-      const [selectedScope, setSelectedScope] = React.useState<ElementPath | FileRootPath>(
-        lowestMatchingScope,
+      const [selectedScopes, setSelectedScopes] = React.useState<Array<ElementPath | FileRootPath>>(
+        [lowestMatchingScope],
       )
       const setSelectedScopeAndResetSelection = React.useCallback(
         (scope: ElementPath | FileRootPath) => {
-          setSelectedScope(scope)
-          setSelectedVariableOption(null)
+          setSelectedScopes((currentScopes) => {
+            const scopeAlreadySelected = currentScopes.some((s) => insertionCeilingsEqual(s, scope))
+            return scopeAlreadySelected
+              ? currentScopes.filter((s) => !insertionCeilingsEqual(s, scope))
+              : [...currentScopes, scope]
+          })
         },
         [],
       )
 
       const { filteredVariablesInScope } = useFilterVariablesInScope(
         allVariablesInScope,
         scopeBuckets,
-        selectedScope,
+        selectedScopes,
       )
 
       const searchBoxRef = React.useRef<HTMLInputElement>(null)
@@ -228,7 +232,7 @@ export const DataSelectorModal = React.memo(
             >
               <DataSelectorLeftSidebar
                 scopes={scopeLabels}
-                activeScope={selectedScope}
+                activeScopes={selectedScopes}
                 setSelectedScope={setSelectedScopeAndResetSelection}
               />
               <FlexColumn
@@ -418,24 +422,25 @@ function putVariablesIntoScopeBuckets(options: DataPickerOption[]): ScopeBuckets
 function useFilterVariablesInScope(
   options: DataPickerOption[],
   scopeBuckets: ScopeBuckets,
-  scopeToShow: ElementPath | FileRootPath | 'do-not-filter',
+  scopesToShow: Array<ElementPath | FileRootPath>,
 ): {
   filteredVariablesInScope: Array<DataPickerOption>
 } {
   return React.useMemo(() => {
-    if (scopeToShow === 'do-not-filter') {
+    if (scopesToShow.length === 0) {
       return {
         filteredVariablesInScope: options,
       }
     }
 
-    const matchingScope = findClosestMatchingScope(scopeToShow, scopeBuckets)
-    const filteredOptions: Array<DataPickerOption> =
-      scopeBuckets[insertionCeilingToString(matchingScope)] ?? []
+    const filteredOptions: Array<DataPickerOption> = scopesToShow.flatMap(
+      (scope) =>
+        scopeBuckets[insertionCeilingToString(findClosestMatchingScope(scope, scopeBuckets))] ?? [],
+    )
     return {
       filteredVariablesInScope: filteredOptions,
     }
-  }, [scopeBuckets, options, scopeToShow])
+  }, [scopeBuckets, options, scopesToShow])
 }
 
 function disabledButtonStyles(disabled: boolean): React.CSSProperties {