feat: Integrate i18n support and enhance UI text localization

- Added internationalization (i18n) support across various components, enabling dynamic language switching and improved user experience.
- Updated multiple components to utilize translation functions for labels, buttons, and messages, ensuring consistent language display.
- Enhanced the user interface by refining text elements in the ChannelsTable, LogsTable, and various settings pages, improving clarity and accessibility.
- Adjusted CSS styles for better responsiveness and layout consistency across different screen sizes.

web/src/components/PageLayout.js

@@ -6,11 +6,13 @@ import FooterBar from './Footer.js';
 import { ToastContainer } from 'react-toastify';
 import React, { useContext } from 'react';
 import { StyleContext } from '../context/Style/index.js';
+import { useTranslation } from 'react-i18next';
 const { Sider, Content, Header, Footer } = Layout;
 
 
 const PageLayout = () => {
   const [styleState, styleDispatch] = useContext(StyleContext);
+  const { t } = useTranslation();
 
   return (
     <Layout style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
@@ -28,7 +30,7 @@ const PageLayout = () => {
             <App />
           </Content>
           <Layout.Footer>
-            <FooterBar></FooterBar>
+            <FooterBar />
           </Layout.Footer>
         </Layout>
       </Layout>