Fixes, new debug output & more.

src/pages/settings/Channels.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
 import { useTranslation } from 'react-i18next';
-import { FiMenu, FiSave } from 'react-icons/fi';
+import { FiCode, FiMenu, FiSave } from 'react-icons/fi';
+import JSONPretty from 'react-json-pretty';
 
 import { Channel } from '@app/components/Channel.jsx';
 import { Card } from '@app/components/generic/Card';
+import { Cover } from '@app/components/generic/Cover.jsx';
 import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { connection } from '@app/core/connection.js';
 import { useAppSelector } from '@app/hooks/redux.js';
@@ -22,6 +24,7 @@ export const Channels = ({
 }: ChannelsProps): JSX.Element => {
   const { t } = useTranslation();
   const channels = useAppSelector((state) => state.meshtastic.channels);
+  const [debug, setDebug] = React.useState(false);
 
   return (
     <PrimaryTemplate
@@ -49,20 +52,22 @@ export const Channels = ({
       <div className="space-y-4">
         <Card
           title="Manage Channels"
-          description={
-            <div className="flex space-x-2 truncate">
-              <div className="w-3 h-3 my-auto bg-green-500 rounded-full" />
-              &nbsp;- Primary
-              <div className="w-3 h-3 my-auto rounded-full bg-cyan-500" />
-              &nbsp;- Secondary
-              <div className="w-3 h-3 my-auto bg-gray-400 rounded-full" />
-              &nbsp;- Disabled
-              <div className="w-3 h-3 my-auto rounded-full bg-amber-400" />
-              &nbsp;- Admin
-            </div>
+          description="Edit channel throughput and other settings"
+          buttons={
+            <Button
+              border
+              active={debug}
+              onClick={(): void => {
+                setDebug(!debug);
+              }}
+              icon={<FiCode />}
+            >
+              Debug
+            </Button>
           }
         >
-          <div className="w-full max-w-3xl p-4 space-y-2 md:p-10 md:max-w-xl">
+          <Cover enabled={debug} content={<JSONPretty data={channels} />} />
+          <div className="w-full p-4 space-y-2 md:p-10">
             {channels.map((channel) => (
               <Channel key={channel.index} channel={channel} />
             ))}

src/pages/settings/Device.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FiMenu, FiSave } from 'react-icons/fi';
+import { FiCode, FiMenu, FiSave } from 'react-icons/fi';
+import JSONPretty from 'react-json-pretty';
 
 import { Card } from '@app/components/generic/Card';
+import { Cover } from '@app/components/generic/Cover.jsx';
 import { Checkbox } from '@app/components/generic/form/Checkbox';
+import { Select } from '@app/components/generic/form/Select.jsx';
 import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { connection } from '@app/core/connection';
-import { useAppSelector } from '@app/hooks/redux';
+import { addUser } from '@app/core/slices/meshtasticSlice.js';
+import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/form/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
@@ -21,21 +25,27 @@ export interface DeviceProps {
 
 export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
   const { t } = useTranslation();
-  const user = useAppSelector((state) => state.meshtastic.user);
+  const [debug, setDebug] = React.useState(false);
+  const dispatch = useAppDispatch();
+  const user = useAppSelector((state) => state.meshtastic.myUser);
   const { register, handleSubmit, formState } = useForm<{
     longName: string;
     shortName: string;
     isLicensed: boolean;
+    team: Protobuf.Team;
   }>({
     defaultValues: {
       longName: user.longName,
       shortName: user.shortName,
       isLicensed: user.isLicensed,
+      team: user.team,
     },
   });
 
   const onSubmit = handleSubmit((data) => {
     void connection.setOwner({ ...user, ...data });
+    // TODO: can be remove once getUser is implemented
+    dispatch(addUser({ ...user, ...data }));
   });
 
   return (
@@ -66,7 +76,20 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
       <Card
         title="Basic settings"
         description="Device name and user parameters"
+        buttons={
+          <Button
+            border
+            active={debug}
+            onClick={(): void => {
+              setDebug(!debug);
+            }}
+            icon={<FiCode />}
+          >
+            Debug
+          </Button>
+        }
       >
+        <Cover enabled={debug} content={<JSONPretty data={user} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
             <Input label={'Device ID'} value={user.id} disabled />
@@ -82,6 +105,11 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
               {...register('shortName')}
             />
             <Checkbox label="Licenced Operator?" {...register('isLicensed')} />
+            <Select
+              label="Team"
+              optionsEnum={Protobuf.Team}
+              {...register('team')}
+            />
           </form>
         </div>
       </Card>

src/pages/settings/Radio.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FiMenu, FiSave, FiXCircle } from 'react-icons/fi';
+import { FiCode, FiMenu, FiSave, FiXCircle } from 'react-icons/fi';
+import JSONPretty from 'react-json-pretty';
 
 import { Card } from '@app/components/generic/Card';
+import { Cover } from '@app/components/generic/Cover.jsx';
 import { Checkbox } from '@app/components/generic/form/Checkbox';
 import { Select } from '@app/components/generic/form/Select.jsx';
 import { IconButton } from '@app/components/generic/IconButton.jsx';
@@ -23,6 +25,7 @@ export interface RadioProps {
 export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
   const { t } = useTranslation();
   const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+  const [debug, setDebug] = React.useState(false);
 
   const { register, handleSubmit, formState, reset } =
     useForm<Protobuf.RadioConfig_UserPreferences>({
@@ -69,7 +72,20 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
       <Card
         title="Basic settings"
         description="Device name and user parameters"
+        buttons={
+          <Button
+            border
+            active={debug}
+            onClick={(): void => {
+              setDebug(!debug);
+            }}
+            icon={<FiCode />}
+          >
+            Debug
+          </Button>
+        }
       >
+        <Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
         <div className="w-full max-w-3xl p-10 md:max-w-xl">
           <form className="space-y-2" onSubmit={onSubmit}>
             <div>WiFi</div>