feat(settings): remove Roll Your Own in favor of debug switches (#6487)

This PR removes the "Roll Your Own" panel (all the switched moved back
to the Settings menu), and supports showing debug switches selectively
![Monosnap screencast 2024-10-07
15-36-33](https://github.com/user-attachments/assets/c6fb89ca-39c6-47e8-a207-9d2ad0d07a2b)

**Manual Tests:**
I hereby swear that:

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

editor/src/components/canvas/controls/grid-controls.tsx

@@ -58,7 +58,6 @@ import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
-import { useRollYourOwnFeatures } from '../../navigator/left-pane/roll-your-own-pane'
 import CanvasActions from '../canvas-actions'
 import type { ControlWithProps } from '../canvas-strategies/canvas-strategy-types'
 import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'

editor/src/components/canvas/design-panel-root.tsx

@@ -35,8 +35,6 @@ import { EditorModes, isCommentMode } from '../editor/editor-modes'
 import { useAllowedToEditProject } from '../editor/store/collaborative-editing'
 import { useCanComment } from '../../core/commenting/comment-hooks'
 import { ElementsOutsideVisibleAreaIndicator } from '../editor/elements-outside-visible-area-indicator'
-import { isFeatureEnabled } from '../../utils/feature-switches'
-import { RollYourOwnFeaturesPane } from '../navigator/left-pane/roll-your-own-pane'
 import { AnimationContext } from './ui-jsx-canvas-renderer/animation-context'
 
 function isCodeEditorEnabled(): boolean {
@@ -163,10 +161,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     onClickTab(RightMenuTab.Settings)
   }, [onClickTab])
 
-  const onClickRollYourOwnTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.RollYourOwn)
-  }, [onClickTab])
-
   const canComment = useCanComment()
 
   const allowedToEdit = useAllowedToEditProject()
@@ -235,14 +229,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
             selected={selectedTab === RightMenuTab.Settings}
             onClick={onClickSettingsTab}
           />
-          {when(
-            isFeatureEnabled('Roll Your Own'),
-            <MenuTab
-              label={'RYO'}
-              selected={selectedTab === RightMenuTab.RollYourOwn}
-              onClick={onClickRollYourOwnTab}
-            />,
-          )}
         </FlexRow>
         <SimpleFlexRow
           className='Inspector-entrypoint'
@@ -260,7 +246,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
           {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
           {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
-          {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
         </SimpleFlexRow>
         <CanvasStrategyInspector />
       </FlexColumn>

editor/src/components/editor/store/editor-state.ts

@@ -214,7 +214,6 @@ export enum RightMenuTab {
   Inspector = 'inspector',
   Settings = 'settings',
   Comments = 'comments',
-  RollYourOwn = 'roll-your-own',
 }
 
 // TODO: this should just contain an NpmDependency and a status

editor/src/components/navigator/left-pane/settings-pane.tsx

@@ -27,8 +27,7 @@ import type { FeatureName } from '../../../utils/feature-switches'
 import {
   toggleFeatureEnabled,
   isFeatureEnabled,
-  AllFeatureNames,
-  FeaturesHiddenFromMainSettingsPane,
+  getFeaturesToDisplay,
 } from '../../../utils/feature-switches'
 import json5 from 'json5'
 import { load } from '../../../components/editor/actions/actions'
@@ -60,18 +59,23 @@ const themeOptions = [
 const defaultTheme = themeOptions[0]
 
 export const FeatureSwitchesSection = React.memo(() => {
-  const featuresToDisplay = React.useMemo(
-    () => AllFeatureNames.filter((name) => !FeaturesHiddenFromMainSettingsPane.includes(name)),
-    [],
-  )
+  const [changeCount, setChangeCount] = React.useState(0)
+  // this replaces the 'forceRender' in the original implementation
+  const onFeatureChange = React.useCallback(() => setChangeCount(changeCount + 1), [changeCount])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const featuresToDisplay = React.useMemo(() => getFeaturesToDisplay(), [changeCount])
   if (featuresToDisplay.length > 0) {
     return (
       <Section>
         <UIGridRow padded variant='<---1fr--->|------172px-------|'>
           <H2>Experimental Toggle Features</H2>
         </UIGridRow>
         {featuresToDisplay.map((name) => (
-          <FeatureSwitchRow key={`feature-switch-${name}`} name={name} />
+          <FeatureSwitchRow
+            key={`feature-switch-${name}`}
+            name={name}
+            onFeatureChange={onFeatureChange}
+          />
         ))}
       </Section>
     )
@@ -80,15 +84,14 @@ export const FeatureSwitchesSection = React.memo(() => {
   }
 })
 
-const FeatureSwitchRow = React.memo((props: { name: FeatureName }) => {
+const FeatureSwitchRow = React.memo((props: { name: FeatureName; onFeatureChange: () => void }) => {
   const name = props.name
+  const onFeatureChange = props.onFeatureChange
   const id = `toggle-${name}`
-  const [changeCount, setChangeCount] = React.useState(0)
-  const forceRender = React.useCallback(() => setChangeCount(changeCount + 1), [changeCount])
   const onChange = React.useCallback(() => {
     toggleFeatureEnabled(name)
-    forceRender()
-  }, [forceRender, name])
+    onFeatureChange()
+  }, [name, onFeatureChange])
   return (
     <FlexRow style={{ paddingLeft: 16, height: UtopiaTheme.layout.rowHeight.normal }}>
       <CheckboxInput