Pop out of Threads Activity Centre (#12136)
* Add `Thread Activity centre` labs flag * Rename translation string * WIP Thread Activity Centre * Update supportedLevels * css lint * i18n lint * Fix labs subsection test * Update Threads Activity Centre label * Rename Thread Activity Centre to Threads Activity Centre * Use compound `MenuItem` instead of custom button * Color thread icon when hovered * Make the pop-up scrollable and add a max height * Remove Math.random in key * Remove unused class * Change add comments on `mx_ThreadsActivityRows` and `mx_ThreadsActivityRow` * Make threads activity centre labs flag split out unread counts Just shows notif & unread counts for main thread if the TAC is enabled. * Fix tests * Simpler fix * Open thread panel when thread clicke in Threads Activity Centre Hopefully this is a sensible enough way. The panel will stay open of course (ie. if you go to a different room & come back), but that's the nature of the right panel. * Dynamic state of room * Add doc * Use the StatelessNotificationBadge component in ThreadsActivityCentre and re-use the existing NotificationLevel * Remove unused style * Add room sorting * Fix `ThreadsActivityRow` props doc * Pass in & cache the status of the TAC labs flag * Pass includeThreads as setting to doesRoomHaveUnreadMessages too * Fix tests * Add analytics to the TAC (#12179) * Update TAC label (#12186) * Add `IndicatorIcon` to the TAC button (#12182) Add `IndicatorIcon` to the TAC button * Threads don't have activity if the room is muted This makes it match the computation in determineUnreadState. Ideally this logic should all be in one place. * Re-use doesRoomHaveUnreadThreads for useRoomThreadNotifications This incorporates the logic of not showing unread dots if the room is muted * Add TAC description in labs (#12197) * Fox position & size of dot on the tac button IndicatorIcon doesn't like having the size of its icon adjusted and we probably shouldn't do it anyway: better to specify to the component what size we want it. * TAC: Utils tests (#12200) * Add tests for `doesRoomHaveUnreadThreads` * Add tests for `getThreadNotificationLevel` * Add test for the ThreadsActivityCentre component * Add snapshot test * Fix narrow hover background on TAC button Make the button 32x32 (and the inner icon 24x24) * Add caption for empty TAC * s/tac/threads_activity_centre/ * Fix i18n & add tests * Add playwright tests for the TAC (#12227) * Fox comments --------- Co-authored-by: David Baker <dbkr@users.noreply.github.com>
This commit is contained in:
Florian Duros
GitHub
parent
3052025dd0
commit
a4987060b7
24 changed files with 1455 additions and 14 deletions
|
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
*
|
||||
* Copyright 2024 The Matrix.org Foundation C.I.C.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* /
|
||||
*/
|
||||
|
||||
import React, { JSX, useState } from "react";
|
||||
import { Menu, MenuItem } from "@vector-im/compound-web";
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { ThreadsActivityCentreButton } from "./ThreadsActivityCentreButton";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import DecoratedRoomAvatar from "../../avatars/DecoratedRoomAvatar";
|
||||
import { Action } from "../../../../dispatcher/actions";
|
||||
import defaultDispatcher from "../../../../dispatcher/dispatcher";
|
||||
import { ViewRoomPayload } from "../../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import RightPanelStore from "../../../../stores/right-panel/RightPanelStore";
|
||||
import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases";
|
||||
import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
|
||||
import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
|
||||
import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
|
||||
import PosthogTrackers from "../../../../PosthogTrackers";
|
||||
|
||||
interface ThreadsActivityCentreProps {
|
||||
/**
|
||||
* Display the `Treads` label next to the icon.
|
||||
*/
|
||||
displayButtonLabel?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Display in a popup the list of rooms with unread threads.
|
||||
* The popup is displayed when the user clicks on the `Threads` button.
|
||||
*/
|
||||
export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCentreProps): JSX.Element {
|
||||
const [open, setOpen] = useState(false);
|
||||
const roomsAndNotifications = useUnreadThreadRooms(open);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
align="end"
|
||||
open={open}
|
||||
onOpenChange={(newOpen) => {
|
||||
// Track only when the Threads Activity Centre is opened
|
||||
if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
|
||||
|
||||
setOpen(newOpen);
|
||||
}}
|
||||
side="right"
|
||||
title={_t("threads_activity_centre|header")}
|
||||
trigger={
|
||||
<ThreadsActivityCentreButton
|
||||
displayLabel={displayButtonLabel}
|
||||
notificationLevel={roomsAndNotifications.greatestNotificationLevel}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{/* Make the content of the pop-up scrollable */}
|
||||
<div className="mx_ThreadsActivity_rows">
|
||||
{roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
|
||||
<ThreadsActivityRow
|
||||
key={room.roomId}
|
||||
room={room}
|
||||
notificationLevel={notificationLevel}
|
||||
onClick={() => setOpen(false)}
|
||||
/>
|
||||
))}
|
||||
{roomsAndNotifications.rooms.length === 0 && (
|
||||
<div className="mx_ThreadsActivityCentre_emptyCaption">
|
||||
{_t("threads_activity_centre|no_rooms_with_unreads_threads")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
interface ThreadsActivityRow {
|
||||
/**
|
||||
* The room with unread threads.
|
||||
*/
|
||||
room: Room;
|
||||
/**
|
||||
* The notification level.
|
||||
*/
|
||||
notificationLevel: NotificationLevel;
|
||||
/**
|
||||
* Callback when the user clicks on the row.
|
||||
*/
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a room with unread threads.
|
||||
*/
|
||||
function ThreadsActivityRow({ room, onClick, notificationLevel }: ThreadsActivityRow): JSX.Element {
|
||||
return (
|
||||
<MenuItem
|
||||
className="mx_ThreadsActivityRow"
|
||||
onSelect={(event: Event) => {
|
||||
onClick();
|
||||
|
||||
// Set the right panel card for that room so the threads panel is open before we dispatch,
|
||||
// so it will open once the room appears.
|
||||
RightPanelStore.instance.setCard({ phase: RightPanelPhases.ThreadPanel }, true, room.roomId);
|
||||
|
||||
// Track the click on the room
|
||||
PosthogTrackers.trackInteraction("WebThreadsActivityCentreRoomItem", event);
|
||||
|
||||
// Display the selected room in the timeline
|
||||
defaultDispatcher.dispatch<ViewRoomPayload>({
|
||||
action: Action.ViewRoom,
|
||||
show_room_tile: true, // make sure the room is visible in the list
|
||||
room_id: room.roomId,
|
||||
metricsTrigger: "WebThreadsActivityCentre",
|
||||
});
|
||||
}}
|
||||
label={room.name}
|
||||
Icon={<DecoratedRoomAvatar room={room} size="32px" />}
|
||||
>
|
||||
<StatelessNotificationBadge level={notificationLevel} count={0} symbol={null} type="dot" />
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue