refactor: relocate feature components, rename css files, and refactor imports with @ alias

Author: bert27

client/src/components/Menu/models/navigation-model.ts

@@ -6,12 +6,16 @@ import SmartToyIcon from "@mui/icons-material/SmartToy";
 import "./sidenavbar.css";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-
-import { NavItem } from "./models/navigation-model";
 import { useConnectivity } from "@/context/connectivity-context";
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import { isSimulationMode } from "@/utils/simulation";
 
+export interface NavItem {
+  name: string;
+  linkTo: string;
+  icon: React.ReactElement;
+}
+
 const iconsPages = [
   { name: "menu.robot", linkTo: "/", icon: <SmartToyIcon /> },
   { name: "menu.drinks", linkTo: "/drinks", icon: <LocalBarIcon /> },

client/src/components/Menu/sidenavbar.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Paper, Tooltip } from "@mui/material";
 import { IRemoteControlReceiveStatus } from "@/pages/car/models/model";
 
-import "./styles.css";
+import "./jostick-styles.css";
 
 // Icons
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

client/src/components/clock/Slider/models/slider.model.ts

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { Box, useTheme, useMediaQuery, Theme, Alert } from "@mui/material";
-import "@/pages/car/styles.css";
+import "@/pages/car/car-styles.css";
 import { useRobotControl } from "./hooks/use-robot-control";
 import { SimulationAlert } from "@/components/simulation-alert/simulation-alert";
 import { robotService } from "@/pages/car/services/robot.service";
@@ -9,7 +9,7 @@ import { robotService } from "@/pages/car/services/robot.service";
 import { CarHeader } from "./components/car-header";
 import { TelemetryCard } from "./components/kpi-cards/telemetry-card";
 import { ActuatorsCard } from "./components/kpi-cards/actuators-card";
-import { RgbCard } from "@/components/rgb-card/rgb-card";
+import { RgbCard } from "@/pages/car/components/rgb-card/rgb-card";
 import { KineticCard } from "./components/kpi-cards/kinetic-card";
 
 export const CarPage: React.FC = () => {

client/src/components/clock/models/clock.model.ts

@@ -2,7 +2,7 @@ import { Box, Paper, Typography, SxProps, Theme } from "@mui/material";
 import PaletteIcon from '@mui/icons-material/Palette';
 import { HexColorPicker } from "react-colorful";
 import { useTranslation } from "react-i18next";
-import "./styles.css";
+import "./rgb-card-styles.css";
 
 interface RgbCardProps {
   color: string;