DM's and layout fixes

src/components/layout/Sidebar/ButtonNav.tsx

@@ -4,8 +4,8 @@ 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 { toggleMobileNav } from '@app/core/slices/appSlice';
+import { useAppDispatch } from '@app/hooks/useAppDispatch';
 import { routes, useRoute } from '@core/router';
 
 import { NavLinkButton } from './NavLinkButton';
@@ -21,7 +21,7 @@ export const ButtonNav = ({
   const dispatch = useAppDispatch();
 
   return (
-    <div className="z-10 flex justify-between border-t border-gray-300 px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
+    <div className="z-30 flex justify-between border-t border-gray-300 px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
       <div
         onClick={(): void => {
           dispatch(toggleMobileNav());

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

@@ -9,7 +9,6 @@ import {
 } 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';
@@ -19,19 +18,19 @@ 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,
+      (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
+    Protobuf.Channel | undefined
   >();
 
   const { register, handleSubmit, reset, formState } = useForm<
     DeepOmit<Protobuf.Channel, 'psk'>
   >({
     defaultValues: {
-      ...adminChannel.channel,
+      ...adminChannel,
     },
   });
 
@@ -42,7 +41,7 @@ export const Channels = (): JSX.Element => {
       ...data,
       settings: {
         ...data.settings,
-        psk: adminChannel.channel.settings?.psk,
+        psk: adminChannel.settings?.psk,
       },
     });
 
@@ -111,7 +110,7 @@ export const Channels = (): JSX.Element => {
       )}
       {channels.map((channel) => (
         <ListItem
-          key={channel.channel.index}
+          key={channel.index}
           onClick={(): void => {
             setSelectedChannel(channel);
           }}
@@ -121,23 +120,23 @@ export const Channels = (): JSX.Element => {
                 [
                   Protobuf.Channel_Role.SECONDARY,
                   Protobuf.Channel_Role.PRIMARY,
-                ].find((role) => role === channel.channel.role)
+                ].find((role) => role === channel.role)
                   ? 'bg-green-500'
                   : 'bg-gray-400'
               }`}
             />
           }
-          selected={selectedChannel?.channel.index === channel.channel.index}
+          selected={selectedChannel?.index === channel.index}
           selectedIcon={<FiExternalLink />}
           actions={
             <Tooltip content={`MQTT Status`}>
               <div className="rounded-md p-2">
-                {channel.channel.settings?.uplinkEnabled &&
-                channel.channel.settings?.downlinkEnabled ? (
+                {channel.settings?.uplinkEnabled &&
+                channel.settings?.downlinkEnabled ? (
                   <RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
-                ) : channel.channel.settings?.uplinkEnabled ? (
+                ) : channel.settings?.uplinkEnabled ? (
                   <RiArrowUpLine className="p-0.5 group-active:scale-90" />
-                ) : channel.channel.settings?.downlinkEnabled ? (
+                ) : channel.settings?.downlinkEnabled ? (
                   <RiArrowDownLine className="p-0.5 group-active:scale-90" />
                 ) : (
                   <FiX className="p-0.5" />
@@ -147,11 +146,11 @@ export const Channels = (): JSX.Element => {
           }
         >
           <div>
-            {channel.channel.settings?.name.length
-              ? channel.channel.settings.name
-              : channel.channel.role === Protobuf.Channel_Role.PRIMARY
+            {channel.settings?.name.length
+              ? channel.settings.name
+              : channel.role === Protobuf.Channel_Role.PRIMARY
               ? 'Primary'
-              : `Channel: ${channel.channel.index}`}
+              : `Channel: ${channel.index}`}
           </div>
         </ListItem>
       ))}

src/components/layout/Sidebar/Settings/radio/channels/panels/ChannelsGroup.tsx

@@ -17,21 +17,21 @@ export const ChannelsGroup = (): JSX.Element => {
     <>
       {channels.map((channel) => {
         return (
-          <div key={channel.channel.index}>
+          <div key={channel.index}>
             <CollapsibleSection
               title={
-                channel.channel.settings?.name.length
-                  ? channel.channel.settings.name
-                  : channel.channel.role === Protobuf.Channel_Role.PRIMARY
+                channel.settings?.name.length
+                  ? channel.settings.name
+                  : channel.role === Protobuf.Channel_Role.PRIMARY
                   ? 'Primary'
-                  : `Channel: ${channel.channel.index}`
+                  : `Channel: ${channel.index}`
               }
               icon={
                 <div
                   className={`h-3 w-3 rounded-full ${
-                    channel.channel.role === Protobuf.Channel_Role.PRIMARY
+                    channel.role === Protobuf.Channel_Role.PRIMARY
                       ? 'bg-orange-500'
-                      : channel.channel.role === Protobuf.Channel_Role.SECONDARY
+                      : channel.role === Protobuf.Channel_Role.SECONDARY
                       ? 'bg-green-500'
                       : 'bg-gray-500'
                   }`}
@@ -46,9 +46,9 @@ export const ChannelsGroup = (): JSX.Element => {
               }
             >
               <>
-                {/* <DebugPanel channel={channel.channel} /> */}
-                {/* <QRCodePanel channel={channel.channel} /> */}
-                <SettingsPanel channel={channel.channel} />
+                {/* <DebugPanel channel={channel} /> */}
+                {/* <QRCodePanel channel={channel} /> */}
+                <SettingsPanel channel={channel} />
               </>
             </CollapsibleSection>
           </div>

src/components/layout/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useAppSelector } from '@app/hooks/useAppSelector.js';
+import { useAppSelector } from '@app/hooks/useAppSelector';
 
 import { ButtonNav } from './ButtonNav';
 import { Settings } from './Settings/Index';
@@ -15,23 +15,21 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
   const appState = useAppSelector((state) => state.app);
 
   return (
-    <div className="flex flex-grow">
-      <div
-        className={`absolute h-full w-full flex-grow flex-col pb-6 md:relative md:flex md:w-96 md:pb-0 ${
-          appState.mobileNavOpen ? 'flex' : 'hidden'
-        }`}
-      >
-        <div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
-          <div className="relative flex-grow gap-1">
-            <div className="absolute h-full w-full">{children}</div>
-            <Settings open={settingsOpen} setOpen={setSettingsOpen} />
-          </div>
-          <ButtonNav
-            toggleSettingsOpen={(): void => {
-              setSettingsOpen(!settingsOpen);
-            }}
-          />
+    <div
+      className={`absolute z-20 h-full w-full flex-grow flex-col md:relative md:flex md:w-96 ${
+        appState.mobileNavOpen ? 'flex' : 'hidden'
+      }`}
+    >
+      <div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
+        <div className="relative flex-grow gap-1">
+          <div className="absolute h-full w-full">{children}</div>
+          <Settings open={settingsOpen} setOpen={setSettingsOpen} />
         </div>
+        <ButtonNav
+          toggleSettingsOpen={(): void => {
+            setSettingsOpen(!settingsOpen);
+          }}
+        />
       </div>
     </div>
   );

src/components/layout/Sidebar/sections/SidebarOverlay.tsx

@@ -24,7 +24,7 @@ export const SidebarOverlay = ({
     <AnimatePresence>
       {open && (
         <m.div
-          className="absolute z-10 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
+          className="absolute z-30 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
           animate={direction === 'x' ? { translateX: 0 } : { translateY: 0 }}
           initial={
             direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }

src/components/layout/index.tsx

@@ -21,16 +21,18 @@ export const Layout = ({
   children,
 }: LayoutProps): JSX.Element => {
   return (
-    <div className="flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
-      <Sidebar>
-        <div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
-          <IconButton icon={icon} />
-          <div className="my-auto text-lg font-medium dark:text-white">
-            {title}
+    <div className="relative flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
+      <div className="flex flex-grow">
+        <Sidebar>
+          <div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
+            <IconButton icon={icon} />
+            <div className="my-auto text-lg font-medium dark:text-white">
+              {title}
+            </div>
           </div>
-        </div>
-        <div className="flex flex-col gap-2">{sidebarContents}</div>
-      </Sidebar>
+          <div className="flex flex-col gap-2">{sidebarContents}</div>
+        </Sidebar>
+      </div>
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         {children}
       </ErrorBoundary>

src/components/menu/BottomNav.tsx

@@ -36,8 +36,7 @@ export const BottomNav = (): JSX.Element => {
   const appState = useAppSelector((state) => state.app);
   const primaryChannelSettings = useAppSelector(
     (state) => state.meshtastic.radio.channels,
-  ).find((channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY)
-    ?.channel.settings;
+  ).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
 
   return (
     <div className="z-20 flex justify-between border-t border-gray-300 bg-white dark:border-gray-600 dark:bg-secondaryDark">

src/components/modals/VersionInfo.tsx

@@ -40,7 +40,6 @@ export const VersionInfo = ({
   //   }`,
   //   fetcher,
   // );
-  // console.log(data);
 
   return (
     <AnimatePresence>