n8n-editor-ui 1.66.0 → 1.67.0

package/dist/assets/{TemplatesSearchView-kFcPH-ZH.js → TemplatesSearchView-65taIL-M.js}

@@ -1,6 +1,6 @@
-import { a as __unplugin_components_0$1, _ as __unplugin_components_2 } from "./TemplateList-Bn7ePHhc.js";
-import { i7 as baseOrderBy, i8 as isArray, d as defineComponent, c as openBlock, e as createBlock, aE as createSlots, w as withCtx, j as createBaseVNode, n as normalizeClass, t as toDisplayString, q as renderSlot, i as createVNode, bP as mergeProps, l as resolveComponent, _ as _export_sfc, ar as withDirectives, as as vShow, k as createTextVNode, B as normalizeStyle, i9 as throttle, h as createElementBlock, f as createCommentVNode, F as Fragment, z as renderList, r as ref, H as watch, o as onMounted, C as nextTick, aq as onBeforeMount, A as unref, e0 as mapStores, aC as useTemplatesStore, J as useDebounce, a as useToast, a3 as useDocumentTitle, ia as CREATOR_HUB_URL, gZ as usePostHog, u as useUsersStore, K as useUIStore, m as useSettingsStore, V as VIEWS, c9 as resolveDirective } from "./index-QAq8Sa9R.js";
-import { T as TemplatesView } from "./TemplatesView-TPTpSdeD.js";
+import { ia as baseOrderBy, ib as isArray, d as defineComponent, c as openBlock, e as createBlock, aF as createSlots, w as withCtx, j as createBaseVNode, n as normalizeClass, t as toDisplayString, q as renderSlot, i as createVNode, bQ as mergeProps, l as resolveComponent, _ as _export_sfc, as as withDirectives, at as vShow, k as createTextVNode, A as unref, B as normalizeStyle, g as useI18n, ic as throttle, h as createElementBlock, f as createCommentVNode, F as Fragment, z as renderList, r as ref, H as watch, o as onMounted, x as nextTick, ar as onBeforeMount, p as computed, J as useDebounce, a as useToast, a3 as useDocumentTitle, m as useSettingsStore, aD as useTemplatesStore, u as useUsersStore, U as useRoute, b as useRouter, hq as onBeforeRouteLeave, id as CREATOR_HUB_URL, V as VIEWS, ca as resolveDirective, ak as useTelemetry } from "./index-7YFQEQmt.js";
+import { N as NodeList, T as TemplateList } from "./TemplateList-BncQL783.js";
+import { T as TemplatesView } from "./TemplatesView-DkP9JWHk.js";
 function orderBy(collection, iteratees, orders, guard) {
   if (collection == null) {
     return [];
@@ -68,62 +68,47 @@ const cssModules$3 = {
   "$style": style0$3
 };
 const Card = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$3]]);
