feat: execute Batch 3 of pre-launch web UX and form fixes

- W1: Web GDPR profile deletion modal and API wiring
- W4: Standardize terms/conditions checkbox on waitlist signup form
- W5: Verified dedicated privacy policy page
- W8 & W9: Implement proper input validation and clear toast notifications for split errors on Web ExpenseForm
- W11: Add strict character limits (255) for all description inputs

Author: Arun-kushwaha007

apps/web/app/waitlist/page.tsx

@@ -173,6 +173,13 @@ export default function WaitlistPage() {
                         </div>
                       </div>
 
+                      <div className="flex items-start gap-3 py-1">
+                        <input type="checkbox" className="mt-1 h-3.5 w-3.5 rounded border-white/10 bg-white/5 checked:bg-purple-600 transition-all cursor-pointer" id="terms" required />
+                        <label htmlFor="terms" className="text-[11px] font-medium text-zinc-500 leading-normal cursor-pointer hover:text-zinc-300 transition-colors text-left">
+                          By joining the queue, you agree to our <a href="/terms" className="text-white hover:underline">Terms of Service</a> and <a href="/privacy" className="text-white hover:underline">Privacy Policy</a>.
+                        </label>
+                      </div>
+
                       <div className="pt-4">
                         <AccentButton 
                           type="submit"

apps/web/src/components/groups/CreateExpenseModal.tsx

@@ -204,23 +204,43 @@ export function CreateExpenseModal({
     setError('');
     const totalCents = Math.round(Number(amount || 0) * 100);
 
-    if (!description.trim() || totalCents <= 0 || participants.length === 0) {
-      setError('Add a description, amount, and at least one participant.');
+    if (!description.trim()) {
+      setError('Description is required.');
       return;
     }
 
-    let shares: Record<string, number>;
-    if (splitType === 'equal') {
-      shares = equalShares(totalCents, participants);
-    } else if (splitType === 'exact') {
-      shares = exactShares(participants, exactByUser);
-    } else {
-      shares = percentageShares(totalCents, participants, percentagesByUser);
+    if (description.length > 255) {
+      setError('Description cannot exceed 255 characters.');
+      return;
+    }
+
+    if (totalCents <= 0) {
+      setError('Amount must be greater than 0.');
+      return;
+    }
+
+    if (participants.length === 0) {
+      setError('Select at least one participant.');
+      return;
     }
 
-    const diff = totalCents - sumShares(shares);
-    if (diff !== 0 && participants.length > 0) {
-      shares[participants[0]] = (shares[participants[0]] ?? 0) + diff;
+    let shares: Record<string, number>;
+    try {
+      if (splitType === 'equal') {
+        shares = equalShares(totalCents, participants);
+      } else if (splitType === 'exact') {
+        shares = exactShares(participants, exactByUser);
+      } else {
+        shares = percentageShares(totalCents, participants, percentagesByUser);
+      }
+
+      const diff = totalCents - sumShares(shares);
+      if (diff !== 0 && participants.length > 0) {
+        shares[participants[0]] = (shares[participants[0]] ?? 0) + diff;
+      }
+    } catch (err) {
+      setError((err as Error).message || 'Invalid split configuration.');
+      return;
     }
 
     const splits = participants.map((userId) => ({
@@ -321,6 +341,7 @@ export function CreateExpenseModal({
                       placeholder="Team dinner, rideshare..."
                       value={description}
                       onChange={(event) => setDescription(event.target.value)}
+                      maxLength={255}
                       required
                     />
                   </div>

apps/web/src/components/groups/ExpenseDetailCard.tsx

@@ -45,6 +45,10 @@ export function ExpenseDetailCard({ expense, receiptUrl }: { expense: ExpenseDto
       toast('Description must be at least 2 characters', 'error');
       return;
     }
+    if (description.length > 255) {
+      toast('Description cannot exceed 255 characters', 'error');
+      return;
+    }
 
     try {
       setSaving(true);
@@ -112,6 +116,7 @@ export function ExpenseDetailCard({ expense, receiptUrl }: { expense: ExpenseDto
               <input
                 value={description}
                 onChange={(event) => setDescription(event.target.value)}
+                maxLength={255}
                 className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-background)] p-3 text-sm text-[var(--fs-text-primary)] outline-none focus:border-[var(--fs-primary)]"
               />
             </div>

apps/web/src/components/profile/ProfilePanel.tsx

@@ -4,7 +4,10 @@ import Link from 'next/link';
 import { AuthUserDto } from '@fairshare/shared-types';
 import { LogOut, ShieldCheck, LifeBuoy, Settings, ChevronRight, User, Command } from 'lucide-react';
 import { useAuth } from '../auth/AuthProvider';
-import { motion } from 'framer-motion';
+import { useToast } from '../ui/Toaster';
+import { useState } from 'react';
+import { deleteAccountAction } from '../../lib/actions';
+import { motion, AnimatePresence } from 'framer-motion';
 import { GlassCard } from '../../../components/ui/GlassCard';
 import { fadeUp, staggerContainer } from '../../../components/home/motion-variants';
 
@@ -18,6 +21,35 @@ function initials(name?: string | null) {
 export function ProfilePanel({ fallbackUser }: { fallbackUser: AuthUserDto | null }) {
   const { user, logout, loading } = useAuth();
   const currentUser = user ?? fallbackUser;
+  const { toast } = useToast();
+  
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteConfirmation, setDeleteConfirmation] = useState('');
+
+  const handleDeleteAccount = async () => {
+    if (deleteConfirmation.toLowerCase() !== 'delete my account') {
+      toast('Please type "delete my account" to confirm', 'error');
+      return;
+    }
+    
+    setIsDeleting(true);
+    try {
+      const result = await deleteAccountAction();
+      if (result.success) {
+        toast('Account successfully scheduled for deletion');
+        await logout();
+      } else {
+        toast(result.message || 'Failed to delete account', 'error');
+      }
+    } catch (err) {
+      toast('An unexpected error occurred', 'error');
+    } finally {
+      setIsDeleting(false);
+      setIsDeleteModalOpen(false);
+      setDeleteConfirmation('');
+    }
+  };
 
   const actionItems = [
     {
@@ -128,6 +160,86 @@ export function ProfilePanel({ fallbackUser }: { fallbackUser: AuthUserDto | nul
           </GlassCard>
         </button>
       </div>
+      {/* ── Danger Zone ── */}
+      <div className="pt-8">
+        <GlassCard className="p-6 border-rose-500/20 bg-rose-500/5 shadow-[var(--fs-shadow-soft)]">
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+            <div className="space-y-1 text-center sm:text-left">
+              <h2 className="text-lg font-black italic tracking-tighter text-rose-500 uppercase">
+                Danger Zone
+              </h2>
+              <p className="text-[12px] font-medium text-[var(--fs-text-muted)] max-w-xl">
+                Permanently delete your account and anonymize all associated personal data. This action cannot be undone.
+              </p>
+            </div>
+            <button
+              onClick={() => setIsDeleteModalOpen(true)}
+              disabled={loading || isDeleting}
+              className="px-6 py-3 rounded-xl bg-rose-500 hover:bg-rose-600 text-white font-bold tracking-widest uppercase text-xs transition-colors"
+            >
+              Delete Account
+            </button>
+          </div>
+        </GlassCard>
+      </div>
+
+      {/* ── Delete Account Modal ── */}
+      <AnimatePresence>
+        {isDeleteModalOpen && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+              onClick={() => !isDeleting && setIsDeleteModalOpen(false)}
+            />
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              className="relative w-full max-w-md overflow-hidden rounded-3xl border border-rose-500/20 bg-[var(--fs-surface)] p-6 shadow-2xl"
+            >
+              <div className="mb-6 flex flex-col items-center text-center">
+                <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-rose-500/10 text-rose-500">
+                  <ShieldCheck size={32} />
+                </div>
+                <h3 className="text-xl font-black italic tracking-tighter text-[var(--fs-text-primary)] uppercase">
+                  Delete Account
+                </h3>
+                <p className="mt-2 text-sm text-[var(--fs-text-muted)]">
+                  This will permanently anonymize your data and remove your access to all groups. To proceed, please type <span className="font-bold text-rose-500">delete my account</span> below.
+                </p>
+              </div>
+
+              <input
+                type="text"
+                placeholder="delete my account"
+                value={deleteConfirmation}
+                onChange={(e) => setDeleteConfirmation(e.target.value)}
+                className="w-full rounded-xl border border-[var(--fs-border)] bg-[var(--fs-bg)] px-4 py-3 text-center font-bold tracking-widest uppercase text-[var(--fs-text-primary)] outline-none focus:border-rose-500 focus:ring-1 focus:ring-rose-500 placeholder:text-[var(--fs-text-muted)]/50"
+              />
+
+              <div className="mt-8 flex gap-3">
+                <button
+                  onClick={() => setIsDeleteModalOpen(false)}
+                  disabled={isDeleting}
+                  className="flex-1 rounded-xl bg-[var(--fs-bg)] py-3 font-bold tracking-widest text-[var(--fs-text-primary)] transition-colors hover:bg-[var(--fs-border)] uppercase text-xs"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDeleteAccount}
+                  disabled={isDeleting || deleteConfirmation.toLowerCase() !== 'delete my account'}
+                  className="flex-1 rounded-xl bg-rose-500 py-3 font-bold tracking-widest text-white transition-colors hover:bg-rose-600 disabled:opacity-50 uppercase text-xs"
+                >
+                  {isDeleting ? 'Deleting...' : 'Confirm'}
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
     </motion.div>
   );
 }

apps/web/src/lib/actions.ts

@@ -390,3 +390,23 @@ export async function deleteGroupAction(groupId: string) {
 
   return { success: true };
 }
+
+export async function deleteAccountAction() {
+  const token = (await cookies()).get(authCookies.accessToken)?.value;
+
+  const response = await fetch(`${getBackendBaseUrl()}/users/me`, {
+    method: 'DELETE',
+    headers: {
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+    cache: 'no-store',
+  });
+
+  const data = await response.json().catch(() => null);
+
+  if (!response.ok) {
+    return { success: false, message: data?.message ?? 'Failed to delete account' };
+  }
+
+  return { success: true };
+}