FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix: workspace tab unread badge rendering and priority by jeanfbrito · Pull Request #3434 · RocketChat/Rocket.Chat.Electron · GitHub

/ Rocket.Chat.Electron Public

fix: workspace tab unread badge rendering and priority - #3434

Merged
jeanfbrito merged 2 commits into
masterfrom
fix/workspace-tab-unread-badge
Aug 5, 2026
ConversationCommits (2)ChecksFiles changed
Merged

fix: workspace tab unread badge rendering and priority#3434
jeanfbrito merged 2 commits into
masterfrom
fix/workspace-tab-unread-badge

Conversation

jeanfbrito commented Aug 4, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

What

Fixes several issues with the unread/mention badges on workspace tabs (sidebar and tab strip):

  • Single badge per tab. A logged-out server with unread messages rendered two badges side by side (gray dot + orange !). Tabs now render exactly one badge, by priority: logged-out warning → mention count → unread dot. A logged-out server's unread state is stale, so the login warning wins.
  • Unread dot redesign. The unread-without-mentions state now uses the same 16px ghost badge footprint as the mention count, with a drawn 2px circle instead of a text • glyph. The dot size matches the macOS dock badge bullet proportions (measured at ~1/8 of the badge diameter).
  • Badge text color fix. TabBadge overrode color with var(--rcx-color-font-white) — a token that does not exist in Fuselage or the app. The invalid declaration made badge content fall back to the tab's inherited text color, rendering the dot near-black on the dark strip. The override is removed so colors come from the Fuselage badge variant tokens. The same phantom token is fixed in ServerSwitcher.
  • Consistent badge placement. Floated badges on vertical tabs are centre-anchored to a fixed point, so the dot, the ! warning, and wide mention counts all land on the same spot regardless of width.

Why ghost and not the server's badge color

The web client's unread badge uses the level-1 badge token (#484C51 in dark theme), which is designed for the room list panel. On the darker tab strip it blends in. The ghost variant's background (stroke-dark) flips to a light gray in the dark palette, keeping badges legible there. This is now documented in a comment in styles.tsx.

Tests

  • New specs: logged-out + unread renders only the ! badge; numeric badge renders the count instead of the dot; all floated badge variants share the same anchor point.
  • Updated mention-count fixtures to logged-in servers (they relied on the old both-badges behavior).
  • yarn test on the TabBar and ServerSwitcher suites: 32 tests passing. tsc --noEmit and eslint clean.

Summary by CodeRabbit

Bug Fixes

  • Improved workspace tab badges to clearly distinguish logged-out warnings, mention counts, and unread activity.
  • Added consistent unread indicators for horizontal and vertical workspace tabs.
  • Ensured badge indicators remain properly centered across orientations and badge types.
  • Improved notification badge text contrast in the server switcher.

fix: workspace tab unread badge rendering and priority
2410e6e 
- Render exactly one badge per workspace tab, by priority: logged-out
  warning, then mention count, then unread dot. Previously a logged-out
  server with unread messages stacked two badges side by side.
- Show the unread-without-mentions state as the same 16px ghost badge as
  the mention count, with a drawn 2px dot instead of a text glyph, sized
  to match the macOS dock badge bullet.
- Remove the text-color override that referenced a nonexistent token
  (--rcx-color-font-white), which made badge content inherit the tab's
  dark text color instead of Fuselage's white. Same fix applied to the
  ServerSwitcher notification tint.
- Centre-anchor the floated badges on a fixed point so every variant
  (dot, warning, wide count) lands on the same spot on vertical tabs.
- Document why the ghost variant is used: its background flips to a
  light gray in the dark palette, keeping badges visible on the dark
  tab strip where the server's level-1 badge color would blend in.

coderabbitai Bot commented Aug 4, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info ⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 692d4bcc-ad62-4fc8-ace0-0874dc57190c

📥 Commits

Reviewing files that changed from the base of the PR and between 2410e6e and e98ba9f.

📒 Files selected for processing (3)
  • src/ui/components/TabBar/WorkspaceTab.tsx
  • src/ui/components/TabBar/index.spec.tsx
  • src/ui/components/TabBar/styles.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/ui/components/TabBar/index.spec.tsx
  • src/ui/components/TabBar/WorkspaceTab.tsx
  • src/ui/components/TabBar/styles.tsx
📜 Recent review details ⏰ Context from checks skipped due to timeout. (3)
  • GitHub Check: check (windows-latest)
  • GitHub Check: check (macos-latest)
  • GitHub Check: check (ubuntu-latest)

Walkthrough

Workspace tabs now render one prioritized badge for login warnings, mention counts, or unread state. Badge styling now centers all variants consistently. Tests cover badge priority, unread sizing, and vertical alignment. ServerSwitcher now uses the badge ghost color token fallback.

Changes

Workspace badge behavior

Layer / File(s) Summary
Prioritized workspace badge rendering
src/ui/components/TabBar/WorkspaceTab.tsx		 WorkspaceTab identifies unread state, updates tooltip handling, and renders one prioritized badge element for logged-out, numeric, or unread states.
Badge visuals and rendering validation
src/ui/components/TabBar/styles.tsx, src/ui/components/TabBar/index.spec.tsx, src/ui/components/TopBar/ServerSwitcher.tsx		 Badge styles add unread variants and centered anchors. Tests cover badge priority, unread sizing, and vertical alignment. ServerSwitcher uses the badge ghost color token fallback.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

Suggested labels: type: bug

🚥 Pre-merge checks | ✅ 5 ✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: fixing unread badge rendering and priority for workspace tabs.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (2)
  • F0F7-4780: Request failed with status code 401
  • LEVEL-1: Request failed with status code 401

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

fix: keep the plain 8px unread ball on horizontal tabs
e98ba9f 
The badge-with-drawn-dot unread indicator is meant for the sidebar
layout. Horizontal tabs go back to the plain 8px ball, picked by
orientation in WorkspaceTab.
jeanfbrito merged commit 13a1421 into master Aug 5, 2026
10 checks passed
jeanfbrito deleted the fix/workspace-tab-unread-badge branch August 5, 2026 17:57
jeanfbrito mentioned this pull request Aug 5, 2026
Merged
jeanfbrito added a commit that referenced this pull request Aug 5, 2026
Merge origin/master into chore/update
1483ac3 
Resolves conflicts with the merged tab/badge work:
- Shell: keep this PR's UpdateLabel in the TabBar/TopBar slots (replacing
  the UpdateDialog modal) and its Windows top-padding adjustment
- TabBar (WorkspaceTab, styles, spec) and ServerSwitcher: take master's
  side — the badge redesign and priority logic from #3434 plus its token
  fix supersede the pre-redesign versions this branch carried
jeanfbrito mentioned this pull request Aug 5, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

type: bug

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

Back | FazBrowse Home | New Git URL