pi sills

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

@@ -1,9 +1,17 @@
 import type { LayoutNode, PanelComponents, DefaultFileSort } from 'officerdev';
 import { WorkspaceView, useFileViewerPanels } from 'officerdev';
 import { useWorkspacesState } from 'state/useWorkspacesState';
+import { useSettings } from 'state/useSettings';
+import { Button } from '@/components/ui/button';
 import { defaultLayout } from './defaultLayout';
 
 const HomeHeader = () => {
+  const { settings, saveSettings } = useSettings();
+
+  const completeOnboarding = () => {
+    saveSettings({ ...settings, onboarding: { complete: true } });
+  };
+
   return (
     <div className="flex h-full items-center justify-center p-6 text-center">
       <div>
@@ -11,6 +19,9 @@ const HomeHeader = () => {
         <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>
+        <Button className="mt-6" onClick={completeOnboarding}>
+          I'm ready
+        </Button>
       </div>
     </div>
   );
@@ -25,10 +36,26 @@ const defaultSort: DefaultFileSort = { field: 'type', direction: 'desc' };
 export const HomeScreen = () => {
   const workspace = useWorkspacesState<LayoutNode>('screens/home', defaultLayout);
   const ephemeral = useFileViewerPanels();
+  const { settings } = useSettings();
+
+  if (settings.onboarding.complete) {
+    return (
+      <div className="h-full w-full">
+        <WorkspaceView workspace={workspace} />
+      </div>
+    );
+  }
 
   return (
     <div className="h-full w-full">
-      <WorkspaceView workspace={workspace} initialFilePath="/Onboarding" defaultFileSort={defaultSort} components={components} ephemeral={ephemeral} />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        initialFilePath="/Onboarding"
+        defaultFileSort={defaultSort}
+        components={components}
+        ephemeral={ephemeral}
+      />
     </div>
   );
 };