-const _sfc_main$4 = defineComponent({
-  name: "TemplatesInfoCard",
-  components: {
-    Card,
-    NodeList: __unplugin_components_0$1
-  },
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "TemplatesInfoCard",
   props: {
-    collection: {
-      type: Object,
-      required: true
-    },
-    loading: {
-      type: Boolean
-    },
-    showItemCount: {
-      type: Boolean,
-      default: true
-    },
-    width: {
-      type: String,
-      required: true
-    }
+    collection: {},
+    loading: { type: Boolean, default: false },
+    showItemCount: { type: Boolean, default: true },
+    width: {}
+  },
+  setup(__props) {
+    const i18n = useI18n();
+    return (_ctx, _cache) => {
+      const _component_n8n_text = resolveComponent("n8n-text");
+      return openBlock(), createBlock(Card, {
+        loading: _ctx.loading,
+        title: _ctx.collection.name,
+        style: normalizeStyle({ width: _ctx.width })
+      }, {
+        footer: withCtx(() => [
+          createBaseVNode("span", null, [
+            withDirectives(createVNode(_component_n8n_text, {
+              size: "small",
+              color: "text-light"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.collection.workflows.length) + " " + toDisplayString(unref(i18n).baseText("templates.workflows")), 1)
+              ]),
+              _: 1
+            }, 512), [
+              [vShow, _ctx.showItemCount]
+            ])
+          ]),
+          createVNode(NodeList, {
+            nodes: _ctx.collection.nodes,
+            "show-more": false
+          }, null, 8, ["nodes"])
+        ]),
+        _: 1
+      }, 8, ["loading", "title", "style"]);
+    };
   }
 });
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_n8n_text = resolveComponent("n8n-text");
-  const _component_NodeList = __unplugin_components_0$1;
-  const _component_Card = resolveComponent("Card");
-  return openBlock(), createBlock(_component_Card, {
-    loading: _ctx.loading,
-    title: _ctx.collection.name,
-    style: normalizeStyle({ width: _ctx.width })
-  }, {
-    footer: withCtx(() => [
-      createBaseVNode("span", null, [
-        withDirectives(createVNode(_component_n8n_text, {
-          size: "small",
-          color: "text-light"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(_ctx.collection.workflows.length) + " " + toDisplayString(_ctx.$locale.baseText("templates.workflows")), 1)
-          ]),
-          _: 1
-        }, 512), [
-          [vShow, _ctx.showItemCount]
-        ])
-      ]),
-      createVNode(_component_NodeList, {
-        nodes: _ctx.collection.nodes,
-        "show-more": false
-      }, null, 8, ["nodes"])
-    ]),
-    _: 1
-  }, 8, ["loading", "title", "style"]);
-}
-const TemplatesInfoCard = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$3]]);
 const mixin$6 = {
   methods: {
     handleMouseDown(e) {
@@ -761,7 +746,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = ["onClick"];
 const _hoisted_10 = ["disabled"];
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass([{ "agile--ssr": $data.isSSR, "agile--auto-play": _ctx.settings.autoplay, "agile--disabled": _ctx.settings.unagile, "agile--fade": _ctx.settings.fade && !_ctx.settings.unagile, "agile--rtl": _ctx.settings.rtl, "agile--no-nav-buttons": !_ctx.settings.navButtons }, "agile"]),
     onTouchstart: () => {
@@ -838,7 +823,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 34);
 }
-const VueAgile = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
+const VueAgile = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "TemplatesInfoCarousel",
   props: {
@@ -933,7 +918,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["loading"]);
             }), 128)),
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.loading ? [] : _ctx.collections, (collection) => {
-              return openBlock(), createBlock(TemplatesInfoCard, {
+              return openBlock(), createBlock(_sfc_main$4, {
                 key: collection.id,
                 "data-test-id": "templates-info-card",
                 collection,
@@ -980,84 +965,151 @@ const style0$2 = {
 const cssModules$2 = {
   "$style": style0$2
 };
-const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
-const _sfc_main$1 = defineComponent({
-  name: "TemplateFilters",
+const TemplatesInfoCarousel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const _hoisted_1$1 = ["textContent"];
+const _hoisted_2 = ["data-test-id"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "TemplateFilters",
   props: {
-    categories: {
-      type: Array,
-      default: () => []
-    },
-    sortOnPopulate: {
-      type: Boolean,
-      default: false
-    },
-    expandLimit: {
-      type: Number,
-      default: 12
-    },
-    loading: {
-      type: Boolean
-    },
-    selected: {
-      type: Array,
-      default: () => []
-    }
+    categories: { default: () => [] },
+    sortOnPopulate: { type: Boolean, default: false },
+    expandLimit: { default: 12 },
+    loading: { type: Boolean, default: false },
+    selected: { default: () => [] }
   },
   emits: ["clearAll", "select", "clear"],
-  data() {
-    return {
-      collapsed: true,
-      sortedCategories: []
-    };
-  },
-  computed: {
-    ...mapStores(useTemplatesStore),
-    allSelected() {
-      return this.selected.length === 0;
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const i18n = useI18n();
+    const collapsed = ref(true);
+    const sortedCategories = ref([]);
+    const allSelected = computed(() => {
+      return props.selected.length === 0;
+    });
+    function sortCategories() {
+      if (!props.sortOnPopulate) {
+        sortedCategories.value = props.categories;
+      } else {
+        const selected = props.selected || [];
+        const selectedCategories = props.categories.filter((cat) => selected.includes(cat));
+        const notSelectedCategories = props.categories.filter((cat) => !selected.includes(cat));
+        sortedCategories.value = selectedCategories.concat(notSelectedCategories);
+      }
     }
-  },
-  watch: {
-    sortOnPopulate: {
-      handler(value) {
+    function collapseAction() {
+      collapsed.value = false;
+    }
+    function handleCheckboxChanged(value, selectedCategory) {
+      if (value) {
+        emit("select", selectedCategory);
+      } else {
+        emit("clear", selectedCategory);
+      }
+    }
+    function isSelected(category) {
+      return props.selected.includes(category);
+    }
+    function resetCategories() {
+      emit("clearAll");
+    }
+    watch(
+      () => props.sortOnPopulate,
+      (value) => {
         if (value) {
-          this.sortCategories();
+          sortCategories();
         }
       },
-      immediate: true
-    },
-    categories: {
-      handler(categories2) {
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.categories,
+      (categories2) => {
         if (categories2.length > 0) {
-          this.sortCategories();
+          sortCategories();
         }
       },
-      immediate: true
-    }
-  },
-  methods: {
-    sortCategories() {
-      if (!this.sortOnPopulate) {
-        this.sortedCategories = this.categories;
-      } else {
-        const selected = this.selected || [];
-        const selectedCategories = this.categories.filter((cat) => selected.includes(cat));
-        const notSelectedCategories = this.categories.filter((cat) => !selected.includes(cat));
-        this.sortedCategories = selectedCategories.concat(notSelectedCategories);
+      {
+        immediate: true
       }
-    },
-    collapseAction() {
-      this.collapsed = false;
-    },
-    handleCheckboxChanged(value, selectedCategory) {
-      this.$emit(value ? "select" : "clear", selectedCategory);
-    },
-    isSelected(category) {
-      return this.selected.includes(category);
-    },
-    resetCategories() {
-      this.$emit("clearAll");
-    }
+    );
+    return (_ctx, _cache) => {
+      const _component_n8n_loading = resolveComponent("n8n-loading");
+      const _component_el_checkbox = resolveComponent("el-checkbox");
+      const _component_n8n_text = resolveComponent("n8n-text");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.filters, "template-filters"]),
+        "data-test-id": "templates-filter-container"
+      }, [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.title),
+          textContent: toDisplayString(unref(i18n).baseText("templates.categoriesHeading"))
+        }, null, 10, _hoisted_1$1),
+        _ctx.loading ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.list)
+        }, [
+          createVNode(_component_n8n_loading, {
+            loading: _ctx.loading,
+            rows: _ctx.expandLimit
+          }, null, 8, ["loading", "rows"])
+        ], 2)) : createCommentVNode("", true),
+        !_ctx.loading ? (openBlock(), createElementBlock("ul", {
+          key: 1,
+          class: normalizeClass(_ctx.$style.categories)
+        }, [
+          createBaseVNode("li", {
+            class: normalizeClass(_ctx.$style.item),
+            "data-test-id": "template-filter-all-categories"
+          }, [
+            createVNode(_component_el_checkbox, {
+              "model-value": allSelected.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = () => resetCategories())
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n).baseText("templates.allCategories")), 1)
+              ]),
+              _: 1
+            }, 8, ["model-value"])
+          ], 2),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(collapsed.value ? sortedCategories.value.slice(0, _ctx.expandLimit) : sortedCategories.value, (category, index) => {
+            return openBlock(), createElementBlock("li", {
+              key: index,
+              class: normalizeClass(_ctx.$style.item),
+              "data-test-id": `template-filter-${category.name.toLowerCase().replaceAll(" ", "-")}`
+            }, [
+              createVNode(_component_el_checkbox, {
+                "model-value": isSelected(category),
+                "onUpdate:modelValue": (value) => handleCheckboxChanged(value, category)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(category.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["model-value", "onUpdate:modelValue"])
+            ], 10, _hoisted_2);
+          }), 128))
+        ], 2)) : createCommentVNode("", true),
+        sortedCategories.value.length > _ctx.expandLimit && collapsed.value && !_ctx.loading ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass(_ctx.$style.button),
+          "data-test-id": "expand-categories-button",
+          onClick: collapseAction
+        }, [
+          createVNode(_component_n8n_text, {
+            size: "small",
+            color: "primary"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(" + " + toDisplayString(`${sortedCategories.value.length - _ctx.expandLimit} more`), 1)
+            ]),
+            _: 1
+          })
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
   }
 });
 const title = "_title_1sb10_1";
