Update autoscreen link creation and deletion to use new app level navigation settings

packages/builder/src/builderStore/store/frontend.js

@@ -1,6 +1,11 @@
 import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { currentAsset, mainLayout, selectedComponent } from "builderStore"
+import {
+  currentAsset,
+  mainLayout,
+  selectedComponent,
+  selectedScreen,
+} from "builderStore"
 import {
   datasources,
   integrations,
@@ -617,35 +622,38 @@ export const getFrontendStore = () => {
     },
     links: {
       save: async (url, title) => {
-        const layout = get(mainLayout)
+        const navigation = get(store).navigation
-        if (!layout) {
+        let links = [...navigation?.links]
+
+        // Skip if we have an identical link
+        if (links.find(link => link.url === url && link.text === title)) {
           return
         }
 
-        // Add link setting to main layout
+        links.push({
-        if (!layout.props.links) {
-          layout.props.links = []
-        }
-        layout.props.links.push({
           text: title,
           url,
         })
-
+        await store.actions.navigation.save({
-        await store.actions.layouts.save(layout)
+          ...navigation,
+          links: [...links],
+        })
       },
       delete: async urls => {
-        const layout = get(mainLayout)
+        const navigation = get(store).navigation
-        if (!layout?.props.links?.length) {
+        let links = navigation?.links
+        if (!links?.length) {
           return
         }
 
         // Filter out the URLs to delete
         urls = Array.isArray(urls) ? urls : [urls]
-        layout.props.links = layout.props.links.filter(
+        links = links.filter(link => !urls.includes(link.url))
-          link => !urls.includes(link.url)
-        )
 
-        await store.actions.layouts.save(layout)
+        await store.actions.navigation.save({
+          ...navigation,
+          links,
+        })
       },
     },
     settings: {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte

@@ -10,6 +10,7 @@
   import getTemplates from "builderStore/store/screenTemplates"
   import { tables } from "stores/backend"
   import { Roles } from "constants/backend"
+  import { capitalise } from "helpers"
 
   let pendingScreen
 
@@ -70,7 +71,7 @@
         if (screen.props._instanceName.endsWith("List")) {
           await store.actions.links.save(
             screen.routing.route,
-            screen.routing.route.split("/")[1]
+            capitalise(screen.routing.route.split("/")[1])
           )
         }
       }