Add dynamic channel name with icon

src/pages/Messages.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { MapIcon, UsersIcon } from '@heroicons/react/outline';
+import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
+import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { Message } from '../components/chat/Message';
 import { MessageBar } from '../components/chat/MessageBar';
@@ -10,11 +11,23 @@ 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 = () => {
+    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 border-b dark:border-gray-600 dark:text-gray-300 px-2">
-        <div className="my-auto text-sm"># default</div>
+        <div className="flex my-auto text-sm">
+          <HashtagIcon className="h-4 w-4 my-auto" />
+          {channelName()}
+        </div>
         <div className="flex">
           <Button>
             <MapIcon className="w-6 h-6" />

src/pages/Settings.tsx

@@ -42,7 +42,7 @@ export const Settings = (): JSX.Element => {
             name={t('strings.wifi_psk')}
             value={radioConfig.wifiPassword}
             onChange={(event) => {}}
-            type="text"
+            type="password"
             valid={true}
           />
         </div>