Repository navigation
web: adopt Notra UI components - #860
Open
devin-ai-integration[bot] wants to merge 3 commits into
Open
devin-ai-integration[bot] wants to merge 3 commits into
devin-ai-integration[bot] wants to merge 3 commits into
Conversation
…himmer, chat-minimap) Registers the ui.usenotra.com shadcn registry and swaps the dashboard's primitives for Notra's Base UI variants: - button: Depth gradient + squircle styles, loading/progress states; an asChild shim maps to Base UI's render prop so existing call sites keep working unchanged. - tooltip: Depth surface with a shared popup that glides between triggers. - sonner: Depth-styled toasts wired to our useTheme hook instead of next-themes. - icon-tabs: replaces the hand-rolled Conversation/Events/Files tablist on the session detail page. - shimmer: sweeps the 'Working' chip and 'Streaming response' text. - chat-minimap: rail of turns on the session conversation with a viewport scroll-spy and click-to-scroll. Also adds a public /ui-demo playground page exercising every swapped component (mock session conversation, toasts, theme toggle). Co-Authored-By: Mohamed <mo@digger.dev>
Contributor
Author
|
I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
Contributor
Author
There was a problem hiding this comment.
✅ Devin resolved all 2 findings on c18092f
Fixed by Devin (2)
- Minimap loses scroll tracking after tab switch
- Minimap highlights later visible turns
View all findings in Devin Review
…bility - Re-run the IntersectionObserver effect on activeTab so remounted turn elements are observed again after returning to the Conversation tab. - Track all intersecting turns in a Set and highlight the smallest index (topmost) instead of whichever entry fired last in the batch. Co-Authored-By: Mohamed <mo@digger.dev>
- Replace the bare text+button row in the Deploy from GitHub panel with the shared EmptyState (icon, title, description, action) in both Settings and the per-environment GitHub panel. - Render the 'managed GitHub App is not configured' notice as a bordered callout with an icon instead of raw destructive text. Co-Authored-By: Mohamed <mo@digger.dev>
This branch has not been deployed
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.
Summary
Switches the dashboard's component primitives to Notra UI (a shadcn registry, registered as
@notraincomponents.json). The Notra components are built on Base UI (@base-ui/react, added as a dep), so they sit alongside the existingradix-uiprimitives rather than replacing them everywhere.Swapped / added components:
loadingandprogressstates (button-content.tsxcarries the animations). Added anasChildshim that maps onto Base UI'srenderprop so the ~40 existing<Button asChild><Link/></Button>call sites keep working untouched.TooltipProviderall triggers share one popup that glides between them.useThemehook (.darkon<html>) instead ofnext-themes.role="tablist"button row on the session detail page (Conversation / Events / Files).session-conversationand "Streaming response…" inSession.tsx.IntersectionObserver(the page scrolls, not the panel, so the bundled scroll-spy hook — which needs a scrollable root — stays for later use).Also:
ui/hover-cardandui/cardcome from Notra's Base UI sources (the registry resolved them from the default shadcn registry in the Radix variant, which the chat-minimap render-prop API needs Base UI for)./ui-demoroute renders every swapped component with mock data — buttons incl. loading/progress, icon tabs, gliding tooltips, shimmer, toasts, and a mock conversation with the minimap. Handy for design iteration and review without a backend session.ui/table,ui/checkbox,ui/skeletonrefreshed to the radix-nova styles Notra's registry ships; theme tokens for the new animations live inindex.css.Verified:
npm run typecheck,npm test(343),npm run lint(clean on touched files; repo has ~17 pre-existing errors elsewhere),npm run build, and visual check of/ui-demoin light + dark.Test plan
/ui-demoand click through each section (toast buttons need a click, tooltip/minimap need a hover)Link to Devin session: https://app.devin.ai/sessions/a68d4d0e1ceb4f5682af00658ed3d9ad
Open in Devin Desktop: https://app.devin.ai/desktop/session/a68d4d0e1ceb4f5682af00658ed3d9ad?variant=devin
Requested by: @motatoes
Polylane reviews this pull request when you ask: