feat: add posters to search results

frontend/src/app/dashboard/components/SearchRequestModal.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { toast } from "sonner";
+import { Search, Loader2, Film, Tv, PlusCircle, Egg, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -27,6 +28,7 @@ export function SearchRequestModal({
 	const [loading, setLoading] = useState(false);
 
 	const search = async () => {
+		if (!query) return;
 		setLoading(true);
 		try {
 			const res = await api.get(
@@ -34,7 +36,7 @@ export function SearchRequestModal({
 			);
 			setResults(res.data?.results || res.data || []);
 		} catch {
-			toast.error("Search failed");
+			toast.error("Chickens lost the trail! Search failed.");
 		} finally {
 			setLoading(false);
 		}
@@ -48,54 +50,123 @@ export function SearchRequestModal({
 				title: item.title || item.name,
 				seasons: item.seasons,
 			});
-			toast.success("Request sent");
+			toast.success("Golden egg sent to the farmer!");
 			onOpenChange(false);
 		} catch (e: any) {
-			toast.error(e?.response?.data?.error || "Request failed");
+			toast.error(e?.response?.data?.error || "Request flew the coop!");
 		}
 	};
 
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent>
+			<DialogContent className="max-w-2xl rounded-[2.5rem] border-4 border-foreground bg-background p-0 overflow-hidden shadow-[15px_15px_0px_0px_rgba(0,0,0,1)]">
-				<DialogHeader>
+				<DialogHeader className="p-6 bg-primary border-b-4 border-foreground text-primary-foreground">
-					<DialogTitle>Request content</DialogTitle>
+					<div className="flex items-center justify-between">
-					<DialogDescription>
+						<DialogTitle className="font-display text-3xl uppercase italic tracking-tighter flex items-center gap-2">
-						Search and send request. Movie cost {costs.movie}. TV cost{" "}
+							<Search className="h-6 w-6" /> PECK FOR FEED
-						{costs.tv}.
+						</DialogTitle>
+						<Button
+							variant="ghost"
+							size="icon"
+							onClick={() => onOpenChange(false)}
+							className="rounded-full text-primary-foreground hover:bg-black/20"
+						>
+							<X className="h-6 w-6" />
+						</Button>
+					</div>
+					<DialogDescription className="text-primary-foreground/90 font-bold italic">
+						Movie: {costs.movie} $COOP // TV: {costs.tv} $COOP
 					</DialogDescription>
 				</DialogHeader>
-				<div className="space-y-3">
+
+				<div className="p-6 space-y-6 font-sans">
+					<div className="flex gap-2">
+						<div className="relative flex-1">
 							<Input
 								value={query}
 								onChange={(e) => setQuery(e.target.value)}
-						placeholder="Search movie or show"
+								onKeyDown={(e) => e.key === "Enter" && search()}
+								placeholder="Type movie or show name..."
+								className="rounded-full border-4 border-foreground h-14 pl-6 pr-12 font-bold text-lg focus-visible:ring-primary shadow-sm"
 							/>
-					<Button onClick={search} disabled={loading || !query}>
+							<Search className="absolute right-4 top-1/2 -translate-y-1/2 h-6 w-6 text-muted-foreground" />
-						Search
+						</div>
+						<Button
+							onClick={search}
+							disabled={loading || !query}
+							className="rounded-full h-14 px-8 border-4 border-foreground shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all font-black text-lg"
+						>
+							{loading ? <Loader2 className="animate-spin" /> : "SEARCH"}
 						</Button>
-					<div className="max-h-72 overflow-auto space-y-2">
+					</div>
+
+					<div className="max-h-[50vh] overflow-y-auto pr-2 space-y-4 scrollbar-hide">
 						{results.map((r) => (
 							<div
 								key={r.id || r.tmdbId}
-								className="flex items-center justify-between gap-2 border p-2 rounded"
+								className="group flex gap-4 border-4 border-foreground bg-card p-3 rounded-3xl hover:bg-accent/5 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.1)]"
 							>
-								<div>
+								<div className="relative h-28 w-20 flex-shrink-0 overflow-hidden rounded-xl border-2 border-foreground bg-muted shadow-sm">
-									<div className="font-medium">{r.title || r.name}</div>
+									{r.posterPath ? (
-									<div className="text-xs text-muted-foreground">
+										<img
-										{r.media_type || r.mediaType}
+											src={`https://image.tmdb.org/t/p/w200${r.posterPath}`}
+											alt={r.title || r.name}
+											className="h-full w-full object-cover group-hover:scale-110 transition-transform duration-300"
+										/>
+									) : (
+										<div className="flex h-full w-full items-center justify-center bg-secondary/20">
+											<Film className="h-8 w-8 text-muted-foreground/30" />
 										</div>
+									)}
+								</div>
+
+								<div className="flex flex-1 flex-col justify-between py-1">
+									<div>
+										<div className="font-black text-xl leading-tight line-clamp-1">
+											{r.title || r.name}
+										</div>
+										<div className="flex items-center gap-2 mt-1">
+											<span className="inline-flex items-center gap-1 rounded-full bg-secondary/30 px-2 py-0.5 text-[10px] font-black uppercase text-secondary-foreground border border-foreground/10">
+												{r.mediaType === "movie" ? (
+													<Film className="h-3 w-3" />
+												) : (
+													<Tv className="h-3 w-3" />
+												)}
+												{r.mediaType || "unknown"}
+											</span>
+											{r.releaseDate && (
+												<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
+													{new Date(r.releaseDate).getFullYear()}
+												</span>
+											)}
+										</div>
+									</div>
+
+									<div className="flex items-center justify-between gap-4 mt-2">
+										<div className="text-xs font-bold text-muted-foreground italic flex items-center gap-1">
+											<Egg className="h-3 w-3" />{" "}
+											{r.mediaType === "movie" ? costs.movie : costs.tv} $COOP
 										</div>
 										<Button
 											size="sm"
-									onClick={() =>
+											onClick={() => request(r, r.mediaType || "movie")}
-										request(r, r.media_type || r.mediaType || "movie")
+											className="rounded-full border-2 border-foreground font-black text-xs hover:bg-primary hover:text-white transition-colors"
-									}
 										>
-									Request
+											REQUEST <PlusCircle className="ml-1 h-3 w-3" />
 										</Button>
 									</div>
+								</div>
+							</div>
 						))}
+
+						{results.length === 0 && !loading && query && (
+							<div className="text-center py-10 opacity-40">
+								<div className="text-6xl mb-4">🏜️</div>
+								<div className="font-black uppercase tracking-widest">
+									Nothing found in the yard.
+								</div>
+							</div>
+						)}
 					</div>
 				</div>
 			</DialogContent>