fix keys

src/components/CommandPalette.tsx

@@ -361,10 +361,10 @@ export const CommandPalette = (): JSX.Element => {
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
-        {groups.map((group) => (
+        {groups.map((group, index) => (
-          <CommandGroup heading={group.label}>
+          <CommandGroup key={index} heading={group.label}>
-            {group.commands.map((command) => (
+            {group.commands.map((command, index) => (
-              <>
+              <div key={index}>
                 <CommandItem
                   onSelect={() => {
                     command.action && command.action();
@@ -375,14 +375,15 @@ export const CommandPalette = (): JSX.Element => {
                   {command.label}
                 </CommandItem>
                 {command.subItems &&
-                  command.subItems.map((subItem) => (
+                  command.subItems.map((subItem, index) => (
                     <SubItem
+                      key={index}
                       label={subItem.label}
                       icon={subItem.icon}
                       action={subItem.action}
                     />
                   ))}
-              </>
+              </div>
             ))}
           </CommandGroup>
         ))}

src/components/Dialog/NewDevice.tsx

@@ -55,13 +55,17 @@ export const NewDeviceDialog = ({
         <Tabs defaultValue="HTTP">
           <TabsList>
             {tabs.map((tab) => (
-              <TabsTrigger value={tab.label} disabled={tab.disabled}>
+              <TabsTrigger
+                key={tab.label}
+                value={tab.label}
+                disabled={tab.disabled}
+              >
                 {tab.label}
               </TabsTrigger>
             ))}
           </TabsList>
-          {tabs.map((tab) => (
+          {tabs.map((tab, index) => (
-            <TabsContent value={tab.label}>
+            <TabsContent key={index} value={tab.label}>
               {tab.disabled ? (
                 <p className="text-sm text-slate-500 dark:text-slate-400">
                   {tab.disabledMessage}

src/components/DynamicForm.tsx

@@ -92,14 +92,17 @@ export function DynamicForm<T extends FieldValues>({
       className="space-y-8 divide-y divide-gray-200"
       onChange={handleSubmit(onSubmit)}
     >
-      {fieldGroups.map((fieldGroup) => (
+      {fieldGroups.map((fieldGroup, index) => (
-        <div className="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+        <div
+          key={index}
+          className="space-y-8 divide-y divide-gray-200 sm:space-y-5"
+        >
           <div>
             <H4 className="font-medium">{fieldGroup.label}</H4>
             <Subtle>{fieldGroup.description}</Subtle>
           </div>
 
-          {fieldGroup.fields.map((field) => {
+          {fieldGroup.fields.map((field, index) => {
             const fieldWrapperData: FieldWrapperProps = {
               label: field.label,
               description: field.description,
@@ -109,7 +112,7 @@ export function DynamicForm<T extends FieldValues>({
             switch (field.type) {
               case "text":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Input
                       disabled={fieldWrapperData.disabled}
                       {...register(field.name)}
@@ -118,7 +121,7 @@ export function DynamicForm<T extends FieldValues>({
                 );
               case "number":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Input
                       type="number"
                       disabled={fieldWrapperData.disabled}
@@ -128,7 +131,7 @@ export function DynamicForm<T extends FieldValues>({
                 );
               case "password":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Input
                       type="password"
                       disabled={fieldWrapperData.disabled}
@@ -138,7 +141,7 @@ export function DynamicForm<T extends FieldValues>({
                 );
               case "toggle":
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Controller
                       name={field.name}
                       control={control}
@@ -160,7 +163,7 @@ export function DynamicForm<T extends FieldValues>({
                     )
                   : [];
                 return (
-                  <FieldWrapper {...fieldWrapperData}>
+                  <FieldWrapper key={index} {...fieldWrapperData}>
                     <Controller
                       name={field.name}
                       control={control}
@@ -198,7 +201,11 @@ export function DynamicForm<T extends FieldValues>({
                   </FieldWrapper>
                 );
               case "multiSelect":
-                return <FieldWrapper {...fieldWrapperData}>tmp</FieldWrapper>;
+                return (
+                  <FieldWrapper key={index} {...fieldWrapperData}>
+                    tmp
+                  </FieldWrapper>
+                );
             }
           })}
         </div>

src/components/Topbar.tsx → src/components/PageLayout.tsx

@@ -24,8 +24,9 @@ export const PageLayout = ({
           <div className="flex w-full items-center">
             <span className="w-full text-lg font-medium">{title}</span>
             <div className="flex justify-end space-x-4">
-              {actions?.map((action) => (
+              {actions?.map((action, index) => (
                 <button
+                  key={index}
                   className="transition-all hover:text-accent"
                   onClick={action.onClick}
                 >

src/components/Sidebar.tsx

@@ -76,9 +76,9 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
       </div>
 
       <SidebarSection label="Navigation">
-        {pages.map((link) => (
+        {pages.map((link, index) => (
           <SidebarButton
-            key={link.page}
+            key={index}
             label={link.name}
             icon={link.icon}
             onClick={() => {

src/pages/Channels.tsx

@@ -1,5 +1,5 @@
 import { Sidebar } from "@app/components/Sidebar.js";
-import { PageLayout } from "@app/components/Topbar.js";
+import { PageLayout } from "@app/components/PageLayout.js";
 import { cn } from "@app/core/utils/cn.js";
 import { Channel } from "@components/PageComponents/Channel.js";
 import { useDevice } from "@core/stores/deviceStore.js";

src/pages/Config/index.tsx

@@ -2,11 +2,10 @@ import { Sidebar } from "@app/components/Sidebar.js";
 import { SettingsIcon, BoxesIcon, SaveIcon } from "lucide-react";
 import { DeviceConfig } from "@pages/Config/DeviceConfig.js";
 import { ModuleConfig } from "@pages/Config/ModuleConfig.js";
-import { PageLayout } from "@app/components/Topbar.js";
+import { PageLayout } from "@app/components/PageLayout.js";
 import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";
 import { useState } from "react";
 import { useDevice } from "@app/core/stores/deviceStore.js";
-import { Button } from "@app/components/UI/Button.js";
 import { SidebarButton } from "@app/components/UI/Sidebar/sidebarButton.js";
 
 export const ConfigPage = (): JSX.Element => {

src/pages/Map.tsx

@@ -4,14 +4,12 @@ import { useAppStore } from "@core/stores/appStore.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Sidebar } from "@app/components/Sidebar.js";
-import { PageLayout } from "@app/components/Topbar.js";
+import { PageLayout } from "@app/components/PageLayout.js";
 import {
   ZoomInIcon,
   ZoomOutIcon,
   BoxSelectIcon,
-  MapPinIcon,
+  MapPinIcon
-  EditIcon,
-  PlusIcon
 } from "lucide-react";
 import { bbox, lineString } from "@turf/turf";
 import { SidebarSection } from "@app/components/UI/Sidebar/SidebarSection.js";

src/pages/Messages.tsx

@@ -1,5 +1,5 @@
 import { Sidebar } from "@app/components/Sidebar.js";
-import { PageLayout } from "@app/components/Topbar.js";
+import { PageLayout } from "@app/components/PageLayout.js";
 import { ChannelChat } from "@components/PageComponents/Messages/ChannelChat.js";
 import { useDevice } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";