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>
   );
 };

src/pages/Map/MapContainer.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { FaDirections, FaGlobeAfrica, FaMountain } from 'react-icons/fa';
 import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
 
+import { IconButton } from '@components/generic/button/IconButton';
 import {
   setExaggeration,
   setHillShade,
@@ -11,10 +12,8 @@ import {
 import { useAppDispatch } from '@hooks/useAppDispatch';
 import { useAppSelector } from '@hooks/useAppSelector';
 import { useMapbox } from '@hooks/useMapbox';
-import { IconButton } from '@meshtastic/components';
-
-import type { MapStyle } from './styles';
-import { MapStyles } from './styles';
+import type { MapStyle } from '@pages/Map/styles';
+import { MapStyles } from '@pages/Map/styles';
 
 export const MapContainer = (): JSX.Element => {
   const dispatch = useAppDispatch();

src/pages/Map/index.tsx

@@ -4,14 +4,13 @@ import mapboxgl from 'mapbox-gl';
 import { FiMapPin } from 'react-icons/fi';
 import { RiRoadMapLine } from 'react-icons/ri';
 
-import { Layout } from '@app/components/layout';
-import { MapboxProvider } from '@app/components/MapBox/MapboxProvider';
-import type { Node } from '@app/core/slices/meshtasticSlice';
-import { useAppSelector } from '@app/hooks/useAppSelector';
-
-import { NodeCard } from '../Nodes/NodeCard';
-import { MapContainer } from './MapContainer';
-import { Marker } from './Marker';
+import { Layout } from '@components/layout';
+import { MapboxProvider } from '@components/MapBox/MapboxProvider';
+import type { Node } from '@core/slices/meshtasticSlice';
+import { useAppSelector } from '@hooks/useAppSelector';
+import { MapContainer } from '@pages/Map/MapContainer';
+import { Marker } from '@pages/Map/Marker';
+import { NodeCard } from '@pages/Nodes/NodeCard';
 
 export const Map = (): JSX.Element => {
   const [selectedNode, setSelectedNode] = React.useState<Node>();

src/pages/Messages/ChannelChat.tsx

@@ -5,10 +5,11 @@ import { FiSettings } from 'react-icons/fi';
 import { MdPublic } from 'react-icons/md';
 import TimeAgo from 'timeago-react';
 
+import { IconButton } from '@components/generic/button/IconButton';
+import { Tooltip } from '@components/generic/Tooltip';
 import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
 import { Hashicon } from '@emeraldpay/hashicon-react';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { IconButton, Tooltip } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface ChannelChatProps {

src/pages/Messages/DmChat.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { FiSettings } from 'react-icons/fi';
 
+import { IconButton } from '@components/generic/button/IconButton';
 import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
 import type { Node } from '@core/slices/meshtasticSlice';
 import { Hashicon } from '@emeraldpay/hashicon-react';
-import { IconButton } from '@meshtastic/components';
 
 export interface DmChatProps {
   node: Node;

src/pages/Messages/Message.tsx

@@ -2,9 +2,9 @@ import type React from 'react';
 
 import { FiClock } from 'react-icons/fi';
 
-import type { Node } from '@app/core/slices/meshtasticSlice';
+import { Tooltip } from '@components/generic/Tooltip';
+import type { Node } from '@core/slices/meshtasticSlice';
 import { Hashicon } from '@emeraldpay/hashicon-react';
-import { Tooltip } from '@meshtastic/components';
 
 export interface MessageProps {
   lastMsgSameUser: boolean;

src/pages/Messages/MessageBar.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
+import { Input } from '@components/generic/form/Input';
 import { connection } from '@core/connection';
 import { ackMessage } from '@core/slices/meshtasticSlice';
 import { useAppDispatch } from '@hooks/useAppDispatch';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Input } from '@meshtastic/components';
 
 export interface MessageBarProps {
   chatIndex: number;

src/pages/Messages/index.tsx

@@ -2,15 +2,14 @@ import React from 'react';
 
 import { FiHash, FiMessageCircle } from 'react-icons/fi';
 
-import { Layout } from '@app/components/layout';
+import { IconButton } from '@components/generic/button/IconButton';
+import { Layout } from '@components/layout';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { IconButton } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
-
-import { ChannelChat } from './ChannelChat';
-import { DmChat } from './DmChat';
-import { Message } from './Message';
-import { MessageBar } from './MessageBar';
+import { ChannelChat } from '@pages/Messages/ChannelChat';
+import { DmChat } from '@pages/Messages/DmChat';
+import { Message } from '@pages/Messages/Message';
+import { MessageBar } from '@pages/Messages/MessageBar';
 
 export const Messages = (): JSX.Element => {
   const [selectedChatIndex, setSelectedChatIndex] = React.useState<number>(0);
@@ -105,11 +104,9 @@ export const Messages = (): JSX.Element => {
                     : chats[selectedChatIndex].messages[index - 1].message
                         .packet.from === message.message.packet.from
                 }
-                sender={nodes.find((node) => {
-                  console.log(message);
-
-                  return node.number === message.message.packet.from;
-                })}
+                sender={nodes.find(
+                  (node) => node.number === message.message.packet.from,
+                )}
               />
             ))}
           </div>

src/pages/Nodes/NodeCard.tsx

@@ -12,14 +12,14 @@ import { IoTelescope } from 'react-icons/io5';
 import { MdGpsFixed, MdGpsNotFixed, MdGpsOff } from 'react-icons/md';
 import JSONPretty from 'react-json-pretty';
 
-import { CollapsibleSection } from '@app/components/layout/Sidebar/sections/CollapsibleSection';
-import { SidebarOverlay } from '@app/components/layout/Sidebar/sections/SidebarOverlay';
-import { SidebarItem } from '@app/components/layout/Sidebar/SidebarItem';
-import { CopyButton } from '@app/components/menu/buttons/CopyButton';
+import { IconButton } from '@components/generic/button/IconButton';
+import { CollapsibleSection } from '@components/generic/Sidebar/CollapsibleSection';
+import { SidebarOverlay } from '@components/generic/Sidebar/SidebarOverlay';
+import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
+import { CopyButton } from '@components/menu/buttons/CopyButton';
 import type { Node } from '@core/slices/meshtasticSlice';
 import { Hashicon } from '@emeraldpay/hashicon-react';
 import { useMapbox } from '@hooks/useMapbox';
-import { IconButton } from '@meshtastic/components';
 
 type PositionConfidence = 'high' | 'low' | 'none';
 
@@ -126,7 +126,25 @@ export const NodeCard = ({
           </div>
         </CollapsibleSection>
         <CollapsibleSection title="Location" icon={<FiMapPin />}>
-          <div>Info</div>
+          <>
+            {node.currentPosition && (
+              <div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
+                <div className="my-auto px-1">
+                  {(node.currentPosition.latitudeI / 1e7).toPrecision(6)},&nbsp;
+                  {(node.currentPosition?.longitudeI / 1e7).toPrecision(6)}
+                </div>
+                <CopyButton
+                  data={
+                    node.currentPosition
+                      ? `${node.currentPosition.latitudeI / 1e7},${
+                          node.currentPosition.longitudeI / 1e7
+                        }`
+                      : ''
+                  }
+                />
+              </div>
+            )}
+          </>
         </CollapsibleSection>
         <CollapsibleSection title="Line of Sight" icon={<IoTelescope />}>
           <div>Info</div>

src/pages/Nodes/index.tsx

@@ -5,11 +5,11 @@ import ReactFlow, { Background, Controls, MiniMap } from 'react-flow-renderer';
 import { FiSettings } from 'react-icons/fi';
 import { RiMindMap } from 'react-icons/ri';
 
-import { Layout } from '@app/components/layout';
-import { SidebarItem } from '@app/components/layout/Sidebar/SidebarItem';
-import { useAppSelector } from '@app/hooks/useAppSelector';
+import { IconButton } from '@components/generic/button/IconButton';
+import { Layout } from '@components/layout';
+import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
 import { Hashicon } from '@emeraldpay/hashicon-react';
-import { IconButton } from '@meshtastic/components';
+import { useAppSelector } from '@hooks/useAppSelector';
 
 export const Nodes = (): JSX.Element => {
   const [graphNodes, setGraphNodes] = React.useState<Node[]>([]);

src/pages/Nodes/panels/DebugPanel.tsx

@@ -1,21 +0,0 @@
-import type React from 'react';
-
-import JSONPretty from 'react-json-pretty';
-
-import { CopyButton } from '@components/menu/buttons/CopyButton';
-import type { Node } from '@core/slices/meshtasticSlice';
-
-export interface DebugPanelProps {
-  node: Node;
-}
-
-export const DebugPanel = ({ node }: DebugPanelProps): JSX.Element => {
-  return (
-    <div className="relative">
-      <div className="fixed right-0 m-2">
-        <CopyButton data={JSON.stringify(node)} />
-      </div>
-      <JSONPretty className="max-w-sm" data={node} />
-    </div>
-  );
-};

src/pages/Nodes/panels/PositionPanel.tsx

@@ -1,32 +0,0 @@
-import type React from 'react';
-
-import { CopyButton } from '@components/menu/buttons/CopyButton';
-import type { Node } from '@core/slices/meshtasticSlice';
-
-export interface PositionPanelProps {
-  node: Node;
-}
-
-export const PositionPanel = ({ node }: PositionPanelProps): JSX.Element => {
-  return (
-    <div className="p-2">
-      {node.currentPosition && (
-        <div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
-          <div className="my-auto px-1">
-            {(node.currentPosition.latitudeI / 1e7).toPrecision(6)},&nbsp;
-            {(node.currentPosition?.longitudeI / 1e7).toPrecision(6)}
-          </div>
-          <CopyButton
-            data={
-              node.currentPosition
-                ? `${node.currentPosition.latitudeI / 1e7},${
-                    node.currentPosition.longitudeI / 1e7
-                  }`
-                : ''
-            }
-          />
-        </div>
-      )}
-    </div>
-  );
-};

src/pages/NotFound.tsx

@@ -1,13 +1,12 @@
 import type React from 'react';
 
-import { Card } from '@meshtastic/components';
+import { Card } from '@app/components/generic/Card';
 
 export const NotFound = (): JSX.Element => {
   return (
-    <Card
-      title="The requested file or directory could not be found"
-      description="Better luck next time"
-    >
+    <Card>
+      <h3>The requested file or directory could not be found</h3>
+      <h4>Better luck next time</h4>
       <br />
       <br />
     </Card>