From 9766cb2ca2fb338a207aa1968663161923d26c20 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Tue, 10 Sep 2024 13:33:12 +0200
Subject: [PATCH 1/4] Add button to remove call from recents

Fixes: #2243
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
---
 src/home/CallList.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx
index aa6db6f38..cda6f3a7b 100644
--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -9,7 +9,10 @@ import { Link } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { FC } from "react";
+import { FC, useCallback, MouseEvent } from "react";
+import { t } from "i18next";
+import { IconButton } from "@vector-im/compound-web";
+import { DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
@@ -55,8 +58,16 @@ interface CallTileProps {
   client: MatrixClient;
 }
 
-const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
+const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room, client }) => {
   const roomEncryptionSystem = useRoomEncryptionSystem(room.roomId);
+  const onRemove = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      void client.leave(room.roomId);
+    },
+    [room, client],
+  );
   return (
     <div className={styles.callTile}>
       <Link
@@ -69,7 +80,9 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
             {name}
           </Body>
         </div>
-        <div className={styles.copyButtonSpacer} />
+        <IconButton onClick={onRemove} aria-label={t("action.remove")}>
+          <DeleteIcon />
+        </IconButton>
       </Link>
     </div>
   );

From 09af614fb8cff95e801284666d8ab40fc66d0d7a Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Tue, 10 Sep 2024 16:21:56 +0200
Subject: [PATCH 2/4] Switch to close icon

---
 src/home/CallList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx
index cda6f3a7b..a136c0861 100644
--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -12,7 +12,7 @@ import { Room } from "matrix-js-sdk/src/models/room";
 import { FC, useCallback, MouseEvent } from "react";
 import { t } from "i18next";
 import { IconButton } from "@vector-im/compound-web";
-import { DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
@@ -81,7 +81,7 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room, client }) => {
           </Body>
         </div>
         <IconButton onClick={onRemove} aria-label={t("action.remove")}>
-          <DeleteIcon />
+          <CloseIcon />
         </IconButton>
       </Link>
     </div>

From b1b226d79bf15bf359cd53d827ac036b8b7fa85d Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Thu, 12 Sep 2024 09:32:24 +0200
Subject: [PATCH 3/4] Disable link and button while leaving

---
 src/home/CallList.module.css |  5 ++++
 src/home/CallList.tsx        | 53 +++++++++++++++++++++++++-----------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/home/CallList.module.css b/src/home/CallList.module.css
index 8e988d034..c7441b4a8 100644
--- a/src/home/CallList.module.css
+++ b/src/home/CallList.module.css
@@ -64,3 +64,8 @@ Please see LICENSE in the repository root for full details.
   justify-content: center;
   margin-bottom: 24px;
 }
+
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.8;
+}
diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx
index a136c0861..de0e1f519 100644
--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -9,10 +9,11 @@ import { Link } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { FC, useCallback, MouseEvent } from "react";
+import { FC, useCallback, MouseEvent, useState } from "react";
 import { t } from "i18next";
 import { IconButton } from "@vector-im/compound-web";
 import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import classNames from "classnames";
 
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
@@ -60,30 +61,50 @@ interface CallTileProps {
 
 const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room, client }) => {
   const roomEncryptionSystem = useRoomEncryptionSystem(room.roomId);
+  const [isLeaving, setIsLeaving] = useState(false);
+
   const onRemove = useCallback(
     (e: MouseEvent) => {
       e.stopPropagation();
       e.preventDefault();
-      void client.leave(room.roomId);
+      setIsLeaving(true);
+      client.leave(room.roomId).catch(() => setIsLeaving(false));
     },
     [room, client],
   );
+
+  const body = (
+    <>
+      <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
+      <div className={styles.callInfo}>
+        <Body overflowEllipsis fontWeight="semiBold">
+          {name}
+        </Body>
+      </div>
+      <IconButton
+        onClick={onRemove}
+        disabled={isLeaving}
+        aria-label={t("action.remove")}
+      >
+        <CloseIcon />
+      </IconButton>
+    </>
+  );
+
   return (
     <div className={styles.callTile}>
-      <Link
-        to={getRelativeRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
-        className={styles.callTileLink}
-      >
-        <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
-        <div className={styles.callInfo}>
-          <Body overflowEllipsis fontWeight="semiBold">
-            {name}
-          </Body>
-        </div>
-        <IconButton onClick={onRemove} aria-label={t("action.remove")}>
-          <CloseIcon />
-        </IconButton>
-      </Link>
+      {isLeaving ? (
+        <span className={classNames(styles.callTileLink, styles.disabled)}>
+          {body}
+        </span>
+      ) : (
+        <Link
+          to={getRelativeRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
+          className={styles.callTileLink}
+        >
+          {body}
+        </Link>
+      )}
     </div>
   );
 };

From 8e2145388772eefae989105bec9dbdfeddc04681 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Thu, 12 Sep 2024 09:34:07 +0200
Subject: [PATCH 4/4] Use i18next hook

---
 src/home/CallList.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx
index de0e1f519..526bb7e84 100644
--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -10,7 +10,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { FC, useCallback, MouseEvent, useState } from "react";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 import { IconButton } from "@vector-im/compound-web";
 import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
@@ -60,6 +60,7 @@ interface CallTileProps {
 }
 
 const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room, client }) => {
+  const { t } = useTranslation();
   const roomEncryptionSystem = useRoomEncryptionSystem(room.roomId);
   const [isLeaving, setIsLeaving] = useState(false);