Onboarding

src/apps/officer-web/Screens/Dashboard/Home/HomeScreen.tsx

@@ -1,14 +1,34 @@
-import type { LayoutNode } from 'officerdev';
-import { WorkspaceView } from 'officerdev';
+import type { LayoutNode, PanelComponents, DefaultFileSort } from 'officerdev';
+import { WorkspaceView, useFileViewerPanels } from 'officerdev';
 import { useWorkspacesState } from 'state/useWorkspacesState';
 import { defaultLayout } from './defaultLayout';
 
-export const HomeScreen = () => {
-  const workspace = useWorkspacesState<LayoutNode>('screens/home', defaultLayout);
-
+const HomeHeader = () => {
   return (
+    <div className="flex h-full items-center justify-center p-6 text-center">
+      <div>
+        <h1 className="text-2xl font-bold">Welcome to your Officer.dev platform</h1>
+        <p className="mt-2 text-sm opacity-70">
+          Please follow the video instructions below in order to get familiar with all that is possible.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const components: PanelComponents = {
+  'home-header': HomeHeader,
+};
+
+const defaultSort: DefaultFileSort = { field: 'type', direction: 'desc' };
+
+export const HomeScreen = () => {
+  const workspace = useWorkspacesState<LayoutNode>('screens/home', defaultLayout);
+  const ephemeral = useFileViewerPanels();
+
+  return (
     <div className="h-full w-full">
-      <WorkspaceView workspace={workspace} />
+      <WorkspaceView workspace={workspace} initialFilePath="/Onboarding" defaultFileSort={defaultSort} components={components} ephemeral={ephemeral} />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Home/defaultLayout.tsx

@@ -3,22 +3,10 @@ import type { LayoutNode } from 'officerdev';
 export const defaultLayout: LayoutNode = {
   type: 'group',
   id: 'home-root',
-  direction: 'horizontal',
+  direction: 'vertical',
   children: [
-    { node: { type: 'panel', id: 'home-left', appType: 'workspace-list' }, size: 20 },
-    {
-      node: {
-        type: 'group',
-        id: 'home-center',
-        direction: 'vertical',
-        children: [
-          { node: { type: 'panel', id: 'homepage-widget-panel', appType: 'widget-panel' }, size: 60 },
-          { node: { type: 'panel', id: 'home-chat', appType: 'chat-launcher' }, size: 40 },
-        ],
-      },
-      size: 60,
-    },
-    { node: { type: 'panel', id: 'home-right', appType: 'project-list' }, size: 20 },
+    { node: { type: 'panel', id: 'home-header', appType: null }, size: 30 },
+    { node: { type: 'panel', id: 'home-files', appType: 'officerdev/file-browser' }, size: 70 },
   ],
 };