[manthansingh26]

Description

This PR implements the Library List UI with search, filter, and sort functionality as requested in issue #20 (RFC 0001).

Changes Made

• Created complete Library List feature with Search, Type Filter, and Sort
• Added proper Loading, Empty, Error, and Populated states
• Implemented reusable components with good separation of concerns
• Added comprehensive mocked data for development and testing
• Improved overall code quality, accessibility, and maintainability
• Added 6 new utility tests (Total 23 tests passing)

Testing

• All 2284 project tests are passing
• No new TypeScript errors introduced

Related Issue

Closes #20

[shrey16]

Thanks for building this out. I’m requesting changes because the PR references a mock-data module that is not included in the branch.

client/src/components/Library/useMockLibraryData.ts:2, client/src/components/Library/__tests__/LibraryList.test.tsx:3, and client/src/components/Library/__tests__/libraryUtils.test.ts:1 all import ~/data/mockLibraryData, but no client/src/data/mockLibraryData file is present. The focused tests fail before running:

Cannot find module '../../../data/mockLibraryData' from 'src/components/Library/__tests__/libraryUtils.test.ts'
Cannot find module '../../../data/mockLibraryData' from 'src/components/Library/__tests__/LibraryList.test.tsx'

Please add the missing mock data module or update these imports to point at the actual mock source. Note that npm run frontend:ci still passed locally only because these Library files are not imported by the app entrypoint yet, so the targeted Jest failures are the relevant signal here.

[manthansingh26]

Hi @shrey16,

Thanks for the feedback.

The issue was that client/src/data/mockLibraryData.ts was being ignored by a broad data/ rule in .gitignore. I've fixed the .gitignore by changing it to /data/ (so only the root-level data folder is ignored).

Now the mock data file is properly included in the repository, and all Library List tests are passing cleanly (23 tests across 2 suites with no "Cannot find module" errors).

Please review again whenever you get time. Let me know if anything else needs to be changed.

[manthansingh26]

@shrey16 Gentle follow-up on this PR.

I've addressed the requested changes by fixing the .gitignore issue. The mockLibraryData.ts file is now properly included, and all Library List tests are passing (23 tests across 2 suites with no errors).

Would appreciate it if you could review it when you have some time. Thanks!

[shrey16]

Thanks for the follow-up. The missing mock data file is fixed, and the library UI code now looks aligned with the RFC 0001 mocked Library List slice.

The remaining blocker is branch freshness: the raw branch still misses the current main Jest/TextEncoder setup, while a local merge of current main made the focused Library tests pass. Please rebase or merge the latest main into this branch. After that, we can approve the pending workflows and do final CI review.

Optional polish, not blocking the rebase: clamp negative storage usage to 0, add direct accessible labels/titles for the filter/sort dropdown buttons, and add one RTL interaction test for search/filter/sort behavior.

[shrey16]

Maintainer sync: this PR is still waiting on a rebase or merge from current main.

The mocked Library UI direction is still useful, but the branch is stale relative to the current test setup. Please update the branch with latest main; after that we can approve workflows and do the final CI/focused test review.

[shrey16]

Maintainer sync: this is still waiting on a branch refresh from current main.

The mocked Library UI direction is fine, but the branch remains stale and workflows still require maintainer approval. Please rebase or merge latest main; after that we can approve workflows and run final CI/focused tests. No new product changes are requested beyond the existing optional polish.

[shrey16]

Maintainer update: #48 is now the ready-for-review RFC 0001 foundation PR and will provide the shared artifact/file types this Library UI should align with.

The existing requested branch refresh still stands. After #48 lands, please rebase or merge latest main and type the mocked Library data against the exported file/artifact contract where practical. No private storage or production integration details are needed for this PR.

[shrey16]

Please rebase or merge current main; after that maintainers can approve workflows and rerun focused Library UI tests.

[shrey16]

Thanks for the update. The branch still needs to be rebased or merged with current \main\; GitHub reports it as diverged and behind. After that, maintainers can approve workflows and run final CI/focused Library UI review.

[shrey16]

Maintainer review complete. I updated the branch with current main, reviewed the mocked Library UI slice, and verified it locally with frontend:ci, focused Library tests, and the full client Jest suite. GitHub CI is also green on the updated head.\n\nNon-blocking follow-ups for later: clamp negative storage usage to 0, remove the stray empty JSX expression in LibraryFilters, and add interaction coverage for search/filter/sort when this gets wired to the real API.

