feat(ui): Unify notifications, sidebar, and API playground UX#1585
Merged
Conversation
…ropdown - Eliminated the Inbox component and its related logic from FreeLayoutDataProvider and LayoutDataProvider. - Introduced NotificationsDropdown to handle notifications in the sidebar and mobile sidebar. - Updated Sidebar and LayoutShell components to accommodate the new notifications structure, enhancing user experience and code clarity.
…nents - Deleted InboxSidebar and SidebarSlideOutPanel components to streamline the sidebar structure. - This change simplifies the layout and prepares for future enhancements in notification handling.
…and improved filtering - Added totalCount to comments and status notifications for better tracking. - Updated NotificationsDropdown to support new filters and improved loading behavior. - Refactored notification display logic to accommodate the new structure, enhancing user experience.
…hance UI components - Added Drawer component to NotificationsDropdown for improved mobile experience. - Refactored notification trigger button and panel content for better accessibility and usability. - Enhanced loading states and notification filtering options to streamline user interaction.
- Updated MobileSidebar to include a right border for improved visual separation. - Modified SidebarUserProfile to add a relative positioning and a top border for better layout consistency.
- Added mobile submenus for theme, language, and learn more options in SidebarUserProfile. - Integrated Drawer component for improved mobile navigation experience. - Enhanced UI with new dropdown items and improved accessibility for user settings.
- Integrated Drawer component in EmbeddedDocumentsMenu for mobile-friendly document type filtering. - Updated UI to improve accessibility and user experience with new button interactions and layout adjustments. - Refactored document type display logic to streamline filtering options and enhance visual clarity.
…ve unused components - Simplified the styling of notification count indicators for better visual consistency. - Enhanced the empty state layout for improved user experience. - Removed the ConnectAgentDialog from PlaygroundSidebar to declutter the UI.
- Introduced PlaygroundLayoutShell component for managing the layout and navigation of the API Playground. - Added PlaygroundLayout component to handle workspace-specific rendering. - Removed PlaygroundSidebar and related state management to simplify the UI and enhance mobile responsiveness. - Updated LayoutDataProvider and LayoutShell components to reflect the new Playground structure.
- Enhanced header styles across Playground components to include text-foreground and responsive sizing. - Updated API Playground, API Keys, Runs Table, and other sections for a unified look and feel. - Improved accessibility and readability with consistent font sizes and colors.
- Reduced button sizes in EmbeddedDocumentsMenu and EmbeddedImportMenu for better alignment. - Updated layout spacing in SidebarButton to enhance visual clarity and consistency. - Added a new badge to the Sidebar component to indicate new items, improving user awareness.
- Added SidebarButtonBadge component to encapsulate badge styling and functionality. - Updated Sidebar to utilize SidebarButtonBadge for displaying new item notifications, enhancing visual clarity. - Adjusted SidebarUserProfile layout for better alignment in collapsed view.
…nectAgentDialog UI - Removed unused `useReducedMotion` hook from ConnectedScraperIcons for cleaner code. - Replaced `Cable` icon with a masked SVG in ConnectAgentDialog for improved visual representation. - Enhanced layout in ConnectAgentDialog to include a badge indicating new items, improving user awareness.
- Removed redundant text from the API Playground description to enhance readability. - Improved layout in FolderNode by adding dropdown state management for better user interaction. - Updated Sidebar component styles for improved visual consistency and user experience.
…st Sidebar layout - Updated aria-label in NotificationsDropdown for improved accessibility and clarity. - Adjusted Sidebar layout to enhance spacing and visual consistency.
- Deleted the ApiKeysSection component to streamline the Playground layout. - Updated PlaygroundLayoutShell and PlaygroundIndex to remove references to API Keys. - Redirected API Keys page to User Settings for improved navigation flow.
…igation and component structure - Added new TopLevelNavLink and ProviderNavGroup components for better organization of navigation items. - Updated state management for expanded providers and active navigation items. - Refactored navigation item structure to simplify rendering and improve clarity. - Integrated ChevronRight icon for visual indication of expandable sections.
- Introduced RoutedSectionShell to unify navigation structure across Playground, User Settings, and Workspace Settings layouts. - Replaced individual navigation implementations with a more cohesive and reusable component. - Updated navigation items to include href properties for better routing. - Enhanced mobile navigation experience with drawer support and improved scroll handling.
- Introduced an Alert component to provide a concise description of API runs in the workspace. - Replaced the previous header and description with the new alert for improved clarity and user experience.
…t features - Replaced instances of "auto-reload" with "top-ups" for consistency and clarity across user settings and pricing sections. - Enhanced user feedback messages related to credit balance and top-up settings. - Improved comments and descriptions in the Purchase History and Credit Balance Display components for better understanding.
…r API runs - Changed label from "Runs" to "API Runs" in PlaygroundLayoutShell and PlaygroundIndex for clarity. - Improved the API reference UI by adding a ChevronRight icon for expandable sections and enhancing the summary layout. - Introduced an EndpointCopyButton component for easier copying of API endpoint details, improving user experience.
… Reddit scrape capability - Introduced a `docs_url` field to the `Capability` and `CapabilitySummary` classes for better documentation access. - Updated the `REDDIT_SCRAPE` capability to include a specific documentation link. - Enhanced the PlaygroundRunner component to display the documentation link when available, improving user guidance.
…nd web crawl capabilities - Introduced a `docs_url` field to the Google Maps reviews, scrape, YouTube comments, YouTube scrape, and web crawl capabilities for improved documentation access. - Simplified descriptions for each capability to enhance clarity and user understanding.
- Replaced required/optional text with Badge component in schema form for better visual distinction. - Updated EmptyState in artifacts library to include a more informative and visually appealing layout with an icon and description.
… and hero chat demo - Revised placeholder text to improve readability and user understanding by replacing the dash with a period and adding "Use" for prompts and docs.
|
@AnishSarkar22 is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (52)
📝 WalkthroughWalkthroughThis PR adds an optional docs_url field to capability definitions across backend and frontend, redesigns the Playground feature (layout, index, runner, output viewer, forms), replaces custom sidebar/layout navigation with a shared RoutedSectionShell component, removes the Inbox and Playground slide-out sidebars in favor of a new NotificationsDropdown, renames auto-reload to top-ups terminology, and applies several unrelated cosmetic UI tweaks. ChangesCapability docs_url field
Playground feature UI overhaul
Layout shell and sidebar refactor
Auto-reload to top-ups renaming
Miscellaneous cosmetic UI tweaks
Estimated code review effort: 4 (Complex) | ~75 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant NotificationsDropdown
participant useInbox
participant Router
User->>NotificationsDropdown: click notification item
NotificationsDropdown->>useInbox: markItemAsRead(item)
useInbox-->>NotificationsDropdown: updated read state
NotificationsDropdown->>Router: navigate based on notification metadata
Related PRs
Suggested labels: frontend, backend, refactor, ui Suggested reviewers: MODSetter
✨ Finishing Touches🧪 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 |
AnishSarkar22
changed the title
This was referenced Jul 8, 2026
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.
Description
NotificationsDropdown.Motivation and Context
FIX #
Screenshots
API Changes
Change Type
Testing Performed
Checklist
High-level PR Summary
This PR implements major UI improvements across the application, including a complete redesign of the Playground navigation using a new
RoutedSectionShellcomponent with drawer-based mobile navigation, replacing the old slide-out inbox sidebar with a compact notifications dropdown, removing the dedicated API keys section from Playground in favor of directing users to user settings, adding documentation URLs to backend capability definitions, shortening capability descriptions for better UI display, and making numerous refinements to components including "New" badges, improved empty states, better mobile menus, terminology changes from "auto-reload" to "top-ups", and visual polish across buttons, icons, and layouts.⏱️ Estimated Review Time: 30-90 minutes
💡 Review Order Suggestion
surfsense_web/app/dashboard/[workspace_id]/playground/layout.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsxsurfsense_web/components/layout/ui/RoutedSectionShell.tsxsurfsense_web/components/layout/ui/index.tssurfsense_web/app/dashboard/[workspace_id]/user-settings/layout-shell.tsxsurfsense_web/app/dashboard/[workspace_id]/workspace-settings/layout-shell.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/playground-runner.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/output-viewer.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/schema-form.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/api-keys/page.tsxsurfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsxsurfsense_backend/app/capabilities/core/access/rest.pysurfsense_backend/app/capabilities/core/types.pysurfsense_backend/app/capabilities/google_maps/reviews/definition.pysurfsense_backend/app/capabilities/google_maps/scrape/definition.pysurfsense_backend/app/capabilities/google_search/scrape/definition.pysurfsense_backend/app/capabilities/reddit/scrape/definition.pysurfsense_backend/app/capabilities/web/crawl/definition.pysurfsense_backend/app/capabilities/youtube/comments/definition.pysurfsense_backend/app/capabilities/youtube/scrape/definition.pysurfsense_web/components/layout/ui/sidebar/NotificationsDropdown.tsxsurfsense_web/components/layout/ui/sidebar/InboxSidebar.tsxsurfsense_web/hooks/use-inbox.tssurfsense_web/components/layout/ui/icon-rail/IconRail.tsxsurfsense_web/components/layout/providers/LayoutDataProvider.tsxsurfsense_web/components/layout/providers/FreeLayoutDataProvider.tsxsurfsense_web/components/layout/ui/shell/LayoutShell.tsxsurfsense_web/atoms/layout/playground.atom.tssurfsense_web/components/layout/ui/sidebar/PlaygroundSidebar.tsxsurfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsxsurfsense_web/components/layout/ui/sidebar/Sidebar.tsxsurfsense_web/components/layout/ui/sidebar/SidebarButton.tsxsurfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsxsurfsense_web/components/layout/ui/sidebar/MobileSidebar.tsxsurfsense_web/components/layout/ui/sidebar/index.tssurfsense_web/components/mcp/connect-agent-dialog.tsxsurfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsxsurfsense_web/components/documents/FolderNode.tsxsurfsense_web/components/layout/ui/sidebar/ChatListItem.tsxsurfsense_web/components/layout/ui/sidebar/CreditBalanceDisplay.tsxsurfsense_web/components/assistant-ui/thread.tsxsurfsense_web/components/homepage/hero-chat-demo.tsxsurfsense_web/features/artifacts-library/ui/artifacts-library.tsxsurfsense_web/components/settings/auto-reload-settings.tsxsurfsense_web/app/dashboard/[workspace_id]/user-settings/components/PurchaseHistoryContent.tsxsurfsense_web/components/pricing/pricing-section.tsxsurfsense_web/components/ui/tabs.tsxsurfsense_web/contracts/types/scraper.types.tssurfsense_web/components/layout/index.tssurfsense_web/public/connectors/reddit.svgsurfsense_web/public/connectors/web.svgSummary by CodeRabbit
New Features
Bug Fixes