Replace 8-category layout with flat task list and detail view using WorkspaceView. Searchable list with mode badges, run/delete actions, create dialog. Remove 13 unused component files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useCallback, useMemo } from 'react';
|
|
import type { LayoutNode, PanelComponents } from 'officerdev';
|
|
import { WorkspaceView } from 'officerdev';
|
|
import { useIsMobile } from 'hooks/useIsMobile';
|
|
import { usePanelChannel } from 'hooks/usePanelChannel';
|
|
import { useDashboardState } from 'state/useDashboardState';
|
|
import type { TaskSummary } from 'officerdev';
|
|
|
|
import { AutomationList } from './AutomationList';
|
|
import { AutomationDetail } from './AutomationDetail';
|
|
|
|
export type { TaskSummary as SelectedTask };
|
|
|
|
const defaultLayout: LayoutNode = {
|
|
type: 'group',
|
|
id: 'automation-root',
|
|
direction: 'horizontal',
|
|
children: [
|
|
{ node: { type: 'panel', id: 'automation-list', appType: null }, size: 30 },
|
|
{ node: { type: 'panel', id: 'automation-detail', appType: null }, size: 70 },
|
|
],
|
|
};
|
|
|
|
export const Automation = () => {
|
|
const workspace = useDashboardState<LayoutNode>('screens/automation', defaultLayout);
|
|
const [selected] = usePanelChannel<TaskSummary | null>('automation:selected-task', null);
|
|
const isMobile = useIsMobile();
|
|
|
|
const panelComponents: PanelComponents = useMemo(
|
|
() => ({
|
|
'automation-list': AutomationList,
|
|
'automation-detail': AutomationDetail,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const mobilePanelId = isMobile && selected ? 'automation-detail' : undefined;
|
|
const onMobileBack = useCallback(() => {}, []);
|
|
|
|
if (!workspace.isLoaded) return null;
|
|
|
|
return (
|
|
<div className="h-full w-full pt-2">
|
|
<WorkspaceView
|
|
workspace={workspace}
|
|
locked
|
|
components={panelComponents}
|
|
mobilePanelId={mobilePanelId}
|
|
onMobilePanelChange={mobilePanelId ? () => onMobileBack() : undefined}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|