From b8f2889b1d4878fdc1be767b983e0c84e85e659a Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Tue, 14 Oct 2025 20:16:24 +0000 Subject: [PATCH] Refactor: Implement desktop layout modernization --- src/components/settings/AccountProfileTab.tsx | 267 ++++++++++-------- src/components/settings/DataExportTab.tsx | 150 +++++++--- src/components/settings/LocationTab.tsx | 63 ++--- src/components/settings/NotificationsTab.tsx | 42 +-- src/components/settings/PrivacyTab.tsx | 91 +++--- src/pages/UserSettings.tsx | 76 +++-- 6 files changed, 387 insertions(+), 302 deletions(-) diff --git a/src/components/settings/AccountProfileTab.tsx b/src/components/settings/AccountProfileTab.tsx index 78069875..2f7881fe 100644 --- a/src/components/settings/AccountProfileTab.tsx +++ b/src/components/settings/AccountProfileTab.tsx @@ -244,7 +244,7 @@ export function AccountProfileTab() { const isDeactivated = profile?.deactivated || false; return ( -
+
{/* Deletion Status Banner */} {deletionRequest && ( )} - {/* Profile Picture */} -
-

Profile Picture

- { - handleError(new Error(error), { action: 'Upload avatar' }); - }} - /> + {/* Profile Picture + Account Info Grid */} +
+ {/* Profile Picture */} + + + Profile Picture + Upload your profile picture + + + { + handleError(new Error(error), { action: 'Upload avatar' }); + }} + /> + + + + {/* Account Information */} + + + Account Information + View your account details + + + {pendingEmail && ( + setShowCancelEmailDialog(true)} + /> + )} + +
+
+
+

Email Address

+
+

{user?.email}

+ {pendingEmail ? ( + + Change Pending + + ) : user?.email_confirmed_at ? ( + Verified + ) : ( + Pending Verification + )} +
+
+ +
+ + + +
+

Account Created

+

+ {profile?.created_at ? new Date(profile.created_at).toLocaleDateString() : 'N/A'} +

+
+
+ +
- - {/* Profile Information */} -
+ + + Profile Information + Update your public profile details + + +

Profile Information

@@ -393,86 +460,57 @@ export function AccountProfileTab() { )}
-
- - - {lastSaved && !loading && !isSaving && ( - - Last saved {formatDistanceToNow(lastSaved, { addSuffix: true })} - - )} -
- {isDeactivated && ( -

- Your account is deactivated. Profile editing is disabled. -

- )} - - - - - {/* Account Information */} -
-

Account Information

-
- {pendingEmail && ( - setShowCancelEmailDialog(true)} - /> - )} - -
-
-

Email Address

-
-

{user?.email}

- {pendingEmail ? ( - - Change Pending - - ) : user?.email_confirmed_at ? ( - Verified - ) : ( - Pending Verification - )} -
-
+ + {lastSaved && !loading && !isSaving && ( + + Last saved {formatDistanceToNow(lastSaved, { addSuffix: true })} + + )}
- - - -
-

Account Created

-

- {profile?.created_at ? new Date(profile.created_at).toLocaleDateString() : 'N/A'} + {isDeactivated && ( +

+ Your account is deactivated. Profile editing is disabled.

-
-
-
-
+ )} + + +
+ + {/* Danger Zone */} + + + Danger Zone + Irreversible account actions + + + + {deletionRequest && ( +

+ Account deletion already in progress +

+ )} + + {/* Email Change Dialog */} {user && ( @@ -486,29 +524,6 @@ export function AccountProfileTab() { {/* Cancel Email Change Dialog */} - - - Cancel Email Change? - - This will cancel your pending email change to {pendingEmail}. - Your email will remain as {user?.email}. - You can start a new email change request at any time. - - - - Keep Change - - {cancellingEmail ? 'Cancelling...' : 'Yes, Cancel Change'} - - - - - - {/* Danger Zone */} @@ -538,6 +553,28 @@ export function AccountProfileTab() { + + + Cancel Email Change? + + This will cancel your pending email change to {pendingEmail}. + Your email will remain as {user?.email}. + You can start a new email change request at any time. + + + + Keep Change + + {cancellingEmail ? 'Cancelling...' : 'Yes, Cancel Change'} + + + + + {/* Account Deletion Dialog */} - {/* Personal Statistics */} -
-
- -

Personal Statistics

-
- +
+ {/* Statistics + Recent Activity Grid */} +
+ {/* Personal Statistics */} +
+ + Personal Statistics +
Your activity and contribution statistics on ThrillWiki @@ -334,22 +334,16 @@ export function DataExportTab() { )} -
- - - - {/* Export Your Data */} -
-
- -

Export Your Data

-
+ {/* Account Activity */} - Download Your Data +
+ + Account Activity +
- Export all your ThrillWiki data in JSON format. This includes your profile, reviews, lists, and activity history. + Recent account activity and changes @@ -437,24 +431,6 @@ export function DataExportTab() { {exporting ? 'Exporting Data...' : 'Export My Data'} - -
- - - - {/* Account Activity */} -
-
- -

Account Activity

-
- - - - - Recent account activity and changes - - {recentActivity.length === 0 ? (

@@ -480,6 +456,104 @@ export function DataExportTab() {

+ + {/* Export Your Data - Full Width */} + + +
+ + Export Your Data +
+ + Export all your ThrillWiki data in JSON format. This includes your profile, reviews, lists, and activity history. + + + + {rateLimited && nextAvailableAt && ( +
+ +
+

Rate Limited

+

+ You can export your data once per hour. Next export available at{' '} + {formatDate(nextAvailableAt)}. +

+
+
+ )} + +
+

+ Choose what to include in your export: +

+ +
+
+ + + setExportOptions({ ...exportOptions, include_reviews: checked }) + } + /> +
+ +
+ + + setExportOptions({ ...exportOptions, include_lists: checked }) + } + /> +
+ +
+ + + setExportOptions({ ...exportOptions, include_activity_log: checked }) + } + /> +
+ +
+ + + setExportOptions({ ...exportOptions, include_preferences: checked }) + } + /> +
+
+
+ +
+ +
+

GDPR Compliance

+

+ This export includes all personal data we store about you. You can use this for backup purposes or to migrate to another service. +

+
+
+ + + +
); } diff --git a/src/components/settings/LocationTab.tsx b/src/components/settings/LocationTab.tsx index 57095378..7c4a98e9 100644 --- a/src/components/settings/LocationTab.tsx +++ b/src/components/settings/LocationTab.tsx @@ -6,7 +6,7 @@ import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; -import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import { Switch } from '@/components/ui/switch'; import { Skeleton } from '@/components/ui/skeleton'; @@ -304,16 +304,17 @@ export function LocationTab() { } return ( -
-
-
-
- -

Location Settings

-
- +
+ + {/* Location Settings + Personal Information Grid */} +
+ {/* Location Settings */} +
+ + Location Settings +
Set your location for better personalized content and timezone display. @@ -425,18 +426,14 @@ export function LocationTab() {
-
- - -
-
- -

Personal Information

-
- + {/* Personal Information */} +
+ + Personal Information +
Optional personal information that can be displayed on your profile. @@ -462,16 +459,15 @@ export function LocationTab() {
- - -
-
- -

Units & Measurements

-
- + {/* Unit Preferences + Accessibility Options Grid */} +
+ {/* Unit Preferences */} +
+ + Units & Measurements +
Choose your preferred measurement system for displaying distances, speeds, and other measurements. @@ -499,18 +495,14 @@ export function LocationTab() {
-
- - -
-
- -

Accessibility Options

-
- + {/* Accessibility Options */} +
+ + Accessibility Options +
Customize the interface to meet your accessibility needs. @@ -564,6 +556,7 @@ export function LocationTab() {
+ {/* Save Button */}