fix: Various UI bugs (#15)

Author: mslaursen

fastapi_forge/frontend/components/model_row.py

@@ -12,12 +12,20 @@ def __init__(
     ):
         super().__init__(wrap=False)
         self.model = model
-        self.is_editing = False
+        self.is_selected_row = model == state.selected_model
         self.color = color
+        self.is_editing = False
         self._build()
 
     def _build(self) -> None:
-        with self.classes("w-full flex items-center justify-between cursor-pointer"):
+        self.on("click", lambda: state.select_model(self.model))
+        base_classes = "w-full flex items-center justify-between cursor-pointer p-2 rounded transition-all"
+        if self.is_selected_row:
+            base_classes += " bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500"
+        else:
+            base_classes += " hover:bg-gray-100 dark:hover:bg-gray-800"
+
+        with self.classes(base_classes):
             self.name_label = ui.label(text=self.model.name).classes("self-center")
             if self.color:
                 self.name_label.classes(add=self.color)
@@ -28,18 +36,30 @@ def _build(self) -> None:
             )
             self.name_label.bind_visibility_from(self, "is_editing", lambda x: not x)
 
-            self.on("click", lambda: state.select_model(self.model))
+            with ui.row().classes("flex-nowrap gap-2 min-w-fit"):
+                self.edit_button = (
+                    ui.button(
+                        icon="edit",
+                    )
+                    .on("click.stop", self._toggle_edit)
+                    .bind_visibility_from(self, "is_editing", lambda x: not x)
+                    .classes("min-w-fit")
+                )
 
-            with ui.row().classes("gap-2"):
-                self.edit_button = ui.button(
-                    icon="edit",
-                    on_click=self._toggle_edit,
-                ).bind_visibility_from(self, "is_editing", lambda x: not x)
-                self.save_button = ui.button(
-                    icon="save",
-                    on_click=self._save_model,
-                ).bind_visibility_from(self, "is_editing")
-                ui.button(icon="delete", on_click=self._delete_model)
+                self.save_button = (
+                    ui.button(
+                        icon="save",
+                    )
+                    .on("click.stop", self._save_model)
+                    .bind_visibility_from(self, "is_editing")
+                    .classes("min-w-fit")
+                )
+
+                ui.button(
+                    icon="delete",
+                ).on("click.stop", lambda: state.delete_model(self.model)).classes(
+                    "min-w-fit"
+                )
 
     def _toggle_edit(self) -> None:
         self.is_editing = not self.is_editing
@@ -49,6 +69,3 @@ def _save_model(self) -> None:
         if new_name:
             state.update_model_name(self.model, new_name)
             self.is_editing = False
-
-    def _delete_model(self) -> None:
-        state.delete_model(self.model)

fastapi_forge/frontend/constants.py

@@ -1,5 +1,7 @@
 from typing import Any
 
+SELECTED_MODEL_TEXT_COLOR = "text-black-500 dark:text-amber-300"
+
 FIELD_COLUMNS: list[dict[str, Any]] = [
     {
         "name": "name",

fastapi_forge/frontend/main.py

@@ -38,10 +38,12 @@ def load_initial_project(path: Path) -> p.ProjectSpec:
 def create_ui_components() -> None:
     """Create all UI components"""
     with ui.column().classes("w-full h-full items-center justify-center mt-4"):
-        ModelEditorPanel().classes("no-shadow min-w-[600px]")
+        ModelEditorPanel().classes(
+            "shadow-2xl dark:shadow-none min-w-[700px] max-w-[800px]"
+        )
 
-    ModelPanel()
-    ProjectConfigPanel()
+    ModelPanel().classes("shadow-xl dark:shadow-none")
+    ProjectConfigPanel().classes("shadow-xl dark:shadow-none")
 
 
 def run_ui(reload: bool) -> None:

fastapi_forge/frontend/panels/model_editor_panel.py

@@ -23,6 +23,8 @@ def __init__(self):
         self.visible = False
 
         state.select_model_fn = self.set_selected_model
+        state.deselect_model_fn = self.deselect_model
+        state.render_model_editor_fn = self.refresh
 
         self.add_field_modal: AddFieldModal = AddFieldModal(
             on_add_field=self._handle_modal_add_field,
@@ -298,6 +300,10 @@ def _validate_field_input(
                 return False
         return True
 
+    def refresh(self) -> None:
+        self._refresh_table(state.selected_model.fields)
+        self._refresh_relationship_table(state.selected_model.relationships)
+
     def _refresh_table(self, fields: list[ModelField]) -> None:
         if state.selected_model is None:
             return
@@ -513,3 +519,6 @@ def set_selected_model(self, model: Model) -> None:
         self._refresh_table(model.fields)
         self._refresh_relationship_table(model.relationships)
         self.visible = True
+
+    def deselect_model(self) -> None:
+        self.visible = False

fastapi_forge/frontend/panels/model_panel.py

@@ -4,6 +4,7 @@
 from pydantic import ValidationError
 
 from fastapi_forge.frontend import ModelCreate, ModelRow
+from fastapi_forge.frontend.constants import SELECTED_MODEL_TEXT_COLOR
 from fastapi_forge.frontend.notifications import notify_validation_error
 from fastapi_forge.frontend.state import state
 from fastapi_forge.project_io import ProjectExporter
@@ -12,7 +13,6 @@
 class ModelPanel(ui.left_drawer):
     def __init__(self):
         super().__init__(value=True, elevated=False, bottom_corner=True)
-        self.classes("border-right[1px]")
 
         state.render_models_fn = self._render_models
 
@@ -58,9 +58,11 @@ def _render_models(self) -> None:
 
         with self.model_list:
             for model in state.models:
-                is_auth_user = model.name == "auth_user"
-                color = "text-green-500" if is_auth_user else None
                 ModelRow(
                     model,
-                    color=color,
+                    color=(
+                        SELECTED_MODEL_TEXT_COLOR
+                        if model == state.selected_model
+                        else None
+                    ),
                 )

fastapi_forge/frontend/panels/project_config_panel.py

@@ -200,11 +200,41 @@ def _handle_builtin_auth_change(self, event: ValueChangeEventArguments) -> None:
                 state.render_models_fn()
             ui.notify("The 'auth_user' model has been deleted.", type="positive")
 
+    async def _warn_override(self) -> bool:
+        """Show a confirmation dialog if the project already exists."""
+        dialog = ui.dialog()
+        with dialog, ui.card().classes("w-full max-w-md p-6 text-center"):
+            ui.icon("warning", color="orange-500").classes("text-4xl self-center")
+            ui.markdown(
+                f"Project '{state.project_name}' already exists!\n\n"
+                "This will **permanently overwrite** the existing project directory.\n"
+                "Are you sure you want to continue?"
+            ).classes("text-center")
+
+            with ui.row().classes("w-full justify-center gap-4 mt-4"):
+                ui.button("Cancel", color="primary", on_click=dialog.close)
+                ui.button(
+                    "Overwrite", color="negative", on_click=lambda: dialog.submit(True)
+                )
+
+        return await dialog
+
     async def _create_project(self) -> None:
-        """Generate the project based on current state"""
+        """Generate the project based on the current state."""
+        project_path = Path(state.project_name)
+
+        if project_path.exists():
+            try:
+                override = await self._warn_override()
+                if not override:
+                    ui.notify("Project generation cancelled.", type="warning")
+                    return
+            except Exception as e:
+                ui.notify(f"Error displaying confirmation: {e}", type="negative")
+                return
+
         self.create_button.classes("hidden")
         self.loading_spinner.classes(remove="hidden")
-
         ongoing_notification = ui.notification("Generating project...")
 
         try: