first commit

frontend/src/components/StructureInfoPanel.tsx

@@ -0,0 +1,54 @@
+import { useAtlasStore } from "../store/useAtlasStore.js";
+import type { Structure } from "../lib/api.js";
+
+export function StructureInfoPanel({ bySlug }: { bySlug: Map<string, Structure> }) {
+  const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
+  const selectStructure = useAtlasStore((s) => s.selectStructure);
+
+  const structure = selectedStructureId
+    ? [...bySlug.values()].find((s) => s.id === selectedStructureId)
+    : null;
+
+  if (!structure) {
+    return (
+      <div className="text-sm text-slate-400">
+        Clique em uma estrutura no modelo 3D para ver os detalhes aqui.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-white">{structure.namePt}</h2>
+          <p className="text-sm text-slate-400 italic">{structure.nameEn}</p>
+        </div>
+        <button
+          onClick={() => selectStructure(null)}
+          className="text-slate-400 hover:text-white text-sm"
+          aria-label="Fechar"
+        >
+          ✕
+        </button>
+      </div>
+
+      <span
+        className="inline-block text-xs px-2 py-1 rounded-full"
+        style={{ backgroundColor: structure.system.colorHex + "33", color: structure.system.colorHex }}
+      >
+        {structure.system.namePt}
+      </span>
+
+      {structure.description && <p className="text-sm text-slate-300">{structure.description}</p>}
+
+      {structure.regionPath.length > 0 && (
+        <p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>
+      )}
+
+      {structure.synonyms.length > 0 && (
+        <p className="text-xs text-slate-500">Sinônimos: {structure.synonyms.join(", ")}</p>
+      )}
+    </div>
+  );
+}