Node list and DMs now show icons

src/components/PageLayout.tsx

@@ -8,6 +8,7 @@ export interface PageLayoutProps {
   children: React.ReactNode;
   actions?: {
     icon: LucideIcon;
+    iconClasses?: string;
     onClick: () => void;
   }[];
 }
@@ -39,7 +40,7 @@ export const PageLayout = ({
                     className="transition-all hover:text-accent"
                     onClick={action.onClick}
                   >
-                    <action.icon />
+                    <action.icon className={action.iconClasses}/>
                   </button>
                 ))}
               </div>

src/pages/Messages.tsx

@@ -8,7 +8,7 @@ import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf, Types } from "@meshtastic/js";
 import { getChannelName } from "@pages/Channels.js";
-import { HashIcon, WaypointsIcon } from "lucide-react";
+import { HashIcon, LockIcon, LockOpenIcon, WaypointsIcon } from "lucide-react";
 import { useState } from "react";
 
 export const MessagesPage = (): JSX.Element => {
@@ -79,6 +79,17 @@ export const MessagesPage = (): JSX.Element => {
           actions={
             chatType === "direct"
               ? [
+                  {
+                    icon: nodes.get(activeChat)?.user?.publicKey && nodes.get(activeChat)?.user?.publicKey.length > 0 ? LockIcon : LockOpenIcon,
+                    iconClasses: nodes.get(activeChat)?.user?.publicKey && nodes.get(activeChat)?.user?.publicKey.length > 0 ? "text-green-600" : "text-yellow-300",
+                    async onClick() {
+                      const targetNode = nodes.get(activeChat)?.num;
+                      if (targetNode === undefined) return;
+                      toast({
+                        title: nodes.get(activeChat)?.user?.publicKey && nodes.get(activeChat)?.user?.publicKey.length > 0 ? "Chat is using PKI encryption." : "Chat is using PSK encryption.",
+                      });
+                    },
+                  },
                   {
                     icon: WaypointsIcon,
                     async onClick() {

src/pages/Nodes.tsx

@@ -8,7 +8,7 @@ import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Protobuf } from "@meshtastic/js";
-import { TrashIcon } from "lucide-react";
+import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react";
 import { Fragment } from "react";
 import { base16 } from "rfc4648";
 
@@ -38,6 +38,7 @@ export const NodesPage = (): JSX.Element => {
               { title: "MAC Address", type: "normal", sortable: true },
               { title: "Last Heard", type: "normal", sortable: true },
               { title: "SNR", type: "normal", sortable: true },
+              { title: "Encryption", type: "normal", sortable: false },
               { title: "Connection", type: "normal", sortable: true },
               { title: "Remove", type: "normal", sortable: false },
             ]}
@@ -73,6 +74,9 @@ export const NodesPage = (): JSX.Element => {
                 {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
                 {(node.snr + 10) * 5}raw
               </Mono>,
+              <Mono key="pki">
+                { node.user?.publicKey && node.user?.publicKey.length > 0 ? <LockIcon className="text-green-600"/> : <LockOpenIcon className="text-yellow-300"/> }
+              </Mono>,
               <Mono key="hops">
                 {node.lastHeard !== 0
                   ? node.viaMqtt === false && node.hopsAway === 0