fixed: packet size of mnl including packet size it-self (was causing crash sometime) and frontend updates

frontend/src/components/MainLayout.tsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
-import { ActionIcon, Container, Menu, Space } from '@mantine/core';
+import { ActionIcon, Container, Menu, Space, Tooltip } from '@mantine/core';
 import { AppShell } from '@mantine/core';
 import NavBar from './NavBar';
 import HeaderPage from './Header';
 import { getMainPath } from '../js/utils';
 import { useLocation } from 'react-router-dom';
-import { RiMenu5Fill } from 'react-icons/ri';
 import { useNavbarStore } from '../js/store';
+import { HiMenu } from "react-icons/hi";
 
 
 function MainLayout({ children }:{ children:any }) {
@@ -39,9 +39,11 @@ export default MainLayout;
 
 export const MenuDropDownWithButton = ({children}:{children:any}) => <Menu withArrow>
         <Menu.Target>
-            <ActionIcon variant='transparent'>
-                <RiMenu5Fill size={24} color='#FFF'/>
-            </ActionIcon>
+            <Tooltip label="More options" color="gray">
+              <ActionIcon variant='transparent'>
+                  <HiMenu size={24} color='#FFF'/>
+              </ActionIcon>
+            </Tooltip>
         </Menu.Target>
         <Menu.Dropdown>
             {children}

frontend/src/index.tsx

@@ -1,28 +1,69 @@
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from "react-router-dom"
 import App from './App';
-import { createTheme, MantineProvider } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import {
   QueryClientProvider,
 } from '@tanstack/react-query'
 import { queryClient } from './js/utils';
+import { CodeHighlightAdapterProvider, stripShikiCodeBlocks } from '@mantine/code-highlight';
+
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/code-highlight/styles.css';
 import './index.css';
+import { CodeHighlightAdapter } from '@mantine/code-highlight/lib/CodeHighlightProvider/CodeHighlightProvider';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 
+// Shiki requires async code to load the highlighter
+async function loadShiki() {
+  const { createHighlighter } = await import('shiki');
+  const shiki = await createHighlighter({
+    langs: ['python'],
+    themes: ['one-dark-pro', 'one-light']
+  });
+
+  return shiki;
+}
+
+// Pass this adapter to CodeHighlightAdapterProvider component
+export const customShikiAdapter: CodeHighlightAdapter = {
+  // loadContext is called on client side to load shiki highlighter
+  // It is required to be used if your library requires async initialization
+  // The value returned from loadContext is passed to createHighlighter as ctx argument
+  loadContext: loadShiki,
+
+  getHighlighter: (ctx) => {
+    if (!ctx) {
+      return ({ code }) => ({ highlightedCode: code, isHighlighted: false });
+    }
+
+    return ({ code, language, colorScheme }) => ({
+      isHighlighted: true,
+      // stripShikiCodeBlocks removes <pre> and <code> tags from highlighted code
+      highlightedCode: stripShikiCodeBlocks(
+        ctx.codeToHtml(code, {
+          lang: language,
+          theme: colorScheme === 'dark' ? 'one-dark-pro' : 'one-light',
+        })
+      ),
+    });
+  },
+};
+
 root.render(
   <QueryClientProvider client={queryClient}>
     <MantineProvider defaultColorScheme='dark'>
+      <CodeHighlightAdapterProvider adapter={customShikiAdapter}>
         <Notifications />
         <BrowserRouter>
           <App />
         </BrowserRouter>
+      </CodeHighlightAdapterProvider>
     </MantineProvider>
   </QueryClientProvider>
 );