Refactor: Implement desktop layout modernization

src/components/settings/DataExportTab.tsx

@@ -281,16 +281,16 @@ export function DataExportTab() {
   }
 
   return (
-    <div className="space-y-8">
-      {/* Personal Statistics */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <BarChart3 className="w-5 h-5" />
-          <h3 className="text-lg font-medium">Personal Statistics</h3>
-        </div>
-
+    <div className="space-y-6">
+      {/* Statistics + Recent Activity Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Personal Statistics */}
         <Card>
           <CardHeader>
+            <div className="flex items-center gap-2">
+              <BarChart3 className="w-5 h-5" />
+              <CardTitle>Personal Statistics</CardTitle>
+            </div>
             <CardDescription>
               Your activity and contribution statistics on ThrillWiki
             </CardDescription>
@@ -334,22 +334,16 @@ export function DataExportTab() {
             )}
           </CardContent>
         </Card>
-      </div>
-
-      <Separator />
-
-      {/* Export Your Data */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Download className="w-5 h-5" />
-          <h3 className="text-lg font-medium">Export Your Data</h3>
-        </div>
 
+        {/* Account Activity */}
         <Card>
           <CardHeader>
-            <CardTitle>Download Your Data</CardTitle>
+            <div className="flex items-center gap-2">
+              <Activity className="w-5 h-5" />
+              <CardTitle>Account Activity</CardTitle>
+            </div>
             <CardDescription>
-              Export all your ThrillWiki data in JSON format. This includes your profile, reviews, lists, and activity history.
+              Recent account activity and changes
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-6">
@@ -437,24 +431,6 @@ export function DataExportTab() {
               {exporting ? 'Exporting Data...' : 'Export My Data'}
             </Button>
           </CardContent>
-        </Card>
-      </div>
-
-      <Separator />
-
-      {/* Account Activity */}
-      <div className="space-y-4">
-        <div className="flex items-center gap-2">
-          <Activity className="w-5 h-5" />
-          <h3 className="text-lg font-medium">Account Activity</h3>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <CardDescription>
-              Recent account activity and changes
-            </CardDescription>
-          </CardHeader>
           <CardContent>
             {recentActivity.length === 0 ? (
               <p className="text-sm text-muted-foreground text-center py-4">
@@ -480,6 +456,104 @@ export function DataExportTab() {
           </CardContent>
         </Card>
       </div>
+
+      {/* Export Your Data - Full Width */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Download className="w-5 h-5" />
+            <CardTitle>Export Your Data</CardTitle>
+          </div>
+          <CardDescription>
+            Export all your ThrillWiki data in JSON format. This includes your profile, reviews, lists, and activity history.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {rateLimited && nextAvailableAt && (
+            <div className="flex items-start gap-3 p-4 border border-yellow-500/20 bg-yellow-500/10 rounded-lg">
+              <Clock className="w-5 h-5 text-yellow-500 mt-0.5" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium">Rate Limited</p>
+                <p className="text-sm text-muted-foreground">
+                  You can export your data once per hour. Next export available at{' '}
+                  {formatDate(nextAvailableAt)}.
+                </p>
+              </div>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Choose what to include in your export:
+            </p>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="include_reviews">Include Reviews</Label>
+                <Switch
+                  id="include_reviews"
+                  checked={exportOptions.include_reviews}
+                  onCheckedChange={(checked) =>
+                    setExportOptions({ ...exportOptions, include_reviews: checked })
+                  }
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="include_lists">Include Lists</Label>
+                <Switch
+                  id="include_lists"
+                  checked={exportOptions.include_lists}
+                  onCheckedChange={(checked) =>
+                    setExportOptions({ ...exportOptions, include_lists: checked })
+                  }
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="include_activity_log">Include Activity Log</Label>
+                <Switch
+                  id="include_activity_log"
+                  checked={exportOptions.include_activity_log}
+                  onCheckedChange={(checked) =>
+                    setExportOptions({ ...exportOptions, include_activity_log: checked })
+                  }
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="include_preferences">Include Preferences</Label>
+                <Switch
+                  id="include_preferences"
+                  checked={exportOptions.include_preferences}
+                  onCheckedChange={(checked) =>
+                    setExportOptions({ ...exportOptions, include_preferences: checked })
+                  }
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-3 p-4 border rounded-lg">
+            <AlertCircle className="w-5 h-5 text-blue-500 mt-0.5" />
+            <div className="space-y-1">
+              <p className="text-sm font-medium">GDPR Compliance</p>
+              <p className="text-sm text-muted-foreground">
+                This export includes all personal data we store about you. You can use this for backup purposes or to migrate to another service.
+              </p>
+            </div>
+          </div>
+
+          <Button 
+            onClick={handleDataExport} 
+            disabled={exporting || rateLimited}
+            className="w-full"
+          >
+            <Download className="w-4 h-4 mr-2" />
+            {exporting ? 'Exporting Data...' : 'Export My Data'}
+          </Button>
+        </CardContent>
+      </Card>
     </div>
   );
 }