Skip to content

Improve UI: Move bundle size tab first, remove file types, implement enhanced navigation design#41

Merged
Boshen merged 6 commits into
mainfrom
copilot/fix-40
Aug 25, 2025
Merged

Improve UI: Move bundle size tab first, remove file types, implement enhanced navigation design#41
Boshen merged 6 commits into
mainfrom
copilot/fix-40

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Aug 25, 2025

This PR implements the requested UI improvements to enhance the dashboard's user experience and focus on the most important metrics.

Changes Made

Tab Reordering and Cleanup

  • Bundle Size tab is now first and selected by default instead of Build Time
  • File Types tab completely removed - dashboard now focuses on the two core metrics: Bundle Size and Build Time
  • Cleaned up unused file types data processing code and chart rendering logic
  • Updated statistics cards - replaced "Total File Types" with "Bundle Size Range" showing size variation across versions

Enhanced Navigation Design

  • Transparent navigation container background for cleaner visual hierarchy that doesn't compete with main content
  • Rich button interactions with enhanced visual feedback including borders, shadows, and smooth transforms
  • Sophisticated hover and active states with animated gradients and depth effects
  • Smooth transitions (0.3s) for premium feel and better user experience
  • Better accessibility with improved focus states and touch targets

Technical Improvements

  • Simplified chart rendering logic by removing complex conditional branches for file types
  • Reduced bundle size by eliminating unused code paths
  • Maintained backward compatibility for existing data structures
  • All linting and build tests pass

Before and After

Before: 3 tabs (Build Time, Bundle Size, File Types) with Build Time selected by default and basic navigation styling
After: 2 tabs (Bundle Size, Build Time) with Bundle Size selected by default and enhanced interactive navigation with transparent background

The dashboard now provides optimal visual balance with a clean transparent navigation area and rich interactive feedback that guides users naturally toward the most important bundle size metrics.

Fixes #40.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

…fordance

Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
Copilot AI changed the title [WIP] improve ui Improve UI: Move bundle size tab first, remove file types, enhance tab affordance Aug 25, 2025
Copilot AI requested a review from Boshen August 25, 2025 10:17
@Boshen
Copy link
Copy Markdown
Member

Boshen commented Aug 25, 2025

@copilot remove the background from the tabs

Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Aug 25, 2025

@copilot remove the background from the tabs

Background removed from tabs (commit b4235ca). The tabs now use transparent backgrounds with border-based visual feedback for a cleaner appearance.

Clean tabs without background

Copilot AI changed the title Improve UI: Move bundle size tab first, remove file types, enhance tab affordance Improve UI: Move bundle size tab first, remove file types, enhance tab affordance with clean design Aug 25, 2025
@Boshen
Copy link
Copy Markdown
Member

Boshen commented Aug 25, 2025

@copilot remove the transparent backgrounds with border-based visual feedback from the tabs.

Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Aug 25, 2025

@copilot remove the transparent backgrounds with border-based visual feedback from the tabs.

Removed all border-based visual feedback from tabs (commit 04d1777). The tabs now use a minimal text-only design with no borders, shadows, or background effects.

Ultra-clean tabs - Bundle Size active
Ultra-clean tabs - Build Time active

Copilot AI changed the title Improve UI: Move bundle size tab first, remove file types, enhance tab affordance with clean design Improve UI: Move bundle size tab first, remove file types, implement minimal text-only tab design Aug 25, 2025
@Boshen
Copy link
Copy Markdown
Member

Boshen commented Aug 25, 2025

@copilot revert the previous change.

I meant remove the background from dashboard-nav, not the buttons.

Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Aug 25, 2025

@copilot revert the previous change.

I meant remove the background from dashboard-nav, not the buttons.

Reverted the previous change and removed background from the .dashboard-nav container instead of the buttons (commit c4e62c5). The navigation now has a transparent background while maintaining enhanced button visual feedback with borders, shadows, and animations.

Dashboard with transparent navigation background

Copilot AI changed the title Improve UI: Move bundle size tab first, remove file types, implement minimal text-only tab design Improve UI: Move bundle size tab first, remove file types, implement enhanced navigation design Aug 25, 2025
@Boshen Boshen marked this pull request as ready for review August 25, 2025 11:39
@Boshen Boshen merged commit 925057b into main Aug 25, 2025
1 check passed
@Boshen Boshen deleted the copilot/fix-40 branch August 25, 2025 11:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

improve ui

2 participants