Updated channel editor & fixes

2021-10-27 07:17:50 +11:00
parent 8a9c0a268a
commit 672d23d19c
27 changed files with 530 additions and 249 deletions
@@ -0,0 +1,127 @@
+import React from 'react';
+
+import { useForm } from 'react-hook-form';
+import { FiEdit3, FiSave } from 'react-icons/fi';
+
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
+import { connection } from '../core/connection.js';
+import { EnumSelect } from './generic/form/EnumSelect.jsx';
+import { Input } from './generic/form/Input.jsx';
+import { IconButton } from './generic/IconButton.jsx';
+
+export interface ChannelProps {
+  channel: Protobuf.Channel;
+}
+interface DotProps {
+  role: Protobuf.Channel_Role;
+  admin: boolean;
+}
+const Dot = ({ role, admin }: DotProps): JSX.Element => (
+  <div
+    className={`h-3 my-auto w-3 rounded-full ${
+      role === Protobuf.Channel_Role.PRIMARY
+        ? 'bg-green-500'
+        : admin
+        ? 'bg-amber-400'
+        : role === Protobuf.Channel_Role.SECONDARY
+        ? 'bg-cyan-500'
+        : 'bg-gray-400'
+    }`}
+  />
+);
+
+export const Channel = ({ channel }: ChannelProps): JSX.Element => {
+  const [edit, setEdit] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  const { register, handleSubmit, formState } = useForm<{
+    role: Protobuf.Channel_Role;
+    settings: {
+      name: string;
+    };
+  }>({
+    defaultValues: {
+      role: channel.role,
+      settings: {
+        name: channel.settings?.name,
+      },
+    },
+  });
+
+  const onSubmit = handleSubmit(async (data) => {
+    setLoading(true);
+    const adminChannel = Protobuf.Channel.create({
+      role: data.role,
+      index: channel.index,
+      settings: data.settings,
+    });
+
+    await connection.setChannel(adminChannel, (): Promise<void> => {
+      setLoading(false);
+      return Promise.resolve();
+    });
+  });
+
+  return (
+    <div className="relative flex justify-between p-3 bg-gray-100 rounded-md dark:bg-gray-700">
+      {edit ? (
+        <>
+          {loading && (
+            <div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
+              <div className="m-auto text-lg font-medium text-gray-400">
+                Loading
+              </div>
+            </div>
+          )}
+          <div className="my-auto space-x-2">
+            <form>
+              <div className="flex space-x-2">
+                <EnumSelect
+                  label="Channel Type"
+                  optionsEnum={Protobuf.Channel_Role}
+                  {...register('role', { valueAsNumber: true })}
+                />
+                <Dot
+                  role={channel.role}
+                  admin={channel.settings?.name === 'admin'}
+                />
+              </div>
+              <Input label="Name" {...register('settings.name')} />
+            </form>
+          </div>
+          <IconButton
+            onClick={async (): Promise<void> => {
+              await onSubmit();
+
+              setEdit(false);
+            }}
+            icon={<FiSave />}
+          />
+        </>
+      ) : (
+        <>
+          <div className="flex my-auto space-x-2">
+            <Dot
+              role={channel.role}
+              admin={channel.settings?.name === 'admin'}
+            />
+            <div>
+              {channel.settings?.name.length
+                ? channel.settings.name
+                : channel.role === Protobuf.Channel_Role.PRIMARY
+                ? 'Primary'
+                : `Channel: ${channel.index}`}
+            </div>
+          </div>
+          <IconButton
+            onClick={(): void => {
+              setEdit(true);
+            }}
+            icon={<FiEdit3 />}
+          />
+        </>
+      )}
+    </div>
+  );
+};
@@ -1,14 +1,15 @@
 import React from 'react';

 import { useTranslation } from 'react-i18next';
-import { FiPaperclip, FiSend, FiSmile } from 'react-icons/fi';
+import { FiSend } from 'react-icons/fi';

 import { ackMessage } from '@app/core/slices/meshtasticSlice.js';
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
-import { Input } from '@components/generic/Input';
+import { Input } from '@components/generic/form/Input';
 import { connection } from '@core/connection';

