Internal cleanup

src/pages/Extensions/FileBrowser.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { AnimatePresence, m } from 'framer-motion';
 import useSWR from 'swr';
 
-import fetcher from '@app/core/utils/fetcher';
-import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Card } from '@app/components/generic/Card';
+import fetcher from '@core/utils/fetcher';
+import { useAppSelector } from '@hooks/useAppSelector';
 
 export interface File {
   nameModified: string;
@@ -38,8 +39,8 @@ export const FileBrowser = (): JSX.Element => {
   );
 
   return (
-    <div className="flex h-full w-full select-none flex-col gap-4 p-4">
-      <div className="w-full flex-grow rounded-md bg-white dark:bg-primaryDark">
+    <div className="flex h-full p-4">
+      <Card className="flex-grow flex-col">
         <div className="flex h-10 w-full rounded-t-md border-b border-gray-300 px-4 text-lg font-semibold shadow-md dark:border-gray-600 dark:bg-zinc-700 dark:text-white">
           <div className="my-auto  w-1/3">FileName</div>
           <div className="my-auto  w-1/3">Actions</div>
@@ -80,7 +81,7 @@ export const FileBrowser = (): JSX.Element => {
             </div>
           ))}
         </div>
-      </div>
+      </Card>
     </div>
   );
 };

src/pages/Extensions/Index.tsx

@@ -5,12 +5,11 @@ import { MdSubject } from 'react-icons/md';
 import { RiPinDistanceFill } from 'react-icons/ri';
 import { VscExtensions } from 'react-icons/vsc';
 
-import { Layout } from '@app/components/layout';
-import { ExternalSection } from '@app/components/layout/Sidebar/sections/ExternalSection';
-
-import { FileBrowser } from './FileBrowser';
-import { Info } from './Info';
-import { Logs } from './Logs';
+import { ExternalSection } from '@components/generic/Sidebar/ExternalSection';
+import { Layout } from '@components/layout';
+import { FileBrowser } from '@pages/Extensions/FileBrowser';
+import { Info } from '@pages/Extensions/Info';
+import { Logs } from '@pages/Extensions/Logs';
 
 export const Extensions = (): JSX.Element => {
   const [selectedExtension, setSelectedExtension] = React.useState<

src/pages/Extensions/Info.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import JSONPretty from 'react-json-pretty';
 
-import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Card } from '@app/components/generic/Card';
 import { Hashicon } from '@emeraldpay/hashicon-react';
