Add temp save buttons for settings, reorder chats

src/components/FormFooter.tsx

@@ -1,36 +0,0 @@
-import type React from 'react';
-
-import { FiSave, FiXCircle } from 'react-icons/fi';
-
-import { IconButton } from '@meshtastic/components';
-
-export interface FormFooterProps {
-  dirty?: boolean;
-  clearAction?: () => void;
-  saveAction?: () => void;
-}
-
-export const FormFooter = ({
-  dirty,
-  clearAction,
-  saveAction,
-}: FormFooterProps): JSX.Element => {
-  return (
-    <div className="float-right flex gap-2">
-      <IconButton
-        icon={<FiXCircle className="h-5 w-5" />}
-        disabled={!dirty}
-        onClick={(): void => {
-          clearAction && clearAction();
-        }}
-      />
-      <IconButton
-        disabled={!dirty}
-        onClick={(): void => {
-          saveAction && saveAction();
-        }}
-        icon={<FiSave className="h-5 w-5" />}
-      />
-    </div>
-  );
-};

src/components/generic/Blur.tsx

@@ -1,31 +0,0 @@
-import type React from 'react';
-
-type DefaultDivProps = JSX.IntrinsicElements['div'];
-
-interface BlurProps extends DefaultDivProps {
-  disableOnMd?: boolean;
-}
-
-export const Blur = ({
-  disableOnMd,
-  className,
-  onClick,
-  ...props
-}: BlurProps): JSX.Element => {
-  return (
-    <div
-      className={`absolute inset-0 z-20 h-full w-full transition-opacity ${
-        disableOnMd ? 'md:hidden' : ''
-      } ${className}`}
-      {...props}
-    >
-      <div
-        onClick={onClick}
-        className={`absolute inset-0 h-full w-full backdrop-blur-sm backdrop-filter ${
-          disableOnMd ? 'md:hidden' : ''
-        }`}
-        tabIndex={0}
-      ></div>
-    </div>
-  );
-};

src/components/layout/Sidebar/Settings/Channels.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
-import { FiExternalLink, FiX } from 'react-icons/fi';
-import {
-  RiArrowDownLine,
-  RiArrowUpDownLine,
-  RiArrowUpLine,
-} from 'react-icons/ri';
+import { FiSave } from 'react-icons/fi';
 
-import { ListItem } from '@app/components/generic/ListItem';
 import { connection } from '@core/connection';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Checkbox, Input, Select, Tooltip } from '@meshtastic/components';
+import { Checkbox, IconButton, Input, Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const Channels = (): JSX.Element => {
@@ -106,54 +100,19 @@ export const Channels = (): JSX.Element => {
               {...register('settings.txPower', { valueAsNumber: true })}
             />
           </form>
+          <div className="flex w-full bg-white dark:bg-secondaryDark">
+            <div className="ml-auto p-2">
+              <IconButton
+                disabled={!formState.isDirty}
+                onClick={async (): Promise<void> => {
+                  await onSubmit();
+                }}
+                icon={<FiSave />}
+              />
+            </div>
+          </div>
         </>
       )}
-      {channels.map((channel) => (
-        <ListItem
-          key={channel.index}
-          onClick={(): void => {
-            setSelectedChannel(channel);
-          }}
-          status={
-            <div
-              className={`my-auto h-3 w-3 rounded-full ${
-                [
-                  Protobuf.Channel_Role.SECONDARY,
-                  Protobuf.Channel_Role.PRIMARY,
-                ].find((role) => role === channel.role)
-                  ? 'bg-green-500'
-                  : 'bg-gray-400'
-              }`}
-            />
-          }
-          selected={selectedChannel?.index === channel.index}
-          selectedIcon={<FiExternalLink />}
-          actions={
-            <Tooltip content={`MQTT Status`}>
-              <div className="rounded-md p-2">
-                {channel.settings?.uplinkEnabled &&
-                channel.settings?.downlinkEnabled ? (
-                  <RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
-                ) : channel.settings?.uplinkEnabled ? (
-                  <RiArrowUpLine className="p-0.5 group-active:scale-90" />
-                ) : channel.settings?.downlinkEnabled ? (
-                  <RiArrowDownLine className="p-0.5 group-active:scale-90" />
-                ) : (
-                  <FiX className="p-0.5" />
-                )}
-              </div>
-            </Tooltip>
-          }
-        >
-          <div>
-            {channel.settings?.name.length
-              ? channel.settings.name
-              : channel.role === Protobuf.Channel_Role.PRIMARY
-              ? 'Primary'
-              : `Channel: ${channel.index}`}
-          </div>
-        </ListItem>
-      ))}
     </>
   );
 };

