Sandbox project picker with main project name

CHANGELOG.md

@@ -19,6 +19,10 @@ and this project adheres to
 
 ### Changed
 
+- Project picker now shows sandbox hierarchy with parent project name (e.g.
+  `root:sandbox`), sandbox accent color, and nested tree view. Sandbox theming
+  removed from sidebar/navbar.
+  [#4510](https://github.com/OpenFn/lightning/issues/4510)
 - Bump `@openfn/ws-worker` from
   [`1.23.1` to `1.23.4`](https://github.com/OpenFn/kit/blob/%40openfn/ws-worker%401.23.4/packages/ws-worker/CHANGELOG.md?plain=1#L3-L26)
 - Renamed channel terminology from Source/Sink to Client/Destination across

assets/css/app.css

@@ -443,17 +443,10 @@
       opacity: 1;
     }
 
-    .project-picker-text,
-    .project-picker-chevron {
-      display: block;
-    }
-
-    #project-picker-wrapper,
     #user-menu-wrapper {
       display: block;
     }
 
-    #project-picker-trigger,
     #user-menu-trigger {
       width: 100%;
     }
@@ -498,9 +491,7 @@
       display: flex;
     }
 
-    .user-menu-chevron,
-    .project-picker-text,
-    .project-picker-chevron {
+    .user-menu-chevron {
       display: block;
     }
 
@@ -556,8 +547,6 @@
       gap: 0;
     }
 
-    .project-picker-text,
-    .project-picker-chevron,
     .user-menu-text,
     .user-menu-chevron {
       display: none;
@@ -609,7 +598,6 @@
     }
 
     /* Wrappers stay block, elements handle centering internally */
-    #project-picker-wrapper,
     #user-menu-wrapper {
       display: block;
     }

assets/js/collaborative-editor/CollaborativeEditor.tsx

@@ -6,11 +6,8 @@ import { SocketProvider } from '../react/contexts/SocketProvider';
 import type { WithActionProps } from '../react/lib/with-props';
 
 import { AIAssistantPanelWrapper } from './components/AIAssistantPanelWrapper';
-import {
-  BreadcrumbLink,
-  BreadcrumbProjectPicker,
-  BreadcrumbText,
-} from './components/Breadcrumbs';
+import { BreadcrumbLink, BreadcrumbText } from './components/Breadcrumbs';
+import { ProjectPickerButton } from '../project-picker/ProjectPickerButton';
 import type { MonacoHandle } from './components/CollaborativeMonaco';
 import { Header } from './components/Header';
 import { LoadingBoundary } from './components/LoadingBoundary';
