Remove redundant search bar from Home, rename page filters

- Remove SearchInput from Home page (use GlobalSearch in header instead)
- Rename "Search packages..." to "Filter packages..." on ProjectPage
- Rename "Search tags..." to "Filter tags..." on PackagePage
- Update FilterChip labels from "Search" to "Filter"

This differentiates the global search (header) from page-level filtering.
This commit is contained in:
Mondo Diaz
2025-12-12 12:55:31 -06:00
parent 0e1474bf6c
commit 2097865874
3 changed files with 6 additions and 20 deletions

View File

@@ -3,7 +3,6 @@ import { Link, useSearchParams } from 'react-router-dom';
import { Project, PaginatedResponse } from '../types'; import { Project, PaginatedResponse } from '../types';
import { listProjects, createProject } from '../api'; import { listProjects, createProject } from '../api';
import { Badge } from '../components/Badge'; import { Badge } from '../components/Badge';
import { SearchInput } from '../components/SearchInput';
import { SortDropdown, SortOption } from '../components/SortDropdown'; import { SortDropdown, SortOption } from '../components/SortDropdown';
import { FilterDropdown, FilterOption } from '../components/FilterDropdown'; import { FilterDropdown, FilterOption } from '../components/FilterDropdown';
import { FilterChip, FilterChipGroup } from '../components/FilterChip'; import { FilterChip, FilterChipGroup } from '../components/FilterChip';
@@ -34,7 +33,6 @@ function Home() {
// Get params from URL // Get params from URL
const page = parseInt(searchParams.get('page') || '1', 10); const page = parseInt(searchParams.get('page') || '1', 10);
const search = searchParams.get('search') || '';
const sort = searchParams.get('sort') || 'name'; const sort = searchParams.get('sort') || 'name';
const order = (searchParams.get('order') || 'asc') as 'asc' | 'desc'; const order = (searchParams.get('order') || 'asc') as 'asc' | 'desc';
const visibility = searchParams.get('visibility') || ''; const visibility = searchParams.get('visibility') || '';
@@ -59,7 +57,6 @@ function Home() {
setLoading(true); setLoading(true);
const data = await listProjects({ const data = await listProjects({
page, page,
search,
sort, sort,
order, order,
visibility: visibility as 'public' | 'private' | undefined || undefined, visibility: visibility as 'public' | 'private' | undefined || undefined,
@@ -71,7 +68,7 @@ function Home() {
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, [page, search, sort, order, visibility]); }, [page, sort, order, visibility]);
useEffect(() => { useEffect(() => {
loadProjects(); loadProjects();
@@ -92,10 +89,6 @@ function Home() {
} }
} }
const handleSearchChange = (value: string) => {
updateParams({ search: value, page: '1' });
};
const handleSortChange = (newSort: string, newOrder: 'asc' | 'desc') => { const handleSortChange = (newSort: string, newOrder: 'asc' | 'desc') => {
updateParams({ sort: newSort, order: newOrder, page: '1' }); updateParams({ sort: newSort, order: newOrder, page: '1' });
}; };
@@ -112,7 +105,7 @@ function Home() {
setSearchParams({}); setSearchParams({});
}; };
const hasActiveFilters = search !== '' || visibility !== ''; const hasActiveFilters = visibility !== '';
const projects = projectsData?.items || []; const projects = projectsData?.items || [];
const pagination = projectsData?.pagination; const pagination = projectsData?.pagination;
@@ -172,12 +165,6 @@ function Home() {
)} )}
<div className="list-controls"> <div className="list-controls">
<SearchInput
value={search}
onChange={handleSearchChange}
placeholder="Search projects..."
className="list-controls__search"
/>
<FilterDropdown <FilterDropdown
label="Visibility" label="Visibility"
options={VISIBILITY_OPTIONS} options={VISIBILITY_OPTIONS}
@@ -189,7 +176,6 @@ function Home() {
{hasActiveFilters && ( {hasActiveFilters && (
<FilterChipGroup onClearAll={clearFilters}> <FilterChipGroup onClearAll={clearFilters}>
{search && <FilterChip label="Search" value={search} onRemove={() => handleSearchChange('')} />}
{visibility && ( {visibility && (
<FilterChip <FilterChip
label="Visibility" label="Visibility"

View File

@@ -325,7 +325,7 @@ function PackagePage() {
<SearchInput <SearchInput
value={search} value={search}
onChange={handleSearchChange} onChange={handleSearchChange}
placeholder="Search tags..." placeholder="Filter tags..."
className="list-controls__search" className="list-controls__search"
/> />
<SortDropdown options={SORT_OPTIONS} value={sort} order={order} onChange={handleSortChange} /> <SortDropdown options={SORT_OPTIONS} value={sort} order={order} onChange={handleSortChange} />
@@ -333,7 +333,7 @@ function PackagePage() {
{hasActiveFilters && ( {hasActiveFilters && (
<FilterChipGroup onClearAll={clearFilters}> <FilterChipGroup onClearAll={clearFilters}>
{search && <FilterChip label="Search" value={search} onRemove={() => handleSearchChange('')} />} {search && <FilterChip label="Filter" value={search} onRemove={() => handleSearchChange('')} />}
</FilterChipGroup> </FilterChipGroup>
)} )}

View File

@@ -226,7 +226,7 @@ function ProjectPage() {
<SearchInput <SearchInput
value={search} value={search}
onChange={handleSearchChange} onChange={handleSearchChange}
placeholder="Search packages..." placeholder="Filter packages..."
className="list-controls__search" className="list-controls__search"
/> />
<select <select
@@ -246,7 +246,7 @@ function ProjectPage() {
{hasActiveFilters && ( {hasActiveFilters && (
<FilterChipGroup onClearAll={clearFilters}> <FilterChipGroup onClearAll={clearFilters}>
{search && <FilterChip label="Search" value={search} onRemove={() => handleSearchChange('')} />} {search && <FilterChip label="Filter" value={search} onRemove={() => handleSearchChange('')} />}
{format && <FilterChip label="Format" value={format} onRemove={() => handleFormatChange('')} />} {format && <FilterChip label="Format" value={format} onRemove={() => handleFormatChange('')} />}
</FilterChipGroup> </FilterChipGroup>
)} )}