ui updates and bot updates. new commands and command handler

frontend/src/components/ServerSettings.js

@@ -17,6 +17,13 @@ const ServerSettings = () => {
   const [server, setServer] = useState(null);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [channels, setChannels] = useState([]);
+  const [roles, setRoles] = useState([]);
+  const [autoroleSettings, setAutoroleSettings] = useState({
+    enabled: false,
+    roleId: '',
+  });
+  const [commandsList, setCommandsList] = useState([]);
+  const [commandsExpanded, setCommandsExpanded] = useState(false);
   const [welcomeLeaveSettings, setWelcomeLeaveSettings] = useState({
     welcome: {
       enabled: false,
@@ -79,8 +86,53 @@ const ServerSettings = () => {
         }
       });
 
+    // Fetch roles
+    axios.get(`http://localhost:3002/api/servers/${guildId}/roles`)
+      .then(response => {
+        setRoles(response.data);
+      });
+
+    // Fetch autorole settings
+    axios.get(`http://localhost:3002/api/servers/${guildId}/autorole-settings`)
+      .then(response => {
+        if (response.data) {
+          setAutoroleSettings(response.data);
+        }
+      });
+
+    // Fetch commands/help list
+    axios.get(`http://localhost:3002/api/servers/${guildId}/commands`)
+      .then(response => {
+        setCommandsList(response.data || []);
+      })
+      .catch(() => setCommandsList([]));
+
+    // Open commands accordion if navigated from Help back button
+    if (location.state && location.state.openCommands) {
+      setCommandsExpanded(true);
+    }
+
   }, [guildId, location.state]);
 
+  const handleAutoroleSettingUpdate = (newSettings) => {
+    axios.post(`http://localhost:3002/api/servers/${guildId}/autorole-settings`, newSettings)
+      .then(response => {
+        if (response.data.success) {
+          setAutoroleSettings(newSettings);
+        }
+      });
+  };
+
+  const handleAutoroleToggleChange = (event) => {
+    const newSettings = { ...autoroleSettings, enabled: event.target.checked };
+    handleAutoroleSettingUpdate(newSettings);
+  };
+
+  const handleAutoroleRoleChange = (event) => {
+    const newSettings = { ...autoroleSettings, roleId: event.target.value };
+    handleAutoroleSettingUpdate(newSettings);
+  };
+
   const handleSettingUpdate = (newSettings) => {
     axios.post(`http://localhost:3002/api/servers/${guildId}/welcome-leave-settings`, newSettings)
       .then(response => {
@@ -193,7 +245,7 @@ const ServerSettings = () => {
         </Box>
         <UserSettings />
       </Box>
-      <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }}>
+      <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }} expanded={commandsExpanded} onChange={() => setCommandsExpanded(prev => !prev)}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography variant="h6">Commands</Typography>
         </AccordionSummary>
@@ -201,12 +253,18 @@ const ServerSettings = () => {
           {!isBotInServer && <Typography>Invite the bot to enable commands.</Typography>}
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '10px' }}>
             <Typography>Ping Command</Typography>
-            <Button variant="contained" onClick={togglePingCommand} disabled={!isBotInServer}>
-              {settings.pingCommand ? 'Disable' : 'Enable'}
-            </Button>
+            <Box>
+              <Button variant="contained" onClick={togglePingCommand} disabled={!isBotInServer}>
+                {settings.pingCommand ? 'Disable' : 'Enable'}
+              </Button>
+              <Button sx={{ ml: 1 }} variant="outlined" onClick={() => navigate(`/server/${guildId}/help`)}>
+                Open Help Page
+              </Button>
+            </Box>
           </Box>
         </AccordionDetails>
       </Accordion>
+      {/* Help moved to dedicated Help page */}
       <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography variant="h6">Welcome/Leave</Typography>
@@ -297,6 +355,32 @@ const ServerSettings = () => {
           </Box>
         </AccordionDetails>
       </Accordion>
+      <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography variant="h6">Autorole</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          {!isBotInServer && <Typography>Invite the bot to enable this feature.</Typography>}
+          <Box sx={{ marginTop: '10px' }}>
+            <FormControlLabel
+              control={<Switch checked={autoroleSettings.enabled} onChange={handleAutoroleToggleChange} disabled={!isBotInServer} />}
+              label="Enable Autorole"
+            />
+            <FormControl fullWidth sx={{ marginTop: '10px' }} disabled={!isBotInServer || !autoroleSettings.enabled}>
+              <Select
+                value={autoroleSettings.roleId}
+                onChange={handleAutoroleRoleChange}
+                displayEmpty
+              >
+                <MenuItem value="" disabled>Select a role</MenuItem>
+                {roles.map(role => (
+                  <MenuItem key={role.id} value={role.id}><span style={{ color: role.color }}>{role.name}</span></MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+        </AccordionDetails>
+      </Accordion>
       <Accordion sx={{ marginTop: '20px', opacity: isBotInServer ? 1 : 0.5 }}>
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <Typography variant="h6">Admin Commands</Typography>