Repository navigation
feat(ui): tag rendering + overflow, label typography and theme-token consistency sweep - #122
Merged
Merged
Conversation
Sort filter chips by usage, cap them behind a +N pill with a Show-all toggle, move note-row tags below the date at xs size, shrink the editor tag bar, cap project headers/pinned notes, and add +N overflow to mobile rows. Overflow tooltips preview the first few names instead of dumping all.
- Generalize TagOverflow into a shared OverflowPill and use it for automation-run artifacts, task-flow previews, usage-by-model and recent agent sessions so capped lists always reveal hidden items. - Add MicroLabel/SectionLabel components and normalize the ad-hoc micro font sizes; convert remaining pixel-based font sizes to the rem scale. - Replace stray theme-token violations (green-400, hex fallbacks, rgba in dashboard template) and fix the onboarding provider card's undefined --purple-500 token.
|
Warning Review limit reached
Next review available in: 16 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe PR adds shared tag overflow and label components, applies capped rendering across web and mobile views, standardizes theme colors, and converts selected typography values to shared rem or utility styles. ChangesUI standardization
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant View
participant TagUtils
participant OverflowPill
View->>TagUtils: Sort and cap tags
TagUtils-->>View: Return visible and hidden tags
View->>OverflowPill: Pass hidden count and names
OverflowPill-->>View: Render overflow indicator
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@mobile/src/components/TagChips.tsx`:
- Around line 10-16: Normalize max to a non-negative integer before calculating
capped, shown, and overflow in TagChips; use the normalized value consistently
so fractional or invalid inputs cannot produce non-integer overflow labels.
In `@src/components/kanban/card.tsx`:
- Line 165: Update the tag preparation in the card component so tag IDs are
resolved and unresolved entries filtered before applying the visible-tag cap.
Derive the visible and extra tag arrays from the resolved tags, then calculate
the overflow count and names from the extra array so unresolved IDs cannot
produce empty tooltip entries or hide later valid tags.
In `@src/components/notes/notes-view.tsx`:
- Around line 325-334: Update hiddenProjectTags to derive hidden tags by
excluding the identifiers present in shownProjectTags, rather than slicing
sortedProjectTags by shownProjectTags.length. Preserve the existing
shownProjectTags behavior, including retaining an active tag appended from
outside the initial cap, so the active tag is never reported as hidden.
In `@src/components/ui/overflow-pill.tsx`:
- Around line 37-46: Update the overflow pill component to render a native
button with type="button" when onClick is provided, while preserving the
non-interactive span variant. Remove the manual role, tabIndex, and onKeyDown
handling, and keep the existing click styling and className behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: ec9770ae-f92b-4ee8-b5d6-f7e8e46e5da9
📒 Files selected for processing (39)
changelogs/v2.6.11.mdmobile/src/components/TagChips.tsxmobile/src/components/calendar/DayDetailRow.tsxmobile/src/screens/project/NoteRowItem.tsxsrc/components/agent/AgentEmptyState.tsxsrc/components/agent/ArchitectureSidebar.tsxsrc/components/agent/ArchitectureView.tsxsrc/components/agent/GitView.tsxsrc/components/agent/PlanApprovalCard.tsxsrc/components/agent/git/FileSection.tsxsrc/components/calendar/UnscheduledTray.tsxsrc/components/chat/chat-panel/ChatMessageBubble.tsxsrc/components/flow/NodeEditModal.tsxsrc/components/graph/MatrixCanvas.tsxsrc/components/kanban/card-detail-body.tsxsrc/components/kanban/card.tsxsrc/components/kanban/column.tsxsrc/components/layout/conflict-resolution-modal.tsxsrc/components/layout/project-overview/index.tsxsrc/components/layout/project-overview/primitives.tsxsrc/components/layout/project-overview/sections.tsxsrc/components/notes/BacklinksPanel.tsxsrc/components/notes/CodeBlock.tsxsrc/components/notes/DashboardTemplateModal.tsxsrc/components/notes/dashboard-view.tsxsrc/components/notes/notes-view.tsxsrc/components/notes/notes-view/NoteListItem.tsxsrc/components/onboarding/StepAISetup.tsxsrc/components/onboarding/StepCreateProject.tsxsrc/components/settings/LlamaServerConsole.tsxsrc/components/settings/MobileSettings.tsxsrc/components/settings/tools/BrowseCommunityModal.tsxsrc/components/shared/ConnectorToolCard.tsxsrc/components/ui/labels.tsxsrc/components/ui/model-picker.tsxsrc/components/ui/overflow-pill.tsxsrc/components/usage/UsageView.tsxsrc/lib/tag-utils.test.tssrc/lib/tag-utils.ts
- TagChips: normalize max to a non-negative integer before capping so fractional/invalid inputs can't render non-integer +N overflow labels. - kanban card: resolve all tag ids and filter unresolved entries before applying the visible-tag cap, so a dead id can't hide a later valid tag and overflow count/names stay in sync. - notes-view: derive hidden filter tags by excluding shown ids instead of slicing by shown length, so a promoted active tag is never listed as hidden. - overflow-pill: render a native <button type=button> when interactive instead of a span with role/tabIndex/onKeyDown shims.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
A UX/UI consistency sweep. The notes-hierarchy tag rendering was messy (busy filter, cramped row badges), so I audited tag/overflow/label/color usage across the whole app and standardized the patterns:
+Npill; note rows put tags below the date atxs; same+Ntreatment across project headers, pinned notes, kanban cards, editor tag bar, and mobile.OverflowPillused for automation-run artifacts, task-flow previews, usage-by-model and recent agent sessions — no more silent drops or bare+Ns.MicroLabel/SectionLabelcomponents collapse ~6 ad-hoc micro font sizes down to two canonical scales; removed all remaining pixel-based font classes.green-400, hex fallbacks,rgba()in the dashboard template) and an undefined--purple-500token that left an onboarding card's selected state invisible.Type of change
Screenshots / recording
UI changes; before/after captures for the notes sidebar tag filter and note rows can be added on request — this pass was driven by a live audit rather than screenshots.
Checklist
npm run type-check:allpassesnpm run lintpassesnpm testpasses (runsnpm run compilefirst soelectron/bundle-guard.test.tsactually executes —npm run test:bundleto run just that)npm run test:e2epasses (run before merging UI changes or cutting a release)scripts/features.config.jsso it appears in the "What's New" modal (generated JSON — runnode scripts/generate-features.js)var(--accent),var(--text-primary), etc.)text-[Npx]pixel font classes — rem equivalents only (text-[0.714rem],text-xs, etc.)handle()and returnIpcResult<T>schema.tselectron/db/queries.ts— single source of truth (imported by both Electron main process and MCP server); never construct aDatabaseinstance outsidedb/client.ts(Electron) ormcp-server.ts(MCP runtime)dependenciesordevDependenciesadded toROLE_MAPinscripts/generate-licenses.jsandlicenses.jsonregeneratedelectron/mcp/tools/index.tsdispatch +electron/lib/tool-schemas.tsZod schema--external:<pkg>flag in thecompilescript: updated the appropriate allowlist group (RUNTIME_PROVIDED/OPTIONAL_TRANSITIVE/SUBPROCESS_ONLY/SHIPPED_NATIVE) inelectron/bundle-guard.test.tsand (ifSHIPPED_NATIVE) shipped the package viaelectron-builder.ymlNotes for reviewer
MonthGrid/WeekGrid) and SVG canvas labels keep their smaller scales on purpose (cramped cells / chart density) and were excluded from the label normalization.Summary by CodeRabbit
New Features
+Noverflow indicators for tags, sessions, tasks, notes, and models, with expandable details where applicable.Style