From 2c91d01a470c97f89acd04f8d239317603c13c3d 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:16:27 +0000
Subject: [PATCH] Refactor: Create a shared header component

Move breadcrumb and title into a header component for consistent display across pages.
---
 src/components/Header.tsx    | 110 +++++++++++++++++++++++++++++
 src/components/RegionMap.tsx | 131 +++++++++++++----------------------
 src/pages/Index.tsx          |  15 +++-
 src/pages/SystemView.tsx     |  67 ++++--------------
 4 files changed, 188 insertions(+), 135 deletions(-)
 create mode 100644 src/components/Header.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..38ce050
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,110 @@
+
+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 70dadfa..2aca85c 100644
--- a/src/components/RegionMap.tsx
+++ b/src/components/RegionMap.tsx
@@ -1,18 +1,10 @@
-
 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 {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
+import Header from './Header';
 
 const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
 
@@ -306,81 +298,58 @@ 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 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="relative z-10 h-full flex flex-col">
+        <Header level="region" region={regionName} />
 
-        <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>
+        <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="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 connections */}
+              {processedConnections.map(connection => (
+                <Connection
+                  key={connection.key}
+                  from={connection.from}
+                  to={connection.to}
+                  color={connection.color}
+                />
+              ))}
 
-            {/* 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>
+              {/* 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>
     </div>
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index bf893bf..3fd91e3 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,8 +1,19 @@
 
-import { GalaxyMap } from '../components/GalaxyMap';
+import GalaxyMap from '@/components/GalaxyMap';
+import Header from '@/components/Header';
 
 const Index = () => {
-  return <GalaxyMap />;
+  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>
+  );
 };
 
 export default Index;
diff --git a/src/pages/SystemView.tsx b/src/pages/SystemView.tsx
index ee13b8a..4f8eec4 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,57 +212,20 @@ 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">
-        <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>
+        <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>
           </div>
         </div>