fix(product-view): inline environment pills + hide the page under toolbar menus

The environment dropdown opened underneath the embedded page — the native
WebContentsView paints above every renderer popover, so any menu over the
page area was invisible.

- environments are now inline toolbar pills: one click switches instantly
  (each environment keeps its own live view, so page state is preserved),
  nothing opens over the page in the hot path; "+" adds an environment and
  right-click on a pill removes it
- new productViewObscuredStore: renderer popovers that can overlap the page
  (the pill context menu, alongside the existing command-menu case) hide the
  native view while open, with an unmount guard so a leaked acquire can't
  keep the page hidden

Generated-By: PostHog Code
Task-Id: 1120fcea-fc07-4c54-8dbb-50b7b712f9cb

Author: DanielVisca

packages/ui/src/features/product-view/ProductView.tsx

@@ -2,7 +2,6 @@ import {
   ArrowClockwiseIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
-  CaretDownIcon,
   CursorClickIcon,
   GlobeIcon,
   MonitorIcon,
@@ -13,11 +12,10 @@ import { useHostTRPC } from "@posthog/host-router/react";
 import {
   Badge,
   Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
   Empty,
   EmptyDescription,
   EmptyHeader,
@@ -29,9 +27,10 @@ import type { ProductEnvironment } from "@posthog/shared";
 import { useProjects } from "@posthog/ui/features/projects/useProjects";
 import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
 import { useMutation } from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ElementDetailsPanel } from "./ElementDetailsPanel";
 import { ProductEnvironmentPicker } from "./ProductEnvironmentPicker";
+import { useProductViewObscuredStore } from "./productViewObscuredStore";
 import {
   useProductEnvironments,
   useRemoveProductEnvironment,
@@ -238,51 +237,26 @@ function ProductBrowser(props: {
           <CursorClickIcon size={14} />
           Inspect
         </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={
-              <Button variant="outline" size="sm">
-                {isLocalOrigin(environment.pageOrigin) ? (
-                  <MonitorIcon size={14} />
-                ) : (
-                  <GlobeIcon size={14} />
-                )}
-                {environment.label}
-                <CaretDownIcon size={12} />
-              </Button>
-            }
+        {/* One pill per environment: a click switches instantly (each
+            environment keeps its own live view). Inline — a popover here
+            would be hidden under the native page view. */}
+        {environments.map((env) => (
+          <EnvironmentPill
+            key={env.id}
+            environment={env}
+            active={env.id === environment.id}
+            onSelect={() => onSwitchEnvironment(env.id)}
+            onRemove={() => removeEnvironment.mutate({ id: env.id })}
           />
-          <DropdownMenuContent align="end">
-            {environments.map((env) => (
-              <DropdownMenuItem
-                key={env.id}
-                onClick={() => onSwitchEnvironment(env.id)}
-              >
-                {isLocalOrigin(env.pageOrigin) ? (
-                  <MonitorIcon size={14} />
-                ) : (
-                  <GlobeIcon size={14} />
-                )}
-                {env.label}
-                <span className="ml-auto pl-4 text-gray-11 text-xs">
-                  {env.pageOrigin.replace(/^https?:\/\//, "")}
-                </span>
-              </DropdownMenuItem>
-            ))}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={onAddEnvironment}>
-              <PlusIcon size={14} />
-              Add environment…
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              variant="destructive"
-              onClick={() => removeEnvironment.mutate({ id: environment.id })}
-            >
-              <TrashIcon size={14} />
-              Remove this environment
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        ))}
+        <Button
+          size="icon-sm"
+          aria-label="Add environment"
+          title="Add environment"
+          onClick={onAddEnvironment}
+        >
+          <PlusIcon size={14} />
+        </Button>
         <Badge
           variant="default"
           title="Analytics overlaid on this page come from this PostHog project"
@@ -306,3 +280,59 @@ function ProductBrowser(props: {
     </div>
   );
 }
+
+/** Toolbar pill for one environment. Right-click for management actions;
+ * the context menu hides the native view while open (z-order). */
+function EnvironmentPill(props: {
+  environment: ProductEnvironment;
+  active: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+}) {
+  const { environment, active, onSelect, onRemove } = props;
+  const acquire = useProductViewObscuredStore((s) => s.acquire);
+  const release = useProductViewObscuredStore((s) => s.release);
+  // Balance the counter if the pill unmounts while its menu is open (e.g.
+  // "Remove environment" removes the pill itself) — a leaked acquire would
+  // keep the page hidden forever.
+  const holdingRef = useRef(false);
+  useEffect(
+    () => () => {
+      if (holdingRef.current) release();
+    },
+    [release],
+  );
+  return (
+    <ContextMenu
+      onOpenChange={(open) => {
+        holdingRef.current = open;
+        if (open) acquire();
+        else release();
+      }}
+    >
+      <ContextMenuTrigger
+        render={
+          <Button
+            variant={active ? "primary" : "outline"}
+            size="sm"
+            title={environment.pageOrigin}
+            onClick={onSelect}
+          >
+            {isLocalOrigin(environment.pageOrigin) ? (
+              <MonitorIcon size={14} />
+            ) : (
+              <GlobeIcon size={14} />
+            )}
+            {environment.label}
+          </Button>
+        }
+      />
+      <ContextMenuContent>
+        <ContextMenuItem variant="destructive" onClick={onRemove}>
+          <TrashIcon size={14} />
+          Remove environment
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

packages/ui/src/features/product-view/productViewObscuredStore.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+/**
+ * The embedded product page is a NATIVE view that paints above the renderer,
+ * so any renderer popover that can overlap its rectangle (menus, pickers)
+ * must hide the view while open. This counter is that cooperation point:
+ * acquire() on open, release() on close; the slot hides the view while > 0.
+ */
+interface ProductViewObscuredState {
+  count: number;
+  acquire: () => void;
+  release: () => void;
+}
+
+export const useProductViewObscuredStore = create<ProductViewObscuredState>(
+  (set) => ({
+    count: 0,
+    acquire: () => set((state) => ({ count: state.count + 1 })),
+    release: () => set((state) => ({ count: Math.max(0, state.count - 1) })),
+  }),
+);

packages/ui/src/features/product-view/useProductView.ts

@@ -3,6 +3,7 @@ import { useCommandMenuStore } from "@posthog/ui/shell/commandMenuStore";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useSubscription } from "@trpc/tanstack-react-query";
 import { useEffect, useRef, useState } from "react";
+import { useProductViewObscuredStore } from "./productViewObscuredStore";
 
 export interface ProductViewPageState {
   viewId: string;
@@ -60,6 +61,7 @@ export function useProductViewSlot(input: {
   const setBounds = useMutation(trpc.productView.setBounds.mutationOptions());
   const setVisible = useMutation(trpc.productView.setVisible.mutationOptions());
   const commandMenuOpen = useCommandMenuStore((s) => s.isOpen);
+  const obscuredCount = useProductViewObscuredStore((s) => s.count);
 
   const openMutate = open.mutateAsync;
   const setBoundsMutate = setBounds.mutate;
@@ -124,12 +126,15 @@ export function useProductViewSlot(input: {
     setVisibleMutate,
   ]);
 
-  // The command menu is a renderer overlay and cannot paint over the native
-  // view — hide the view while the menu is open.
+  // Renderer overlays (command menu, toolbar menus) cannot paint over the
+  // native view — hide the view while any of them is open.
   useEffect(() => {
     if (!openedRef.current) return;
-    setVisibleMutate({ viewId, visible: !commandMenuOpen });
-  }, [commandMenuOpen, viewId, setVisibleMutate]);
+    setVisibleMutate({
+      viewId,
+      visible: !commandMenuOpen && obscuredCount === 0,
+    });
+  }, [commandMenuOpen, obscuredCount, viewId, setVisibleMutate]);
 
   return slotRef;
 }