Fix: Header size and refactor components

Ensure consistent header size across all pages and refactor `SystemView` and `RegionMap` components.

src/pages/SystemView.tsx

@@ -5,16 +5,10 @@ import { toast } from "@/hooks/use-toast";
 import { useQueryClient } from "@tanstack/react-query";
 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 CleanModeToggle from "@/components/CleanModeToggle";
+import Header from "@/components/Header";
+import { parseSignature, parseScannedPercentage } from "@/utils/signatureParser";
+import { getSystemId } from "@/utils/systemApi";
 import pb from "@/lib/pocketbase";
 
 interface Signature {
@@ -38,42 +32,6 @@ const SystemView = () => {
     return null;
   }
 
-  const parseSignature = (text: string): Omit<Signature, 'system' | 'sysid'> | null => {
-    const parts = text.split('\t');
-    if (parts.length < 4) return null;
-
-    // Validate signature identifier format (3 letters, dash, 3 numbers)
-    const signatureIdentifierRegex = /^\w{3}-\d{3}$/;
-    if (!signatureIdentifierRegex.test(parts[0])) {
-      return null;
-    }
-
-    return {
-      identifier: parts[0],
-      type: parts[2],
-      name: parts[3],
-      scanned: parts.length > 4 ? parts[4] : undefined,
-      dangerous: false // TODO: Implement dangerous signature detection
-    };
-  };
-
-  const getSystemId = async (systemName: string): Promise<string> => {
-    const url = `https://evebase.site.quack-lab.dev/api/collections/regionview/records?filter=(sysname='${encodeURIComponent(systemName)}')`;
-    const response = await fetch(url);
-    const data = await response.json();
-    
-    if (data.items && data.items.length > 0) {
-      return data.items[0].id;
-    }
-    throw new Error(`System ${systemName} not found`);
-  };
-
-  const parseScannedPercentage = (scannedString?: string): number => {
-    if (!scannedString) return 0;
-    const match = scannedString.match(/(\d+(?:\.\d+)?)%/);
-    return match ? parseFloat(match[1]) : 0;
-  };
-
   const saveSignature = async (signature: Signature): Promise<void> => {
     try {
       // Check if signature already exists
@@ -209,66 +167,27 @@ const SystemView = () => {
     };
   }, [system, cleanMode]);
 
+  const breadcrumbs = [
+    { label: "Universe", path: "/" },
+    ...(region ? [{ label: region, path: `/regions/${region}` }] : []),
+    { label: system }
+  ];
+
   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>
-            </div>
+        <Header title={`System: ${system}`} breadcrumbs={breadcrumbs} />
+        
+        {/* Controls */}
+        <div className="flex-shrink-0 px-4 py-3 border-b border-purple-500/20">
+          <div className="flex items-center justify-center gap-4 text-slate-300">
+            <p>Press Ctrl+V to paste signatures</p>
+            <CleanModeToggle cleanMode={cleanMode} onToggle={setCleanMode} />
           </div>
         </div>
         
         <div className="flex-1 overflow-hidden px-4 pb-8">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full pt-6">
             {/* Main content - signatures */}
             <div className="lg:col-span-2 space-y-6 overflow-y-auto">
               <SystemTracker system={system} />