Fixes for tab underline behaviour. Fix for overview initialisation via URL. Fix for clearing the store when navigating away from the overview tab

packages/bbui/src/Tabs/Tab.svelte

@@ -6,7 +6,7 @@
 
   const dispatch = createEventDispatcher()
   let selected = getContext("tab")
-  let tab
+  let tab_internal
   let tabInfo
 
   const setTabInfo = () => {
@@ -16,7 +16,7 @@
     // We just need to get this off the main thread to fix this, by using
     // a 0ms timeout.
     setTimeout(() => {
-      tabInfo = tab?.getBoundingClientRect()
+      tabInfo = tab_internal?.getBoundingClientRect()
       if (tabInfo && $selected.title === title) {
         $selected.info = tabInfo
       }
@@ -27,14 +27,30 @@
     setTabInfo()
   })
 
+  //Ensure that the underline is in the correct location
+  $: {
+    if ($selected.title === title && tab_internal) {
+      if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
+        $selected = {
+          ...$selected,
+          info: tab_internal.getBoundingClientRect(),
+        }
+      }
+    }
+  }
+
   const onClick = () => {
-    $selected = { ...$selected, title, info: tab.getBoundingClientRect() }
+    $selected = {
+      ...$selected,
+      title,
+      info: tab_internal.getBoundingClientRect(),
+    }
     dispatch("click")
   }
 </script>
 
 <div
-  bind:this={tab}
+  bind:this={tab_internal}
   on:click={onClick}
   class:is-selected={$selected.title === title}
   class="spectrum-Tabs-item"

packages/builder/src/components/common/AppLockModal.svelte

@@ -108,7 +108,7 @@
             >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
           >
         </Button>
-        {#if lockedByYou && lockExpiry > 0}
+        {#if lockedByYou}
           <Button
             secondary
             disabled={processing}

packages/builder/src/components/common/EditableIcon.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import ChooseIconModal from "components/start/ChooseIconModal.svelte"
+
+  export let name
+  export let size
+  export let app
+
+  let iconModal
+</script>
+
+<div class="editable-icon">
+  <div
+    class="edit-hover"
+    on:click={() => {
+      iconModal.show()
+    }}
+  >
+    <Icon name={"Edit"} size={"L"} />
+  </div>
+  <div class="app-icon">
+    <Icon {name} {size} />
+  </div>
+</div>
+<ChooseIconModal {app} bind:this={iconModal} />
+
+<style>
+  .editable-icon:hover .app-icon {
+    opacity: 0;
+  }
+  .editable-icon {
+    position: relative;
+  }
+  .editable-icon:hover .edit-hover {
+    opacity: 1;
+  }
+  .edit-hover {
+    color: var(--spectrum-global-color-gray-600);
+    cursor: pointer;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    opacity: 0;
+    /* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
+  }
+</style>

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -9,7 +9,6 @@
     Tab,
     Tabs,
     notifications,
-    Icon,
     ProgressCircle,
   } from "@budibase/bbui"
   import OverviewTab from "../_components/OverviewTab.svelte"
@@ -19,8 +18,10 @@
   import { apps, auth } from "stores/portal"
   import analytics, { Events, EventSource } from "analytics"
   import { AppStatus } from "constants"
-  import AppLockModal from "../../../../../components/common/AppLockModal.svelte"
+  import AppLockModal from "components/common/AppLockModal.svelte"
+  import EditableIcon from "components/common/EditableIcon.svelte"
   import { checkIncomingDeploymentStatus } from "components/deploy/utils"
+  import { onDestroy, onMount } from "svelte"
 
   export let application
 
@@ -55,6 +56,10 @@
   $: tabs = ["Overview", "Automation History", "Backups", "Settings"]
   $: selectedTab = "Overview"
 
+  const backToAppList = () => {
+    $goto(`../../../portal/`)
+  }
+
   const handleTabChange = tabKey => {
     if (tabKey === selectedTab) {
       return
@@ -69,8 +74,6 @@
     try {
       const pkg = await API.fetchAppPackage(application)
       await store.actions.initialise(pkg)
-      await apps.load()
-      deployments = await fetchDeployments()
       return pkg
     } catch (error) {
       notifications.error(`Error initialising app: ${error?.message}`)
@@ -110,26 +113,34 @@
 
   const editApp = app => {
     if (lockedBy && !lockedByYou) {
-      notifications.warn(
+      notifications.warning(
         `App locked by ${lockIdentifer}. Please allow lock to expire or have them unlock this app.`
       )
       return
     }
     $goto(`../../../app/${app.devId}`)
   }
+
+  onDestroy(() => {
+    store.actions.reset()
+  })
+
+  onMount(async () => {
+    try {
+      if (!apps.length) {
+        await apps.load()
+      }
+      deployments = await fetchDeployments()
+    } catch (error) {
+      notifications.error("Error initialising app overview")
+    }
+  })
 </script>
 
 <Page wide>
   <Layout noPadding gap="XL">
     <span>
-      <Button
-        quiet
-        secondary
-        icon={"ChevronLeft"}
-        on:click={() => {
-          $goto("../../")
-        }}
-      >
+      <Button quiet secondary icon={"ChevronLeft"} on:click={backToAppList}>
         Back
       </Button>
     </span>
@@ -145,7 +156,11 @@
               class="app-icon"
               style="color: {selectedApp?.icon?.color || ''}"
             >
-              <Icon size="XL" name={selectedApp?.icon?.name || "Apps"} />
+              <EditableIcon
+                app={selectedApp}
+                size="XL"
+                name={selectedApp?.icon?.name || "Apps"}
+              />
             </div>
           </div>
           <div class="app-details">
@@ -167,6 +182,7 @@
               size="M"
               cta
               icon="Edit"
+              disabled={lockedBy && !lockedByYou}
               on:click={() => {
                 editApp(selectedApp)
               }}