From d0f9694d24c00e60848edb6078a7e4afa8224219 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 21 Aug 2023 08:33:53 +0100
Subject: [PATCH] linting

---
 .../src/builderStore/store/frontend.js        |   8 +-
 .../[screenId]/_components/AppPreview.svelte  |   7 +-
 .../LeftPanel/Components/ComponentTree.svelte |   2 +-
 .../_components/Navigation/index.svelte       | 190 +++++++++---------
 4 files changed, 105 insertions(+), 102 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 76e38a8b94..164fda4440 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -1000,10 +1000,10 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (componentId === 'screen') {
+        if (componentId === "screen") {
           return null
         }
-        if (componentId === 'navigation') {
+        if (componentId === "navigation") {
           return "screen"
         }
         if (parent._id === screen.props._id && index === 0) {
@@ -1037,8 +1037,8 @@ export const getFrontendStore = () => {
         const parent = findComponentParent(screen.props, componentId)
         const index = parent?._children.findIndex(x => x._id === componentId)
 
-        if (state.selectedComponentId === 'screen') {
-          return 'navigation'
+        if (state.selectedComponentId === "screen") {
+          return "navigation"
         }
 
         // If we have children, select first child
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index a7c2003741..29c7dbe060 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -1,7 +1,12 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import { store, selectedComponent, selectedScreen, currentAsset } from "builderStore"
+  import {
+    store,
+    selectedComponent,
+    selectedScreen,
+    currentAsset,
+  } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
index 636d69192a..0e23f82946 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/LeftPanel/Components/ComponentTree.svelte
@@ -107,7 +107,7 @@
       id={`component-${component._id}`}
     >
       <NavItem
-          compact
+        compact
         scrollable
         draggable
         on:dragend={dndStore.actions.reset}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
index 6a70b38697..97622098cd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/Navigation/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import LinksEditor from './LinksEditor.svelte'
+  import LinksEditor from "./LinksEditor.svelte"
   import { get } from "svelte/store"
   import Panel from "components/design/Panel.svelte"
   import {
@@ -7,7 +7,6 @@
     Toggle,
     Body,
     Icon,
-    Button,
     ColorPicker,
     Input,
     Label,
@@ -58,112 +57,111 @@
     </div>
   </div>
 
-
-
   {#if $selectedScreen.showNavigation}
-  <div class="divider" />
-  <div class="customizeSection">
-    <div class="subheading">
-      <Detail>Customize</Detail>
-    </div>
-    <div class="info">
-      <div class="infoHeader">
-        <Icon name="InfoOutline" />
-        <Body size="S">These settings apply to all screens</Body>
+    <div class="divider" />
+    <div class="customizeSection">
+      <div class="subheading">
+        <Detail>Customize</Detail>
       </div>
-    </div>
-    <div class="configureLinks">
-      <LinksEditor />
-    </div>
-    <div class="controls">
-      <div class="label">
-        <Label size="M">Position</Label>
+      <div class="info">
+        <div class="infoHeader">
+          <Icon name="InfoOutline" />
+          <Body size="S">These settings apply to all screens</Body>
+        </div>
       </div>
-      <ActionGroup quiet>
-        <ActionButton
-          selected={$store.navigation.navigation === "Top"}
-          quiet={$store.navigation.navigation !== "Top"}
-          icon="PaddingTop"
-          on:click={() => update("navigation", "Top")}
-        />
-        <ActionButton
-          selected={$store.navigation.navigation === "Left"}
-          quiet={$store.navigation.navigation !== "Left"}
-          icon="PaddingLeft"
-          on:click={() => update("navigation", "Left")}
-        />
-      </ActionGroup>
-
-      {#if $store.navigation.navigation === "Top"}
+      <div class="configureLinks">
+        <LinksEditor />
+      </div>
+      <div class="controls">
         <div class="label">
-          <Label size="M">Sticky header</Label>
+          <Label size="M">Position</Label>
+        </div>
+        <ActionGroup quiet>
+          <ActionButton
+            selected={$store.navigation.navigation === "Top"}
+            quiet={$store.navigation.navigation !== "Top"}
+            icon="PaddingTop"
+            on:click={() => update("navigation", "Top")}
+          />
+          <ActionButton
+            selected={$store.navigation.navigation === "Left"}
+            quiet={$store.navigation.navigation !== "Left"}
+            icon="PaddingLeft"
+            on:click={() => update("navigation", "Left")}
+          />
+        </ActionGroup>
+
+        {#if $store.navigation.navigation === "Top"}
+          <div class="label">
+            <Label size="M">Sticky header</Label>
+          </div>
+          <Checkbox
+            value={$store.navigation.sticky}
+            on:change={e => update("sticky", e.detail)}
+          />
+          <div class="label">
+            <Label size="M">Width</Label>
+          </div>
+          <Select
+            options={["Max", "Large", "Medium", "Small"]}
+            plaveholder={null}
+            value={$store.navigation.navWidth}
+            on:change={e => update("navWidth", e.detail)}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show logo</Label>
         </div>
         <Checkbox
-          value={$store.navigation.sticky}
-          on:change={e => update("sticky", e.detail)}
+          value={!$store.navigation.hideLogo}
+          on:change={e => update("hideLogo", !e.detail)}
+        />
+        {#if !$store.navigation.hideLogo}
+          <div class="label">
+            <Label size="M">Logo URL</Label>
+          </div>
+          <Input
+            value={$store.navigation.logoUrl}
+            on:change={e => update("logoUrl", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label size="M">Show title</Label>
+        </div>
+        <Checkbox
+          value={!$store.navigation.hideTitle}
+          on:change={e => update("hideTitle", !e.detail)}
+        />
+        {#if !$store.navigation.hideTitle}
+          <div class="label">
+            <Label size="M">Title</Label>
+          </div>
+          <Input
+            value={$store.navigation.title}
+            on:change={e => update("title", e.detail)}
+            updateOnChange={false}
+          />
+        {/if}
+        <div class="label">
+          <Label>Background</Label>
+        </div>
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navBackground ||
+            DefaultAppTheme.navBackground}
+          on:change={e => update("navBackground", e.detail)}
         />
         <div class="label">
-          <Label size="M">Width</Label>
+          <Label>Text</Label>
         </div>
-        <Select
-          options={["Max", "Large", "Medium", "Small"]}
-          plaveholder={null}
-          value={$store.navigation.navWidth}
-          on:change={e => update("navWidth", e.detail)}
+        <ColorPicker
+          spectrumTheme={$store.theme}
+          value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
+          on:change={e => update("navTextColor", e.detail)}
         />
-      {/if}
-      <div class="label">
-        <Label size="M">Show logo</Label>
       </div>
-      <Checkbox
-        value={!$store.navigation.hideLogo}
-        on:change={e => update("hideLogo", !e.detail)}
-      />
-      {#if !$store.navigation.hideLogo}
-        <div class="label">
-          <Label size="M">Logo URL</Label>
-        </div>
-        <Input
-          value={$store.navigation.logoUrl}
-          on:change={e => update("logoUrl", e.detail)}
-          updateOnChange={false}
-        />
-      {/if}
-      <div class="label">
-        <Label size="M">Show title</Label>
-      </div>
-      <Checkbox
-        value={!$store.navigation.hideTitle}
-        on:change={e => update("hideTitle", !e.detail)}
-      />
-      {#if !$store.navigation.hideTitle}
-        <div class="label">
-          <Label size="M">Title</Label>
-        </div>
-        <Input
-          value={$store.navigation.title}
-          on:change={e => update("title", e.detail)}
-          updateOnChange={false}
-        />
-      {/if}
-      <div class="label">
-        <Label>Background</Label>
-      </div>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
-        on:change={e => update("navBackground", e.detail)}
-      />
-      <div class="label">
-        <Label>Text</Label>
-      </div>
-      <ColorPicker
-        spectrumTheme={$store.theme}
-        value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
-        on:change={e => update("navTextColor", e.detail)}
-      />
     </div>
-  </div>
   {/if}
 </Panel>