feature/mx-1768 prep url search params (#241)

# PR Context
- (another) prep for implementing url search parameters

# Changes
- simplify some styles and update look and feel to be more inline with
mex-drop
- use more idiomatic variables for styling elements with colors or
spacing

# Removed
- remove dependency to reflex-chakra, use default checkboxes instead

CHANGELOG.md

@@ -14,7 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - update mex-common to version 0.49.3
 - BREAKING: you must start the local dev mode simply with `pdm run editor` (no 2nd run)
 - BREAKING: rename postfix_badge to render_badge (for consistency)
-- simplify some styles
+- simplify some styles and update look and feel to be more inline with mex-drop
+- use more idiomatic variables for styling elements with colors or spacing
 
 ### Deprecated
 
@@ -23,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - remove BackendIdentityProvider in favor of mex-common version
 - remove identity_provider from EditorSettings in favor of mex-common setting
 - remove EditorIdentityProvider enum in favor of mex-common enum
+- remove dependency to reflex-chakra, use default checkboxes instead
 
 ### Fixed
 

mex/editor/components.py

@@ -45,8 +45,8 @@ def render_badge(value: EditorValue) -> rx.Component:
     """Render a generic badge for an editor value."""
     return rx.badge(
         value.badge,
-        radius="full",
-        variant="surface",
+        radius="large",
+        variant="soft",
         style={"margin": "auto 0"},
     )
 

mex/editor/edit/main.py

@@ -19,6 +19,7 @@ def editor_value_switch(
         checked=value.enabled,
         on_change=cast(EditState, EditState).toggle_field_value(field_name, value),
         custom_attrs={"data-testid": f"switch-{field_name}-{primary_source}-{index}"},
+        color_scheme="jade",
     )
 
 
@@ -53,6 +54,7 @@ def primary_source_switch(
             field_name, model.name.href
         ),
         custom_attrs={"data-testid": f"switch-{field_name}-{model.identifier}"},
+        color_scheme="jade",
     )
 
 
@@ -130,7 +132,7 @@ def submit_button() -> rx.Component:
         color_scheme="jade",
         size="3",
         on_click=EditState.submit_rule_set,
-        style={"margin": "1em 0"},
+        style={"margin": "var(--line-height-1) 0"},
         custom_attrs={"data-testid": "submit-button"},
     )
 
