Feat/mac (#109)

* chore: upgrade dependencies
* feat/mac: draft pipeline
* feat/mac: use public folder for transient files
* feat/mac: set app fullscreen
* feat/mac: cmd + , toggles menu
* feat/mac: update readme
* refact: easier login process
* refact prevent style issues with safari
* refact reduce css download
* style: cleanup paginator design
* style: studio clock is responsive
* style: fix spacing style issues with safari

client/src/features/info/InfoLogger.jsx

@@ -1,7 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
-import style from './InfoLogger.module.scss';
-import CollapseBar from "../../common/components/collapseBar/CollapseBar";
+import { HStack } from '@chakra-ui/react';
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { LoggingContext } from '../../app/context/LoggingContext';
+import style from './InfoLogger.module.scss';
 
 export default function InfoLogger() {
   const { logData, clearLog } = useContext(LoggingContext);
@@ -16,6 +17,10 @@ export default function InfoLogger() {
   const [showUser, setShowUser] = useState(true);
 
   useEffect(() => {
+    if (!logData) {
+      return;
+    }
+
     const matchers = [];
     if (showUser) {
       matchers.push('USER');
@@ -36,12 +41,10 @@ export default function InfoLogger() {
       matchers.push('PLAYBACK');
     }
 
-    const d = logData.filter((d) => (
-      matchers.some((m) => d.origin === m)
-    ))
+    const d = logData.filter((d) => matchers.some((m) => d.origin === m));
 
     setData(d);
-  },[logData, showUser, showClient, showServer, showPlayback, showRx, showTx])
+  }, [logData, showUser, showClient, showServer, showPlayback, showRx, showTx]);
 
   const disableOthers = (toEnable) => {
     toEnable === 'USER' ? setShowUser(true) : setShowUser(false);
@@ -50,62 +53,75 @@ export default function InfoLogger() {
     toEnable === 'RX' ? setShowRx(true) : setShowRx(false);
     toEnable === 'TX' ? setShowTx(true) : setShowTx(false);
     toEnable === 'PLAYBACK' ? setShowPlayback(true) : setShowPlayback(false);
-  }
+  };
 
   return (
     <div className={collapsed ? style.container : style.container__expanded}>
       <CollapseBar title='Log' isCollapsed={collapsed} onClick={() => setCollapsed((c) => !c)} />
       {!collapsed && (
         <>
-          <div className={style.toggleBar}>
+          <HStack className={style.toggleBar}>
             <div
               onClick={() => setShowUser((s) => !s)}
               onAuxClick={() => disableOthers('USER')}
-              className={(showUser) ? style.active : null}>
+              className={showUser ? style.active : null}
+            >
               USER
             </div>
             <div
               onClick={() => setShowClient((s) => !s)}
               onAuxClick={() => disableOthers('CLIENT')}
-              className={(showClient) ? style.active : null}>
+              className={showClient ? style.active : null}
+            >
               CLIENT
             </div>
             <div
               onClick={() => setShowServer((s) => !s)}
               onAuxClick={() => disableOthers('SERVER')}
-              className={(showServer) ? style.active : null}>
+              className={showServer ? style.active : null}
+            >
               SERVER
             </div>
             <div
               onClick={() => setShowPlayback((s) => !s)}
               onAuxClick={() => disableOthers('PLAYBACK')}
-              className={(showPlayback) ? style.active : null}>
+              className={showPlayback ? style.active : null}
+            >
               Playback
             </div>
             <div
               onClick={() => setShowRx((s) => !s)}
               onAuxClick={() => disableOthers('RX')}
-              className={(showRx) ? style.active : null}>
+              className={showRx ? style.active : null}
+            >
               RX
             </div>
             <div
               onClick={() => setShowTx((s) => !s)}
               onAuxClick={() => disableOthers('TX')}
-              className={(showTx) ? style.active : null}>
+              className={showTx ? style.active : null}
+            >
               TX
             </div>
-            <div
-              onClick={clearLog}
-              className={style.clear}>
+            <div onClick={clearLog} className={style.clear}>
               Clear
             </div>
-          </div>
+          </HStack>
           <ul className={style.log}>
             {data.map((d) => (
-              <li key={d.id} className={d.level === 'INFO' ? style.info : d.level === 'WARN' ? style.warn : d.level === 'ERROR' ? style.error : ''}>
-                <div
-                  className={style.time}
-                >{d.time}</div>
+              <li
+                key={d.id}
+                className={
+                  d.level === 'INFO'
+                    ? style.info
+                    : d.level === 'WARN'
+                    ? style.warn
+                    : d.level === 'ERROR'
+                    ? style.error
+                    : ''
+                }
+              >
+                <div className={style.time}>{d.time}</div>
                 <div className={style.origin}>{d.origin}</div>
                 <div className={style.msg}>{d.text}</div>
               </li>