fix build

src/components/SlideSheets/NewDevice.tsx

@@ -10,12 +10,12 @@ import {
   Tab,
   Tablist,
 } from "evergreen-ui";
-import type { IconType } from "react-icons";
 import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
 
 import { BLE } from "../connect/BLE.js";
 import { HTTP } from "../connect/HTTP.js";
 import { Serial } from "../connect/Serial.js";
+import type { TabType } from "../layout/page/TabbedContent.js";
 
 export interface NewDeviceProps {
   open: boolean;
@@ -28,35 +28,32 @@ export interface CloseProps {
 
 export type connType = "http" | "ble" | "serial";
 
-export interface Tab {
-  name: connType;
-  icon: IconType;
-  displayName: string;
+export interface ConnTab extends Omit<TabType, "element"> {
+  connType: connType;
   element: ({ close }: CloseProps) => JSX.Element;
-  disabled?: boolean;
 }
 
 export const NewDevice = ({ open, onClose }: NewDeviceProps) => {
   const [selectedConnType, setSelectedConnType] = useState<connType>("ble");
 
-  const tabs: Tab[] = [
+  const tabs: ConnTab[] = [
     {
-      name: "ble",
+      connType: "ble",
       icon: FiBluetooth,
-      displayName: "BLE",
+      name: "BLE",
       element: BLE,
       disabled: !navigator.bluetooth,
     },
     {
-      name: "http",
+      connType: "http",
       icon: FiWifi,
-      displayName: "HTTP",
+      name: "HTTP",
       element: HTTP,
     },
     {
-      name: "serial",
+      connType: "serial",
       icon: FiTerminal,
-      displayName: "Serial",
+      name: "Serial",
       element: Serial,
       disabled: !navigator.serial,
     },
@@ -85,13 +82,13 @@ export const NewDevice = ({ open, onClose }: NewDeviceProps) => {
               <Tab
                 key={index}
                 gap={5}
-                isSelected={selectedConnType === TabData.name}
-                onSelect={() => setSelectedConnType(TabData.name)}
+                isSelected={selectedConnType === TabData.connType}
+                onSelect={() => setSelectedConnType(TabData.connType)}
                 disabled={TabData.disabled}
               >
                 <>
                   <TabData.icon />
-                  {TabData.displayName}
+                  {TabData.name}
                 </>
               </Tab>
             ))}
@@ -106,7 +103,7 @@ export const NewDevice = ({ open, onClose }: NewDeviceProps) => {
             backgroundColor="white"
             elevation={1}
             flexGrow={1}
-            display={selectedConnType === TabData.name ? "block" : "none"}
+            display={selectedConnType === TabData.connType ? "block" : "none"}
           >
             {!TabData.disabled && <TabData.element close={onClose} />}
           </Pane>

src/components/layout/page/SlideSheetTabbedContent.tsx

@@ -0,0 +1,78 @@
+import type React from "react";
+import { useState } from "react";
+
+import {
+  Heading,
+  IconComponent,
+  majorScale,
+  Pane,
+  Paragraph,
+  Tab,
+  Tablist,
+} from "evergreen-ui";
+import type { IconType } from "react-icons";
+
+export interface TabType {
+  name: string;
+  icon: IconComponent | IconType;
+  element: () => JSX.Element;
+  disabled?: boolean;
+}
+
+export interface SlideSheetTabbedContentProps {
+  heading: string;
+  description: string;
+  tabs: TabType[];
+}
+
+export const SlideSheetTabbedContent = ({
+  heading,
+  description,
+  tabs,
+}: SlideSheetTabbedContentProps): JSX.Element => {
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  return (
+    <>
+      <Pane zIndex={1} flexShrink={0} elevation={1} backgroundColor="white">
+        <Pane padding={16} borderBottom="muted">
+          <Heading size={600}>{heading}</Heading>
+          <Paragraph size={400} color="muted">
+            {description}
+          </Paragraph>
+        </Pane>
+        <Pane display="flex" padding={8}>
+          <Tablist>
+            {tabs.map((Entry, index) => (
+              <Tab
+                key={index}
+                userSelect="none"
+                disabled={Entry.disabled}
+                gap={5}
+                onSelect={() => setSelectedTab(index)}
+                isSelected={selectedTab === index}
+              >
+                <Entry.icon />
+                {Entry.name}
+              </Tab>
+            ))}
+          </Tablist>
+        </Pane>
+      </Pane>
+      <Pane display="flex" overflowY="scroll" background="tint1" padding={16}>
+        {tabs.map((Entry, index) => (
+          <Pane
+            key={index}
+            borderRadius={majorScale(1)}
+            backgroundColor="white"
+            elevation={1}
+            flexGrow={1}
+            display={selectedTab === index ? "block" : "none"}
+          >
+            {!Entry.disabled && <Entry.element />}
+          </Pane>
+        ))}
+      </Pane>
+    </>
+  );
+};

src/components/layout/page/TabbedContent.tsx

@@ -1,28 +1,27 @@
 import type React from "react";
+import { useState } from "react";
 
 import { IconComponent, majorScale, Pane, Tab, Tablist } from "evergreen-ui";
+import type { IconType } from "react-icons";
 
-export interface Tab {
-  key: number;
+export interface TabType {
   name: string;
-  icon: IconComponent;
+  icon: IconComponent | IconType;
   element: () => JSX.Element;
   disabled?: boolean;
 }
 
 export interface TabbedContentProps {
-  active: number;
-  setActive: (index: number) => void;
-  tabs: Tab[];
+  tabs: TabType[];
   actions?: (() => JSX.Element)[];
 }
 
 export const TabbedContent = ({
-  active,
-  setActive,
   tabs,
   actions,
 }: TabbedContentProps): JSX.Element => {
+  const [selectedTab, setSelectedTab] = useState(0);
+
   return (
     <Pane
       margin={majorScale(3)}
@@ -38,13 +37,14 @@ export const TabbedContent = ({
       <Pane borderBottom="muted" paddingBottom={majorScale(2)}>
         <Pane display="flex">
           <Tablist>
-            {tabs.map((Entry) => (
+            {tabs.map((Entry, index) => (
               <Tab
-                key={Entry.key}
+                key={index}
+                userSelect="none"
                 disabled={Entry.disabled}
                 gap={5}
-                onSelect={() => setActive(Entry.key)}
-                isSelected={active === Entry.key}
+                onSelect={() => setSelectedTab(index)}
+                isSelected={selectedTab === index}
               >
                 <Entry.icon />
                 {Entry.name}
@@ -59,14 +59,14 @@ export const TabbedContent = ({
           </Pane>
         </Pane>
       </Pane>
-      {tabs.map((Entry) => (
+      {tabs.map((Entry, index) => (
         <Pane
-          key={Entry.key}
-          display={active === Entry.key ? "flex" : "none"}
+          key={index}
+          display={selectedTab === index ? "flex" : "none"}
           flexDirection="column"
           flexGrow={1}
         >
-          <Entry.element />
+          {!Entry.disabled && <Entry.element />}
         </Pane>
       ))}
     </Pane>

src/pages/Channels/index.tsx

@@ -5,7 +5,7 @@ import { Button, LayerIcon, LayerOutlineIcon, Tooltip } from "evergreen-ui";
 import { IoQrCodeOutline } from "react-icons/io5";
 
 import { QRDialog } from "@app/components/Dialog/QRDialog.js";
-import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
+import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
@@ -14,11 +14,9 @@ import { Channel } from "./Channel.js";
 export const ChannelsPage = (): JSX.Element => {
   const { channels, config } = useDevice();
   const [QRDialogOpen, setQRDialogOpen] = useState(false);
-  const [activeChannel, setActiveChannel] = useState(0);
 
-  const tabs: Tab[] = channels.map((channel) => {
+  const tabs: TabType[] = channels.map((channel) => {
     return {
-      key: channel.config.index,
       name: channel.config.settings?.name.length
         ? channel.config.settings.name
         : channel.config.role === Protobuf.Channel_Role.PRIMARY
@@ -43,8 +41,6 @@ export const ChannelsPage = (): JSX.Element => {
         loraConfig={config.lora}
       />
       <TabbedContent
-        active={activeChannel}
-        setActive={setActiveChannel}
         tabs={tabs}
         actions={[
           () => (

src/pages/Config/AppConfig.tsx

@@ -0,0 +1,56 @@
+import type React from "react";
+import { useState } from "react";
+
+import { Pane, Tab, Tablist } from "evergreen-ui";
+
+import { ExternalNotification } from "@app/components/PageComponents/ModuleConfig/ExternalNotification.js";
+import { MQTT } from "@components/PageComponents/ModuleConfig/MQTT.js";
+import { Serial } from "@components/PageComponents/ModuleConfig/Serial.js";
+
+export const AppConfig = (): JSX.Element => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const configSections = [
+    {
+      label: "Interface",
+      element: MQTT,
+    },
+    {
+      label: "Logging",
+      element: Serial,
+    },
+    {
+      label: "Language",
+      element: ExternalNotification,
+    },
+  ];
+
+  return (
+    <Pane display="flex">
+      <Pane flexBasis={150} marginRight={24}>
+        <Tablist>
+          {configSections.map((Config, index) => (
+            <Tab
+              key={index}
+              direction="vertical"
+              isSelected={index === selectedIndex}
+              onSelect={() => setSelectedIndex(index)}
+            >
+              {Config.label}
+            </Tab>
+          ))}
+        </Tablist>
+      </Pane>
+      <Pane flex="1">
+        {configSections.map((Config, index) => (
+          <Pane
+            key={index}
+            display={index === selectedIndex ? "block" : "none"}
+          >
+            <Config.element />
+          </Pane>
+        ))}
+      </Pane>
+    </Pane>
+  );
+};

src/pages/Config/index.tsx

@@ -1,36 +1,31 @@
 import type React from "react";
-import { useState } from "react";
 
-import { CogIcon, CubeIcon } from "evergreen-ui";
+import { ApplicationsIcon, CogIcon, CubeIcon } from "evergreen-ui";
 
-import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
+import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
 
+import { AppConfig } from "./AppConfig.js";
 import { DeviceConfig } from "./DeviceConfig.js";
 import { ModuleConfig } from "./ModuleConfig.js";
 
 export const ConfigPage = (): JSX.Element => {
-  const [activeConfig, setActiveConfig] = useState(0);
-
-  const tabs: Tab[] = [
+  const tabs: TabType[] = [
     {
-      key: 0,
       name: "Device Config",
       icon: CogIcon,
       element: DeviceConfig,
     },
     {
-      key: 1,
       name: "Module Config",
       icon: CubeIcon,
       element: ModuleConfig,
     },
+    {
+      name: "App Config",
+      icon: ApplicationsIcon,
+      element: AppConfig,
+    },
   ];
 
-  return (
-    <TabbedContent
-      active={activeConfig}
-      setActive={setActiveConfig}
-      tabs={tabs}
-    />
-  );
+  return <TabbedContent tabs={tabs} />;
 };

src/pages/Extensions/FileBrowser.tsx

@@ -36,10 +36,7 @@ export const FileBrowser = (): JSX.Element => {
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href={`http://meshtastic.local/json/fs/browse/static/${file.name.replace(
-              "static/",
-              ""
-            )}`}
+            href={`http://meshtastic.local/${file.name.replace("static/", "")}`}
           >
             {file.name.replace("static/", "").replace(".gz", "")}
           </a>

src/pages/Extensions/Index.tsx

@@ -1,46 +1,35 @@
 import type React from "react";
-import { useState } from "react";
 
 import { DocumentIcon, GanttChartIcon, RainIcon } from "evergreen-ui";
 
 import { useDevice } from "@app/core/stores/deviceStore.js";
-import { Tab, TabbedContent } from "@components/layout/page/TabbedContent";
+import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
 import { FileBrowser } from "@pages/Extensions/FileBrowser";
 
 import { Environment } from "./Environment.js";
 
 export const ExtensionsPage = (): JSX.Element => {
-  const [activeExtension, setActiveExtension] = useState(0);
   const { hardware } = useDevice();
 
-  const tabs: Tab[] = [
+  const tabs: TabType[] = [
     {
-      key: 0,
       name: "File Browser",
       icon: DocumentIcon,
       element: FileBrowser,
       disabled: !hardware.hasWifi,
     },
     {
-      key: 1,
       name: "Range Test",
       icon: GanttChartIcon,
       element: FileBrowser,
       disabled: !hardware.hasWifi,
     },
     {
-      key: 2,
       name: "Environment",
       icon: RainIcon,
       element: Environment,
     },
   ];
 
-  return (
-    <TabbedContent
-      active={activeExtension}
-      setActive={setActiveExtension}
-      tabs={tabs}
-    />
-  );
+  return <TabbedContent tabs={tabs} />;
 };

src/pages/Messages/ChannelChat.tsx

@@ -28,10 +28,9 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
       currentMessage,
       undefined,
       true,
-      channel.config.index, //maybe channel.config.index--
+      channel.config.index,
       (id) => {
-        ackMessage(channel.config.index, id), console.log("Got Ack");
-
+        ackMessage(channel.config.index, id);
         return Promise.resolve();
       }
     );
@@ -44,7 +43,7 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
         {channel.messages.map((message, index) => (
           <Message
             key={index}
-            message={message.message.data}
+            messagePacket={message.message}
             ack={message.ack}
             rxTime={message.received}
             lastMsgSameUser={

src/pages/Messages/index.tsx

@@ -9,18 +9,20 @@ import {
   Tooltip,
 } from "evergreen-ui";
 
-import { Tab, TabbedContent } from "@components/layout/page/TabbedContent.js";
+import {
+  TabbedContent,
+  TabType,
+} from "@components/layout/page/TabbedContent.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Protobuf } from "@meshtastic/meshtasticjs";
 
 import { ChannelChat } from "./ChannelChat.js";
 
 export const MessagesPage = (): JSX.Element => {
-  const { channels, activeChat, setActiveChat, setActivePage } = useDevice();
+  const { channels, setActivePage } = useDevice();
 
-  const tabs: Tab[] = channels.map((channel) => {
+  const tabs: TabType[] = channels.map((channel) => {
     return {
-      key: channel.config.index,
       name: channel.config.settings?.name.length
         ? channel.config.settings?.name
         : channel.config.index === 0
@@ -35,8 +37,6 @@ export const MessagesPage = (): JSX.Element => {
   return (
     <Pane display="flex" flexDirection="column" width="100%">
       <TabbedContent
-        active={activeChat}
-        setActive={setActiveChat}
         tabs={tabs}
         actions={[
           () => (