) => {
- const target = ev.target as HTMLElement;
- if (!target.closest('[data-widget-header]') || target.closest('button')) return;
- layout.promoteMaster(id);
- };
-
- return (
-
-
- {widgets[layout.hyprland.master]}
-
-
- {layout.hyprland.stack.map((id) => (
-
onDoubleClick(id, ev)}>
- {widgets[id]}
-
- ))}
-
-
- {MODE_OPTIONS.map(({ mode: m, icon: Icon, label }) => (
-
- ))}
-
-);
diff --git a/src/workspaces/components/Workspace/LayoutEditor.tsx b/src/workspaces/components/Workspace/LayoutEditor.tsx
new file mode 100644
index 00000000..740e965c
--- /dev/null
+++ b/src/workspaces/components/Workspace/LayoutEditor.tsx
@@ -0,0 +1,51 @@
+import { Columns, Rows, Trash2, X } from 'lucide-react';
+
+type LayoutEditorProps = {
+ panelId: string;
+ hasWidget: boolean;
+ isLastPanel: boolean;
+ onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
+ onRemove: (panelId: string) => void;
+ onClearWidget: () => void;
+};
+
+export const LayoutEditor = ({ panelId, hasWidget, isLastPanel, onSplit, onRemove, onClearWidget }: LayoutEditorProps) => (
+
+
+
+ {hasWidget && (
+
+ )}
+ {!isLastPanel && (
+
+ )}
+
+);
diff --git a/src/workspaces/components/Workspace/PanelSlot.tsx b/src/workspaces/components/Workspace/PanelSlot.tsx
new file mode 100644
index 00000000..02e3f948
--- /dev/null
+++ b/src/workspaces/components/Workspace/PanelSlot.tsx
@@ -0,0 +1,77 @@
+import type { LayoutPanel, WidgetRegistry } from './types';
+import { WidgetPicker } from './WidgetPicker';
+import { LayoutEditor } from './LayoutEditor';
+
+type PanelSlotProps = {
+ panel: LayoutPanel;
+ registry: WidgetRegistry;
+ editing: boolean;
+ isLastPanel: boolean;
+ onSetWidget: (panelId: string, widgetType: string | null) => void;
+ onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
+ onRemove: (panelId: string) => void;
+};
+
+export const PanelSlot = ({ panel, registry, editing, isLastPanel, onSetWidget, onSplit, onRemove }: PanelSlotProps) => {
+ const entry = panel.widgetType ? registry[panel.widgetType] : null;
+ const WidgetComponent = entry?.component;
+
+ if (!editing && !WidgetComponent) return null;
+
+ if (!WidgetComponent) {
+ return (
+
+
onSetWidget(panel.id, type)} />
+
+
+
+ {!isLastPanel && (
+
+ )}
+
+
+
+
+
+ {editing && (
+
onSetWidget(panel.id, null)}
+ />
+ )}
+
+ {entries.map(([key, entry]) => (
+
+ ))}
+
+ );
+};
diff --git a/src/workspaces/components/Workspace/WorkspaceContext.ts b/src/workspaces/components/Workspace/WorkspaceContext.ts
new file mode 100644
index 00000000..c4d5e6be
--- /dev/null
+++ b/src/workspaces/components/Workspace/WorkspaceContext.ts
@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+type WorkspaceContextValue = {
+ workspaceId: string | null;
+ cwd: string;
+ editing: boolean;
+};
+
+const WorkspaceContext = createContext({
+ workspaceId: null,
+ cwd: '~',
+ editing: false,
+});
+
+export const WorkspaceProvider = WorkspaceContext.Provider;
+
+export const useWorkspace = () => useContext(WorkspaceContext);
diff --git a/src/workspaces/components/Workspace/WorkspaceHeader.tsx b/src/workspaces/components/Workspace/WorkspaceHeader.tsx
new file mode 100644
index 00000000..7d318d08
--- /dev/null
+++ b/src/workspaces/components/Workspace/WorkspaceHeader.tsx
@@ -0,0 +1,25 @@
+import { Pencil, Check } from 'lucide-react';
+
+type WorkspaceHeaderProps = {
+ name: string;
+ editing: boolean;
+ onToggleEdit: () => void;
+};
+
+export const WorkspaceHeader = ({ name, editing, onToggleEdit }: WorkspaceHeaderProps) => (
+
+
{name}
+
+
No widgets
;
+ }
+
+ const totalPanels = countPanels(layout);
+
+ return (
+
+
+
+ );
+};
+
+type LayoutNodeRendererProps = {
+ node: LayoutNode;
+ registry: WidgetRegistry;
+ editing: boolean;
+ totalPanels: number;
+ onSetWidget: (panelId: string, widgetType: string | null) => void;
+ onSplit: (panelId: string, direction: 'horizontal' | 'vertical') => void;
+ onRemove: (panelId: string) => void;
+ onResized: (groupId: string, sizes: number[]) => void;
+};
+
+const LayoutNodeRenderer = ({
+ node,
+ registry,
+ editing,
+ totalPanels,
+ onSetWidget,
+ onSplit,
+ onRemove,
+ onResized,
+}: LayoutNodeRendererProps) => {
+ const debounceRef = useRef>(null);
+
+ const handleLayout = useCallback(
+ (sizes: number[]) => {
+ if (node.type !== 'group') return;
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ debounceRef.current = setTimeout(() => {
+ onResized(node.id, sizes);
+ }, 500);
+ },
+ [node, onResized],
+ );
+
+ if (node.type === 'panel') {
+ return (
+
+ );
+ }
+
+ return (
+
+ {node.children.map((child, i) => (
+
+
+
+
+
+
+
+ ))}
+
+ );
+};
+
+type ChildEntryProps = {
+ index: number;
+ total: number;
+ children: React.ReactNode;
+};
+
+const ChildEntry = ({ index, total, children }: ChildEntryProps) => {
+ if (index === 0) return <>{children};
+ return (
+ <>
+
+ {children}
+
+ );
+};
diff --git a/src/workspaces/components/Workspace/WorkspaceView.tsx b/src/workspaces/components/Workspace/WorkspaceView.tsx
new file mode 100644
index 00000000..675a551d
--- /dev/null
+++ b/src/workspaces/components/Workspace/WorkspaceView.tsx
@@ -0,0 +1,68 @@
+import { useState, useCallback } from 'react';
+import type { LayoutNode, WorkspaceDefinition, WidgetRegistry } from './types';
+import { splitPanel, removePanel, setWidget, updateSizes, countPanels } from './layout-utils';
+import { WorkspaceProvider } from './WorkspaceContext';
+import { WorkspaceHeader } from './WorkspaceHeader';
+import { WorkspaceRenderer } from './WorkspaceRenderer';
+
+type WorkspaceViewProps = {
+ workspace: WorkspaceDefinition | null;
+ name?: string;
+ layout: LayoutNode;
+ onLayoutChange: (layout: LayoutNode) => void;
+ registry: WidgetRegistry;
+};
+
+export const WorkspaceView = ({ workspace, name, layout, onLayoutChange, registry }: WorkspaceViewProps) => {
+ const [editing, setEditing] = useState(false);
+
+ const handleSetWidget = useCallback(
+ (panelId: string, widgetType: string | null) => {
+ onLayoutChange(setWidget(layout, panelId, widgetType));
+ },
+ [layout, onLayoutChange],
+ );
+
+ const handleSplit = useCallback(
+ (panelId: string, direction: 'horizontal' | 'vertical') => {
+ onLayoutChange(splitPanel(layout, panelId, direction));
+ },
+ [layout, onLayoutChange],
+ );
+
+ const handleRemove = useCallback(
+ (panelId: string) => {
+ if (countPanels(layout) <= 1) return;
+ onLayoutChange(removePanel(layout, panelId));
+ },
+ [layout, onLayoutChange],
+ );
+
+ const handleResized = useCallback(
+ (groupId: string, sizes: number[]) => {
+ onLayoutChange(updateSizes(layout, groupId, sizes));
+ },
+ [layout, onLayoutChange],
+ );
+
+ const displayName = name ?? workspace?.name ?? 'Workspace';
+
+ return (
+
+
+
setEditing((v) => !v)} />
+
+
+
+