Overhaul (#83)

* WIP Layout Refactor

* New Connection Dialog

* WIP form overhaul

* Fix remaining config pages

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,6 +1,6 @@
 import { Message } from "@components/PageComponents/Messages/Message.js";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import type { Channel } from "@core/stores/deviceStore.js";
 
 export interface ChannelChatProps {

src/components/PageComponents/Messages/Message.tsx

@@ -1,12 +1,12 @@
 import { WaypointMessage } from "@components/PageComponents/Messages/WaypointMessage.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import type { AllMessageTypes } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
-  CheckCircleIcon,
-  EllipsisHorizontalCircleIcon,
-  ExclamationCircleIcon
-} from "@heroicons/react/24/outline";
+  CircleEllipsisIcon,
+  AlertCircleIcon,
+  CheckCircle2Icon
+} from "lucide-react";
 import type { Protobuf } from "@meshtastic/meshtasticjs";
 
 export interface MessageProps {
@@ -30,11 +30,11 @@ export const Message = ({
   return lastMsgSameUser ? (
     <div className="ml-5 flex">
       {message.state === "ack" ? (
-        <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
+        <CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
       ) : message.state === "waiting" ? (
-        <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
+        <CircleEllipsisIcon size={16} className="my-auto text-textSecondary" />
       ) : (
-        <ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
+        <AlertCircleIcon size={16} className="my-auto text-textSecondary" />
       )}
       {"waypointID" in message ? (
         <WaypointMessage waypointID={message.waypointID} />
@@ -69,11 +69,14 @@ export const Message = ({
       </div>
       <div className="ml-1 flex">
         {message.state === "ack" ? (
-          <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
+          <CheckCircle2Icon size={16} className="my-auto text-textSecondary" />
         ) : message.state === "waiting" ? (
-          <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
+          <CircleEllipsisIcon
+            size={16}
+            className="my-auto text-textSecondary"
+          />
         ) : (
-          <ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
+          <AlertCircleIcon size={16} className="my-auto text-textSecondary" />
         )}
         {"waypointID" in message ? (
           <WaypointMessage waypointID={message.waypointID} />

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,9 +1,9 @@
-import { IconButton } from "@components/form/IconButton.js";
-import { Input } from "@components/form/Input.js";
-import { useDevice } from "@core/providers/useDevice.js";
+import { Input } from "@components/UI/Input.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import type { Channel } from "@core/stores/deviceStore.js";
-import { MapPinIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { SendIcon } from "lucide-react";
 import type { Types } from "@meshtastic/meshtasticjs";
+import { Button } from "@components/UI/Button.js";
 
 export interface MessageInputProps {
   channel: Channel;
@@ -42,18 +42,16 @@ export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
             <Input
               autoFocus
               minLength={2}
-              label=""
               placeholder="Enter Message"
               value={messageDraft}
               onChange={(e) => setMessageDraft(e.target.value)}
             />
           </span>
-          <IconButton
-            icon={<PaperAirplaneIcon className="text-slate-500 h-4" />}
-          />
+          <Button>
+            <SendIcon size={16} />
+          </Button>
         </div>
       </form>
-      <IconButton icon={<MapPinIcon className="text-slate-500 h-4" />} />
     </div>
   );
 };

src/components/PageComponents/Messages/NewLocationMessage.tsx

@@ -1,8 +1,6 @@
 import { Input } from "@components/form/Input.js";
-import { Select } from "@components/form/Select.js";
-import { Button } from "@components/form/Button.js";
-import { useDevice } from "@core/providers/useDevice.js";
-import { renderOptions } from "@core/utils/selectEnumOptions.js";
+import { Button } from "@components/UI/Button.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 enum LocationType {
@@ -23,9 +21,9 @@ export const NewLocationMessage = (): JSX.Element => {
       >
         <Input label="Name" />
         <Input label="Description" />
-        <Select label="Type" value={LocationType.MGRS}>
+        {/* <Select label="Type" value={LocationType.MGRS}>
           {renderOptions(LocationType)}
-        </Select>
+        </Select> */}
         <Input label="Coordinates" />
         <Button
           onClick={() => {

src/components/PageComponents/Messages/WaypointMessage.tsx

@@ -1,6 +1,6 @@
-import { useDevice } from "@core/providers/useDevice.js";
+import { useDevice } from "@core/stores/deviceStore.js";
 import { toMGRS } from "@core/utils/toMGRS.js";
-import { MapPinIcon } from "@heroicons/react/24/outline";
+import { MapPinIcon } from "lucide-react";
 
 export interface WaypointMessageProps {
   waypointID: number;
@@ -13,13 +13,13 @@ export const WaypointMessage = ({
   const waypoint = waypoints.find((wp) => wp.id === waypointID);
 
   return (
-    <div className="border-l-slate-200 ml-4 border-l-2 pl-2">
+    <div className="ml-4 border-l-2 border-l-slate-200 pl-2">
       <div className="flex gap-2 rounded-md p-2">
-        <MapPinIcon className="text-slate-600 m-auto w-6" />
+        <MapPinIcon size={16} className="m-auto text-slate-600" />
         <div>
           <div className="flex gap-2">
             <div className="font-bold">{waypoint?.name}</div>
-            <span className="text-slate-500 font-mono text-sm">
+            <span className="font-mono text-sm text-slate-500">
               {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
             </span>
           </div>