UI Overhaul (#3)

* WIP * WIP * WIP * WIP * Draw improvements, disabled user zooming * Update status indicator * Add dynamic channel name with icon * Add more settings * WIP * WIP
2021-08-15 23:41:14 +10:00
parent f898b1dd49
commit e14c628ecf
70 changed files with 1916 additions and 1644 deletions
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Message } from '@components/chat/Message';
+import { MessageBar } from '@components/chat/MessageBar';
+import { Button } from '@components/generic/Button';
+import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
+import { useAppSelector } from '../hooks/redux';
+
+export const Messages = (): JSX.Element => {
+  const messages = useAppSelector((state) => state.meshtastic.messages);
+  const nodes = useAppSelector((state) => state.meshtastic.nodes);
+  const channels = useAppSelector((state) => state.meshtastic.channels);
+
+  const channelName = (): string => {
+    const name =
+      channels.find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)
+        ?.settings?.name ?? 'Unknown';
+
+    return name.length ? name : 'Default';
+  };
+
+  return (
+    <div className="flex flex-col w-full">
+      <div className="flex justify-between w-full px-2 border-b dark:border-gray-600 dark:text-gray-300">
+        <div className="flex my-auto text-sm">
+          <HashtagIcon className="w-4 h-4 my-auto" />
+          {channelName()}
+        </div>
+        <div className="flex">
+          <Button icon={<MapIcon className="w-5 h-5" />} circle />
+
+          <Button icon={<UsersIcon className="w-5 h-5" />} circle />
+        </div>
+      </div>
+      <div className="flex flex-col flex-grow p-6 space-y-2 overflow-y-auto bg-white border-b md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
+        {messages.map((message, index) => (
+          <Message
+            key={index}
+            isSender={message.isSender}
+            message={message.message.data}
+            ack={message.ack}
+            rxTime={new Date()}
+            senderName={
+              nodes.find((node) => node.num === message.message.packet.from)
+                ?.user?.longName ?? 'UNK'
+            }
+          />
+        ))}
+      </div>
+      <MessageBar />
+    </div>
+  );
+};