feat: delete users - not tested

frontend/src/features/settings/mobile/PendingDeletionBanner.tsx

@@ -0,0 +1,53 @@
+/**
+ * @ai-summary Mobile banner showing pending account deletion with cancel option
+ */
+
+import React from 'react';
+import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+import { useDeletionStatus, useCancelDeletion } from '../hooks/useDeletion';
+
+export const PendingDeletionBanner: React.FC = () => {
+  const { data: deletionStatus, isLoading } = useDeletionStatus();
+  const cancelDeletionMutation = useCancelDeletion();
+
+  // Don't show banner if not loading and not pending deletion
+  if (isLoading || !deletionStatus?.isPendingDeletion) {
+    return null;
+  }
+
+  const handleCancelDeletion = async () => {
+    await cancelDeletionMutation.mutateAsync();
+  };
+
+  return (
+    <GlassCard padding="md" className="bg-amber-50/80 border-amber-200/70">
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-lg font-semibold text-amber-900 mb-1">Account Deletion Pending</h3>
+          <p className="text-sm text-amber-800">
+            Your account is scheduled for deletion in{' '}
+            <strong>{deletionStatus.daysRemaining} {deletionStatus.daysRemaining === 1 ? 'day' : 'days'}</strong>.
+          </p>
+          {deletionStatus.deletionScheduledFor && (
+            <p className="text-xs text-amber-700 mt-1">
+              Scheduled for: {new Date(deletionStatus.deletionScheduledFor).toLocaleDateString()}
+            </p>
+          )}
+        </div>
+
+        <button
+          onClick={handleCancelDeletion}
+          disabled={cancelDeletionMutation.isPending}
+          className="w-full py-2.5 px-4 bg-amber-600 text-white rounded-lg font-medium hover:bg-amber-700 transition-colors disabled:opacity-50 flex items-center justify-center"
+          style={{ minHeight: '44px' }}
+        >
+          {cancelDeletionMutation.isPending ? (
+            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+          ) : (
+            'Cancel Deletion'
+          )}
+        </button>
+      </div>
+    </GlassCard>
+  );
+};