From c2d4d38bfb0474964af6ee81a081a63cbf7f4263 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 4 Apr 2026 15:43:43 +0200
Subject: [PATCH] feat: move environment selector into TopBar (DS v0.1.30)

Update @cameleer/design-system to v0.1.30 which accepts ReactNode
for the environment prop. Move EnvironmentSelector from standalone
div into TopBar, rendering between theme toggle and user menu.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/package-lock.json              |  8 ++++----
 ui/package.json                   |  2 +-
 ui/src/components/LayoutShell.tsx | 18 +++++++-----------
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 1f47cd0f..b1b2acf4 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -8,7 +8,7 @@
       "name": "ui",
       "version": "0.0.0",
       "dependencies": {
-        "@cameleer/design-system": "^0.1.29",
+        "@cameleer/design-system": "^0.1.30",
         "@tanstack/react-query": "^5.90.21",
         "lucide-react": "^1.7.0",
         "openapi-fetch": "^0.17.0",
@@ -278,9 +278,9 @@
       }
     },
     "node_modules/@cameleer/design-system": {
-      "version": "0.1.29",
-      "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.29/design-system-0.1.29.tgz",
-      "integrity": "sha512-Za4drshZhGqonR0QyZxDpo6UnhT+VaOCSRLIlmjRrVZD/8+E+wvjbCVO2/sX5EMCfho+x6Y6V7d4GHNwu38ioQ==",
+      "version": "0.1.30",
+      "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.30/design-system-0.1.30.tgz",
+      "integrity": "sha512-HK8bQlp7NU1GIZAT17gjyeN/NQVDdpQiUmphFJ/f+y4nS+FsbCcI+Qtq67S9+DZeu33+7L/NFUDRVYBTjuX20w==",
       "dependencies": {
         "lucide-react": "^1.7.0",
         "react": "^19.0.0",
diff --git a/ui/package.json b/ui/package.json
index 3af36b36..c7b249c7 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,7 +14,7 @@
     "generate-api:live": "curl -s http://localhost:8081/api/v1/api-docs -o src/api/openapi.json && openapi-typescript src/api/openapi.json -o src/api/schema.d.ts"
   },
   "dependencies": {
-    "@cameleer/design-system": "^0.1.29",
+    "@cameleer/design-system": "^0.1.30",
     "@tanstack/react-query": "^5.90.21",
     "lucide-react": "^1.7.0",
     "openapi-fetch": "^0.17.0",
diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx
index 968154df..3f936335 100644
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -702,7 +702,13 @@ function LayoutContent() {
     <AppShell sidebar={sidebarElement}>
       <TopBar
         breadcrumb={breadcrumb}
-        environment={selectedEnv}
+        environment={environments.length > 0 ? (
+          <EnvironmentSelector
+            environments={environments}
+            value={selectedEnv}
+            onChange={setSelectedEnv}
+          />
+        ) : undefined}
         user={username ? { name: username } : undefined}
         onLogout={handleLogout}
       />
@@ -717,16 +723,6 @@ function LayoutContent() {
         data={searchData}
       />
 
-      {!isAdminPage && environments.length > 0 && (
-        <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '4px 1.5rem 0' }}>
-          <EnvironmentSelector
-            environments={environments}
-            value={selectedEnv}
-            onChange={setSelectedEnv}
-          />
-        </div>
-      )}
-
       {!isAdminPage && (
         <ContentTabs active={scope.tab} onChange={setTab} scope={scope} />
       )}