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

[Muskan121622]

Currently, the Project File Explorer lists all items in a directory, but navigation becomes difficult as projects grow to have many datasets. I propose adding a search bar at the top of the file explorer that filters the displayed files and folders in real-time as the user types. This will significantly improve the usability of the CSV data browser for large-scale modeling datasets.

Step 2: Implementation Plan
I have already created a technical plan for how we will build this together:
Implementation Plan: Project File Explorer Search/Filter
Researchers often upload hundreds of files per project. Navigating these files manually is time-consuming. This feature will add a real-time search bar to the file explorer to improve usability.

Proposed Changes
Frontend: Angular
[MODIFY]
project-file-explorer.component.html
Add a new input field for searching files above the file list.
Use Bootstrap classes for styling (e.g., form-control, mb-3).
Bind the input to a searchTerm property using [(ngModel)].
[MODIFY]
project-file-explorer.component.ts
Add a searchTerm: string = "" property.
Create a getter filteredBlobFileItemList that returns blobFileItemList filtered by the searchTerm.
Ensure the filtering is case-insensitive.
Verification Plan
Manual Verification
Navigate to a project with multiple files.
Type a partial filename into the new search bar.
Observe that the file list updates in real-time to show only matching files and folders.
Clear the search bar and observe that all files are shown again.
Change directories and verify that the search still works within the new directory.
Automated Tests
No existing unit tests for this specific component were found, but we will verify by running the app locally.

@cengique sir please assign this issue to me i am working on it .