major apps and hooks refactor

src/workspaces/components/Workspace/WorkspaceView.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { flushSync } from 'react-dom';
-import type { LayoutNode, AppRegistry, WorkspaceState } from './types';
+import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '../ui/resizable';
+import type { LayoutNode, AppRegistry, WorkspaceState, EphemeralPanels } from './types';
 import type { DropPosition } from './layout-utils';
 import { splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, countPanels } from './layout-utils';
 import { WorkspaceProvider } from './WorkspaceContext';
@@ -10,9 +11,12 @@ type WorkspaceViewProps = {
   workspace: WorkspaceState;
   registry: AppRegistry;
   cwd?: string;
+  ephemeral?: EphemeralPanels | null;
 };
 
-export const WorkspaceView = ({ workspace, registry, cwd = '~' }: WorkspaceViewProps) => {
+const noop = () => {};
+
+export const WorkspaceView = ({ workspace, registry, cwd = '~', ephemeral }: WorkspaceViewProps) => {
   if (!workspace.isLoaded) return null;
 
   const { value: layout, setValue: onLayoutChange } = workspace;
@@ -101,6 +105,40 @@ export const WorkspaceView = ({ workspace, registry, cwd = '~' }: WorkspaceViewP
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [swapSourceId, dragSourceId, maximizedPanelId, setMaximizedAnimated]);
 
+  const baseRenderer = (
+    <WorkspaceRenderer
+      layout={layout}
+      registry={registry}
+      interactive
+      onSetApp={handleSetApp}
+      onSplit={handleSplit}
+      onRemove={handleRemove}
+      onResized={handleResized}
+    />
+  );
+
+  const content = ephemeral ? (
+    <ResizablePanelGroup direction="horizontal" className="h-full w-full">
+      <ResizablePanel defaultSize={ephemeral.defaultBaseSize ?? 40} minSize={15}>
+        {baseRenderer}
+      </ResizablePanel>
+      <ResizableHandle className="bg-transparent after:bg-transparent" />
+      <ResizablePanel defaultSize={100 - (ephemeral.defaultBaseSize ?? 40)} minSize={15}>
+        <WorkspaceRenderer
+          layout={ephemeral.layout}
+          registry={registry}
+          components={ephemeral.components}
+          onSetApp={noop}
+          onSplit={noop}
+          onRemove={noop}
+          onResized={noop}
+        />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  ) : (
+    baseRenderer
+  );
+
   return (
     <WorkspaceProvider
       value={{
@@ -117,16 +155,7 @@ export const WorkspaceView = ({ workspace, registry, cwd = '~' }: WorkspaceViewP
         transitioningPanelId,
       }}
     >
-      <WorkspaceRenderer
-        layout={layout}
-        registry={registry}
-        interactive
-        onSetApp={handleSetApp}
-        onSplit={handleSplit}
-        onRemove={handleRemove}
-        onResized={handleResized}
-      />
-      {/* <DragOverlay /> */}
+      {content}
     </WorkspaceProvider>
   );
 };

src/workspaces/components/Workspace/index.ts

@@ -1,4 +1,4 @@
-export type { LayoutNode, LayoutGroup, LayoutPanel, WorkspaceDefinition, WorkspaceState, ProjectType, ProjectDefinition, AppRegistry, AppRegistryEntry, PanelComponents, PanelComponentEntry } from './types';
+export type { LayoutNode, LayoutGroup, LayoutPanel, WorkspaceDefinition, WorkspaceState, ProjectType, ProjectDefinition, AppRegistry, AppRegistryEntry, PanelComponents, PanelComponentEntry, EphemeralPanels } from './types';
 export type { DropPosition } from './layout-utils';
 export { createDefaultLayout, splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, pruneEmptyPanels, countPanels, hasAnyApp } from './layout-utils';
 export { WorkspaceProvider, useWorkspace } from './WorkspaceContext';

src/workspaces/components/Workspace/types.ts

@@ -67,3 +67,9 @@ export type PanelComponentEntry = {
 };
 
 export type PanelComponents = Record<string, ComponentType | PanelComponentEntry>;
+
+export type EphemeralPanels = {
+  layout: LayoutNode;
+  components: PanelComponents;
+  defaultBaseSize?: number;
+};