feat: add dev settings float button with PCGL mode toggle

src/app/public/config.js/route.ts

@@ -26,6 +26,7 @@ export function GET() {
     SHOW_SIGN_IN: parseBoolean(process.env.BENTO_PUBLIC_SHOW_SIGN_IN),
     FORCE_CATALOGUE: parseBoolean(process.env.BENTO_PUBLIC_FORCE_CATALOGUE), // Show data catalogue even with 1 project
     PCGL_MODE: parseBoolean(process.env.BENTO_PUBLIC_PCGL_MODE),
+    SHOW_DEV_SETTINGS: parseBoolean(process.env.BENTO_PUBLIC_SHOW_DEV_SETTINGS), // Dev/staging testing only
 
     // Theme variables
     CATALOGUE_HEADER_BACKGROUND: process.env.BENTO_PUBLIC_CATALOGUE_HEADER_BACKGROUND,

src/js/App.tsx

@@ -24,6 +24,7 @@ import BentoAppRouter from '@/components/BentoAppRouter';
 import LanguageHandler from '@/components/Util/LanguageHandler';
 import AuthOutlet from '@/components/Util/AuthOutlet';
 import ResponsiveProvider from '@/components/Util/ResponsiveProvider';
+import DevSettingsFloatButton from '@/components/Util/DevSettingsFloatButton';
 
 // Hooks and utilities imports
 import { NotificationProvider } from '@/hooks/notifications';
@@ -32,7 +33,7 @@ import { useHandleRefreshTokenError } from '@/features/auth/hooks';
 
 // Store and configuration imports
 import { store } from './store';
-import { PCGL_MODE, SESSION_REFETCH_INTERVAL_SECONDS } from './config';
+import { PCGL_MODE, SESSION_REFETCH_INTERVAL_SECONDS, SHOW_DEV_SETTINGS } from './config';
 
 // Styles imports
 import 'antd/dist/reset.css';
@@ -87,6 +88,7 @@ const InnerRootApp = () => {
       >
         <NotificationProvider>
           <BaseRoutes />
+          {SHOW_DEV_SETTINGS && <DevSettingsFloatButton />}
         </NotificationProvider>
       </ConfigProvider>
     </ChartConfigProvider>

src/js/components/Util/DevSettingsFloatButton.tsx

@@ -0,0 +1,35 @@
+import { FloatButton } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+
+import { CONFIGURED_PCGL_MODE, DEV_SETTINGS, type DevSettings, PCGL_MODE } from '@/config';
+import { LOCALSTORAGE_DEV_SETTINGS_KEY } from '@/constants/ui';
+import { saveValue } from '@/utils/localStorage';
+
+// Config values are read once at module load (i18n namespaces, facet registry, etc.), so any change requires a reload.
+const updateDevSettings = (update: DevSettings) => {
+  saveValue(LOCALSTORAGE_DEV_SETTINGS_KEY, { ...DEV_SETTINGS, ...update });
+  window.location.reload();
+};
+
+/** Floating settings menu for dev/staging testing; only rendered when BENTO_PUBLIC_SHOW_DEV_SETTINGS is true. */
+const DevSettingsFloatButton = () => (
+  <FloatButton.Group
+    className="dev-settings-float-btn"
+    shape="square"
+    trigger="click"
+    icon={<SettingOutlined />}
+    tooltip={{ title: 'Dev settings', placement: 'right' }}
+  >
+    <FloatButton
+      content="PCGL"
+      type={PCGL_MODE ? 'primary' : 'default'}
+      tooltip={{
+        title: `PCGL mode: ${PCGL_MODE ? 'on' : 'off'} (configured: ${CONFIGURED_PCGL_MODE ? 'on' : 'off'})`,
+        placement: 'right',
+      }}
+      onClick={() => updateDevSettings({ PCGL_MODE: !PCGL_MODE })}
+    />
+  </FloatButton.Group>
+);
+
+export default DevSettingsFloatButton;

src/js/config.ts

@@ -1,4 +1,5 @@
 import { stringToBoolean } from '@/utils/strings';
+import { LOCALSTORAGE_DEV_SETTINGS_KEY } from '@/constants/ui';
 
 export interface PublicConfig {
   // General
@@ -15,6 +16,7 @@ export interface PublicConfig {
   SHOW_SIGN_IN: boolean;
   FORCE_CATALOGUE: boolean; // Show data catalogue even with 1 project
   PCGL_MODE: boolean; // Puts Bento Public in "PCGL mode", turning it into the PCGL research portal
+  SHOW_DEV_SETTINGS: boolean; // Show a floating dev settings button for overriding config at runtime (testing only)
   // Theme variables
   CATALOGUE_HEADER_BACKGROUND: string | undefined;
   CATALOGUE_HEADER_TEXT_COLOR: string | undefined;
@@ -53,7 +55,28 @@ export const SHOW_ADMIN_LINK =
 export const SHOW_SIGN_IN = BENTO_PUBLIC_CONFIG.SHOW_SIGN_IN ?? stringToBoolean(process.env.BENTO_PUBLIC_SHOW_SIGN_IN);
 export const FORCE_CATALOGUE =
   BENTO_PUBLIC_CONFIG.FORCE_CATALOGUE ?? stringToBoolean(process.env.BENTO_PUBLIC_FORCE_CATALOGUE);
-export const PCGL_MODE = BENTO_PUBLIC_CONFIG.PCGL_MODE ?? stringToBoolean(process.env.BENTO_PUBLIC_PCGL_MODE);
+export const SHOW_DEV_SETTINGS =
+  BENTO_PUBLIC_CONFIG.SHOW_DEV_SETTINGS ?? stringToBoolean(process.env.BENTO_PUBLIC_SHOW_DEV_SETTINGS);
+
+// Runtime overrides set via the dev settings float button; only honoured when dev settings are enabled, so stale
+// localStorage values can't affect deployments without the flag.
+export interface DevSettings {
+  PCGL_MODE?: boolean;
+}
+const readDevSettings = (): DevSettings => {
+  if (!SHOW_DEV_SETTINGS) return {};
+  try {
+    const parsed = JSON.parse(localStorage.getItem(LOCALSTORAGE_DEV_SETTINGS_KEY) ?? '{}');
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+};
+export const DEV_SETTINGS = readDevSettings();
+
+export const CONFIGURED_PCGL_MODE =
+  BENTO_PUBLIC_CONFIG.PCGL_MODE ?? stringToBoolean(process.env.BENTO_PUBLIC_PCGL_MODE);
+export const PCGL_MODE = DEV_SETTINGS.PCGL_MODE ?? CONFIGURED_PCGL_MODE;
 
 // Beacon configuration and flags
 export const BEACON_URL = BENTO_PUBLIC_CONFIG.BEACON_URL ?? process.env.BEACON_URL;

src/js/constants/ui.ts

@@ -1 +1,2 @@
 export const LOCALSTORAGE_UI_SETTINGS_KEY = 'BENTO_UI_SETTINGS';
+export const LOCALSTORAGE_DEV_SETTINGS_KEY = 'BENTO_DEV_SETTINGS';

src/styles.css

@@ -2067,3 +2067,10 @@ button.pm-sec-head { cursor: pointer; }
 .stat-list--cards .stat-list__description {
   font-size: var(--p-fs-xxsmall); color: var(--text-muted); margin-top: 3px; line-height: 1.4;
 }
+
+.dev-settings-float-btn {
+  /* Sit above the Next.js dev indicator, which is also pinned bottom-left */
+  bottom: 6em;
+  left: 2em;
+  inset-inline-end: auto;
+}