@@ -1070,359 +1122,218 @@ const style0$1 = {
   item,
   button
 };
-const _hoisted_1$1 = ["textContent"];
-const _hoisted_2 = ["data-test-id"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_n8n_loading = resolveComponent("n8n-loading");
-  const _component_el_checkbox = resolveComponent("el-checkbox");
-  const _component_n8n_text = resolveComponent("n8n-text");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([_ctx.$style.filters, "template-filters"]),
-    "data-test-id": "templates-filter-container"
-  }, [
-    createBaseVNode("div", {
-      class: normalizeClass(_ctx.$style.title),
-      textContent: toDisplayString(_ctx.$locale.baseText("templates.categoriesHeading"))
-    }, null, 10, _hoisted_1$1),
-    _ctx.loading ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(_ctx.$style.list)
-    }, [
-      createVNode(_component_n8n_loading, {
-        loading: _ctx.loading,
-        rows: _ctx.expandLimit
-      }, null, 8, ["loading", "rows"])
-    ], 2)) : createCommentVNode("", true),
-    !_ctx.loading ? (openBlock(), createElementBlock("ul", {
-      key: 1,
-      class: normalizeClass(_ctx.$style.categories)
-    }, [
-      createBaseVNode("li", {
-        class: normalizeClass(_ctx.$style.item),
-        "data-test-id": "template-filter-all-categories"
-      }, [
-        createVNode(_component_el_checkbox, {
-          "model-value": _ctx.allSelected,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = () => _ctx.resetCategories())
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(_ctx.$locale.baseText("templates.allCategories")), 1)
-          ]),
-          _: 1
-        }, 8, ["model-value"])
-      ], 2),
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapsed ? _ctx.sortedCategories.slice(0, _ctx.expandLimit) : _ctx.sortedCategories, (category, index) => {
-        return openBlock(), createElementBlock("li", {
-          key: index,
-          class: normalizeClass(_ctx.$style.item),
-          "data-test-id": `template-filter-${category.name.toLowerCase().replaceAll(" ", "-")}`
-        }, [
-          createVNode(_component_el_checkbox, {
-            "model-value": _ctx.isSelected(category),
-            "onUpdate:modelValue": (value) => _ctx.handleCheckboxChanged(value, category)
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(category.name), 1)
-            ]),
-            _: 2
-          }, 1032, ["model-value", "onUpdate:modelValue"])
-        ], 10, _hoisted_2);
-      }), 128))
-    ], 2)) : createCommentVNode("", true),
-    _ctx.sortedCategories.length > _ctx.expandLimit && _ctx.collapsed && !_ctx.loading ? (openBlock(), createElementBlock("div", {
-      key: 2,
-      class: normalizeClass(_ctx.$style.button),
-      "data-test-id": "expand-categories-button",
-      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.collapseAction && _ctx.collapseAction(...args))
-    }, [
-      createVNode(_component_n8n_text, {
-        size: "small",
-        color: "primary"
-      }, {
-        default: withCtx(() => [
-          createTextVNode(" + " + toDisplayString(`${_ctx.sortedCategories.length - _ctx.expandLimit} more`), 1)
-        ]),
-        _: 1
-      })
-    ], 2)) : createCommentVNode("", true)
-  ], 2);
-}
 const cssModules$1 = {
   "$style": style0$1
 };
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__cssModules", cssModules$1]]);
-const _sfc_main = defineComponent({
-  name: "TemplatesSearchView",
-  components: {
-    TemplatesInfoCarousel: __unplugin_components_1,
-    TemplateFilters: __unplugin_components_0,
-    TemplateList: __unplugin_components_2,
-    TemplatesView
-  },
-  beforeRouteLeave(_to, _from, next) {
-    var _a, _b;
-    const contentArea = document.getElementById("content");
-    if (contentArea) {
-      (_b = (_a = this.$route.meta) == null ? void 0 : _a.setScrollPosition) == null ? void 0 : _b.call(_a, contentArea.scrollTop);
-    }
-    this.trackSearch();
-    next();
-  },
-  setup() {
+const TemplateFilters = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+const _hoisted_1 = ["textContent"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TemplatesSearchView",
+  setup(__props) {
+    const areCategoriesPrepopulated = ref(false);
+    const categories2 = ref([]);
+    const loadingCategories = ref(true);
+    const loadingCollections = ref(true);
+    const loadingWorkflows = ref(true);
+    const search2 = ref("");
+    const searchEventToTrack = ref(null);
+    const errorLoadingWorkflows = ref(false);
     const { callDebounced } = useDebounce();
-    return {
-      callDebounced,
-      ...useToast(),
-      documentTitle: useDocumentTitle()
-    };
-  },
-  data() {
-    return {
-      areCategoriesPrepopulated: false,
-      categories: [],
-      loading: true,
-      loadingCategories: true,
-      loadingCollections: true,
-      loadingWorkflows: true,
-      search: "",
-      searchEventToTrack: null,
-      errorLoadingWorkflows: false,
-      creatorHubUrl: CREATOR_HUB_URL
+    const toast = useToast();
+    const documentTitle = useDocumentTitle();
+    const settingsStore = useSettingsStore();
+    const templatesStore = useTemplatesStore();
+    const usersStore = useUsersStore();
+    const i18n = useI18n();
+    const route = useRoute();
+    const router = useRouter();
+    const telemetry = useTelemetry();
+    const createQueryObject = (categoryId) => {
+      return {
+        categories: categories2.value.map(
+          (category) => categoryId === "name" ? category.name : String(category.id)
+        ),
+        search: search2.value
+      };
     };
-  },
-  computed: {
-    ...mapStores(useSettingsStore, useTemplatesStore, useUIStore, useUsersStore, usePostHog),
-    totalWorkflows() {
-      return this.templatesStore.getSearchedWorkflowsTotal(this.createQueryObject("name"));
-    },
-    workflows() {
-      return this.templatesStore.getSearchedWorkflows(this.createQueryObject("name")) ?? [];
-    },
-    collections() {
-      return this.templatesStore.getSearchedCollections(this.createQueryObject("id")) ?? [];
-    },
-    endOfSearchMessage() {
-      if (this.loadingWorkflows) {
+    const totalWorkflows = computed(
+      () => templatesStore.getSearchedWorkflowsTotal(createQueryObject("name"))
+    );
+    const workflows = computed(
+      () => templatesStore.getSearchedWorkflows(createQueryObject("name")) ?? []
+    );
+    const collections = computed(
+      () => templatesStore.getSearchedCollections(createQueryObject("id")) ?? []
+    );
+    const endOfSearchMessage = computed(() => {
+      if (loadingWorkflows.value) {
         return null;
       }
-      if (!this.loadingCollections && this.workflows.length === 0 && this.collections.length === 0) {
-        if (!this.settingsStore.isTemplatesEndpointReachable && this.errorLoadingWorkflows) {
-          return this.$locale.baseText("templates.connectionWarning");
+      if (!loadingCollections.value && workflows.value.length === 0 && collections.value.length === 0) {
+        if (!settingsStore.isTemplatesEndpointReachable && errorLoadingWorkflows.value) {
+          return i18n.baseText("templates.connectionWarning");
         }
-        return this.$locale.baseText("templates.noSearchResults");
+        return i18n.baseText("templates.noSearchResults");
       }
       return null;
-    },
-    nothingFound() {
-      return !this.loadingWorkflows && !this.loadingCollections && this.workflows.length === 0 && this.collections.length === 0;
-    }
-  },
-  watch: {
-    workflows(newWorkflows) {
-      if (newWorkflows.length === 0) {
-        this.scrollTo(0);
+    });
+    const updateQueryParam = (search22, category) => {
+      const query = Object.assign({}, route.query);
+      if (category.length) {
+        query.categories = category;
+      } else {
+        delete query.categories;
       }
-    }
-  },
-  async mounted() {
-    this.documentTitle.set("Templates");
-    await this.loadCategories();
-    void this.loadWorkflowsAndCollections(true);
-    void this.usersStore.showPersonalizationSurvey();
-    this.restoreSearchFromRoute();
-    setTimeout(() => {
-      var _a;
-      const scrollOffset = (_a = this.$route.meta) == null ? void 0 : _a.scrollOffset;
-      if (typeof scrollOffset === "number" && scrollOffset > 0) {
-        this.scrollTo(scrollOffset, "auto");
-      }
-    }, 100);
-  },
-  methods: {
-    createQueryObject(categoryId) {
-      return {
-        categories: this.categories.map(
-          (category) => categoryId === "name" ? category.name : String(category.id)
-        ),
-        search: this.search
-      };
-    },
-    restoreSearchFromRoute() {
-      let updateSearch = false;
-      if (this.$route.query.search && typeof this.$route.query.search === "string") {
-        this.search = this.$route.query.search;
-        updateSearch = true;
-      }
-      if (typeof this.$route.query.categories === "string" && this.$route.query.categories.length) {
-        const categoriesFromURL = this.$route.query.categories.split(",");
-        this.categories = this.templatesStore.allCategories.filter(
-          (category) => categoriesFromURL.includes(category.id.toString())
-        );
-        updateSearch = true;
+      if (search22.length) {
+        query.search = search22;
+      } else {
+        delete query.search;
       }
-      if (updateSearch) {
-        this.updateSearch();
-        this.trackCategories();
-        this.areCategoriesPrepopulated = true;
+      void router.replace({ query });
+    };
+    const updateSearch = () => {
+      updateQueryParam(search2.value, categories2.value.map((category) => category.id).join(","));
+      void loadWorkflowsAndCollections(false);
+    };
+    const loadWorkflows = async () => {
+      try {
+        loadingWorkflows.value = true;
+        await templatesStore.getWorkflows({
+          search: search2.value,
+          categories: categories2.value.map((category) => category.name)
+        });
+        errorLoadingWorkflows.value = false;
+      } catch (e) {
+        errorLoadingWorkflows.value = true;
       }
-    },
-    onOpenCollection({ event, id }) {
-      this.navigateTo(event, VIEWS.COLLECTION, id);
-    },
-    onOpenTemplate({ event, id }) {
-      this.navigateTo(event, VIEWS.TEMPLATE, id);
-    },
-    navigateTo(e, page, id) {
-      if (e.metaKey || e.ctrlKey) {
-        const route = this.$router.resolve({ name: page, params: { id } });
-        window.open(route.href, "_blank");
-        return;
-      } else {
-        void this.$router.push({ name: page, params: { id } });
+      loadingWorkflows.value = false;
+    };
+    const loadCollections = async () => {
+      try {
+        loadingCollections.value = true;
+        await templatesStore.getCollections({
+          categories: categories2.value.map((category) => String(category.id)),
+          search: search2.value
+        });
+      } catch (e) {
       }
-    },
-    updateSearch() {
-      this.updateQueryParam(this.search, this.categories.map((category) => category.id).join(","));
-      void this.loadWorkflowsAndCollections(false);
-    },
-    updateSearchTracking(search2, categories2) {
-      if (!search2) {
+      loadingCollections.value = false;
+    };
+    const updateSearchTracking = (search22, categories22) => {
+      if (!search22) {
         return;
       }
-      if (this.searchEventToTrack && this.searchEventToTrack.search_string.length > search2.length) {
+      if (searchEventToTrack.value && searchEventToTrack.value.search_string.length > search22.length) {
         return;
       }
-      this.searchEventToTrack = {
-        search_string: search2,
-        workflow_results_count: this.workflows.length,
-        collection_results_count: this.collections.length,
-        categories_applied: categories2.map(
-          (categoryId) => this.templatesStore.getCategoryById(categoryId.toString())
+      searchEventToTrack.value = {
+        search_string: search22,
+        workflow_results_count: workflows.value.length,
+        collection_results_count: collections.value.length,
+        categories_applied: categories22.map(
+          (categoryId) => templatesStore.getCategoryById(categoryId.toString())
         ),
-        wf_template_repo_session_id: this.templatesStore.currentSessionId
+        wf_template_repo_session_id: templatesStore.currentSessionId
       };
-    },
-    trackSearch() {
-      if (this.searchEventToTrack) {
-        this.$telemetry.track(
+    };
+    const trackCategories = () => {
+      if (categories2.value.length) {
+        telemetry.track("User changed template filters", {
+          search_string: search2.value,
+          categories_applied: categories2.value,
+          wf_template_repo_session_id: templatesStore.currentSessionId
+        });
+      }
+    };
+    const loadWorkflowsAndCollections = async (initialLoad) => {
+      const _categories = [...categories2.value];
+      const _search = search2.value;
+      await Promise.all([loadWorkflows(), loadCollections()]);
+      if (!initialLoad) {
+        updateSearchTracking(
+          _search,
+          _categories.map((category) => category.id)
+        );
+      }
+    };
+    const navigateTo = (e, page, id) => {
+      if (e.metaKey || e.ctrlKey) {
+        const route2 = router.resolve({ name: page, params: { id } });
+        window.open(route2.href, "_blank");
+        return;
+      } else {
+        void router.push({ name: page, params: { id } });
+      }
+    };
+    const onOpenCollection = ({ event, id }) => {
+      navigateTo(event, VIEWS.COLLECTION, id);
+    };
+    const onOpenTemplate = ({ event, id }) => {
+      navigateTo(event, VIEWS.TEMPLATE, id);
+    };
+    const trackSearch = () => {
+      if (searchEventToTrack.value) {
+        telemetry.track(
           "User searched workflow templates",
-          this.searchEventToTrack
+          searchEventToTrack.value
         );
-        this.searchEventToTrack = null;
+        searchEventToTrack.value = null;
       }
-    },
-    onSearchInput(search2) {
-      this.loadingWorkflows = true;
-      this.loadingCollections = true;
-      this.search = search2;
-      void this.callDebounced(this.updateSearch, {
+    };
+    const onSearchInput = (searchText) => {
+      loadingWorkflows.value = true;
+      loadingCollections.value = true;
+      search2.value = searchText;
+      void callDebounced(updateSearch, {
         debounceTime: 500,
         trailing: true
       });
-      if (search2.length === 0) {
-        this.trackSearch();
+      if (searchText.length === 0) {
+        trackSearch();
       }
-    },
-    onCategorySelected(selected) {
-      this.categories = this.categories.concat(selected);
-      this.updateSearch();
-      this.trackCategories();
-    },
-    onCategoryUnselected(selected) {
-      this.categories = this.categories.filter((category) => category.id !== selected.id);
-      this.updateSearch();
-      this.trackCategories();
-    },
-    onCategoriesCleared() {
-      this.categories = [];
-      this.updateSearch();
-    },
-    trackCategories() {
-      if (this.categories.length) {
-        this.$telemetry.track("User changed template filters", {
-          search_string: this.search,
-          categories_applied: this.categories,
-          wf_template_repo_session_id: this.templatesStore.currentSessionId
-        });
-      }
-    },
-    updateQueryParam(search2, category) {
-      const query = Object.assign({}, this.$route.query);
-      if (category.length) {
-        query.categories = category;
-      } else {
-        delete query.categories;
-      }
-      if (search2.length) {
-        query.search = search2;
-      } else {
-        delete query.search;
-      }
-      void this.$router.replace({ query });
-    },
-    async onLoadMore() {
-      if (this.workflows.length >= this.totalWorkflows) {
+    };
+    const onCategorySelected = (selected) => {
+      categories2.value = categories2.value.concat(selected);
+      updateSearch();
+      trackCategories();
+    };
+    const onCategoryUnselected = (selected) => {
+      categories2.value = categories2.value.filter((category) => category.id !== selected.id);
+      updateSearch();
+      trackCategories();
+    };
+    const onCategoriesCleared = () => {
+      categories2.value = [];
+      updateSearch();
+    };
+    const onLoadMore = async () => {
+      if (workflows.value.length >= totalWorkflows.value) {
         return;
       }
       try {
-        this.loadingWorkflows = true;
-        await this.templatesStore.getMoreWorkflows({
-          categories: this.categories.map((category) => category.name),
-          search: this.search
+        loadingWorkflows.value = true;
+        await templatesStore.getMoreWorkflows({
+          categories: categories2.value.map((category) => category.name),
+          search: search2.value
         });
       } catch (e) {
-        this.showMessage({
+        toast.showMessage({
           title: "Error",
           message: "Could not load more workflows",
           type: "error"
         });
       } finally {
-        this.loadingWorkflows = false;
-      }
-    },
-    async loadCategories() {
-      try {
-        await this.templatesStore.getCategories();
-      } catch (e) {
-      }
-      this.loadingCategories = false;
-    },
-    async loadCollections() {
-      try {
-        this.loadingCollections = true;
-        await this.templatesStore.getCollections({
-          categories: this.categories.map((category) => String(category.id)),
-          search: this.search
-        });
-      } catch (e) {
+        loadingWorkflows.value = false;
       }
-      this.loadingCollections = false;
-    },
-    async loadWorkflows() {
+    };
+    const loadCategories = async () => {
       try {
-        this.loadingWorkflows = true;
-        await this.templatesStore.getWorkflows({
-          search: this.search,
-          categories: this.categories.map((category) => category.name)
-        });
-        this.errorLoadingWorkflows = false;
+        await templatesStore.getCategories();
       } catch (e) {
-        this.errorLoadingWorkflows = true;
-      }
-      this.loadingWorkflows = false;
-    },
-    async loadWorkflowsAndCollections(initialLoad) {
-      const search2 = this.search;
-      const categories2 = [...this.categories];
-      await Promise.all([this.loadWorkflows(), this.loadCollections()]);
-      if (!initialLoad) {
-        this.updateSearchTracking(
-          search2,
-          categories2.map((category) => category.id)
-        );
       }
-    },
-    scrollTo(position, behavior = "smooth") {
+      loadingCategories.value = false;
+    };
+    const scrollTo = (position, behavior = "smooth") => {
       setTimeout(() => {
         const contentArea = document.getElementById("content");
         if (contentArea) {
@@ -1432,7 +1343,186 @@ const _sfc_main = defineComponent({
           });
         }
       }, 0);
-    }
+    };
+    const restoreSearchFromRoute = () => {
+      let shouldUpdateSearch = false;
+      if (route.query.search && typeof route.query.search === "string") {
+        search2.value = route.query.search;
+        shouldUpdateSearch = true;
+      }
+      if (typeof route.query.categories === "string" && route.query.categories.length) {
+        const categoriesFromURL = route.query.categories.split(",");
+        categories2.value = templatesStore.allCategories.filter(
+          (category) => categoriesFromURL.includes(category.id.toString())
+        );
+        shouldUpdateSearch = true;
+      }
+      if (shouldUpdateSearch) {
+        updateSearch();
+        trackCategories();
+        areCategoriesPrepopulated.value = true;
+      }
+    };
+    onMounted(async () => {
+      documentTitle.set("Templates");
+      await loadCategories();
+      void loadWorkflowsAndCollections(true);
+      void usersStore.showPersonalizationSurvey();
+      restoreSearchFromRoute();
+      setTimeout(() => {
+        var _a;
+        const scrollOffset = (_a = route.meta) == null ? void 0 : _a.scrollOffset;
+        if (typeof scrollOffset === "number" && scrollOffset > 0) {
+          scrollTo(scrollOffset, "auto");
+        }
+      }, 100);
+    });
+    onBeforeRouteLeave((_to, _from, next) => {
+      var _a, _b;
+      const contentArea = document.getElementById("content");
+      if (contentArea) {
+        (_b = (_a = route.meta) == null ? void 0 : _a.setScrollPosition) == null ? void 0 : _b.call(_a, contentArea.scrollTop);
+      }
+      trackSearch();
+      next();
+    });
+    watch(workflows, (newWorkflows) => {
+      if (newWorkflows.length === 0) {
+        window.scrollTo(0, 0);
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_n8n_heading = resolveComponent("n8n-heading");
+      const _component_n8n_button = resolveComponent("n8n-button");
+      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
+      const _component_n8n_input = resolveComponent("n8n-input");
+      const _component_n8n_text = resolveComponent("n8n-text");
+      const _directive_n8n_html = resolveDirective("n8n-html");
+      return openBlock(), createBlock(TemplatesView, null, {
+        header: withCtx(() => [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.wrapper)
+          }, [
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.title)
+            }, [
+              createVNode(_component_n8n_heading, {
+                tag: "h1",
+                size: "2xlarge"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("templates.heading")), 1)
+                ]),
+                _: 1
+              })
+            ], 2),
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.button)
+            }, [
+              createVNode(_component_n8n_button, {
+                size: "large",
+                type: "secondary",
+                element: "a",
+                href: unref(CREATOR_HUB_URL),
+                label: unref(i18n).baseText("templates.shareWorkflow"),
+                target: "_blank"
+              }, null, 8, ["href", "label"])
+            ], 2)
+          ], 2)
+        ]),
+        content: withCtx(() => [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.contentWrapper)
+          }, [
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.filters)
+            }, [
+              createVNode(TemplateFilters, {
+                categories: unref(templatesStore).allCategories,
+                "sort-on-populate": areCategoriesPrepopulated.value,
+                selected: categories2.value,
+                loading: loadingCategories.value,
+                onClear: onCategoryUnselected,
+                onClearAll: onCategoriesCleared,
+                onSelect: onCategorySelected
+              }, null, 8, ["categories", "sort-on-populate", "selected", "loading"])
+            ], 2),
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.search)
+            }, [
+              createVNode(_component_n8n_input, {
+                "model-value": search2.value,
+                placeholder: unref(i18n).baseText("templates.searchPlaceholder"),
+                clearable: "",
+                "data-test-id": "template-search-input",
+                "onUpdate:modelValue": onSearchInput,
+                onBlur: trackSearch
+              }, {
+                prefix: withCtx(() => [
+                  createVNode(_component_font_awesome_icon, { icon: "search" })
+                ]),
+                _: 1
+              }, 8, ["model-value", "placeholder"]),
+              withDirectives(createBaseVNode("div", {
+                class: normalizeClass(_ctx.$style.carouselContainer)
+              }, [
+                createBaseVNode("div", {
+                  class: normalizeClass(_ctx.$style.header)
+                }, [
+                  createVNode(_component_n8n_heading, {
+                    bold: true,
+                    size: "medium",
+                    color: "text-light"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(i18n).baseText("templates.collections")) + " ", 1),
+                      !loadingCollections.value ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        "data-test-id": "collection-count-label",
+                        textContent: toDisplayString(`(${collections.value.length})`)
+                      }, null, 8, _hoisted_1)) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                createVNode(TemplatesInfoCarousel, {
+                  collections: collections.value,
+                  loading: loadingCollections.value,
+                  onOpenCollection
+                }, null, 8, ["collections", "loading"])
+              ], 2), [
+                [vShow, collections.value.length || loadingCollections.value]
+              ]),
+              createVNode(TemplateList, {
+                "infinite-scroll-enabled": true,
+                loading: loadingWorkflows.value,
+                workflows: workflows.value,
+                "total-count": totalWorkflows.value,
+                onLoadMore,
+                onOpenTemplate
+              }, null, 8, ["loading", "workflows", "total-count"]),
+              endOfSearchMessage.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(_ctx.$style.endText)
+              }, [
+                createVNode(_component_n8n_text, {
+                  size: "medium",
+                  color: "text-base"
+                }, {
+                  default: withCtx(() => [
+                    withDirectives(createBaseVNode("span", null, null, 512), [
+                      [_directive_n8n_html, endOfSearchMessage.value]
+                    ])
+                  ]),
+                  _: 1
+                })
+              ], 2)) : createCommentVNode("", true)
+            ], 2)
+          ], 2)
+        ]),
+        _: 1
+      });
+    };
   }
 });
 const wrapper = "_wrapper_1el39_1";
