fix(parcel-sync): static connection dots, legend position, mismatch labels

- ePay + eTerra pills: removed animate-ping, now show static green dot
  when connected (no more spinning appearance)
- Legend moved to top-left, hides when FeatureInfoPanel is open
  (no more overlap)
- Boundary mismatch parcels now show cadastral numbers as labels
  (orange for foreign, purple for edge parcels)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AI Assistant
2026-03-24 16:39:01 +02:00
parent ab35fc4df7
commit b87c908415
3 changed files with 30 additions and 10 deletions
@@ -64,10 +64,7 @@ export function ConnectionPill({
{connecting ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : session.connected ? (
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
</span>
<span className="inline-flex h-2 w-2 rounded-full bg-emerald-500" />
) : session.eterraMaintenance ? (
<AlertTriangle className="h-3 w-3" />
) : connectionError ? (
@@ -205,10 +205,7 @@ export function EpayConnect({
{connecting ? (
<Loader2 className="h-3 w-3 animate-spin" />
) : status.connected ? (
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
</span>
<span className="inline-flex h-2 w-2 rounded-full bg-emerald-500" />
) : null}
<span className="hidden sm:inline">ePay</span>
@@ -364,6 +364,30 @@ export function MapTab({ siruta, sirutaValid }: MapTabProps) {
"line-dasharray": [4, 2],
},
});
// Labels with cadastral numbers
map.addLayer({
id: "l-mismatch-label",
type: "symbol",
source: "boundary-mismatch",
layout: {
"text-field": ["coalesce", ["get", "cadastral_ref"], ""],
"text-font": ["Noto Sans Bold"],
"text-size": 11,
"text-anchor": "center",
"text-allow-overlap": true,
},
paint: {
"text-color": [
"case",
["==", ["get", "mismatch_type"], "foreign"],
"#ea580c",
"#9333ea",
],
"text-halo-color": "#ffffff",
"text-halo-width": 1.5,
},
});
}
},
)
@@ -475,8 +499,9 @@ export function MapTab({ siruta, sirutaValid }: MapTabProps) {
/>
</div>
{/* Bottom-right: legend */}
<div className="absolute bottom-3 right-3 z-10 rounded-lg bg-background/90 border p-2 text-[10px] space-y-1">
{/* Top-left: legend (hidden when feature panel is open) */}
{!clickedFeature && (
<div className="absolute top-3 left-3 z-10 rounded-lg bg-background/90 border p-2 text-[10px] space-y-1">
<div className="flex items-center gap-1.5">
<span
className="inline-block h-3 w-3 rounded-sm"
@@ -543,6 +568,7 @@ export function MapTab({ siruta, sirutaValid }: MapTabProps) {
</>
)}
</div>
)}
</div>
</div>
);