Add reusable empty state for the right panel

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

res/css/_components.pcss

@@ -259,6 +259,7 @@
 @import "./views/polls/pollHistory/_PollHistory.pcss";
 @import "./views/polls/pollHistory/_PollHistoryList.pcss";
 @import "./views/right_panel/_BaseCard.pcss";
+@import "./views/right_panel/_EmptyState.pcss";
 @import "./views/right_panel/_EncryptionInfo.pcss";
 @import "./views/right_panel/_PinnedMessagesCard.pcss";
 @import "./views/right_panel/_RightPanelTabs.pcss";

res/css/views/right_panel/_EmptyState.pcss

@@ -0,0 +1,45 @@
+/*
+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.
+*/
+
+.mx_EmptyState {
+    height: 100%;
+    box-sizing: border-box;
+    padding: var(--cpd-space-4x);
+    text-align: center;
+
+    svg {
+        width: 56px;
+        height: 56px;
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: var(--cpd-space-3x);
+        background-color: $panel-actions;
+    }
+
+    &::before {
+        /* Bloom using magic numbers directly out of Figma */
+        content: "";
+        position: absolute;
+        z-index: -1;
+        width: 642px;
+        height: 775px;
+        right: -253.77px;
+        top: 0;
+        background: radial-gradient(49.95% 49.95% at 50% 50%, rgba(13, 189, 139, 0.12) 0%, rgba(18, 115, 235, 0) 100%);
+        transform: rotate(-89.69deg);
+        overflow: hidden;
+    }
+}

res/css/views/right_panel/_ThreadPanel.pcss

@@ -106,10 +106,17 @@ limitations under the License.
     }
 
     .mx_RoomView_messagePanel {
-        /* To avoid the rule from being applied to .mx_ThreadPanel_empty */
+        &.mx_RoomView_messageListWrapper {
+            position: initial;
+        }
+
         .mx_RoomView_messageListWrapper {
             width: calc(100% + 6px); /* 8px - 2px */
         }
+
+        .mx_RoomView_empty {
+            display: contents;
+        }
     }
 
     .mx_RoomView_MessageList {
@@ -168,72 +175,6 @@ limitations under the License.
     mask-image: url("$(res)/img/element-icons/link.svg");
 }
 
