fixed more styling issues and added dotenv for production

.env

@@ -1,2 +1,3 @@
 REACT_APP_ALLOW_CONTEXT_MENU=false
-UPDATE_PORT_LIST_INTERVAL=5000
+UPDATE_PORT_LIST_INTERVAL=5000
+DEBUG_PROD=false

package.json

@@ -24,13 +24,15 @@
     "@electron/fuses": "^1.8.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
+    "@types/dotenv-webpack": "^7.0.7",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
     "@vercel/webpack-asset-relocator-loader": "1.7.3",
     "css-loader": "^6.0.0",
+    "dotenv-webpack": "^8.1.0",
     "electron": "^31.3.1",
     "eslint": "^8.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",

src/lib/env.ts

@@ -3,6 +3,7 @@ import z from "zod";
 const environmentVariables = z.object({
   REACT_APP_ALLOW_CONTEXT_MENU: z.string().default("true"),
   UPDATE_PORT_LIST_INTERVAL: z.coerce.number().default(5000),
+  DEBUG_PROD: z.string().optional()
 });
 
 const parsedResults = environmentVariables.safeParse(process.env);

src/main/index.ts

@@ -5,9 +5,15 @@ import Store from "electron-store";
 import defaults from "./defaultSettings";
 import log from "electron-log";
 import MenuBuilder from "./menu";
-import SerialPortListener from '@/main/serialportListener';
+import SerialPortListener from "@/main/serialportListener";
+
+// Before doing anything, make sure logger is assigned to track everything in the ongoing initialization
+Object.assign(console, log.functions);
+log.initialize({ spyRendererConsole: true });
+
 import "dotenv/config";
-import "@/lib/env"
+import "@/lib/env";
+
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
@@ -166,10 +172,6 @@ ipcMain.on(IPCChannelType.IS_DEVELOPMENT, async (event) => {
   event.returnValue = isDevelopment;
 });
 
-ipcMain.on(IPCChannelType.GET_ENV, async (event, arg) => {
-  event.returnValue = process.env[arg];
-});
-
 ipcMain.on(IPCChannelType.CHANGE_THEME, async (event, args) => {
   nativeTheme.themeSource = args[0];
 });

src/renderer/components/output/OutputDataTable.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useContext } from '@/renderer/context';
 import { IDefaultProps, IPCChannelType } from '@minterm/types';
 import OutputDataTableCore from './OutputDataTableCore';
