feat(nicegui): add about section

anvil/nicegui/main.py

@@ -1,5 +1,4 @@
 import pages
-import pages.about
 import pages.ansible
 import pages.home
 import pages.registry
@@ -26,10 +25,4 @@ def registry_page() -> None:
         pages.registry.content()
 
 
-@ui.page("/about")
-def about_page() -> None:
-    with theme.frame("About"):
-        pages.about.content()
-
-
 ui.run(title="uBlue Forge", port=3000)

anvil/nicegui/menu.py

@@ -1,8 +1,55 @@
+import pandas
+import toml
 from nicegui import ui
+from importlib.metadata import version
+from utils.helper import get_project_root
+
+
+def load_pyproject_toml() -> str:
+    project_root = get_project_root().parent
+    pyproject_file = toml.load(f"{project_root}/pyproject.toml")
+    return pyproject_file
+
+
+def get_project_version() -> str:
+    pyproject_file = load_pyproject_toml()
+    project_version = pyproject_file["tool"]["poetry"]["version"]
+    return project_version
+
+
+def get_python_package_version() -> pandas.DataFrame:
+    pyproject_file = load_pyproject_toml()
+    python_packages = pyproject_file["tool"]["poetry"]["dependencies"]
+    python_packages_data = []
+    for key, value in python_packages.items():
+        # Skip python itself
+        if key == "python":
+            continue
+        get_version = version(key)
+        python_packages_data.append({"Package": key, "Version": get_version})
+    python_packages_version = pandas.DataFrame(data=python_packages_data).sort_values(
+        by="Package"
+    )
+    return python_packages_version
+
+
+def get_about(dialog) -> None:
+    project_version = get_project_version()
+    python_packages_versions = get_python_package_version()
+    with ui.column().classes("items-center"):
+        ui.label("uBlue-OS Forge").classes("text-h5")
+        ui.label(f"v{project_version}").classes("text-h6")
+        ui.table.from_pandas(df=python_packages_versions)
+        ui.button("Close", on_click=dialog.close)
 
 
 def menu() -> None:
-    ui.link("Home", "/").classes(replace="text-white")
+    with ui.button(icon="menu"):
-    ui.link("Ansible", "/ansible").classes(replace="text-white")
+        with ui.menu().props("auto-close"):
-    ui.link("Registry", "/registry").classes(replace="text-white")
+            ui.menu_item("Home", lambda: ui.navigate.to(target="/"))
-    ui.link("About", "/about").classes(replace="text-white")
+            ui.menu_item("Ansible", lambda: ui.navigate.to(target="/ansible"))
+            ui.menu_item("Registry", lambda: ui.navigate.to(target="/registry"))
+            ui.menu_item("About", lambda: dialog.open())
+
+    with ui.dialog() as dialog, ui.card():
+        get_about(dialog)

anvil/nicegui/pages/about.py

@@ -1,10 +0,0 @@
-from nicegui import ui
-import os
-
-
-def content() -> None:
-    project_root = os.environ['NICEGUI_DIR']
-    ui.label("Work in progress...").classes("text-h6")
-    ui.image(project_root + "/pages/assets/work-in-progress.png").classes(
-        "w-[200%]"
-    )

anvil/nicegui/theme.py

@@ -10,7 +10,7 @@ class GuiProgressSpinner(ui.spinner):
         type: str = "dots",
         size: str = "lg",
         color: str | None = "red",
-        thickness: float = 5
+        thickness: float = 5,
     ) -> None:
         super().__init__(type, size=size, color=color, thickness=thickness)
         with self, ui.spinner():
@@ -24,21 +24,26 @@ class GuiProgressSpinner(ui.spinner):
 
 
 @contextmanager
-def frame(navigation_title: str, enable_right_drawer: bool = False):
+def frame(
+    navigation_title: str,
+):
     """Custom page frame to share the same styling and behavior across all pages"""
     ui.colors(primary="#4051b5", secondary="#dddbff", accent="#171d9a")
     with ui.header():
-        with ui.row():
+        with ui.grid(columns=3).classes("w-full gap-0"):
-            menu()
+            with ui.row(wrap=False).classes("col-span-1 justify-start"):
-        ui.space()
+                menu()
-        with ui.link(target="https://github.com/ublue-os/forge", new_tab=True):
+                ui.label(text="uBlue-OS Forge").classes("text-h5")
-            ui.icon("eva-github").classes("text-2xl")
+            with ui.row(wrap=False).classes("col-span-1 justify-center"):
+                ui.label(text=navigation_title).classes("text-h5")
+            with ui.row(wrap=False).classes("col-span-1 justify-end"):
+                with ui.link(target="https://github.com/ublue-os/forge", new_tab=True):
+                    ui.icon("eva-github").classes("text-2xl")
 
     with ui.column().classes():
-        ui.label(navigation_title).classes("text-h4")
         yield
 
     with ui.footer(value=False):
         ui.add_head_html(
-            '<link href="https://unpkg.com/eva-icons@1.1.3/style/eva-icons.css" rel="stylesheet" />'
+            '<link href="https://unpkg.com/eva-icons@1.1.3/style/eva-icons.css" rel="stylesheet"/>'
         )

anvil/nicegui/utils/helper.py

@@ -0,0 +1,5 @@
+from pathlib import Path
+
+
+def get_project_root() -> Path:
+    return Path(__file__).parent.parent

anvil/poetry.lock

@@ -2119,6 +2119,17 @@ files = [
 [package.extras]
 test = ["enrich (>=1.2.6)", "molecule (>=3.4.0)", "pytest (>=6.2.5)", "pytest-cov (>=2.12.1)", "pytest-plus (>=0.2)", "pytest-xdist (>=2.3.0)"]
 
+[[package]]
+name = "toml"
+version = "0.10.2"
+description = "Python Library for Tom's Obvious, Minimal Language"
+optional = false
+python-versions = ">=2.6, !=3.0.*, !=3.1.*, !=3.2.*"
+files = [
+    {file = "toml-0.10.2-py2.py3-none-any.whl", hash = "sha256:806143ae5bfb6a3c6e736a764057db0e6a0e05e338b5630894a5f779cabb4f9b"},
+    {file = "toml-0.10.2.tar.gz", hash = "sha256:b3bda1d108d5dd99f4a20d24d9c348e91c4db7ab1b749200bded2f839ccbe68f"},
+]
+
 [[package]]
 name = "typing-extensions"
 version = "4.11.0"
@@ -2576,4 +2587,4 @@ testing = ["big-O", "jaraco.functools", "jaraco.itertools", "jaraco.test", "more
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.11"
-content-hash = "9acf410a48c12c73c00bd0aa133d052c5626af6db8c0342aa2b5ab3015588c95"
+content-hash = "b48ce29bcc613e6be5b44f65d4e01f113f74c26f628ac1e5bb9d59c37d4ee43b"

anvil/pyproject.toml

@@ -15,6 +15,7 @@ ansible-runner = "^2.3.6"
 requests = "^2.31.0"
 pandas = "^2.2.2"
 humanize = "^4.9.0"
+toml = "^0.10.2"
 
 [tool.poetry.group.dev.dependencies]
 ansible-lint = { version = "^24.2", markers = 'platform_system != "Windows"' } # https://github.com/ansible/ansible-lint/issues/2730#issuecomment-1330406601