feat(tarko-agent-ui): welcome cards #1643
Merged
Conversation
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
✅ Deploy Preview for agent-tars-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for tarko ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…ds and fix layout
…ove min-height constraint
…yout across tabs" This reverts commit 8d24c08.
…le layout - Add beautiful background images with proper scaling and gradients - Implement glassmorphism design with backdrop blur effects - Add hover animations with lift effect and arrow indicators - Include category badges with counts in pill-style tabs - Support fallback gradients for cards without images - Add loading states with spinner overlay - Improve responsive grid layout (up to 4 columns) - Enhance typography and spacing for better readability
…t input stability - Remove fixed h-screen constraint that prevented scrolling - Replace fixed height sections with flexible min-height approach - Use min-h-[60vh] for chat input area to maintain visual balance - Enable natural page scroll for welcome cards section - Preserve chat input position stability during tab switches
…nable scrolling - Remove overflow-hidden constraint from homepage route container - Keep overflow-hidden only for session pages where it's needed - Enable natural page scrolling for homepage content - Maintain proper layout structure without scroll restrictions
…-screen for scrollability - Replace h-screen with min-h-screen in homepage route container - Allow content to expand beyond viewport height and enable scrolling - Maintain minimum viewport height while permitting overflow - Fix the root cause of scrolling prevention in homepage layout
…ut for homepage - Restore h-screen container to keep sidebar fixed in position - Add overflow-hidden to main container and overflow-y-auto to content area - Create proper scroll boundary: sidebar fixed, right content scrollable - Remove min-h-screen from WelcomePage to work within scroll container - Achieve desktop app behavior: fixed sidebar + scrollable main content
…aesthetics 🎨 Premium Design Features: - Glassmorphism effects with backdrop blur and translucent borders - Sophisticated gradient backgrounds with 8 premium color schemes - Dynamic geometric decorations and animated light effects - Luxury tab design with glowing backgrounds and smooth transitions ✨ Advanced Interactions: - Elegant hover animations with scale, lift, and rotation effects - Smooth category switching with spring-based transitions - Loading states with spinning indicators and opacity changes - Ripple effects on card interactions 🌙 Perfect Dark Mode Support: - Carefully crafted opacity levels for light/dark themes - Consistent color schemes across all UI states - Enhanced contrast and readability in both modes 🎭 Micro-animations: - Staggered card entrance animations with custom easing - Floating geometric shapes with hover transformations - Dynamic light sweeps across gradient backgrounds - Smooth layout transitions between categories 📐 Typography & Spacing: - Increased card height (384px) for premium feel - Generous padding and refined text hierarchy - Elegant empty states with sophisticated placeholders - Optimized responsive grid with larger gaps
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1643 +/- ##
=======================================
Coverage 14.26% 14.26%
=======================================
Files 250 250
Lines 8562 8562
Branches 1672 1672
=======================================
Hits 1221 1221
Misses 7166 7166
Partials 175 175 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…elcome cards 🌅 Light Mode Transformation: - Replace harsh white backgrounds with elegant gray-100/80 tones - Add proper shadows and borders for depth and definition - Enhance card gradients with darker 700-900 ranges for better contrast - Implement sophisticated shadow system (shadow-lg/shadow-xl) 🎨 Visual Hierarchy Improvements: - Tab container: gray-100/80 background with subtle borders - Active tabs: pure white with soft shadows - Cards: white backgrounds with gray-200/40 borders - Better text contrast with gray-900/gray-500 color scheme ✨ Enhanced Contrast & Readability: - Darker gradient backgrounds (700-900) for better text visibility - Black/20 overlays on card elements instead of white/20 - Improved category badge contrast with black backgrounds - Consistent shadow elevation system 🎯 Refined Details: - Empty state with proper gray backgrounds and borders - Hover effects with shadow-xl for premium feel - Maintained dark mode perfection while fixing light mode - Smooth transitions between light/dark themes Result: Light mode now matches the elegance of dark mode!
🎨 Theme Toggle Component: - Create standalone ThemeToggle component for code reusability - Support multiple variants: navbar, floating, button - Configurable sizes: small, medium, large - Consistent styling across different contexts 🏠 Homepage Theme Toggle: - Add floating theme toggle in top-right corner - Beautiful entrance animation with scale and opacity effects - Fixed positioning with proper z-index layering - Elegant floating style with shadow and backdrop 🔄 Code Reusability: - Refactor Navbar to use new ThemeToggle component - Maintain exact same functionality and appearance - Centralized theme toggle logic in shared component - Clean separation of concerns ✨ Enhanced UX: - Users can now toggle theme directly from homepage - Smooth animations and hover effects - Consistent theme switching behavior across app - Professional floating button design 🎯 Technical Benefits: - DRY principle - no code duplication - Easy to maintain and update theme logic - Flexible component API for future use cases - Type-safe props with TypeScript interfaces
ZhaoHeh
approved these changes
Sep 25, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Added
welcomeCardsfeature to support configurable cards on the homepage belowwelcomePrompts. Cards support title, prompt, avatar, category, and agentOptions fields with categorized display and tab navigation when multiple categories exist.Checklist