+import clsx from 'clsx';
 
 interface IOutputDataTableProps extends IDefaultProps {
   selectedCells: Array<any>;
@@ -39,9 +40,9 @@ const OutputDataTable: React.FC<IOutputDataTableProps> = ({
   }, []);
 
   return (
-    <div id={`${id}:container`} className={`${className} h-full`}>
+    <div id={`${id}:container`} className={clsx(className, "h-full")}>
       <OutputDataTableCore
-        id={`${id}:outputTable`}
+        id={`${id}:outputTableCore`}
         data={receivedData}
         setData={setReceivedData}
         clearButtonToolTip={t('CLEAR_RECEIVED')}

src/renderer/components/output/OutputDataTableCore.tsx

@@ -5,6 +5,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 import { ConversionType, DataPointType } from '@minterm/types';
 import ActionBar, { ActionBarProps } from './ActionBar';
+import clsx from 'clsx';
 
 interface IOutputDataTableCoreProps extends ActionBarProps {
   data: Array<DataPointType>;
@@ -213,8 +214,7 @@ const OutputDataTableCore: React.FC<IOutputDataTableCoreProps> = ({
     <div
       id={`${id}:container`}
       ref={ref}
-      className={`${className} h-full`}
-      style={{ paddingBottom: '50px' }}
+      className={clsx(className, "flex-column")}
     >
       <ActionBar
         id={`${id}:outputActionBar`}
@@ -231,7 +231,7 @@ const OutputDataTableCore: React.FC<IOutputDataTableCoreProps> = ({
       />
       <div className="h-full datatable">
         <DataTable
-          id={id}
+          id={`${id}:dataTable`}
           value={tableData}
           responsiveLayout="scroll"
           scrollable

src/renderer/components/output/OutputLineChart.tsx

@@ -234,7 +234,7 @@ const OutputLineChart: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
     const opacity = isDataNumeric ? "1" : "0.5";
     return (
       <Chart
-        id={id}
+        id={id + ":chart"}
         ref={chartRef}
         type="line"
         className="w-full"
@@ -246,7 +246,7 @@ const OutputLineChart: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   };
 
   return (
-    <div id={id + ":container"} className={clsx(className, " h-full flex flex-column")}>
+    <div id={id + ":container"} className={clsx(className, "flex-column")}>
       <ActionBar
         id={id + ":outputActionBar"}
         data={receivedData}

src/renderer/components/output/OutputTabView.tsx

@@ -2,7 +2,7 @@ import { TabPanel, TabView } from 'primereact/tabview';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContext } from '@/renderer/context';
-import { IDefaultProps, IPCChannelType } from '@minterm/types';
+import { IDefaultProps } from '@minterm/types';
 import ContextMenuOutput from './ContextMenuOutput';
 import OutputDataTable from './OutputDataTable';
 import OutputTextArea from './OutputTextArea';
@@ -18,11 +18,7 @@ const OutputTabView: React.FC<IDefaultProps> = ({ id, className }) => {
   );
 
   const isContextEnabled = () => {
-    const env = window.electron?.ipcRenderer.fetch(
-      IPCChannelType.GET_ENV,
-      'REACT_APP_ALLOW_CONTEXT_MENU'
-    );
-    return env !== 'false';
+    return process.env.REACT_APP_ALLOW_CONTEXT_MENU !== 'false';
   };
 
   return (
@@ -45,7 +41,7 @@ const OutputTabView: React.FC<IDefaultProps> = ({ id, className }) => {
           className="h-full"
         >
           <OutputDataTable
-            id="outDataTable"
+            id="outputDataTable"
             selectedCells={selectedCellsInTable}
             setSelectedCells={setSelectedCellsInTable}
           />
@@ -56,8 +52,7 @@ const OutputTabView: React.FC<IDefaultProps> = ({ id, className }) => {
           className="h-full"
         >
           <OutputTextArea
-            id="lineChart"
-            className="pb-5"
+            id={`${id}:outputTextArea`}
             data={receivedData.map((i) => i.value).join('')}
             setData={setReceivedData}
           />

src/renderer/components/output/OutputTextArea.tsx

@@ -72,8 +72,8 @@ const OutputTextArea: React.FC<IOutputTextAreaProps> = ({
 
 
   return (
-    <div id={`${id}:container`} className={clsx(className, "card h-full")}>
-      <div hidden={actionBarHidden}>
+    <div id={`${id}:container`} className={clsx(className, "flex-column")}>
+      <div id={`${id}:outputActionBarWrapper`} hidden={actionBarHidden}>
         <ActionBar
           id={`${id}:outputActionBar`}
           data={data}
@@ -84,15 +84,15 @@ const OutputTextArea: React.FC<IOutputTextAreaProps> = ({
           clearButtonToolTip={t('CLEAR_RECEIVED')}
         />
       </div>
-      <div className="h-full">
+      <div id={`${id}:outputTextWrapper`} className="h-full">
       <Button
           onClick={goDown}
           visible={downScrollable}
           className="scrollDown p-button-text"
           icon="pi pi-angle-down"
         />
         <InputTextarea
-          id={id}
+          id={`${id}:outputText`}
           value={data}
           readOnly
           ref={ref}

src/renderer/components/output/TransmitDataTable.tsx

@@ -14,34 +14,28 @@ const TransmitDataTable: React.FC<IDefaultProps> = ({ id, className }) => {
   const [selectedCells, setSelectedCells] = useState<Array<any>>([]);
 
   const isContextEnabled = () => {
-    const env = window.electron?.ipcRenderer.fetch(
-      IPCChannelType.GET_ENV,
-      'REACT_APP_ALLOW_CONTEXT_MENU'
-    );
-    return env !== 'false';
+    return process.env.REACT_APP_ALLOW_CONTEXT_MENU !== 'false';
   };
 
   return (
-    <div id={`${id}:container`} className={clsx(className, 'w-full h-full')}>
+    <div id={`${id}:container`} className={clsx(className, 'flex-column w-full pt-2')} style={{padding: "1.25rem"}}>
       {isContextEnabled() && (
         <ContextMenuOutput
           data={transmittedData}
           selectedCells={selectedCells}
           onContextMenu={contextEvent}
         />
       )}
-      <SequenceInput id="sequenceInput" className="w-full mt-2 pr-3" />
+      <SequenceInput id={`${id}:sequenceInput`} className='mb-2' />
       <div
         className="h-full"
-        style={{ padding: '0.5rem 1rem 3rem' }}
         onContextMenu={setContextEvent}
       >
         <OutputDataTableCore
-          id="outputTable"
+          id={`${id}:outputDataTableCore`}
           data={transmittedData}
           setData={setTransmittedData}
           clearButtonToolTip={t('CLEAR_TRANSMITTED')}
-          className="pb-3"
           dataCountLabel="Tx"
           selectedCells={selectedCells}
           setSelectedCells={setSelectedCells}

src/renderer/resources/styles/app.scss

@@ -31,6 +31,12 @@ body {
   margin: 0;
 }
 
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Optional: Kann verwendet werden, um den Container auf die volle Höhe zu strecken */
+}
+
 .pi {
   font-size: 1rem !important;
 }

webpack.plugins.ts

@@ -1,4 +1,5 @@
 import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import Dotenv from 'dotenv-webpack';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -7,4 +8,5 @@ export const plugins = [
   new ForkTsCheckerWebpackPlugin({
     logger: 'webpack-infrastructure',
   }),
+  new Dotenv()
 ];