)}
diff --git a/src/components/generic/Blur.tsx b/src/components/generic/Blur.tsx
index 90446ce1..1e72298c 100644
--- a/src/components/generic/Blur.tsx
+++ b/src/components/generic/Blur.tsx
@@ -14,14 +14,14 @@ export const Blur = ({
}: BlurProps): JSX.Element => {
return (
void;
-}
-
-export const Drawer = ({
- open,
- permenant,
- onClose,
- className,
- children,
-
- ...props
-}: DrawerProps): JSX.Element => {
- return (
- <>
- {open && (
-
- )}
-
-
-
- );
-};
diff --git a/src/components/generic/ListItem.tsx b/src/components/generic/ListItem.tsx
new file mode 100644
index 00000000..d0731f6f
--- /dev/null
+++ b/src/components/generic/ListItem.tsx
@@ -0,0 +1,46 @@
+import type React from 'react';
+
+import { IconButton } from '@meshtastic/components';
+
+export interface ListItemProps {
+ selected: boolean;
+ selectedIcon: JSX.Element;
+ actions?: JSX.Element;
+ status: JSX.Element;
+ onClick?: () => void;
+ children: React.ReactNode;
+}
+
+export const ListItem = ({
+ selected,
+ selectedIcon,
+ actions,
+ status,
+ onClick,
+ children,
+}: ListItemProps): JSX.Element => {
+ return (
+
{
+ onClick && onClick();
+ }}
+ className={`flex select-none rounded-md border bg-gray-100 shadow-md dark:bg-primaryDark ${
+ selected
+ ? 'border-primary dark:border-primary'
+ : 'border-gray-100 dark:border-primaryDark'
+ }`}
+ >
+
+
+
+ {status}
+
{children}
+
+
+ {actions}
+
+
+
+
+ );
+};
diff --git a/src/components/generic/Modal.tsx b/src/components/generic/Modal.tsx
index ca0d13fd..b2866387 100644
--- a/src/components/generic/Modal.tsx
+++ b/src/components/generic/Modal.tsx
@@ -1,33 +1,33 @@
import type React from 'react';
-import { Dialog } from '@headlessui/react';
+import { m } from 'framer-motion';
+
import { useAppSelector } from '@hooks/useAppSelector';
+// import { Backdrop } from './Backdrop';
+
type DefaultDivProps = JSX.IntrinsicElements['div'];
export interface ModalProps extends DefaultDivProps {
- children: React.ReactNode;
- open: boolean;
onClose: () => void;
+ children: React.ReactNode;
}
export const Modal = ({
- children,
- open,
onClose,
+ children,
className,
...props
}: ModalProps): JSX.Element => {
const darkMode = useAppSelector((state) => state.app.darkMode);
+
return (
-
-
+
+
);
};
diff --git a/src/components/generic/Sidebar.tsx b/src/components/generic/Sidebar.tsx
deleted file mode 100644
index 8564a43c..00000000
--- a/src/components/generic/Sidebar.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type React from 'react';
-
-import { FiX } from 'react-icons/fi';
-
-import { IconButton } from '@meshtastic/components';
-
-export interface SidebarProps {
- title: string;
- tagline: string;
- footer?: JSX.Element;
- closeSidebar: () => void;
- children: React.ReactNode;
-}
-
-export const Sidebar = ({
- title,
- tagline,
- closeSidebar,
- children,
-}: SidebarProps): JSX.Element => {
- return (
-
-
-
-
-
{title}
- {tagline}
-
-
- {
- closeSidebar();
- }}
- icon={}
- />
-
-
-
- {children ?? (
-
- )}
-
- );
-};
diff --git a/src/components/generic/SidebarItem.tsx b/src/components/generic/SidebarItem.tsx
deleted file mode 100644
index 65d906e8..00000000
--- a/src/components/generic/SidebarItem.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type React from 'react';
-
-type DefaultDivProps = JSX.IntrinsicElements['div'];
-
-export interface SidebarItemProps extends DefaultDivProps {
- title: string;
- description: string;
- icon: JSX.Element;
- selected?: boolean;
-}
-
-export const SidebarItem = ({
- title,
- description,
- selected,
- icon,
- ...props
-}: SidebarItemProps): JSX.Element => {
- return (
-
-
{icon}
-
-
{title}
-
{description}
-
-
- );
-};
diff --git a/src/components/generic/Tooltip.tsx b/src/components/generic/Tooltip.tsx
deleted file mode 100644
index 6a2bd3ec..00000000
--- a/src/components/generic/Tooltip.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import 'tippy.js/dist/tippy.css';
-
-import type React from 'react';
-
-import Tippy from '@tippyjs/react';
-
-export interface TooltipProps {
- children: JSX.Element;
- contents: string;
-}
-
-export const Tooltip = ({ children, contents }: TooltipProps): JSX.Element => {
- return
{children};
-};
diff --git a/src/components/generic/form/BitwiseSelect.tsx b/src/components/generic/form/BitwiseSelect.tsx
deleted file mode 100644
index 9d4c3fdc..00000000
--- a/src/components/generic/form/BitwiseSelect.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import type React from 'react';
-
-import type { Noop, RefCallBack } from 'react-hook-form';
-import type { Theme } from 'react-select';
-import ReactSelect from 'react-select';
-
-import { bitwiseDecode, bitwiseEncode } from '@app/core/utils/bitwise';
-import { useAppSelector } from '@hooks/useAppSelector';
-
-import { Label } from './Label';
-
-export interface BiwiseSelectProps {
- label: string;
- error?: string;
- value: number;
- optionsEnum: { [s: string]: string | number };
- onChange: (...event: unknown[]) => void;
- onBlur: Noop;
- name: string;
- ref: RefCallBack;
-}
-
-export const BitwiseSelect = ({
- label,
- error,
- value,
- optionsEnum,
- onChange,
- ref,
-}: BiwiseSelectProps): JSX.Element => {
- const darkMode = useAppSelector((state) => state.app.darkMode);
-
- return (
-
- {label && }
- ({
- // ...provided,
- // // color: state.isFocused ? 'blue' : 'red',
- // // borderColor: state.isFocused ? 'blue' : 'red',
- // }),
- // }}
- theme={(theme): Theme => ({
- ...theme,
- borderRadius: 7,
- colors: {
- ...theme.colors,
- primary: '#67ea94', //focus border color
- // primary75: 'red',
- // primary50: 'red',
- // primary25: 'red',
- // danger: 'red',
- // dangerLight: 'red',
- neutral0: darkMode ? 'rgb(30 41 59)' : 'white', //bg color
- // neutral5: 'red',
- neutral10: darkMode ? 'rgb(75 85 99)' : 'rgb(229 231 235)', //tag bg color
- neutral20: darkMode ? 'rgb(229 231 235)' : 'rgb(156 163 175)', //border color
- neutral30: '#67ea94', //border hover
- // neutral40: 'red',
- // neutral50: 'red',
- // neutral60: 'red',
- // neutral70: 'red',
- neutral80: darkMode ? 'white' : 'black', //tag text color
- // neutral90: 'red',
- },
- })}
- value={bitwiseDecode(value, optionsEnum).map((flag) => {
- return {
- value: flag,
- label: (optionsEnum[flag] as string).replace('POS_', ''),
- };
- })}
- options={Object.entries(optionsEnum)
- .filter((value) => typeof value[1] !== 'number')
- .filter((value) => parseInt(value[0]) !== optionsEnum.POS_UNDEFINED)
- .map((value) => {
- return {
- value: parseInt(value[0]),
- label: value[1].toString().replace('POS_', ''),
- };
- })}
- onChange={(e): void => onChange(bitwiseEncode(e.map((v) => v.value)))}
- />
-
- );
-};
diff --git a/src/components/generic/form/Label.tsx b/src/components/generic/form/Label.tsx
index f2fac380..9a0f0d63 100644
--- a/src/components/generic/form/Label.tsx
+++ b/src/components/generic/form/Label.tsx
@@ -9,6 +9,6 @@ export const Label = ({ label, error }: LabelProps): JSX.Element => (
);
diff --git a/src/components/layout/Sidebar/ButtonNav.tsx b/src/components/layout/Sidebar/ButtonNav.tsx
new file mode 100644
index 00000000..96382a5f
--- /dev/null
+++ b/src/components/layout/Sidebar/ButtonNav.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { FiMessageCircle, FiSettings } from 'react-icons/fi';
+import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
+import { VscExtensions } from 'react-icons/vsc';
+
+import { toggleMobileNav } from '@app/core/slices/appSlice.js';
+import { useAppDispatch } from '@app/hooks/useAppDispatch.js';
+import { routes, useRoute } from '@core/router';
+
+import { NavLinkButton } from './NavLinkButton';
+
+export interface ButtonNavProps {
+ toggleSettingsOpen: () => void;
+}
+
+export const ButtonNav = ({
+ toggleSettingsOpen,
+}: ButtonNavProps): JSX.Element => {
+ const route = useRoute();
+ const dispatch = useAppDispatch();
+
+ return (
+
+
{
+ dispatch(toggleMobileNav());
+ }}
+ >
+
+
+
+
+
{
+ dispatch(toggleMobileNav());
+ }}
+ >
+
+
+
+
+
{
+ dispatch(toggleMobileNav());
+ }}
+ >
+
+
+
+
+
{
+ dispatch(toggleMobileNav());
+ }}
+ >
+
+
+
+
+
{
+ toggleSettingsOpen();
+ }}
+ >
+
+
+
+ );
+};
diff --git a/src/components/layout/Sidebar/NavLinkButton.tsx b/src/components/layout/Sidebar/NavLinkButton.tsx
new file mode 100644
index 00000000..e4904d0c
--- /dev/null
+++ b/src/components/layout/Sidebar/NavLinkButton.tsx
@@ -0,0 +1,38 @@
+import type React from 'react';
+
+import { m } from 'framer-motion';
+import type { Link } from 'type-route';
+
+export interface NavLinkButtonProps {
+ link?: Link;
+ active?: boolean;
+ action?: () => void;
+ children: React.ReactNode;
+}
+
+export const NavLinkButton = ({
+ link,
+ active,
+ action,
+ children,
+}: NavLinkButtonProps): JSX.Element => {
+ return (
+
{
+ action && action();
+ }}
+ {...(link && link)}
+ >
+ {children}
+
+ );
+};
diff --git a/src/components/layout/Sidebar/Settings/Channels.tsx b/src/components/layout/Sidebar/Settings/Channels.tsx
new file mode 100644
index 00000000..d98683cb
--- /dev/null
+++ b/src/components/layout/Sidebar/Settings/Channels.tsx
@@ -0,0 +1,160 @@
+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 { ListItem } from '@app/components/generic/ListItem';
+import type { ChannelData } from '@app/core/slices/meshtasticSlice';
+import { connection } from '@core/connection';
+import { useAppSelector } from '@hooks/useAppSelector';
+import { Checkbox, Input, Select, Tooltip } from '@meshtastic/components';
+import { Protobuf } from '@meshtastic/meshtasticjs';
+
+export const Channels = (): JSX.Element => {
+ const channels = useAppSelector((state) => state.meshtastic.radio.channels);
+ const adminChannel =
+ channels.find(
+ (channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY,
+ ) ?? channels[0];
+ const [usePreset, setUsePreset] = React.useState(true);
+ const [loading, setLoading] = React.useState(false);
+ const [selectedChannel, setSelectedChannel] = React.useState<
+ ChannelData | undefined
+ >();
+
+ const { register, handleSubmit, reset, formState } = useForm<
+ DeepOmit
+ >({
+ defaultValues: {
+ ...adminChannel.channel,
+ },
+ });
+
+ const onSubmit = handleSubmit(async (data) => {
+ setLoading(true);
+
+ const channelData = Protobuf.Channel.create({
+ ...data,
+ settings: {
+ ...data.settings,
+ psk: adminChannel.channel.settings?.psk,
+ },
+ });
+
+ await connection.setChannel(channelData, (): Promise => {
+ reset({ ...data });
+ setLoading(false);
+ return Promise.resolve();
+ });
+ });
+
+ return (
+ <>
+ {adminChannel && (
+ <>
+ setUsePreset(e.target.checked)}
+ />
+
+
+ )}
+ {channels.map((channel) => (
+ {
+ setSelectedChannel(channel);
+ }}
+ status={
+ role === channel.channel.role)
+ ? 'bg-green-500'
+ : 'bg-gray-400'
+ }`}
+ />
+ }
+ selected={selectedChannel?.channel.index === channel.channel.index}
+ selectedIcon={
}
+ actions={
+
+
+ {channel.channel.settings?.uplinkEnabled &&
+ channel.channel.settings?.downlinkEnabled ? (
+
+ ) : channel.channel.settings?.uplinkEnabled ? (
+
+ ) : channel.channel.settings?.downlinkEnabled ? (
+
+ ) : (
+
+ )}
+
+
+ }
+ >
+
+ {channel.channel.settings?.name.length
+ ? channel.channel.settings.name
+ : channel.channel.role === Protobuf.Channel_Role.PRIMARY
+ ? 'Primary'
+ : `Channel: ${channel.channel.index}`}
+
+
+ ))}
+
+ );
+};
diff --git a/src/components/layout/Sidebar/Settings/Index.tsx b/src/components/layout/Sidebar/Settings/Index.tsx
new file mode 100644
index 00000000..25988d1a
--- /dev/null
+++ b/src/components/layout/Sidebar/Settings/Index.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+
+import {
+ FiAlignLeft,
+ FiBell,
+ FiFastForward,
+ FiLayers,
+ FiLayout,
+ FiMapPin,
+ FiPackage,
+ FiRadio,
+ FiRss,
+ FiUser,
+ FiWifi,
+ FiZap,
+} from 'react-icons/fi';
+
+import { CollapsibleSection } from '@app/components/layout/Sidebar/sections/CollapsibleSection';
+import { ExternalSection } from '@app/components/layout/Sidebar/sections/ExternalSection';
+import { SidebarOverlay } from '@app/components/layout/Sidebar/sections/SidebarOverlay';
+import { SidebarPrimary } from '@app/components/layout/Sidebar/sections/SidebarPrimary';
+import { Channels } from '@app/components/layout/Sidebar/Settings/Channels';
+import { ExternalNotificationsSettingsPlanel } from '@app/components/layout/Sidebar/Settings/plugins/panels/ExternalNotifications/SettingsPlanel';
+import { RangeTestSettingsPanel } from '@app/components/layout/Sidebar/Settings/plugins/panels/RangeTest/SettingsPanel';
+import { SerialSettingsPanel } from '@app/components/layout/Sidebar/Settings/plugins/panels/Serial/SettingsPanel';
+import { StoreForwardSettingsPanel } from '@app/components/layout/Sidebar/Settings/plugins/panels/StoreForward/SettingsPanel';
+import { Position } from '@app/components/layout/Sidebar/Settings/Position';
+import { Power } from '@app/components/layout/Sidebar/Settings/Power';
+import { Radio } from '@app/components/layout/Sidebar/Settings/Radio';
+import { User } from '@app/components/layout/Sidebar/Settings/User';
+import { WiFi } from '@app/components/layout/Sidebar/Settings/WiFi';
+
+import { Interface } from './Interface';
+import { ChannelsGroup } from './radio/channels/panels/ChannelsGroup';
+
+export interface SettingsProps {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+}
+
+export const Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
+ const [pluginsOpen, setPluginsOpen] = React.useState(false);
+ const [channelsOpen, setChannelsOpen] = React.useState(false);
+ // const { hasGps, hasWifi } = useAppSelector((state) => state.meshtastic.radio.hardware);
+
+ const hasGps = true;
+ const hasWifi = true;
+
+ return (
+ <>
+
{
+ setOpen(false);
+ }}
+ >
+ } title="WiFi & MQTT">
+
+
+ } title="Position">
+
+
+ } title="User">
+
+
+ } title="Power">
+
+
+ } title="Radio">
+
+
+ } title="Primary Channel">
+
+
+ {
+ setChannelsOpen(true);
+ }}
+ icon={}
+ title="Channels"
+ />
+ {
+ setPluginsOpen(true);
+ }}
+ icon={}
+ title="Plugins"
+ />
+ } title="Interface">
+
+
+
+
+ {/* Plugins */}
+
{
+ setPluginsOpen(false);
+ }}
+ >
+ }>
+
+
+ }>
+
+
+ }>
+
+
+ }>
+
+
+
+ {/* End Plugins */}
+
+ {/* Channels */}
+
{
+ setChannelsOpen(false);
+ }}
+ >
+
+
+ {/* End Channels */}
+
+ );
+};
diff --git a/src/components/layout/Sidebar/Settings/Interface.tsx b/src/components/layout/Sidebar/Settings/Interface.tsx
new file mode 100644
index 00000000..aad76d6d
--- /dev/null
+++ b/src/components/layout/Sidebar/Settings/Interface.tsx
@@ -0,0 +1,28 @@
+import type React from 'react';
+
+import { Select } from '@meshtastic/components';
+
+export const Interface = (): JSX.Element => {
+ return (
+