refactor: migrate from MUI to Ant Design for layout and components

- Updated package.json to remove MUI dependencies and add Ant Design. - Refactored App component to use Ant Design's Layout, Header, Footer, and Sidebar. - Created new Footer, Header, and Sidebar components using Ant Design. - Removed old Header component that used MUI. - Updated Home component to use Ant Design's Typography and Button. - Added global styles in index.less and theme styles in theme.less and layout.less. - Removed MUI theme configuration and replaced it with Ant Design's theming.
2025-11-22 19:49:02 +01:00
parent c986c1215a
commit ea9d79f671
16 changed files with 3268 additions and 783 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,31 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "import"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+        "alphabetize": { "order": "asc", "caseInsensitive": true },
+        "newlines-between": "always"
+      }
+    ],
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,14 +8,12 @@
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
-    "dev-local": "cross-env VITE_BACKEND_URL=http://localhost:8000/api vite",
-    "dev-server": "cross-env VITE_BACKEND_URL=http://mitm.lan/api vite"
+    "dev-local": "cross-env VITE_BACKEND_URL=http://localhost:8000/api vite --mode development",
+    "dev-server": "cross-env VITE_BACKEND_URL=http://mitm.lan/api vite --mode development"
  },
  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
+    "@ant-design/icons": "^6.1.0",
+    "antd": "^6.0.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-router-dom": "^7.9.4"
@@ -28,10 +26,15 @@
    "@types/react-router-dom": "^5.3.3",
    "@vitejs/plugin-react": "^5.0.4",
    "cross-env": "^10.1.0",
-    "eslint": "^9.36.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.22",
    "globals": "^16.4.0",
+    "less": "^4.4.2",
+    "less-loader": "^12.3.0",
+    "prettier": "^3.6.2",
    "typescript": "^5.9.3",
    "vite": "^7.1.12"
  }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,15 +1,29 @@
-import { Routes, Route } from "react-router-dom";
-import "./App.css";
-import Header from "./header/Header";
-import Home from "./pages/Home";
+import { Layout } from 'antd';
+import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import { AppFooter } from './Layout/Footer';
+import AppHeader from './Layout/Header';
+import Sidebar from './Layout/Sidebar';
+
+const { Content, Footer } = Layout;

 export default function App() {
+  const [collapsed, setCollapsed] = useState(false);
  return (
    <>
-      <Header />
-      <Routes>
-        <Route path="/" element={<Home />} />
-      </Routes>
+      <Layout style={{ minHeight: '100vh' }}>
+        <AppHeader />
+        <Layout>
+          <Sidebar collapsed={collapsed} onCollapse={setCollapsed} />
+          <Layout style={{ padding: '24px' }}>
+            <Content style={{ minHeight: 'calc(100vh - 64px)' }}>
+              <Outlet />
+            </Content>
+          </Layout>
+        </Layout>
+      </Layout>
+      <AppFooter />
    </>
  );
 }
