Feat: Rework config linking

src/lib/components/tree/ConfigTree.svelte

@@ -15,19 +15,16 @@
     compatible_config_types,
     selectClosestMatch,
   } from "./../../../routes/EditorLayout";
-  import { type Config } from "../../schemas";
+  import type { Config } from "../../schemas";
   import { Tree } from "./ConfigTree";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, tick } from "svelte";
   import { parentIframeCommunication } from "../../utils";
   import { dragTarget } from "../../actions/drag.action";
   import ProfileCloudTreeItem from "./ProfileCloudTreeItem.svelte";
-  import {
-    type AbstractFolderData,
-    AbstractTreeNode,
-    TreeItemType,
-    type ContextMenuOptions,
-    type TreeProperties,
-  } from "./TreeNode.svelte";
+  import { TreeItemType } from "./TreeNode.svelte";
+  import type { AbstractFolderData, AbstractTreeNode } from "./TreeNode.svelte";
+  import type { TreeProperties } from "./TreeComponent.svelte";
+  import type { ContextMenuOptions } from "@intechstudio/grid-uikit";
 
   import TreeFolder from "./TreeFolder.svelte";
 
@@ -36,8 +33,11 @@
   const dispatch = createEventDispatcher();
 
   export let configs: Config[];
+  export let scrollToSelectionTrigger = 0;
 
   let treeProps: TreeProperties;
+  let treeRoot: Tree.Node;
+  let filteredConfigs: Config[] = [];
 
   export function debounced<T>(store: Writable<T>, delay = 300) {
     let timeout: ReturnType<typeof setTimeout>;
@@ -56,14 +56,31 @@
   export const debounced_filter_value = debounced(filter_value, 300);
 
   $: {
-    treeProps = buildProps(
+    const tree = buildTree(
       configs,
       $debounced_filter_value,
       $sort_key,
       $show_supported_only,
       $hide_community_configs,
       $compatible_config_types,
     );
+    treeRoot = tree.root;
+    filteredConfigs = tree.filteredConfigs;
+  }
+
+  $: if (treeRoot) {
+    selectClosestMatch($selected_config, filteredConfigs);
+    const selected = get(selected_config);
+    treeProps = {
+      root: treeRoot,
+      selected: selected?.id,
+      expanded: treeRoot.getIncludingNodes(selected?.id),
+      scrollBehaviour: {
+        scrollToIndex: scrollToSelectionTrigger > 0,
+        scrollTrigger: scrollToSelectionTrigger,
+        easing: "smooth",
+      },
+    };
   }
 
   function filterNode(node: Tree.Node, filter: FilterValue, level = 0) {
@@ -112,14 +129,14 @@
     });
   }
 