src/components/layout/Sidebar/Settings/Position.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import { Controller, useForm } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
 import { MultiSelect } from 'react-multi-select-component';
 
 import { bitwiseEncode } from '@app/core/utils/bitwise';
 import { Label } from '@components/generic/form/Label';
 import { connection } from '@core/connection';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Checkbox, Input, Select } from '@meshtastic/components';
+import { Checkbox, IconButton, Input, Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const Position = (): JSX.Element => {
@@ -54,87 +55,100 @@ export const Position = (): JSX.Element => {
   };
 
   return (
-    <form className="space-y-2" onSubmit={onSubmit}>
-      <Input
-        label="Broadcast Interval"
-        type="number"
-        suffix="Seconds"
-        {...register('positionBroadcastSecs', { valueAsNumber: true })}
-      />
+    <>
+      <form className="space-y-2" onSubmit={onSubmit}>
+        <Input
+          label="Broadcast Interval"
+          type="number"
+          suffix="Seconds"
+          {...register('positionBroadcastSecs', { valueAsNumber: true })}
+        />
 
-      <Controller
-        name="positionFlags"
-        control={control}
-        render={({ field, fieldState }): JSX.Element => {
-          const { value, onChange, ...rest } = field;
-          const { error } = fieldState;
-          const label = 'Position Flags';
-          return (
-            <div className="w-full">
-              {label && <Label label={label} error={error?.message} />}
-              <MultiSelect
-                options={Object.entries(Protobuf.PositionFlags)
-                  .filter((value) => typeof value[1] !== 'number')
-                  .filter(
-                    (value) =>
-                      parseInt(value[0]) !==
-                      Protobuf.PositionFlags.POS_UNDEFINED,
-                  )
-                  .map((value) => {
+        <Controller
+          name="positionFlags"
+          control={control}
+          render={({ field, fieldState }): JSX.Element => {
+            const { value, onChange, ...rest } = field;
+            const { error } = fieldState;
+            const label = 'Position Flags';
+            return (
+              <div className="w-full">
+                {label && <Label label={label} error={error?.message} />}
+                <MultiSelect
+                  options={Object.entries(Protobuf.PositionFlags)
+                    .filter((value) => typeof value[1] !== 'number')
+                    .filter(
+                      (value) =>
+                        parseInt(value[0]) !==
+                        Protobuf.PositionFlags.POS_UNDEFINED,
+                    )
+                    .map((value) => {
+                      return {
+                        value: parseInt(value[0]),
+                        label: value[1].toString().replace('POS_', ''),
+                      };
+                    })}
+                  value={decode(value).map((flag) => {
                     return {
-                      value: parseInt(value[0]),
-                      label: value[1].toString().replace('POS_', ''),
+                      value: flag,
+                      label: Protobuf.PositionFlags[flag].replace('POS_', ''),
                     };
                   })}
-                value={decode(value).map((flag) => {
-                  return {
-                    value: flag,
-                    label: Protobuf.PositionFlags[flag].replace('POS_', ''),
-                  };
-                })}
-                onChange={(e: { value: number; label: string }[]): void =>
-                  onChange(bitwiseEncode(e.map((v) => v.value)))
-                }
-                labelledBy="Select"
-              />
-            </div>
-          );
-        }}
-      />
+                  onChange={(e: { value: number; label: string }[]): void =>
+                    onChange(bitwiseEncode(e.map((v) => v.value)))
+                  }
+                  labelledBy="Select"
+                />
+              </div>
+            );
+          }}
+        />
 
-      <Input
-        label="Position Type (DEBUG)"
-        type="number"
-        disabled
-        {...register('positionFlags', { valueAsNumber: true })}
-      />
-      <Checkbox label="Use Fixed Position" {...register('fixedPosition')} />
-      <Select
-        label="Location Sharing"
-        optionsEnum={Protobuf.LocationSharing}
-        {...register('locationShare', { valueAsNumber: true })}
-      />
-      <Select
-        label="GPS Mode"
-        optionsEnum={Protobuf.GpsOperation}
-        {...register('gpsOperation', { valueAsNumber: true })}
-      />
-      <Select
-        label="Display Format"
-        optionsEnum={Protobuf.GpsCoordinateFormat}
-        {...register('gpsFormat', { valueAsNumber: true })}
-      />
-      <Checkbox label="Accept 2D Fix" {...register('gpsAccept2D')} />
-      <Input
-        label="Max DOP"
-        type="number"
-        {...register('gpsMaxDop', { valueAsNumber: true })}
-      />
-      <Input
-        label="Last GPS Attempt"
-        disabled
-        {...register('gpsAttemptTime', { valueAsNumber: true })}
-      />
-    </form>
+        <Input
+          label="Position Type (DEBUG)"
+          type="number"
+          disabled
+          {...register('positionFlags', { valueAsNumber: true })}
+        />
+        <Checkbox label="Use Fixed Position" {...register('fixedPosition')} />
+        <Select
+          label="Location Sharing"
+          optionsEnum={Protobuf.LocationSharing}
+          {...register('locationShare', { valueAsNumber: true })}
+        />
+        <Select
+          label="GPS Mode"
+          optionsEnum={Protobuf.GpsOperation}
+          {...register('gpsOperation', { valueAsNumber: true })}
+        />
+        <Select
+          label="Display Format"
+          optionsEnum={Protobuf.GpsCoordinateFormat}
+          {...register('gpsFormat', { valueAsNumber: true })}
+        />
+        <Checkbox label="Accept 2D Fix" {...register('gpsAccept2D')} />
+        <Input
+          label="Max DOP"
+          type="number"
+          {...register('gpsMaxDop', { valueAsNumber: true })}
+        />
+        <Input
+          label="Last GPS Attempt"
+          disabled
+          {...register('gpsAttemptTime', { valueAsNumber: true })}
+        />
+      </form>
+      <div className="flex w-full bg-white dark:bg-secondaryDark">
+        <div className="ml-auto p-2">
+          <IconButton
+            disabled={!formState.isDirty}
+            onClick={async (): Promise<void> => {
+              await onSubmit();
+            }}
+            icon={<FiSave />}
+          />
+        </div>
+      </div>
+    </>
   );
 };

src/components/layout/Sidebar/Settings/Power.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
 
 import { connection } from '@core/connection';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Checkbox, Select } from '@meshtastic/components';
+import { Checkbox, IconButton, Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const Power = (): JSX.Element => {
@@ -33,21 +34,34 @@ export const Power = (): JSX.Element => {
     });
   });
   return (
-    <form className="space-y-2" onSubmit={onSubmit}>
-      <Select
-        label="Charge current"
-        optionsEnum={Protobuf.ChargeCurrent}
-        {...register('chargeCurrent', { valueAsNumber: true })}
-      />
-      <Checkbox label="Always powered" {...register('isAlwaysPowered')} />
-      <Checkbox
-        label="Powered by low power source (solar)"
-        disabled={preferences.isRouter}
-        validationMessage={
-          preferences.isRouter ? 'Enabled by default in router mode' : ''
-        }
-        {...register('isLowPower')}
-      />
-    </form>
+    <>
+      <form className="space-y-2" onSubmit={onSubmit}>
+        <Select
+          label="Charge current"
+          optionsEnum={Protobuf.ChargeCurrent}
+          {...register('chargeCurrent', { valueAsNumber: true })}
+        />
+        <Checkbox label="Always powered" {...register('isAlwaysPowered')} />
+        <Checkbox
+          label="Powered by low power source (solar)"
+          disabled={preferences.isRouter}
+          validationMessage={
+            preferences.isRouter ? 'Enabled by default in router mode' : ''
+          }
+          {...register('isLowPower')}
+        />
+      </form>
+      <div className="flex w-full bg-white dark:bg-secondaryDark">
+        <div className="ml-auto p-2">
+          <IconButton
+            disabled={!formState.isDirty}
+            onClick={async (): Promise<void> => {
+              await onSubmit();
+            }}
+            icon={<FiSave />}
+          />
+        </div>
+      </div>
+    </>
   );
 };

src/components/layout/Sidebar/Settings/Radio.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
 
 import { connection } from '@core/connection';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Checkbox, Select } from '@meshtastic/components';
+import { Checkbox, IconButton, Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const Radio = (): JSX.Element => {
@@ -30,15 +31,28 @@ export const Radio = (): JSX.Element => {
     });
   });
   return (
-    <form className="space-y-2" onSubmit={onSubmit}>
-      <Checkbox label="Is Router" {...register('isRouter')} />
-      <Select
-        label="Region"
-        optionsEnum={Protobuf.RegionCode}
-        {...register('region', { valueAsNumber: true })}
-      />
-      <Checkbox label="Debug Log" {...register('debugLogEnabled')} />
-      <Checkbox label="Serial Disabled" {...register('serialDisabled')} />
-    </form>
+    <>
+      <form className="space-y-2" onSubmit={onSubmit}>
+        <Checkbox label="Is Router" {...register('isRouter')} />
+        <Select
+          label="Region"
+          optionsEnum={Protobuf.RegionCode}
+          {...register('region', { valueAsNumber: true })}
+        />
+        <Checkbox label="Debug Log" {...register('debugLogEnabled')} />
+        <Checkbox label="Serial Disabled" {...register('serialDisabled')} />
+      </form>
+      <div className="flex w-full bg-white dark:bg-secondaryDark">
+        <div className="ml-auto p-2">
+          <IconButton
+            disabled={!formState.isDirty}
+            onClick={async (): Promise<void> => {
+              await onSubmit();
+            }}
+            icon={<FiSave />}
+          />
+        </div>
+      </div>
+    </>
   );
 };

