website refactor

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

@@ -0,0 +1,64 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
+import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+import type { Result } from '@/lib/contracts/Result';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+import { InlineNotice } from '@/components/shared/ux/InlineNotice';
+import { Box } from '@/ui/Box';
+
+interface ProfileSettingsPageClientProps {
+  viewData: ProfileViewData;
+  onSave: (updates: { bio?: string; country?: string }) => Promise<Result<void, string>>;
+}
+
+export function ProfileSettingsPageClient({ viewData, onSave }: ProfileSettingsPageClientProps) {
+  const router = useRouter();
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  const [bio, setBio] = useState(viewData.driver.bio || '');
+  const [country, setCountry] = useState(viewData.driver.countryCode);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setError(null);
+    try {
+      const result = await onSave({ bio, country });
+      if (result.isErr()) {
+        setError(result.getError());
+      } else {
+        router.refresh();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <>
+      <ProgressLine isLoading={isSaving} />
+      {error && (
+        <Box position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
+          <InlineNotice
+            variant="error"
+            title="Update Failed"
+            message={error}
+          />
+        </Box>
+      )}
+      <ProfileSettingsTemplate
+        viewData={viewData}
+        bio={bio}
+        country={country}
+        onBioChange={setBio}
+        onCountryChange={setCountry}
+        onSave={handleSave}
+      />
+    </>
+  );
+}

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

@@ -1,21 +1,22 @@
-import Link from 'next/link';
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Text } from '@/ui/Text';
-import { routes } from '@/lib/routing/RouteConfig';
+import { ProfilePageQuery } from '@/lib/page-queries/ProfilePageQuery';
+import { notFound } from 'next/navigation';
+import { updateProfileAction } from '@/app/actions/profileActions';
+import { ProfileSettingsPageClient } from './ProfileSettingsPageClient';
 
 export default async function ProfileSettingsPage() {
+  const query = new ProfilePageQuery();
+  const result = await query.execute();
+
+  if (result.isErr()) {
+    notFound();
+  }
+
+  const viewData = result.unwrap();
+
   return (
-    <Container size="md">
-      <Heading level={1}>Settings</Heading>
-      <Card>
-        <Text block mb={4}>Settings are currently unavailable.</Text>
-        <Link href={routes.protected.profile}>
-          <Button variant="secondary">Back to profile</Button>
-        </Link>
-      </Card>
-    </Container>
+    <ProfileSettingsPageClient
+      viewData={viewData}
+      onSave={updateProfileAction}
+    />
   );
 }