page wrapper

apps/website/app/profile/settings/page.tsx

@@ -1,6 +1,13 @@
-import { Bell, Shield, Eye, Volume2 } from 'lucide-react';
+'use client';
 
-export default function SettingsPage() {
+import { Bell, Shield, Eye, Volume2 } from 'lucide-react';
+import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
+
+interface SettingsData {
+  // Settings page is static, no data needed
+}
+
+function SettingsTemplate({ data }: { data: SettingsData }) {
   return (
     <div className="min-h-screen bg-deep-graphite">
       <div className="container mx-auto px-4 py-8">
@@ -199,4 +206,21 @@ export default function SettingsPage() {
       </div>
     </div>
   );
+}
+
+export default function SettingsPage() {
+  return (
+    <StatefulPageWrapper
+      data={{} as SettingsData}
+      isLoading={false}
+      error={null}
+      Template={SettingsTemplate}
+      loading={{ variant: 'skeleton', message: 'Loading settings...' }}
+      errorConfig={{ variant: 'full-screen' }}
+      empty={{
+        title: 'No settings available',
+        description: 'Unable to load settings page',
+      }}
+    />
+  );
 }