Make screens searchable and make routes collapsible

packages/builder/src/builderStore/index.js

@@ -2,7 +2,6 @@ import { getFrontendStore } from "./store/frontend"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation"
 import { getHostingStore } from "./store/hosting"
-
 import { getThemeStore } from "./store/theme"
 import { derived, writable } from "svelte/store"
 import analytics from "analytics"
@@ -66,3 +65,5 @@ export const initialise = async () => {
     console.log(err)
   }
 }
+
+export const screenSearchString = writable(null)

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte

@@ -1,8 +1,11 @@
 <script>
-  import { goto } from "@sveltech/routify"
-  import { store, selectedComponent, currentAsset } from "builderStore"
+  import {
+    store,
+    selectedComponent,
+    currentAsset,
+    screenSearchString,
+  } from "builderStore"
   import instantiateStore from "./dragDropStore"
-
   import ComponentTree from "./ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
@@ -21,38 +24,67 @@
   export let indent
   export let border
 
+  let routeManuallyOpened = false
   $: selectedScreen = $currentAsset
+  $: allScreens = getAllScreens(route)
+  $: filteredScreens = getFilteredScreens(allScreens, $screenSearchString)
+  $: hasSearchMatch = $screenSearchString && filteredScreens.length > 0
+  $: noSearchMatch = $screenSearchString && !filteredScreens.length
+  $: routeSelected = route.subpaths[selectedScreen.routing.route] !== undefined
+  $: routeOpened = routeManuallyOpened || routeSelected || hasSearchMatch
 
   const changeScreen = screenId => {
     store.actions.screens.select(screenId)
+
+    // Reset manually opened flag every time a new screen is selected
+    routeManuallyOpened = false
+  }
+
+  const getAllScreens = route => {
+    let screens = []
+    Object.entries(route.subpaths).forEach(([route, subpath]) => {
+      Object.entries(subpath.screens).forEach(([role, id]) => {
+        screens.push({ id, route, role })
+      })
+    })
+    return screens
+  }
+
+  const getFilteredScreens = (screens, searchString) => {
+    return screens.filter(
+      screen => !searchString || screen.route.includes(searchString)
+    )
   }
 </script>
 
-<NavItem
-  icon="ri-folder-line"
-  text={path}
-  opened={true}
-  {border}
-  withArrow={route.subpaths} />
-
-{#each Object.entries(route.subpaths) as [url, subpath]}
-  {#each Object.entries(subpath.screens) as [role, screenId]}
-    <NavItem
-      icon="ri-artboard-2-line"
-      indentLevel={indent || 1}
-      selected={$store.selectedScreenId === screenId}
-      opened={$store.selectedScreenId === screenId}
-      text={ROUTE_NAME_MAP[url]?.[role] || url}
-      withArrow={route.subpaths}
-      on:click={() => changeScreen(screenId)}>
-      <ScreenDropdownMenu {screenId} />
-    </NavItem>
-    {#if selectedScreen?._id === screenId}
-      <ComponentTree
-        level={1}
-        components={selectedScreen.props._children}
-        currentComponent={$selectedComponent}
-        {dragDropStore} />
-    {/if}
-  {/each}
-{/each}
+{#if !noSearchMatch}
+  <NavItem
+    icon="ri-folder-line"
+    text={path}
+    on:click={() => (routeManuallyOpened = !routeManuallyOpened)}
+    opened={routeOpened}
+    {border}
+    withArrow={route.subpaths} />
+
+  {#if routeOpened}
+    {#each filteredScreens as screen (screen.id)}
+      <NavItem
+        icon="ri-artboard-2-line"
+        indentLevel={indent || 1}
+        selected={$store.selectedScreenId === screen.id}
+        opened={$store.selectedScreenId === screen.id}
+        text={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
+        withArrow={route.subpaths}
+        on:click={() => changeScreen(screen.id)}>
+        <ScreenDropdownMenu screenId={screen.id} />
+      </NavItem>
+      {#if selectedScreen?._id === screen.id}
+        <ComponentTree
+          level={1}
+          components={selectedScreen.props._children}
+          currentComponent={$selectedComponent}
+          {dragDropStore} />
+      {/if}
+    {/each}
+  {/if}
+{/if}

packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte

@@ -56,7 +56,7 @@
 </script>
 
 <div class="root">
-  {#each paths as path, idx}
+  {#each paths as path, idx (path)}
     <PathTree border={idx > 0} {path} route={routes[path]} />
   {/each}
 

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -1,19 +1,19 @@
 <script>
   import { onMount } from "svelte"
-  import { goto, params, url } from "@sveltech/routify"
+  import { goto, params } from "@sveltech/routify"
   import {
     store,
     allScreens,
-    currentAsset,
     backendUiStore,
     selectedAccessRole,
+    screenSearchString,
   } from "builderStore"
   import { FrontendTypes } from "constants"
   import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
   import Layout from "components/design/NavigationPanel/Layout.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Switcher, Select } from "@budibase/bbui"
+  import { Modal, Switcher, Select, Input } from "@budibase/bbui"
 
   const tabs = [
     {
@@ -85,6 +85,10 @@
             <option value={role._id}>{role.name}</option>
           {/each}
         </Select>
+        <Input
+          extraThin
+          label="Search Screens"
+          bind:value={$screenSearchString} />
       </div>
       <div class="nav-items-container">
         <ComponentNavigationTree />
@@ -127,6 +131,11 @@
   }
 
   .role-select {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
     margin-bottom: var(--spacing-m);
+    gap: var(--spacing-m);
   }
 </style>