From 58ed8ab2e7163d86d54c785bafcf25ff3ac72ac5 Mon Sep 17 00:00:00 2001 From: Thomas Petersen Date: Thu, 25 Jun 2026 22:49:59 -0400 Subject: [PATCH] Fix home inbox header blur Co-authored-by: Thomas Petersen Signed-off-by: Thomas Petersen --- desktop/src/features/home/ui/HomeView.tsx | 7 +++- .../src/features/home/ui/InboxDetailPane.tsx | 7 +++- .../src/features/home/ui/InboxListPane.tsx | 7 +++- desktop/src/shared/layout/chromeLayout.ts | 12 +++++- .../e2e/home-collapsed-top-chrome.spec.ts | 41 +++++++++++++++++++ 5 files changed, 69 insertions(+), 5 deletions(-) diff --git a/desktop/src/features/home/ui/HomeView.tsx b/desktop/src/features/home/ui/HomeView.tsx index cf2974c85..fcd13ddc1 100644 --- a/desktop/src/features/home/ui/HomeView.tsx +++ b/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({
- +
- +
diff --git a/desktop/src/shared/layout/chromeLayout.ts b/desktop/src/shared/layout/chromeLayout.ts index 82ebdbb4e..2da71eba9 100644 --- a/desktop/src/shared/layout/chromeLayout.ts +++ b/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-['']", diff --git a/desktop/tests/e2e/home-collapsed-top-chrome.spec.ts b/desktop/tests/e2e/home-collapsed-top-chrome.spec.ts index e6b83cc42..85119f1f3 100644 --- a/desktop/tests/e2e/home-collapsed-top-chrome.spec.ts +++ b/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 ({