#3459229 Saving Sections

Front end implementation only

This MR implements the UI required to allow users to save a component (and it's children) as a section.

• Implemented new "Create section" button on right-click context menu.
• Slightly changed the ErrorCard component to use the Callout Radix component
• Implemented Save Section dialog
  • Grabs the component that was right clicked, and all of its children
  • Name field to allows user to assign custom name to the section
  • Clicking Save shows loading state while waiting for a response
  • Error handling
  • Add to Library button POSTs layout, model and name to /xb/api/config/pattern
• Implemented a DialogSlice to manage the opening/closing of Dialogs. Required because the Radix Dialog Trigger is incompatible with opening a dialog from a Context Menu*.
• Moved the fake list of hard-coded dummy sections to its own component DummySectionList.tsx This can be used for reference by whomever is implementing the endpoint and then easily removed
• The real SectionList.tsx now call a GET to the /xb/api/config/pattern endpoint.
• Small improvements to the ComponentContextMenu.tsx to add keyboard shortcut hints and make Delete red.

No tests yet as this doesn't actually work without the backend work being completed and I don't want it to causes failures in 0.x

Closes #3459229

* Incompatible because both the Trigger and the Content of the Dialog must be wrapped by the Dialog.Root component but, because the context menu is unmounted as soon as you select an option in it, it means the Content is also unmounted.

ui/src/app/App.tsx

@@ -7,6 +7,7 @@ import PrimaryPanel from '@/components/sidebar/PrimaryPanel';
 import Topbar from '@/components/topbar/Topbar';
 import useSyncComponentId from '@/hooks/useSyncComponentId';
 import ZoomControl from '@/components/zoom/ZoomControl';
+import SaveSectionDialog from '@/features/saveSection/SaveSectionDialog';
 
 const App: React.FC = () => {
   // Hook to keep the selected component ID in state in sync with :componentId in the url params.
@@ -28,6 +29,7 @@ const App: React.FC = () => {
         <ZoomControl />
         <div id="menuBarContainer"></div>
         <div id="menuBarSubmenuContainer"></div>
+        <SaveSectionDialog />
       </ErrorBoundary>
     </div>
   );