2.0 Overhaul start

src/pages/Messages.tsx

@@ -0,0 +1,55 @@
+import type React from "react";
+
+import { IconButton } from "@app/components/IconButton.js";
+import {
+  TabbedContent,
+  TabType,
+} from "@components/layout/page/TabbedContent.js";
+import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
+import { useDevice } from "@core/providers/useDevice.js";
+import {
+  EllipsisHorizontalCircleIcon,
+  PencilIcon,
+  XCircleIcon,
+} from "@heroicons/react/24/outline";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+export const MessagesPage = (): JSX.Element => {
+  const { channels, setActivePage } = useDevice();
+
+  const tabs: TabType[] = channels.map((channel) => {
+    return {
+      name: channel.config.settings?.name.length
+        ? channel.config.settings?.name
+        : channel.config.index === 0
+        ? "Primary"
+        : `Ch ${channel.config.index}`,
+      icon: channel.messages.length ? (
+        <EllipsisHorizontalCircleIcon className="h-4" />
+      ) : (
+        <XCircleIcon className="h-4" />
+      ),
+      element: () => <ChannelChat channel={channel} />,
+      disabled: channel.config.role === Protobuf.Channel_Role.DISABLED,
+    };
+  });
+
+  return (
+    <div className="flex flex-col w-full">
+      <TabbedContent
+        tabs={tabs}
+        actions={[
+          () => (
+            <IconButton
+              variant="secondary"
+              icon={<PencilIcon className="h-4" />}
+              onClick={() => {
+                setActivePage("channels");
+              }}
+            />
+          ),
+        ]}
+      />
+    </div>
+  );
+};