From 6f2f9c3b00df6434b6436df8831a17f659fea59f Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Wed, 23 Jul 2025 10:12:11 +0200
Subject: [PATCH 01/14] Add controls to the item list

---
 .../editor/Sidebar/ActivityNavigation.vue     |   6 +-
 .../Sidebar/TailorTreeview/ListItem.vue       | 115 ++++++++++++++++
 .../components/TailorTreeview/ItemGroup.vue   |  50 -------
 .../components/TailorTreeview/ListItem.vue    |  85 ------------
 .../src/components/TailorTreeview/index.vue   | 124 ------------------
 5 files changed, 116 insertions(+), 264 deletions(-)
 create mode 100644 apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
 delete mode 100644 packages/core-components/src/components/TailorTreeview/ItemGroup.vue
 delete mode 100644 packages/core-components/src/components/TailorTreeview/ListItem.vue
 delete mode 100644 packages/core-components/src/components/TailorTreeview/index.vue

diff --git a/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue b/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
index f649101b9..fd98df7ee 100644
--- a/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
+++ b/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
@@ -26,7 +26,7 @@ import type { Activity } from '@tailor-cms/interfaces/activity';
 import { activity as activityUtils } from '@tailor-cms/utils';
 import type { Repository } from '@tailor-cms/interfaces/repository';
 import { sortBy } from 'lodash-es';
-import { TailorTreeview } from '@tailor-cms/core-components';
+import TailorTreeview from './TailorTreeview/index.vue';
 
 const { $schemaService } = useNuxtApp() as any;
 
