opengraph stuff

src/apps/officer-web/Screens/Dashboard/Email/EmailScreen.tsx

@@ -0,0 +1,37 @@
+import { useMemo, useCallback } from 'react';
+import type { LayoutNode, PanelComponents } from 'officerdev';
+import { WorkspaceLayout } from 'officerdev';
+import { useIsMobile } from 'hooks/useIsMobile';
+import { useGlobal } from 'hooks/useGlobal';
+import { defaultLayout } from './defaultLayout';
+import { EmailList } from './EmailList';
+import { EmailReader } from './EmailReader';
+
+export const EmailScreen = () => {
+  const isMobile = useIsMobile();
+  const [selectedId, setSelectedId] = useGlobal<string | null>('EMAIL_SELECTED', null);
+
+  const components: PanelComponents = useMemo(
+    () => ({
+      'email-list': EmailList,
+      'email-reader': EmailReader,
+    }),
+    [],
+  );
+
+  const mobilePanelId = isMobile && selectedId ? 'email-reader' : undefined;
+  const onMobileBack = useCallback(() => setSelectedId(null), [setSelectedId]);
+
+  return (
+    <div className="h-full w-full pt-2">
+      <WorkspaceLayout
+        layout={defaultLayout}
+        onLayoutChange={() => {}}
+        components={components}
+        isMobile={isMobile}
+        mobilePanelId={mobilePanelId}
+        onMobileBack={mobilePanelId ? onMobileBack : null}
+      />
+    </div>
+  );
+};