From fbd925caca67431808a3211b1c17d425c107bdbe Mon Sep 17 00:00:00 2001
From: ExtremesecrecyOne <131911364+ExtremesecrecyOne@users.noreply.github.com>
Date: Wed, 23 Jul 2025 11:35:22 -0700
Subject: [PATCH] Update JackServerSettingsDialog.tsx

Summary

Added imports for the new refresh button in the JACK settings dialog, enabling quick reloading of ALSA devices without closing the dialog

Inserted an IconButton next to the audio device selectors so users can refresh the list on demand
---
 vite/src/pipedal/JackServerSettingsDialog.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/vite/src/pipedal/JackServerSettingsDialog.tsx b/vite/src/pipedal/JackServerSettingsDialog.tsx
index 4fd4246..c35a442 100644
--- a/vite/src/pipedal/JackServerSettingsDialog.tsx
+++ b/vite/src/pipedal/JackServerSettingsDialog.tsx
@@ -40,6 +40,8 @@ import DialogContent from '@mui/material/DialogContent';
 import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
+import IconButtonEx from './IconButtonEx';
+import RefreshIcon from '@mui/icons-material/Refresh';
 
 import AlsaDeviceInfo from './AlsaDeviceInfo';
 
@@ -454,7 +456,7 @@ const JackServerSettingsDialog = withStyles(
 
                 >
                     <DialogContent>
-                        <div>
+                        <div style={{ display: "flex", alignItems: "center" }}>
 						 {/* Audio Input Device */}
                             <FormControl className={classes.formControl}>
 							<InputLabel htmlFor="jsd_inputDevice">Input Device</InputLabel>
@@ -469,10 +471,10 @@ const JackServerSettingsDialog = withStyles(
 								<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
 						)) || <MenuItem value="" disabled>Loading...</MenuItem>}
 						</Select>
-						</FormControl>
-						
-						{/* Audio Output Device */}
-						<FormControl className={classes.formControl}>
+						    </FormControl>
+
+                                                {/* Audio Output Device */}
+                                                <FormControl className={classes.formControl}>
 							<InputLabel htmlFor="jsd_outputDevice">Output Device</InputLabel>
 							  <Select
 								id="jsd_outputDevice"
@@ -484,8 +486,11 @@ const JackServerSettingsDialog = withStyles(
 								{this.state.alsaDevices?.map(d => (
 										<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
 								)) || <MenuItem value="" disabled>Loading...</MenuItem>}
-								</Select>
-						</FormControl>
+								 </Select>
+                                                </FormControl>
+                                                <IconButtonEx tooltip="Refresh devices" onClick={() => this.requestAlsaInfo()} aria-label="refresh-audio-devices">
+                                                    <RefreshIcon />
+                                                </IconButtonEx>
                         </div><div>
                             <FormControl className={classes.formControl}>
                                 <InputLabel htmlFor="jsd_sampleRate">Sample rate</InputLabel>