From 1f311d5b1a40bfd20e9686ca06628d7d446fd7f9 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 14 Jun 2025 20:24:55 +0000
Subject: [PATCH] Reverted to commit 638f8f4a93e35ceea3a923cb3162d6fed29b9628

---
 src/components/GalaxyMap.tsx |   3 +
 src/components/Header.tsx    | 110 -----------------------------
 src/components/RegionMap.tsx | 131 ++++++++++++++++++++++-------------
 src/pages/Index.tsx          |  15 +---
 src/pages/SystemView.tsx     |  67 ++++++++++++++----
 5 files changed, 138 insertions(+), 188 deletions(-)
 delete mode 100644 src/components/Header.tsx

diff --git a/src/components/GalaxyMap.tsx b/src/components/GalaxyMap.tsx
index 6984b6e..1f2b750 100644
--- a/src/components/GalaxyMap.tsx
+++ b/src/components/GalaxyMap.tsx
@@ -143,6 +143,9 @@ export const GalaxyMap = () => {
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
 
       <div className="relative z-10 p-8">
+        <h1 className="text-4xl font-bold text-white mb-2 text-center">Galaxy Map</h1>
+        <p className="text-purple-200 text-center mb-8">Navigate the known regions of space</p>
+
         <div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
           <svg
             ref={svgRef}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index 38ce050..0000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-
-interface HeaderProps {
-  level: 'universe' | 'region' | 'system';
-  region?: string;
-  system?: string;
-}
-
-const Header = ({ level, region, system }: HeaderProps) => {
-  const navigate = useNavigate();
-
-  const getTitle = () => {
-    switch (level) {
-      case 'universe':
-        return 'Universe';
-      case 'region':
-        return `Region: ${region}`;
-      case 'system':
-        return `System: ${system}`;
-      default:
-        return 'Universe';
-    }
-  };
-
-  const getSubtitle = () => {
-    switch (level) {
-      case 'universe':
-        return 'Navigate the galaxy of New Eden';
-      case 'region':
-        return 'Solar systems in this region';
-      case 'system':
-        return 'Press Ctrl+V to paste signatures';
-      default:
-        return '';
-    }
-  };
-
-  return (
-    <div className="flex-shrink-0 py-6 px-4">
-      {/* Breadcrumb Navigation */}
-      <div className="mb-4">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              {level === 'universe' ? (
-                <BreadcrumbPage className="text-white font-semibold">
-                  Universe
-                </BreadcrumbPage>
-              ) : (
-                <BreadcrumbLink 
-                  onClick={() => navigate("/")}
-                  className="text-purple-200 hover:text-white cursor-pointer"
-                >
-                  Universe
-                </BreadcrumbLink>
-              )}
-            </BreadcrumbItem>
-            {(level === 'region' || level === 'system') && region && (
-              <>
-                <BreadcrumbSeparator className="text-slate-400" />
-                <BreadcrumbItem>
-                  {level === 'region' ? (
-                    <BreadcrumbPage className="text-white font-semibold">
-                      {region}
-                    </BreadcrumbPage>
-                  ) : (
-                    <BreadcrumbLink
-                      onClick={() => navigate(`/regions/${region}`)}
-                      className="text-purple-200 hover:text-white cursor-pointer"
-                    >
-                      {region}
-                    </BreadcrumbLink>
-                  )}
-                </BreadcrumbItem>
-              </>
-            )}
-            {level === 'system' && system && (
-              <>
-                <BreadcrumbSeparator className="text-slate-400" />
-                <BreadcrumbItem>
-                  <BreadcrumbPage className="text-white font-semibold">
-                    {system}
-                  </BreadcrumbPage>
-                </BreadcrumbItem>
-              </>
-            )}
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
-      
-      {/* Title and Subtitle */}
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-white mb-2">{getTitle()}</h1>
-        <p className="text-purple-200">{getSubtitle()}</p>
-      </div>
-    </div>
-  );
-};
-
-export default Header;
diff --git a/src/components/RegionMap.tsx b/src/components/RegionMap.tsx
index 2aca85c..70dadfa 100644
--- a/src/components/RegionMap.tsx
+++ b/src/components/RegionMap.tsx
@@ -1,10 +1,18 @@
+
 import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MapNode } from './MapNode';
 import { Connection } from './Connection';
 import { useQuery } from '@tanstack/react-query';
 import { getSecurityColor } from '../utils/securityColors';
-import Header from './Header';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 
 const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
 
@@ -298,58 +306,81 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
     <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
 
-      <div className="relative z-10 h-full flex flex-col">
-        <Header level="region" region={regionName} />
+      <div className="relative z-10 p-8">
+        {/* Breadcrumb Navigation */}
+        <div className="mb-6">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink 
+                  onClick={() => navigate("/")}
+                  className="text-purple-200 hover:text-white cursor-pointer"
+                >
+                  Universe
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="text-slate-400" />
+              <BreadcrumbItem>
+                <BreadcrumbPage className="text-white font-semibold">
+                  {regionName}
+                </BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
 
