refactor(collection-map): drop Drivers sidebar card + driver multi-select

This commit is contained in:
SJCoetz 2026-07-11 23:43:10 +02:00
parent d876455e41
commit dcfe662c9f

View file

@ -306,7 +306,6 @@ export default function CollectionMapPage() {
// single planning session; Leaflet caches tiles client-side so
// repeat zoom/pan into the same region is free.
const [trafficEnabled, setTrafficEnabled] = useState(false);
const [enabledDriverIds, setEnabledDriverIds] = useState<Set<string>>(new Set());
const [allUsers, setAllUsers] = useState<LookupUser[]>([]);
const [zoom, setZoom] = useState(10);
@ -633,15 +632,6 @@ export default function CollectionMapPage() {
return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
}, [items, driverMap]);
const toggleDriver = (id: string) => {
setEnabledDriverIds((cur) => {
const next = new Set(cur);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
};
/* -- render -------------------------------------------------------------- */
const stopCount = stopsWithCoords.reduce((s, x) => s + x.items.length, 0);
@ -881,79 +871,6 @@ export default function CollectionMapPage() {
{/* Sidebar */}
<div className="space-y-4">
{/* Drivers */}
<Card className="border-primary/10">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Users className="h-4 w-4 text-primary" />
Drivers
<Badge variant="outline" className="ml-auto">
{enabledDriverIds.size === 0
? `all ${driversWithItems.length}`
: `${enabledDriverIds.size}/${driversWithItems.length}`}
</Badge>
</CardTitle>
</CardHeader>
<CardContent className="max-h-[300px] space-y-2 overflow-auto">
{driversWithItems.length === 0 ? (
<p className="text-sm text-muted-foreground">No drivers assigned for this day yet.</p>
) : (
driversWithItems.map((d) => {
const active = enabledDriverIds.size === 0 || enabledDriverIds.has(d.id);
// Match the map pin exactly: stable per-driver index from the
// sorted driversWithItems list, mapped through DRIVER_PALETTE.
// So driver A's red swatch in the sidebar == driver A's red
// pin on the map. No rainbow-collision with CLUSTER_PALETTE.
const swatch =
DRIVER_PALETTE[driverIndexFor(driversWithItems, d.id)];
return (
<button
key={d.id}
type="button"
onClick={() => toggleDriver(d.id)}
className={cn(
"flex w-full items-center gap-2.5 rounded-lg border px-3 py-2 text-left text-sm transition-colors",
active
? "border-primary/30 bg-primary/5 hover:bg-primary/10"
: "border-border bg-card text-muted-foreground hover:bg-muted/60"
)}
>
<span
className={cn(
"size-2.5 shrink-0 rounded-full ring-2 ring-offset-2 ring-offset-card transition-opacity",
active ? "" : "opacity-30"
)}
style={{
// Inline style keeps the dot aligned with the
// exact hue + ring colour the map pin uses.
backgroundColor: swatch,
// @ts-expect-error CSS custom prop keeps TS happy without
// needing a typed CSSProperties extension.
"--tw-ring-color": swatch,
}}
aria-hidden="true"
/>
<span className="min-w-0 flex-1 truncate font-medium">{d.name}</span>
<Badge variant="outline" className="shrink-0 text-[10px]">
{d.items.length} stop{d.items.length === 1 ? "" : "s"}
</Badge>
</button>
);
})
)}
{enabledDriverIds.size > 0 && (
<button
type="button"
onClick={() => setEnabledDriverIds(new Set())}
className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
>
<X className="h-3 w-3" />
Show all drivers
</button>
)}
</CardContent>
</Card>
{/* Missing-coord suppliers */}
{suppliersWithoutCoords.length > 0 && (
<Card className="border-amber-200/60 bg-amber-50/30 dark:border-amber-500/20 dark:bg-amber-500/5">