Fix home inbox header blur

Co-authored-by: Thomas Petersen <thomasp@squareup.com>
Signed-off-by: Thomas Petersen <thomasp@squareup.com>

desktop/src/features/home/ui/HomeView.tsx

@@ -47,7 +47,10 @@ import { useRemindLater } from "@/features/reminders/ui/RemindMeLaterProvider";
 import { deleteMessage, sendChannelMessage } from "@/shared/api/tauri";
 import type { HomeFeedResponse } from "@/shared/api/types";
 import { KIND_REACTION } from "@/shared/constants/kinds";
-import { topChromeInset } from "@/shared/layout/chromeLayout";
+import {
+  topChromeInset,
+  topChromeInsetHeaderBackdropClassName,
+} from "@/shared/layout/chromeLayout";
 import { cn } from "@/shared/lib/cn";
 import { resolveMentionNames } from "@/shared/lib/resolveMentionNames";
 import { useElementWidth } from "@/shared/hooks/use-mobile";
@@ -435,6 +438,8 @@ export function HomeView({
       <div
         className={cn(
           "relative grid min-h-0 w-full flex-1",
+          "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-30 before:h-[3.25rem] before:content-['']",
+          topChromeInsetHeaderBackdropClassName,
           isSinglePanelChannelManagementView
             ? "grid-cols-1"
             : showListPane && showDetailPane && isChannelManagementOpen

desktop/src/features/home/ui/InboxDetailPane.tsx

@@ -16,6 +16,7 @@ import type { TimelineMessage } from "@/features/messages/types";
 import { MessageComposer } from "@/features/messages/ui/MessageComposer";
 import { UpdateIndicator } from "@/features/settings/UpdateIndicator";
 import type { Channel } from "@/shared/api/types";
+import { topChromeInsetHeaderTransparentClassName } from "@/shared/layout/chromeLayout";
 import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
@@ -231,7 +232,11 @@ export function InboxDetailPane({
       ref={detailPaneRef}
     >
       <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
-        <TopChromeInsetHeader flush>
+        <TopChromeInsetHeader
+          className={topChromeInsetHeaderTransparentClassName}
+          data-home-inbox-header=""
+          flush
+        >
           <div className="px-5 py-2">
             <div className="flex min-h-9 min-w-0 items-center justify-between gap-3">
               <div

desktop/src/features/home/ui/InboxListPane.tsx

@@ -14,6 +14,7 @@ import {
   type InboxTypeLabel,
 } from "@/features/home/lib/inbox";
 import { RemindersPanel } from "@/features/reminders/ui/RemindersPanel";
+import { topChromeInsetHeaderTransparentClassName } from "@/shared/layout/chromeLayout";
 import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
 import { cn } from "@/shared/lib/cn";
 import {
@@ -324,7 +325,11 @@ export function InboxListPane({
         showRightDivider && INBOX_PANE_RIGHT_DIVIDER_CLASS,
       )}
     >
-      <TopChromeInsetHeader flush>
+      <TopChromeInsetHeader
+        className={topChromeInsetHeaderTransparentClassName}
+        data-home-inbox-header=""
+        flush
+      >
         <div className="px-5 py-2">
           <div className="flex min-h-9 w-full min-w-0 items-center justify-between gap-3">
             <Popover>

desktop/src/shared/layout/chromeLayout.ts

@@ -17,6 +17,15 @@ export const channelContentTopPaddingMeasurement = {
 } as const;
 
 /** Tailwind class fragments for content below the in-flow global top chrome. */
+export const topChromeInsetHeaderChromeClassName =
+  "bg-background/75 backdrop-blur-md supports-backdrop-filter:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/35";
+
+export const topChromeInsetHeaderBackdropClassName =
+  "before:bg-background/75 before:backdrop-blur-md supports-backdrop-filter:before:bg-background/65 dark:before:bg-background/45 dark:before:backdrop-blur-xl dark:supports-backdrop-filter:before:bg-background/35";
+
+export const topChromeInsetHeaderTransparentClassName =
+  "bg-transparent backdrop-blur-none supports-backdrop-filter:bg-transparent dark:bg-transparent dark:backdrop-blur-none dark:supports-backdrop-filter:bg-transparent";
+
 export const topChromeInset = {
   /** Absolute/fixed top offset inside the content row. */
   top: "top-0",
@@ -28,8 +37,7 @@ export const topChromeInset = {
   divider:
     "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/35 before:content-['']",
   /** Shared header backdrop and bottom border below the inset row. */
-  headerBase:
-    "relative z-40 shrink-0 bg-background/75 backdrop-blur-md supports-backdrop-filter:bg-background/65 dark:bg-background/45 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/35",
+  headerBase: `relative z-40 shrink-0 ${topChromeInsetHeaderChromeClassName}`,
   /** Vertical pane divider starting at the top of the content row. */
   verticalDivider:
     "after:pointer-events-none after:absolute after:bottom-0 after:right-0 after:top-0 after:z-40 after:w-px after:bg-border/35 after:content-['']",

desktop/tests/e2e/home-collapsed-top-chrome.spec.ts

@@ -4,6 +4,47 @@ import { waitForAnimations } from "../helpers/animations";
 import { installMockBridge } from "../helpers/bridge";
 
 test.describe("home inbox header collapsed-sidebar chrome clearance", () => {
+  test("inbox uses one continuous header backdrop across list and detail panes", async ({
+    page,
+  }) => {
+    await installMockBridge(page);
+    await page.goto("/");
+    await expect(page.getByTestId("home-inbox-list")).toBeVisible();
+    await expect(page.getByTestId("home-inbox-detail")).toBeVisible();
+
+    const inboxBackdrop = await page
+      .getByTestId("home-inbox")
+      .evaluate((el) => {
+        const style = window.getComputedStyle(el, "::before");
+        return {
+          backdropFilter: style.backdropFilter || style.webkitBackdropFilter,
+          backgroundColor: style.backgroundColor,
+          height: style.height,
+        };
+      });
+    expect(inboxBackdrop.backdropFilter).toContain("blur");
+    expect(inboxBackdrop.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+    expect(Number.parseFloat(inboxBackdrop.height)).toBeGreaterThan(0);
+
+    const paneHeaderStyles = await page
+      .getByTestId("home-inbox")
+      .locator("[data-home-inbox-header]")
+      .evaluateAll((headers) =>
+        headers.map((header) => {
+          const style = window.getComputedStyle(header);
+          return {
+            backdropFilter: style.backdropFilter || style.webkitBackdropFilter,
+            backgroundColor: style.backgroundColor,
+          };
+        }),
+      );
+    expect(paneHeaderStyles).toHaveLength(2);
+    for (const style of paneHeaderStyles) {
+      expect(style.backdropFilter).toBe("none");
+      expect(style.backgroundColor).toBe("rgba(0, 0, 0, 0)");
+    }
+  });
+
   test.use({ viewport: { width: 1280, height: 720 } });
 
   test("inbox options clear the macOS traffic-light region when sidebar is collapsed", async ({