From a601b8e0788a50c2bfd2b5d2a6d5b8ac93619425 Mon Sep 17 00:00:00 2001
From: Andre Padez <andre.padez@gmail.com>
Date: Mon, 23 Feb 2026 05:29:58 +0000
Subject: [PATCH] noHeader in WorkspaceLayout

---
 .../officerdev/src/apps/Projects/ProjectPreview.tsx |  6 +++---
 .../src/apps/Workspaces/WorkspacePreview.tsx        |  4 ++--
 .../src/components/Workspace/PanelSlot.tsx          | 13 +++++++++----
 .../src/components/Workspace/WorkspaceLayout.tsx    |  4 +++-
 .../src/components/Workspace/WorkspaceRenderer.tsx  |  8 ++++++++
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx b/src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx
index 577ffb4c..eaca4a6d 100644
--- a/src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx
+++ b/src/workspaces/officerdev/src/apps/Projects/ProjectPreview.tsx
@@ -227,7 +227,7 @@ const tplRegistry = Object.fromEntries(
 );
 
 const TemplatePanel = () => (
-  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} />
+  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} noHeader />
 );
 
 // --- Panel: Details (Name + Description + Project Type + Backend/Auth toggles) ---
@@ -432,7 +432,7 @@ const TemplatePreviewInner = ({ templateIdx }: { templateIdx: number }) => {
     queryClient.setQueryData(PREVIEW_LAYOUT_KEY, next);
   };
 
-  return <WorkspaceLayout layout={layout} onLayoutChange={handleLayoutChange} />;
+  return <WorkspaceLayout layout={layout} onLayoutChange={handleLayoutChange} noHeader />;
 };
 
 const TemplatePreviewPanel = () => {
@@ -484,7 +484,7 @@ const NewProjectForm = () => {
     'new-proj-create': { name: 'Create', icon: Rocket, component: CreatePanel },
   };
 
-  return <WorkspaceLayout layout={newProjLayout} onLayoutChange={() => {}} registry={newProjRegistry} />;
+  return <WorkspaceLayout layout={newProjLayout} onLayoutChange={() => {}} registry={newProjRegistry} noHeader />;
 };
 
 const ProjectPreviewEmpty = () => {
diff --git a/src/workspaces/officerdev/src/apps/Workspaces/WorkspacePreview.tsx b/src/workspaces/officerdev/src/apps/Workspaces/WorkspacePreview.tsx
index d346e7cc..9ef55793 100644
--- a/src/workspaces/officerdev/src/apps/Workspaces/WorkspacePreview.tsx
+++ b/src/workspaces/officerdev/src/apps/Workspaces/WorkspacePreview.tsx
@@ -225,7 +225,7 @@ const tplRegistry = Object.fromEntries(
 );
 
 const TemplatePanel = () => (
-  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} />
+  <WorkspaceLayout layout={tplPanelLayout} onLayoutChange={() => {}} registry={tplRegistry} noHeader />
 );
 
 // --- Panel: Name ---
@@ -440,7 +440,7 @@ const NewWorkspaceForm = () => {
     'new-ws-create': { name: 'Create', icon: Rocket, component: CreatePanel },
   };
 
-  return <WorkspaceLayout layout={newWsLayout} onLayoutChange={() => {}} registry={newWsRegistry} />;
+  return <WorkspaceLayout layout={newWsLayout} onLayoutChange={() => {}} registry={newWsRegistry} noHeader />;
 };
 
 // --- Empty State ---
