frontmatter in skills files

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

@@ -1,19 +1,26 @@
+import { Workspace, createWorkspaceDefaults } from '@/components/Workspace';
+import { useUserState } from '@/state/useUserState';
 import { ChatLauncher } from './ChatLauncher';
 import { FileBrowserWidget as FileBrowser } from '@/Screens/Dashboard/Files';
 import { ChatHistoryWidget as ChatHistory } from '@/Screens/Dashboard/ChatHistory';
 import { Catalog } from 'sounds';
 
+const WIDGET_IDS = ['chat-launcher', 'file-browser', 'chat-history', 'sound-library'] as const;
+const DEFAULTS = createWorkspaceDefaults([...WIDGET_IDS]);
+
 export const HomeScreen = () => {
+  const [state, setState] = useUserState('home-layout', DEFAULTS);
+
   return (
-    <div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full p-4 pt-6 md:p-8 md:pt-12 overflow-y-auto">
-      <div className="flex flex-col gap-8 flex-1 min-w-0">
-        <ChatLauncher />
-        <FileBrowser />
-      </div>
-      <div className="flex flex-col gap-8 flex-1 min-w-0">
-        <ChatHistory />
-        <Catalog />
-      </div>
-    </div>
+    <Workspace
+      widgets={{
+        'chat-launcher': <ChatLauncher />,
+        'file-browser': <FileBrowser />,
+        'chat-history': <ChatHistory />,
+        'sound-library': <Catalog />,
+      }}
+      state={state}
+      onChange={setState}
+    />
   );
 };