website refactor

apps/website/client-wrapper/ProfilePageClient.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ProfileTemplate } from '@/templates/ProfileTemplate';
+import { type ProfileTab } from '@/components/profile/ProfileNavTabs';
+import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
+
+interface ProfilePageClientProps {
+  viewData: ProfileViewData;
+  mode: 'profile-exists' | 'needs-profile';
+}
+
+export function ProfilePageClient({ viewData, mode }: ProfilePageClientProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const tabParam = searchParams.get('tab') as ProfileTab | null;
+
+  const [activeTab, setActiveTab] = useState<ProfileTab>(tabParam || 'overview');
+  const [friendRequestSent, setFriendRequestSent] = useState(false);
+
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (activeTab === 'overview') {
+      params.delete('tab');
+    } else {
+      params.set('tab', activeTab);
+    }
+    const query = params.toString();
+    const currentQuery = searchParams.toString();
+    
+    if (query !== currentQuery) {
+      router.replace(`/profile${query ? `?${query}` : ''}`, { scroll: false });
+    }
+  }, [activeTab, searchParams, router]);
+
+  useEffect(() => {
+    const tab = searchParams.get('tab') as ProfileTab | null;
+    if (tab && tab !== activeTab) {
+      setActiveTab(tab);
+    }
+  }, [searchParams, activeTab]);
+
+  return (
+    <ProfileTemplate
+      viewData={viewData}
+      mode={mode}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      friendRequestSent={friendRequestSent}
+      onFriendRequestSend={() => setFriendRequestSent(true)}
+    />
+  );
+}