Complete modern webinterface implementation with comprehensive grid features and help system

src/webui/modern/package.json

@@ -13,10 +13,12 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/marked": "^5.0.2",
     "@types/node": "^16.18.126",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@types/react-router-dom": "^5.3.3",
+    "marked": "^16.3.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.2",

src/webui/modern/src/App.tsx

@@ -33,6 +33,10 @@ import DVR from './components/DVR';
 import Configuration from './components/Configuration';
 import Status from './components/Status';
 import About from './components/About';
+import HelpSystem from './components/common/HelpSystem';
+
+// Contexts
+import { HelpProvider, useHelp } from './contexts/HelpContext';
 
 // Theme matching Tvheadend's blue color scheme
 const theme = createTheme({
@@ -62,6 +66,7 @@ function AppContent() {
   const navigate = useNavigate();
   const location = useLocation();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const { isHelpOpen, helpPageName, closeHelp } = useHelp();
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
@@ -179,6 +184,13 @@ function AppContent() {
           <Route path="/status" element={<Status />} />
           <Route path="/about" element={<About />} />
         </Routes>
+
+        {/* Global Help System */}
+        <HelpSystem
+          open={isHelpOpen}
+          onClose={closeHelp}
+          pageName={helpPageName}
+        />
       </Box>
     </Box>
   );
@@ -187,9 +199,11 @@ function AppContent() {
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <Router>
-        <AppContent />
-      </Router>
+      <HelpProvider>
+        <Router basename="/modern">
+          <AppContent />
+        </Router>
+      </HelpProvider>
     </ThemeProvider>
   );
 }

src/webui/modern/src/components/Configuration.tsx

@@ -44,6 +44,7 @@ import {
   loadLanguages, 
   LanguageOption
 } from '../utils/api';
+import { useHelp } from '../contexts/HelpContext';
 import AccessEntriesSection from './sections/AccessEntriesSection';
 import PasswordsSection from './sections/PasswordsSection';
 import IPBlockingSection from './sections/IPBlockingSection';
@@ -89,6 +90,7 @@ function Configuration() {
   const [selectedSection, setSelectedSection] = useState('general');
   const [selectedSubsection, setSelectedSubsection] = useState('base');
   const [expandedSections, setExpandedSections] = useState<string[]>(['general']);
+  const { showHelp } = useHelp();
 
   // Server data
   const [serverInfo, setServerInfo] = useState<ServerInfo | null>(null);
@@ -520,6 +522,7 @@ function Configuration() {
             variant="outlined"
             size="small"
             sx={{ mb: 1 }}
+            onClick={() => showHelp('introduction')}
           >
             Help
           </Button>
@@ -689,7 +692,12 @@ function Configuration() {
           <Button onClick={nextWizardStep} variant="contained">
             {wizardStep === 2 ? 'Finish' : 'Save & Next'}
           </Button>
-          <Button startIcon={<HelpIcon />}>Help</Button>
+          <Button 
+            startIcon={<HelpIcon />}
+            onClick={() => showHelp('wizard/hello')}
+          >
+            Help
+          </Button>
         </DialogActions>
       </Dialog>
     </Box>