feat(scheduling): add advanced filter panel matching prototype

- Filter icon in list header with active count badge
- Expandable filter panel: plate search, region select, vehicle type select, customer select
- FilterSelect component with search for long option lists
- Active filter tags shown as removable pills below header
- Temp/confirmed filter pattern (edit → confirm/cancel)
- Result count displayed when filters active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-16 21:18:02 +08:00
parent 73080a605d
commit 1a5a1c1514
2 changed files with 418 additions and 174 deletions

View File

@@ -1,5 +1,6 @@
import { useState, useEffect, useCallback, useMemo } from 'react'; import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { RotateCcw } from 'lucide-react'; import { Filter, RotateCcw, X, Search, ChevronDown } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { fetchSuggestions } from './api'; import { fetchSuggestions } from './api';
import type { SchedulingResponse, SchedulingSuggestion } from './types'; import type { SchedulingResponse, SchedulingSuggestion } from './types';
import SuggestionList from './SuggestionList'; import SuggestionList from './SuggestionList';
@@ -7,6 +8,15 @@ import SuggestionDetail from './SuggestionDetail';
type TypeFilter = 'all' | 'qualified' | 'hopeless'; type TypeFilter = 'all' | 'qualified' | 'hopeless';
interface AdvancedFilters {
plateSearch: string;
region: string;
vehicleType: string;
customer: string;
}
const EMPTY_FILTERS: AdvancedFilters = { plateSearch: '', region: '', vehicleType: '', customer: '' };
function shortTargetName(name: string): string { function shortTargetName(name: string): string {
const match = name.match(/(\d+)[辆台](.+)/); const match = name.match(/(\d+)[辆台](.+)/);
if (!match) return name; if (!match) return name;
@@ -18,12 +28,91 @@ function shortTargetName(name: string): string {
return `${count}${desc}`; return `${count}${desc}`;
} }
function hasActiveFilters(f: AdvancedFilters): boolean {
return f.plateSearch !== '' || f.region !== '' || f.vehicleType !== '' || f.customer !== '';
}
/** Dropdown select with search */
function FilterSelect({ label, options, value, onChange, placeholder }: {
label: string;
options: string[];
value: string;
onChange: (v: string) => void;
placeholder: string;
}) {
const [open, setOpen] = useState(false);
const [search, setSearch] = useState('');
const ref = useRef<HTMLDivElement>(null);
const filtered = options.filter(o => o.toLowerCase().includes(search.toLowerCase()));
useEffect(() => {
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, []);
return (
<div ref={ref} className="space-y-1">
<label className="text-[10px] text-slate-400 uppercase font-bold">{label}</label>
<button
onClick={() => setOpen(!open)}
className="w-full flex items-center justify-between bg-slate-50 rounded-lg px-3 py-2 text-xs text-left cursor-pointer hover:bg-slate-100 transition-colors"
>
<span className={value ? 'text-slate-800 font-medium' : 'text-slate-400'}>{value || placeholder}</span>
<ChevronDown size={14} className={`text-slate-400 transition-transform ${open ? 'rotate-180' : ''}`} />
</button>
{open && (
<div className="bg-white border border-slate-200 rounded-lg shadow-lg max-h-48 overflow-hidden z-10">
{options.length > 5 && (
<div className="p-1.5 border-b border-slate-100">
<div className="relative">
<Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
<input
type="text"
value={search}
onChange={e => setSearch(e.target.value)}
placeholder="搜索..."
className="w-full pl-7 pr-2 py-1.5 text-xs bg-slate-50 rounded border-none outline-none"
autoFocus
/>
</div>
</div>
)}
<div className="overflow-y-auto max-h-36">
<button
onClick={() => { onChange(''); setOpen(false); setSearch(''); }}
className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-50 cursor-pointer ${!value ? 'text-blue-600 font-bold' : 'text-slate-400'}`}
>
</button>
{filtered.map(opt => (
<button
key={opt}
onClick={() => { onChange(opt); setOpen(false); setSearch(''); }}
className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-50 cursor-pointer ${value === opt ? 'text-blue-600 font-bold bg-blue-50' : 'text-slate-700'}`}
>
{opt}
</button>
))}
</div>
</div>
)}
</div>
);
}
export default function SchedulingModule() { export default function SchedulingModule() {
const [data, setData] = useState<SchedulingResponse | null>(null); const [data, setData] = useState<SchedulingResponse | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [selectedTargetId, setSelectedTargetId] = useState<number | undefined>(undefined); const [selectedTargetId, setSelectedTargetId] = useState<number | undefined>(undefined);
const [selectedSuggestion, setSelectedSuggestion] = useState<SchedulingSuggestion | null>(null); const [selectedSuggestion, setSelectedSuggestion] = useState<SchedulingSuggestion | null>(null);
const [typeFilter, setTypeFilter] = useState<TypeFilter>('all'); const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
const [showFilter, setShowFilter] = useState(false);
const [filters, setFilters] = useState<AdvancedFilters>(EMPTY_FILTERS);
const [tempFilters, setTempFilters] = useState<AdvancedFilters>(EMPTY_FILTERS);
const loadData = useCallback(async () => { const loadData = useCallback(async () => {
setLoading(true); setLoading(true);
@@ -36,133 +125,309 @@ export default function SchedulingModule() {
}, [selectedTargetId]); }, [selectedTargetId]);
useEffect(() => { loadData(); }, [loadData]); useEffect(() => { loadData(); }, [loadData]);
const handleNotifySuccess = useCallback(() => { loadData(); }, [loadData]); const handleNotifySuccess = useCallback(() => { loadData(); }, [loadData]);
// Compute filter options from data
const filterOptions = useMemo(() => {
if (!data) return { regions: [], vehicleTypes: [], customers: [] };
const regions = new Set<string>();
const vehicleTypes = new Set<string>();
const customers = new Set<string>();
for (const s of data.suggestions) {
const v = s.currentVehicle;
if (v.region) regions.add(v.region);
if (v.vehicleType) vehicleTypes.add(v.vehicleType);
if (v.customer) customers.add(v.customer);
}
return {
regions: Array.from(regions).sort(),
vehicleTypes: Array.from(vehicleTypes).sort(),
customers: Array.from(customers).sort(),
};
}, [data]);
const filteredSuggestions = useMemo(() => { const filteredSuggestions = useMemo(() => {
if (!data) return []; if (!data) return [];
if (typeFilter === 'qualified') return data.suggestions.filter(s => s.type === 'replace_qualified'); let list = data.suggestions;
if (typeFilter === 'hopeless') return data.suggestions.filter(s => s.type === 'rescue_hopeless');
return data.suggestions;
}, [data, typeFilter]);
const cardConfigs = [ // Type filter from cards
{ if (typeFilter === 'qualified') list = list.filter(s => s.type === 'replace_qualified');
key: 'qualified' as TypeFilter, if (typeFilter === 'hopeless') list = list.filter(s => s.type === 'rescue_hopeless');
label: '已达标',
count: data?.summary.qualifiedCount ?? 0, // Advanced filters
unit: '台', if (filters.plateSearch) {
sub: null, const q = filters.plateSearch.toLowerCase();
// Muted teal/green list = list.filter(s => s.currentVehicle.plateNumber.toLowerCase().includes(q));
idle: 'border-slate-200 bg-white', }
active: 'border-emerald-500 bg-emerald-50 ring-1 ring-emerald-500/20', if (filters.region) list = list.filter(s => s.currentVehicle.region === filters.region);
labelColor: 'text-slate-500', if (filters.vehicleType) list = list.filter(s => s.currentVehicle.vehicleType === filters.vehicleType);
labelActive: 'text-emerald-600', if (filters.customer) list = list.filter(s => s.currentVehicle.customer === filters.customer);
numColor: 'text-slate-800',
numActive: 'text-emerald-700', return list;
}, }, [data, typeFilter, filters]);
{
key: 'hopeless' as TypeFilter, const summary = data?.summary;
label: '无望达标', const activeFilterCount = [filters.plateSearch, filters.region, filters.vehicleType, filters.customer].filter(Boolean).length;
count: data?.summary.hopelessCount ?? 0,
unit: '台',
sub: null,
// Warm red
idle: 'border-slate-200 bg-white',
active: 'border-rose-500 bg-rose-50 ring-1 ring-rose-500/20',
labelColor: 'text-slate-500',
labelActive: 'text-rose-600',
numColor: 'text-slate-800',
numActive: 'text-rose-700',
},
{
key: 'all' as TypeFilter,
label: '可干预',
count: data?.summary.suggestionCount ?? 0,
unit: '条',
sub: data ? `+${data.summary.estimatedGain} 台可达标` : null,
// Blue accent
idle: 'border-slate-200 bg-white',
active: 'border-blue-500 bg-blue-50 ring-1 ring-blue-500/20',
labelColor: 'text-slate-500',
labelActive: 'text-blue-600',
numColor: 'text-slate-800',
numActive: 'text-blue-700',
},
];
return ( return (
<div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6" style={{ overflowX: 'clip' }}> <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6" style={{ overflowX: 'clip' }}>
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 md:pb-0"> <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 md:pb-0">
{/* Batch Selector */} {/* ========== Top: Summary Cards ========== */}
<div className="bg-white p-2 rounded-2xl shadow-sm border border-slate-100 flex gap-1 overflow-x-auto no-scrollbar"> <div className="grid grid-cols-3 gap-3">
<button
onClick={() => setTypeFilter(typeFilter === 'qualified' ? 'all' : 'qualified')}
className={`p-4 rounded-2xl text-left transition-all cursor-pointer ${
typeFilter === 'qualified'
? 'bg-amber-100 border-2 border-amber-400 shadow-sm'
: 'bg-amber-50 border border-amber-100'
}`}
>
<div className="text-[10px] font-bold text-amber-700 mb-1"></div>
<div className="text-2xl font-black text-amber-800">
{loading && !data ? '-' : summary?.qualifiedCount ?? 0}
<span className="text-xs font-normal text-amber-600 ml-1"></span>
</div>
<div className="text-[9px] text-amber-600 mt-1"> 120%</div>
</button>
<button
onClick={() => setTypeFilter(typeFilter === 'hopeless' ? 'all' : 'hopeless')}
className={`p-4 rounded-2xl text-left transition-all cursor-pointer ${
typeFilter === 'hopeless'
? 'bg-blue-100 border-2 border-blue-400 shadow-sm'
: 'bg-blue-50 border border-blue-100'
}`}
>
<div className="text-[10px] font-bold text-blue-700 mb-1"></div>
<div className="text-2xl font-black text-blue-800">
{loading && !data ? '-' : summary?.hopelessCount ?? 0}
<span className="text-xs font-normal text-blue-600 ml-1"></span>
</div>
<div className="text-[9px] text-blue-600 mt-1"> &lt; 60%</div>
</button>
<button
onClick={() => setTypeFilter('all')}
className={`p-4 rounded-2xl text-left transition-all cursor-pointer ${
typeFilter === 'all'
? 'bg-emerald-100 border-2 border-emerald-400 shadow-sm'
: 'bg-emerald-50 border border-emerald-100'
}`}
>
<div className="text-[10px] font-bold text-emerald-700 mb-1"></div>
<div className="text-2xl font-black text-emerald-800">
{loading && !data ? '-' : summary?.suggestionCount ?? 0}
<span className="text-xs font-normal text-emerald-600 ml-1"></span>
</div>
<div className="text-[9px] text-emerald-600 mt-1">
+{summary?.estimatedGain ?? 0}
</div>
</button>
</div>
{/* ========== Bottom: List Card ========== */}
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
{/* Header */}
<div className="px-4 py-3 border-b border-slate-100">
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-bold text-slate-900"></h3>
<div className="flex items-center gap-1">
<button
onClick={loadData}
disabled={loading}
className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer"
>
<RotateCcw size={15} className={loading ? 'animate-spin' : ''} />
</button>
<button
onClick={() => { setShowFilter(!showFilter); setTempFilters(filters); }}
className={`relative p-1.5 transition-colors rounded-lg cursor-pointer ${
showFilter || activeFilterCount > 0
? 'text-blue-600 bg-blue-50'
: 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'
}`}
>
<Filter size={15} />
{activeFilterCount > 0 && (
<span className="absolute -top-1 -right-1 w-4 h-4 bg-blue-600 text-white text-[8px] font-bold rounded-full flex items-center justify-center">
{activeFilterCount}
</span>
)}
</button>
</div>
</div>
{/* Batch selector pills */}
<div className="flex gap-2 overflow-x-auto no-scrollbar">
<button <button
onClick={() => { setSelectedTargetId(undefined); setTypeFilter('all'); }} onClick={() => { setSelectedTargetId(undefined); setTypeFilter('all'); }}
className={`flex-shrink-0 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all cursor-pointer ${ className={`px-4 py-1.5 rounded-full text-[11px] font-bold whitespace-nowrap transition-all cursor-pointer ${
selectedTargetId === undefined selectedTargetId === undefined
? 'bg-slate-800 text-white shadow-md' ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
: 'bg-slate-50 text-slate-500 hover:bg-slate-100' : 'bg-slate-50 text-slate-500 hover:bg-slate-100'
}`} }`}
> >
</button> </button>
{data?.targets.map((target) => ( {data?.targets.map(t => (
<button <button
key={target.id} key={t.id}
onClick={() => { setSelectedTargetId(target.id); setTypeFilter('all'); }} onClick={() => { setSelectedTargetId(t.id); setTypeFilter('all'); }}
className={`flex-shrink-0 px-3 py-1.5 rounded-xl text-xs font-semibold transition-all cursor-pointer ${ className={`px-4 py-1.5 rounded-full text-[11px] font-bold whitespace-nowrap transition-all cursor-pointer ${
selectedTargetId === target.id selectedTargetId === t.id
? 'bg-slate-800 text-white shadow-md' ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
: 'bg-slate-50 text-slate-500 hover:bg-slate-100' : 'bg-slate-50 text-slate-500 hover:bg-slate-100'
}`} }`}
> >
{shortTargetName(target.name)} {shortTargetName(t.name)}
</button> </button>
))} ))}
</div> </div>
</div>
{/* Advanced Filter Panel */}
<AnimatePresence>
{showFilter && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
className="overflow-hidden border-b border-slate-100"
>
<div className="px-4 py-4 bg-slate-50/50 space-y-3">
<div className="flex items-center justify-between">
<span className="text-xs font-bold text-slate-700"></span>
{hasActiveFilters(tempFilters) && (
<button
onClick={() => setTempFilters(EMPTY_FILTERS)}
className="text-[10px] text-slate-400 hover:text-slate-600 cursor-pointer"
>
</button>
)}
</div>
{/* Plate search */}
<div className="space-y-1">
<label className="text-[10px] text-slate-400 uppercase font-bold"></label>
<div className="relative">
<Search size={12} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
<input
type="text"
value={tempFilters.plateSearch}
onChange={e => setTempFilters(prev => ({ ...prev, plateSearch: e.target.value }))}
placeholder="搜索车牌号..."
className="w-full pl-8 pr-3 py-2 bg-white rounded-lg text-xs border border-slate-200 outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition-all"
/>
</div>
</div>
{/* Selects in 2-column grid */}
<div className="grid grid-cols-2 gap-3">
<FilterSelect
label="运营区域"
options={filterOptions.regions}
value={tempFilters.region}
onChange={v => setTempFilters(prev => ({ ...prev, region: v }))}
placeholder="全部区域"
/>
<FilterSelect
label="车辆类型"
options={filterOptions.vehicleTypes}
value={tempFilters.vehicleType}
onChange={v => setTempFilters(prev => ({ ...prev, vehicleType: v }))}
placeholder="全部类型"
/>
</div>
<FilterSelect
label="客户"
options={filterOptions.customers}
value={tempFilters.customer}
onChange={v => setTempFilters(prev => ({ ...prev, customer: v }))}
placeholder="全部客户"
/>
{/* Apply / Cancel */}
<div className="flex gap-2 pt-1">
<button
onClick={() => setShowFilter(false)}
className="flex-1 py-2 text-xs font-bold text-slate-500 bg-white border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors"
>
</button>
<button
onClick={() => { setFilters(tempFilters); setShowFilter(false); }}
className="flex-1 py-2 text-xs font-bold text-white bg-blue-600 rounded-lg cursor-pointer hover:bg-blue-700 transition-colors shadow-sm shadow-blue-200"
>
</button>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
{/* Active filter tags */}
{activeFilterCount > 0 && !showFilter && (
<div className="px-4 py-2 border-b border-slate-100 flex items-center gap-2 flex-wrap">
<span className="text-[10px] text-slate-400">:</span>
{filters.plateSearch && (
<span className="text-[10px] bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full flex items-center gap-1">
"{filters.plateSearch}"
<X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, plateSearch: '' }))} />
</span>
)}
{filters.region && (
<span className="text-[10px] bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full flex items-center gap-1">
{filters.region}
<X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, region: '' }))} />
</span>
)}
{filters.vehicleType && (
<span className="text-[10px] bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full flex items-center gap-1">
{filters.vehicleType}
<X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, vehicleType: '' }))} />
</span>
)}
{filters.customer && (
<span className="text-[10px] bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full flex items-center gap-1">
{filters.customer}
<X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, customer: '' }))} />
</span>
)}
<button
onClick={() => setFilters(EMPTY_FILTERS)}
className="text-[10px] text-slate-400 hover:text-slate-600 cursor-pointer"
>
</button>
</div>
)}
{/* Result count when filtered */}
{(activeFilterCount > 0 || typeFilter !== 'all') && (
<div className="px-4 py-1.5 border-b border-slate-50 text-[10px] text-slate-400">
{filteredSuggestions.length}
</div>
)}
{/* List body */}
{loading && !data ? ( {loading && !data ? (
<div className="flex items-center justify-center py-20"> <div className="flex items-center justify-center py-20">
<div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" /> <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
</div> </div>
) : data ? ( ) : (
<>
{/* Summary Cards — clickable filter */}
<div className="grid grid-cols-3 gap-2">
{cardConfigs.map(cfg => {
const isActive = typeFilter === cfg.key;
return (
<button
key={cfg.key}
onClick={() => setTypeFilter(isActive ? 'all' : cfg.key)}
className={`p-3 rounded-2xl border text-left transition-all cursor-pointer ${isActive ? cfg.active : cfg.idle}`}
>
<div className={`text-[10px] font-bold mb-1 transition-colors ${isActive ? cfg.labelActive : cfg.labelColor}`}>
{cfg.label}
</div>
<div className={`text-xl font-black transition-colors ${isActive ? cfg.numActive : cfg.numColor}`}>
{cfg.count}
<span className={`text-[10px] font-normal ml-1 ${isActive ? cfg.labelActive : 'text-slate-400'}`}>{cfg.unit}</span>
</div>
{cfg.sub && (
<div className={`text-[9px] mt-0.5 ${isActive ? cfg.labelActive : 'text-slate-400'}`}>{cfg.sub}</div>
)}
</button>
);
})}
</div>
{/* Suggestion List */}
<SuggestionList <SuggestionList
suggestions={filteredSuggestions} suggestions={filteredSuggestions}
onSelect={setSelectedSuggestion} onSelect={setSelectedSuggestion}
loading={loading}
onRefresh={loadData}
/> />
</> )}
) : null} </div>
{/* Detail Modal */}
{selectedSuggestion && ( {selectedSuggestion && (
<SuggestionDetail <SuggestionDetail
suggestion={selectedSuggestion} suggestion={selectedSuggestion}

View File

@@ -1,4 +1,4 @@
import { ArrowRightLeft, ChevronRight, RotateCcw } from 'lucide-react'; import { ArrowRightLeft, ChevronRight } from 'lucide-react';
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import type { SchedulingSuggestion } from './types'; import type { SchedulingSuggestion } from './types';
import Blur from '../../components/Blur'; import Blur from '../../components/Blur';
@@ -6,18 +6,16 @@ import Blur from '../../components/Blur';
interface Props { interface Props {
suggestions: SchedulingSuggestion[]; suggestions: SchedulingSuggestion[];
onSelect: (s: SchedulingSuggestion) => void; onSelect: (s: SchedulingSuggestion) => void;
loading?: boolean;
onRefresh?: () => void;
} }
function fmtRate(rate: number): string { function fmtRate(rate: number): string {
return (rate * 100).toFixed(1) + '%'; return (rate * 100).toFixed(1) + '%';
} }
export default function SuggestionList({ suggestions, onSelect, loading, onRefresh }: Props) { export default function SuggestionList({ suggestions, onSelect }: Props) {
if (suggestions.length === 0) { if (suggestions.length === 0) {
return ( return (
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-12 text-center"> <div className="py-16 text-center">
<ArrowRightLeft className="w-8 h-8 text-slate-200 mx-auto mb-2" /> <ArrowRightLeft className="w-8 h-8 text-slate-200 mx-auto mb-2" />
<p className="text-sm text-slate-400"></p> <p className="text-sm text-slate-400"></p>
</div> </div>
@@ -25,24 +23,6 @@ export default function SuggestionList({ suggestions, onSelect, loading, onRefre
} }
return ( return (
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
<div className="flex items-center gap-2 px-4 py-2.5 border-b border-slate-100">
<div className="w-1 h-4 rounded-full bg-blue-500" />
<span className="text-sm font-bold text-slate-700 flex-1"></span>
{onRefresh && (
<button
onClick={onRefresh}
disabled={loading}
className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer"
>
<RotateCcw size={13} className={loading ? 'animate-spin' : ''} />
</button>
)}
<span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
{suggestions.length}
</span>
</div>
<div className="divide-y divide-slate-50"> <div className="divide-y divide-slate-50">
{suggestions.map((s, idx) => { {suggestions.map((s, idx) => {
const isRescue = s.type === 'rescue_hopeless'; const isRescue = s.type === 'rescue_hopeless';
@@ -92,6 +72,5 @@ export default function SuggestionList({ suggestions, onSelect, loading, onRefre
); );
})} })}
</div> </div>
</div>
); );
} }