add Chinese translate

src/App.js

@@ -17,8 +17,10 @@ import './css/index.css';
 import ConnectionIndicators from './ConnectionIndicators';
 import DnsIcon from '@mui/icons-material/Dns';
 import LanIcon from '@mui/icons-material/Lan';
+import LanguageIcon from '@mui/icons-material/Language';
 import CompactSidebar from './CompactSidebar';
 import DynamicNodeIdServer from './services/DynamicNodeIdServer';
+import { LanguageProvider, useTranslation } from './i18n/LanguageContext';
 
 window.mavlinkSession = new MavlinkSession();
 window.localNode = new dronecan.Node({name: "com.vimdrones.web_gui"});
@@ -32,6 +34,17 @@ localNode.on('uavcan.protocol.file.Read.Request', (transfer) => {
 });
 
 const App = () => {
+    return (
+        <ThemeProvider theme={theme}>
+            <LanguageProvider>
+                <AppContent />
+            </LanguageProvider>
+        </ThemeProvider>
+    );
+};
+
+const AppContent = () => {
+    const { t, language, setLanguage } = useTranslation();
     const [nodes, setNodes] = useState({});
     const [nodesUpdateTimestamp, setNodesUpdateTimestamp] = useState(0);
     const [isConnected, setIsConnected] = useState(false);
@@ -75,7 +88,7 @@ const App = () => {
     const handleConnectionStatusChange = (isConnected) => {
         setIsConnected(isConnected);
         showMessage(
-            isConnected ? 'Successfully connected to device' : 'Disconnected from device',
+            isConnected ? t('app.connected') : t('app.disconnected'),
             isConnected ? 'success' : 'info'
         );
     };
@@ -87,7 +100,7 @@ const App = () => {
         
         if (window.localNode) {
             window.localNode.changeBus(newBus);
-            showMessage(`Switched to CAN bus ${newBus}`, 'info');
+            showMessage(t('app.bus_switched', { bus: newBus }), 'info');
         }
     };
 
@@ -119,16 +132,16 @@ const App = () => {
         if (window.dnaServer.getStatus().isActive) {
             window.dnaServer.stop();
             setDnaServerActive(false);
-            showMessage('DNA server stopped', 'info');
+            showMessage(t('app.dna_stopped'), 'info');
         } else {
             const success = window.dnaServer.start(1, 125);
             setDnaServerActive(success);
-            showMessage(success ? 'DNA server started' : 'Failed to start DNA server', success ? 'success' : 'error');
+            showMessage(success ? t('app.dna_started') : t('app.dna_failed'), success ? 'success' : 'error');
         }
     };
 
     return (
-        <ThemeProvider theme={theme}>
+        <>
             <AppBar position="static">
                 <Toolbar variant="dense" sx={{ display: 'flex', justifyContent: 'space-between' }}>
                     <Box sx={{width: '30%', flexGrow: 1, display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}> 
@@ -142,7 +155,7 @@ const App = () => {
                             </a>
                         </Box>
                         <Typography variant="caption">
-                            DroneCAN Web Tools 
+                            {t('app.title')}
                         </Typography>
                     </Box>
                     <Box sx={{width: '30%', flexGrow: 1, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', gap: 1}}> 
@@ -175,10 +188,10 @@ const App = () => {
                                     backgroundColor: 'background.paper',
                                 }}
                             >
-                                <MenuItem value={0}>Bus 1</MenuItem>
-                                <MenuItem value={1}>Bus 2</MenuItem>
-                                <MenuItem value={2}>Bus 3</MenuItem>
-                                <MenuItem value={3}>Bus 4</MenuItem>
+                                <MenuItem value={0}>{t('app.bus', { n: 1 })}</MenuItem>
+                                <MenuItem value={1}>{t('app.bus', { n: 2 })}</MenuItem>
+                                <MenuItem value={2}>{t('app.bus', { n: 3 })}</MenuItem>
+                                <MenuItem value={3}>{t('app.bus', { n: 4 })}</MenuItem>
                             </Select>
                         </FormControl>
 
@@ -206,16 +219,27 @@ const App = () => {
                                 }
                             } : {}}
                         >
-                            DNA
+                            {t('app.dna')}
                         </Button>
                         
-                        <Button 
-                            variant="contained" 
-                            color="primary" 
+                        <Tooltip title={language === 'en' ? '中文' : 'English'}>
+                            <IconButton
+                                size="small"
+                                color="inherit"
+                                onClick={() => setLanguage(language === 'en' ? 'zh' : 'en')}
+                                sx={{ mr: 0.5 }}
+                            >
+                                <LanguageIcon fontSize="small" />
+                            </IconButton>
+                        </Tooltip>
+
+                        <Button
+                            variant="contained"
+                            color="primary"
                             startIcon={<LanIcon />}
                             onClick={handleOpenModal}
                         >
-                            Adapter
+                            {t('app.adapter')}
                         </Button>
                     </Box>
                 </Toolbar>
@@ -294,7 +318,7 @@ const App = () => {
                     {snackbarMessage}
                 </Alert>
             </Snackbar>
-        </ThemeProvider>
+        </>
     );
 };