feat: Add system map to system view

Integrate a small, focused map of the system's region into the system view page, enabling navigation between systems.

src/pages/SystemView.tsx

@@ -1,10 +1,20 @@
+
 import { useParams, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import SystemTracker from "@/components/SystemTracker";
+import { RegionOverviewMap } from "@/components/RegionOverviewMap";
+import { findSystemRegion } from "@/utils/systemRegionMapping";
 
 const SystemView = () => {
   const { system } = useParams();
   const navigate = useNavigate();
 
+  const { data: regionName } = useQuery({
+    queryKey: ['system-region', system],
+    queryFn: () => findSystemRegion(system!),
+    enabled: !!system,
+  });
+
   if (!system) {
     navigate("/");
     return null;
@@ -14,13 +24,37 @@ const SystemView = () => {
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
       <div className="container mx-auto px-4 py-8">
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">Cosmic Region Navigator</h1>
-          <p className="text-slate-300">Viewing signatures for system: {system}</p>
+          <h1 className="text-4xl font-bold text-white mb-2">System: {system}</h1>
+          <p className="text-slate-300">Viewing signatures and regional overview</p>
+        </div>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Main content - signatures */}
+          <div className="lg:col-span-2">
+            <SystemTracker system={system} />
+          </div>
+          
+          {/* Regional overview map */}
+          <div className="lg:col-span-1">
+            {regionName ? (
+              <RegionOverviewMap
+                regionName={regionName}
+                currentSystem={system}
+                className="h-96"
+              />
+            ) : (
+              <div className="bg-black/20 backdrop-blur-sm border border-purple-500/30 rounded-lg p-4 h-96 flex items-center justify-center">
+                <div className="text-center">
+                  <div className="text-white text-sm">Loading region data...</div>
+                  <div className="text-purple-200 text-xs mt-1">Finding system location</div>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
-        <SystemTracker system={system} />
       </div>
     </div>
   );
 };
 
-export default SystemView; 
+export default SystemView;