From 90ede041be5b70ad8c18f03fce491554fcc419a9 Mon Sep 17 00:00:00 2001
From: Johannes Ott <johannes.ott@sap.com>
Date: Fri, 22 Aug 2025 14:30:59 +0200
Subject: [PATCH 1/7] ShellBar is hidden on location.href

---
 src/components/Core/ShellBar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx
index a5f3c75f..8d48ae55 100644
--- a/src/components/Core/ShellBar.tsx
+++ b/src/components/Core/ShellBar.tsx
@@ -106,6 +106,7 @@ export function ShellBarComponent() {
     <>
       <ShellBar
         className={styles.TestShellbar}
+        hidden={window.location.href.includes('compact-mode')}
         profile={<Avatar initials={generateInitialsForEmail(auth.user?.email)} size="XS" />}
         startButton={
           <div className={styles.container}>

From 6cd66967239f30e7c513ac1a19a8848e499e07a8 Mon Sep 17 00:00:00 2001
From: enrico-kaack-comp <enrico.kaack@sap.com>
Date: Thu, 28 Aug 2025 10:23:20 +0200
Subject: [PATCH 2/7] add feature toogle component wrapper

---
 src/AppRouter.tsx                               | 10 +++++++++-
 .../Helper/FeatureToggleExistance.tsx           | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Helper/FeatureToggleExistance.tsx

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index 1858dc30..b0f58cbc 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -5,11 +5,19 @@ import { ShellBarComponent } from './components/Core/ShellBar.tsx';
 import { SentryRoutes } from './mount.ts';
 import ProjectPage from './spaces/onboarding/pages/ProjectPage.tsx';
 import McpPage from './spaces/mcp/pages/McpPage.tsx';
+import { SearchParamToggleVisibility } from './components/Helper/FeatureToggleExistance.tsx';
 
 function AppRouter() {
   return (
     <>
-      <ShellBarComponent />
+      <SearchParamToggleVisibility shouldBeVisible={(params) => {
+        if (params === undefined) return true;
+        if (params.get('showHeaderBar') === null) return true;
+        return params?.get('showHeaderBar') === "true"
+      }}>
+        <ShellBarComponent />
+      </SearchParamToggleVisibility>
+
       <Router>
         <SentryRoutes>
           <Route path="/mcp" element={<GlobalProviderOutlet />}>
diff --git a/src/components/Helper/FeatureToggleExistance.tsx b/src/components/Helper/FeatureToggleExistance.tsx
new file mode 100644
index 00000000..38e65be4
--- /dev/null
+++ b/src/components/Helper/FeatureToggleExistance.tsx
@@ -0,0 +1,17 @@
+interface FeatureToggleExistanceProps {
+  shouldBeVisible: (searchParams?: URLSearchParams) => boolean;
+  children?: React.ReactNode;
+}
+
+// A component that conditionally renders its children based on a flag in the URL search parameters.
+// The flag and its handling logic must be set via the `shouldBeVisible` prop function.
+export function SearchParamToggleVisibility({ shouldBeVisible, children }: FeatureToggleExistanceProps) {
+  const searchParams = URL.parse(window.location.href)?.searchParams
+
+  return (
+    <>
+      {shouldBeVisible(searchParams) && children}
+    </>
+  );
+
+}
\ No newline at end of file

From 83de6202a26753e06173a205c4b4852de49e2c96 Mon Sep 17 00:00:00 2001
From: enrico-kaack-comp <enrico.kaack@sap.com>
Date: Fri, 29 Aug 2025 09:14:49 +0200
Subject: [PATCH 3/7] move feedback button

---
 src/components/Core/FeedbackButton.tsx        | 164 ++++++++++++++++++
 .../Core/IntelligentBreadcrumbs.tsx           |  15 +-
 src/components/Core/ShellBar.tsx              | 110 +-----------
 src/spaces/mcp/pages/McpPage.tsx              |   4 +-
 src/spaces/onboarding/pages/ProjectPage.tsx   |   6 +-
 src/views/ProjectList.tsx                     |   6 +-
 6 files changed, 189 insertions(+), 116 deletions(-)
 create mode 100644 src/components/Core/FeedbackButton.tsx

diff --git a/src/components/Core/FeedbackButton.tsx b/src/components/Core/FeedbackButton.tsx
new file mode 100644
index 00000000..2b2d3aea
--- /dev/null
+++ b/src/components/Core/FeedbackButton.tsx
@@ -0,0 +1,164 @@
+import { PopoverDomRef, Ui5CustomEvent, TextAreaDomRef, Button, ButtonDomRef, Popover, Form, FormGroup, FormItem, Label, Link, RatingIndicator, TextArea } from "@ui5/webcomponents-react";
+import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
+import { useAuthOnboarding } from "../../spaces/onboarding/auth/AuthContextOnboarding";
+import { useTranslation } from "react-i18next";
+import { ButtonClickEventDetail } from "@ui5/webcomponents/dist/Button.js";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+
+type UI5RatingIndicatorElement = HTMLElement & { value: number };
+
+
+export function FeedbackButton() {
+  const feedbackPopoverRef = useRef<PopoverDomRef>(null);
+  const [feedbackMessage, setFeedbackMessage] = useState('');
+  const [feedbackSent, setFeedbackSent] = useState(false);
+  const [feedbackPopoverOpen, setFeedbackPopoverOpen] = useState(false);
+  const [rating, setRating] = useState(0);
+  const { user } = useAuthOnboarding();
+
+  const onFeedbackClick = (e: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => {
+    feedbackPopoverRef.current!.opener = e.target;
+    setFeedbackPopoverOpen(!feedbackPopoverOpen);
+  };
+
+  const onFeedbackMessageChange = (event: Ui5CustomEvent<TextAreaDomRef, { value: string; previousValue: string }>) => {
+    const newValue = event.target.value;
+    setFeedbackMessage(newValue);
+  };
+
+  async function onFeedbackSent() {
+    const payload = {
+      message: feedbackMessage,
+      rating: rating.toString(),
+      user: user?.email,
+      environment: window.location.hostname,
+    };
+    try {
+      await fetch('/api/feedback', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+    } catch (err) {
+      console.log(err);
+    } finally {
+      setFeedbackSent(true);
+    }
+  }
+
+  return (
+    <>
+      <Button
+        icon="feedback"
+        tooltip="Feedback"
+        onClick={onFeedbackClick}
+        design={ButtonDesign.Transparent}
+      >
+
+      </Button>
+      <FeedbackPopover
+        open={feedbackPopoverOpen}
+        setOpen={setFeedbackPopoverOpen}
+        popoverRef={feedbackPopoverRef}
+        setRating={setRating}
+        rating={rating}
+        feedbackMessage={feedbackMessage}
+        feedbackSent={feedbackSent}
+        onFeedbackSent={onFeedbackSent}
+        onFeedbackMessageChange={onFeedbackMessageChange}
+      />
+    </>
+  )
+}
+
+const FeedbackPopover = ({
+  open,
+  setOpen,
+  popoverRef,
+  setRating,
+  rating,
+  onFeedbackSent,
+  feedbackMessage,
+  onFeedbackMessageChange,
+  feedbackSent,
+}: {
+  open: boolean;
+  setOpen: (arg0: boolean) => void;
+  popoverRef: RefObject<PopoverDomRef | null>;
+  setRating: Dispatch<SetStateAction<number>>;
+  rating: number;
+  onFeedbackSent: () => void;
+  feedbackMessage: string;
+  onFeedbackMessageChange: (
+    event: Ui5CustomEvent<
+      TextAreaDomRef,
+      {
+        value: string;
+        previousValue: string;
+      }
+    >,
+  ) => void;
+  feedbackSent: boolean;
+}) => {
+  const { t } = useTranslation();
+
+  const onRatingChange = (event: Event & { target: UI5RatingIndicatorElement }) => {
+    setRating(event.target.value);
+  };
+
+  return (
+    <>
+      <Popover ref={popoverRef} placement={PopoverPlacement.Bottom} open={open} onClose={() => setOpen(false)}>
+        <div
+          style={{
+            padding: '1rem',
+            width: '250px',
+          }}
+        >
+          {!feedbackSent ? (
+            <Form headerText={t('ShellBar.feedbackHeader')}>
+              <FormGroup>
+                <FormItem labelContent={<Label style={{ color: 'black' }}>{t('ShellBar.feedbackRatingLabel')}</Label>}>
+                  <RatingIndicator value={rating} max={5} onChange={onRatingChange} />
+                </FormItem>
+                <FormItem
+                  className="formAlignLabelStart"
+                  labelContent={<Label style={{ color: 'black' }}>{t('ShellBar.feedbackMessageLabel')}</Label>}
+                >
+                  <TextArea
+                    value={feedbackMessage}
+                    placeholder={t('ShellBar.feedbackPlaceholder')}
+                    rows={5}
+                    onInput={onFeedbackMessageChange}
+                  />
+                </FormItem>
+                <FormItem>
+                  <Button design="Emphasized" onClick={() => onFeedbackSent()}>
+                    {t('ShellBar.feedbackButton')}
+                  </Button>
+                </FormItem>
+                <FormItem>
+                  <Label style={{ color: 'gray' }}>
+                    {t('ShellBar.feedbackNotificationText')}
+                    <Link
+                      href="https://github.com/openmcp-project/ui-frontend/issues/new/choose"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {t('ShellBar.feedbackNotificationAction')}
+                    </Link>
+                  </Label>
+                </FormItem>
+              </FormGroup>
+            </Form>
+          ) : (
+            <Label>{t('ShellBar.feedbackThanks')}</Label>
+          )}
+        </div>
+      </Popover>
+    </>
+  );
+};
diff --git a/src/components/Core/IntelligentBreadcrumbs.tsx b/src/components/Core/IntelligentBreadcrumbs.tsx
index 1c07923d..cdaf1897 100644
--- a/src/components/Core/IntelligentBreadcrumbs.tsx
+++ b/src/components/Core/IntelligentBreadcrumbs.tsx
@@ -1,9 +1,10 @@
-import { Breadcrumbs, BreadcrumbsDomRef, Ui5CustomEvent } from '@ui5/webcomponents-react';
+import { Breadcrumbs, BreadcrumbsDomRef, FlexBox, FlexBoxAlignItems, Ui5CustomEvent } from '@ui5/webcomponents-react';
 import { BreadcrumbsItem } from '@ui5/webcomponents-react/wrappers';
 import { NavigateOptions, useParams } from 'react-router-dom';
 import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
 import LandscapeLabel from './LandscapeLabel.tsx';
 import { useTranslation } from 'react-i18next';
+import { FeedbackButton } from './FeedbackButton.tsx';
 
 const PREFIX = '/mcp';
 
@@ -58,3 +59,15 @@ export default function IntelligentBreadcrumbs() {
     </>
   );
 }
+
+
+export function BreadCrumbFeedbackHeader() {
+  return (
+    <FlexBox
+      alignItems={FlexBoxAlignItems.Center}
+    >
+      <IntelligentBreadcrumbs />
+      <FeedbackButton />
+    </FlexBox>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx
index 8d48ae55..4afb0d08 100644
--- a/src/components/Core/ShellBar.tsx
+++ b/src/components/Core/ShellBar.tsx
@@ -2,27 +2,20 @@ import {
   Avatar,
   Button,
   ButtonDomRef,
-  Form,
-  FormGroup,
-  FormItem,
   Icon,
-  Label,
-  Link,
   List,
   ListItemStandard,
   Popover,
   PopoverDomRef,
-  RatingIndicator,
   ShellBar,
   ShellBarDomRef,
   ShellBarItem,
   ShellBarItemDomRef,
-  TextArea,
   TextAreaDomRef,
   Ui5CustomEvent,
 } from '@ui5/webcomponents-react';
 import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
-import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react';
+import { RefObject, useEffect, useRef, useState } from 'react';
 import { ShellBarProfileClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBar.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import { useTranslation } from 'react-i18next';
@@ -31,7 +24,6 @@ import styles from './ShellBar.module.css';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { ShellBarItemClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBarItem.js';
 
-type UI5RatingIndicatorElement = HTMLElement & { value: number };
 
 export function ShellBarComponent() {
   const auth = useAuthOnboarding();
@@ -129,17 +121,7 @@ export function ShellBarComponent() {
 
       <ProfilePopover open={profilePopoverOpen} setOpen={setProfilePopoverOpen} popoverRef={profilePopoverRef} />
       <BetaPopover open={betaPopoverOpen} setOpen={setBetaPopoverOpen} popoverRef={betaPopoverRef} />
-      <FeedbackPopover
-        open={feedbackPopoverOpen}
-        setOpen={setFeedbackPopoverOpen}
-        popoverRef={feedbackPopoverRef}
-        setRating={setRating}
-        rating={rating}
-        feedbackMessage={feedbackMessage}
-        feedbackSent={feedbackSent}
-        onFeedbackSent={onFeedbackSent}
-        onFeedbackMessageChange={onFeedbackMessageChange}
-      />
+
     </>
   );
 }
@@ -205,91 +187,3 @@ const BetaPopover = ({
   );
 };
 
-const FeedbackPopover = ({
-  open,
-  setOpen,
-  popoverRef,
-  setRating,
-  rating,
-  onFeedbackSent,
-  feedbackMessage,
-  onFeedbackMessageChange,
-  feedbackSent,
-}: {
-  open: boolean;
-  setOpen: (arg0: boolean) => void;
-  popoverRef: RefObject<PopoverDomRef | null>;
-  setRating: Dispatch<SetStateAction<number>>;
-  rating: number;
-  onFeedbackSent: () => void;
-  feedbackMessage: string;
-  onFeedbackMessageChange: (
-    event: Ui5CustomEvent<
-      TextAreaDomRef,
-      {
-        value: string;
-        previousValue: string;
-      }
-    >,
-  ) => void;
-  feedbackSent: boolean;
-}) => {
-  const { t } = useTranslation();
-
-  const onRatingChange = (event: Event & { target: UI5RatingIndicatorElement }) => {
-    setRating(event.target.value);
-  };
-
-  return (
-    <>
-      <Popover ref={popoverRef} placement={PopoverPlacement.Bottom} open={open} onClose={() => setOpen(false)}>
-        <div
-          style={{
-            padding: '1rem',
-            width: '250px',
-          }}
-        >
-          {!feedbackSent ? (
-            <Form headerText={t('ShellBar.feedbackHeader')}>
-              <FormGroup>
-                <FormItem labelContent={<Label style={{ color: 'black' }}>{t('ShellBar.feedbackRatingLabel')}</Label>}>
-                  <RatingIndicator value={rating} max={5} onChange={onRatingChange} />
-                </FormItem>
-                <FormItem
-                  className="formAlignLabelStart"
-                  labelContent={<Label style={{ color: 'black' }}>{t('ShellBar.feedbackMessageLabel')}</Label>}
-                >
-                  <TextArea
-                    value={feedbackMessage}
-                    placeholder={t('ShellBar.feedbackPlaceholder')}
-                    rows={5}
-                    onInput={onFeedbackMessageChange}
-                  />
-                </FormItem>
-                <FormItem>
-                  <Button design="Emphasized" onClick={() => onFeedbackSent()}>
-                    {t('ShellBar.feedbackButton')}
-                  </Button>
-                </FormItem>
-                <FormItem>
-                  <Label style={{ color: 'gray' }}>
-                    {t('ShellBar.feedbackNotificationText')}
-                    <Link
-                      href="https://github.com/openmcp-project/ui-frontend/issues/new/choose"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      {t('ShellBar.feedbackNotificationAction')}
-                    </Link>
-                  </Label>
-                </FormItem>
-              </FormGroup>
-            </Form>
-          ) : (
-            <Label>{t('ShellBar.feedbackThanks')}</Label>
-          )}
-        </div>
-      </Popover>
-    </>
-  );
-};
diff --git a/src/spaces/mcp/pages/McpPage.tsx b/src/spaces/mcp/pages/McpPage.tsx
index 64870281..de04cac0 100644
--- a/src/spaces/mcp/pages/McpPage.tsx
+++ b/src/spaces/mcp/pages/McpPage.tsx
@@ -7,7 +7,7 @@ import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError';
 // thorws error sometimes if not imported
 import '@ui5/webcomponents-fiori/dist/illustrations/BeforeSearch';
 import IllustratedError from '../../../components/Shared/IllustratedError.tsx';
-import IntelligentBreadcrumbs from '../../../components/Core/IntelligentBreadcrumbs.tsx';
+import { BreadCrumbFeedbackHeader } from '../../../components/Core/IntelligentBreadcrumbs.tsx';
 
 import FluxList from '../../../components/ControlPlane/FluxList.tsx';
 import { ControlPlane as ControlPlaneResource } from '../../../lib/api/types/crate/controlPlanes.ts';
@@ -65,7 +65,7 @@ export default function McpPage() {
             titleArea={
               <ObjectPageTitle
                 header={controlPlaneName}
-                breadcrumbs={<IntelligentBreadcrumbs />}
+                breadcrumbs={<BreadCrumbFeedbackHeader />}
                 //TODO: actionBar should use Toolbar and ToolbarButton for consistent design
                 actionsBar={
                   <div
diff --git a/src/spaces/onboarding/pages/ProjectPage.tsx b/src/spaces/onboarding/pages/ProjectPage.tsx
index aa5288a8..1b83171d 100644
--- a/src/spaces/onboarding/pages/ProjectPage.tsx
+++ b/src/spaces/onboarding/pages/ProjectPage.tsx
@@ -2,7 +2,7 @@ import { ObjectPage, ObjectPageTitle, Title } from '@ui5/webcomponents-react';
 import ProjectChooser from '../../../components/Projects/ProjectChooser.tsx';
 import { useParams } from 'react-router-dom';
 import ControlPlaneListAllWorkspaces from '../../../components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx';
-import IntelligentBreadcrumbs from '../../../components/Core/IntelligentBreadcrumbs.tsx';
+import { BreadCrumbFeedbackHeader } from '../../../components/Core/IntelligentBreadcrumbs.tsx';
 import { ControlPlaneListToolbar } from '../../../components/ControlPlanes/List/ControlPlaneListToolbar.tsx';
 import { Trans, useTranslation } from 'react-i18next';
 import { useApiResource } from '../../../lib/api/useApiResource.ts';
@@ -52,11 +52,11 @@ export default function ProjectPage() {
                 <ProjectChooser currentProjectName={projectName ?? ''} />
               </div>
             }
-            breadcrumbs={<IntelligentBreadcrumbs />}
+            breadcrumbs={<BreadCrumbFeedbackHeader />}
             actionsBar={<ControlPlaneListToolbar projectName={projectName ?? ''} />}
           />
         }
-        //TODO: project chooser should be part of the breadcrumb section if possible?
+      //TODO: project chooser should be part of the breadcrumb section if possible?
       >
         <ControlPlaneListAllWorkspaces projectName={projectName} workspaces={workspaces} />
       </ObjectPage>
diff --git a/src/views/ProjectList.tsx b/src/views/ProjectList.tsx
index d9b85c7e..9532e06e 100644
--- a/src/views/ProjectList.tsx
+++ b/src/views/ProjectList.tsx
@@ -1,6 +1,6 @@
 import { ObjectPage, ObjectPageTitle } from '@ui5/webcomponents-react';
 import ProjectsList from '../components/Projects/ProjectsList.tsx';
-import IntelligentBreadcrumbs from '../components/Core/IntelligentBreadcrumbs.tsx';
+import { BreadCrumbFeedbackHeader } from '../components/Core/IntelligentBreadcrumbs.tsx';
 import { ProjectListToolbar } from '../components/Projects/ProjectListToolbar.tsx';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,9 @@ export default function ProjectsListView() {
       titleArea={
         <ObjectPageTitle
           header={t('ProjectsListView.pageTitle')}
-          breadcrumbs={<IntelligentBreadcrumbs />}
+          breadcrumbs={
+            <BreadCrumbFeedbackHeader />
+          }
           actionsBar={<ProjectListToolbar />}
         />
       }

From c38a9bef0e49b82bfe656129ef64f2ea353a4ce4 Mon Sep 17 00:00:00 2001
From: enrico-kaack-comp <enrico.kaack@sap.com>
Date: Fri, 29 Aug 2025 09:16:03 +0200
Subject: [PATCH 4/7] removed feedback button from shellbar

---
 src/components/Core/ShellBar.tsx | 43 --------------------------------
 1 file changed, 43 deletions(-)

diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx
index 4afb0d08..7ee9dd07 100644
--- a/src/components/Core/ShellBar.tsx
+++ b/src/components/Core/ShellBar.tsx
@@ -9,9 +9,6 @@ import {
   PopoverDomRef,
   ShellBar,
   ShellBarDomRef,
-  ShellBarItem,
-  ShellBarItemDomRef,
-  TextAreaDomRef,
   Ui5CustomEvent,
 } from '@ui5/webcomponents-react';
 import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
@@ -22,23 +19,16 @@ import { useTranslation } from 'react-i18next';
 import { generateInitialsForEmail } from '../Helper/generateInitialsForEmail.ts';
 import styles from './ShellBar.module.css';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import { ShellBarItemClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBarItem.js';
 
 
 export function ShellBarComponent() {
   const auth = useAuthOnboarding();
   const profilePopoverRef = useRef<PopoverDomRef>(null);
   const betaPopoverRef = useRef<PopoverDomRef>(null);
-  const feedbackPopoverRef = useRef<PopoverDomRef>(null);
   const [profilePopoverOpen, setProfilePopoverOpen] = useState(false);
   const [betaPopoverOpen, setBetaPopoverOpen] = useState(false);
-  const [feedbackPopoverOpen, setFeedbackPopoverOpen] = useState(false);
-  const [rating, setRating] = useState(0);
-  const [feedbackMessage, setFeedbackMessage] = useState('');
-  const [feedbackSent, setFeedbackSent] = useState(false);
   const betaButtonRef = useRef<ButtonDomRef>(null);
 
-  const { user } = useAuthOnboarding();
   const { t } = useTranslation();
 
   const onProfileClick = (e: Ui5CustomEvent<ShellBarDomRef, ShellBarProfileClickEventDetail>) => {
@@ -53,38 +43,6 @@ export function ShellBarComponent() {
     }
   };
 
-  const onFeedbackClick = (e: Ui5CustomEvent<ShellBarItemDomRef, ShellBarItemClickEventDetail>) => {
-    feedbackPopoverRef.current!.opener = e.detail.targetRef;
-    setFeedbackPopoverOpen(!feedbackPopoverOpen);
-  };
-
-  const onFeedbackMessageChange = (event: Ui5CustomEvent<TextAreaDomRef, { value: string; previousValue: string }>) => {
-    const newValue = event.target.value;
-    setFeedbackMessage(newValue);
-  };
-
-  async function onFeedbackSent() {
-    const payload = {
-      message: feedbackMessage,
-      rating: rating.toString(),
-      user: user?.email,
-      environment: window.location.hostname,
-    };
-    try {
-      await fetch('/api/feedback', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-      });
-    } catch (err) {
-      console.log(err);
-    } finally {
-      setFeedbackSent(true);
-    }
-  }
-
   useEffect(() => {
     const shellbar = document.querySelector('ui5-shellbar');
     const el = shellbar?.shadowRoot?.querySelector('.ui5-shellbar-overflow-container-left');
@@ -116,7 +74,6 @@ export function ShellBarComponent() {
         }
         onProfileClick={onProfileClick}
       >
-        <ShellBarItem icon="feedback" onClick={onFeedbackClick} />
       </ShellBar>
 
       <ProfilePopover open={profilePopoverOpen} setOpen={setProfilePopoverOpen} popoverRef={profilePopoverRef} />

From 23a3850c5ecc3daec7d12f79201bef3c6b419fff Mon Sep 17 00:00:00 2001
From: enrico-kaack-comp <enrico.kaack@sap.com>
Date: Fri, 29 Aug 2025 09:27:49 +0200
Subject: [PATCH 5/7] moved beta button

---
 src/components/Core/BetaButton.tsx            | 61 +++++++++++++++++++
 .../Core/IntelligentBreadcrumbs.tsx           |  2 +
 src/components/Core/ShellBar.tsx              | 47 --------------
 3 files changed, 63 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Core/BetaButton.tsx

diff --git a/src/components/Core/BetaButton.tsx b/src/components/Core/BetaButton.tsx
new file mode 100644
index 00000000..8270f80d
--- /dev/null
+++ b/src/components/Core/BetaButton.tsx
@@ -0,0 +1,61 @@
+import { ButtonDomRef, Button, Icon, PopoverDomRef, Popover, Text } from "@ui5/webcomponents-react";
+import { useState, useRef, RefObject } from "react";
+import styles from './ShellBar.module.css';
+import { useTranslation } from "react-i18next";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
+
+
+export function BetaButton() {
+  const [betaPopoverOpen, setBetaPopoverOpen] = useState(false);
+  const betaButtonRef = useRef<ButtonDomRef>(null);
+  const betaPopoverRef = useRef<PopoverDomRef>(null);
+  const { t } = useTranslation();
+
+
+  const onBetaClick = () => {
+    if (betaButtonRef.current) {
+      betaPopoverRef.current!.opener = betaButtonRef.current;
+      setBetaPopoverOpen(!betaPopoverOpen);
+    }
+  };
+
+  return (
+    <>
+      <Button ref={betaButtonRef} className={styles.betaButton} onClick={onBetaClick}>
+        <span className={styles.betaContent}>
+          <Icon name="information" className={styles.betaIcon} />
+          <span className={styles.betaText}>{t('ShellBar.betaButton')}</span>
+        </span>
+        <BetaPopover open={betaPopoverOpen} setOpen={setBetaPopoverOpen} popoverRef={betaPopoverRef} />
+      </Button>
+    </>
+  )
+}
+
+const BetaPopover = ({
+  open,
+  setOpen,
+  popoverRef,
+}: {
+  open: boolean;
+  setOpen: (arg0: boolean) => void;
+  popoverRef: RefObject<PopoverDomRef | null>;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Popover ref={popoverRef} placement={PopoverPlacement.Bottom} open={open} onClose={() => setOpen(false)}>
+      <Text
+        style={{
+          padding: '1rem',
+          maxWidth: '250px',
+          fontFamily: ThemingParameters.sapFontFamily,
+        }}
+      >
+        {t('ShellBar.betaButtonDescription')}
+      </Text>
+    </Popover>
+  );
+};
+
diff --git a/src/components/Core/IntelligentBreadcrumbs.tsx b/src/components/Core/IntelligentBreadcrumbs.tsx
index cdaf1897..2ab229c7 100644
--- a/src/components/Core/IntelligentBreadcrumbs.tsx
+++ b/src/components/Core/IntelligentBreadcrumbs.tsx
@@ -5,6 +5,7 @@ import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
 import LandscapeLabel from './LandscapeLabel.tsx';
 import { useTranslation } from 'react-i18next';
 import { FeedbackButton } from './FeedbackButton.tsx';
+import { BetaButton } from './BetaButton.tsx';
 
 const PREFIX = '/mcp';
 
@@ -67,6 +68,7 @@ export function BreadCrumbFeedbackHeader() {
       alignItems={FlexBoxAlignItems.Center}
     >
       <IntelligentBreadcrumbs />
+      <BetaButton />
       <FeedbackButton />
     </FlexBox>
   )
diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx
index 7ee9dd07..03a02708 100644
--- a/src/components/Core/ShellBar.tsx
+++ b/src/components/Core/ShellBar.tsx
@@ -1,8 +1,5 @@
 import {
   Avatar,
-  Button,
-  ButtonDomRef,
-  Icon,
   List,
   ListItemStandard,
   Popover,
@@ -18,30 +15,19 @@ import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'
 import { useTranslation } from 'react-i18next';
 import { generateInitialsForEmail } from '../Helper/generateInitialsForEmail.ts';
 import styles from './ShellBar.module.css';
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
 
 export function ShellBarComponent() {
   const auth = useAuthOnboarding();
   const profilePopoverRef = useRef<PopoverDomRef>(null);
-  const betaPopoverRef = useRef<PopoverDomRef>(null);
   const [profilePopoverOpen, setProfilePopoverOpen] = useState(false);
-  const [betaPopoverOpen, setBetaPopoverOpen] = useState(false);
-  const betaButtonRef = useRef<ButtonDomRef>(null);
 
-  const { t } = useTranslation();
 
   const onProfileClick = (e: Ui5CustomEvent<ShellBarDomRef, ShellBarProfileClickEventDetail>) => {
     profilePopoverRef.current!.opener = e.detail.targetRef;
     setProfilePopoverOpen(!profilePopoverOpen);
   };
 
-  const onBetaClick = () => {
-    if (betaButtonRef.current) {
-      betaPopoverRef.current!.opener = betaButtonRef.current;
-      setBetaPopoverOpen(!betaPopoverOpen);
-    }
-  };
 
   useEffect(() => {
     const shellbar = document.querySelector('ui5-shellbar');
@@ -64,12 +50,6 @@ export function ShellBarComponent() {
               <img src="/logo.png" alt="MCP" className={styles.logo} />
               <span className={styles.logoText}>MCP</span>
             </div>
-            <Button ref={betaButtonRef} className={styles.betaButton} onClick={onBetaClick}>
-              <span className={styles.betaContent}>
-                <Icon name="information" className={styles.betaIcon} />
-                <span className={styles.betaText}>{t('ShellBar.betaButton')}</span>
-              </span>
-            </Button>
           </div>
         }
         onProfileClick={onProfileClick}
@@ -77,7 +57,6 @@ export function ShellBarComponent() {
       </ShellBar>
 
       <ProfilePopover open={profilePopoverOpen} setOpen={setProfilePopoverOpen} popoverRef={profilePopoverRef} />
-      <BetaPopover open={betaPopoverOpen} setOpen={setBetaPopoverOpen} popoverRef={betaPopoverRef} />
 
     </>
   );
@@ -118,29 +97,3 @@ const ProfilePopover = ({
   );
 };
 
-const BetaPopover = ({
-  open,
-  setOpen,
-  popoverRef,
-}: {
-  open: boolean;
-  setOpen: (arg0: boolean) => void;
-  popoverRef: RefObject<PopoverDomRef | null>;
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Popover ref={popoverRef} placement={PopoverPlacement.Bottom} open={open} onClose={() => setOpen(false)}>
-      <div
-        style={{
-          padding: '1rem',
-          maxWidth: '250px',
-          fontFamily: ThemingParameters.sapFontFamily,
-        }}
-      >
-        {t('ShellBar.betaButtonDescription')}
-      </div>
-    </Popover>
-  );
-};
-

From 6b355468c34a6903c27d0160e1d4a7774990f22e Mon Sep 17 00:00:00 2001
From: enrico-kaack-comp <enrico.kaack@sap.com>
Date: Fri, 29 Aug 2025 09:38:38 +0200
Subject: [PATCH 6/7] linter fix

---
 src/AppRouter.tsx                             | 12 +++---
 src/components/Core/BetaButton.tsx            | 13 +++---
 src/components/Core/FeedbackButton.tsx        | 40 +++++++++++--------
 .../Core/IntelligentBreadcrumbs.tsx           |  9 ++---
 src/components/Core/ShellBar.tsx              |  8 +---
 .../Helper/FeatureToggleExistance.tsx         | 11 ++---
 src/spaces/onboarding/pages/ProjectPage.tsx   |  2 +-
 src/views/ProjectList.tsx                     |  4 +-
 8 files changed, 44 insertions(+), 55 deletions(-)

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index b0f58cbc..d47fe664 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -10,11 +10,13 @@ import { SearchParamToggleVisibility } from './components/Helper/FeatureToggleEx
 function AppRouter() {
   return (
     <>
-      <SearchParamToggleVisibility shouldBeVisible={(params) => {
-        if (params === undefined) return true;
-        if (params.get('showHeaderBar') === null) return true;
-        return params?.get('showHeaderBar') === "true"
-      }}>
+      <SearchParamToggleVisibility
+        shouldBeVisible={(params) => {
+          if (params === undefined) return true;
+          if (params.get('showHeaderBar') === null) return true;
+          return params?.get('showHeaderBar') === 'true';
+        }}
+      >
         <ShellBarComponent />
       </SearchParamToggleVisibility>
 
diff --git a/src/components/Core/BetaButton.tsx b/src/components/Core/BetaButton.tsx
index 8270f80d..3f76eba7 100644
--- a/src/components/Core/BetaButton.tsx
+++ b/src/components/Core/BetaButton.tsx
@@ -1,18 +1,16 @@
-import { ButtonDomRef, Button, Icon, PopoverDomRef, Popover, Text } from "@ui5/webcomponents-react";
-import { useState, useRef, RefObject } from "react";
+import { ButtonDomRef, Button, Icon, PopoverDomRef, Popover, Text } from '@ui5/webcomponents-react';
+import { useState, useRef, RefObject } from 'react';
 import styles from './ShellBar.module.css';
-import { useTranslation } from "react-i18next";
-import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import { useTranslation } from 'react-i18next';
+import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
-
 export function BetaButton() {
   const [betaPopoverOpen, setBetaPopoverOpen] = useState(false);
   const betaButtonRef = useRef<ButtonDomRef>(null);
   const betaPopoverRef = useRef<PopoverDomRef>(null);
   const { t } = useTranslation();
 
-
   const onBetaClick = () => {
     if (betaButtonRef.current) {
       betaPopoverRef.current!.opener = betaButtonRef.current;
@@ -30,7 +28,7 @@ export function BetaButton() {
         <BetaPopover open={betaPopoverOpen} setOpen={setBetaPopoverOpen} popoverRef={betaPopoverRef} />
       </Button>
     </>
-  )
+  );
 }
 
 const BetaPopover = ({
@@ -58,4 +56,3 @@ const BetaPopover = ({
     </Popover>
   );
 };
-
diff --git a/src/components/Core/FeedbackButton.tsx b/src/components/Core/FeedbackButton.tsx
index 2b2d3aea..1fc3d8aa 100644
--- a/src/components/Core/FeedbackButton.tsx
+++ b/src/components/Core/FeedbackButton.tsx
@@ -1,14 +1,27 @@
-import { PopoverDomRef, Ui5CustomEvent, TextAreaDomRef, Button, ButtonDomRef, Popover, Form, FormGroup, FormItem, Label, Link, RatingIndicator, TextArea } from "@ui5/webcomponents-react";
-import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
-import { useAuthOnboarding } from "../../spaces/onboarding/auth/AuthContextOnboarding";
-import { useTranslation } from "react-i18next";
-import { ButtonClickEventDetail } from "@ui5/webcomponents/dist/Button.js";
-import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
-import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import {
+  PopoverDomRef,
+  Ui5CustomEvent,
+  TextAreaDomRef,
+  Button,
+  ButtonDomRef,
+  Popover,
+  Form,
+  FormGroup,
+  FormItem,
+  Label,
+  Link,
+  RatingIndicator,
+  TextArea,
+} from '@ui5/webcomponents-react';
+import { Dispatch, RefObject, SetStateAction, useRef, useState } from 'react';
+import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding';
+import { useTranslation } from 'react-i18next';
+import { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
+import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
+import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 
 type UI5RatingIndicatorElement = HTMLElement & { value: number };
 
-
 export function FeedbackButton() {
   const feedbackPopoverRef = useRef<PopoverDomRef>(null);
   const [feedbackMessage, setFeedbackMessage] = useState('');
@@ -51,14 +64,7 @@ export function FeedbackButton() {
 
   return (
     <>
-      <Button
-        icon="feedback"
-        tooltip="Feedback"
-        onClick={onFeedbackClick}
-        design={ButtonDesign.Transparent}
-      >
-
-      </Button>
+      <Button icon="feedback" tooltip="Feedback" design={ButtonDesign.Transparent} onClick={onFeedbackClick} />
       <FeedbackPopover
         open={feedbackPopoverOpen}
         setOpen={setFeedbackPopoverOpen}
@@ -71,7 +77,7 @@ export function FeedbackButton() {
         onFeedbackMessageChange={onFeedbackMessageChange}
       />
     </>
-  )
+  );
 }
 
 const FeedbackPopover = ({
diff --git a/src/components/Core/IntelligentBreadcrumbs.tsx b/src/components/Core/IntelligentBreadcrumbs.tsx
index 2ab229c7..c9bc9399 100644
--- a/src/components/Core/IntelligentBreadcrumbs.tsx
+++ b/src/components/Core/IntelligentBreadcrumbs.tsx
@@ -61,15 +61,12 @@ export default function IntelligentBreadcrumbs() {
   );
 }
 
-
 export function BreadCrumbFeedbackHeader() {
   return (
-    <FlexBox
-      alignItems={FlexBoxAlignItems.Center}
-    >
+    <FlexBox alignItems={FlexBoxAlignItems.Center}>
       <IntelligentBreadcrumbs />
       <BetaButton />
       <FeedbackButton />
     </FlexBox>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx
index 03a02708..c08b8edf 100644
--- a/src/components/Core/ShellBar.tsx
+++ b/src/components/Core/ShellBar.tsx
@@ -16,19 +16,16 @@ import { useTranslation } from 'react-i18next';
 import { generateInitialsForEmail } from '../Helper/generateInitialsForEmail.ts';
 import styles from './ShellBar.module.css';
 
-
 export function ShellBarComponent() {
   const auth = useAuthOnboarding();
   const profilePopoverRef = useRef<PopoverDomRef>(null);
   const [profilePopoverOpen, setProfilePopoverOpen] = useState(false);
 
-
   const onProfileClick = (e: Ui5CustomEvent<ShellBarDomRef, ShellBarProfileClickEventDetail>) => {
     profilePopoverRef.current!.opener = e.detail.targetRef;
     setProfilePopoverOpen(!profilePopoverOpen);
   };
 
-
   useEffect(() => {
     const shellbar = document.querySelector('ui5-shellbar');
     const el = shellbar?.shadowRoot?.querySelector('.ui5-shellbar-overflow-container-left');
@@ -53,11 +50,9 @@ export function ShellBarComponent() {
           </div>
         }
         onProfileClick={onProfileClick}
-      >
-      </ShellBar>
+      />
 
       <ProfilePopover open={profilePopoverOpen} setOpen={setProfilePopoverOpen} popoverRef={profilePopoverRef} />
-
     </>
   );
 }
@@ -96,4 +91,3 @@ const ProfilePopover = ({
     </Popover>
   );
 };
-
diff --git a/src/components/Helper/FeatureToggleExistance.tsx b/src/components/Helper/FeatureToggleExistance.tsx
index 38e65be4..3bb1d8de 100644
--- a/src/components/Helper/FeatureToggleExistance.tsx
+++ b/src/components/Helper/FeatureToggleExistance.tsx
@@ -6,12 +6,7 @@ interface FeatureToggleExistanceProps {
 // A component that conditionally renders its children based on a flag in the URL search parameters.
 // The flag and its handling logic must be set via the `shouldBeVisible` prop function.
 export function SearchParamToggleVisibility({ shouldBeVisible, children }: FeatureToggleExistanceProps) {
-  const searchParams = URL.parse(window.location.href)?.searchParams
+  const searchParams = URL.parse(window.location.href)?.searchParams;
 
-  return (
-    <>
-      {shouldBeVisible(searchParams) && children}
-    </>
-  );
-
-}
\ No newline at end of file
+  return <>{shouldBeVisible(searchParams) && children}</>;
+}
diff --git a/src/spaces/onboarding/pages/ProjectPage.tsx b/src/spaces/onboarding/pages/ProjectPage.tsx
index 1b83171d..ab1808e3 100644
--- a/src/spaces/onboarding/pages/ProjectPage.tsx
+++ b/src/spaces/onboarding/pages/ProjectPage.tsx
@@ -56,7 +56,7 @@ export default function ProjectPage() {
             actionsBar={<ControlPlaneListToolbar projectName={projectName ?? ''} />}
           />
         }
-      //TODO: project chooser should be part of the breadcrumb section if possible?
+        //TODO: project chooser should be part of the breadcrumb section if possible?
       >
         <ControlPlaneListAllWorkspaces projectName={projectName} workspaces={workspaces} />
       </ObjectPage>
diff --git a/src/views/ProjectList.tsx b/src/views/ProjectList.tsx
index 9532e06e..ebb9fdd0 100644
--- a/src/views/ProjectList.tsx
+++ b/src/views/ProjectList.tsx
@@ -13,9 +13,7 @@ export default function ProjectsListView() {
       titleArea={
         <ObjectPageTitle
           header={t('ProjectsListView.pageTitle')}
-          breadcrumbs={
-            <BreadCrumbFeedbackHeader />
-          }
+          breadcrumbs={<BreadCrumbFeedbackHeader />}
           actionsBar={<ProjectListToolbar />}
         />
       }

From ee7ac56bd35b4ff592aac0bd13745f6fe8883ac8 Mon Sep 17 00:00:00 2001
From: enrico-kaack-comp <enrico.kaack@sap.com>
Date: Mon, 1 Sep 2025 09:30:27 +0200
Subject: [PATCH 7/7] logout button back

---
 .../Core/IntelligentBreadcrumbs.tsx           | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/components/Core/IntelligentBreadcrumbs.tsx b/src/components/Core/IntelligentBreadcrumbs.tsx
index c9bc9399..8e641ce2 100644
--- a/src/components/Core/IntelligentBreadcrumbs.tsx
+++ b/src/components/Core/IntelligentBreadcrumbs.tsx
@@ -1,4 +1,13 @@
-import { Breadcrumbs, BreadcrumbsDomRef, FlexBox, FlexBoxAlignItems, Ui5CustomEvent } from '@ui5/webcomponents-react';
+import {
+  Breadcrumbs,
+  BreadcrumbsDomRef,
+  Button,
+  FlexBox,
+  FlexBoxAlignItems,
+  Menu,
+  MenuItem,
+  Ui5CustomEvent,
+} from '@ui5/webcomponents-react';
 import { BreadcrumbsItem } from '@ui5/webcomponents-react/wrappers';
 import { NavigateOptions, useParams } from 'react-router-dom';
 import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
@@ -6,6 +15,9 @@ import LandscapeLabel from './LandscapeLabel.tsx';
 import { useTranslation } from 'react-i18next';
 import { FeedbackButton } from './FeedbackButton.tsx';
 import { BetaButton } from './BetaButton.tsx';
+import { useRef, useState } from 'react';
+import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
+import { SearchParamToggleVisibility } from '../Helper/FeatureToggleExistance.tsx';
 
 const PREFIX = '/mcp';
 
@@ -67,6 +79,50 @@ export function BreadCrumbFeedbackHeader() {
       <IntelligentBreadcrumbs />
       <BetaButton />
       <FeedbackButton />
+      <SearchParamToggleVisibility
+        shouldBeVisible={(params) => {
+          if (params === undefined) return false;
+          if (params.get('showHeaderBar') === null) return false;
+          return params?.get('showHeaderBar') === 'false';
+        }}
+      >
+        <LogoutMenu />
+      </SearchParamToggleVisibility>
     </FlexBox>
   );
 }
+
+function LogoutMenu() {
+  const auth = useAuthOnboarding();
+  const { t } = useTranslation();
+
+  const buttonRef = useRef(null);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        icon="menu2"
+        onClick={() => {
+          setMenuIsOpen(true);
+        }}
+      />
+      <Menu
+        opener={buttonRef.current}
+        open={menuIsOpen}
+        onClose={() => {
+          setMenuIsOpen(false);
+        }}
+      >
+        <MenuItem
+          icon="log"
+          text={t('ShellBar.signOutButton')}
+          onClick={async () => {
+            setMenuIsOpen(false);
+            await auth.logout();
+          }}
+        />
+      </Menu>
+    </>
+  );
+}