Updated channel editor & fixes

src/pages/Messages.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { FiHash, FiMap, FiUsers } from 'react-icons/fi';
+import { FiHash } from 'react-icons/fi';
 
+import { EnumSelect } from '@app/components/generic/form/EnumSelect.jsx';
 import { Message } from '@components/chat/Message';
 import { MessageBar } from '@components/chat/MessageBar';
-import { Button } from '@components/generic/Button';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { useAppSelector } from '../hooks/redux';
@@ -14,25 +14,30 @@ export const Messages = (): JSX.Element => {
   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">
-          <FiHash className="w-4 h-4 my-auto" />
-          {channelName()}
-        </div>
-        <div className="flex">
-          <Button icon={<FiMap className="w-5 h-5" />} circle />
-
-          <Button icon={<FiUsers className="w-5 h-5" />} circle />
+        <div className="flex py-2 my-auto text-sm">
+          <FiHash className="w-4 h-4 my-auto mr-1" />
+          <EnumSelect
+            options={channels
+              .filter(
+                (channel) =>
+                  channel.role !== Protobuf.Channel_Role.DISABLED &&
+                  channel.settings?.name !== 'admin',
+              )
+              .map((channel) => {
+                return {
+                  name: channel.settings?.name.length
+                    ? channel.settings.name
+                    : channel.role === Protobuf.Channel_Role.PRIMARY
+                    ? 'Primary'
+                    : `CH: ${channel.index}`,
+                  value: channel.index,
+                };
+              })}
+            small
+          />
         </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">