@@ -139,10 +139,6 @@ const navigateToActivity = (activityId: number) => {
 }
 
 :deep(.v-list-item) {
-  .v-list-item__append {
-    visibility: hidden;
-  }
-
   &:hover {
     .v-list-item-title {
       font-weight: 600 !important;
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
new file mode 100644
index 000000000..2dbbdc856
--- /dev/null
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -0,0 +1,115 @@
+<template>
+  <VListItem
+    ref="listItem"
+    v-bind="omit(activatorProps, 'onClick')"
+    :class="{ 'list-item-active': isActive, 'pt-2': isHovered }"
+    :create-context="createContext"
+    :title="title"
+    class="list-item"
+    @click.prevent="onItemClick"
+  >
+    <template #prepend>
+      <VBtn
+        v-if="isGroup"
+        :color="prependColor"
+        :icon="prependIcon"
+        class="ml-n1 mr-2"
+        density="comfortable"
+        variant="text"
+        @click.stop="activatorProps?.onClick"
+      />
+    </template>
+    <template #title>
+      <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
+    </template>
+    <template #subtitle>
+      <VExpandTransition>
+        <ItemToolbar
+          v-if="isHovered || createContext?.activity?.id === id"
+          :id="id"
+          @create="emit('create', $event)"
+          @edit="emit('edit', $event)"
+        />
+      </VExpandTransition>
+    </template>
+    <template #append>
+      <div v-if="isHovered" class="d-flex flex-column align-center">
+        <VBtn
+          color="primary-lighten-2"
+          icon="mdi-chevron-up"
+          density="compact"
+          variant="text"
+          @click.stop="reoder(Direction.Up)"
+        />
+        <VBtn
+          color="primary-lighten-2"
+          icon="mdi-chevron-down"
+          density="compact"
+          variant="text"
+          @click.stop="reoder(Direction.Down)"
+        />
+      </div>
+    </template>
+  </VListItem>
+</template>
+
+<script lang="ts" setup>
+import { computed, useTemplateRef } from 'vue';
+import { omit } from 'lodash-es';
+import { useElementHover } from '@vueuse/core';
+import ItemToolbar from './ItemToolbar.vue';
+
+const Direction = {
+  Up: -1,
+  Down: 1,
+};
+
+const props = defineProps<{
+  id: number;
+  title: string;
+  isGroup?: boolean;
+  isEmpty?: boolean;
+  isEditable?: boolean;
+  isOpen?: boolean;
+  isActive?: boolean;
+  activatorProps?: Record<string, any>;
+  createContext?: { activity: any };
+  // Location of the item in the list
+  index: number;
+  // Siblings of the item in the list
+  siblings: any[];
+}>();
+
+const emit = defineEmits(['create', 'edit']);
+
+const activityStore = useActivityStore();
+
+const listItem = useTemplateRef<HTMLButtonElement>('listItem');
+const isHovered = useElementHover(listItem, {
+  delayEnter: 800,
+  delayLeave: 2000,
+});
+
+const prependIcon = computed(() => {
+  if (!props.isGroup) return '';
+  const icon = props.isOpen ? 'mdi-folder-open' : 'mdi-folder';
+  return props.isEmpty ? `${icon}-outline` : icon;
+});
+
+const prependColor = computed(() => {
+  return props.isOpen ? 'primary-lighten-3' : 'primary-lighten-2';
+});
+
+const onItemClick = (e: any) => {
+  if (!props.isEditable) return props.activatorProps?.onClick(e);
+  emit('edit', props.id);
+};
+
+const reoder = (direction: number) => {
+  const activity = activityStore.findById(props.id) as any;
+  return activityStore.reorder(activity, {
+    items: props.siblings,
+    position: props.index + direction,
+  });
+};
+</script>
diff --git a/packages/core-components/src/components/TailorTreeview/ItemGroup.vue b/packages/core-components/src/components/TailorTreeview/ItemGroup.vue
deleted file mode 100644
index 4cd07c23f..000000000
--- a/packages/core-components/src/components/TailorTreeview/ItemGroup.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <VListGroup v-if="item.isGroup" :value="item.id">
-    <template #activator="{ props: activatorProps, isOpen }">
-      <ListItem
-        v-bind="{ ...bindings, isOpen, activatorProps }"
-        :is-empty="!item.children.length"
-        is-group
-        @edit="emit('edit', $event)"
-      />
-    </template>
-    <ItemGroup
-      v-for="subItem in item.children"
-      :key="subItem.id"
-      :active-item-id="activeItemId"
-      :item="subItem"
-      @edit="emit('edit', $event)"
-    />
-  </VListGroup>
-  <ListItem v-else v-bind="bindings" @edit="emit('edit', $event)" />
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-import ItemGroup from './ItemGroup.vue';
-import ListItem from './ListItem.vue';
-
-const props = defineProps<{
-  item: any;
-  activeItemId: number;
-}>();
-
-const bindings = computed(() => {
-  const { id, isEditable, title } = props.item;
-  return {
-    id,
-    title,
-    isEditable,
-    isActive: props.activeItemId === id,
-  };
-});
-
-const emit = defineEmits(['edit']);
-</script>
-
-<style lang="scss" scoped>
-.v-list-group {
-  --list-indent-size: 0.75rem;
-}
-</style>
diff --git a/packages/core-components/src/components/TailorTreeview/ListItem.vue b/packages/core-components/src/components/TailorTreeview/ListItem.vue
deleted file mode 100644
index 0f6edc66a..000000000
--- a/packages/core-components/src/components/TailorTreeview/ListItem.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <VListItem
-    v-bind="omit(activatorProps, 'onClick')"
-    :class="{
-      'list-item-active': isActive,
-      'readonly': !isEditable,
-    }"
-    :title="title"
-    class="list-item"
-    @click.prevent="onItemClick"
-  >
-    <template #prepend>
-      <VBtn
-        v-if="isGroup"
-        :color="prependColor"
-        :icon="prependIcon"
-        class="ml-n1 mr-2"
-        density="comfortable"
-        variant="text"
-        @click="activatorProps?.onClick"
-      />
-    </template>
-    <template #title>
-      <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
-    </template>
-    <template #append>
-      <VIcon v-if="isEditable" color="secondary-lighten-4">
-        mdi-page-next-outline
-      </VIcon>
-    </template>
-  </VListItem>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { omit } from 'lodash-es';
-
-const props = defineProps<{
-  id: number;
-  title: string;
-  isGroup?: boolean;
-  isEmpty?: boolean;
-  isEditable?: boolean;
-  isOpen?: boolean;
-  isActive?: boolean;
-  activatorProps?: Record<string, any>;
-}>();
-
-const emit = defineEmits(['edit']);
-
-const prependIcon = computed(() => {
-  if (!props.isGroup) return '';
-  const icon = props.isOpen ? 'mdi-folder-open' : 'mdi-folder';
-  return props.isEmpty ? `${icon}-outline` : icon;
-});
-
-const prependColor = computed(() => {
-  return props.isOpen ? 'primary-lighten-3' : 'primary-lighten-2';
-});
-
-const onItemClick = () => {
-  if (!props.isEditable) return;
-  emit('edit', props.id);
-};
-</script>
-
-<style scoped lang="scss">
-.list-item :deep(.v-list-item__append) {
-  i {
-    opacity: 1 !important;
-  }
-}
-
-.list-item.readonly {
-  pointer-events: none;
-
-  .v-btn {
-    pointer-events: auto;
-  }
-}
-
-.list-item-active {
-  color: #f9c2d5;
-}
-</style>
diff --git a/packages/core-components/src/components/TailorTreeview/index.vue b/packages/core-components/src/components/TailorTreeview/index.vue
deleted file mode 100644
index d81837559..000000000
--- a/packages/core-components/src/components/TailorTreeview/index.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <div
-    v-if="hasItems"
-    :class="{ 'd-flex flex-column align-end': true, 'mt-5': search }"
-  >
-    <VBtn
-      v-if="!search"
-      class="mr-5"
-      color="teal-lighten-4"
-      size="x-small"
-      variant="tonal"
-      @click="toggleExpand"
-    >
-      Toggle all
-    </VBtn>
-  </div>
-  <VList v-model:opened="expanded" slim>
-    <ItemGroup
-      v-for="item in processedItems"
-      :key="item.id"
-      :active-item-id="activeItemId"
-      :item="item"
-      @edit="emit('edit', $event)"
-    />
-  </VList>
-  <VAlert
-    v-if="search && !hasItems"
-    class="mx-4"
-    icon="mdi-information-outline"
-    variant="tonal"
-  >
-    No items found!
-  </VAlert>
-</template>
-
-<script setup lang="ts">
-import { cloneDeep, uniq } from 'lodash-es';
-import { computed, ref, watch } from 'vue';
-
-import ItemGroup from './ItemGroup.vue';
-
-const props = defineProps<{
-  items: any[];
-  activeItemId: number;
-  search: string;
-}>();
-
-const emit = defineEmits(['edit']);
-
-const expanded = ref<number[]>([]);
-
-const flatItems = computed(() => flatTree(props.items));
-
-const processedItems = computed(() => {
-  if (!props.search) return props.items;
-  // clone the items to avoid modifying the original
-  const items = cloneDeep(props.items);
-  return items.filter(searchRecursive);
-});
-
-const hasItems = computed(() => processedItems.value.length > 0);
-
-const expandableItemIds = computed(() => getGroupIds(flatItems.value));
-
-const doesTitleMatchSearch = (title: string) =>
-  title.toLowerCase().includes(props.search.toLowerCase());
-
-const searchRecursive = (item: any): any => {
-  if (doesTitleMatchSearch(item.title)) return item;
-  if (item.children) return item.children.some(searchRecursive);
-  item.isVisible = false;
-  return false;
-};
-
-const isFullyExpanded = computed(
-  () => expandableItemIds.value.length === expanded.value.length,
-);
-
-const toggleExpand = () => {
-  expanded.value = isFullyExpanded.value ? [] : expandableItemIds.value;
-};
-
-const flatTree = (tree: any) =>
-  tree.reduce(
-    (acc: any, it: any) =>
-      it.children?.length
-        ? [...acc, it, ...flatTree(it.children)]
-        : [...acc, it],
-    [],
-  );
-
-const findAncestors = (items: any, id: number, parents: any[] = []): any[] => {
-  const item = items.find((it: any) => it.id === id);
-  if (item) return [...parents, item];
-  return items
-    .map((it: any) =>
-      it.children?.length
-        ? findAncestors(it.children, id, [...parents, it])
-        : [],
-    )
-    .flat()
-    .filter(Boolean);
-};
-
-const getGroupIds = (items: any[]): number[] =>
-  items.filter((it: any) => it.isGroup).map((it) => it.id);
-
-watch(
-  () => props.search,
-  () => {
-    expanded.value = expandableItemIds.value;
-  },
-);
-
-watch(
-  () => props.items,
-  () => {
-    if (expanded.value.length) return;
-    const ancestors = findAncestors(props.items, props.activeItemId);
-    expanded.value = uniq([...expanded.value, ...getGroupIds(ancestors)]);
-  },
-  { deep: true },
-);
-</script>

From 0fa7f0d25ce1ff7fb83f0b38673dfd9a324ce1a3 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Thu, 24 Jul 2025 12:38:15 +0200
Subject: [PATCH 02/14] Remove Treview export

---
 packages/core-components/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/core-components/src/index.ts b/packages/core-components/src/index.ts
index 4e2eb5e88..4b694eb99 100644
--- a/packages/core-components/src/index.ts
+++ b/packages/core-components/src/index.ts
@@ -5,7 +5,6 @@ export { default as Discussion } from './components/Discussion/index.vue';
 export { default as ElementList } from './components/ElementList.vue';
 export { default as AddElement } from './components/AddElement/index.vue';
 export { default as InlineActivator } from './components/AddElement/InlineActivator.vue';
-export { default as TailorTreeview } from './components/TailorTreeview/index.vue';
 export { default as UserAvatar } from './components/UserAvatar.vue';
 export { default as ActiveUsers } from './components/ActiveUsers.vue';
 export { default as SelectElement } from './components/SelectElement/index.vue';

From be2e28f0ec12d36476c730e3b76b33760e306c8b Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Thu, 24 Jul 2025 14:14:11 +0200
Subject: [PATCH 03/14] Modify ListItem controls

---
 .../Sidebar/TailorTreeview/ListItem.vue       | 139 ++++++++++--------
 1 file changed, 81 insertions(+), 58 deletions(-)

diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
index 2dbbdc856..31ece94b3 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -1,63 +1,72 @@
 <template>
-  <VListItem
-    ref="listItem"
-    v-bind="omit(activatorProps, 'onClick')"
-    :class="{ 'list-item-active': isActive, 'pt-2': isHovered }"
-    :create-context="createContext"
-    :title="title"
-    class="list-item"
-    @click.prevent="onItemClick"
-  >
-    <template #prepend>
-      <VBtn
-        v-if="isGroup"
-        :color="prependColor"
-        :icon="prependIcon"
-        class="ml-n1 mr-2"
-        density="comfortable"
-        variant="text"
-        @click.stop="activatorProps?.onClick"
-      />
-    </template>
-    <template #title>
-      <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
-    </template>
-    <template #subtitle>
-      <VExpandTransition>
-        <ItemToolbar
-          v-if="isHovered || createContext?.activity?.id === id"
-          :id="id"
-          @create="emit('create', $event)"
-          @edit="emit('edit', $event)"
-        />
-      </VExpandTransition>
-    </template>
-    <template #append>
-      <div v-if="isHovered" class="d-flex flex-column align-center">
-        <VBtn
-          color="primary-lighten-2"
-          icon="mdi-chevron-up"
-          density="compact"
-          variant="text"
-          @click.stop="reoder(Direction.Up)"
-        />
+  <VExpandTransition>
+    <VListItem
+      ref="listItem"
+      v-bind="omit(activatorProps, 'onClick')"
+      :class="{ 'list-item-active': isActive }"
+      :title="title"
+      class="list-item"
+      @click.prevent="onItemClick"
+    >
+      <template #prepend>
         <VBtn
-          color="primary-lighten-2"
-          icon="mdi-chevron-down"
-          density="compact"
+          v-if="isGroup"
+          :color="prependColor"
+          :icon="prependIcon"
+          class="ml-n1 mr-2"
+          density="comfortable"
           variant="text"
-          @click.stop="reoder(Direction.Down)"
+          @click.stop="activatorProps?.onClick"
         />
-      </div>
-    </template>
-  </VListItem>
+      </template>
+      <template #title>
+        <div class="d-flex align-center">
+          <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
+          <ActivityMenu
+            v-show="isHovered"
+            :activity="activity as any"
+            :activator="{
+              size: 'x-small',
+              variant: 'text',
+            }"
+            class="activity-menu ml-2"
+            @click.stop
+          />
+        </div>
+      </template>
+      <template #append>
+        <div v-if="isHovered" class="d-flex flex-column align-center">
+          <VBtn
+            :disabled="index === 0"
+            color="primary-lighten-2"
+            icon="mdi-chevron-up"
+            density="compact"
+            variant="text"
+            size="small"
+            @click.stop="reoder(Direction.Up)"
+          />
+          <VBtn
+            :disabled="index === siblings.length - 1"
+            color="primary-lighten-2"
+            icon="mdi-chevron-down"
+            density="compact"
+            variant="text"
+            size="small"
+            @click.stop="reoder(Direction.Down)"
+          />
+        </div>
+      </template>
+    </VListItem>
+  </VExpandTransition>
 </template>
 
 <script lang="ts" setup>
 import { computed, useTemplateRef } from 'vue';
 import { omit } from 'lodash-es';
 import { useElementHover } from '@vueuse/core';
-import ItemToolbar from './ItemToolbar.vue';
+import type { Activity } from '@tailor-cms/interfaces/activity';
+
+import ActivityMenu from '~/components/common/ActivityOptions/ActivityMenu.vue';
 
 const Direction = {
   Up: -1,
@@ -73,23 +82,22 @@ const props = defineProps<{
   isOpen?: boolean;
   isActive?: boolean;
   activatorProps?: Record<string, any>;
-  createContext?: { activity: any };
-  // Location of the item in the list
-  index: number;
-  // Siblings of the item in the list
-  siblings: any[];
+  index: number; // Location of the item in the list
+  siblings: any[]; // Siblings of the item in the list
 }>();
 
-const emit = defineEmits(['create', 'edit']);
+const emit = defineEmits(['edit']);
 
 const activityStore = useActivityStore();
 
 const listItem = useTemplateRef<HTMLButtonElement>('listItem');
 const isHovered = useElementHover(listItem, {
-  delayEnter: 800,
-  delayLeave: 2000,
+  delayEnter: 400,
+  delayLeave: 800,
 });
 
+const activity = activityStore.findById(props.id) as Activity;
+
 const prependIcon = computed(() => {
   if (!props.isGroup) return '';
   const icon = props.isOpen ? 'mdi-folder-open' : 'mdi-folder';
@@ -107,9 +115,24 @@ const onItemClick = (e: any) => {
 
 const reoder = (direction: number) => {
   const activity = activityStore.findById(props.id) as any;
+  console.log('xxx', props.index + direction);
   return activityStore.reorder(activity, {
     items: props.siblings,
     position: props.index + direction,
   });
 };
 </script>
+
+<style lang="scss" scoped>
+.activity-menu {
+  :deep(.v-list-item-title),
+  :deep(.v-list-item-title:hover) {
+    color: rgb(var(--v-theme-primary-darken-3)) !important;
+    font-weight: 400 !important;
+  }
+}
+
+.v-list-item:hover .activity-menu :deep(.v-list-item__content) .v-list-item-title {
+  font-weight: 400 !important;
+}
+</style>

From cbb356f09dea6e89d4582c51819764aff951af8f Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 25 Jul 2025 10:43:26 +0200
Subject: [PATCH 04/14] Add index and siblings to tree structure

---
 packages/utils/src/activity.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/utils/src/activity.ts b/packages/utils/src/activity.ts
index eb60a7855..f470ff2c9 100644
--- a/packages/utils/src/activity.ts
+++ b/packages/utils/src/activity.ts
@@ -65,11 +65,12 @@ export function toTreeFormat(
   const { parentId = null, level = 1, maxLevel = 20 } = _internals;
   if (level > maxLevel) throw new Error('Max level exceeded');
   const parentActivities = filter(activities, { parentId });
-  return filterNodesFn(parentActivities).map((activity) => ({
+  return filterNodesFn(parentActivities).map((activity, index) => ({
     ...activity,
     name: activity.data.name,
     title: activity.data.name,
     level,
+    index,
     children: toTreeFormat(
       activities,
       { filterNodesFn, processNodeFn },
@@ -79,6 +80,7 @@ export function toTreeFormat(
         level: level + 1,
       },
     ),
+    siblings: parentActivities,
     ...(processNodeFn && processNodeFn(activity)),
   }));
 }

From 37723b4a548324b78bba0ada420446992d2b0f49 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 25 Jul 2025 10:43:46 +0200
Subject: [PATCH 05/14] Update Treview component location

---
 .../Sidebar/TailorTreeview/ItemGroup.vue      |  52 ++++++++
 .../editor/Sidebar/TailorTreeview/index.vue   | 124 ++++++++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
 create mode 100644 apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue

diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
new file mode 100644
index 000000000..2847c5569
--- /dev/null
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
@@ -0,0 +1,52 @@
+<template>
+  <VListGroup v-if="item.isGroup" :value="item.id">
+    <template #activator="{ props: activatorProps, isOpen }">
+      <ListItem
+        v-bind="{ ...bindings, isOpen, activatorProps }"
+        :is-empty="!item.children.length"
+        is-group
+        @edit="emit('edit', $event)"
+      />
+    </template>
+    <ItemGroup
+      v-for="(subItem) in item.children"
+      :key="subItem.id"
+      :active-item-id="activeItemId"
+      :item="subItem"
+      @edit="emit('edit', $event)"
+    />
+  </VListGroup>
+  <ListItem v-else v-bind="bindings" @edit="emit('edit', $event)" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import ItemGroup from './ItemGroup.vue';
+import ListItem from './ListItem.vue';
+
+const props = defineProps<{
+  item: any;
+  activeItemId: number;
+}>();
+
+const bindings = computed(() => {
+  const { id, isEditable, title } = props.item;
+  return {
+    id,
+    title,
+    index: props.item.index,
+    siblings: props.item.siblings,
+    isEditable,
+    isActive: props.activeItemId === id,
+  };
+});
+
+const emit = defineEmits(['edit']);
+</script>
+
+<style lang="scss" scoped>
+.v-list-group {
+  --list-indent-size: 0.75rem;
+}
+</style>
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
new file mode 100644
index 000000000..d81837559
--- /dev/null
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div
+    v-if="hasItems"
+    :class="{ 'd-flex flex-column align-end': true, 'mt-5': search }"
+  >
+    <VBtn
+      v-if="!search"
+      class="mr-5"
+      color="teal-lighten-4"
+      size="x-small"
+      variant="tonal"
+      @click="toggleExpand"
+    >
+      Toggle all
+    </VBtn>
+  </div>
+  <VList v-model:opened="expanded" slim>
+    <ItemGroup
+      v-for="item in processedItems"
+      :key="item.id"
+      :active-item-id="activeItemId"
+      :item="item"
+      @edit="emit('edit', $event)"
+    />
+  </VList>
+  <VAlert
+    v-if="search && !hasItems"
+    class="mx-4"
+    icon="mdi-information-outline"
+    variant="tonal"
+  >
+    No items found!
+  </VAlert>
+</template>
+
+<script setup lang="ts">
+import { cloneDeep, uniq } from 'lodash-es';
+import { computed, ref, watch } from 'vue';
+
+import ItemGroup from './ItemGroup.vue';
+
+const props = defineProps<{
+  items: any[];
+  activeItemId: number;
+  search: string;
+}>();
+
+const emit = defineEmits(['edit']);
+
+const expanded = ref<number[]>([]);
+
+const flatItems = computed(() => flatTree(props.items));
+
+const processedItems = computed(() => {
+  if (!props.search) return props.items;
+  // clone the items to avoid modifying the original
+  const items = cloneDeep(props.items);
+  return items.filter(searchRecursive);
+});
+
+const hasItems = computed(() => processedItems.value.length > 0);
+
+const expandableItemIds = computed(() => getGroupIds(flatItems.value));
+
+const doesTitleMatchSearch = (title: string) =>
+  title.toLowerCase().includes(props.search.toLowerCase());
+
+const searchRecursive = (item: any): any => {
+  if (doesTitleMatchSearch(item.title)) return item;
+  if (item.children) return item.children.some(searchRecursive);
+  item.isVisible = false;
+  return false;
+};
+
+const isFullyExpanded = computed(
+  () => expandableItemIds.value.length === expanded.value.length,
+);
+
+const toggleExpand = () => {
+  expanded.value = isFullyExpanded.value ? [] : expandableItemIds.value;
+};
+
+const flatTree = (tree: any) =>
+  tree.reduce(
+    (acc: any, it: any) =>
+      it.children?.length
+        ? [...acc, it, ...flatTree(it.children)]
+        : [...acc, it],
+    [],
+  );
+
+const findAncestors = (items: any, id: number, parents: any[] = []): any[] => {
+  const item = items.find((it: any) => it.id === id);
+  if (item) return [...parents, item];
+  return items
+    .map((it: any) =>
+      it.children?.length
+        ? findAncestors(it.children, id, [...parents, it])
+        : [],
+    )
+    .flat()
+    .filter(Boolean);
+};
+
+const getGroupIds = (items: any[]): number[] =>
+  items.filter((it: any) => it.isGroup).map((it) => it.id);
+
+watch(
+  () => props.search,
+  () => {
+    expanded.value = expandableItemIds.value;
+  },
+);
+
+watch(
+  () => props.items,
+  () => {
+    if (expanded.value.length) return;
+    const ancestors = findAncestors(props.items, props.activeItemId);
+    expanded.value = uniq([...expanded.value, ...getGroupIds(ancestors)]);
+  },
+  { deep: true },
+);
+</script>

From 283d9c5508f20078bf3c3e413b00c7d4d883dcb2 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 25 Jul 2025 11:03:15 +0200
Subject: [PATCH 06/14] Tweak Activity Menu

- Adapt for Treview
---
 .../common/ActivityOptions/ActivityMenu.vue     | 17 ++++++++++++-----
 .../editor/Sidebar/TailorTreeview/ListItem.vue  |  7 ++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue b/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
index 22b6a5112..3bcc0e795 100644
--- a/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
+++ b/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <span>
     <VMenu location="left" offset="-40" width="240" contained>
       <template #activator="{ props: menuProps }">
         <VBtn
@@ -7,8 +7,8 @@
           aria-label="Options menu"
           color="primary-lighten-3"
           icon="mdi-dots-vertical"
-          size="small"
           variant="text"
+          :size="activatorSize"
           rounded
         >
         </VBtn>
@@ -47,13 +47,13 @@
       :repository-id="activity.repositoryId"
       @close="showCopyDialog = false"
     />
-  </div>
+  </span>
 </template>
 
 <script lang="ts" setup>
 import { first, sortBy } from 'lodash-es';
-import type { Activity } from '@tailor-cms/interfaces/activity';
 import { InsertLocation } from '@tailor-cms/utils';
+import type { StoreActivity } from '@/stores/activity';
 
 import CopyDialog from '@/components/repository/Outline/CopyActivity/index.vue';
 import CreateDialog from '@/components/repository/Outline/CreateDialog/index.vue';
@@ -64,7 +64,14 @@ const { AddAfter, AddBefore, AddInto } = InsertLocation;
 const activityStore = useActivityStore();
 const currentRepositoryStore = useCurrentRepository();
 
-const props = defineProps<{ activity: StoreActivity }>();
+export interface Props {
+  activity: StoreActivity;
+  activatorSize?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activatorSize: 'small',
+});
 
 const { $eventBus } = useNuxtApp() as any;
 const selectedActivity = useSelectedActivity(props.activity);
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
index 31ece94b3..5f6c6e28f 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -24,11 +24,8 @@
           <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
           <ActivityMenu
             v-show="isHovered"
-            :activity="activity as any"
-            :activator="{
-              size: 'x-small',
-              variant: 'text',
-            }"
+            :activity="activity"
+            activator-size="x-small"
             class="activity-menu ml-2"
             @click.stop
           />

From d3aeaff1b7f9ce866c0484df0885724b43e5c67f Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 25 Jul 2025 11:03:52 +0200
Subject: [PATCH 07/14] =?UTF-8?q?=F0=9F=92=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/backend/repository/index.js      | 2 --
 apps/backend/shared/database/index.js | 3 +--
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/backend/repository/index.js b/apps/backend/repository/index.js
index 7af6faa40..e5599d73b 100644
--- a/apps/backend/repository/index.js
+++ b/apps/backend/repository/index.js
@@ -9,14 +9,12 @@ import { createError } from '#shared/error/helpers.js';
 import db from '#shared/database/index.js';
 import processQuery from '#shared/util/processListQuery.js';
 
-/* eslint-disable */
 import AccessService from '#app/shared/auth/access.service.js';
 import activity from '../activity/index.js';
 import comment from '../comment/index.js';
 import revision from '../revision/index.js';
 import contentElement from '../content-element/index.js';
 import storageRouter from '#shared/storage/storage.router.js';
-/* eslint-enable */
 
 const { Repository, UserGroup } = db;
 const router = express.Router();
diff --git a/apps/backend/shared/database/index.js b/apps/backend/shared/database/index.js
index 5053d56dc..45d3f6d50 100644
--- a/apps/backend/shared/database/index.js
+++ b/apps/backend/shared/database/index.js
@@ -10,7 +10,7 @@ import Sequelize from 'sequelize';
 import sequelizeConfig from '../../sequelize.config.cjs';
 
 // Require models.
-/* eslint-disable */
+
 import User from '../../user/user.model.js';
 import UserGroup from '#app/user-group/userGroup.model.js';
 import UserGroupMember from '#app/user-group/userGroupMember.model.js';
@@ -27,7 +27,6 @@ import Tag from '../../tag/tag.model.js';
 import Hooks from './hooks.js';
 import { wrapMethods } from './helpers.js';
 import config from '#config/database.js';
-/* eslint-enable */
 
 const require = createRequire(import.meta.url);
 const pkg = require('../../package.json');

From 4168e39b1f195ba1b3f72917193e11d04ac3e909 Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 25 Jul 2025 11:10:07 +0200
Subject: [PATCH 08/14] =?UTF-8?q?=F0=9F=92=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/editor/Sidebar/TailorTreeview/ListItem.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
index 5f6c6e28f..5e0e8f40d 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -112,7 +112,6 @@ const onItemClick = (e: any) => {
 
 const reoder = (direction: number) => {
   const activity = activityStore.findById(props.id) as any;
-  console.log('xxx', props.index + direction);
   return activityStore.reorder(activity, {
     items: props.siblings,
     position: props.index + direction,

From 9ca0ff53d564ac20240ad4c6d847515e2a41b1af Mon Sep 17 00:00:00 2001
From: underscope <underscope@gmail.com>
Date: Fri, 25 Jul 2025 12:33:17 +0200
Subject: [PATCH 09/14] Update reorder handler

---
 .../components/editor/Sidebar/TailorTreeview/ListItem.vue | 2 +-
 apps/frontend/app/stores/activity.ts                      | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
index 5e0e8f40d..c18181ce6 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -90,7 +90,7 @@ const activityStore = useActivityStore();
 const listItem = useTemplateRef<HTMLButtonElement>('listItem');
 const isHovered = useElementHover(listItem, {
   delayEnter: 400,
-  delayLeave: 800,
+  delayLeave: 1000,
 });
 
 const activity = activityStore.findById(props.id) as Activity;
diff --git a/apps/frontend/app/stores/activity.ts b/apps/frontend/app/stores/activity.ts
index 8b211893e..bedffe5f6 100644
--- a/apps/frontend/app/stores/activity.ts
+++ b/apps/frontend/app/stores/activity.ts
@@ -123,9 +123,11 @@ export const useActivityStore = defineStore('activities', () => {
   const reorder = async (reorderdActivity: StoreActivity, context: any) => {
     const activity = findById(reorderdActivity.uid);
     if (!activity) return;
-    const position = calculatePosition(context) as number;
-    activity.position = position;
-    const payload = { position: context.newPosition };
+    // If activity is reordered via drag and drop, we need to recalculate its position
+    const position = context.position === undefined
+      ? calculatePosition(context) as number
+      : context.position;
+    const payload = { position: context.newPosition || position };
     const data = await api.reorder(activity.repositoryId, activity.id, payload);
     Object.assign(activity, data);
   };

From 3356ce18dabeb0c7fc597efa32faacb5fe0de666 Mon Sep 17 00:00:00 2001
From: rkusan00 <renato.kusanovic@gmail.com>
Date: Wed, 14 Jan 2026 20:57:41 +0100
Subject: [PATCH 10/14] Add draggable reorder in editor sidebar, and fix drop
 validation

---
 .../editor/Sidebar/ActivityNavigation.vue     |  1 +
 .../Sidebar/TailorTreeview/ItemGroup.vue      | 36 +++++++----
 .../Sidebar/TailorTreeview/ListItem.vue       | 62 +++++--------------
 .../editor/Sidebar/TailorTreeview/index.vue   | 30 ++++++---
 .../repository/Outline/OutlineItem.vue        |  4 +-
 .../repository/[[id]]/root/structure.vue      |  1 +
 apps/frontend/app/stores/activity.ts          | 16 ++---
 .../frontend/app/stores/current-repository.ts | 43 ++++++++-----
 8 files changed, 103 insertions(+), 90 deletions(-)

diff --git a/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue b/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
index fd98df7ee..00163496b 100644
--- a/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
+++ b/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
@@ -40,6 +40,7 @@ const searchInput = ref('');
 
 const attachActivityAttrs = (activity: Activity) => ({
   id: activity.id,
+  uid: activity.uid,
   title: activity.data.name,
   isEditable: !!$schemaService.isEditable(activity.type),
   isGroup: !!$schemaService.getLevel(activity.type)?.subLevels?.length,
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
index 2847c5569..1f9c75229 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
@@ -8,19 +8,32 @@
         @edit="emit('edit', $event)"
       />
     </template>
-    <ItemGroup
-      v-for="(subItem) in item.children"
-      :key="subItem.id"
-      :active-item-id="activeItemId"
-      :item="subItem"
-      @edit="emit('edit', $event)"
-    />
+    <Draggable
+      :data-parent-id="item.id"
+      :list="item.children"
+      :move="repositoryStore.isValidDrop"
+      group="activities"
+      item-key="uid"
+      @update="(data: any) => reorder(data, item.children)"
+      @change="(e: any) => repositoryStore.handleOutlineItemDrag(e, item.id)"
+    >
+      <template #item="{ element }">
+        <ItemGroup
+          :active-item-id="activeItemId"
+          :item="element"
+          @edit="emit('edit', $event)"
+        />
+      </template>
+    </Draggable>
   </VListGroup>
   <ListItem v-else v-bind="bindings" @edit="emit('edit', $event)" />
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import Draggable from 'vuedraggable';
+
+import { useCurrentRepository } from '@/stores/current-repository';
 
 import ItemGroup from './ItemGroup.vue';
 import ListItem from './ListItem.vue';
@@ -30,19 +43,20 @@ const props = defineProps<{
   activeItemId: number;
 }>();
 
+const emit = defineEmits(['edit']);
+
+const repositoryStore = useCurrentRepository();
+const reorder = useOutlineReorder();
+
 const bindings = computed(() => {
   const { id, isEditable, title } = props.item;
   return {
     id,
     title,
-    index: props.item.index,
-    siblings: props.item.siblings,
     isEditable,
     isActive: props.activeItemId === id,
   };
 });
-
-const emit = defineEmits(['edit']);
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
index c18181ce6..5507dbc0f 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -22,36 +22,16 @@
       <template #title>
         <div class="d-flex align-center">
           <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
-          <ActivityMenu
-            v-show="isHovered"
-            :activity="activity"
-            activator-size="x-small"
-            class="activity-menu ml-2"
-            @click.stop
-          />
         </div>
       </template>
       <template #append>
-        <div v-if="isHovered" class="d-flex flex-column align-center">
-          <VBtn
-            :disabled="index === 0"
-            color="primary-lighten-2"
-            icon="mdi-chevron-up"
-            density="compact"
-            variant="text"
-            size="small"
-            @click.stop="reoder(Direction.Up)"
-          />
-          <VBtn
-            :disabled="index === siblings.length - 1"
-            color="primary-lighten-2"
-            icon="mdi-chevron-down"
-            density="compact"
-            variant="text"
-            size="small"
-            @click.stop="reoder(Direction.Down)"
-          />
-        </div>
+        <ActivityMenu
+          v-show="isHovered"
+          :activity="activity"
+          activator-size="x-small"
+          class="activity-menu ml-2"
+          @click.stop
+        />
       </template>
     </VListItem>
   </VExpandTransition>
@@ -65,11 +45,6 @@ import type { Activity } from '@tailor-cms/interfaces/activity';
 
 import ActivityMenu from '~/components/common/ActivityOptions/ActivityMenu.vue';
 
-const Direction = {
-  Up: -1,
-  Down: 1,
-};
-
 const props = defineProps<{
   id: number;
   title: string;
@@ -79,8 +54,6 @@ const props = defineProps<{
   isOpen?: boolean;
   isActive?: boolean;
   activatorProps?: Record<string, any>;
-  index: number; // Location of the item in the list
-  siblings: any[]; // Siblings of the item in the list
 }>();
 
 const emit = defineEmits(['edit']);
@@ -88,10 +61,7 @@ const emit = defineEmits(['edit']);
 const activityStore = useActivityStore();
 
 const listItem = useTemplateRef<HTMLButtonElement>('listItem');
-const isHovered = useElementHover(listItem, {
-  delayEnter: 400,
-  delayLeave: 1000,
-});
+const isHovered = useElementHover(listItem);
 
 const activity = activityStore.findById(props.id) as Activity;
 
@@ -109,17 +79,17 @@ const onItemClick = (e: any) => {
   if (!props.isEditable) return props.activatorProps?.onClick(e);
   emit('edit', props.id);
 };
-
-const reoder = (direction: number) => {
-  const activity = activityStore.findById(props.id) as any;
-  return activityStore.reorder(activity, {
-    items: props.siblings,
-    position: props.index + direction,
-  });
-};
 </script>
 
 <style lang="scss" scoped>
+.list-item {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
 .activity-menu {
   :deep(.v-list-item-title),
   :deep(.v-list-item-title:hover) {
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
index d81837559..b10e47abe 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
@@ -15,13 +15,23 @@
     </VBtn>
   </div>
   <VList v-model:opened="expanded" slim>
-    <ItemGroup
-      v-for="item in processedItems"
-      :key="item.id"
-      :active-item-id="activeItemId"
-      :item="item"
-      @edit="emit('edit', $event)"
-    />
+    <Draggable
+      :list="processedItems"
+      :disabled="!!search"
+      :move="repositoryStore.isValidDrop"
+      group="activities"
+      item-key="uid"
+      @update="(data: any) => reorder(data, processedItems)"
+      @change="(e: any) => repositoryStore.handleOutlineItemDrag(e)"
+    >
+      <template #item="{ element }">
+        <ItemGroup
+          :active-item-id="activeItemId"
+          :item="element"
+          @edit="emit('edit', $event)"
+        />
+      </template>
+    </Draggable>
   </VList>
   <VAlert
     v-if="search && !hasItems"
@@ -36,9 +46,15 @@
 <script setup lang="ts">
 import { cloneDeep, uniq } from 'lodash-es';
 import { computed, ref, watch } from 'vue';
+import Draggable from 'vuedraggable';
+
+import { useCurrentRepository } from '@/stores/current-repository';
 
 import ItemGroup from './ItemGroup.vue';
 
+const repositoryStore = useCurrentRepository();
+const reorder = useOutlineReorder();
+
 const props = defineProps<{
   items: any[];
   activeItemId: number;
diff --git a/apps/frontend/app/components/repository/Outline/OutlineItem.vue b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
index ccadce236..661d2419b 100644
--- a/apps/frontend/app/components/repository/Outline/OutlineItem.vue
+++ b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
@@ -77,10 +77,12 @@
         </VSheet>
       </template>
     </VHover>
-    <div v-if="!isSoftDeleted && isExpanded && hasChildren">
+    <div v-if="!isSoftDeleted && isExpanded && hasSubtypes">
       <Draggable
         v-bind="{ handle: '.activity' }"
+        :data-parent-id="activity.id"
         :list="children"
+        :move="currentRepositoryStore.isValidDrop"
         group="activities"
         item-key="uid"
         @update="(data) => reorder(data, children)"
diff --git a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
index c2d8b9919..7a017f3e7 100644
--- a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
+++ b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
@@ -18,6 +18,7 @@
           <Draggable
             v-bind="{ handle: '.activity' }"
             :list="rootActivities"
+            :move="repositoryStore.isValidDrop"
             class="mt-5"
             group="activities"
             item-key="uid"
diff --git a/apps/frontend/app/stores/activity.ts b/apps/frontend/app/stores/activity.ts
index bedffe5f6..90a6bc90c 100644
--- a/apps/frontend/app/stores/activity.ts
+++ b/apps/frontend/app/stores/activity.ts
@@ -120,15 +120,15 @@ export const useActivityStore = defineStore('activities', () => {
     // Await SSE event for store removal
   }
 
-  const reorder = async (reorderdActivity: StoreActivity, context: any) => {
-    const activity = findById(reorderdActivity.uid);
+  const reorder = async (
+    reorderedActivity: StoreActivity,
+    context: { items: any[]; newPosition: number },
+  ) => {
+    const activity = findById(reorderedActivity.uid);
     if (!activity) return;
-    // If activity is reordered via drag and drop, we need to recalculate its position
-    const position = context.position === undefined
-      ? calculatePosition(context) as number
-      : context.position;
-    const payload = { position: context.newPosition || position };
-    const data = await api.reorder(activity.repositoryId, activity.id, payload);
+    const data = await api.reorder(activity.repositoryId, activity.id, {
+      position: context.newPosition,
+    });
     Object.assign(activity, data);
   };
 
diff --git a/apps/frontend/app/stores/current-repository.ts b/apps/frontend/app/stores/current-repository.ts
index 839f7bd0c..d2c3e15ac 100644
--- a/apps/frontend/app/stores/current-repository.ts
+++ b/apps/frontend/app/stores/current-repository.ts
@@ -140,29 +140,37 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     ancestors.forEach((it) => toggleOutlineItemExpand(it.uid, true));
   };
 
-  // Used for drag & drop of outline activities
+  const isValidDrop = (evt: any): boolean => {
+    const draggedElement = evt.draggedContext?.element;
+    const elementType = draggedElement?.type;
+    if (!elementType) return false;
+    // Allow reordering within the same list
+    if (evt.from === evt.to) return true;
+
+    const targetParentId = evt.to?.dataset?.parentId
+      ? parseInt(evt.to.dataset.parentId, 10)
+      : null;
+
+    const config = taxonomy.value?.find((it: any) => it.type === elementType);
+    if (!config) return false;
+
+    if (targetParentId !== null) {
+      const parent = Activity.findById(targetParentId);
+      if (!parent) return false;
+      const parentConfig = taxonomy.value?.find(
+        (it: any) => it.type === parent.type,
+      );
+      return parentConfig?.subLevels?.includes(elementType) ?? false;
+    }
+    return config.rootLevel ?? false;
+  };
+
   const handleOutlineItemDrag = async (
     context: any = {},
     parentId: number | null = null,
   ) => {
     const { added } = context;
     if (!added?.element?.id) return;
-    const { element } = added;
-    const config = taxonomy.value?.find((it: any) => it.type === element.type);
-    if (!config) return;
-    // Check if the element can be moved to the new parent
-    // type must be in the subLevels of the parent type
-    if (parentId) {
-      const parent = Activity.findById(parentId);
-      if (!parent) return;
-      const parentConfig = taxonomy.value?.find(
-        (it: any) => it.type === parent.type,
-      );
-      if (!parentConfig?.subLevels?.includes(element.type)) return;
-    } else if (!config.rootLevel) {
-      // If parentId is null, the element must be a root level
-      return;
-    }
     const children = schemaConfig.getOutlineChildren(Activity.items, parentId);
     const position = calculatePosition({
       items: children,
@@ -234,6 +242,7 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     toggleOutlineItemExpand,
     toggleOutlineExpand,
     expandOutlineParents,
+    isValidDrop,
     handleOutlineItemDrag,
     getUsers,
     upsertUser,

From b491339cb90cfd35ddbb5cbe66eca6aec00cb785 Mon Sep 17 00:00:00 2001
From: rkusan00 <renato.kusanovic@gmail.com>
Date: Wed, 14 Jan 2026 21:19:19 +0100
Subject: [PATCH 11/14] Fix opened state

---
 .../common/ActivityOptions/ActivityMenu.vue        | 14 ++++++++++++--
 .../editor/Sidebar/TailorTreeview/ListItem.vue     |  4 +++-
 .../components/repository/Outline/OutlineItem.vue  |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue b/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
index 3bcc0e795..9cff43408 100644
--- a/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
+++ b/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
@@ -1,6 +1,12 @@
 <template>
   <span>
-    <VMenu location="left" offset="-40" width="240" contained>
+    <VMenu
+      v-model="isOpen"
+      location="left"
+      offset="-40"
+      width="240"
+      contained
+    >
       <template #activator="{ props: menuProps }">
         <VBtn
           v-bind="menuProps"
@@ -9,7 +15,7 @@
           icon="mdi-dots-vertical"
           variant="text"
           :size="activatorSize"
-          rounded
+          :rounded="rounded"
         >
         </VBtn>
       </template>
@@ -67,15 +73,19 @@ const currentRepositoryStore = useCurrentRepository();
 export interface Props {
   activity: StoreActivity;
   activatorSize?: string;
+  rounded?: boolean | string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   activatorSize: 'small',
+  rounded: 'circle',
 });
 
 const { $eventBus } = useNuxtApp() as any;
 const selectedActivity = useSelectedActivity(props.activity);
 
+const isOpen = defineModel<boolean>({ default: false });
+
 const showCreateDialog = ref(false);
 const showCopyDialog = ref(false);
 const action = ref<InsertLocation>(AddAfter);
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
index 5507dbc0f..4960150c8 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -26,7 +26,8 @@
       </template>
       <template #append>
         <ActivityMenu
-          v-show="isHovered"
+          v-show="isHovered || isMenuOpen"
+          v-model="isMenuOpen"
           :activity="activity"
           activator-size="x-small"
           class="activity-menu ml-2"
@@ -62,6 +63,7 @@ const activityStore = useActivityStore();
 
 const listItem = useTemplateRef<HTMLButtonElement>('listItem');
 const isHovered = useElementHover(listItem);
+const isMenuOpen = ref(false);
 
 const activity = activityStore.findById(props.id) as Activity;
 
diff --git a/apps/frontend/app/components/repository/Outline/OutlineItem.vue b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
index 661d2419b..bf0096859 100644
--- a/apps/frontend/app/components/repository/Outline/OutlineItem.vue
+++ b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
@@ -52,7 +52,7 @@
                 </template>
                 <span>{{ isExpanded ? 'Collapse' : 'Expand' }}</span>
               </VTooltip>
-              <OptionsMenu :activity="activity" class="options-menu" />
+              <OptionsMenu :activity="activity" class="options-menu" rounded />
             </div>
           </template>
           <template v-else>

From 7972f066de9fd0bbbd6b16aedf58ce893951e396 Mon Sep 17 00:00:00 2001
From: rkusan00 <renato.kusanovic@gmail.com>
Date: Thu, 15 Jan 2026 10:22:46 +0100
Subject: [PATCH 12/14] Cleanup

---
 .../components/editor/Sidebar/TailorTreeview/ItemGroup.vue | 1 +
 .../components/editor/Sidebar/TailorTreeview/ListItem.vue  | 4 +---
 .../app/components/editor/Sidebar/TailorTreeview/index.vue | 7 +++++++
 .../app/components/repository/Outline/OutlineItem.vue      | 4 ++--
 .../app/pages/repository/[[id]]/root/structure.vue         | 5 +++++
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
index 1f9c75229..a601f8da0 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
@@ -12,6 +12,7 @@
       :data-parent-id="item.id"
       :list="item.children"
       :move="repositoryStore.isValidDrop"
+      animation="150"
       group="activities"
       item-key="uid"
       @update="(data: any) => reorder(data, item.children)"
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
index 4960150c8..5ef391cd2 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -20,9 +20,7 @@
         />
       </template>
       <template #title>
-        <div class="d-flex align-center">
-          <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
-        </div>
+        <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
       </template>
       <template #append>
         <ActivityMenu
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
index b10e47abe..be9b1127e 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
@@ -19,6 +19,7 @@
       :list="processedItems"
       :disabled="!!search"
       :move="repositoryStore.isValidDrop"
+      animation="150"
       group="activities"
       item-key="uid"
       @update="(data: any) => reorder(data, processedItems)"
@@ -138,3 +139,9 @@ watch(
   { deep: true },
 );
 </script>
+
+<style lang="scss" scoped>
+:deep(.sortable-ghost) {
+  opacity: 0.6;
+}
+</style>
diff --git a/apps/frontend/app/components/repository/Outline/OutlineItem.vue b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
index bf0096859..3324f4c4c 100644
--- a/apps/frontend/app/components/repository/Outline/OutlineItem.vue
+++ b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
@@ -83,6 +83,7 @@
         :data-parent-id="activity.id"
         :list="children"
         :move="currentRepositoryStore.isValidDrop"
+        animation="150"
         group="activities"
         item-key="uid"
         @update="(data) => reorder(data, children)"
@@ -93,7 +94,6 @@
             :activities="activities"
             :activity="element"
             :index="i + 1"
-            class="sub-activity"
           />
         </template>
       </Draggable>
@@ -225,7 +225,7 @@ $background-color: rgb(var(--v-theme-primary-darken-2));
   }
 }
 
-.sub-activity {
+.activity-wrapper .activity-wrapper {
   margin-left: 1.25rem;
 }
 </style>
diff --git a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
index 7a017f3e7..e475f9be9 100644
--- a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
+++ b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
@@ -20,6 +20,7 @@
             :list="rootActivities"
             :move="repositoryStore.isValidDrop"
             class="mt-5"
+            animation="150"
             group="activities"
             item-key="uid"
             @update="(data) => reorder(data, rootActivities)"
@@ -151,6 +152,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.sortable-ghost) {
+  opacity: 0.6;
+}
+
 .structure-page {
   height: 100%;
 }

From 7bbb2cf41ddb6c3cb868f10cdd135e3ff15d92ac Mon Sep 17 00:00:00 2001
From: rkusan00 <renato.kusanovic@gmail.com>
Date: Thu, 15 Jan 2026 10:52:31 +0100
Subject: [PATCH 13/14] Cleanup

---
 packages/utils/src/activity.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/utils/src/activity.ts b/packages/utils/src/activity.ts
index f470ff2c9..eb60a7855 100644
--- a/packages/utils/src/activity.ts
+++ b/packages/utils/src/activity.ts
@@ -65,12 +65,11 @@ export function toTreeFormat(
   const { parentId = null, level = 1, maxLevel = 20 } = _internals;
   if (level > maxLevel) throw new Error('Max level exceeded');
   const parentActivities = filter(activities, { parentId });
-  return filterNodesFn(parentActivities).map((activity, index) => ({
+  return filterNodesFn(parentActivities).map((activity) => ({
     ...activity,
     name: activity.data.name,
     title: activity.data.name,
     level,
-    index,
     children: toTreeFormat(
       activities,
       { filterNodesFn, processNodeFn },
@@ -80,7 +79,6 @@ export function toTreeFormat(
         level: level + 1,
       },
     ),
-    siblings: parentActivities,
     ...(processNodeFn && processNodeFn(activity)),
   }));
 }

From e2326c3feb43ab93793b63a06eeebe8659ca3337 Mon Sep 17 00:00:00 2001
From: rkusan00 <renato.kusanovic@gmail.com>
Date: Fri, 6 Feb 2026 09:18:09 +0100
Subject: [PATCH 14/14] Update typings, revert position calc, address comments

---
 .../Sidebar/TailorTreeview/ItemGroup.vue      |  8 ++--
 .../editor/Sidebar/TailorTreeview/index.vue   |  8 ++--
 .../repository/Outline/OutlineItem.vue        |  8 ++--
 .../app/composables/useOutlineReorder.ts      |  8 ++--
 .../repository/[[id]]/root/structure.vue      |  9 +++--
 apps/frontend/app/stores/activity.ts          |  1 +
 .../frontend/app/stores/current-repository.ts | 40 +++++++++----------
 apps/frontend/app/types/draggable.ts          | 28 +++++++++++++
 apps/frontend/package.json                    |  1 +
 pnpm-lock.yaml                                |  8 ++++
 10 files changed, 80 insertions(+), 39 deletions(-)
 create mode 100644 apps/frontend/app/types/draggable.ts

diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
index a601f8da0..2eef1915d 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
@@ -15,8 +15,8 @@
       animation="150"
       group="activities"
       item-key="uid"
-      @update="(data: any) => reorder(data, item.children)"
-      @change="(e: any) => repositoryStore.handleOutlineItemDrag(e, item.id)"
+      @update="(data: SortableEvent) => reorder(data, item.children)"
+      @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e, item.id)"
     >
       <template #item="{ element }">
         <ItemGroup
@@ -34,10 +34,10 @@
 import { computed } from 'vue';
 import Draggable from 'vuedraggable';
 
-import { useCurrentRepository } from '@/stores/current-repository';
-
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import ItemGroup from './ItemGroup.vue';
 import ListItem from './ListItem.vue';
+import { useCurrentRepository } from '@/stores/current-repository';
 
 const props = defineProps<{
   item: any;
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
index be9b1127e..18d5fa669 100644
--- a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
@@ -22,8 +22,8 @@
       animation="150"
       group="activities"
       item-key="uid"
-      @update="(data: any) => reorder(data, processedItems)"
-      @change="(e: any) => repositoryStore.handleOutlineItemDrag(e)"
+      @update="(data: SortableEvent) => reorder(data, processedItems)"
+      @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e)"
     >
       <template #item="{ element }">
         <ItemGroup
@@ -49,9 +49,9 @@ import { cloneDeep, uniq } from 'lodash-es';
 import { computed, ref, watch } from 'vue';
 import Draggable from 'vuedraggable';
 
-import { useCurrentRepository } from '@/stores/current-repository';
-
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import ItemGroup from './ItemGroup.vue';
+import { useCurrentRepository } from '@/stores/current-repository';
 
 const repositoryStore = useCurrentRepository();
 const reorder = useOutlineReorder();
diff --git a/apps/frontend/app/components/repository/Outline/OutlineItem.vue b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
index 5a9b71e1f..1a093be68 100644
--- a/apps/frontend/app/components/repository/Outline/OutlineItem.vue
+++ b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
@@ -90,8 +90,8 @@
         animation="150"
         group="activities"
         item-key="uid"
-        @update="(data) => reorder(data, children)"
-        @change="(e) => currentRepositoryStore.handleOutlineItemDrag(e, activity.id)"
+        @update="(data: SortableEvent) => reorder(data, children)"
+        @change="(e: ChangeEvent) => onOutlineItemDrop(e, activity.id)"
       >
         <template #item="{ element, index: i }">
           <OutlineItem
@@ -109,18 +109,20 @@
 import { activity as activityUtils } from '@tailor-cms/utils';
 import Draggable from 'vuedraggable';
 import { size } from 'lodash-es';
+import { useDisplay } from 'vuetify';
 
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import ActivityName from '@/components/common/ActivityName.vue';
 import OptionsMenu from '@/components/common/ActivityOptions/ActivityMenu.vue';
 import OutlineItem from '@/components/repository/Outline/OutlineItem.vue';
 import OutlineItemToolbar from '@/components/common/ActivityOptions/ActivityToolbar.vue';
 import type { StoreActivity } from '@/stores/activity';
-import { useDisplay } from 'vuetify';
 
 const { smAndUp } = useDisplay();
 const currentRepositoryStore = useCurrentRepository();
 
 const { taxonomy } = storeToRefs(currentRepositoryStore);
+const { onOutlineItemDrop } = currentRepositoryStore;
 
 interface Props {
   activity: StoreActivity;
diff --git a/apps/frontend/app/composables/useOutlineReorder.ts b/apps/frontend/app/composables/useOutlineReorder.ts
index 8dc521026..9b1fe4b8e 100644
--- a/apps/frontend/app/composables/useOutlineReorder.ts
+++ b/apps/frontend/app/composables/useOutlineReorder.ts
@@ -1,10 +1,12 @@
+import type { SortableEvent } from '@/types/draggable';
 import { useActivityStore } from '@/stores/activity';
 
 export const useOutlineReorder =
   () =>
-    ({ newIndex: newPosition }: { newIndex: number }, items: any[]) => {
+    ({ newIndex }: SortableEvent, items: any[]) => {
+      if (newIndex === undefined) return;
       const activityStore = useActivityStore();
-      const activity = items[newPosition];
-      const context = { items, newPosition };
+      const activity = items[newIndex];
+      const context = { items, newPosition: newIndex };
       return activityStore.reorder(activity, context);
     };
diff --git a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
index 05299add7..13e975651 100644
--- a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
+++ b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
@@ -22,8 +22,8 @@
             animation="150"
             group="activities"
             item-key="uid"
-            @update="(data) => reorder(data, rootActivities)"
-            @change="(e) => repositoryStore.handleOutlineItemDrag(e)"
+            @update="(data: SortableEvent) => reorder(data, rootActivities)"
+            @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e)"
           >
             <template #item="{ element, index }">
               <OutlineItem
@@ -69,6 +69,7 @@ import { filter, find, map } from 'lodash-es';
 import Draggable from 'vuedraggable';
 import { storeToRefs } from 'pinia';
 
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import BrokenReferencesAlert from '@/components/common/BrokenReferencesAlert.vue';
 import OutlineFooter from '@/components/repository/Outline/OutlineFooter.vue';
 import OutlineItem from '@/components/repository/Outline/OutlineItem.vue';
@@ -137,14 +138,14 @@ onMounted(() => {
   if (activityId) {
     repositoryStore.selectActivity(parseInt(activityId as string, 10));
   } else if (rootActivities.value.length) {
-    repositoryStore.selectActivity(rootActivities.value[0].id);
+    repositoryStore.selectActivity(rootActivities.value[0]!.id);
   } else {
     // If there are no activities
     return;
   }
   const isFirstActivitySelected =
     selectedActivity.value &&
-    rootActivities.value[0].id === selectedActivity.value.id;
+    rootActivities.value[0]!.id === selectedActivity.value.id;
   if (!isFirstActivitySelected) {
     scrollToActivity(selectedActivity.value as StoreActivity, 200);
   }
diff --git a/apps/frontend/app/stores/activity.ts b/apps/frontend/app/stores/activity.ts
index 90a6bc90c..7e9695f09 100644
--- a/apps/frontend/app/stores/activity.ts
+++ b/apps/frontend/app/stores/activity.ts
@@ -126,6 +126,7 @@ export const useActivityStore = defineStore('activities', () => {
   ) => {
     const activity = findById(reorderedActivity.uid);
     if (!activity) return;
+    activity.position = calculatePosition(context) as number;
     const data = await api.reorder(activity.repositoryId, activity.id, {
       position: context.newPosition,
     });
diff --git a/apps/frontend/app/stores/current-repository.ts b/apps/frontend/app/stores/current-repository.ts
index 8dc3d2036..3b0f12215 100644
--- a/apps/frontend/app/stores/current-repository.ts
+++ b/apps/frontend/app/stores/current-repository.ts
@@ -7,6 +7,8 @@ import { calculatePosition, InsertLocation } from '@tailor-cms/utils';
 import { useActivityStore } from './activity';
 import { useRepositoryStore } from './repository';
 import { repository as repositoryApi } from '@/api';
+import type { ChangeEvent, MoveEvent } from '@/types/draggable';
+import type { Activity } from '@tailor-cms/interfaces/activity';
 
 const { getOutlineLevels, getSchema } = schemaConfig;
 const { getWorkflow } = workflowConfig;
@@ -144,34 +146,30 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     isSidebarOpen.value = value;
   };
 
-  const isValidDrop = (evt: any): boolean => {
-    const draggedElement = evt.draggedContext?.element;
-    const elementType = draggedElement?.type;
+  const isValidDrop = (
+    { to, from, draggedContext }: MoveEvent<Activity>,
+  ): boolean => {
+    const elementType = draggedContext?.element?.type;
     if (!elementType) return false;
     // Allow reordering within the same list
-    if (evt.from === evt.to) return true;
-
-    const targetParentId = evt.to?.dataset?.parentId
-      ? parseInt(evt.to.dataset.parentId, 10)
+    if (from === to) return true;
+    const targetParentId = to?.dataset?.parentId
+      ? parseInt(to.dataset.parentId, 10)
       : null;
 
-    const config = taxonomy.value?.find((it: any) => it.type === elementType);
+    const config = taxonomy.value?.find((it) => it.type === elementType);
     if (!config) return false;
 
-    if (targetParentId !== null) {
-      const parent = Activity.findById(targetParentId);
-      if (!parent) return false;
-      const parentConfig = taxonomy.value?.find(
-        (it: any) => it.type === parent.type,
-      );
-      return parentConfig?.subLevels?.includes(elementType) ?? false;
-    }
-    return config.rootLevel ?? false;
+    if (targetParentId === null) return config.rootLevel ?? false;
+
+    const parent = Activity.findById(targetParentId);
+    if (!parent) return false;
+    const parentConfig = taxonomy.value?.find((it) => it.type === parent.type);
+    return parentConfig?.subLevels?.includes(elementType) ?? false;
   };
 
-  // Used for drag & drop of outline activities
-  const handleOutlineItemDrag = async (
-    context: any = {},
+  const onOutlineItemDrop = async (
+    context: ChangeEvent<Activity> = {},
     parentId: number | null = null,
   ) => {
     const { added } = context;
@@ -259,7 +257,7 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     toggleOutlineExpand,
     expandOutlineParents,
     isValidDrop,
-    handleOutlineItemDrag,
+    onOutlineItemDrop,
     isSidebarOpen,
     updateSidebar,
     getUsers,
diff --git a/apps/frontend/app/types/draggable.ts b/apps/frontend/app/types/draggable.ts
new file mode 100644
index 000000000..243d5ef95
--- /dev/null
+++ b/apps/frontend/app/types/draggable.ts
@@ -0,0 +1,28 @@
+import type {
+  MoveEvent as SortableMoveEvent,
+  SortableEvent,
+} from 'sortablejs';
+
+export type { SortableEvent };
+
+export interface DragContext<T> {
+  index: number;
+  element: T;
+  futureIndex?: number;
+}
+
+export interface RelatedContext<T> extends DragContext<T> {
+  list: T[];
+  component: any;
+}
+
+export interface MoveEvent<T = any> extends SortableMoveEvent {
+  draggedContext: DragContext<T>;
+  relatedContext: RelatedContext<T>;
+}
+
+export interface ChangeEvent<T = any> {
+  added?: { newIndex: number; element: T };
+  removed?: { oldIndex: number; element: T };
+  moved?: { newIndex: number; oldIndex: number; element: T };
+}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 6891475cd..4b0387e97 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -36,6 +36,7 @@
     "@tailor-cms/meta-element-collection": "workspace:^",
     "@tailor-cms/plugin-collection": "workspace:^",
     "@tailor-cms/utils": "workspace:*",
+    "@types/sortablejs": "^1.15.9",
     "@vee-validate/i18n": "^4.15.1",
     "@vee-validate/rules": "^4.15.1",
     "@vueuse/core": "^14.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b80f087bd..357f91b3a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -409,6 +409,9 @@ importers:
       '@tailor-cms/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@types/sortablejs':
+        specifier: ^1.15.9
+        version: 1.15.9
       '@vee-validate/i18n':
         specifier: ^4.15.1
         version: 4.15.1
@@ -5116,6 +5119,9 @@ packages:
   '@types/shimmer@1.2.0':
     resolution: {integrity: sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==}
 
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
   '@types/tmp@0.2.6':
     resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==}
 
@@ -16743,6 +16749,8 @@ snapshots:
 
   '@types/shimmer@1.2.0': {}
 
+  '@types/sortablejs@1.15.9': {}
+
   '@types/tmp@0.2.6': {}
 
   '@types/tough-cookie@4.0.5': {}