+import { IconButton } from '../generic/IconButton.jsx';
+
 export const MessageBar = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const ready = useAppSelector((state) => state.meshtastic.ready);
@@ -27,10 +28,6 @@ export const MessageBar = (): JSX.Element => {
  return (
    <div className="flex w-full p-4 mx-auto space-x-2 text-gray-500 bg-gray-50 dark:bg-transparent dark:text-gray-400">
      <div className="flex w-full max-w-4xl mx-auto">
-        <div className="flex">
-          <Button icon={<FiSmile className="w-5 h-5" />} circle />
-          <Button icon={<FiPaperclip className="w-5 h-5" />} circle />
-        </div>
        <form
          className="flex w-full space-x-2"
          onSubmit={(e): void => {
@@ -48,7 +45,7 @@ export const MessageBar = (): JSX.Element => {
              setCurrentMessage(e.target.value);
            }}
          />
-          <Button icon={<FiSend className="w-5 h-5" />} type="submit" circle />
+          <IconButton icon={<FiSend className="w-5 h-5" />} type="submit" />
        </form>
      </div>
    </div>
@@ -14,7 +14,7 @@ export const Blur = ({
 }: BlurProps): JSX.Element => {
  return (
    <div
-      className={`absolute inset-0 z-10 w-full h-full transition-opacity ${
+      className={`absolute inset-0 z-20 w-full h-full transition-opacity ${
        disableOnMd ? 'md:hidden' : 'test'
      } ${className}`}
      {...props}
@@ -65,3 +65,49 @@ export const Button = ({
    </button>
  );
 };
+
+// import React from 'react';
+
+// type DefaultButtonProps = JSX.IntrinsicElements['button'];
+
+// export interface ButtonProps extends DefaultButtonProps {
+//   icon?: JSX.Element;
+//   circle?: boolean;
+//   active?: boolean;
+//   border?: boolean;
+//   confirmAction?: () => void;
+//   rightIcon?: React.ReactNode;
+//   leftIcon?: React.ReactNode;
+//   nested?: boolean;
+// }
+
+// export const Button = ({
+//   rightIcon,
+//   leftIcon,
+//   children,
+//   nested,
+//   ...props
+// }: ButtonProps): JSX.Element => {
+//   return (
+//     <button
+//       className={`select-none flex hover:bg-gray-300 dark:hover:bg-gray-500 rounded-md cursor-pointer active:scale-95 dark:text-white ${
+//         nested
+//           ? 'hover:bg-gray-300 dark:hover:bg-gray-500 dark:bg-gray-600 bg-gray-200'
+//           : 'dark:bg-gray-700 bg-gray-200'
+//       }`}
+//       {...props}
+//     >
+//       {leftIcon && (
+//         <div className="flex py-1 bg-gray-00 rounded-l-md">
+//           <div className="mx-2 my-auto">{leftIcon}</div>
+//         </div>
+//       )}
+//       <div className="flex px-4 py-2 space-x-2 leading-4">{children}</div>
+//       {rightIcon && (
+//         <div className="flex py-2 bg-gray-200 rounded-r-md">
+//           <div className="mx-2 my-auto">{rightIcon}</div>
+//         </div>
+//       )}
+//     </button>
+//   );
+// };
@@ -4,7 +4,7 @@ type DefaultDivProps = JSX.IntrinsicElements['div'];

 interface CardProps extends DefaultDivProps {
  title: string;
-  description: string;
+  description: string | JSX.Element;
  buttons?: JSX.Element;
  lgPlaceholder?: JSX.Element;
 }
@@ -20,7 +20,7 @@ export const Card = ({
 }: CardProps): JSX.Element => {
  return (
    <div
-      className={`flex flex-col flex-auto text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl  ${className}`}
+      className={`flex flex-col flex-auto dark:text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl  ${className}`}
      {...props}
    >
      <div className="flex items-center justify-between mx-10 mt-10">
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { FiCheck } from 'react-icons/fi';
+
+type DefaulButtonProps = JSX.IntrinsicElements['button'];
+
+export interface IconButtonProps extends DefaulButtonProps {
+  icon: React.ReactNode;
+  confirmAction?: () => void;
+}
+
+export const IconButton = ({
+  icon,
+  confirmAction,
+  ...props
+}: IconButtonProps): JSX.Element => {
+  const [hasConfirmed, setHasConfirmed] = React.useState(false);
+
+  const handleConfirm = (): void => {
+    if (confirmAction) {
+      if (hasConfirmed) {
+        void confirmAction();
+      }
+      setHasConfirmed(true);
+      setTimeout(() => {
+        setHasConfirmed(false);
+      }, 3000);
+    }
+  };
+  return (
+    <div
+      className="my-auto text-gray-500 dark:text-gray-400"
+      onClick={handleConfirm}
+    >
+      <button
+        type="button"
+        className={`p-2 rounded-md active:scale-95 ${
+          hasConfirmed
+            ? 'bg-red-500'
+            : 'hover:bg-gray-200 dark:hover:bg-gray-600'
+        }`}
+        {...props}
+      >
+        {hasConfirmed ? <FiCheck /> : icon}
+        <span className="sr-only">Refresh</span>
+      </button>
+    </div>
+  );
+};
@@ -1,61 +0,0 @@
-import React from 'react';
-
-type DefaultInputProps = JSX.IntrinsicElements['input'];
-
-interface InputProps extends DefaultInputProps {
-  icon?: JSX.Element;
-  label?: string;
-  valid?: boolean;
-  validationMessage?: string;
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  function Input(
-    {
-      icon,
-      label,
-      valid,
-      validationMessage,
-      id,
-      disabled,
-      ...props
-    }: InputProps,
-    ref,
-  ) {
-    return (
-      <div className="w-full">
-        <label
-          htmlFor={id}
-          className="block text-sm font-medium text-black dark:text-white"
-        >
-          {label}
-        </label>
-        <div className="relative">
-          {icon && (
-            <div className="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
-              {React.cloneElement(icon, {
-                className: 'w-5 h-5 text-gray-500 dark:text-gray-600',
-              })}
-            </div>
-          )}
-          <input
-            id={id}
-            ref={ref}
-            disabled={disabled}
-            {...props}
-            className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary  dark:border-gray-600 dark:text-white ${
-              icon ? 'pl-9' : 'pl-2'
-            } ${
-              disabled
-                ? 'bg-gray-200 dark:bg-primaryDark cursor-not-allowed'
-                : 'bg-white dark:bg-secondaryDark'
-            }`}
-          />
-        </div>
-        {!valid && (
-          <div className="text-sm text-gray-600">{validationMessage}</div>
-        )}
-      </div>
-    );
-  },
-);
@@ -2,11 +2,13 @@ import React from 'react';

 import { Switch } from '@headlessui/react';

+import { Label } from './form/Label.jsx';
+
 type DefaultButtonProps = JSX.IntrinsicElements['button'];

 interface ToggleProps extends DefaultButtonProps {
  action?: (enabled: boolean) => void;
-  label?: string;
+  label: string;
  valid?: boolean;
  validationMessage?: string;
  checked?: boolean;
@@ -37,12 +39,13 @@ export const Toggle = ({

  return (
    <div className="flex flex-col w-full">
-      <label
+      <Label label={label} />
+      {/* <label
        htmlFor={id}
        className="block text-sm font-medium text-black dark:text-white"
      >
        {label}
-      </label>
+      </label> */}
      <div className="ml-auto">
        <Switch
          id={id}
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { InputWrapper } from './InputWrapper.jsx';
+import { Label } from './Label.jsx';
+
+type DefaultSelectProps = JSX.IntrinsicElements['select'];
+
+interface SelectProps extends DefaultSelectProps {
+  options?: {
+    name: string;
+    value: number | string;
+  }[];
+  optionsEnum?: { [s: string]: string | number };
+  label?: string;
+  error?: string;
+  small?: boolean;
+}
+
+export const EnumSelect = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ options, optionsEnum, label, error, small, ...props }, ref) => {
+    const optionsEnumValues = optionsEnum
+      ? Object.entries(optionsEnum).filter(
+          (value) => typeof value[1] === 'number',
+        )
+      : [];
+    return (
+      <div>
+        {label && <Label label={label} error={error} />}
+        <InputWrapper>
+          <select
+            ref={ref}
+            className={`w-full  bg-transparent focus:outline-none focus:border-primary ${
+              small ? 'py-1 mx-1' : 'h-10 mx-2'
+            }`}
+            {...props}
+          >
+            {optionsEnumValues.length &&
+              optionsEnumValues.map(([name, value]) => (
+                <option className="dark:bg-gray-700" key={value} value={value}>
+                  {name}
+                </option>
+              ))}
+            {options &&
+              options.map((option) => (
+                <option
+                  className="dark:bg-gray-700"
+                  key={option.value}
+                  value={option.value}
+                >
+                  {option.name}
+                </option>
+              ))}
+          </select>
+        </InputWrapper>
+      </div>
+    );
+  },
+);
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { InputWrapper } from './InputWrapper.jsx';
+import { Label } from './Label.jsx';
+
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
+interface InputProps extends DefaultInputProps {
+  label?: string;
+  error?: string;
+  action?: JSX.Element;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  function Input({ label, error, action, ...props }: InputProps, ref) {
+    return (
+      <div className="w-full">
+        {label && <Label label={label} error={error} />}
+        <InputWrapper error={error} disabled={props.disabled}>
+          <input
+            ref={ref}
+            className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none focus:border-primary"
+            {...props}
+          />
+          {action && <div className="flex mr-1">{action}</div>}
+        </InputWrapper>
+      </div>
+    );
+  },
+);
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface LabelProps {
+  error?: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+export const InputWrapper = ({
+  error,
+  disabled,
+  children,
+}: LabelProps): JSX.Element => (
+  <div
+    className={`flex w-full border-y border rounded-md ${
+      disabled
+        ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
+        : ''
+    } ${
+      error
+        ? 'border-red-500'
+        : disabled
+        ? 'border-gray-200'
+        : ' focus-within:border-primary hover:border-primary'
+    }`}
+  >
+    {children}
+  </div>
+);
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface LabelProps {
+  label: string;
+  error?: string;
+}
+
+export const Label = ({ label, error }: LabelProps): JSX.Element => (
+  <label className="text-xs font-semibold text-gray-500">
+    {label}
+    {error && <span className="ml-2 text-red-500">{error}</span>}
+  </label>
+);
@@ -2,8 +2,8 @@ import React from 'react';

 import { FiWifi, FiWifiOff } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useAppSelector } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
 import { Types } from '@meshtastic/meshtasticjs';

 export const DeviceStatusDropdown = (): JSX.Element => {
@@ -11,8 +11,8 @@ export const DeviceStatusDropdown = (): JSX.Element => {
  const ready = useAppSelector((state) => state.meshtastic.ready);

  return (
-    <div className="flex bg-gray-100 rounded-full dark:bg-gray-700">
-      <div className="flex pl-2 my-auto dark:text-white">
+    <div className="flex bg-gray-100 rounded-md dark:bg-gray-700">
+      <div className="flex pl-2 my-auto space-x-2 dark:text-white">
        <div
          className={`
        my-auto mx-2 w-2 h-2 rounded-full min-w-[2] ${
@@ -31,15 +31,14 @@ export const DeviceStatusDropdown = (): JSX.Element => {
        }`}
        ></div>
        <div className="my-auto">{Types.DeviceStatusEnum[deviceStatus]}</div>
-        <Button
+        <IconButton
          icon={
            ready ? (
-              <FiWifi className="w-6 h-6" />
+              <FiWifi className="w-5 h-5" />
            ) : (
-              <FiWifiOff className="w-6 h-6 animate-pulse" />
+              <FiWifiOff className="w-5 h-5 animate-pulse" />
            )
          }
-          circle
        />
      </div>
    </div>
@@ -2,7 +2,7 @@ import React from 'react';

 import { FiMenu } from 'react-icons/fi';

-import { Button } from '@components/generic/Button';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { openMobileNav } from '@core/slices/appSlice';

 import { useAppDispatch } from '../../../hooks/redux';
@@ -12,12 +12,11 @@ export const MobileNavToggle = (): JSX.Element => {

  return (
    <div className="md:hidden">
-      <Button
+      <IconButton
        icon={<FiMenu className="w-5 h-5" />}
        onClick={(): void => {
          dispatch(openMobileNav());
        }}
-        circle
      />
    </div>
  );
@@ -2,8 +2,8 @@ import React from 'react';

 import { FiMoon, FiSun } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
 import { setDarkModeEnabled } from '@core/slices/appSlice';

 export const ThemeToggle = (): JSX.Element => {
@@ -11,7 +11,7 @@ export const ThemeToggle = (): JSX.Element => {
  const darkMode = useAppSelector((state) => state.app.darkMode);

  return (
-    <Button
+    <IconButton
      icon={
        darkMode ? (
          <FiSun className="w-5 h-5" />
@@ -19,7 +19,6 @@ export const ThemeToggle = (): JSX.Element => {
          <FiMoon className="w-5 h-5" />
        )
      }
-      circle
      onClick={(): void => {
        dispatch(setDarkModeEnabled(!darkMode));
      }}
@@ -77,8 +77,6 @@ export const meshtasticSlice = createSlice({
    },

    addChannel: (state, action: PayloadAction<Protobuf.Channel>) => {
-      console.log(action);
-
      if (
        state.channels.findIndex(
          (channel) => channel.index === action.payload.index,
@@ -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">
@@ -3,9 +3,9 @@ import React from 'react';
 import Avatar from 'boring-avatars';
 import { FiXCircle } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useBreakpoint } from '@app/hooks/breakpoint';
 import { useAppSelector } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
 import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
@@ -36,9 +36,8 @@ export const Nodes = (): JSX.Element => {
                Nodes
              </div>
              <div className="md:hidden">
-                <Button
+                <IconButton
                  icon={<FiXCircle className="w-5 h-5" />}
-                  circle
                  onClick={(): void => {
                    setNavOpen(false);
                  }}
@@ -5,9 +5,9 @@ import { FiMenu, FiTerminal } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
 import { Chart } from '@app/components/generic/Chart';
-import { Input } from '@app/components/generic/Input';
+import { Input } from '@app/components/generic/form/Input';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Toggle } from '@app/components/generic/Toggle';
-import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import type { Protobuf } from '@meshtastic/meshtasticjs';

@@ -23,12 +23,11 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
      title={node.user?.longName ?? node.num.toString()}
      tagline="Node"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
    >
@@ -5,9 +5,9 @@ import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';
 import useSWR from 'swr';

 import { Card } from '@app/components/generic/Card';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import fetcher from '@app/core/utils/fetcher.js';
 import { useAppSelector } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';

 export interface RangeTestProps {
@@ -55,12 +55,11 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
      title="File Browser"
      tagline="Plugin"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
    >
@@ -80,11 +79,7 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
        <Card
          title="Files"
          description="SPIFFS Contents"
-          buttons={
-            <Button active className="font-medium">
-              <FiUploadCloud className="w-8 h-8" />
-            </Button>
-          }
+          buttons={<IconButton icon={<FiUploadCloud className="w-8 h-8" />} />}
          className="md:w-1/3"
        >
          {data ? (
@@ -92,34 +87,37 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
              {data.data.files.map((file: IFile) => (
                <div
                  key={file.name}
-                  className="flex p-2 mx-4 bg-gray-300 rounded-md max-h-14 dark:bg-gray-600 "
+                  className="flex justify-between mx-4 bg-gray-300 rounded-md dark:bg-gray-600 "
                >
-                  <div className="flex w-12">
-                    <FileIcon
-                      extension={
-                        (file.nameModified ?? file.name).split('.')[
-                          (file.nameModified ?? file.name).split('.').length - 1
-                        ]
-                      }
-                      {...defaultStyles[
-                        (file.nameModified ?? file.name).split('.')[
-                          (file.nameModified ?? file.name).split('.').length - 1
-                        ] as DefaultExtensionType
-                      ]}
-                    />
+                  <div className="flex p-2 max-h-12">
+                    <div className="flex w-12">
+                      <FileIcon
+                        extension={
+                          (file.nameModified ?? file.name).split('.')[
+                            (file.nameModified ?? file.name).split('.').length -
+                              1
+                          ]
+                        }
+                        {...defaultStyles[
+                          (file.nameModified ?? file.name).split('.')[
+                            (file.nameModified ?? file.name).split('.').length -
+                              1
+                          ] as DefaultExtensionType
+                        ]}
+                      />
+                    </div>
+                    <a
+                      href={`http://${connectionURL}/${file.name.replace(
+                        'static/',
+                        '',
+                      )}`}
+                      className="my-auto font-semibold"
+                    >
+                      {file.nameModified ?? file.name}
+                    </a>
                  </div>
-                  <a
-                    href={`http://${connectionURL}/${file.name.replace(
-                      'static/',
-                      '',
-                    )}`}
-                    className="my-auto font-semibold"
-                  >
-                    {file.nameModified ?? file.name}
-                  </a>
-                  <Button
-                    className="ml-auto space-x-0"
-                    active
+                  <IconButton
+                    className="mx-2 my-auto"
                    confirmAction={async (): Promise<void> => {
                      await fetch(
                        `http://${connectionURL}/json/spiffs/delete/static?remove=${file.name}`,
@@ -128,7 +126,7 @@ export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
                        },
                      );
                    }}
-                    icon={<FiTrash />}
+                    icon={<FiTrash className="w-5 h-5" />}
                  />
                </div>
              ))}
@@ -2,8 +2,8 @@ import React from 'react';

 import { FiFileText, FiRss, FiXCircle } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useBreakpoint } from '@app/hooks/breakpoint';
-import { Button } from '@components/generic/Button';
 import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
@@ -32,7 +32,7 @@ export const Plugins = (): JSX.Element => {
                Plugins
              </div>
              <div className="md:hidden">
-                <Button
+                <IconButton
                  icon={<FiXCircle className="w-5 h-5" />}
                  circle
                  onClick={(): void => {
@@ -5,7 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
-import { Input } from '@app/components/generic/Input.jsx';
+import { Input } from '@app/components/generic/form/Input.jsx';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Toggle } from '@app/components/generic/Toggle';
 import { connection } from '@app/core/connection.js';
 import { useAppSelector } from '@app/hooks/redux';
@@ -45,12 +46,11 @@ export const RangeTest = ({
      title="Range Test"
      tagline="Plugin"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -1,16 +1,14 @@
 import React from 'react';

-import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FiMenu, FiSave, FiTrash } from 'react-icons/fi';
+import { FiMenu, FiSave } from 'react-icons/fi';

+import { Channel } from '@app/components/Channel.jsx';
 import { Card } from '@app/components/generic/Card';
-import { Input } from '@app/components/generic/Input.jsx';
-import { connection } from '@app/core/connection.js';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useAppSelector } from '@app/hooks/redux.js';
 import { Button } from '@components/generic/Button';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
-import { Protobuf } from '@meshtastic/meshtasticjs';

 export interface ChannelsProps {
  navOpen: boolean;
@@ -24,33 +22,16 @@ export const Channels = ({
  const { t } = useTranslation();
  const channels = useAppSelector((state) => state.meshtastic.channels);

-  const { register, handleSubmit, formState } = useForm<{
-    index: number;
-    name: string;
-  }>();
-
-  const onSubmit = handleSubmit(async (data) => {
-    const adminChannel = Protobuf.Channel.create({
-      role: Protobuf.Channel_Role.SECONDARY,
-      index: data.index,
-      settings: {
-        name: data.name,
-      },
-    });
-    await connection.setChannel(adminChannel);
-  });
-
  return (
    <PrimaryTemplate
-      title="Interface"
+      title="Channels"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -60,55 +41,37 @@ export const Channels = ({
          active
          border
        >
-          {t('strings.save_changes')}
+          Confirm
        </Button>
      }
    >
      <div className="space-y-4">
        <Card
-          title="Add Channel"
-          description="Once a channel is changed and confirmed working, click `Confirm Config` to prevent reverting."
+          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>
+          }
        >
-          <div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
-            <form className="space-y-2" onSubmit={onSubmit}>
-              <Input
-                label="Index"
-                type="number"
-                min={1}
-                max={7}
-                {...register('index', { valueAsNumber: true })}
-              />
-              <Input label="Name" {...register('name')} />
-              <div className="flex space-x-2">
-                <Button onClick={onSubmit} border>
-                  Add Channel
-                </Button>
-                <Button onClick={onSubmit} border>
-                  Confirm Config
-                </Button>
-              </div>
-            </form>
-          </div>
-        </Card>
-        <Card
-          title="Basic settings"
-          description="Device name and user parameters"
-        >
-          <div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
+          <div className="w-full max-w-3xl p-4 space-y-2 md:p-10 md:max-w-xl">
            {channels.map((channel) => (
-              <div key={channel.index} className="flex flex-col space-y-2">
-                <div className="flex items-center justify-between p-2 border rounded-3xl">
-                  {Protobuf.Channel_Role[channel.role]}
-                  {channel.settings?.name}
-                  <Button
-                    onClick={async (): Promise<void> => {
-                      await connection.deleteChannel(channel.index);
-                    }}
-                    icon={<FiTrash />}
-                  />
-                </div>
-              </div>
+              <Channel key={channel.index} channel={channel} />
            ))}
+
+            <div className="flex space-x-52">
+              <div className="text-sm font-thin text-gray-400 dark:text-gray-300">
+                Please ensure any changes are working before confirming
+              </div>
+              <Button active>Confirm</Button>
+            </div>
          </div>
        </Card>
      </div>
@@ -5,7 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { FiLink2, FiMenu, FiSave } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
-import { Input } from '@app/components/generic/Input';
+import { Input } from '@app/components/generic/form/Input';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Tabs } from '@app/components/generic/Tabs';
 import { Toggle } from '@app/components/generic/Toggle';
 import { bleConnection, serialConnection } from '@app/core/connection';
@@ -39,12 +40,11 @@ export const Connection = ({
      title="Connection"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -5,11 +5,12 @@ import { useTranslation } from 'react-i18next';
 import { FiMenu, FiSave } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { Toggle } from '@app/components/generic/Toggle';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
-import { Input } from '@components/generic/Input';
+import { Input } from '@components/generic/form/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';

@@ -34,10 +35,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
  });

  const onSubmit = handleSubmit((data) => {
-    // Protobuf.User.mergePartial(user, data);
-
    void connection.setOwner({ ...user, ...data });
-    console.log('submitted');
  });

  return (
@@ -45,12 +43,11 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
      title="Device"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
@@ -9,8 +9,8 @@ import {
  FiXCircle,
 } from 'react-icons/fi';

+import { IconButton } from '@app/components/generic/IconButton.jsx';
 import { useBreakpoint } from '@app/hooks/breakpoint';
-import { Button } from '@components/generic/Button';
 import { Drawer } from '@components/generic/Drawer';
 import { SidebarItem } from '@components/generic/SidebarItem';
 import { Tab } from '@headlessui/react';
@@ -42,9 +42,8 @@ export const Settings = (): JSX.Element => {
                Settings
              </div>
              <div className="md:hidden">
-                <Button
+                <IconButton
                  icon={<FiXCircle className="w-5 h-5" />}
-                  circle
                  onClick={(): void => {
                    setNavOpen(false);
                  }}
@@ -2,13 +2,16 @@ import React from 'react';

 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { FiMenu, FiSave } from 'react-icons/fi';
+import { FiMenu, FiSave, FiXCircle } from 'react-icons/fi';

 import { Card } from '@app/components/generic/Card';
+import { EnumSelect } from '@app/components/generic/form/EnumSelect.jsx';
+import { IconButton } from '@app/components/generic/IconButton.jsx';
+import { Toggle } from '@app/components/generic/Toggle.jsx';
 import { connection } from '@app/core/connection';
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
-import { Input } from '@components/generic/Input';
+import { Input } from '@components/generic/form/Input';
 import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 import { Protobuf } from '@meshtastic/meshtasticjs';

@@ -21,7 +24,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
  const { t } = useTranslation();
  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);

-  const { register, handleSubmit, formState } =
+  const { register, handleSubmit, formState, reset } =
    useForm<Protobuf.RadioConfig_UserPreferences>({
      defaultValues: radioConfig,
    });
@@ -34,24 +37,33 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
      title="Radio"
      tagline="Settings"
      button={
-        <Button
+        <IconButton
          icon={<FiMenu className="w-5 h-5" />}
          onClick={(): void => {
            setNavOpen(!navOpen);
          }}
-          circle
        />
      }
      footer={
-        <Button
-          className="px-10 ml-auto"
-          icon={<FiSave className="w-5 h-5" />}
-          disabled={!formState.isDirty}
-          active
-          border
-        >
-          {t('strings.save_changes')}
-        </Button>
+        <div className="flex space-x-2">
+          <IconButton
+            icon={<FiXCircle className="w-5 h-5" />}
+            disabled={formState.isDirty}
+            onClick={(): void => {
+              reset();
+            }}
+          />
+          <Button
+            className="px-10 ml-auto"
+            icon={<FiSave className="w-5 h-5" />}
+            disabled={!formState.isDirty}
+            onClick={onSubmit}
+            active
+            border
+          >
+            {t('strings.save_changes')}
+          </Button>
+        </div>
      }
    >
      <Card
@@ -60,6 +72,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
      >
        <div className="w-full max-w-3xl p-10 md:max-w-xl">
          <form className="space-y-2" onSubmit={onSubmit}>
+            <div>WiFi</div>
            <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
            <Input
              type="password"
@@ -69,14 +82,36 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
            <Input
              label={'Charge current'}
              disabled
-              {...register('chargeCurrent')}
+              {...register('chargeCurrent', { valueAsNumber: true })}
            />
+            <div>Position</div>
+            <Input
+              label={'Broadcast Interval (seconds)'}
+              {...register('positionBroadcastSecs', { valueAsNumber: true })}
+            />
+            <EnumSelect
+              label="Position Type"
+              optionsEnum={Protobuf.PositionFlags}
+              {...register('positionFlags', { valueAsNumber: true })}
+            />
+            <Toggle label="Use Fixed Position" {...register('fixedPosition')} />
+            <EnumSelect
+              label="Location Sharing"
+              optionsEnum={Protobuf.LocationSharing}
+              {...register('locationShare', { valueAsNumber: true })}
+            />
+            <EnumSelect
+              label="GPS Mode"
+              optionsEnum={Protobuf.GpsOperation}
+              {...register('gpsOperation', { valueAsNumber: true })}
+            />
+
+            <div>Other</div>
            <Input
              label={'Last GPS Attempt'}
              disabled
-              {...register('gpsAttemptTime')}
+              {...register('gpsAttemptTime', { valueAsNumber: true })}
            />
-            {Protobuf.PositionFlags[radioConfig.positionFlags]}
          </form>
        </div>
      </Card>