Fix hidden toast content for front-most filtered stack item

[juliusmarminge]

Summary

• Fixes toast content visibility when thread filtering collapses a toast stack.
• Computes visibleToasts first and bases collapsed-content hiding on visible stack position, not Base UI data-behind state.
• Keeps the front-most visible toast readable while still hiding non-front toasts until expanded.
• Extracts the visibility rule into shouldHideCollapsedToastContent for clearer behavior and easier maintenance.
• Adds unit tests for the new toast visibility logic.

Testing

• Added unit tests in apps/web/src/components/ui/toast.logic.test.ts covering:
• single visible toast remains readable
• front-most toast in a multi-toast visible stack remains readable
• non-front toasts are hidden in collapsed state
• Project lint: Not run (not executed in this context).
• Test suite execution: Not run (tests were added, but not executed in this context).

---

Summary by CodeRabbit

• New Features

  • Toast notifications now collapse when multiple are stacked: only the frontmost toast remains readable until the stack is expanded. Per-toast layout has been streamlined for a more compact, consistent presentation while preserving auto-dismiss behavior.

• Tests

  • Added tests covering collapse behavior: single toast, visible stacks, and content visibility in stacked toasts.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

Walkthrough

Adds shouldHideCollapsedToastContent to decide collapse visibility by index/count; refactors toast rendering to compute visibleToasts (filtered by active thread), iterate with a visible index, and apply conditional hiding and streamlined per-toast layout.

Changes

Cohort / File(s)	Summary
Toast logic & tests apps/web/src/components/ui/toast.logic.ts, apps/web/src/components/ui/toast.logic.test.ts	Adds exported shouldHideCollapsedToastContent(visibleToastIndex, visibleToastCount) and three unit tests covering single toast, front-most in a stack, and non-front hidden toasts.
Toast component refactor apps/web/src/components/ui/toast.tsx	Refactors rendering to build visibleToasts (filters by active thread), maps with visibleIndex, computes hideCollapsedContent via the new logic, and restructures per-toast content and class/data attributes; preserves auto-dismiss behavior.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix hidden toast content for front-most filtered stack item' directly addresses the main change: ensuring the front-most visible toast in a filtered/collapsed stack remains readable while hiding non-front toasts.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codething/233423f9

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[macroscopeapp]

Hide collapsed content for non-front toasts in stacks while keeping the front-most toast readable in ui.toast.Toasts

Add ui.toast.logic.shouldHideCollapsedToastContent and apply it in ui.toast.Toasts to hide content (opacity 0, pointer-events none) for toasts with visibleToastIndex > 0 when more than 1 toast is visible. Include a Vitest suite covering single visible toast, front-most toast, and non-front toast cases in toast.logic.test.ts.

📍Where to Start

Start with shouldHideCollapsedToastContent in toast.logic.ts, then see its usage in toast.tsx.

---

Macroscope summarized 93edf34.

[greptile-apps]

Greptile Summary

Fixes a bug where thread filtering caused the front-most visible toast's content to be hidden in collapsed stacks. The root cause was that Base UI's data-behind attribute is based on the full toast list order, not the filtered visible subset, so when other-thread toasts are filtered out, the front-most visible toast could be incorrectly marked as "behind."

• Extracts visibleToasts (filtered by active thread) before rendering, and uses the visible-list index to determine content hiding instead of relying on data-behind.
• Adds a pure utility function shouldHideCollapsedToastContent in a separate module for testability.
• Includes unit tests for the new visibility logic covering single-toast, front-most, and behind-toast scenarios.

Confidence Score: 4/5

• This PR is safe to merge — it fixes a clear visibility bug with a straightforward, well-tested approach.
• The logic change is simple and correctly addresses the root cause. The extracted function is pure and well-tested. The CSS class changes are a direct replacement of data-behind selectors with computed visibility. Minor concern is that Base UI's --toast-index CSS variable (used for positioning/z-index) may diverge from the visible index, but this only affects positioning of hidden toasts and doesn't cause visible regressions since filtered-out toasts aren't rendered at all.
• apps/web/src/components/ui/toast.tsx — the interplay between Base UI's internal --toast-index and the computed visibleIndex warrants manual testing with filtered multi-thread toast scenarios.

Important Files Changed

Filename	Overview
apps/web/src/components/ui/toast.logic.ts	New pure function shouldHideCollapsedToastContent extracted from toast visibility logic. Correctly determines visibility based on filtered visible index rather than Base UI's data-behind state.
apps/web/src/components/ui/toast.logic.test.ts	New unit tests covering the core cases for shouldHideCollapsedToastContent. Covers single toast, front-most in stack, and non-front toast scenarios.
apps/web/src/components/ui/toast.tsx	Computes visibleToasts array before rendering. Replaces Base UI data-behind CSS selectors with computed hideCollapsedContent boolean based on visible stack position. Correctly keeps front-most visible toast readable.

Flowchart

flowchart TD
    A[All toasts from Base UI] -->|filter by activeThreadId| B[visibleToasts array]
    B --> C{Iterate with visibleIndex}
    C --> D[visibleIndex === 0]
    C --> E[visibleIndex > 0]
    D --> F["shouldHideCollapsedToastContent = false\n(front toast content visible)"]
    E --> G["shouldHideCollapsedToastContent = true\n(content hidden unless expanded)"]
    F --> H[Toast.Content rendered with opacity:100]
    G --> I["Toast.Content rendered with\nnot-data-expanded:opacity-0"]
    H --> J[User sees front toast content]
    I -->|User hovers/expands stack| K[data-expanded:opacity-100 overrides]

Loading

_{Last reviewed commit: 0beaf09}