src/components/layout/Sidebar/Settings/User.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
 import { base16 } from 'rfc4648';
 
 import { connection } from '@core/connection';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Checkbox, Input, Select } from '@meshtastic/components';
+import { Checkbox, IconButton, Input, Select } from '@meshtastic/components';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const User = (): JSX.Element => {
@@ -62,53 +63,66 @@ export const User = (): JSX.Element => {
   });
 
   return (
-    <form className="space-y-2" onSubmit={onSubmit}>
-      <Input label="Device ID" value={node?.user?.id} disabled />
-      <Input
-        label="Hardware"
-        value={
-          Protobuf.HardwareModel[
-            node?.user?.hwModel ?? Protobuf.HardwareModel.UNSET
-          ]
-        }
-        disabled
-      />
-      <Input
-        label="Mac Address"
-        defaultValue={
-          base16
-            .stringify(node?.user?.macaddr ?? [])
-            .match(/.{1,2}/g)
-            ?.join(':') ?? ''
-        }
-        disabled
-      />
-      <Input label="Device Name" {...register('longName')} />
-      <Input label="Short Name" maxLength={3} {...register('shortName')} />
-      <Checkbox label="Licenced Operator?" {...register('isLicensed')} />
-      <Select
-        label="Team"
-        optionsEnum={Protobuf.Team}
-        {...register('team', { valueAsNumber: true })}
-      />
-      <Input
-        label="Antenna Azimuth"
-        suffix="°"
-        type="number"
-        {...register('antAzimuth', { valueAsNumber: true })}
-      />
-      <Input
-        label="Antenna Gain"
-        suffix="dBi"
-        type="number"
-        {...register('antGainDbi', { valueAsNumber: true })}
-      />
-      <Input
-        label="Transmit Power"
-        suffix="dBm"
-        type="number"
-        {...register('txPowerDbm', { valueAsNumber: true })}
-      />
-    </form>
+    <>
+      <form className="space-y-2" onSubmit={onSubmit}>
+        <Input label="Device ID" value={node?.user?.id} disabled />
+        <Input
+          label="Hardware"
+          value={
+            Protobuf.HardwareModel[
+              node?.user?.hwModel ?? Protobuf.HardwareModel.UNSET
+            ]
+          }
+          disabled
+        />
+        <Input
+          label="Mac Address"
+          defaultValue={
+            base16
+              .stringify(node?.user?.macaddr ?? [])
+              .match(/.{1,2}/g)
+              ?.join(':') ?? ''
+          }
+          disabled
+        />
+        <Input label="Device Name" {...register('longName')} />
+        <Input label="Short Name" maxLength={3} {...register('shortName')} />
+        <Checkbox label="Licenced Operator?" {...register('isLicensed')} />
+        <Select
+          label="Team"
+          optionsEnum={Protobuf.Team}
+          {...register('team', { valueAsNumber: true })}
+        />
+        <Input
+          label="Antenna Azimuth"
+          suffix="°"
+          type="number"
+          {...register('antAzimuth', { valueAsNumber: true })}
+        />
+        <Input
+          label="Antenna Gain"
+          suffix="dBi"
+          type="number"
+          {...register('antGainDbi', { valueAsNumber: true })}
+        />
+        <Input
+          label="Transmit Power"
+          suffix="dBm"
+          type="number"
+          {...register('txPowerDbm', { valueAsNumber: true })}
+        />
+      </form>
+      <div className="flex w-full bg-white dark:bg-secondaryDark">
+        <div className="ml-auto p-2">
+          <IconButton
+            disabled={!formState.isDirty}
+            onClick={async (): Promise<void> => {
+              await onSubmit();
+            }}
+            icon={<FiSave />}
+          />
+        </div>
+      </div>
+    </>
   );
 };

