Add transactional emails (SMTP) and planner features (no-go areas, notes, crash recovery)
Transactional emails: - Add nodemailer SMTP email module with dev-mode console logging - Magic link template and welcome template with HTML + plain text - Wire sendMagicLink into login flow, sendWelcome into registration - Update privacy page and deploy docs for SMTP configuration Planner features: - No-go areas: draw polygons on map (leaflet-geoman), synced via Yjs, passed to BRouter as nogos parameter, route recomputes on change - Session notes: collaborative Y.Text textarea in sidebar tab - Crash recovery: periodic localStorage save of Yjs state, restore on reconnect - Rate limit session creation (10/IP/hour) in /new route Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
05b5f6febf
commit
0a8dd0b766
27 changed files with 1030 additions and 69 deletions
119
apps/planner/app/components/NoGoAreaLayer.tsx
Normal file
119
apps/planner/app/components/NoGoAreaLayer.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import { useEffect, useRef, useCallback } from "react";
|
||||
import { useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import * as Y from "yjs";
|
||||
import "@geoman-io/leaflet-geoman-free";
|
||||
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
|
||||
|
||||
interface NoGoAreaLayerProps {
|
||||
noGoAreas: Y.Array<Y.Map<unknown>>;
|
||||
doc: Y.Doc;
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
const NO_GO_STYLE: L.PathOptions = {
|
||||
color: "#ef4444",
|
||||
fillColor: "#ef4444",
|
||||
fillOpacity: 0.2,
|
||||
weight: 2,
|
||||
};
|
||||
|
||||
function yMapToLatLngs(yMap: Y.Map<unknown>): L.LatLng[] {
|
||||
const points = yMap.get("points") as Array<{ lat: number; lon: number }> | undefined;
|
||||
if (!points) return [];
|
||||
return points.map((p) => L.latLng(p.lat, p.lon));
|
||||
}
|
||||
|
||||
export function NoGoAreaLayer({ noGoAreas, doc, enabled, onToggle }: NoGoAreaLayerProps) {
|
||||
const map = useMap();
|
||||
const layerGroupRef = useRef<L.LayerGroup>(L.layerGroup());
|
||||
const polygonMapRef = useRef<Map<number, L.Polygon>>(new Map());
|
||||
const suppressObserverRef = useRef(false);
|
||||
|
||||
// Sync Yjs → Leaflet layers
|
||||
const syncLayers = useCallback(() => {
|
||||
const lg = layerGroupRef.current;
|
||||
// Clear all existing polygons
|
||||
lg.clearLayers();
|
||||
polygonMapRef.current.clear();
|
||||
|
||||
for (let i = 0; i < noGoAreas.length; i++) {
|
||||
const yMap = noGoAreas.get(i);
|
||||
const latLngs = yMapToLatLngs(yMap);
|
||||
if (latLngs.length < 3) continue;
|
||||
|
||||
const polygon = L.polygon(latLngs, NO_GO_STYLE);
|
||||
polygon.on("contextmenu", (e) => {
|
||||
L.DomEvent.preventDefault(e as unknown as Event);
|
||||
suppressObserverRef.current = true;
|
||||
noGoAreas.delete(i, 1);
|
||||
suppressObserverRef.current = false;
|
||||
syncLayers();
|
||||
});
|
||||
lg.addLayer(polygon);
|
||||
polygonMapRef.current.set(i, polygon);
|
||||
}
|
||||
}, [noGoAreas]);
|
||||
|
||||
// Add/remove layer group from map
|
||||
useEffect(() => {
|
||||
const lg = layerGroupRef.current;
|
||||
lg.addTo(map);
|
||||
return () => {
|
||||
lg.removeFrom(map);
|
||||
};
|
||||
}, [map]);
|
||||
|
||||
// Observe Yjs changes
|
||||
useEffect(() => {
|
||||
const observer = () => {
|
||||
if (!suppressObserverRef.current) {
|
||||
syncLayers();
|
||||
}
|
||||
};
|
||||
noGoAreas.observeDeep(observer);
|
||||
syncLayers();
|
||||
return () => noGoAreas.unobserveDeep(observer);
|
||||
}, [noGoAreas, syncLayers]);
|
||||
|
||||
// Geoman drawing controls
|
||||
useEffect(() => {
|
||||
if (enabled) {
|
||||
map.pm.enableDraw("Polygon", {
|
||||
pathOptions: NO_GO_STYLE,
|
||||
snappable: false,
|
||||
});
|
||||
} else {
|
||||
map.pm.disableDraw();
|
||||
}
|
||||
|
||||
const handleCreate = (e: { layer: L.Layer }) => {
|
||||
const layer = e.layer as L.Polygon;
|
||||
const latLngs = (layer.getLatLngs()[0] as L.LatLng[]);
|
||||
const points = latLngs.map((ll) => ({ lat: ll.lat, lon: ll.lng }));
|
||||
|
||||
// Remove the geoman-created layer (we'll render from Yjs)
|
||||
map.removeLayer(layer);
|
||||
|
||||
// Add to Yjs
|
||||
const yMap = new Y.Map();
|
||||
yMap.set("points", points);
|
||||
doc.transact(() => {
|
||||
noGoAreas.push([yMap]);
|
||||
});
|
||||
|
||||
// Exit draw mode
|
||||
onToggle();
|
||||
};
|
||||
|
||||
map.on("pm:create", handleCreate);
|
||||
|
||||
return () => {
|
||||
map.pm.disableDraw();
|
||||
map.off("pm:create", handleCreate);
|
||||
};
|
||||
}, [map, enabled, noGoAreas, doc, onToggle]);
|
||||
|
||||
return null;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue