Add caption for empty TAC

res/css/structures/_ThreadsActivityCentre.pcss

@@ -66,3 +66,9 @@
         }
     }
 }
+
+.mx_ThreadsActivityCentre_emptyCaption {
+    padding-left: 16px;
+    padding-right: 16px;
+    font-size: 13px;
+}

src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx

@@ -77,6 +77,11 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
                         onClick={() => setOpen(false)}
                     />
                 ))}
+                {roomsAndNotifications.rooms.length === 0 && (
+                    <div className="mx_ThreadsActivityCentre_emptyCaption">
+                        {_t("threads_activity_centre|no_rooms_with_unreads_threads")}
+                    </div>
+                )}
             </div>
         </Menu>
     );

src/i18n/strings/en_EN.json

@@ -3162,7 +3162,8 @@
         "unable_to_decrypt": "Unable to decrypt message"
     },
     "threads_activity_centre": {
-        "header": "Threads activity"
+        "header": "Threads activity",
+        "no_rooms_with_unreads_threads": "You don't have rooms with unread threads yet."
     },
     "time": {
         "about_day_ago": "about a day ago",

test/components/views/spaces/ThreadsActivityCentre-test.tsx

@@ -155,4 +155,22 @@ describe("ThreadsActivityCentre", () => {
 
         expect(screen.getByRole("menu")).toMatchSnapshot();
     });
+
+    it("should display a caption when no threads are unread", async () => {
+        cli.getVisibleRooms = jest.fn().mockReturnValue([]);
+        renderTAC();
+        await userEvent.click(getTACButton());
+
+        expect(screen.getByRole("menu").getElementsByClassName("mx_ThreadsActivityCentre_emptyCaption").length).toEqual(
+            1,
+        );
+    });
+
+    it("should match snapshot when empty", async () => {
+        cli.getVisibleRooms = jest.fn().mockReturnValue([]);
+        renderTAC();
+        await userEvent.click(getTACButton());
+
+        expect(screen.getByRole("menu")).toMatchSnapshot();
+    });
 });

test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap

@@ -175,3 +175,37 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
   </div>
 </div>
 `;
+
+exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
+<div
+  aria-labelledby="radix-20"
+  aria-orientation="vertical"
+  class="_menu_1x5h1_17"
+  data-align="end"
+  data-orientation="vertical"
+  data-radix-menu-content=""
+  data-side="right"
+  data-state="open"
+  dir="ltr"
+  id="radix-21"
+  role="menu"
+  style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
+  tabindex="-1"
+>
+  <h3
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _title_1x5h1_83"
+    id=":r7:"
+  >
+    Threads activity
+  </h3>
+  <div
+    class="mx_ThreadsActivity_rows"
+  >
+    <div
+      class="mx_ThreadsActivityCentre_emptyCaption"
+    >
+      You don't have rooms with unread threads yet.
+    </div>
+  </div>
+</div>
+`;