fix(ui): remove duplicate activity header

BunsDev · BunsDev · commit 0aa9aa421151 · 2026-05-24T23:07:51.000-05:00
diff --git a/ui/src/styles/activity.css b/ui/src/styles/activity.css
@@ -1,34 +1,11 @@
 .activity-page {
   display: grid;
-  grid-template-rows: auto auto minmax(260px, 1fr);
+  grid-template-rows: auto minmax(260px, 1fr);
   align-content: start;
   gap: 16px;
   min-height: min(680px, calc(100vh - 180px));
 }
 
-.activity-page__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.activity-page__title {
-  color: var(--text-strong);
-  font-size: var(--control-ui-text-lg);
-  font-weight: 650;
-}
-
-.activity-page__subtitle,
-.activity-page__count {
-  color: var(--muted);
-  font-size: var(--control-ui-text-sm);
-}
-
-.activity-page__count {
-  white-space: nowrap;
-}
-
 .activity-toolbar {
   display: flex;
   align-items: end;
@@ -37,6 +14,15 @@
   padding-bottom: 2px;
 }
 
+.activity-toolbar__count {
+  flex: 0 0 auto;
+  align-self: center;
+  margin-left: auto;
+  color: var(--muted);
+  font-size: var(--control-ui-text-sm);
+  white-space: nowrap;
+}
+
 .activity-field {
   display: grid;
   gap: 5px;
@@ -277,15 +263,16 @@
     min-height: calc(100vh - 150px);
   }
 
-  .activity-page__header {
-    display: grid;
-  }
-
-  .activity-page__count,
+  .activity-toolbar__count,
   .activity-entry__meta {
     white-space: normal;
   }
 
+  .activity-toolbar__count {
+    flex-basis: 100%;
+    margin-left: 0;
+  }
+
   .activity-entry__summary {
     grid-template-columns: 18px minmax(0, 1fr);
     gap: 8px;
diff --git a/ui/src/ui/views/activity.test.ts b/ui/src/ui/views/activity.test.ts
@@ -81,6 +81,18 @@ describe("renderActivity", () => {
     expect(container.querySelector(".activity-entry")?.getAttribute("role")).toBe("listitem");
   });
 
+  it("lets the route shell own the page heading", async () => {
+    await i18n.setLocale("en");
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    render(renderActivity(createProps()), container);
+
+    expect(container.querySelector(".activity-page__title")).toBeNull();
+    expect(container.querySelector(".activity-page__subtitle")).toBeNull();
+    expect(container.querySelector(".activity-toolbar__count")?.textContent?.trim()).toBe("1 of 1");
+  });
+
   it("normalizes rounded minute durations that would otherwise show 60 seconds", async () => {
     await i18n.setLocale("en");
     const container = document.createElement("div");
diff --git a/ui/src/ui/views/activity.ts b/ui/src/ui/views/activity.ts
@@ -185,20 +185,7 @@ export function renderActivity(props: ActivityProps) {
     STATUS_ORDER.some((status) => !props.statusFilters[status]);
 
   return html`
-    <section class="activity-page" aria-labelledby="activity-title">
-      <div class="activity-page__header">
-        <div>
-          <div id="activity-title" class="activity-page__title">${t("activity.title")}</div>
-          <div class="activity-page__subtitle">${t("activity.subtitle")}</div>
-        </div>
-        <div class="activity-page__count">
-          ${t("activity.visibleCount", {
-            visible: String(filtered.length),
-            total: String(props.entries.length),
-          })}
-        </div>
-      </div>
-
+    <section class="activity-page" aria-label=${t("activity.title")}>
       <div class="activity-toolbar" aria-label=${t("activity.filtersLabel")}>
         <label class="activity-field activity-field--search">
           <span>${t("activity.search")}</span>
@@ -259,6 +246,12 @@ export function renderActivity(props: ActivityProps) {
             ${t("activity.clear")}
           </button>
         </div>
+        <div class="activity-toolbar__count" aria-live="polite">
+          ${t("activity.visibleCount", {
+            visible: String(filtered.length),
+            total: String(props.entries.length),
+          })}
+        </div>
       </div>
 
       <div
