From 3561aecaa484674fad3a612608adc319a31be269 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:41:01 +0530
Subject: [PATCH] Add and use a new overflow component

We used the EntityTile component as a pretend overflow tile in some
places. This new lighter component is added so  that we can remove the
complex EntityTile component.
---
 res/css/views/rooms/_OverflowTile.pcss        | 51 +++++++++++++++++++
 .../views/dialogs/ForwardDialog.tsx           | 17 ++-----
 .../views/rooms/OverflowTileView.tsx          | 32 ++++++++++++
 3 files changed, 86 insertions(+), 14 deletions(-)
 create mode 100644 res/css/views/rooms/_OverflowTile.pcss
 create mode 100644 src/components/views/rooms/OverflowTileView.tsx

diff --git a/res/css/views/rooms/_OverflowTile.pcss b/res/css/views/rooms/_OverflowTile.pcss
new file mode 100644
index 0000000000..f577b6bd22
--- /dev/null
+++ b/res/css/views/rooms/_OverflowTile.pcss
@@ -0,0 +1,51 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_OverflowTileView {
+    display: flex;
+    align-items: center;
+    color: $primary-content;
+    cursor: pointer;
+}
+
+.mx_OverflowTileView_text {
+    flex: 1 1 0;
+    overflow: hidden;
+    font: var(--cpd-font-body-md-regular);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-style: italic;
+}
+
+.mx_OverflowTileView:hover {
+    padding-right: 30px;
+    position: relative; /* to keep the chevron aligned */
+}
+
+.mx_OverflowTileView:hover::before {
+    content: "";
+    position: absolute;
+    top: calc(50% - 8px); /* center */
+    right: -8px;
+    mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    width: 16px;
+    height: 16px;
+    background-color: $header-panel-text-primary-color;
+}
+
+.mx_OverflowTileView_icon {
+    padding-left: 3px;
+    padding-right: 12px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    position: relative;
+    line-height: 0;
+}
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 687e0f9eed..cdf5b7b735 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -23,8 +23,6 @@ import {
     TimelineEvents,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-// eslint-disable-next-line no-restricted-imports
-import OverflowHorizontalSvg from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
@@ -42,8 +40,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import TruncatedList from "../elements/TruncatedList";
-import EntityTile from "../rooms/EntityTile";
-import BaseAvatar from "../avatars/BaseAvatar";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
@@ -60,6 +56,7 @@ import {
 } from "../../../accessibility/RovingTabIndex";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import { OverflowTileView } from "../rooms/OverflowTileView";
 
 const AVATAR_SIZE = 30;
 
@@ -275,17 +272,9 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
     }
 
     const [truncateAt, setTruncateAt] = useState(20);
+
     function overflowTile(overflowCount: number, totalCount: number): JSX.Element {
-        const text = _t("common|and_n_others", { count: overflowCount });
-        return (
-            <EntityTile
-                className="mx_EntityTile_ellipsis"
-                avatarJsx={<BaseAvatar url={OverflowHorizontalSvg} name="..." size="36px" />}
-                name={text}
-                showPresence={false}
-                onClick={() => setTruncateAt(totalCount)}
-            />
-        );
+        return <OverflowTileView remaining={overflowCount} onClick={() => setTruncateAt(totalCount)} />;
     }
 
     const onKeyDown = (ev: React.KeyboardEvent, state: IState): void => {
diff --git a/src/components/views/rooms/OverflowTileView.tsx b/src/components/views/rooms/OverflowTileView.tsx
new file mode 100644
index 0000000000..ea9eba6f4c
--- /dev/null
+++ b/src/components/views/rooms/OverflowTileView.tsx
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import Icon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+
+import { _t } from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+
+interface Props {
+    // The number of remaining items
+    remaining: number;
+    onClick(): void;
+}
+
+/**
+ * @deprecated Only used in ForwardDialog component; newer designs have moved away from this.
+ */
+export const OverflowTileView: React.FC<Props> = ({ remaining, onClick }) => {
+    return (
+        <AccessibleButton onClick={onClick} className="mx_OverflowTileView">
+            <div className="mx_OverflowTileView_icon">
+                <Icon height="36px" width="36px" />
+            </div>
+            <div className="mx_OverflowTileView_text">{_t("common|and_n_others", { count: remaining })}</div>
+        </AccessibleButton>
+    );
+};