diff --git a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
index 1da5c356..1db5aa33 100644
--- a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
@@ -19,6 +19,7 @@ type PanelSlotProps = {
   registry: AppRegistry;
   components?: PanelComponents;
   interactive: boolean;
+  noHeader: boolean;
   isLastPanel: boolean;
   onSetApp: (panelId: string, appType: string | null) => void;
   onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
@@ -181,7 +182,7 @@ const TrafficLights = ({ panelId, isLastPanel, onRemove, onClearApp }: { panelId
 //   return <div className="absolute inset-0 z-20 rounded-lg bg-duck-dark/10 pointer-events-none" />;
 // };
 
-export const PanelSlot = ({ panel, registry, components, interactive, isLastPanel, onSetApp, onSplit, onRemove }: PanelSlotProps) => {
+export const PanelSlot = ({ panel, registry, components, interactive, noHeader, isLastPanel, onSetApp, onSplit, onRemove }: PanelSlotProps) => {
   const { maximizedPanelId, transitioningPanelId } = useWorkspace();
   const isMaximized = maximizedPanelId === panel.id;
 
@@ -287,12 +288,12 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
 
   const inner = ProviderComponent ? (
     <ProviderComponent panelId={panel.id}>
-      {headerBar}
+      {!noHeader && headerBar}
       {body}
     </ProviderComponent>
   ) : (
     <>
-      {headerBar}
+      {!noHeader && headerBar}
       {body}
     </>
   );
@@ -320,11 +321,15 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
     );
   }
 
+  const panelStyle = noHeader
+    ? { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(0, 0, 0, 0.25)', ...(transitioningPanelId === panel.id ? { viewTransitionName: `panel-${panel.id}` } : {}) }
+    : { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)', ...(transitioningPanelId === panel.id ? { viewTransitionName: `panel-${panel.id}` } : {}) };
+
   return (
     <div data-panel-id={panel.id} className="group/panel relative h-full w-full p-1">
       <div
         className="relative h-full w-full overflow-hidden rounded-lg border backdrop-blur-xl p-2 flex flex-col"
-        style={{ backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)', ...(transitioningPanelId === panel.id ? { viewTransitionName: `panel-${panel.id}` } : {}) } as React.CSSProperties}
+        style={panelStyle as React.CSSProperties}
       >
         {inner}
       </div>
diff --git a/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx b/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx
index f6febd8b..942f2e36 100644
--- a/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/WorkspaceLayout.tsx
@@ -12,11 +12,12 @@ type WorkspaceLayoutProps = {
   components?: PanelComponents;
   workspaceId?: string;
   cwd?: string;
+  noHeader?: boolean;
 };
 
 const noop = () => {};
 
-export const WorkspaceLayout = ({ layout, onLayoutChange, registry: registryProp, components, workspaceId, cwd }: WorkspaceLayoutProps) => {
+export const WorkspaceLayout = ({ layout, onLayoutChange, registry: registryProp, components, workspaceId, cwd, noHeader }: WorkspaceLayoutProps) => {
   const { registry: globalRegistry } = useAppRegistry();
   const registry = registryProp ?? globalRegistry;
 
@@ -33,6 +34,7 @@ export const WorkspaceLayout = ({ layout, onLayoutChange, registry: registryProp
         layout={layout}
         registry={registry}
         components={components}
+        noHeader={noHeader}
         onSetApp={noop}
         onSplit={noop}
         onRemove={noop}
diff --git a/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx b/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx
index 881f82bd..4f2358f2 100644
--- a/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/WorkspaceRenderer.tsx
@@ -9,6 +9,7 @@ type WorkspaceRendererProps = {
   registry: AppRegistry;
   components?: PanelComponents;
   interactive?: boolean;
+  noHeader?: boolean;
   onSetApp: (panelId: string, appType: string | null) => void;
   onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
   onRemove: (panelId: string) => void;
@@ -20,6 +21,7 @@ export const WorkspaceRenderer = ({
   registry,
   components,
   interactive = false,
+  noHeader = false,
   onSetApp,
   onSplit,
   onRemove,
@@ -34,6 +36,7 @@ export const WorkspaceRenderer = ({
         registry={registry}
         components={components}
         interactive={interactive}
+        noHeader={noHeader}
         totalPanels={totalPanels}
         onSetApp={onSetApp}
         onSplit={onSplit}
@@ -49,6 +52,7 @@ type LayoutNodeRendererProps = {
   registry: AppRegistry;
   components?: PanelComponents;
   interactive: boolean;
+  noHeader: boolean;
   totalPanels: number;
   onSetApp: (panelId: string, appType: string | null) => void;
   onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
@@ -66,6 +70,7 @@ const LayoutNodeRenderer = ({
   registry,
   components,
   interactive,
+  noHeader,
   totalPanels,
   onSetApp,
   onSplit,
@@ -97,6 +102,7 @@ const LayoutNodeRenderer = ({
         registry={registry}
         components={components}
         interactive={interactive}
+        noHeader={noHeader}
         isLastPanel={totalPanels <= 1}
         onSetApp={onSetApp}
         onSplit={onSplit}
@@ -119,6 +125,7 @@ const LayoutNodeRenderer = ({
                 registry={registry}
                 components={components}
                 interactive={interactive}
+                noHeader={noHeader}
                 totalPanels={totalPanels}
                 onSetApp={onSetApp}
                 onSplit={onSplit}
@@ -143,6 +150,7 @@ const LayoutNodeRenderer = ({
                 registry={registry}
                 components={components}
                 interactive={interactive}
+                noHeader={noHeader}
                 totalPanels={totalPanels}
                 onSetApp={onSetApp}
                 onSplit={onSplit}