Register modeling commands as disabled, enable without needing to re-open the command palette (#6886)

* Allow adding and removing commands from any command bar state

* Allow commands to be configured disabled in the combobox

* Set up modeling commands to toggle `disabled` based on network status, instead of filtering

* Fix tsc

src/components/CommandComboBox.tsx

@@ -1,6 +1,6 @@
 import { Combobox } from '@headlessui/react'
 import Fuse from 'fuse.js'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { CustomIcon } from '@src/components/CustomIcon'
 import type { Command } from '@src/lib/commandTypes'
@@ -21,13 +21,17 @@ function CommandComboBox({
   const defaultOption =
     options.find((o) => 'isCurrent' in o && o.isCurrent) || null
   // sort disabled commands to the bottom
-  const sortedOptions = options
-    .map((command) => ({
-      command,
-      disabled: optionIsDisabled(command),
-    }))
-    .sort(sortCommands)
-    .map(({ command }) => command)
+  const sortedOptions = useMemo(
+    () =>
+      options
+        .map((command) => ({
+          command,
+          disabled: optionIsDisabled(command),
+        }))
+        .sort(sortCommands)
+        .map(({ command }) => command),
+    [options]
+  )
 
   const fuse = new Fuse(sortedOptions, {
     keys: ['displayName', 'name', 'description'],
@@ -38,7 +42,7 @@ function CommandComboBox({
   useEffect(() => {
     const results = fuse.search(query).map((result) => result.item)
     setFilteredOptions(query.length > 0 ? results : sortedOptions)
-  }, [query])
+  }, [query, sortedOptions])
 
   function handleSelection(command: Command) {
     commandBarActor.send({ type: 'Select command', data: { command } })
@@ -122,10 +126,18 @@ function CommandComboBox({
 
 export default CommandComboBox
 
+/**
+ * If the command is configured to be disabled,
+ * or it is powered by a state machine and the event it is
+ * associated with is unavailable, disabled it.
+ */
 function optionIsDisabled(option: Command): boolean {
   return (
-    'machineActor' in option &&
-    option.machineActor !== undefined &&
-    !getActorNextEvents(option.machineActor.getSnapshot()).includes(option.name)
+    option.disabled ||
+    ('machineActor' in option &&
+      option.machineActor !== undefined &&
+      !getActorNextEvents(option.machineActor.getSnapshot()).includes(
+        option.name
+      ))
   )
 }

src/components/ModelingMachineProvider.tsx

@@ -34,7 +34,7 @@ import {
   useMenuListener,
   useSketchModeMenuEnableDisable,
 } from '@src/hooks/useMenu'
-import useStateMachineCommands from '@src/hooks/useStateMachineCommands'
+import useModelingMachineCommands from '@src/hooks/useStateMachineCommands'
 import { useKclContext } from '@src/lang/KclProvider'
 import { updateModelingState } from '@src/lang/modelingWorkflows'
 import {
@@ -2091,13 +2091,12 @@ export const ModelingMachineProvider = ({
     modelingSend({ type: 'Center camera on selection' })
   })
 
-  useStateMachineCommands({
+  useModelingMachineCommands({
     machineId: 'modeling',
     state: modelingState,
     send: modelingSend,
     actor: modelingActor,
     commandBarConfig: modelingMachineCommandConfig,
-    allCommandsRequireNetwork: true,
     // TODO for when sketch tools are in the toolbar: This was added when we used one "Cancel" event,
     // but we need to support "SketchCancel" and basically
     // make this function take the actor or state so it