officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

workspaces panel swap

Browse Source
This commit is contained in:
pastilhas
2026-02-19 12:14:02 +00:00
parent 111d4c86eb
commit 8b1bccab7a
6 changed files with 140 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/components/Workspace/PanelSlot.tsx
+84 -18
View File
@@ -1,4 +1,6 @@
import { ArrowLeftRight } from 'lucide-react';
import type { LayoutPanel, AppRegistry, PanelComponents } from './types';
import { useWorkspace } from './WorkspaceContext';
import { Card } from '../Card';
import { AppPicker } from './AppPicker';
import {
@@ -6,6 +8,7 @@ import {
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
} from '../ui/context-menu';
type PanelSlotProps = {
@@ -29,21 +32,72 @@ type PanelContextMenuProps = {
children: React.ReactNode;
};
const PanelContextMenu = ({ panelId, hasApp, isLastPanel, onSplit, onRemove, onClearApp, children }: PanelContextMenuProps) => (
<ContextMenu>
<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onClick={() => onSplit(panelId, 'horizontal')}>Split horizontal</ContextMenuItem>
<ContextMenuItem onClick={() => onSplit(panelId, 'vertical')}>Split vertical</ContextMenuItem>
{hasApp && <ContextMenuItem onClick={onClearApp}>Clear app</ContextMenuItem>}
{!isLastPanel && (
<ContextMenuItem className="text-red-500 focus:text-red-500" onClick={() => onRemove(panelId)}>
Remove panel
</ContextMenuItem>
)}
</ContextMenuContent>
</ContextMenu>
);
const PanelContextMenu = ({ panelId, hasApp, isLastPanel, onSplit, onRemove, onClearApp, children }: PanelContextMenuProps) => {
const { swapSourceId, setSwapSourceId } = useWorkspace();
return (
<ContextMenu>
<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onClick={() => onSplit(panelId, 'horizontal')}>Split horizontal</ContextMenuItem>
<ContextMenuItem onClick={() => onSplit(panelId, 'vertical')}>Split vertical</ContextMenuItem>
{hasApp && <ContextMenuItem onClick={onClearApp}>Clear app</ContextMenuItem>}
{!isLastPanel && (
<ContextMenuItem className="text-red-500 focus:text-red-500" onClick={() => onRemove(panelId)}>
Remove panel
</ContextMenuItem>
)}
<ContextMenuSeparator />
{swapSourceId === panelId ? (
<ContextMenuItem onClick={() => setSwapSourceId(null)}>Cancel swap</ContextMenuItem>
) : swapSourceId ? (
<ContextMenuItem onClick={() => setSwapSourceId(null)}>Cancel swap</ContextMenuItem>
) : (
<ContextMenuItem onClick={() => setSwapSourceId(panelId)}>Swap with...</ContextMenuItem>
)}
</ContextMenuContent>
</ContextMenu>
);
};
const SwapOverlay = ({ panelId }: { panelId: string }) => {
const { swapSourceId, setSwapSourceId, onSwap } = useWorkspace();
if (!swapSourceId || swapSourceId === panelId) return null;
return (
<div
className="absolute inset-0 z-20 flex items-center justify-center bg-duck-teal/10 hover:bg-duck-teal/20 transition-colors cursor-pointer"
onClick={() => onSwap(swapSourceId, panelId)}
>
<div className="flex items-center gap-2 rounded-lg bg-background/90 backdrop-blur-sm px-3 py-2 shadow-lg border border-duck-teal/30">
<ArrowLeftRight className="h-4 w-4 text-duck-teal" />
<span className="text-sm font-medium text-duck-teal">Swap here</span>
</div>
</div>
);
};
const SwapSourceIndicator = ({ panelId }: { panelId: string }) => {
const { swapSourceId, setSwapSourceId } = useWorkspace();
if (swapSourceId !== panelId) return null;
return (
<div className="absolute inset-0 z-20 pointer-events-none ring-2 ring-inset ring-duck-teal/50 rounded-lg">
<div className="absolute top-2 left-2 pointer-events-auto">
<button
type="button"
onClick={() => setSwapSourceId(null)}
className="flex items-center gap-1.5 rounded-md bg-duck-teal/90 px-2.5 py-1 text-xs font-medium text-white shadow cursor-pointer hover:bg-duck-teal"
>
<ArrowLeftRight className="h-3 w-3" />
Swapping... click to cancel
</button>
</div>
</div>
);
};
export const PanelSlot = ({ panel, registry, components, interactive, isLastPanel, onSetApp, onSplit, onRemove }: PanelSlotProps) => {
const PanelComponent = components?.[panel.id];
@@ -58,6 +112,15 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
)
: (content: React.ReactNode) => <>{content}</>;
const swapOverlays = interactive
? (
<>
<SwapOverlay panelId={panel.id} />
<SwapSourceIndicator panelId={panel.id} />
</>
)
: null;
if (!AppComponent) {
if (!interactive) {
return (
@@ -68,26 +131,28 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
}
return contextMenu(
<div className="h-full w-full p-1">
<div className="relative h-full w-full p-1">
<Card className="relative h-full w-full flex flex-col items-center justify-center gap-3 p-4">
<AppPicker registry={registry} onSelect={(type) => onSetApp(panel.id, type)} />
</Card>
{swapOverlays}
</div>,
);
}
if (entry?.transparent) {
return contextMenu(
<div className="h-full w-full p-1">
<div className="relative h-full w-full p-1">
<div className="relative h-full w-full overflow-hidden">
<AppComponent panelId={panel.id} />
</div>
{swapOverlays}
</div>,
);
}
return contextMenu(
<div className="h-full w-full p-1">
<div className="relative h-full w-full p-1">
<div
className="relative h-full w-full overflow-hidden rounded-lg border backdrop-blur-xl p-2"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)' }}
@@ -96,6 +161,7 @@ export const PanelSlot = ({ panel, registry, components, interactive, isLastPane
<AppComponent panelId={panel.id} />
</Card>
</div>
{swapOverlays}
</div>,
);
};
src/workspaces/components/Workspace/WorkspaceContext.ts
+8
View File
@@ -3,11 +3,19 @@ import { createContext, useContext } from 'react';
type WorkspaceContextValue = {
workspaceId: string | null;
cwd: string;
swapSourceId: string | null;
setSwapSourceId: (id: string | null) => void;
onSwap: (sourceId: string, targetId: string) => void;
};
const noop = () => {};
const WorkspaceContext = createContext<WorkspaceContextValue>({
workspaceId: null,
cwd: '~',
swapSourceId: null,
setSwapSourceId: noop,
onSwap: noop,
});
export const WorkspaceProvider = WorkspaceContext.Provider;
src/workspaces/components/Workspace/WorkspaceLayout.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const WorkspaceLayout = ({ layout, onLayoutChange, registry, components,
);
return (
<WorkspaceProvider value={{ workspaceId: workspaceId ?? null, cwd: cwd ?? '~' }}>
<WorkspaceProvider value={{ workspaceId: workspaceId ?? null, cwd: cwd ?? '~', swapSourceId: null, setSwapSourceId: noop, onSwap: noop }}>
<WorkspaceRenderer
layout={layout}
registry={registry}
src/workspaces/components/Workspace/WorkspaceView.tsx
+30 -3
View File
@@ -1,6 +1,6 @@
import { useCallback } from 'react';
import { useState, useCallback, useEffect } from 'react';
import type { LayoutNode, WorkspaceDefinition, AppRegistry } from './types';
import { splitPanel, removePanel, setApp, updateSizes, countPanels } from './layout-utils';
import { splitPanel, removePanel, setApp, updateSizes, swapPanels, countPanels } from './layout-utils';
import { WorkspaceProvider } from './WorkspaceContext';
import { WorkspaceRenderer } from './WorkspaceRenderer';
@@ -12,6 +12,8 @@ type WorkspaceViewProps = {
};
export const WorkspaceView = ({ workspace, layout, onLayoutChange, registry }: WorkspaceViewProps) => {
const [swapSourceId, setSwapSourceId] = useState<string | null>(null);
const handleSetApp = useCallback(
(panelId: string, appType: string | null) => {
onLayoutChange(setApp(layout, panelId, appType));
@@ -41,8 +43,33 @@ export const WorkspaceView = ({ workspace, layout, onLayoutChange, registry }: W
[layout, onLayoutChange],
);
const handleSwap = useCallback(
(sourceId: string, targetId: string) => {
onLayoutChange(swapPanels(layout, sourceId, targetId));
setSwapSourceId(null);
},
[layout, onLayoutChange],
);
useEffect(() => {
if (!swapSourceId) return;
const onKeyDown = (ev: KeyboardEvent) => {
if (ev.key === 'Escape') setSwapSourceId(null);
};
window.addEventListener('keydown', onKeyDown);
return () => window.removeEventListener('keydown', onKeyDown);
}, [swapSourceId]);
return (
<WorkspaceProvider value={{ workspaceId: workspace?.id ?? null, cwd: workspace?.cwd ?? '~' }}>
<WorkspaceProvider
value={{
workspaceId: workspace?.id ?? null,
cwd: workspace?.cwd ?? '~',
swapSourceId,
setSwapSourceId,
onSwap: handleSwap,
}}
>
<WorkspaceRenderer
layout={layout}
registry={registry}
src/workspaces/components/Workspace/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export type { LayoutNode, LayoutGroup, LayoutPanel, WorkspaceDefinition, AppRegistry, AppRegistryEntry, PanelComponents } from './types';
export { createDefaultLayout, splitPanel, removePanel, setApp, updateSizes, pruneEmptyPanels, countPanels, hasAnyApp } from './layout-utils';
export { createDefaultLayout, splitPanel, removePanel, setApp, updateSizes, swapPanels, pruneEmptyPanels, countPanels, hasAnyApp } from './layout-utils';
export { WorkspaceProvider, useWorkspace } from './WorkspaceContext';
export { WorkspaceView } from './WorkspaceView';
export { WorkspaceLayout } from './WorkspaceLayout';
src/workspaces/components/Workspace/layout-utils.ts
+16
View File
@@ -139,6 +139,22 @@ export function pruneEmptyPanels(root: LayoutNode): LayoutNode | null {
};
}
export function swapPanels(root: LayoutNode, idA: string, idB: string): LayoutNode {
const appA = findPanelApp(root, idA);
const appB = findPanelApp(root, idB);
if (appA === undefined || appB === undefined) return root;
return setApp(setApp(root, idA, appB), idB, appA);
}
function findPanelApp(node: LayoutNode, panelId: string): string | null | undefined {
if (node.type === 'panel') return node.id === panelId ? node.appType : undefined;
for (const child of node.children) {
const result = findPanelApp(child.node, panelId);
if (result !== undefined) return result;
}
return undefined;
}
export function countPanels(node: LayoutNode): number {
if (node.type === 'panel') return 1;
return node.children.reduce((sum, child) => sum + countPanels(child.node), 0);