--- a/frontend/src/Layout/Footer.tsx
+++ b/frontend/src/Layout/Footer.tsx
@@ -0,0 +1,5 @@
+import { Footer } from 'antd/es/layout/layout';
+
+export const AppFooter: React.FC = () => {
+  return <Footer>MitM Webserver App by Marcus Almert ©2025</Footer>;
+};
--- a/frontend/src/Layout/Header.tsx
+++ b/frontend/src/Layout/Header.tsx
@@ -0,0 +1,11 @@
+import { Layout } from 'antd';
+import React from 'react';
+import '../theme/layout.less';
+
+const { Header } = Layout;
+
+const AppHeader: React.FC = () => {
+  return <Header>MitM Webserver</Header>;
+};
+
+export default AppHeader;
--- a/frontend/src/Layout/Sidebar.tsx
+++ b/frontend/src/Layout/Sidebar.tsx
@@ -0,0 +1,38 @@
+// src/components/Sidebar.tsx
+import { HomeOutlined, InfoCircleOutlined, SettingOutlined } from '@ant-design/icons';
+import { Layout, Menu } from 'antd';
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import '../theme/layout.less';
+
+const { Sider } = Layout;
+
+const menuItems = [
+  { key: '/', icon: <HomeOutlined />, label: 'Home' },
+  { key: '/about', icon: <InfoCircleOutlined />, label: 'About' },
+  { key: '/settings', icon: <SettingOutlined />, label: 'Settings' },
+];
+
+interface SidebarProps {
+  collapsed: boolean;
+  onCollapse: (collapsed: boolean) => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ collapsed, onCollapse }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
+      <Menu
+        theme="dark"
+        mode="inline"
+        selectedKeys={[location.pathname]}
+        items={menuItems}
+        onClick={(e) => navigate(e.key)}
+      />
+    </Sider>
+  );
+};
+
+export default Sidebar;
--- a/frontend/src/header/Header.tsx
+++ b/frontend/src/header/Header.tsx
@@ -1,103 +0,0 @@
-import React from "react";
-import {
-  AppBar,
-  Toolbar,
-  Typography,
-  IconButton,
-  Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-  Box,
-  useTheme,
-} from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import { useNavigate, useLocation, To } from "react-router-dom";
-import { Home } from "@mui/icons-material";
-
-const pages = [
-  {
-    name: (
-      <span className="drawer-pages">
-        <Home /> Home
-      </span>
-    ),
-    path: "/",
-  },
-];
-
-export default function Header() {
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
-  const theme = useTheme();
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const toggleDrawer = (open: boolean) => () => setDrawerOpen(open);
-
-  const handleNavigate = (path: To) => {
-    navigate(path);
-    setDrawerOpen(false);
-  };
-
-  const drawerList = (
-    <Box
-      sx={{
-        width: 250,
-        height: "100%",
-        bgcolor: theme.palette.background.default,
-        color: theme.palette.text.primary,
-      }}
-      role="presentation"
-      onKeyDown={toggleDrawer(false)}
-    >
-      <Typography
-        variant="h6"
-        sx={{
-          textAlign: "center",
-          my: 2,
-          fontWeight: "bold",
-          color: theme.palette.primary.main,
-        }}
-      >
-        MitM Webserver
-      </Typography>
-      <List>
-        {pages.map(({ name, path }) => (
-          <ListItem key={name} disablePadding>
-            <ListItemButton
-              onClick={() => handleNavigate(path)}
-              selected={location.pathname === path}
-            >
-              <ListItemText primary={name} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  );
-
-  return (
-    <>
-      <AppBar position="fixed" color="primary" elevation={2}>
-        <Toolbar>
-          <IconButton color="inherit" edge="start" onClick={toggleDrawer(true)}>
-            <MenuIcon />
-          </IconButton>
-          <Typography
-            variant="h6"
-            component="div"
-            sx={{ flexGrow: 1, fontWeight: "bold", cursor: "pointer" }}
-            onClick={() => handleNavigate("/")}
-          >
-            MitM Webserver
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <Toolbar /> {/* spacing */}
-      <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
-        {drawerList}
-      </Drawer>
-    </>
-  );
-}
--- a/frontend/src/index.less
+++ b/frontend/src/index.less
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,21 +1,20 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App.js";
+import { ConfigProvider } from 'antd';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.js';
+import './index.less';
+import './theme/theme.less';

-import { ThemeProvider, createTheme } from "@mui/material/styles";
-import { BrowserRouter } from "react-router-dom";
-import theme from "./theme";
-
-const rootElement = document.getElementById("root");
+const rootElement = document.getElementById('root');
 if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
-      <ThemeProvider theme={theme}>
+      <ConfigProvider theme={{}}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
-      </ThemeProvider>
-    </StrictMode>
+      </ConfigProvider>
+    </StrictMode>,
  );
 }
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,14 +1,10 @@
-import { Container, Typography, Button } from "@mui/material";
+import { Button, Typography } from 'antd';

 export default function Home() {
  return (
-    <Container style={{ textAlign: "center", marginTop: "4rem" }}>
-      <Typography variant="h4" gutterBottom>
-        🚀 Hello MUI + React
-      </Typography>
-      <Button variant="contained" color="primary">
-        Klick mich!
-      </Button>
-    </Container>
+    <>
+      <Typography>🚀 Hello MUI + React</Typography>
+      <Button color="primary">Klick mich!</Button>
+    </>
  );
 }
--- a/frontend/src/theme.tsx
+++ b/frontend/src/theme.tsx
@@ -1,111 +0,0 @@
-import { createTheme } from "@mui/material/styles";
-
-const theme = createTheme({
-  palette: {
-    mode: "light",
-
-    // === Primary colors (blue shades) ===
-    primary: {
-      main: "#1976d2", // medium blue
-      light: "#63a4ff", // light blue
-      dark: "#004ba0", // deep blue
-      contrastText: "#ffffff",
-    },
-
-    // === Secondary colors (gray shades) ===
-    secondary: {
-      main: "#737373", // neutral medium gray
-      light: "#bfbfbf", // lighter gray
-      dark: "#404040", // darker gray
-      contrastText: "#ffffff",
-    },
-
-    // === Background colors ===
-    background: {
-      default: "#f9f9f9", // soft gray-white for page background
-      paper: "#ffffff", // white for cards, modals, etc.
-    },
-
-    // === Text colors ===
-    text: {
-      primary: "#262626", // almost black
-      secondary: "#737373", // muted gray
-    },
-
-    // === Divider ===
-    divider: "#d9d9d9",
-  },
-
-  typography: {
-    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
-    h1: { fontWeight: 700, fontSize: "2.5rem", color: "#262626" },
-    h2: { fontWeight: 600, fontSize: "2rem", color: "#262626" },
-    h3: { fontWeight: 600, fontSize: "1.75rem", color: "#262626" },
-    body1: { fontSize: "1rem", lineHeight: 1.6, color: "#262626" },
-    button: {
-      textTransform: "none",
-      fontWeight: 500,
-      color: "#ffffff",
-    },
-  },
-
-  shape: {
-    borderRadius: 10,
-  },
-
-  components: {
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#1976d2", // primary main
-          color: "#ffffff",
-        },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: 8,
-          textTransform: "none",
-          fontWeight: 500,
-          "&:hover": {
-            backgroundColor: "#004ba0", // darker blue
-          },
-        },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          borderRadius: 0,
-          backgroundColor: "#ffffff",
-          color: "#262626",
-          boxShadow:
-            "0px 2px 8px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1)",
-        },
-      },
-    },
-    MuiDrawer: {
-      styleOverrides: {
-        paper: {
-          backgroundColor: "#f0f0f0", // subtle gray drawer background
-          color: "#262626",
-        },
-      },
-    },
-    MuiListItemButton: {
-      styleOverrides: {
-        root: {
-          "&.Mui-selected": {
-            backgroundColor: "#e0e0e0",
-            "&:hover": {
-              backgroundColor: "#d0d0d0",
-            },
-          },
-        },
-      },
-    },
-  },
-});
-
-export default theme;
--- a/frontend/src/theme/layout.less
+++ b/frontend/src/theme/layout.less
@@ -0,0 +1,57 @@
+@import "theme.less";
+
+html, body, #root {
+  height: 100%;
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: @body-background;
+  color: @text-color;
+}
+
+.ant-layout {
+  background: @body-background;
+}
+
+.ant-layout-header {
+  background: @layout-header-background;
+  color: @text-color;
+  font-size: @font-size-header;
+  position: sticky;
+  top: 0px;
+  left: 0px;
+  overflow: auto;
+}
+
+.ant-layout-content {
+  background: @component-background;
+  min-height: calc(100vh - 64px - 70px); // header + footer height
+}
+
+.ant-layout-sider{
+  li span{  font-size: @font-size-slider;}
+  height: calc(100vh - 64px - 70px);
+  background: @component-background;
+  top: 64px;
+  overflow: auto;
+  position: sticky;
+}
+
+.ant-layout-footer {
+  background: @component-background;
+  color: @text-color-secondary;
+  text-align: center;
+  width: auto;
+}
+
+.ant-menu-dark {
+  background: @menu-dark-bg;
+  color: @text-color;
+}
+
+.ant-menu-dark .ant-menu-item-selected {
+  background-color: darken(@primary-color, 10%);
+}
--- a/frontend/src/theme/theme.less
+++ b/frontend/src/theme/theme.less
@@ -0,0 +1,15 @@
+// Dark theme colors
+@primary-color: #1DA57A;
+@text-color: #ffffff;
+@text-color-secondary: #bfbfbf;
+@heading-color: #ffffff;
+@body-background: #141414;
+@component-background: #1f1f1f;
+@border-color-base: #434343;
+@border-radius-base: 8px;
+@font-size-base: 14px;
+@menu-dark-bg: #1f1f1f;
+@menu-dark-submenu-bg: #1a1a1a;
+@layout-header-background: #1f1f1f;
+@font-size-header: 24px;
+@font-size-slider: 18px;