@@ -37,10 +34,12 @@ export interface CollaborativeEditorDataProps {
   'data-workflow-name': string;
   'data-project-id': string;
   'data-project-name'?: string;
+  'data-project-display-name'?: string;
+  'data-project-is-sandbox'?: string;
   'data-project-color'?: string;
-  'data-project-env'?: string;
   'data-root-project-id'?: string;
   'data-root-project-name'?: string;
+  'data-project-env'?: string;
   'data-is-new-workflow'?: string;
   'data-ai-assistant-enabled'?: string;
   // Initial run data from server to avoid client-side race conditions
@@ -64,6 +63,9 @@ interface BreadcrumbContentProps {
   workflowName: string;
   projectIdFallback?: string;
   projectNameFallback?: string;
+  projectDisplayNameFallback?: string | null;
+  projectIsSandboxFallback?: string;
+  projectColorFallback?: string | null;
   projectEnvFallback?: string;
   isNewWorkflow?: boolean;
   aiAssistantEnabled: boolean;
@@ -74,6 +76,9 @@ function BreadcrumbContent({
   workflowName,
   projectIdFallback,
   projectNameFallback,
+  projectDisplayNameFallback,
+  projectIsSandboxFallback,
+  projectColorFallback,
   projectEnvFallback,
   isNewWorkflow = false,
   aiAssistantEnabled,
@@ -91,25 +96,22 @@ function BreadcrumbContent({
   const projectId = projectFromStore?.id ?? projectIdFallback;
   const projectName = projectFromStore?.name ?? projectNameFallback;
   const projectEnv = projectFromStore?.env ?? projectEnvFallback;
+  const displayName = projectDisplayNameFallback ?? projectName;
+  const projectColor = projectColorFallback ?? null;
+  const isSandbox = projectIsSandboxFallback === 'true';
   const currentWorkflowName = workflowFromStore?.name ?? workflowName;
 
   const handleVersionSelect = useVersionSelect();
 
-  const handleProjectPickerClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    // Dispatch the event that the global ProjectPicker listens for
-    document.body.dispatchEvent(new CustomEvent('open-project-picker'));
-  };
-
   const breadcrumbElements = useMemo(() => {
     return [
       // Project name as picker trigger
-      <BreadcrumbProjectPicker
+      <ProjectPickerButton
         key="project-picker"
-        onClick={handleProjectPickerClick}
-      >
-        {projectName}
-      </BreadcrumbProjectPicker>,
+        data-label={displayName ?? ''}
+        data-is-sandbox={isSandbox ? 'true' : 'false'}
+        data-color={projectColor ?? undefined}
+      />,
       <BreadcrumbLink href={`/projects/${projectId}/w`} key="workflows">
         Workflows
       </BreadcrumbLink>,
@@ -142,7 +144,9 @@ function BreadcrumbContent({
     ];
   }, [
     projectId,
-    projectName,
+    displayName,
+    isSandbox,
+    projectColor,
     projectEnv,
     currentWorkflowName,
     workflowId,
@@ -172,9 +176,12 @@ export const CollaborativeEditor: WithActionProps<
   const workflowName = props['data-workflow-name'];
   const projectId = props['data-project-id'];
   const projectName = props['data-project-name'];
-  const projectEnv = props['data-project-env'];
+  const projectDisplayName = props['data-project-display-name'] ?? null;
+  const projectIsSandbox = props['data-project-is-sandbox'] ?? 'false';
+  const projectColor = props['data-project-color'] ?? null;
   const rootProjectId = props['data-root-project-id'] ?? null;
   const rootProjectName = props['data-root-project-name'] ?? null;
+  const projectEnv = props['data-project-env'];
   const isNewWorkflow = props['data-is-new-workflow'] === 'true';
   const aiAssistantEnabled = props['data-ai-assistant-enabled'] === 'true';
   const initialRunData = props['data-initial-run-data'];
@@ -220,14 +227,15 @@ export const CollaborativeEditor: WithActionProps<
                         {...(projectName !== undefined && {
                           projectNameFallback: projectName,
                         })}
-                        {...(projectEnv !== undefined && {
-                          projectEnvFallback: projectEnv,
+                        {...(projectDisplayName !== null && {
+                          projectDisplayNameFallback: projectDisplayName,
                         })}
-                        {...(rootProjectId !== null && {
-                          rootProjectIdFallback: rootProjectId,
+                        projectIsSandboxFallback={projectIsSandbox}
+                        {...(projectColor !== null && {
+                          projectColorFallback: projectColor,
                         })}
-                        {...(rootProjectName !== null && {
-                          rootProjectNameFallback: rootProjectName,
+                        {...(projectEnv !== undefined && {
+                          projectEnvFallback: projectEnv,
                         })}
                       />
                       <div className="flex-1 min-h-0 overflow-hidden relative">

assets/js/collaborative-editor/components/Breadcrumbs.tsx

@@ -126,22 +126,3 @@ export function BreadcrumbText({
     </span>
   );
 }
-
-export function BreadcrumbProjectPicker({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode;
-  onClick?: (e: React.MouseEvent) => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="flex items-center gap-2 px-2.5 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:border-gray-400 cursor-pointer transition-colors"
-    >
-      <span className="hero-folder h-4 w-4 text-gray-500" />
-      {children}
-    </button>
-  );
-}