Refactor clean mode toggle

- Improve the UI of the clean mode toggle by removing the text that shifts the layout.
- Disable the clean mode toggle after a successful signature post.
- Remove unnecessary text from the UI.
This commit is contained in:
gpt-engineer-app[bot]
2025-06-14 16:17:14 +00:00
parent f230bd19a1
commit a6998f8249

View File

@@ -1,4 +1,3 @@
import { useParams, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { toast } from "@/hooks/use-toast";
@@ -24,6 +23,7 @@ const SystemView = () => {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [cleanMode, setCleanMode] = useState(false);
const [cleanModeUsed, setCleanModeUsed] = useState(false);
if (!system) {
navigate("/");
@@ -133,7 +133,7 @@ const SystemView = () => {
}
// If clean mode is enabled, delete signatures not in the pasted list
if (cleanMode) {
if (cleanMode && !cleanModeUsed) {
const existingSignatures = await pb.collection('signature').getFullList({
filter: `system='${systemId}'`
});
@@ -148,6 +148,10 @@ const SystemView = () => {
if (signaturesToDelete.length > 0) {
console.log(`Deleted ${signaturesToDelete.length} signatures not in pasted data`);
}
// Disable clean mode after use
setCleanModeUsed(true);
setCleanMode(false);
}
// Save all new/updated signatures
@@ -158,10 +162,9 @@ const SystemView = () => {
// Invalidate queries to refresh the data
queryClient.invalidateQueries({ queryKey: ['signatures', system] });
const cleanText = cleanMode ? ` (${cleanMode ? 'cleaned' : ''})` : '';
toast({
title: "Success",
description: `${parsedSignatures.length} signatures processed${cleanText}.`
description: `${parsedSignatures.length} signatures processed.`
});
} catch (error) {
@@ -179,7 +182,7 @@ const SystemView = () => {
return () => {
document.removeEventListener('paste', handlePaste);
};
}, [system, cleanMode]);
}, [system, cleanMode, cleanModeUsed]);
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
@@ -187,15 +190,16 @@ const SystemView = () => {
<div className="text-center mb-8">
<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>Viewing signatures and regional overview Press Ctrl+V to paste signatures</p>
<p>Press Ctrl+V to paste signatures</p>
<div className="flex items-center space-x-2">
<Switch
id="clean-mode"
checked={cleanMode}
onCheckedChange={setCleanMode}
disabled={cleanModeUsed}
/>
<Label htmlFor="clean-mode" className="text-sm text-slate-300">
Clean mode {cleanMode ? '(will delete missing signatures)' : ''}
Clean mode
</Label>
</div>
</div>