From 638f8f4a93e35ceea3a923cb3162d6fed29b9628 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:14:07 +0000
Subject: [PATCH] feat: Add breadcrumb to region map and remove back button

Adds breadcrumb navigation to the region map and removes the "Back to Galaxy" button for consistency.
---
 src/components/RegionMap.tsx | 57 +++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/components/RegionMap.tsx b/src/components/RegionMap.tsx
index d5058ba..70dadfa 100644
--- a/src/components/RegionMap.tsx
+++ b/src/components/RegionMap.tsx
@@ -1,11 +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 { Button } from '@/components/ui/button';
-import { ArrowLeft } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { getSecurityColor } from '../utils/securityColors';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 
 const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
 
@@ -211,15 +218,6 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
         <div className="text-center">
           <h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
           <p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
-          {!isCompact && (
-            <Button
-              onClick={() => navigate('/')}
-              className="bg-purple-600 hover:bg-purple-700"
-            >
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              Return to Galaxy Map
-            </Button>
-          )}
         </div>
       </div>
     );
@@ -309,18 +307,31 @@ const RegionMap = ({ regionName, focusSystem, isCompact = false }: RegionMapProp
       <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">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-4xl font-bold text-white mb-2">{regionName}</h1>
-            <p className="text-purple-200">Solar systems in this region</p>
-          </div>
-          <Button
-            onClick={() => navigate('/')}
-            className="bg-purple-600 hover:bg-purple-700"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Back to Galaxy
-          </Button>
+        {/* 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="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="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">