[shrey16]

Maintainer design direction after local UI review: the current Library foundation is useful, but before merge we want this to move from a single basic row list into a user-switchable view pattern.

Please add a view control near the filters so users can switch between:

1. Dense list cards - default view. Keep this optimized for fast scanning and file management: compact horizontal rows/cards, file type icon, title, short description, type/status badge, source chat/conversation, updated time, size, and quick actions.
2. Preview cards - optional visual browsing view. Cards should include a type-aware preview area, not a generic placeholder. Suggested previews:
   • PPTX: slide/deck thumbnail style
   • PDF: page/document preview style
   • DOCX/MD: document page/text preview style
   • XLSX/CSV: spreadsheet/table preview style
   • HTML/code artifacts: browser/code preview style
   • fallback: clear file-type icon if no preview is available

Keep the layout aligned with the BharatCode visual direction: compact, professional, 8px radius, ivory/ink/deep-green base with restrained saffron/blue accents. Avoid generic oversized cards; preview mode can be richer, but dense mode should remain the default because it is better for large libraries.

Mockup direction:

Mockup source: https://gist.github.com/shrey16/acb004253c5dd5ce51f5abd432ee295e

[manthansingh26]

Pushed updates addressing both review comments:

Non-blocking fixes:

• Clamped negative storage usage to 0
• Removed the stray empty JSX expression in LibraryFilters

View toggle feature:

• Added a Dense/Preview view switcher next to the filters bar
• Preview cards now show type-aware previews (PPTX deck thumbnail, PDF page preview, DOCX/MD text preview, XLSX/CSV table preview, HTML/code browser-style preview, with fallback file icon)
• Dense list cards remain the default view
• Styled per the design direction: 8px radius, ivory/ink/deep-green base with saffron/blue accents

Added interaction tests for search, filter, sort, and the view toggle.

Ready for another look 🙌

[manthansingh26]

@shrey16 I have completely reviewed the components based on your feedback. The formatting is correct, and all lucide-react icons that had equivalents in @librechat/client have been replaced in my previous commits. For the remaining icons (like Search, Download, LayoutGrid), I have kept the lucide-react imports as there are no direct alternatives available in the internal library yet. The UI is completely stable. Please let me know if it's good to merge!

[shrey16]

Thanks for the update. The dense/preview toggle and type-aware previews are in the right direction, but the focused Library tests still fail locally on the latest head.

npx jest src/components/Library/__tests__/LibraryList.test.tsx src/components/Library/__tests__/libraryUtils.test.ts --runInBand --silent --coverage=false

FAIL src/components/Library/__tests__/LibraryList.test.tsx
- LibraryList › filters items by type
- LibraryList › sorts items by name

Unable to find button named /Filter by type/i
Unable to find button named /Sort library items/i

The dropdown trigger buttons do not expose stable accessible names for Filter by type and Sort library items; those labels are currently on wrapper groups while the actual buttons are named like : All types / : Newest first. Please fix the control accessibility or update the tests to target the correct accessible controls.

Also please disable/hide or wire Open/Download/Share/More when callbacks are missing, and avoid role="radiogroup" with plain pressed buttons unless the control uses real radio semantics.

After that we can approve workflows and rerun CI.

[shrey16]

Maintainer update: I’m taking over the remaining implementation work on this PR. No further action is required from the contributor.

I’ll port the Library UI onto a clean branch from current main, preserve attribution, resolve the accessible names and action/radio semantics identified in review, align the mocked data with the merged artifact contract, and run focused Library tests, the full client checks, and the production-runtime smoke test. The replacement PR will reference and supersede this one.

[shrey16]

Superseded by #81, which ports the Library work onto current main while preserving the contributor commits and attribution.\n\nThe reviewed blockers are resolved there: dropdown accessible names, pressed-button view semantics, unavailable actions, shared file/artifact contracts, and localization. Local verification passed (30 focused Library tests, 182 full client suites / 2,295 tests, package builds, and production runtime smoke), and all GitHub checks on #81 are green.\n\nClosing this stale-branch PR in favor of the clean maintainer replacement. Thank you again, @manthansingh26, for the original implementation and follow-through.