feat(ui): add inline delete confirmation for channels and servers

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">

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">