Updated channel editor & fixes

src/components/Channel.tsx

@@ -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>
+  );
+};

src/components/chat/MessageBar.tsx

@@ -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>

src/components/generic/Blur.tsx

@@ -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}

src/components/generic/Button.tsx

@@ -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>
+//   );
+// };

src/components/generic/Card.tsx

@@ -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">

src/components/generic/IconButton.tsx

@@ -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>
+  );
+};

src/components/generic/Input.tsx

@@ -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>
-    );
-  },
-);

src/components/generic/Toggle.tsx

@@ -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}

src/components/generic/form/EnumSelect.tsx

@@ -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>
+    );
+  },
+);

src/components/generic/form/Input.tsx

@@ -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>
+    );
+  },
+);

src/components/generic/form/InputWrapper.tsx

@@ -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>
+);

src/components/generic/form/Label.tsx

@@ -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>
+);

src/components/menu/buttons/DeviceStatusDropdown.tsx

@@ -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>

src/components/menu/buttons/MobileNavToggle.tsx

@@ -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>
   );

src/components/menu/buttons/ThemeToggle.tsx

@@ -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));
       }}