src/components/layout/Sidebar/Settings/WiFi.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
 import { useForm, useWatch } from 'react-hook-form';
+import { FiSave } from 'react-icons/fi';
 
 import { connection } from '@core/connection';
 import { useAppSelector } from '@hooks/useAppSelector';
-import { Checkbox, Input } from '@meshtastic/components';
+import { Checkbox, IconButton, Input } from '@meshtastic/components';
 import type { Protobuf } from '@meshtastic/meshtasticjs';
 
 export const WiFi = (): JSX.Element => {
@@ -42,38 +43,51 @@ export const WiFi = (): JSX.Element => {
     });
   });
   return (
-    <form className="space-y-2" onSubmit={onSubmit}>
-      <Checkbox label="Enable WiFi AP" {...register('wifiApMode')} />
-      <Input
-        label="WiFi SSID"
-        disabled={watchWifiApMode}
-        {...register('wifiSsid')}
-      />
-      <Input
-        type="password"
-        autoComplete="off"
-        label="WiFi PSK"
-        disabled={watchWifiApMode}
-        {...register('wifiPassword')}
-      />
-      <Checkbox label="Disable MQTT" {...register('mqttDisabled')} />
-      <Input
-        label="MQTT Server Address"
-        disabled={watchMQTTDisabled}
-        {...register('mqttServer')}
-      />
-      <Input
-        label="MQTT Username"
-        disabled={watchMQTTDisabled}
-        {...register('mqttUsername')}
-      />
-      <Input
-        label="MQTT Password"
-        type="password"
-        autoComplete="off"
-        disabled={watchMQTTDisabled}
-        {...register('mqttPassword')}
-      />
-    </form>
+    <>
+      <form className="space-y-2" onSubmit={onSubmit}>
+        <Checkbox label="Enable WiFi AP" {...register('wifiApMode')} />
+        <Input
+          label="WiFi SSID"
+          disabled={watchWifiApMode}
+          {...register('wifiSsid')}
+        />
+        <Input
+          type="password"
+          autoComplete="off"
+          label="WiFi PSK"
+          disabled={watchWifiApMode}
+          {...register('wifiPassword')}
+        />
+        <Checkbox label="Disable MQTT" {...register('mqttDisabled')} />
+        <Input
+          label="MQTT Server Address"
+          disabled={watchMQTTDisabled}
+          {...register('mqttServer')}
+        />
+        <Input
+          label="MQTT Username"
+          disabled={watchMQTTDisabled}
+          {...register('mqttUsername')}
+        />
+        <Input
+          label="MQTT Password"
+          type="password"
+          autoComplete="off"
+          disabled={watchMQTTDisabled}
+          {...register('mqttPassword')}
+        />
+      </form>
+      <div className="flex w-full bg-white dark:bg-secondaryDark">
+        <div className="ml-auto p-2">
+          <IconButton
+            disabled={!formState.isDirty}
+            onClick={async (): Promise<void> => {
+              await onSubmit();
+            }}
+            icon={<FiSave />}
+          />
+        </div>
+      </div>
+    </>
   );
 };

