Ux/use tabs instead of accordions

waveform_editor/gui/shape_editor/shape_editor.py

@@ -74,7 +74,6 @@ def __init__(self, main_gui):
             | self.plasma_properties.param.has_properties.rx.not_()
             | self.nice_settings.param.are_required_filled.rx.not_()
         )
-
         button_start = pn.widgets.Button(
             name="Run",
             button_type="primary",
@@ -98,29 +97,19 @@ def __init__(self, main_gui):
             on_click=self.stop_nice,
             margin=(10, 10, 2, 0),
         )
-        nice_mode_radio = nice_mode_toggle(self.nice_settings, margin=(10, 0, 2, 0))
-        settings_modal = SettingsModal(self.nice_plotter)
+        mode_widget = nice_mode_toggle(self.nice_settings, margin=(10, 0, 2, 0))
         buttons = pn.Row(
-            nice_mode_radio,
+            mode_widget,
             pn.Spacer(sizing_mode="stretch_width"),
             button_stop,
             button_start,
         )
+        settings_modal = SettingsModal(self.nice_plotter)
 
-        # Accordion does not allow dynamic titles, so use separate card for each option
-        options = pn.Column(
-            self._create_card(
-                self.plasma_shape,
-                "Plasma Shape",
-                is_valid=self.plasma_shape.param.has_shape,
-                visible=self.nice_settings.param.is_inverse_mode.rx(),
-            ),
-            self._create_card(
-                pn.Column(self.plasma_properties, self.nice_plotter.profiles_pane),
-                "Plasma Properties",
-                is_valid=self.plasma_properties.param.has_properties,
-            ),
-            self._create_card(self.coil_currents, "Coil Currents"),
+        settings_options = pn.Column()
+
+        options = pn.bind(
+            self._create_options_tabs, self.nice_settings.param.is_inverse_mode
         )
         menu = pn.Column(buttons, self.terminal, sizing_mode="stretch_width")
         self.panel = pn.Row(
@@ -129,11 +118,29 @@ def __init__(self, main_gui):
             ),
             pn.Column(
                 menu,
+                settings_options,
                 options,
                 sizing_mode="stretch_both",
             ),
         )
 
+    def _create_options_tabs(self, is_inverse_mode):
+        items = []
+        if is_inverse_mode:
+            items.append(("Shape", self.plasma_shape))
+        items.append(
+            (
+                "Properties",
+                pn.Column(self.plasma_properties, self.nice_plotter.profiles_pane),
+            )
+        )
+        items.append(("Coils", self.coil_currents))
+        return pn.Tabs(
+            *items,
+            sizing_mode="stretch_width",
+            stylesheets=[".bk-tab { flex: 1; text-align: center; }"],
+        )
+
     def _create_card(self, panel_object, title, is_valid=None, visible=True):
         """Create a collapsed card containing a panel object and a title.