Proper command bar UI support for optional args (#7506)

* WIP: Add bidirectional args to point-and-click Extrude
Will eventually close #7495

* Wire up edit flow for symmetric

* Show skip true args in header in review phase

* Add bidirectionalLength

* Make currentArg always part of header

* WIP

* Add twistAng

* Proper optional args line in review

* Labels in progress button and option arg section heading

* Clean up extrude specific changes

* More UI polish

* Remove options bool icon

* Fix labels for tests

* Upgrade e2e tests to cmdBar fixtures with fixes

* More fixes

* Fixed up more tests related to sweep behavior change

* Fix nodeToEdit not having hidden: true on Shell

* Add typecheck

* WIP: footer buttons

* back to reg width

* Clean up

* Clean up

* Fix tests and remove label

* Refactor

* Fix offset plane test

* Add CommandBarDivider

* Fix step back

* Add comment

* Fix it, thanks bot

* Clean up and inline optional heading

* Little case tweak

* Update src/components/CommandBar/CommandBarReview.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

* Rename to CommandBarHeaderFooter

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

e2e/playwright/point-click.spec.ts

@@ -1083,14 +1083,13 @@ openSketch = startSketchOn(XY)
     cmdBar,
   }) => {
     // One dumb hardcoded screen pixel value
-    const testPoint = { x: 700, y: 150 }
+    const testPoint = { x: 700, y: 200 }
+    // TODO: replace the testPoint selection with a feature tree click once that's supported #7544
     const [clickOnXzPlane] = scene.makeMouseHelpers(testPoint.x, testPoint.y)
     const expectedOutput = `plane001 = offsetPlane(XZ, offset = 5)`
 
     await homePage.goToModelingScene()
-    // FIXME: Since there is no KCL code loaded. We need to wait for the scene to load before we continue.
-    // The engine may not be connected
-    await page.waitForTimeout(15000)
+    await scene.settled(cmdBar)
 
     await test.step(`Look for the blue of the XZ plane`, async () => {
       //await scene.expectPixelColor([50, 51, 96], testPoint, 15) // FIXME
@@ -1829,7 +1828,6 @@ profile002 = startProfile(sketch002, at = [0, 0])
           currentArgKey: 'sketches',
           currentArgValue: '',
           headerArguments: {
-            Sectional: '',
             Profiles: '',
             Path: '',
           },
@@ -1843,7 +1841,6 @@ profile002 = startProfile(sketch002, at = [0, 0])
           currentArgKey: 'path',
           currentArgValue: '',
           headerArguments: {
-            Sectional: '',
             Profiles: '1 profile',
             Path: '',
           },
@@ -1856,7 +1853,6 @@ profile002 = startProfile(sketch002, at = [0, 0])
           currentArgKey: 'path',
           currentArgValue: '',
           headerArguments: {
-            Sectional: '',
             Profiles: '1 profile',
             Path: '',
           },
@@ -1869,7 +1865,6 @@ profile002 = startProfile(sketch002, at = [0, 0])
           headerArguments: {
             Profiles: '1 profile',
             Path: '1 segment',
-            Sectional: '',
           },
           stage: 'review',
         })
@@ -1894,6 +1889,9 @@ profile002 = startProfile(sketch002, at = [0, 0])
           0
         )
         await operationButton.dblclick({ button: 'left' })
+        await page
+          .getByRole('button', { name: 'sectional', exact: false })
+          .click()
         await cmdBar.expectState({
           commandName: 'Sweep',
           currentArgKey: 'sectional',
@@ -1971,7 +1969,6 @@ profile001 = ${circleCode}`
         currentArgKey: 'sketches',
         currentArgValue: '',
         headerArguments: {
-          Sectional: '',
           Profiles: '',
           Path: '',
         },
@@ -1986,7 +1983,6 @@ profile001 = ${circleCode}`
         currentArgKey: 'path',
         currentArgValue: '',
         headerArguments: {
-          Sectional: '',
           Profiles: '1 profile',
           Path: '',
         },
@@ -2000,7 +1996,6 @@ profile001 = ${circleCode}`
         currentArgKey: 'path',
         currentArgValue: '',
         headerArguments: {
-          Sectional: '',
           Profiles: '1 profile',
           Path: '',
         },
@@ -2013,7 +2008,6 @@ profile001 = ${circleCode}`
         headerArguments: {
           Profiles: '1 profile',
           Path: '1 helix',
-          Sectional: '',
         },
         stage: 'review',
       })
@@ -4734,7 +4728,6 @@ path001 = startProfile(sketch001, at = [0, 0])
         headerArguments: {
           Profiles: '',
           Path: '',
-          Sectional: '',
         },
         highlightedHeaderArg: 'Profiles',
         commandName: 'Sweep',
@@ -4747,7 +4740,6 @@ path001 = startProfile(sketch001, at = [0, 0])
         headerArguments: {
           Profiles: '2 profiles',
           Path: '',
-          Sectional: '',
         },
         highlightedHeaderArg: 'path',
         commandName: 'Sweep',
@@ -4760,7 +4752,6 @@ path001 = startProfile(sketch001, at = [0, 0])
         headerArguments: {
           Profiles: '2 profiles',
           Path: '1 segment',
-          Sectional: '',
         },
         commandName: 'Sweep',
       })