From 78765d76de684b670ab917b29aabf39b02ccd0a7 Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Mon, 16 Jun 2025 17:01:55 +0200
Subject: [PATCH] Move clean left of refresh to free up some space

---
 src/components/CleanModeToggle.tsx |  8 ++++----
 src/components/SystemTracker.tsx   | 32 +++++++++++++++++-------------
 src/pages/SystemView.tsx           | 16 +++++----------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/components/CleanModeToggle.tsx b/src/components/CleanModeToggle.tsx
index d7c801d..4a7335c 100644
--- a/src/components/CleanModeToggle.tsx
+++ b/src/components/CleanModeToggle.tsx
@@ -10,13 +10,13 @@ interface CleanModeToggleProps {
 export const CleanModeToggle = ({ cleanMode, onToggle }: CleanModeToggleProps) => {
   return (
     <div className="flex items-center space-x-2">
-      <Switch 
-        id="clean-mode" 
-        checked={cleanMode} 
+      <Switch
+        id="clean-mode"
+        checked={cleanMode}
         onCheckedChange={onToggle}
       />
       <Label htmlFor="clean-mode" className="text-sm text-slate-300">
-        Clean mode
+        Clean
       </Label>
     </div>
   );
diff --git a/src/components/SystemTracker.tsx b/src/components/SystemTracker.tsx
index 3978590..f683e55 100644
--- a/src/components/SystemTracker.tsx
+++ b/src/components/SystemTracker.tsx
@@ -1,6 +1,4 @@
-
-import { useState } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -8,13 +6,16 @@ import { RefreshCw, AlertCircle, Radar } from "lucide-react";
 import { SignatureCategories } from "@/components/SignatureCategories";
 import { useSignatureCategories } from "@/hooks/useSignatureCategories";
 import { toast } from "@/hooks/use-toast";
+import { CleanModeToggle } from "@/components/CleanModeToggle";
 import pb from "@/lib/pocketbase";
 
 interface SystemTrackerProps {
   system: string;
+  cleanMode: boolean;
+  onCleanModeToggle: (enabled: boolean) => void;
 }
 
-export const SystemTracker = ({ system }: SystemTrackerProps) => {
+export const SystemTracker = ({ system, cleanMode, onCleanModeToggle }: SystemTrackerProps) => {
   const {
     data: signaturesData,
     refetch: refetchSignatures,
@@ -74,16 +75,19 @@ export const SystemTracker = ({ system }: SystemTrackerProps) => {
               Polling
             </Badge>
           </CardTitle>
-          <Button
-            onClick={handleRefresh}
-            disabled={isLoading}
-            variant="outline"
-            size="sm"
-            className="bg-slate-700 border-slate-600 text-slate-200 hover:bg-slate-600"
-          >
-            <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-            Refresh
-          </Button>
+          <div className="flex items-center gap-2">
+            <CleanModeToggle cleanMode={cleanMode} onToggle={onCleanModeToggle} />
+            <Button
+              onClick={handleRefresh}
+              disabled={isLoading}
+              variant="outline"
+              size="sm"
+              className="bg-slate-700 border-slate-600 text-slate-200 hover:bg-slate-600"
+            >
+              <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+              Refresh
+            </Button>
+          </div>
         </CardHeader>
       </Card>
 
diff --git a/src/pages/SystemView.tsx b/src/pages/SystemView.tsx
index 0e44714..0eccf47 100644
--- a/src/pages/SystemView.tsx
+++ b/src/pages/SystemView.tsx
@@ -1,11 +1,9 @@
-
 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 { CleanModeToggle } from "@/components/CleanModeToggle";
 import { Header } from "@/components/Header";
 import { parseSignature, parseScannedPercentage } from "@/utils/signatureParser";
 import { getSystemId } from "@/utils/systemApi";
@@ -171,19 +169,15 @@ export const SystemView = () => {
       <div className="h-full flex flex-col">
         <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 pt-6">
             {/* Main content - signatures */}
             <div className="lg:col-span-2 space-y-6 overflow-y-auto">
-              <SystemTracker system={system} />
+              <SystemTracker 
+                system={system} 
+                cleanMode={cleanMode} 
+                onCleanModeToggle={setCleanMode} 
+              />
             </div>
 
             {/* Regional overview map */}