Remove home page search bar (Task #22)

The home page previously showed a search input + «بحث» button above the
featured opportunities. The user asked to remove it so the home page goes
straight to the featured opportunities.

Changes (artifacts/ehsan-poc/src/pages/home.tsx):
- Deleted the search UI block (label, Search-icon input, search button).
- Removed the now-unused `query`/`setQuery` state and the client-side
  filtering; the featured grid now maps over published requests directly
  via a `featured` list.
- Simplified the empty state to always use t.opportunities.noOpportunities
  (dropped the search-specific noResults branch).
- Removed now-unused imports: `Input` and the `Search` lucide icon.
  `Button` is kept (still used by the hero CTA).

Out of scope (unchanged): opportunities page search/filter, header nav.
Unused translation keys (home.searchLabel/searchButton/noResults,
common.searchPlaceholder) were left in translations.ts as they are shared
strings and harmless; no behavioral impact.

Verified: tsc --noEmit clean.
This commit is contained in:
Replit Agent
2026-06-05 20:28:39 +00:00
parent de047f0ed1
commit d875912805
+5 -34
View File
@@ -3,12 +3,11 @@ import { useLanguage } from "../contexts/LanguageContext";
import { useListPublishedRequests } from "@workspace/api-client-react"; import { useListPublishedRequests } from "@workspace/api-client-react";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { OpportunityCard } from "../components/OpportunityCard"; import { OpportunityCard } from "../components/OpportunityCard";
import { Reveal } from "../components/Reveal"; import { Reveal } from "../components/Reveal";
import { Link } from "wouter"; import { Link } from "wouter";
import { Search, Pause, Play } from "lucide-react"; import { Pause, Play } from "lucide-react";
import zakatBanner from "@assets/zakatbanarWEB_1780682994527.png"; import zakatBanner from "@assets/zakatbanarWEB_1780682994527.png";
import dawriBanner from "@assets/dawribanarWEB_1780682998494.png"; import dawriBanner from "@assets/dawribanarWEB_1780682998494.png";
import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png"; import waqfBanner from "@assets/waqfbanerWEB_1780683002610.png";
@@ -43,7 +42,6 @@ function Ornament({ className = "" }: { className?: string }) {
export default function Home() { export default function Home() {
const { t } = useLanguage(); const { t } = useLanguage();
const { data: published, isLoading: pubLoading } = useListPublishedRequests(); const { data: published, isLoading: pubLoading } = useListPublishedRequests();
const [query, setQuery] = useState("");
const [slide, setSlide] = useState(0); const [slide, setSlide] = useState(0);
const [paused, setPaused] = useState(false); const [paused, setPaused] = useState(false);
@@ -56,15 +54,7 @@ export default function Home() {
return () => clearInterval(id); return () => clearInterval(id);
}, [paused]); }, [paused]);
const filtered = (published || []).filter((r) => { const featured = published || [];
if (!query.trim()) return true;
const q = query.toLowerCase();
return (
r.caseId.toLowerCase().includes(q) ||
r.description.toLowerCase().includes(q) ||
r.beneficiaryName.toLowerCase().includes(q)
);
});
return ( return (
<> <>
@@ -150,36 +140,17 @@ export default function Home() {
<div className="container mx-auto px-4 py-12"> <div className="container mx-auto px-4 py-12">
{/* Featured Opportunities */} {/* Featured Opportunities */}
<section className="mb-16"> <section className="mb-16">
{/* Search */}
<div className="mb-8 max-w-xl">
<label htmlFor="home-search" className="sr-only">{t.home.searchLabel}</label>
<div className="flex gap-2">
<div className="relative flex-1">
<Search className="absolute start-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<Input
id="home-search"
className="ps-9"
placeholder={t.common.searchPlaceholder}
value={query}
onChange={(e) => setQuery(e.target.value)}
data-testid="input-search"
/>
</div>
<Button data-testid="button-search">{t.home.searchButton}</Button>
</div>
</div>
{pubLoading ? ( {pubLoading ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[1, 2, 3].map((i) => <Skeleton key={i} className="h-96 w-full" />)} {[1, 2, 3].map((i) => <Skeleton key={i} className="h-96 w-full" />)}
</div> </div>
) : filtered.length === 0 ? ( ) : featured.length === 0 ? (
<div className="col-span-full text-center py-12 text-muted-foreground bg-muted/20 rounded-xl border border-dashed"> <div className="col-span-full text-center py-12 text-muted-foreground bg-muted/20 rounded-xl border border-dashed">
{query.trim() ? t.home.noResults : t.opportunities.noOpportunities} {t.opportunities.noOpportunities}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filtered.slice(0, 6).map((request, i) => ( {featured.slice(0, 6).map((request, i) => (
<Reveal key={request.id} delay={(i % 3) * 0.08} className="h-full"> <Reveal key={request.id} delay={(i % 3) * 0.08} className="h-full">
<OpportunityCard request={request} /> <OpportunityCard request={request} />
</Reveal> </Reveal>