-        <div className="flex-1 overflow-hidden px-8 pb-8">
-          <div className="w-full h-full border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
-            <svg
-              ref={svgRef}
-              width="100%"
-              height="100%"
-              viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
-              className="cursor-grab active:cursor-grabbing"
-              onMouseDown={handleMouseDown}
-              onMouseMove={handleMouseMove}
-              onMouseUp={handleMouseUp}
-              onMouseLeave={handleMouseUp}
-              onWheel={handleWheel}
-            >
-              <defs>
-                <filter id="glow">
-                  <feGaussianBlur stdDeviation="3" result="coloredBlur" />
-                  <feMerge>
-                    <feMergeNode in="coloredBlur" />
-                    <feMergeNode in="SourceGraphic" />
-                  </feMerge>
-                </filter>
-              </defs>
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-white mb-2">{regionName}</h1>
+          <p className="text-purple-200">Solar systems in this region</p>
+        </div>
 
-              {/* Render connections */}
-              {processedConnections.map(connection => (
-                <Connection
-                  key={connection.key}
-                  from={connection.from}
-                  to={connection.to}
-                  color={connection.color}
-                />
-              ))}
+        <div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
+          <svg
+            ref={svgRef}
+            width="100%"
+            height="100%"
+            viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+            className="cursor-grab active:cursor-grabbing"
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            onWheel={handleWheel}
+          >
+            <defs>
+              <filter id="glow">
+                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
+                <feMerge>
+                  <feMergeNode in="coloredBlur" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+            </defs>
 
-              {/* Render systems */}
-              {systems?.map((system) => (
-                <MapNode
-                  key={system.solarSystemName}
-                  id={system.solarSystemName}
-                  name={system.solarSystemName}
-                  position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
-                  onClick={() => handleSystemClick(system.solarSystemName)}
-                  type="system"
-                  security={system.security}
-                  signatures={system.signatures}
-                />
-              ))}
-            </svg>
-          </div>
+            {/* Render connections */}
+            {processedConnections.map(connection => (
+              <Connection
+                key={connection.key}
+                from={connection.from}
+                to={connection.to}
+                color={connection.color}
+              />
+            ))}
+
+            {/* Render systems */}
+            {systems?.map((system) => (
+              <MapNode
+                key={system.solarSystemName}
+                id={system.solarSystemName}
+                name={system.solarSystemName}
+                position={nodePositions[system.solarSystemName] || { x: 0, y: 0 }}
+                onClick={() => handleSystemClick(system.solarSystemName)}
+                type="system"
+                security={system.security}
+                signatures={system.signatures}
+              />
+            ))}
+          </svg>
         </div>
       </div>
     </div>
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index a245b2d..bf893bf 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,19 +1,8 @@
 
-import { GalaxyMap } from '@/components/GalaxyMap';
-import Header from '@/components/Header';
+import { GalaxyMap } from '../components/GalaxyMap';
 
 const Index = () => {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
-      <div className="h-screen flex flex-col">
-        <Header level="universe" />
-
-        <div className="flex-1 overflow-hidden px-4 pb-8">
-          <GalaxyMap />
-        </div>
-      </div>
-    </div>
-  );
+  return <GalaxyMap />;
 };
 
 export default Index;
diff --git a/src/pages/SystemView.tsx b/src/pages/SystemView.tsx
index 4f8eec4..ee13b8a 100644
--- a/src/pages/SystemView.tsx
+++ b/src/pages/SystemView.tsx
@@ -1,10 +1,10 @@
+
 import { useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { toast } from "@/hooks/use-toast";
 import { useQueryClient } from "@tanstack/react-query";
 import SystemTracker from "@/components/SystemTracker";
 import RegionMap from "@/components/RegionMap";
-import Header from "@/components/Header";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import {
@@ -212,20 +212,57 @@ const SystemView = () => {
   return (
     <div className="h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
       <div className="h-full flex flex-col">
-        <Header level="system" region={region} system={system} />
-        
-        {/* Clean Mode Toggle */}
-        <div className="flex-shrink-0 px-4 pb-4">
-          <div className="flex items-center justify-center gap-4">
-            <div className="flex items-center space-x-2">
-              <Switch 
-                id="clean-mode" 
-                checked={cleanMode} 
-                onCheckedChange={setCleanMode}
-              />
-              <Label htmlFor="clean-mode" className="text-sm text-slate-300">
-                Clean mode
-              </Label>
+        <div className="flex-shrink-0 py-6 px-4">
+          {/* Breadcrumb Navigation */}
+          <div className="mb-4">
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink 
+                    onClick={() => navigate("/")}
+                    className="text-purple-200 hover:text-white cursor-pointer"
+                  >
+                    Universe
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                {region && (
+                  <>
+                    <BreadcrumbSeparator className="text-slate-400" />
+                    <BreadcrumbItem>
+                      <BreadcrumbLink
+                        onClick={() => navigate(`/regions/${region}`)}
+                        className="text-purple-200 hover:text-white cursor-pointer"
+                      >
+                        {region}
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                  </>
+                )}
+                <BreadcrumbSeparator className="text-slate-400" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="text-white font-semibold">
+                    {system}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+          
+          {/* System Title and Controls */}
+          <div className="text-center">
+            <h1 className="text-4xl font-bold text-white mb-2">System: {system}</h1>
+            <div className="flex items-center justify-center gap-4 text-slate-300">
+              <p>Press Ctrl+V to paste signatures</p>
+              <div className="flex items-center space-x-2">
+                <Switch 
+                  id="clean-mode" 
+                  checked={cleanMode} 
+                  onCheckedChange={setCleanMode}
+                />
+                <Label htmlFor="clean-mode" className="text-sm text-slate-300">
+                  Clean mode
+                </Label>
+              </div>
             </div>
           </div>
         </div>