@@ -1447,147 +1537,10 @@ const style0 = {
   search,
   header
 };
-const _hoisted_1 = ["textContent"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_n8n_heading = resolveComponent("n8n-heading");
-  const _component_n8n_button = resolveComponent("n8n-button");
-  const _component_TemplateFilters = __unplugin_components_0;
-  const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
-  const _component_n8n_input = resolveComponent("n8n-input");
-  const _component_TemplatesInfoCarousel = __unplugin_components_1;
-  const _component_TemplateList = __unplugin_components_2;
-  const _component_n8n_text = resolveComponent("n8n-text");
-  const _component_TemplatesView = resolveComponent("TemplatesView");
-  const _directive_n8n_html = resolveDirective("n8n-html");
-  return openBlock(), createBlock(_component_TemplatesView, null, {
-    header: withCtx(() => [
-      createBaseVNode("div", {
-        class: normalizeClass(_ctx.$style.wrapper)
-      }, [
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.title)
-        }, [
-          createVNode(_component_n8n_heading, {
-            tag: "h1",
-            size: "2xlarge"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(_ctx.$locale.baseText("templates.heading")), 1)
-            ]),
-            _: 1
-          })
-        ], 2),
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.button)
-        }, [
-          createVNode(_component_n8n_button, {
-            size: "large",
-            type: "secondary",
-            element: "a",
-            href: _ctx.creatorHubUrl,
-            label: _ctx.$locale.baseText("templates.shareWorkflow"),
-            target: "_blank"
-          }, null, 8, ["href", "label"])
-        ], 2)
-      ], 2)
-    ]),
-    content: withCtx(() => [
-      createBaseVNode("div", {
-        class: normalizeClass(_ctx.$style.contentWrapper)
-      }, [
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.filters)
-        }, [
-          createVNode(_component_TemplateFilters, {
-            categories: _ctx.templatesStore.allCategories,
-            "sort-on-populate": _ctx.areCategoriesPrepopulated,
-            selected: _ctx.categories,
-            loading: _ctx.loadingCategories,
-            onClear: _ctx.onCategoryUnselected,
-            onClearAll: _ctx.onCategoriesCleared,
-            onSelect: _ctx.onCategorySelected
-          }, null, 8, ["categories", "sort-on-populate", "selected", "loading", "onClear", "onClearAll", "onSelect"])
-        ], 2),
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.search)
-        }, [
-          createVNode(_component_n8n_input, {
-            "model-value": _ctx.search,
-            placeholder: _ctx.$locale.baseText("templates.searchPlaceholder"),
-            clearable: "",
-            "data-test-id": "template-search-input",
-            "onUpdate:modelValue": _ctx.onSearchInput,
-            onBlur: _ctx.trackSearch
-          }, {
-            prefix: withCtx(() => [
-              createVNode(_component_font_awesome_icon, { icon: "search" })
-            ]),
-            _: 1
-          }, 8, ["model-value", "placeholder", "onUpdate:modelValue", "onBlur"]),
-          withDirectives(createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.carouselContainer)
-          }, [
-            createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style.header)
-            }, [
-              createVNode(_component_n8n_heading, {
-                bold: true,
-                size: "medium",
-                color: "text-light"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.$locale.baseText("templates.collections")) + " ", 1),
-                  !_ctx.loadingCollections ? (openBlock(), createElementBlock("span", {
-                    key: 0,
-                    "data-test-id": "collection-count-label",
-                    textContent: toDisplayString(`(${_ctx.collections.length})`)
-                  }, null, 8, _hoisted_1)) : createCommentVNode("", true)
-                ]),
-                _: 1
-              })
-            ], 2),
-            createVNode(_component_TemplatesInfoCarousel, {
-              collections: _ctx.collections,
-              loading: _ctx.loadingCollections,
-              onOpenCollection: _ctx.onOpenCollection
-            }, null, 8, ["collections", "loading", "onOpenCollection"])
-          ], 2), [
-            [vShow, _ctx.collections.length || _ctx.loadingCollections]
-          ]),
-          createVNode(_component_TemplateList, {
-            "infinite-scroll-enabled": true,
-            loading: _ctx.loadingWorkflows,
-            workflows: _ctx.workflows,
-            "total-count": _ctx.totalWorkflows,
-            onLoadMore: _ctx.onLoadMore,
-            onOpenTemplate: _ctx.onOpenTemplate
-          }, null, 8, ["loading", "workflows", "total-count", "onLoadMore", "onOpenTemplate"]),
-          _ctx.endOfSearchMessage ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(_ctx.$style.endText)
-          }, [
-            createVNode(_component_n8n_text, {
-              size: "medium",
-              color: "text-base"
-            }, {
-              default: withCtx(() => [
-                withDirectives(createBaseVNode("span", null, null, 512), [
-                  [_directive_n8n_html, _ctx.endOfSearchMessage]
-                ])
-              ]),
-              _: 1
-            })
-          ], 2)) : createCommentVNode("", true)
-        ], 2)
-      ], 2)
-    ]),
-    _: 1
-  });
-}
 const cssModules = {
   "$style": style0
 };
-const TemplatesSearchView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules]]);
+const TemplatesSearchView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
   TemplatesSearchView as default
 };