aimond/sapiens-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a close button and adjust spacing in the search pop-up window

Browse Source 
Updates SearchModal component: adds a close (X) icon next to the search bar, reduces padding and margin between elements within the modal for a more compact layout, and imports the X icon from lucide-react.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bLfICpO
This commit is contained in:
kimjaehyeon0101
2025-09-29 21:36:44 +00:00
parent 153f2e504b
commit 1dedb1117c
1 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/components/SearchModal.tsx
View File

@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/react-query";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Search } from "lucide-react"; import { Search, X } from "lucide-react";
import { Link } from "wouter"; import { Link } from "wouter";
import type { MediaOutlet, Article } from "@shared/schema"; import type { MediaOutlet, Article } from "@shared/schema";
@ -59,10 +59,10 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
return ( return (
<Dialog open={isOpen} onOpenChange={handleClose}> <Dialog open={isOpen} onOpenChange={handleClose}>
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden"> <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden p-0 [&>button]:hidden">
<DialogTitle className="sr-only">Search Articles and Media Outlets</DialogTitle> <DialogTitle className="sr-only">Search Articles and Media Outlets</DialogTitle>
{/* Search Header */} {/* Search Header */}
<div className="flex items-center pb-4 border-b pr-8"> <div className="flex items-center gap-2 p-3 border-b">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<Input <Input
@ -75,45 +75,53 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
autoFocus autoFocus
/> />
</div> </div>
<button
onClick={handleClose}
className="p-2 hover:bg-gray-100 rounded transition-colors"
data-testid="search-modal-close"
aria-label="Close"
>
<X className="h-4 w-4 text-gray-500" />
</button>
</div> </div>
{/* Search Results */} {/* Search Results */}
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto p-3">
{!debouncedQuery.trim() ? ( {!debouncedQuery.trim() ? (
/* Empty State */ /* Empty State */
<div className="text-center py-12 text-gray-500"> <div className="text-center py-8 text-gray-500">
<p>Start typing to search articles and outlets</p> <p className="text-sm">Start typing to search articles and outlets</p>
</div> </div>
) : isLoading ? ( ) : isLoading ? (
/* Loading State */ /* Loading State */
<div className="space-y-4"> <div className="space-y-2">
{Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="animate-pulse"> <div key={i} className="animate-pulse">
<div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div> <div className="h-4 bg-gray-200 rounded w-3/4 mb-1"></div>
<div className="h-3 bg-gray-200 rounded w-1/2"></div> <div className="h-3 bg-gray-200 rounded w-1/2"></div>
</div> </div>
))} ))}
</div> </div>
) : totalResults === 0 ? ( ) : totalResults === 0 ? (
/* No Results */ /* No Results */
<div className="text-center py-12 text-gray-500"> <div className="text-center py-8 text-gray-500">
<p>No results found for "{debouncedQuery}"</p> <p className="text-sm">No results found for "{debouncedQuery}"</p>
<p className="text-sm mt-2">Try a different search term</p> <p className="text-xs mt-1">Try a different search term</p>
</div> </div>
) : ( ) : (
/* Search Results */ /* Search Results */
<> <>
<div className="mb-4 text-sm text-gray-500"> <div className="mb-2 text-xs text-gray-500">
{totalResults} results found {totalResults} results found
</div> </div>
{/* Outlets Section */} {/* Outlets Section */}
{searchResults && searchResults.outlets.length > 0 && ( {searchResults && searchResults.outlets.length > 0 && (
<div className="mb-6"> <div className="mb-3">
<h3 className="text-sm font-semibold text-gray-700 mb-3"> <h3 className="text-sm font-semibold text-gray-700 mb-2">
Outlets ({searchResults.outlets.length}) Outlets ({searchResults.outlets.length})
</h3> </h3>
<div className="space-y-3"> <div className="space-y-2">
{searchResults.outlets.map((outlet) => ( {searchResults.outlets.map((outlet) => (
<Link <Link
key={outlet.id} key={outlet.id}
@ -121,8 +129,8 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
onClick={handleLinkClick} onClick={handleLinkClick}
data-testid={`search-outlet-${outlet.id}`} data-testid={`search-outlet-${outlet.id}`}
> >
<div className="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg border cursor-pointer"> <div className="flex items-center gap-2 p-2 hover:bg-gray-50 rounded border cursor-pointer">
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden"> <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden flex-shrink-0">
{outlet.imageUrl ? ( {outlet.imageUrl ? (
<img <img
src={outlet.imageUrl} src={outlet.imageUrl}
@ -130,21 +138,21 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (
<span className="text-gray-600 font-medium text-sm"> <span className="text-gray-600 font-medium text-xs">
{outlet.name.charAt(0)} {outlet.name.charAt(0)}
</span> </span>
)} )}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center space-x-2 mb-1"> <div className="flex items-center gap-1.5 mb-0.5">
<h4 className="font-medium text-gray-900 truncate"> <h4 className="font-medium text-sm text-gray-900 truncate">
{outlet.name} {outlet.name}
</h4> </h4>
<Badge variant="secondary" className="text-xs"> <Badge variant="secondary" className="text-xs py-0">
{outlet.category} {outlet.category}
</Badge> </Badge>
</div> </div>
<p className="text-sm text-gray-500 truncate"> <p className="text-xs text-gray-500 truncate">
{outlet.description || "Media Outlet"} {outlet.description || "Media Outlet"}
</p> </p>
</div> </div>
@ -158,10 +166,10 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
{/* Articles Section */} {/* Articles Section */}
{searchResults && searchResults.articles.length > 0 && ( {searchResults && searchResults.articles.length > 0 && (
<div> <div>
<h3 className="text-sm font-semibold text-gray-700 mb-3"> <h3 className="text-sm font-semibold text-gray-700 mb-2">
Articles ({searchResults.articles.length}) Articles ({searchResults.articles.length})
</h3> </h3>
<div className="space-y-3"> <div className="space-y-2">
{searchResults.articles.map((article) => ( {searchResults.articles.map((article) => (
<Link <Link
key={article.id} key={article.id}
@ -169,9 +177,9 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
onClick={handleLinkClick} onClick={handleLinkClick}
data-testid={`search-article-${article.id}`} data-testid={`search-article-${article.id}`}
> >
<div className="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg border cursor-pointer"> <div className="flex items-start gap-2 p-2 hover:bg-gray-50 rounded border cursor-pointer">
{article.imageUrl && ( {article.imageUrl && (
<div className="w-16 h-12 rounded bg-gray-100 overflow-hidden flex-shrink-0"> <div className="w-12 h-9 rounded bg-gray-100 overflow-hidden flex-shrink-0">
<img <img
src={article.imageUrl} src={article.imageUrl}
alt={article.title} alt={article.title}
@ -180,14 +188,14 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
</div> </div>
)} )}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h4 className="font-medium text-gray-900 line-clamp-2 mb-1"> <h4 className="font-medium text-sm text-gray-900 line-clamp-2 mb-0.5">
{article.title} {article.title}
</h4> </h4>
<p className="text-sm text-gray-500 line-clamp-2"> <p className="text-xs text-gray-500 line-clamp-1">
{article.excerpt || ""} {article.excerpt || ""}
</p> </p>
{article.publishedAt && ( {article.publishedAt && (
<p className="text-xs text-gray-400 mt-1"> <p className="text-xs text-gray-400 mt-0.5">
{new Date(article.publishedAt).toLocaleDateString('en-US', { {new Date(article.publishedAt).toLocaleDateString('en-US', {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',