first commit

frontend/src/components/LayerToggle.tsx

@@ -0,0 +1,35 @@
+import { useSystems } from "../hooks/useStructures.js";
+import { useAtlasStore } from "../store/useAtlasStore.js";
+
+export function LayerToggle() {
+  const systems = useSystems();
+  const visibleSystems = useAtlasStore((s) => s.visibleSystems);
+  const toggleSystem = useAtlasStore((s) => s.toggleSystem);
+
+  return (
+    <div className="space-y-1.5">
+      <h3 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Camadas</h3>
+      {systems.map((sys) => (
+        <label
+          key={sys.slug}
+          className="flex items-center gap-2 text-sm cursor-pointer select-none rounded px-2 py-1 hover:bg-white/5"
+        >
+          <input
+            type="checkbox"
+            checked={visibleSystems.has(sys.slug)}
+            onChange={() => toggleSystem(sys.slug)}
+            className="accent-accent"
+          />
+          <span
+            className="inline-block w-2.5 h-2.5 rounded-full"
+            style={{ backgroundColor: sys.colorHex }}
+          />
+          <span>{sys.namePt}</span>
+          {sys._count && (
+            <span className="ml-auto text-xs text-slate-500">{sys._count.structures}</span>
+          )}
+        </label>
+      ))}
+    </div>
+  );
+}