refactor(tarko-agent-ui): refine ui infrastructure#1546
Merged
Conversation
✅ Deploy Preview for agent-tars-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ulivz
changed the title
- Add Headless UI dependency - Replace Dialog with Headless UI implementation - Replace Tooltip with native implementation - Add primitive components (Box, Typography, CircularProgress, etc.) - Keep Select/MenuItem/FormControl on MUI temporarily for ModelSelector - Phase 1 of MUI removal - core components migrated
ulivz
changed the title
ulivz
changed the title
- Migrate Select/MenuItem/FormControl to Headless UI - Remove @mui/material dependency completely - Add compatibility ThemeProvider for backward compatibility - Remove mui-theme.ts utility file - All components now use Headless UI or native implementations - Bundle size reduced from ~139kB to ~135kB
ulivz
changed the title
ulivz
changed the title
- Increase Select dropdown z-index to 50000 to prevent overlay issues - Simplify agentInfo.name styling to fix display problems - Remove complex gradient backgrounds and pseudo-elements - Improve ModelSelector visibility in navbar - Enhanced shadow and hover effects for better UX
- Replace Box component with native div element - Convert sx prop to standard style prop - Replace MUI shorthand properties (px, py) with standard CSS - Use onMouseEnter/onMouseLeave for hover effects instead of CSS pseudo-selectors - Maintains visual appearance while using native React styling
- Use React Portal to render dropdown in document.body - Calculate button position dynamically with getBoundingClientRect - Handle scroll and resize events to update dropdown position - Use fixed positioning instead of absolute for proper layering - Ensure dropdown always appears above all other elements - Maintain responsive width matching button size
- Change onChange signature to match MUI: (event: { target: { value: T } }) => void
- Add handleChange wrapper to convert Headless UI onChange to MUI format
- Fixes TypeError: Cannot read properties of undefined (reading 'value')
- Maintains backward compatibility with existing MUI Select usage
- Increase z-index to 50000 for proper layering - Add flex: 1 to fullScreen dialogs for proper space utilization - Set overflow: auto for fullScreen to allow scrolling - Improve container layout with flex properties - Ensure fullScreen dialogs take complete viewport space - Fix AboutModal not displaying at full height
ulivz
changed the title
- Delete ThemeProvider.tsx (empty compatibility layer) - Remove Menu component from Select.tsx (unused placeholder) - Remove ThemeProvider, createBasicMuiTheme, createModelSelectorMuiTheme exports - Replace MUI Menu with native dropdown in Navbar.tsx - Fix import errors and build issues - Reduce bundle size by removing dead code
- Create Menu, MenuItem, MenuDivider components in tarko-ui - Add useNavbarStyles hook for shared styling logic - Add useHoverHandlers hook for reusable hover effects - Refactor Navbar.tsx to use new Menu component (reduced ~120 lines) - Refactor ModelSelector.tsx to use shared styles - Remove duplicate styling code between components - Improve code maintainability and consistency
- CircularProgress: 80 lines → 25 lines (-69%) - Select: 261 lines → 120 lines (-54%) - Tooltip: 152 lines → 61 lines (-60%) - useNavbarStyles: 141 lines → 87 lines (-38%) - Menu: 153 lines → 113 lines (-26%) Total reduction: ~350 lines of unnecessary complexity Maintains all functionality while improving maintainability
- Increase z-index to 50000 to ensure dropdown appears above all elements - Add backdrop blur and improved shadow effects - Restore original menu item styling with hover animations - Fix dropdown positioning and padding - Maintain simplified codebase while restoring functionality
- Add back createPortal to render dropdown in document.body - Restore button rect tracking for proper positioning - Fix dropdown being clipped by parent overflow:hidden - Maintain simplified codebase with essential Portal functionality - Position dropdown using fixed positioning relative to button rect
- Remove sx prop from all components (Box, Typography, CircularProgress, IconButton, Divider) - Remove size and disabled props from FormControl - Remove MenuProps and size props from Select component - Clean up ModelSelector to use style instead of sx - Simplify component interfaces by removing unused compatibility props - Reduce bundle size by eliminating prop spreading and complex style merging - Maintain functionality while removing MUI-specific API surface
- Use createPortal to render tooltip in document.body - Increase z-index to 50001 to ensure tooltip appears above all elements - Implement proper position calculation using getBoundingClientRect - Add backdrop filter and improved shadow for better visual appearance - Fix tooltip being covered by other UI elements like dropdowns - Use fixed positioning with accurate coordinate calculation
- Reduce right padding from 32px to 24px for better visual balance - Prevents dropdown arrow from being pushed too far right - Improves overall Select component appearance and spacing
- Delete complex Typography component with variant mapping - Replace all Typography usage with native HTML elements (span, h1, etc.) - Reduce bundle size by removing unnecessary abstraction layer - Simplify component API by using semantic HTML directly - Remove variant system that was over-engineered for simple text display - Update ModelSelector and Navbar to use native elements with inline styles
- Remove unused Divider component (only MenuDivider is used) - Simplify IconButton by removing complex size system - Remove size prop variants (small/medium/large) from IconButton - Reduce IconButton complexity from 36 lines to 26 lines - Further reduce primitives.mjs bundle size from 2.9kB to 2.1kB (-28%) - Keep only essential styling for IconButton (padding, transitions) - Remove unnecessary position, userSelect, and complex transitions
- Replace problematic backdrop-filter with solid background color - Use consistent gray-800 background (#1f2937) instead of rgba - Add subtle border for better visual definition - Fix position calculation by adding scroll offset - Reduce z-index from 50001 to 9999 for better layering - Improve shadow styling with Tailwind-like values - Increase padding for better text readability
- Add bottom-left, bottom-right, top-left, top-right placement options - Update ShareButton to use bottom-right placement to avoid screen overflow - Fix positioning calculation for corner tooltips - Add proper transform values for corner alignments: - bottom-right: translate(-100%, 0) - aligns right edge - bottom-left: translateY(0) - aligns left edge - top-right: translate(-100%, -100%) - aligns top-right - top-left: translateY(-100%) - aligns top-left - Ensure tooltips stay within viewport boundaries
- Change backgroundColor from #1f2937 (gray) back to #000000 (pure black) - Maintain the improved positioning and corner placement features - Keep the enhanced styling (border, shadow, padding) but with black background
- Replace basic SVG chevron with HiChevronDown from react-icons/hi2 - Add smooth rotation animation when dropdown opens/closes - Improve visual feedback with opacity changes for disabled state - Use consistent 16px size for better visual balance - Add 0.2s ease-in-out transition for smooth interactions
- Reduce icon size from 16px to 12px for better proportion - Add 8px left margin to create proper spacing from text - Lower opacity from 0.7 to 0.6 for more subtle appearance - Add flexShrink: 0 to prevent icon compression - Improve overall visual balance and refinement
- Increase agent badge height from 28px to 32px - Update agent badge padding from 3px 10px to 4px 12px - Increase model selector height from 28px to 32px - Ensure consistent visual appearance and alignment - Both components now have matching dimensions and spacing
- Revert to smaller, consistent sizing (28px height, 3px 10px padding) - Prioritize agent name display to prevent truncation - Adjust width calculation logic to favor complete agent name - Allow model selector to be truncated if space is limited - Improve overall visual balance and readability
- Increase z-index from 1000 to 50000 to match Dialog and Select - Add createPortal to render Menu in document.body - Ensure Menu appears above all other UI elements - Prevent z-index conflicts with parent containers - Maintain consistent layering hierarchy across components
- Upgrade container with stronger backdrop blur and premium shadows - Add indigo accent border for better visual hierarchy - Improve menu items with larger padding and medium font weight - Add smooth hover animations with color transitions - Enhance icon states with dynamic opacity and color changes - Apply modern glassmorphism design with inset highlights - Increase overall visual contrast and accessibility
- Add mobile variant support to ShareButton component - Replace non-functional MenuItem with proper ShareButton in mobile menu - Implement mobile-specific styling with full-width button layout - Ensure Share modal opens correctly from mobile menu - Maintain menu close behavior after share action - Fix missing Share functionality on mobile devices
- Add onShare callback prop to ShareButton component - Remove wrapper div that was blocking click events - Properly trigger menu close callback when share is initiated - Ensure ShareButton handles its own click events correctly - Fix mobile menu Share functionality completely
- Add responsive padding and spacing (p-4 sm:p-6, space-y-4 sm:space-y-6) - Implement mobile-first title design with truncated text on small screens - Optimize button layouts with responsive icon and text sizes - Enhance copy link input field for mobile with smaller padding - Add responsive close buttons with proper sizing - Improve error state display for mobile devices - Maintain desktop experience while optimizing mobile usability - Ensure ShareModal works seamlessly across all device sizes
- Remove conditional rendering of ShareModal based on disabled state - Ensure ShareModal is always available for all variants (mobile, navbar, default) - Fix mobile Share button click responsiveness issue - ShareModal state management now works correctly regardless of button state - Maintains proper disabled button behavior while fixing modal availability
- Replace custom div with MenuItem component for mobile variant - Import MenuItem from @tarko/ui for proper menu integration - Fix mobile menu interaction by using standard MenuItem props - Ensure consistent styling and behavior across menu items - Mobile ShareButton now properly integrates with Menu component
- Move ShareModal state management from ShareButton to Navbar component - Replace mobile ShareButton with direct MenuItem in Navbar - Add external modal management support to ShareButton - Fix mobile menu Share button click not showing dialog - Ensure proper event handling and modal display - Maintain backward compatibility for default usage
cjraft
approved these changes
Sep 17, 2025
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
2 participants
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
Refine Agent UI infrastructure .
Checklist