mobile

src/apps/officer-web/Screens/Dashboard/Automation/index.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useClient } from 'hooks/useClient';
 import { useAuth } from 'hooks/useAuth';
+import { useIsMobile } from 'hooks/useIsMobile';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { WorkspaceLayout } from 'officerdev';
@@ -55,7 +56,8 @@ export const Automation = () => {
     staleTime: Infinity,
   });
   const [savedSizes, setSavedSizes] = useUserState<number[] | null>('automation:chat-sizes', null);
-  const [selection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
+  const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
+  const isMobile = useIsMobile();
   const editing = selection?.editing ?? false;
   const prevEditing = useRef(editing);
 
@@ -94,11 +96,21 @@ export const Automation = () => {
     [],
   );
 
+  const mobilePanelId = isMobile && selection ? 'automation-right' : undefined;
+  const onMobileBack = useCallback(() => setSelection(null), [setSelection]);
+
   if (!isFetched) return null;
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceLayout layout={layout} onLayoutChange={handleLayoutChange} components={panelComponents} />
+      <WorkspaceLayout
+        layout={layout}
+        onLayoutChange={handleLayoutChange}
+        components={panelComponents}
+        isMobile={isMobile}
+        mobilePanelId={mobilePanelId}
+        onMobileBack={mobilePanelId ? onMobileBack : null}
+      />
     </div>
   );
 };