-  function buildProps(
+  function buildTree(
     configs: Config[],
     filter: FilterValue,
     key: Sort.Key,
     supported: boolean,
     community: boolean,
     compatibileTypes: string[],
-  ): TreeProperties {
+  ) {
     const filteredConfigs = configs.filter((e) => matches(e, filter));
     const root = Tree.create(configs, {
       showSupportedOnly: supported,
@@ -129,14 +146,7 @@
 
     filterNode(root, filter);
 
-    selectClosestMatch($selected_config, filteredConfigs);
-
-    return {
-      root: root,
-      selected: $selected_config?.id,
-      expanded: root.getIncludingNodes($selected_config?.id),
-      scrollBehaviour: { scrollToIndex: true, easing: "instant" },
-    };
+    return { root, filteredConfigs };
   }
 
   function handleDeleteVirtualDirectory(title: string) {

src/lib/components/tree/ConfigTree.ts

@@ -4,7 +4,7 @@ import {
   config_manager,
   compatible_config_types,
 } from "./../../../routes/EditorLayout";
-import { type Config } from "../../schemas";
+import type { Config } from "../../schemas";
 import { filter_value } from "../../../routes/Filter";
 import { Sort } from "../../../routes/Sorter";
 
@@ -22,6 +22,7 @@ import { ElementType, grid, ModuleType } from "@intechstudio/grid-protocol";
 export namespace Tree {
   export interface Options {
     showSupportedOnly?: boolean;
+    hideCommunityConfigs?: boolean;
     compatibileTypes: string[];
   }
 
@@ -287,7 +288,7 @@ export namespace Tree {
               e.owner ?? "",
             );
 
-          const cct = get(compatible_config_types);
+          const cct = get(compatible_config_types) as string[];
 
           return (
             !isMyConfig &&
@@ -311,7 +312,7 @@ export namespace Tree {
           const isOfficialConfig =
             configuration.WORKFLOW_CONFIG_PROFILE_IDS.includes(e.owner ?? "");
 
-          const cct = get(compatible_config_types);
+          const cct = get(compatible_config_types) as string[];
 
           return (
             !isMyConfig &&
@@ -336,7 +337,7 @@ export namespace Tree {
             configuration.RECOMMENDED_CONFIG_PROFILE_IDS.includes(
               e.owner ?? "",
             );
-          const cct = get(compatible_config_types);
+          const cct = get(compatible_config_types) as string[];
           return (
             !isMyConfig &&
             !isOfficialConfig &&
@@ -356,7 +357,7 @@ export namespace Tree {
         .filter((e: Config) => {
           const isMyConfig =
             e.syncStatus == "local" || e.owner === cm?.getCurrentOwnerId();
-          const cct = get(compatible_config_types);
+          const cct = get(compatible_config_types) as string[];
           return !isMyConfig && (!showSupportedOnly || cct.includes(e.type));
         })
         .map(
@@ -372,7 +373,7 @@ export namespace Tree {
         .filter((e: Config) => {
           const isMyConfig =
             e.syncStatus == "local" || e.owner === cm?.getCurrentOwnerId();
-          const cct = get(compatible_config_types);
+          const cct = get(compatible_config_types) as string[];
 
           return !isMyConfig && showSupportedOnly && !cct.includes(e.type);
         })

src/lib/components/tree/TreeComponent.svelte

@@ -2,6 +2,7 @@
   export interface TreeScrollBehaviour {
     scrollToIndex?: boolean;
     easing?: "smooth" | "instant";
+    scrollTrigger?: number;
   }
 
   export interface TreeProperties {
@@ -13,10 +14,12 @@
 </script>
 
 <script lang="ts">
-  import { createTreeView, type TreeView } from "@melt-ui/svelte";
-  import { setContext } from "svelte";
-  import TreeNode, { type AbstractTreeNode } from "./TreeNode.svelte";
-  import { type FolderSlotProps, type ItemSlotProps } from "./TreeChild.svelte";
+  import { createTreeView } from "@melt-ui/svelte";
+  import type { TreeView } from "@melt-ui/svelte";
+  import { setContext, tick } from "svelte";
+  import TreeNode from "./TreeNode.svelte";
+  import type { AbstractTreeNode } from "./TreeNode.svelte";
+  import type { FolderSlotProps, ItemSlotProps } from "./TreeChild.svelte";
   import { get } from "svelte/store";
 
   interface $$Slots {
@@ -33,7 +36,7 @@
   let rootHeight: number;
 
   let ctx: TreeView;
-  $: if ($root?.id) {
+  $: if ($root?.id && !ctx) {
     ctx = createTreeView({ onExpandedChange: handleExpandedChange });
     setContext("tree", ctx);
   }
@@ -63,10 +66,14 @@
   }
 
   let scrollTimeout: any;
-  async function scrollToNode(node: HTMLElement, id: string) {
+  let lastScrollTrigger: number | undefined;
+  async function scrollToNode(id: string, attempt = 0) {
     clearTimeout(scrollTimeout);
+    await tick();
     scrollTimeout = setTimeout(() => {
-      const target = node.querySelector(`#${CSS.escape(id)}`) as HTMLElement;
+      const target = rootElement?.querySelector(
+        `#${CSS.escape(id)}`,
+      ) as HTMLElement;
       if (target) {
         target.scrollIntoView({
           behavior: scrollBehaviour.easing ?? "smooth",
@@ -75,46 +82,48 @@
         });
         return;
       }
+
+      if (attempt < 4) {
+        scrollToNode(id, attempt + 1);
+      }
     }, 100);
   }
 
-  $: if (selected && (scrollBehaviour.scrollToIndex ?? false)) {
-    scrollToNode(rootElement, selected);
+  $: if (
+    selected &&
+    rootElement &&
+    (scrollBehaviour.scrollToIndex ?? false) &&
+    scrollBehaviour.scrollTrigger !== undefined &&
+    scrollBehaviour.scrollTrigger !== lastScrollTrigger
+  ) {
+    lastScrollTrigger = scrollBehaviour.scrollTrigger;
+    scrollToNode(selected);
   }
 </script>
 
-{#key tree}
-  <ul
-    bind:this={rootElement}
-    bind:clientHeight={rootHeight}
-    {...$tree}
-    class="tree"
-  >
-    <TreeNode node={root} level={0} {rootElement} {rootHeight}>
-      <svelte:fragment slot="folder" let:level let:item let:expanded>
-        <slot name="folder" {level} {item} {expanded} />
-      </svelte:fragment>
+<ul
+  bind:this={rootElement}
+  bind:clientHeight={rootHeight}
+  {...$tree}
+  class="tree"
+>
+  <TreeNode node={root} level={0} {rootElement} {rootHeight}>
+    <svelte:fragment slot="folder" let:level let:item let:expanded>
+      <slot name="folder" {level} {item} {expanded} />
+    </svelte:fragment>
 
-      <svelte:fragment
-        slot="item"
-        let:item
-        let:level
-        let:expanded
-        let:itemFunction
-        let:itemProps
-      >
-        <slot
-          name="item"
-          {level}
-          {item}
-          {expanded}
-          {itemFunction}
-          {itemProps}
-        />
-      </svelte:fragment>
-    </TreeNode>
-  </ul>
-{/key}
+    <svelte:fragment
+      slot="item"
+      let:item
+      let:level
+      let:expanded
+      let:itemFunction
+      let:itemProps
+    >
+      <slot name="item" {level} {item} {expanded} {itemFunction} {itemProps} />
+    </svelte:fragment>
+  </TreeNode>
+</ul>
 
 <style>
   ul {

src/lib/components/tree/TreeNode.svelte

@@ -173,7 +173,7 @@
   }
 
   $: {
-    const items = Array.from(listItems.values());
+    const items = Array.from(listItems.values()).filter(Boolean);
     if (items.length > 0 && level === 0) {
       setMaxHeight(rootHeight, items);
     }