Remove duplicate node logic, UI Update, flatten build output (#586)

* refactor nodes to getNodes fn. ui updates

* fixed several styling issues

* fix: message specific styling/overflow

* added footer, fixed tests. styling

* fix: added theme support back to app component

* fix: hide emojis/reactions

* fix: added more padding to content element

* fix: fixed padding in content element

* updated color scheme

* fix: more dark mode styling improvements

* fix: padding and alignment fixes

* fix: prevent left sidebar collapse, added battery component

* fix: change scrollbars to "tiny" style, improved message scrolling, fixed bug with message input

* message store fixes, ui fixes

* fix: disabled message persistance until after release

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,54 +1,28 @@
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
-import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/core";
 import { SendIcon } from "lucide-react";
-import { startTransition, useCallback, useMemo, useState } from "react";
-import { MessageState, MessageType, useMessageStore } from "@core/stores/messageStore.ts";
-import { debounce } from "@core/utils/debounce.ts";
+import { startTransition, useState } from "react";
+import { useMessageStore } from "@core/stores/messageStore/index.ts";
 
 export interface MessageInputProps {
+  onSend: (message: string) => void;
   to: Types.Destination;
-  channel: Types.ChannelNumber;
   maxBytes: number;
 }
 
 export const MessageInput = ({
+  onSend,
   to,
-  channel,
   maxBytes,
 }: MessageInputProps) => {
-  const { connection } = useDevice();
-  const { setMessageState, activeChat, setDraft, getDraft, clearDraft } = useMessageStore();
-
-  const [localDraft, setLocalDraft] = useState(getDraft(to));
-  const [messageBytes, setMessageBytes] = useState(0);
-
-  const debouncedSetMessageDraft = useMemo(
-    () => debounce((value: string) => setDraft(to, value), 300),
-    [setDraft, to]
-  );
+  const { setDraft, getDraft, clearDraft } = useMessageStore();
 
   const calculateBytes = (text: string) => new Blob([text]).size;
 
-  const chatType = to === MessageType.Broadcast ? MessageType.Broadcast : MessageType.Direct;
-
-  const sendText = useCallback(async (message: string) => {
-    try {
-      const messageId = await connection?.sendText(message, to, true, channel);
-      if (messageId !== undefined) {
-        setMessageState({ type: chatType, key: activeChat, messageId, newState: MessageState.Ack });
-      }
-      // deno-lint-ignore no-explicit-any
-    } catch (e: any) {
-      setMessageState({
-        type: chatType,
-        key: activeChat,
-        messageId: e?.id,
-        newState: MessageState.Failed,
-      });
-    }
-  }, [channel, connection, setMessageState, to, activeChat, chatType]);
+  const initialDraft = getDraft(to);
+  const [localDraft, setLocalDraft] = useState(initialDraft);
+  const [messageBytes, setMessageBytes] = useState(() => calculateBytes(initialDraft));
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
@@ -56,27 +30,28 @@ export const MessageInput = ({
 
     if (byteLength <= maxBytes) {
       setLocalDraft(newValue);
-      debouncedSetMessageDraft(newValue);
       setMessageBytes(byteLength);
+      setDraft(to, newValue);
     }
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!localDraft.trim()) return;
+    // Reset bytes *before* sending (consider if onSend failure needs different handling)
+    setMessageBytes(0);
 
     startTransition(() => {
-      sendText(localDraft.trim());
+      onSend(localDraft.trim());
       setLocalDraft("");
       clearDraft(to);
-      setMessageBytes(0);
     });
   };
 
   return (
     <div className="flex gap-2">
-      <form className="w-full" action="#" name="messageInput" onSubmit={handleSubmit}>
-        <div className="flex grow gap-2">
+      <form className="w-full" name="messageInput" onSubmit={handleSubmit}>
+        <div className="flex grow gap-1">
           <label className="w-full">
             <Input
               autoFocus
@@ -88,13 +63,13 @@ export const MessageInput = ({
             />
           </label>
 
-          <label data-testid="byte-counter" className="flex items-center w-24 p-2 place-content-end">
+          <label data-testid="byte-counter" className="flex items-center w-20 p-1 text-sm place-content-end">
             {messageBytes}/{maxBytes}
           </label>
 
           <Button
             type="submit"
-            className="dark:bg-white dark:text-slate-900 dark:hover:bg-slate-400 dark:hover:text-white"
+            variant="default"
           >
             <SendIcon size={16} />
           </Button>
@@ -102,4 +77,4 @@ export const MessageInput = ({
       </form>
     </div>
   );
-};
+};