Sign up
View stargazersSign up

Fix hidden toast content for front-most filtered stack item#55

merged2
main
codething/233423f9
openedFeb 16, 2026byJJulius Marminge
3 files changed
View on GitHubTwo-way sync enabledPR last imported 8d ago

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).
Open with Devin

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.

Added 1 commit

  • Fix collapsed toast content visibility in filtered stacks0beaf09
CcoderabbitaiBotFeb 16, 2026
Synced from GitHub

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 nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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.

MmacroscopeappBotFeb 16, 2026
Synced from GitHub

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.

Ggreptile-apps[bot]Feb 16, 2026
Synced from GitHub

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

FilenameOverview
apps/web/src/components/ui/toast.logic.tsNew 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.tsNew 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.tsxComputes 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

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

Last reviewed commit: 0beaf09

Added 1 commit

  • Fix top-right toast enter and exit transforms93edf34