From d81df9e463cada38570aa74ee2d17d356b2f13b8 Mon Sep 17 00:00:00 2001 From: SuperKali Date: Fri, 26 Dec 2025 10:26:11 +0100 Subject: [PATCH] feat: add system devices toggle in device selection modal Add a toggle button to show/hide system devices in the device selection modal. This prevents users from accidentally selecting system drives while still allowing advanced users to access them when needed. Changes: - Add showSystemDevices state toggle in DeviceModal - Filter devices based on toggle state (default: hide system devices) - Redesign warning banner with toggle badge button - Add Shield icon and translations for all 15 languages - Update CSS with new banner layout and toggle button styles --- src/components/modals/DeviceModal.tsx | 41 +++++++-- src/locales/de.json | 4 +- src/locales/en.json | 4 +- src/locales/es.json | 4 +- src/locales/fr.json | 4 +- src/locales/it.json | 4 +- src/locales/ja.json | 4 +- src/locales/ko.json | 4 +- src/locales/nl.json | 4 +- src/locales/pl.json | 4 +- src/locales/pt.json | 4 +- src/locales/ru.json | 4 +- src/locales/sl.json | 4 +- src/locales/tr.json | 4 +- src/locales/uk.json | 4 +- src/locales/zh.json | 4 +- src/styles/components.css | 116 +++++++++++++++++++++++++- 17 files changed, 194 insertions(+), 23 deletions(-) diff --git a/src/components/modals/DeviceModal.tsx b/src/components/modals/DeviceModal.tsx index f038b31..07e4729 100644 --- a/src/components/modals/DeviceModal.tsx +++ b/src/components/modals/DeviceModal.tsx @@ -75,6 +75,7 @@ export function DeviceModal({ isOpen, onClose, onSelect }: DeviceModalProps) { const [selectedDevice, setSelectedDevice] = useState(null); const [showConfirm, setShowConfirm] = useState(false); const [showSkeleton, setShowSkeleton] = useState(false); + const [showSystemDevices, setShowSystemDevices] = useState(false); // Track previous devices for change detection const prevDevicesRef = useRef(null); @@ -92,6 +93,14 @@ export function DeviceModal({ isOpen, onClose, onSelect }: DeviceModalProps) { return devices && devices.length > 0; }, [devices]); + // Filter devices based on showSystemDevices toggle + const filteredDevices = useMemo(() => { + if (showSystemDevices) { + return devices; + } + return devices.filter(d => !d.is_system); + }, [devices, showSystemDevices]); + // Show skeleton with minimum delay useEffect(() => { let skeletonTimeout: NodeJS.Timeout; @@ -158,10 +167,28 @@ export function DeviceModal({ isOpen, onClose, onSelect }: DeviceModalProps) { return ( <> - -
- - {t('flash.dataWarning')} + +
+
+
+ +
+
+ {t('flash.dataWarning')} +
+
+ +
{error ? ( @@ -169,7 +196,7 @@ export function DeviceModal({ isOpen, onClose, onSelect }: DeviceModalProps) { ) : ( <> {showSkeleton && } - {devices.length === 0 && !showSkeleton && ( + {filteredDevices.length === 0 && !showSkeleton && (

{t('modal.noDevices')}

@@ -183,7 +210,7 @@ export function DeviceModal({ isOpen, onClose, onSelect }: DeviceModalProps) {
)}
- {!showSkeleton && devices.map((device) => { + {!showSkeleton && filteredDevices.map((device) => { const deviceType = getDeviceType(device); const badge = getDeviceBadge(deviceType, t); return ( @@ -217,7 +244,7 @@ export function DeviceModal({ isOpen, onClose, onSelect }: DeviceModalProps) { ); })}
- {!showSkeleton && devices.length > 0 && ( + {!showSkeleton && filteredDevices.length > 0 && (