Skip to content

feat: Improve UI/UX and add file explorer search functionality#130

Open
sarpit2907 wants to merge 1 commit intosoft-eng-practicum:developfrom
sarpit2907:feat/improve-ui-ux-and-file-search
Open

feat: Improve UI/UX and add file explorer search functionality#130
sarpit2907 wants to merge 1 commit intosoft-eng-practicum:developfrom
sarpit2907:feat/improve-ui-ux-and-file-search

Conversation

@sarpit2907
Copy link

Summary

This pull request implements comprehensive UI/UX improvements and adds real-time file search functionality to the AnalySim project.

Changes Made

UI/UX Improvements

  • Dashboard Component: Enhanced styling with consistent card design, hover effects, and better visual hierarchy
  • Project Detail Page: Migrated from fixed width layout to responsive flexbox for improved mobile support
  • CSV Data Browser: Redesigned control layout with better visual hierarchy and responsive stacking
  • Form Styling: Added comprehensive validation states, focus indicators, and consistent input styling across all forms
  • Bootstrap Overrides: Updated all Bootstrap components to follow the design token system with CSS custom properties
  • Mobile Responsiveness: Improved responsiveness across all components with proper media query breakpoints

File Explorer Search Feature

  • Implemented real-time search/filter functionality in the project file explorer
  • Added case-insensitive file and folder name matching
  • Created clear search functionality to reset the filter
  • Optimized for handling large datasets with many files
  • Includes accessible search interface with proper ARIA labels

Files Modified

  • Dashboard components (4 files)
  • Project detail and file explorer components (5 files)
  • CSV data browser components (2 files)
  • Global styles (2 files)
  • And related configuration files

Technical Details

  • 100% frontend implementation with no backend changes required
  • Uses Angular getter pattern for efficient filtering
  • Leverages existing design token system (CSS variables)
  • Maintains backward compatibility with existing functionality

Testing

All changes have been implemented and are ready for review. The search feature works on already-loaded data with no additional API calls needed.

Closes #123

- Enhanced dashboard component styling with consistent card design and hover effects
- Improved project detail page layout with responsive flexbox for mobile support
- Redesigned CSV data browser controls with better visual hierarchy
- Updated form styling with comprehensive validation states and focus indicators
- Enhanced Bootstrap component overrides to follow design token system
- Implemented real-time file search/filter in project file explorer
- Added case-insensitive search with clear functionality
- Improved mobile responsiveness across all components

Closes soft-eng-practicum#123
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.

[UX Improvement] Add Real-time Search/Filter to Project File Explorer

2 participants