Implement account suspension, right to delete any message for owner, account deletion

frontend/src/core/components/StyledDialog.tsx

@@ -0,0 +1,69 @@
+import { createPortal } from "react-dom";
+import { useEffect, type ReactNode } from "react";
+import { motion, AnimatePresence, type Transition } from "motion/react";
+
+interface StyledDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+    onBackdropClick?: () => void;
+    className?: string;
+}
+
+export function StyledDialog({ 
+    open, 
+    onOpenChange, 
+    children, 
+    onBackdropClick,
+    className = ""
+}: StyledDialogProps) {
+    const transition: Transition = { duration: 0.3, type: "tween", ease: "easeInOut" };
+
+    // Handle ESC key
+    useEffect(() => {
+        if (open) {
+            function handleEsc(e: KeyboardEvent) {
+                if (e.key === "Escape") {
+                    onOpenChange(false);
+                }
+            }
+
+            document.addEventListener("keydown", handleEsc);
+            return () => document.removeEventListener("keydown", handleEsc);
+        }
+    }, [open, onOpenChange]);
+
+    return createPortal(
+        <AnimatePresence>
+            {open && (
+                <motion.div
+                    className={`styled-dialog-backdrop ${className}`}
+                    onClick={(e) => {
+                        if (e.target === e.currentTarget) {
+                            if (onBackdropClick) {
+                                onBackdropClick();
+                            } else {
+                                onOpenChange(false);
+                            }
+                        }
+                    }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={transition}>
+                    <motion.div
+                        className={`styled-dialog ${className}`}
+                        initial={{ scale: 0.9, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        exit={{ scale: 0.9, opacity: 0 }}
+                        transition={transition}>
+                        <div className="styled-dialog-content">
+                            {children}
+                        </div>
+                    </motion.div>
+                </motion.div>
+            )}
+        </AnimatePresence>,
+        document.getElementById("root")!
+    );
+}

frontend/src/core/components/css/_styled-dialog.scss

@@ -0,0 +1,45 @@
+@use "../../../css/colors" as *;
+@use "../../../css/material" as *;
+@use "sass:color";
+
+// Base Styled Dialog Styles
+.styled-dialog-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(20px);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 30px;
+    box-sizing: border-box;
+
+    .styled-dialog {
+        width: 100%;
+        max-width: 500px;
+        max-height: calc(100vh - 60px);
+        background: $color-dark-surface-container;
+        border-radius: 16px;
+        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+                    0 9px 46px 8px rgba(0, 0, 0, 0.12),
+                    0 11px 15px -7px rgba(0, 0, 0, 0.2);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        // Framer Motion handles all animations
+        // Removed CSS transitions to prevent interference
+    
+        .styled-dialog-content {
+            flex: 1;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            position: relative;
+        }
+    }
+}

frontend/src/core/types.d.ts

@@ -118,6 +118,9 @@ export interface User {
     bio?: string;
     profile_picture: string;
     verified?: boolean;
+    suspended?: boolean;
+    suspension_reason?: string | null;
+    deleted?: boolean;
 }
 
 /**

frontend/src/core/websocket.ts

@@ -11,6 +11,7 @@ import { delay } from "@/utils/utils";
 import { CallSignalingHandler } from "./calls/signaling";
 import { onlineStatusManager } from "./onlineStatusManager";
 import { typingManager } from "./typingManager";
+import { useAppState } from "@/pages/chat/state";
 
 /**
  * Creates a new WebSocket connection to the chat server
@@ -129,6 +130,19 @@ websocket.addEventListener("message", (e) => {
             typingManager.handleDmTyping(response as any);
         } else if (response.type === "stopDmTyping") {
             typingManager.handleStopDmTyping(response as any);
+        } else if (response.type === "suspended") {
+            // Handle account suspension
+            const { setSuspended } = useAppState.getState();
+            const reason = response.data?.reason || "No reason provided";
+            setSuspended(reason);
+            // Close WebSocket connection
+            websocket.close();
+        } else if (response.type === "account_deleted") {
+            // Handle account deletion - silent logout
+            const { logout } = useAppState.getState();
+            logout();
+            // Close WebSocket connection
+            websocket.close();
         }
 
         // Route message to global handler if set