live updates and file organization

frontend/src/components/server/HelpPage.js

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { get } from '../../lib/api';
+import { Box, IconButton, Typography } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+const HelpPage = () => {
+  const { guildId } = useParams();
+  const navigate = useNavigate();
+  const [commands, setCommands] = useState([]);
+
+  useEffect(() => {
+    get(`/api/servers/${guildId}/commands`).then(res => {
+        const cmds = res.data || [];
+        // sort: locked commands first (preserve relative order), then others alphabetically
+        const locked = cmds.filter(c => c.locked);
+        const others = cmds.filter(c => !c.locked).sort((a, b) => a.name.localeCompare(b.name));
+        setCommands([...locked, ...others]);
+      })
+      .catch(() => setCommands([]));
+  }, [guildId]);
+
+  const handleBack = () => {
+    // Navigate back to server settings and instruct it to open Commands accordion
+    navigate(`/server/${guildId}`, { state: { openCommands: true } });
+  }
+
+  return (
+    <div style={{ padding: 20 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+  <IconButton onClick={handleBack}><ArrowBackIcon /></IconButton>
+  <Typography variant="h5">Commands List</Typography>
+      </Box>
+      <Box sx={{ marginTop: 2 }}>
+        {commands.length === 0 && <Typography>No commands available.</Typography>}
+        {commands.map(cmd => (
+          <Box key={cmd.name} sx={{ border: '1px solid #eee', borderRadius: 1, padding: 1, marginTop: 1 }}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Typography sx={{ fontWeight: 'bold' }}>/{cmd.name}</Typography>
+              <Typography sx={{ color: cmd.locked ? 'primary.main' : (cmd.enabled ? 'success.main' : 'text.secondary') }}>{cmd.locked ? 'Locked' : (cmd.enabled ? 'Enabled' : 'Disabled')}</Typography>
+            </Box>
+            <Typography sx={{ mt: 0.5 }}>{cmd.description}</Typography>
+          </Box>
+        ))}
+      </Box>
+    </div>
+  );
+}
+
+export default HelpPage;