@@ -146,34 +148,25 @@ def edit_heading() -> rx.Component:
         ),
         custom_attrs={"data-testid": "edit-heading"},
         style={
-            "margin": "1em 0",
             "whiteSpace": "nowrap",
             "overflow": "hidden",
-            "textOverflow": "ellipsis",
-            "maxWidth": "80vw",
         },
     )
 
 
 def index() -> rx.Component:
     """Return the index for the edit component."""
     return page(
-        rx.box(
+        rx.vstack(
             edit_heading(),
-            rx.vstack(
-                rx.foreach(
-                    EditState.fields,
-                    editor_field,
-                ),
-                rx.cond(
-                    EditState.fields,
-                    submit_button(),
-                ),
+            rx.foreach(
+                EditState.fields,
+                editor_field,
+            ),
+            rx.cond(
+                EditState.fields,
+                submit_button(),
             ),
-            style={
-                "width": "100%",
-                "margin": "0 2em 1em",
-            },
-            custom_attrs={"data-testid": "edit-section"},
+            style={"width": "100%"},
         ),
     )

mex/editor/edit/state.py

@@ -40,7 +40,7 @@ def refresh(self) -> Generator[EventSpec | None, None, None]:
         try:
             extracted_items_response = connector.fetch_extracted_items(
                 None,
-                self.item_id,
+                self.router.page.params["identifier"],
                 None,
                 0,
                 100,
@@ -60,15 +60,15 @@ def refresh(self) -> Generator[EventSpec | None, None, None]:
             else []
         )
         try:
-            rule_set = connector.get_rule_set(
-                self.item_id,
-            )
+            rule_set = connector.get_rule_set(self.router.page.params["identifier"])
         except HTTPError as exc:
             if exc.response.status_code == status.HTTP_404_NOT_FOUND and self.stem_type:
                 rule_set_class = RULE_SET_RESPONSE_CLASSES_BY_NAME[
                     ensure_postfix(self.stem_type, "RuleSetResponse")
                 ]
-                rule_set = rule_set_class(stableTargetId=self.item_id)
+                rule_set = rule_set_class(
+                    stableTargetId=self.router.page.params["identifier"]
+                )
             else:
                 self.reset()
                 yield from escalate_error(
@@ -95,7 +95,7 @@ def submit_rule_set(self) -> Generator[EventSpec | None, None, None]:
             # TODO(ND): use proper connector method when available (stop-gap MX-1762)
             connector.request(
                 method="PUT",
-                endpoint=f"rule-set/{self.item_id}",
+                endpoint=f"rule-set/{self.router.page.params['identifier']}",
                 payload=rule_set,
             )
         except HTTPError as exc:

mex/editor/layout.py

@@ -22,79 +22,109 @@ def user_button() -> rx.Component:
 def user_menu() -> rx.Component:
     """Return a user menu with a trigger, the user's name and a logout button."""
     return rx.menu.root(
-        rx.menu.trigger(user_button()),
+        rx.menu.trigger(
+            user_button(),
+            custom_attrs={"data-testid": "user-menu"},
+        ),
         rx.menu.content(
-            rx.menu.item(
-                cast(User, State.user).name,
-                disabled=True,
-                style={"color": "var(--gray-12)"},
-            ),
+            rx.menu.item(cast(User, State.user).name, disabled=True),
             rx.menu.separator(),
             rx.menu.item(
                 "Logout",
                 on_select=State.logout,
+                custom_attrs={"data-testid": "logout-button"},
             ),
         ),
-        custom_attrs={"data-testid": "user-menu"},
     )
 
 
 def nav_link(item: NavItem) -> rx.Component:
     """Return a link component for the given navigation item."""
     return rx.link(
-        item.title,
-        href=item.href,
+        rx.text(item.title, size="4", weight="medium"),
+        href=item.raw_path,
         underline=item.underline,
-        padding="0.2em",
+        class_name="nav-item",
     )
 
 
-def mex_editor_logo() -> rx.Component:
-    """Return the editor's logo with icon and label."""
+def app_logo() -> rx.Component:
+    """Return the app logo with icon and label."""
     return rx.hstack(
         rx.icon(
-            "file-pen-line",
+            "circuit-board",
             size=28,
         ),
         rx.heading(
             "MEx Editor",
             weight="medium",
             style={"userSelect": "none"},
         ),
+        custom_attrs={"data-testid": "app-logo"},
     )
 
 
 def nav_bar() -> rx.Component:
     """Return a navigation bar component."""
-    return rx.hstack(
-        mex_editor_logo(),
-        rx.divider(orientation="vertical", size="2"),
-        rx.foreach(State.nav_items, nav_link),
-        rx.divider(orientation="vertical", size="2"),
-        user_menu(),
-        rx.spacer(),
-        rx.color_mode.button(),
-        padding="1em",
-        position="fixed",
-        style={"background": "var(--accent-4)"},
-        top="0px",
-        width="100%",
-        z_index="1000",
-        custom_attrs={"data-testid": "nav-bar"},
+    return rx.vstack(
+        rx.box(
+            style={
+                "height": "var(--space-6)",
+                "width": "100%",
+                "backdropFilter": " var(--backdrop-filter-panel)",
+                "backgroundColor": "var(--card-background-color)",
+            },
+        ),
+        rx.card(
+            rx.hstack(
+                app_logo(),
+                rx.divider(orientation="vertical", size="2"),
+                rx.hstack(
+                    rx.foreach(State.nav_items, nav_link),
+                    justify="start",
+                    spacing="4",
+                ),
+                rx.divider(orientation="vertical", size="2"),
+                user_menu(),
+                rx.spacer(),
+                rx.color_mode.button(),
+                justify="between",
+                align_items="center",
+            ),
+            size="2",
+            custom_attrs={"data-testid": "nav-bar"},
+            style={
+                "width": "100%",
+                "marginTop": "calc(-1 * var(--base-card-border-width))",
+            },
+        ),
+        spacing="0",
+        style={
+            "maxWidth": "calc(1480px * var(--scaling))",
+            "minWidth": "calc(800px * var(--scaling))",
+            "position": "fixed",
+            "top": "0",
+            "width": "100%",
+            "zIndex": "1000",
+        },
     )
 
 
-def page(*children: str | rx.Component) -> rx.Component:
+def page(*children: rx.Component) -> rx.Component:
     """Return a page fragment with navigation bar and given children."""
     return rx.cond(
         State.user,
-        rx.fragment(
+        rx.center(
             nav_bar(),
             rx.hstack(
                 *children,
-                min_height="85vh",
-                margin="4em 0 0",
-                spacing="5",
+                style={
+                    "maxWidth": "calc(1480px * var(--scaling))",
+                    "minWidth": "calc(800px * var(--scaling))",
+                    "padding": "calc(var(--space-6) * 4) var(--space-6) var(--space-6)",
+                    "width": "100%",
+                },
+                custom_attrs={"data-testid": "page-body"},
             ),
         ),
         rx.center(