feat: search bar

[sdankel]

Description

This pull request introduces a search functionality for packages, enhances the UI for search and navigation, and refactors existing code for improved readability and functionality.
The most significant changes include the addition of a database search query, updates to the search bar and results page, and removal of unused code.
The search is made responsive - with a debounce of 400ms (upon typing).
Additionally the views for mobile and desktop search have been adjusted.

Mobile UI

Desktop UI

Search Functionality:

• Database Search Query: Added a search_packages method in src/db/package_version.rs to enable searching for packages by name or description, with pagination support.
• API Changes: Updated app/src/utils/http.ts to include SearchResponse and PackagePreview interfaces, and added a new route for the search endpoint. [1] [2]

UI Enhancements:

• Search Bar: Refactored app/src/features/toolbar/components/SearchBar.tsx to use useRouter and useSearchParams for dynamic URL updates, added debounce for search queries, and improved styling for mobile responsiveness.
• Search Results Page: Replaced the previous placeholder implementation in app/src/pages/SearchResults.tsx with a fully functional search results page that fetches data from the backend, displays results, handles errors, and supports pagination.
• Home Page: Updated app/src/app/page.tsx to dynamically display search results or the package dashboard based on the presence of a query parameter.

Code Cleanup:

• Removed Unused Code: Eliminated the SearchPage component in app/src/app/search/page.tsx, which was redundant after integrating search functionality into the homepage.
• Removed useIsMobile Hook: Removed the useIsMobile hook and its references in app/src/App.tsx as it was replaced by useMediaQuery for responsiveness.

Utility Updates:

• Date Formatting: Added a formatDate function in app/src/utils/date.ts to format dates in a user-friendly manner for display in search results.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
forc-pub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2025 3:06am

[Copilot]

Pull Request Overview

Adds full-text package search with backend support, introduces responsive frontend components for querying and displaying results, and refactors/removes legacy search code.

• Implements a /search endpoint and search_packages DB query with pagination.
• Defines new TypeScript types (SearchResponse, PackagePreview) and integrates debounced, responsive search UI (SearchBar, SearchResults).
• Cleans up unused components/hooks and enhances date formatting utility.

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/main.rs	Added /search route and imported PackagePreview.
src/db/package_version.rs	Implemented search_packages SQL query with pagination.
app/src/utils/http.ts	Added SearchResponse & PackagePreview types and route entry.
app/src/utils/date.ts	Added formatDate utility.
app/src/pages/SearchResults.tsx	Replaced placeholder with functional search results page and pagination.
app/src/features/toolbar/components/SearchBar.tsx	Refactored SearchBar with debounce, dynamic URL updates, and responsive styling.
app/src/app/search/page.tsx	Removed redundant SearchPage component.
app/src/app/page.tsx	Conditionally render SearchResults or dashboard based on query.
app/src/App.tsx	Updated AppBar layout to include responsive SearchBar.
README.md	Updated libpq installation instructions and added cargo-binstall.

Comments suppressed due to low confidence (5)

app/src/pages/SearchResults.tsx:3

• The Suspense import is not used in this module. Remove it to clean up dead code.

import React, { Suspense, useEffect, useState, useRef } from "react";

README.md:48

• On Ubuntu/Debian, the development headers package is libpq-dev, not libpq5. Update the instruction to apt-get install libpq-dev.

apt-get install libpq5

src/db/package_version.rs:372

• The new search_packages method lacks unit or integration tests. Consider adding tests covering search queries, pagination behavior, and edge cases.

    pub fn search_packages(

app/src/utils/http.ts:9

• The SearchResponse interface uses camelCase fields (totalCount, totalPages, etc.) but the backend returns snake_case JSON (total_count, total_pages, etc.). Ensure the field names align by adjusting the interface or configuring the backend serializer.

  totalCount: number;

src/db/package_version.rs:403

• Remove the trailing semicolon from the SQL string passed to diesel::sql_query, as Diesel may reject statements terminated with ;.

LIMIT $3;