Add About modal with GitHub repo link and contact email

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: guidooswaldDB

app.py

@@ -679,14 +679,53 @@ def build_sidebar() -> html.Div:
     ]),
 ], id="deploy-modal", is_open=False, size="lg", centered=True, className="deploy-modal")
 
+_ABOUT_MODAL = dbc.Modal([
+    dbc.ModalHeader(dbc.ModalTitle([
+        html.Img(src="/assets/databricks.svg", style={"height": "24px"}, className="me-2"),
+        "Databricks API Explorer",
+    ])),
+    dbc.ModalBody([
+        html.P([
+            "An interactive REST API explorer for Databricks workspaces. "
+            "Browse, execute, and inspect API calls across 15 categories and 45+ endpoints."
+        ], className="mb-3"),
+
+        html.Div([
+            html.Div([
+                html.I(className="bi bi-github me-2"),
+                html.A(
+                    "github.com/guido-oswald_data/DatabricksAPIexplorer",
+                    href="https://github.com/guido-oswald_data/DatabricksAPIexplorer",
+                    target="_blank", rel="noopener noreferrer",
+                    className="about-link",
+                ),
+            ], className="about-row mb-2"),
+            html.Div([
+                html.I(className="bi bi-envelope me-2"),
+                html.A(
+                    "guido@databricks.com",
+                    href="mailto:guido@databricks.com",
+                    className="about-link",
+                ),
+            ], className="about-row mb-2"),
+        ]),
+
+        html.Hr(className="divider"),
+        html.Div([
+            html.Span(VERSION, className="version-badge me-2"),
+            html.Span("Built with Dash + Databricks SDK", className="text-muted small"),
+        ], className="d-flex align-items-center"),
+    ]),
+], id="about-modal", is_open=False, centered=True, className="deploy-modal")
+
 TOPBAR = dbc.Navbar(
     dbc.Container([
         html.Div([
-            html.A([
+            html.Button([
                 html.Img(src="/assets/databricks.svg", className="brand-logo me-2"),
                 html.Span("Databricks", className="brand-db"),
                 html.Span(" API Explorer", className="brand-rest"),
-            ], href="/", className="navbar-brand d-flex align-items-center text-decoration-none"),
+            ], id="about-btn", n_clicks=0, className="navbar-brand d-flex align-items-center text-decoration-none about-brand-btn"),
             html.Span(id="topbar-spinner", className="topbar-spinner topbar-spinner-hidden"),
         ], className="d-flex align-items-center"),
         html.Div([
@@ -875,6 +914,7 @@ def _custom_section():
     _DROPDOWN_OVERLAY,
     USER_DROPDOWN,  # fixed dropdown, outside normal flow
     _DEPLOY_MODAL,
+    _ABOUT_MODAL,
 
     html.Div([
         build_sidebar(),
@@ -942,6 +982,17 @@ def toggle_deploy_modal(n, is_open):
     return not is_open
 
 
+# 1c. Toggle about modal
+@app.callback(
+    Output("about-modal", "is_open"),
+    Input("about-btn", "n_clicks"),
+    State("about-modal", "is_open"),
+    prevent_initial_call=True,
+)
+def toggle_about_modal(n, is_open):
+    return not is_open
+
+
 # 2. Toggle dropdown open/close — clientside for instant reactivity
 app.clientside_callback(
     """

assets/style.css

@@ -726,6 +726,21 @@ body {
   transition: filter 0.15s;
 }
 .mode-badge-btn:hover { filter: brightness(1.3); }
+.about-brand-btn {
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.about-brand-btn:hover { opacity: 0.8; }
+.about-row { font-size: 14px; display: flex; align-items: center; }
+.about-link {
+  color: var(--accent-primary, #7f4bc4);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.about-link:hover { color: #a77de8; text-decoration: underline; }
 
 /* ── Deploy Modal ────────────────────────────────────────────────── */
 .deploy-modal .modal-content {

version.txt

@@ -1 +1 @@
-268
+272