Implement empty design list (#7115)

res/css/views/right_panel/_ThreadPanel.scss

@@ -290,3 +290,61 @@ limitations under the License.
 .mx_ThreadPanel_copyLinkToThread::before {
     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: 48px;
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    padding: 20px;
+
+    h2 {
+        color: $primary-content;
+        font-weight: 600;
+        font-size: $font-18px;
+    }
+
+    p {
+        font-size: $font-15px;
+        color: $secondary-content;
+    }
+
+    button {
+        border: none;
+        background: none;
+        color: $accent;
+
+        &:hover,
+        &:active {
+            text-decoration: underline;
+            cursor: pointer;
+        }
+    }
+}
+
+.mx_ThreadPanel_largeIcon {
+    width: 28px;
+    height: 28px;
+    padding: 18px;
+    background: $system;
+    border-radius: 50%;
+
+    &::after {
+        content: "";
+        width: inherit;
+        height: inherit;
+        mask-image: url('$(res)/img/element-icons/thread-summary.svg');
+        mask-position: center;
+        display: inline-block;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        background-color: $secondary-content;
+    }
+}

src/components/structures/ThreadPanel.tsx

@@ -180,6 +180,30 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption }: {
     </div>;
 };
 
+interface EmptyThreadIProps {
+    filterOption: ThreadFilterType;
+    showAllThreadsCallback: () => void;
+}
+
+const EmptyThread: React.FC<EmptyThreadIProps> = ({ filterOption, showAllThreadsCallback }) => {
+    return <aside className="mx_ThreadPanel_empty">
+        <div className="mx_ThreadPanel_largeIcon" />
+        <h2>{ _t("Keep discussions organised with threads") }</h2>
+        <p>{ _t("Threads help you keep conversations on-topic and easily"
+              + "track them over time. Create the first one by using the"
+              + "\"Reply in thread\" button on a message.") }
+        </p>
+        <p>
+            { /* Always display that paragraph to prevent layout shift
+                When hiding the button */ }
+            { filterOption === ThreadFilterType.My
+                ? <button onClick={showAllThreadsCallback}>{ _t("Show all threads") }</button>
+                : <>&nbsp;</>
+            }
+        </p>
+    </aside>;
+};
+
 const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) => {
     const mxClient = useContext(MatrixClientContext);
     const roomContext = useContext(RoomContext);
@@ -216,7 +240,10 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                     sendReadReceiptOnLoad={false} // No RR support in thread's MVP
                     timelineSet={filteredTimelineSet}
                     showUrlPreview={true}
-                    empty={<div>empty</div>}
+                    empty={<EmptyThread
+                        filterOption={filterOption}
+                        showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
+                    />}
                     alwaysShowTimestamps={true}
                     layout={Layout.Group}
                     hideThreadedMessages={false}

src/i18n/strings/en_EN.json

@@ -3023,6 +3023,9 @@
     "All threads": "All threads",
     "Shows all threads from current room": "Shows all threads from current room",
     "Show:": "Show:",
+    "Keep discussions organised with threads": "Keep discussions organised with threads",
+    "Threads help you keep conversations on-topic and easilytrack them over time. Create the first one by using the\"Reply in thread\" button on a message.": "Threads help you keep conversations on-topic and easilytrack them over time. Create the first one by using the\"Reply in thread\" button on a message.",
+    "Show all threads": "Show all threads",
     "Thread": "Thread",
     "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
     "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",