From 21da2e1ad49c649c5f4768d462a18c91c20c2bb7 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 21:32:34 +0200
Subject: [PATCH] feat: align dataflow with shared UI foundations

---
 src/govoplan_dataflow/backend/manifest.py | 12 ++++++++++++
 webui/src/styles/dataflow.css             | 20 ++++++++++----------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/govoplan_dataflow/backend/manifest.py b/src/govoplan_dataflow/backend/manifest.py
index 36621f1..2d4db04 100644
--- a/src/govoplan_dataflow/backend/manifest.py
+++ b/src/govoplan_dataflow/backend/manifest.py
@@ -27,6 +27,7 @@ from govoplan_core.core.modules import (
     ModuleManifest,
     NavItem,
     PermissionDefinition,
+    ProductAreaContribution,
     RoleTemplate,
 )
 from govoplan_core.core.provider_governance import declared_module_architecture
@@ -510,6 +511,17 @@ manifest = ModuleManifest(
                 order=72,
             ),
         ),
+        product_areas=(
+            ProductAreaContribution(
+                id="data-assurance",
+                module_id=MODULE_ID,
+                label="i18n:govoplan-core.product_area.data_assurance",
+                icon="database-zap",
+                description="i18n:govoplan-core.product_area.data_assurance_description",
+                surface_ids=("dataflow.nav.dataflow", "dataflow.route.dataflow"),
+                order=60,
+            ),
+        ),
         view_surfaces=(
             ViewSurface(
                 id="dataflow.page",
diff --git a/webui/src/styles/dataflow.css b/webui/src/styles/dataflow.css
index 479bf6c..176df0b 100644
--- a/webui/src/styles/dataflow.css
+++ b/webui/src/styles/dataflow.css
@@ -263,8 +263,8 @@
   width: 180px;
   min-height: 54px;
   border: 1px solid var(--line-dark);
-  border-left: 4px solid #3d6f9e;
-  border-radius: 6px;
+  border-left: 4px solid var(--data-category-blue);
+  border-radius: var(--radius-compact);
   background: var(--panel);
   box-shadow: var(--shadow-xs);
   padding: 8px 10px;
@@ -272,34 +272,34 @@
 
 .dataflow-node-source-inline,
 .dataflow-node-source-reference {
-  border-left-color: #2f7d6d;
+  border-left-color: var(--data-category-green);
 }
 
 .dataflow-node-filter {
-  border-left-color: #b7791f;
+  border-left-color: var(--data-category-amber);
 }
 
 .dataflow-node-combine-union,
 .dataflow-node-combine-join {
   min-height: 64px;
-  border-left-color: #2f7d6d;
+  border-left-color: var(--data-category-green);
 }
 
 .dataflow-node-distinct {
-  border-left-color: #b7791f;
+  border-left-color: var(--data-category-amber);
 }
 
 .dataflow-node-derive,
 .dataflow-node-aggregate {
-  border-left-color: #76569b;
+  border-left-color: var(--data-category-purple);
 }
 
 .dataflow-node-sort {
-  border-left-color: #3d6f9e;
+  border-left-color: var(--data-category-blue);
 }
 
 .dataflow-node-output {
-  border-left-color: #9d4e63;
+  border-left-color: var(--data-category-rose);
 }
 
 .dataflow-node.is-selected {
@@ -915,7 +915,7 @@
   white-space: nowrap;
 }
 
-@media (max-width: 1180px) {
+@media (max-width: 1280px) {
   .dataflow-workspace-toolbar {
     align-items: stretch;
     flex-direction: column;