+import { useAppSelector } from '@hooks/useAppSelector';
 
 export const Info = (): JSX.Element => {
   const hardwareInfo = useAppSelector(
@@ -17,18 +18,18 @@ export const Info = (): JSX.Element => {
 
   return (
     <div className="flex h-full flex-col gap-4 p-4 md:flex-row">
-      <div className="flex w-full flex-col gap-4 rounded-md bg-white p-8 shadow-md dark:bg-primaryDark md:w-1/4">
-        <div className="m-auto">
+      <Card className="md:w-1/4">
+        <div className="m-auto flex flex-col gap-2">
           <Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} />
+          <div className="text-center text-lg font-medium dark:text-white">
+            {node?.user?.longName || 'Unknown'}
+          </div>
         </div>
-        <div className="text-center text-lg font-medium dark:text-white">
-          {node?.user?.longName || 'Unknown'}
-        </div>
-      </div>
+      </Card>
 
-      <div className="flex-grow rounded-md bg-white p-8 shadow-md  dark:bg-primaryDark">
+      <Card className="flex-grow">
         <JSONPretty className="overflow-y-auto" data={hardwareInfo} />
-      </div>
+      </Card>
     </div>
   );
 };

src/pages/Extensions/Logs.tsx

@@ -3,7 +3,8 @@ import type React from 'react';
 import { AnimatePresence, m } from 'framer-motion';
 import { FiArrowRight, FiPaperclip } from 'react-icons/fi';
 
-import { useAppSelector } from '@app/hooks/useAppSelector';
+import { Card } from '@app/components/generic/Card';
+import { useAppSelector } from '@hooks/useAppSelector';
 import { Protobuf, Types } from '@meshtastic/meshtasticjs';
 
 export const Logs = (): JSX.Element => {
@@ -13,28 +14,27 @@ export const Logs = (): JSX.Element => {
   type lookupType = { [key: number]: string };
 
   const emitterLookup: lookupType = {
-    [Types.Emitter.sendPacket]: 'text-blue-500',
-    [Types.Emitter.sendText]: 'text-blue-500',
-    [Types.Emitter.sendPacket]: 'text-blue-500',
-    [Types.Emitter.sendRaw]: 'text-blue-500',
-    [Types.Emitter.setPreferences]: 'text-blue-500',
-    [Types.Emitter.confirmSetPreferences]: 'text-blue-500',
-    [Types.Emitter.setOwner]: 'text-blue-500',
+    [Types.Emitter.sendText]: 'text-rose-500',
+    [Types.Emitter.sendPacket]: 'text-pink-500',
+    [Types.Emitter.sendRaw]: 'text-fuchsia-500',
+    [Types.Emitter.setPreferences]: 'text-purple-500',
+    [Types.Emitter.confirmSetPreferences]: 'text-violet-500',
+    [Types.Emitter.setOwner]: 'text-indigo-500',
     [Types.Emitter.setChannel]: 'text-blue-500',
-    [Types.Emitter.confirmSetChannel]: 'text-blue-500',
-    [Types.Emitter.deleteChannel]: 'text-blue-500',
-    [Types.Emitter.getChannel]: 'text-blue-500',
-    [Types.Emitter.getAllChannels]: 'text-blue-500',
-    [Types.Emitter.getPreferences]: 'text-blue-500',
-    [Types.Emitter.getOwner]: 'text-blue-500',
-    [Types.Emitter.configure]: 'text-blue-500',
-    [Types.Emitter.handleFromRadio]: 'text-blue-500',
-    [Types.Emitter.handleMeshPacket]: 'text-blue-500',
-    [Types.Emitter.connect]: 'text-blue-500',
-    [Types.Emitter.ping]: 'text-blue-500',
-    [Types.Emitter.readFromRadio]: 'text-blue-500',
-    [Types.Emitter.writeToRadio]: 'text-blue-500',
-    [Types.Emitter.setDebugMode]: 'text-blue-500',
+    [Types.Emitter.confirmSetChannel]: 'text-sky-500',
+    [Types.Emitter.deleteChannel]: 'text-cyan-500',
+    [Types.Emitter.getChannel]: 'text-teal-500',
+    [Types.Emitter.getAllChannels]: 'text-emerald-500',
+    [Types.Emitter.getPreferences]: 'text-green-500',
+    [Types.Emitter.getOwner]: 'text-lime-500',
+    [Types.Emitter.configure]: 'text-yellow-500',
+    [Types.Emitter.handleFromRadio]: 'text-amber-500',
+    [Types.Emitter.handleMeshPacket]: 'text-orange-500',
+    [Types.Emitter.connect]: 'text-red-500',
+    [Types.Emitter.ping]: 'text-stone-500',
+    [Types.Emitter.readFromRadio]: 'text-zinc-500',
+    [Types.Emitter.writeToRadio]: 'text-gray-500',
+    [Types.Emitter.setDebugMode]: 'text-slate-500',
   };
 
   const levelLookup: lookupType = {
@@ -48,84 +48,87 @@ export const Logs = (): JSX.Element => {
   };
 
   return (
-    <div className="flex h-full p-4">
-      <table className="table-cell h-full w-full select-none rounded-md bg-white dark:bg-primaryDark">
-        <tbody
-          className="
-          block h-full flex-col overflow-y-auto py-4 px-2 font-mono text-xs dark:text-gray-400"
-        >
-          <AnimatePresence>
-            {logs.length === 0 && (
-              <div className="flex h-full w-full">
-                <m.img
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  className="m-auto h-64 w-64 text-green-500"
-                  src={`/placeholders/${
-                    darkMode ? 'View Code Dark.svg' : 'View Code.svg'
-                  }`}
-                />
-              </div>
-            )}
-          </AnimatePresence>
-          {logs.map((log, index) => (
-            // <ContextMenu
-            //   key={index}
-            //   items={
-            //     <>
-            //       <ContextItem title="Test" icon={<FiGitBranch />} />
-            //     </>
-            //   }
-            // >
-            <tr
-              key={index}
-              className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
-            >
-              <m.td
-                className="w-6 cursor-pointer"
-                whileHover={{ scale: 1.01 }}
-                whileTap={{ scale: 0.99 }}
-              >
-                <div className="m-auto pl-2 text-white group-hover:text-black dark:text-primaryDark dark:group-hover:text-gray-400">
-                  <FiArrowRight />
+    <div className="flex h-full flex-col gap-4 p-4">
+      <Card className="flex-grow">
+        <table className="table-cell flex-grow">
+          <tbody
+            className="
+          block h-full flex-col overflow-y-auto font-mono text-xs dark:text-gray-400"
+          >
+            <AnimatePresence>
+              {logs.length === 0 && (
+                <div className="flex h-full w-full">
+                  <m.img
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="m-auto h-64 w-64 text-green-500"
+                    src={`/placeholders/${
+                      darkMode ? 'View Code Dark.svg' : 'View Code.svg'
+                    }`}
+                  />
                 </div>
-              </m.td>
-              <Wrapper>
-                {log.date
-                  .toLocaleString(undefined, {
-                    year: 'numeric',
-                    month: '2-digit',
-                    day: '2-digit',
+              )}
+            </AnimatePresence>
+            {logs.map((log, index) => (
+              // <ContextMenu
+              //   key={index}
+              //   items={
+              //     <>
+              //       <ContextItem title="Test" icon={<FiGitBranch />} />
+              //     </>
+              //   }
+              // >
+              <tr
+                key={index}
+                className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
+              >
+                <m.td
+                  className="w-6 cursor-pointer"
+                  whileHover={{ scale: 1.01 }}
+                  whileTap={{ scale: 0.99 }}
+                >
+                  <div className="m-auto pl-2 text-white group-hover:text-black dark:text-primaryDark dark:group-hover:text-gray-400">
+                    <FiArrowRight />
+                  </div>
+                </m.td>
+                <Wrapper>
+                  {log.date
+                    .toLocaleString(undefined, {
+                      year: 'numeric',
+                      month: '2-digit',
+                      day: '2-digit',
 
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    second: '2-digit',
-                  })
-                  .replaceAll('/', '-')
-                  .replace(',', '')}
-              </Wrapper>
-              <Wrapper>
-                <div className={emitterLookup[log.emitter]}>
-                  [{Types.EmitterScope[log.scope]}.{Types.Emitter[log.emitter]}]
-                </div>
-              </Wrapper>
-              <Wrapper className={levelLookup[log.level]}>
-                [{Protobuf.LogRecord_Level[log.level]}]{/* </div> */}
-              </Wrapper>
-              <td
-                className={`m-auto ${
-                  log.packet ? '' : 'dark:text-secondaryDark'
-                }`}
-              >
-                <FiPaperclip />
-              </td>
-              <td className="truncate pl-1">{log.message}</td>
-            </tr>
-            // </ContextMenu>
-          ))}
-        </tbody>
-      </table>
+                      hour: '2-digit',
+                      minute: '2-digit',
+                      second: '2-digit',
+                    })
+                    .replaceAll('/', '-')
+                    .replace(',', '')}
+                </Wrapper>
+                <Wrapper>
+                  <div className={emitterLookup[log.emitter]}>
+                    [{Types.EmitterScope[log.scope]}.
+                    {Types.Emitter[log.emitter]}]
+                  </div>
+                </Wrapper>
+                <Wrapper className={levelLookup[log.level]}>
+                  [{Protobuf.LogRecord_Level[log.level]}]{/* </div> */}
+                </Wrapper>
+                <td
+                  className={`m-auto ${
+                    log.packet ? '' : 'dark:text-secondaryDark'
+                  }`}
+                >
+                  <FiPaperclip />
+                </td>
+                <td className="w-full truncate pl-1">{log.message}</td>
+              </tr>
+              // </ContextMenu>
+            ))}
+          </tbody>
+        </table>
+      </Card>
     </div>
   );
 };