From c181ec1848077b7503d34cf8d11d6dfbdaa199f9 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 6 Sep 2026 20:21:18 +0200
Subject: [PATCH] feat(ui): add inline delete confirmation for channels and
 servers

---
 components/modals/EditChannelModal.tsx | 9 ++++++++-
 components/modals/EditServerModal.tsx  | 8 +++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/modals/EditChannelModal.tsx b/components/modals/EditChannelModal.tsx
index e3bc640..3e47436 100644
--- a/components/modals/EditChannelModal.tsx
+++ b/components/modals/EditChannelModal.tsx
@@ -43,6 +43,7 @@ export function EditChannelModal({
   const [name, setName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const router = useRouter();
@@ -51,6 +52,7 @@ export function EditChannelModal({
   useEffect(() => {
     if (channel) {
       setName(channel.name);
+      setIsConfirmingDelete(false);
     }
   }, [channel]);
 
@@ -105,6 +107,11 @@ export function EditChannelModal({
    * @returns {Promise<void>} Resolves when the channel deletion and navigation processes complete or fail.
    */
   const handleDelete = async () => {
+    if (!isConfirmingDelete) {
+      setIsConfirmingDelete(true);
+      return;
+    }
+
     if (isDeleting || isLoading) return;
 
     try {
@@ -198,7 +205,7 @@ export function EditChannelModal({
               disabled={isLoading}
               icon={Trash2}
             >
-              Delete Channel
+              {isConfirmingDelete ? "Sure?" : "Delete Channel"}
             </ActionButton>
 
             <div className="flex items-center gap-2">
diff --git a/components/modals/EditServerModal.tsx b/components/modals/EditServerModal.tsx
index 2448a7a..425014f 100644
--- a/components/modals/EditServerModal.tsx
+++ b/components/modals/EditServerModal.tsx
@@ -45,6 +45,7 @@ export function EditServerModal({
   const [name, setName] = useState(initialName);
   const [isLoading, setIsLoading] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const router = useRouter();
@@ -102,6 +103,11 @@ export function EditServerModal({
    * @returns {Promise<void>} Resolves when the server deletion process completes or fails.
    */
   const handleDelete = async () => {
+    if (!isConfirmingDelete) {
+      setIsConfirmingDelete(true);
+      return;
+    }
+
     if (isDeleting || isLoading) return;
 
     try {
@@ -177,7 +183,7 @@ export function EditServerModal({
               disabled={isLoading}
               icon={Trash2}
             >
-              Delete Server
+              {isConfirmingDelete ? "Sure?" : "Delete Server "}
             </ActionButton>
 
             <div className="flex items-center gap-2">