-.mx_ThreadPanel_empty {
-    border-radius: 8px;
-    background: $background;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    padding: 20px;
-    box-sizing: border-box; /* Include padding and border */
-    width: 100%;
-
-    h2 {
-        color: $primary-content;
-        font-weight: var(--cpd-font-weight-semibold);
-        font-size: $font-18px;
-        margin-top: 24px;
-        margin-bottom: 10px;
-    }
-
-    p {
-        font-size: $font-15px;
-        color: $secondary-content;
-        margin: 10px 0;
-    }
-
-    button {
-        border: none;
-        background: none;
-        color: $accent;
-        font-size: $font-15px;
-
-        &:hover,
-        &:active {
-            text-decoration: underline;
-            cursor: pointer;
-        }
-    }
-
-    .mx_ThreadPanel_empty_tip {
-        font-size: $font-12px;
-        line-height: $font-15px;
-
-        > b {
-            font-weight: var(--cpd-font-weight-semibold);
-        }
-    }
-}
-
-.mx_ThreadPanel_largeIcon {
-    width: 28px;
-    height: 28px;
-    padding: 18px;
-    background: $system;
-    border-radius: 50%;
-
-    &::after {
-        @mixin ThreadSummaryIcon;
-        width: inherit;
-        height: inherit;
-    }
-}
-
 .mx_ContextualMenu_wrapper {
     .mx_ThreadPanel_Header_FilterOptionItem {
         display: flex;

src/components/structures/ThreadPanel.tsx

@@ -19,6 +19,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { EventTimelineSet, Room, Thread } from "matrix-js-sdk/src/matrix";
 import { IconButton, Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads.svg";
 
 import { Icon as MarkAllThreadsReadIcon } from "../../../res/img/element-icons/check-all.svg";
 import BaseCard from "../views/right_panel/BaseCard";
@@ -37,6 +38,7 @@ import { ButtonEvent } from "../views/elements/AccessibleButton";
 import Spinner from "../views/elements/Spinner";
 import Heading from "../views/typography/Heading";
 import { clearRoomNotification } from "../../utils/notifications";
+import EmptyState from "../views/right_panel/EmptyState";
 
 interface IProps {
     roomId: string;
@@ -73,8 +75,7 @@ export const ThreadPanelHeaderFilterOptionItem: React.FC<
 export const ThreadPanelHeader: React.FC<{
     filterOption: ThreadFilterType;
     setFilterOption: (filterOption: ThreadFilterType) => void;
-    empty: boolean;
-}> = ({ filterOption, setFilterOption, empty }) => {
+}> = ({ filterOption, setFilterOption }) => {
     const mxClient = useMatrixClientContext();
     const roomContext = useRoomContext();
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
@@ -140,86 +141,24 @@ export const ThreadPanelHeader: React.FC<{
             <Heading size="4" className="mx_BaseCard_header_title_heading">
                 {_t("common|threads")}
             </Heading>
-            {!empty && (
-                <>
-                    <Tooltip label={_t("threads|mark_all_read")}>
-                        <IconButton
-                            onClick={onMarkAllThreadsReadClick}
-                            aria-label={_t("threads|mark_all_read")}
-                            size="24px"
-                        >
-                            <MarkAllThreadsReadIcon />
-                        </IconButton>
-                    </Tooltip>
-                    <div className="mx_ThreadPanel_vertical_separator" />
-                    <ContextMenuButton
-                        className="mx_ThreadPanel_dropdown"
-                        ref={button}
-                        isExpanded={menuDisplayed}
-                        onClick={(ev: ButtonEvent) => {
-                            openMenu();
-                            PosthogTrackers.trackInteraction("WebRightPanelThreadPanelFilterDropdown", ev);
-                        }}
-                    >
-                        {`${_t("threads|show_thread_filter")} ${value?.label}`}
-                    </ContextMenuButton>
-                    {contextMenu}
-                </>
-            )}
-        </div>
-    );
-};
-
-interface EmptyThreadIProps {
-    hasThreads: boolean;
-    filterOption: ThreadFilterType;
-    showAllThreadsCallback: () => void;
-}
-
-const EmptyThread: React.FC<EmptyThreadIProps> = ({ hasThreads, filterOption, showAllThreadsCallback }) => {
-    let body: JSX.Element;
-    if (hasThreads) {
-        body = (
-            <>
-                <p>
-                    {_t("threads|empty_has_threads_tip", {
-                        replyInThread: _t("action|reply_in_thread"),
-                    })}
-                </p>
-                <p>
-                    {/* Always display that paragraph to prevent layout shift when hiding the button */}
-                    {filterOption === ThreadFilterType.My ? (
-                        <button onClick={showAllThreadsCallback}>{_t("threads|show_all_threads")}</button>
-                    ) : (
-                        <>&nbsp;</>
-                    )}
-                </p>
-            </>
-        );
-    } else {
-        body = (
-            <>
-                <p>{_t("threads|empty_explainer")}</p>
-                <p className="mx_ThreadPanel_empty_tip">
-                    {_t(
-                        "threads|empty_tip",
-                        {
-                            replyInThread: _t("action|reply_in_thread"),
-                        },
-                        {
-                            b: (sub) => <b>{sub}</b>,
-                        },
-                    )}
-                </p>
-            </>
-        );
-    }
-
-    return (
-        <div className="mx_ThreadPanel_empty">
-            <div className="mx_ThreadPanel_largeIcon" />
-            <h2>{_t("threads|empty_heading")}</h2>
-            {body}
+            <Tooltip label={_t("threads|mark_all_read")}>
+                <IconButton onClick={onMarkAllThreadsReadClick} aria-label={_t("threads|mark_all_read")} size="24px">
+                    <MarkAllThreadsReadIcon />
+                </IconButton>
+            </Tooltip>
+            <div className="mx_ThreadPanel_vertical_separator" />
+            <ContextMenuButton
+                className="mx_ThreadPanel_dropdown"
+                ref={button}
+                isExpanded={menuDisplayed}
+                onClick={(ev: ButtonEvent) => {
+                    openMenu();
+                    PosthogTrackers.trackInteraction("WebRightPanelThreadPanelFilterDropdown", ev);
+                }}
+            >
+                {`${_t("threads|show_thread_filter")} ${value?.label}`}
+            </ContextMenuButton>
+            {contextMenu}
         </div>
     );
 };
@@ -268,11 +207,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
             <BaseCard
                 hideHeaderButtons
                 header={
-                    <ThreadPanelHeader
-                        filterOption={filterOption}
-                        setFilterOption={setFilterOption}
-                        empty={!hasThreads}
-                    />
+                    hasThreads && <ThreadPanelHeader filterOption={filterOption} setFilterOption={setFilterOption} />
                 }
                 id="thread-panel"
                 className="mx_ThreadPanel"
@@ -295,10 +230,12 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                         timelineSet={timelineSet}
                         showUrlPreview={false} // No URL previews at the threads list level
                         empty={
-                            <EmptyThread
-                                hasThreads={hasThreads}
-                                filterOption={filterOption}
-                                showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
+                            <EmptyState
+                                Icon={ThreadsIcon}
+                                title={_t("threads|empty_title")}
+                                description={_t("threads|empty_description", {
+                                    replyInThread: _t("action|reply_in_thread"),
+                                })}
                             />
                         }
                         alwaysShowTimestamps={true}

src/components/views/right_panel/EmptyState.tsx

@@ -0,0 +1,42 @@
+/*
+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, { ComponentType } from "react";
+import { Text } from "@vector-im/compound-web";
+
+import { Flex } from "../../utils/Flex";
+
+interface Props {
+    Icon: ComponentType<React.SVGAttributes<SVGElement>>;
+    title: string;
+    description: string;
+}
+
+const EmptyState: React.FC<Props> = ({ Icon, title, description }) => {
+    return (
+        <Flex className="mx_EmptyState" direction="column" gap="var(--cpd-space-4x)" align="center" justify="center">
+            <Icon width="32px" height="32px" />
+            <Text size="lg" weight="semibold">
+                {title}
+            </Text>
+            <Text size="md" weight="regular">
+                {description}
+            </Text>
+        </Flex>
+    );
+};
+
+export default EmptyState;

src/i18n/strings/en_EN.json

@@ -3193,16 +3193,13 @@
             "one": "%(count)s reply",
             "other": "%(count)s replies"
         },
-        "empty_explainer": "Threads help keep your conversations on-topic and easy to track.",
-        "empty_has_threads_tip": "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.",
-        "empty_heading": "Keep discussions organised with threads",
-        "empty_tip": "<b>Tip:</b> Use “%(replyInThread)s” when hovering over a message.",
+        "empty_description": "Use “%(replyInThread)s” when hovering over a message.",
+        "empty_title": "Threads help keep your conversations on-topic and easy to track.",
         "error_start_thread_existing_relation": "Can't create a thread from an event with an existing relation",
         "mark_all_read": "Mark all as read",
         "my_threads": "My threads",
         "my_threads_description": "Shows all threads you've participated in",
         "open_thread": "Open thread",
-        "show_all_threads": "Show all threads",
         "show_thread_filter": "Show:"
     },
     "threads_activity_centre": {