ENH: refactor Restore Dialog

src/pages/SnapshotDetailsPage.tsx

@@ -3,10 +3,12 @@ import {
   Box,
   Stack,
   Button,
+  Checkbox,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogActions,
+  FormControlLabel,
   Typography,
   CircularProgress,
   Link,
@@ -52,6 +54,7 @@ export const SnapshotDetailsPage: React.FC<SnapshotDetailsPageProps> = ({
   const [activeFilters, setActiveFilters] = useState<Record<string, string[]>>({});
   const [availableSnapshots, setAvailableSnapshots] = useState<SnapshotSummaryDTO[]>([]);
   const [loadingSnapshots, setLoadingSnapshots] = useState(false);
+  const [showOnlySelected, setShowOnlySelected] = useState(false);
 
   // Fetch tag groups when component mounts
   useEffect(() => {
@@ -194,6 +197,7 @@ export const SnapshotDetailsPage: React.FC<SnapshotDetailsPageProps> = ({
 
       <Stack direction="row" spacing={2} sx={{ mb: 1, flexShrink: 0 }} alignItems="center">
         <SearchBar value={searchText} onChange={setSearchText} placeholder="Search PVs..." />
+
         <Box sx={{ display: 'flex', gap: 1.5, ml: 'auto' }}>
           <Button variant="outlined" startIcon={<Restore />} onClick={handleRestore} size="medium">
             Restore
@@ -202,6 +206,20 @@ export const SnapshotDetailsPage: React.FC<SnapshotDetailsPageProps> = ({
             Compare
           </Button>
         </Box>
+
+        <FormControlLabel
+          control={
+            <Checkbox
+              size="small"
+              checked={showOnlySelected}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setShowOnlySelected(e.target.checked)
+              }
+            />
+          }
+          label={`Show selected (${selectedPVs.length})`}
+          sx={{ ml: 1 }}
+        />
       </Stack>
 
       {/* Tag Filter Bar */}
@@ -249,85 +267,33 @@ export const SnapshotDetailsPage: React.FC<SnapshotDetailsPageProps> = ({
       <Box
         sx={{ flex: 1, minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}
       >
-        <PVTable pvs={filteredPVs} searchFilter={searchText} onSelectionChange={setSelectedPVs} />
+        <PVTable
+          pvs={showOnlySelected ? selectedPVs : filteredPVs}
+          searchFilter={searchText}
+          onSelectionChange={setSelectedPVs}
+        />
       </Box>
 
       {/* Restore Confirmation Dialog */}
       <Dialog
         open={showRestoreDialog}
         onClose={() => setShowRestoreDialog(false)}
-        maxWidth="md"
+        maxWidth="sm"
         fullWidth
       >
-        <DialogTitle>
+        <DialogTitle sx={{ px: 2 }}>
           {selectedPVs.length === 0
             ? `Restore all ${pvsToRestore.length} PVs?`
             : `Restore ${selectedPVs.length} selected PV${selectedPVs.length > 1 ? 's' : ''}?`}
         </DialogTitle>
-        <DialogContent dividers sx={{ p: 0, maxHeight: 400, overflow: 'auto' }}>
-          {/* Table Header */}
-          <Box
-            sx={{
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-              backgroundColor: 'background.paper',
-              borderBottom: 1,
-              borderColor: 'divider',
-              display: 'flex',
-              px: 2,
-              py: 1,
-            }}
-          >
-            <Box sx={{ flex: 2, fontWeight: 'bold', fontSize: '0.875rem' }}>PV Name</Box>
-            <Box sx={{ flex: 1, fontWeight: 'bold', fontSize: '0.875rem', textAlign: 'right' }}>
-              Saved Setpoint
-            </Box>
-          </Box>
-
-          {/* Table Body */}
-          {pvsToRestore.map((pv) => (
-            <Box
-              key={pv.uuid}
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                px: 2,
-                py: 1,
-                borderBottom: 1,
-                borderColor: 'divider',
-                '&:hover': {
-                  bgcolor: 'action.hover',
-                },
-              }}
-            >
-              <Box
-                sx={{
-                  flex: 2,
-                  fontSize: '0.875rem',
-                  fontFamily: 'monospace',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                }}
-                title={pv.setpoint}
-              >
-                {pv.setpoint}
-              </Box>
-              <Box
-                sx={{
-                  flex: 1,
-                  fontSize: '0.875rem',
-                  fontFamily: 'monospace',
-                  textAlign: 'right',
-                }}
-              >
-                {formatValue(pv.setpoint_data?.data)}
-              </Box>
-            </Box>
-          ))}
+        <DialogContent sx={{ px: 2, pb: 2 }}>
+          <Typography>
+            {selectedPVs.length === 0
+              ? `You are about to restore all ${pvsToRestore.length} PVs.`
+              : `You are about to restore ${selectedPVs.length} selected PV${selectedPVs.length > 1 ? 's' : ''}.`}
+          </Typography>
         </DialogContent>
-        <DialogActions>
+        <DialogActions sx={{ px: 2, pb: 2 }}>
           <Button onClick={() => setShowRestoreDialog(false)}>Cancel</Button>
           <Button onClick={confirmRestore} variant="contained" color="primary">
             Restore