WIP

src/pages/Extensions/Index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { FiFile, FiInfo } from 'react-icons/fi';
+import { MdSubject } from 'react-icons/md';
 import { RiPinDistanceFill } from 'react-icons/ri';
 import { VscExtensions } from 'react-icons/vsc';
 
@@ -9,10 +10,11 @@ import { ExternalSection } from '@app/components/layout/Sidebar/sections/Externa
 
 import { FileBrowser } from './FileBrowser';
 import { Info } from './Info';
+import { Logs } from './Logs';
 
 export const Extensions = (): JSX.Element => {
   const [selectedExtension, setSelectedExtension] = React.useState<
-    'info' | 'fileBrowser' | 'rangeTest'
+    'info' | 'logs' | 'fileBrowser' | 'rangeTest'
   >('info');
 
   return (
@@ -28,6 +30,13 @@ export const Extensions = (): JSX.Element => {
             icon={<FiInfo />}
             title="Node Info"
           />
+          <ExternalSection
+            onClick={(): void => {
+              setSelectedExtension('logs');
+            }}
+            icon={<MdSubject />}
+            title="Logs"
+          />
           <ExternalSection
             onClick={(): void => {
               setSelectedExtension('fileBrowser');
@@ -48,6 +57,8 @@ export const Extensions = (): JSX.Element => {
       <div className="w-full">
         {selectedExtension === 'info' && <Info />}
 
+        {selectedExtension === 'logs' && <Logs />}
+
         {selectedExtension === 'fileBrowser' && <FileBrowser />}
       </div>
     </Layout>

src/pages/Extensions/Logs.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
+export const Logs = (): JSX.Element => {
+  const logs = useAppSelector((state) => state.meshtastic.logs);
+
+  const logColor = (level: Protobuf.LogRecord_Level): string => {
+    switch (level) {
+      case Protobuf.LogRecord_Level.UNSET:
+        return 'text-blue-500';
+      case Protobuf.LogRecord_Level.CRITICAL:
+        return 'text-blue-500';
+      case Protobuf.LogRecord_Level.ERROR:
+        return 'text-blue-500';
+      case Protobuf.LogRecord_Level.WARNING:
+        return 'text-blue-500';
+      case Protobuf.LogRecord_Level.INFO:
+        return 'text-blue-500';
+      case Protobuf.LogRecord_Level.DEBUG:
+        return 'text-blue-500';
+      case Protobuf.LogRecord_Level.TRACE:
+        return 'text-blue-500';
+    }
+  };
+
+  const stringToColour = (str: string) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let colour = '#';
+    for (let i = 0; i < 3; i++) {
+      const value = (hash >> (i * 8)) & 0xff;
+      colour += ('00' + value.toString(16)).substr(-2);
+    }
+    return colour;
+  };
+
+  return (
+    <div className="flex h-full w-full select-none flex-col gap-4 p-4">
+      <div className="flex w-full select-none flex-col gap-2 overflow-y-auto rounded-md p-4 shadow-md dark:bg-primaryDark">
+        {logs.map((log, index) => (
+          <div key={index} className="flex gap-2">
+            <div className="text-sm font-light dark:text-gray-400">
+              {log.date.toISOString()}
+            </div>
+            <div>[{log.emitter}]</div>
+            <div className={`text-sm font-medium ${logColor(log.level)}`}>
+              [{Protobuf.LogRecord_Level[log.level]}]
+            </div>
+            <div style={{ color: stringToColour(log.emitter) }}>
+              {stringToColour(log.emitter)}
+            </div>
+            <div>{log.message}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};