From 9277f383772c813fe7cd0a000551cd58de14ed52 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:09:05 +0000
Subject: [PATCH] feat: Add breadcrumb navigation to SystemView

Adds a breadcrumb navigation to the SystemView component, allowing users to navigate to the region and universe levels. The breadcrumb displays the path "Universe > $region > $system" with clickable links for each level.
---
 src/pages/SystemView.tsx | 72 ++++++++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 13 deletions(-)

diff --git a/src/pages/SystemView.tsx b/src/pages/SystemView.tsx
index fdbf732..ee13b8a 100644
--- a/src/pages/SystemView.tsx
+++ b/src/pages/SystemView.tsx
@@ -7,6 +7,14 @@ import SystemTracker from "@/components/SystemTracker";
 import RegionMap from "@/components/RegionMap";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 import pb from "@/lib/pocketbase";
 
 interface Signature {
@@ -204,19 +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">
-        <div className="flex-shrink-0 text-center py-8 px-4">
-          <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 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>