diff --git a/src/home/CallList.module.css b/src/home/CallList.module.css index 21f6866f..faa5bf2d 100644 --- a/src/home/CallList.module.css +++ b/src/home/CallList.module.css @@ -70,3 +70,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 0446bb02..72b7356a 100644 --- a/src/home/CallList.tsx +++ b/src/home/CallList.tsx @@ -9,8 +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 } from "react"; -import { Text } from "@vector-im/compound-web"; +import { FC, useCallback, MouseEvent, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { IconButton, Text } 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"; @@ -55,22 +58,53 @@ interface CallTileProps { client: MatrixClient; } -const CallTile: FC = ({ name, avatarUrl, room }) => { +const CallTile: FC = ({ name, avatarUrl, room, client }) => { + const { t } = useTranslation(); const roomEncryptionSystem = useRoomEncryptionSystem(room.roomId); + const [isLeaving, setIsLeaving] = useState(false); + + const onRemove = useCallback( + (e: MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + setIsLeaving(true); + client.leave(room.roomId).catch(() => setIsLeaving(false)); + }, + [room, client], + ); + + const body = ( + <> + +
+ + {name} + +
+ + + + + ); + return (
- - -
- - {name} - -
-
- + {isLeaving ? ( + + {body} + + ) : ( + + {body} + + )}
); };