Add config migration process

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -62,7 +62,7 @@ export const EditAppModal = ({
         },
       },
       behaviour: {
-        onClickUrl: (url: string) => {
+        externalUrl: (url: string) => {
           if (url === undefined || url.length < 1) {
             return null;
           }
@@ -158,7 +158,7 @@ export const EditAppModal = ({
                 {t('tabs.general')}
               </Tabs.Tab>
               <Tabs.Tab
-                rightSection={<ValidationErrorIndicator keys={['behaviour.onClickUrl']} />}
+                rightSection={<ValidationErrorIndicator keys={['behaviour.externalUrl']} />}
                 icon={<IconClick size={14} />}
                 value="behaviour"
               >

src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx

@@ -35,7 +35,7 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         required
         {...form.getInputProps('url')}
         onChange={(e) => {
-          form.setFieldValue('behaviour.onClickUrl', e.target.value);
+          form.setFieldValue('behaviour.externalUrl', e.target.value);
           form.setFieldValue('url', e.target.value);
         }}
       />
@@ -46,7 +46,7 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
         placeholder="https://homarr.mywebsite.com/"
         variant="default"
         mb="md"
-        {...form.getInputProps('behaviour.onClickUrl')}
+        {...form.getInputProps('behaviour.externalUrl')}
       />
     </Tabs.Panel>
   );

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -43,7 +43,7 @@ export const AvailableElementTypes = ({
                   },
                   behaviour: {
                     isOpeningNewTab: true,
-                    onClickUrl: '',
+                    externalUrl: '',
                   },
                   area: {
                     type: 'sidebar',

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -18,45 +18,47 @@ interface WrapperContentProps {
   };
 }
 
-export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) => (
-  <>
-    {apps?.map((app) => {
-      const { component: TileComponent, ...tile } = Tiles.app;
-      return (
-        <GridstackTileWrapper
-          id={app.id}
-          type="app"
-          key={app.id}
-          itemRef={refs.items.current[app.id]}
-          {...tile}
-          {...app.shape.location}
-          {...app.shape.size}
-        >
-          <TileComponent className="grid-stack-item-content" app={app} />
-        </GridstackTileWrapper>
-      );
-    })}
-    {widgets.map((widget) => {
-      const definition = Widgets[widget.id as keyof typeof Widgets] as
-        | IWidgetDefinition
-        | undefined;
-      if (!definition) return null;
+export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
+  return (
+    <>
+      {apps?.map((app) => {
+        const { component: TileComponent, ...tile } = Tiles.app;
+        return (
+          <GridstackTileWrapper
+            id={app.id}
+            type="app"
+            key={app.id}
+            itemRef={refs.items.current[app.id]}
+            {...tile}
+            {...app.shape.location}
+            {...app.shape.size}
+          >
+            <TileComponent className="grid-stack-item-content" app={app} />
+          </GridstackTileWrapper>
+        );
+      })}
+      {widgets.map((widget) => {
+        const definition = Widgets[widget.id as keyof typeof Widgets] as
+          | IWidgetDefinition
+          | undefined;
+        if (!definition) return null;
 
-      return (
-        <GridstackTileWrapper
-          type="widget"
-          key={widget.id}
-          itemRef={refs.items.current[widget.id]}
-          id={definition.id}
-          {...definition.gridstack}
-          {...widget.shape.location}
-          {...widget.shape.size}
-        >
-          <WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
-            <definition.component className="grid-stack-item-content" widget={widget} />
-          </WidgetWrapper>
-        </GridstackTileWrapper>
-      );
-    })}
-  </>
-);
+        return (
+          <GridstackTileWrapper
+            type="widget"
+            key={widget.id}
+            itemRef={refs.items.current[widget.id]}
+            id={definition.id}
+            {...definition.gridstack}
+            {...widget.shape.location}
+            {...widget.shape.size}
+          >
+            <WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
+              <definition.component className="grid-stack-item-content" widget={widget} />
+            </WidgetWrapper>
+          </GridstackTileWrapper>
+        );
+      })}
+    </>
+  );
+}

src/components/layout/header/Search.tsx

@@ -119,7 +119,7 @@ export function Search() {
     label: app.name,
     value: app.name,
     icon: app.appearance.iconUrl,
-    url: app.behaviour.onClickUrl ?? app.url,
+    url: app.behaviour.externalUrl ?? app.url,
   }));
   const AutoCompleteItem = forwardRef<HTMLDivElement, any>(
     ({ label, value, icon, url, ...others }: any, ref) => (