src/pages/Messages/index.tsx

@@ -38,12 +38,12 @@ export const Messages = (): JSX.Element => {
       icon={<FiMessageCircle />}
       sidebarContents={
         <div className="flex flex-col gap-2">
-          {nodes
-            .filter((node) => node.number !== myNodeNum)
-            .map((node) => (
-              <DmChat
-                key={node.number}
-                node={node}
+          {channels
+            .filter((channel) => channel.settings?.name !== 'admin')
+            .map((channel) => (
+              <ChannelChat
+                key={channel.index}
+                channel={channel}
                 selectedIndex={selectedChatIndex}
                 setSelectedIndex={setSelectedChatIndex}
               />
@@ -51,12 +51,12 @@ export const Messages = (): JSX.Element => {
           {nodes.length !== 0 && channels.length !== 0 && (
             <div className="mx-2 rounded-md border-2 border-gray-300 dark:border-gray-600" />
           )}
-          {channels
-            .filter((channel) => channel.settings?.name !== 'admin')
-            .map((channel) => (
-              <ChannelChat
-                key={channel.index}
-                channel={channel}
+          {nodes
+            .filter((node) => node.number !== myNodeNum)
+            .map((node) => (
+              <DmChat
+                key={node.number}
+                node={node}
                 selectedIndex={selectedChatIndex}
                 setSelectedIndex={setSelectedChatIndex}
               />

src/pages/Nodes/NodeCard.tsx

@@ -116,7 +116,14 @@ export const NodeCard = ({
         direction="x"
       >
         <CollapsibleSection title="User" icon={<FiUser />}>
-          <div>Info</div>
+          <div className="flex  p-2">
+            <div className="m-auto flex flex-col gap-2">
+              <Hashicon value={node.number.toString()} size={180} />
+              <div className="text-center text-lg font-medium dark:text-white">
+                {node?.user?.longName || 'Unknown'}
+              </div>
+            </div>
+          </div>
         </CollapsibleSection>
         <CollapsibleSection title="Location" icon={<FiMapPin />}>
           <div>Info</div>