Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Add badge for history visibiltity to room info panel (#31927)

Browse Source 
* Add `HistoryVisibilityBadge` shared component

* Add `historyVisibility` to `RoomSummaryCardViewModel`

* Add a history visibility badge to the room info panel

* Allow roominfo panel badges to wrap

Now that we have an extra one, it's quite likely we'll have to spill onto more
lines.

* update screenshots

* Set icons in badges to be 16px

Having discussed this with the design team, the icons in badges should be 16px, not 13px,
at default font size settings.

* Add stories for all history visibility states

* fix incorrect use of useRoomState

* fix snapshots

* more snapshot updates

* Update screenshots
This commit is contained in:
Richard van der Hoff
2026-02-03 12:50:00 +00:00
committed by GitHub
parent 92615272ce
commit af55def428
19 changed files with 317 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/viewmodels/right_panel/RoomSummaryCardViewModel.tsx
View File

@@ -5,7 +5,7 @@ Please see LICENSE files in the repository root for full details.
*/
import { useEffect, useRef, useState } from "react";
import { EventType, type JoinRule, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { EventType, type HistoryVisibility, type JoinRule, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
@@ -49,6 +49,10 @@ export interface RoomSummaryCardState {
* The join rule of the room, used to display the correct badge and icon
*/
roomJoinRule: JoinRule;
/**
* The history visibility of the room, used to display the correct badge.
*/
historyVisibility: HistoryVisibility;
/**
* if it is a video room, it should not display export chat, polls, files, extensions
*/
@@ -158,8 +162,9 @@ export function useRoomSummaryCardViewModel(
const e2eStatus = roomContext.e2eStatus;
const isVideoRoom = calcIsVideoRoom(room);
const { roomJoinRule } = useRoomState(room, (state) => ({
const { historyVisibility, roomJoinRule } = useRoomState(room, (state) => ({
roomJoinRule: state.getJoinRule(),
historyVisibility: state.getHistoryVisibility(),
}));
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
const pinCount = usePinnedEvents(room).length;
@@ -254,6 +259,7 @@ export function useRoomSummaryCardViewModel(
isRoomEncrypted,
roomJoinRule,
e2eStatus,
historyVisibility,
isVideoRoom,
alias,
isFavorite,

20
src/components/views/right_panel/RoomSummaryCardView.tsx
View File

@@ -39,7 +39,7 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
import ErrorSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
import { JoinRule, type Room } from "matrix-js-sdk/src/matrix";
import { Box, Flex } from "@element-hq/web-shared-components";
import { Box, Flex, HistoryVisibilityBadge } from "@element-hq/web-shared-components";
import BaseCard from "./BaseCard.tsx";
import { _t } from "../../../languageHandler.tsx";
@@ -165,34 +165,42 @@ const RoomSummaryCardView: React.FC<IProps> = ({
{vm.alias}
</Text>
<Flex as="section" justify="center" gap="var(--cpd-space-2x)" className="mx_RoomSummaryCard_badges">
<Flex
as="section"
justify="center"
gap="var(--cpd-space-2x)"
wrap="wrap"
className="mx_RoomSummaryCard_badges"
>
{!vm.isDirectMessage && vm.roomJoinRule === JoinRule.Public && (
<Badge kind="blue">
<PublicIcon width="1em" color="var(--cpd-color-icon-info-primary)" />
<PublicIcon width="1rem" color="var(--cpd-color-icon-info-primary)" />
{_t("common|public_room")}
</Badge>
)}
{vm.isRoomEncrypted && vm.e2eStatus !== E2EStatus.Warning && (
<Badge kind="green">
<LockIcon width="1em" />
<LockIcon width="1rem" />
{_t("common|encrypted")}
</Badge>
)}
{!vm.isRoomEncrypted && (
<Badge kind="blue">
<LockOffIcon width="1em" color="var(--cpd-color-icon-info-primary)" />
<LockOffIcon width="1rem" color="var(--cpd-color-icon-info-primary)" />
{_t("common|unencrypted")}
</Badge>
)}
{vm.e2eStatus === E2EStatus.Warning && (
<Badge kind="red">
<ErrorSolidIcon width="1em" />
<ErrorSolidIcon width="1rem" />
{_t("common|not_trusted")}
</Badge>
)}
<HistoryVisibilityBadge historyVisibility={vm.historyVisibility} />
</Flex>
<RoomTopic room={room} />