ADD: DragAndDrop component to ta-sidebar

src/components/TransactionSidebar.vue

 <script setup lang="ts">
 const providerRef = useTemplateRef('providerRef')
 defineExpose({ providerRef })
+const actions = ref([
+  {
+    id: 0,
+    title: 'Action 1',
+    description: 'to action 1',
+    position: 0,
+  },
+  {
+    id: 1,
+    title: 'Action 2',
+    description: 'to action 2',
+    position: 1,
+  },
+  {
+    id: 2,
+    title: 'Action 3',
+    description: 'to action 3',
+    position: 2,
+  },
+  {
+    id: 3,
+    title: 'Action 4',
+    description: 'to action 4',
+    position: 3,
+  },
+])
+
+const emptyListPhrase = 'No actions planned'
+
+function clearList() {
+  actions.value = []
+}
 </script>
 
 <template>
@@ -8,53 +40,50 @@ defineExpose({ providerRef })
     <SidebarInset>
       <slot />
     </SidebarInset>
-    <Sidebar collapsible="icon" side="right">
-      <SidebarHeader mt-topbar>
-        Placeholder
+    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 26rem">
+      <SidebarHeader mt-topbar text-center>
+        Planned Actions
       </SidebarHeader>
+      <SidebarSeparator />
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Platform</SidebarGroupLabel>
-          <SidebarMenu />
+        <SidebarGroup class="m-b-2 m-t-2 flex flex-row justify-center">
+          <Button variant="outline" w="1/8" rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none>
+            <IconTooling />
+          </Button>
+          <Button variant="outline" w="1/8" rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+            <IconTooling />
+          </Button>
         </SidebarGroup>
-        <SidebarGroup class="group-data-[collapsible=icon]:hidden">
-          <SidebarGroupLabel>Projects</SidebarGroupLabel>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton as-child>
-                Sample Text
-              </SidebarMenuButton>
-              <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                  <SidebarMenuAction show-on-hover>
-                    <MoreHorizontal />
-                    <span class="sr-only">More</span>
-                  </SidebarMenuAction>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent class="w-48 rounded-lg" side="bottom" align="end">
-                  <DropdownMenuItem>
-                    <Folder class="text-muted-foreground" />
-                    <span>View Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Forward class="text-muted-foreground" />
-                    <span>Share Project</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <Trash2 class="text-muted-foreground" />
-                    <span>Delete Project</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton class="text-sidebar-foreground/70">
-                <MoreHorizontal class="text-sidebar-foreground/70" />
-                <span>More</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
+        <SidebarSeparator/>
+        <SidebarGroup class="m-b-2 flex flex-row justify-center">
+          <div flex flex-row justify-center>
+            <Button variant="outline" w-8rem rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none @click="clearList()">
+              Clear List
+            </Button>
+            <Select>
+              <SelectTrigger rounded-none w="1/7">
+                <SelectValue placeholder="Test" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup class="max-h-35 overflow-y-scroll">
+                  <SelectLabel>Actions to test</SelectLabel>
+                  <SelectItem v-for="action in actions" :key="action.id" :value="action.title">
+                    {{ action.title }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Button variant="outline" w-8rem rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+              Apply
+            </Button>
+          </div>
+        </SidebarGroup>
+        <SidebarSeparator />
+        <SidebarGroup>
+          <DragAndDrop :length="actions.length" :emptyListPhrase="emptyListPhrase">
+            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions">
+            </DragAndDropItem>
+          </DragAndDrop>
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>

src/components/ui/drag-and-drop/DragAndDrop.vue

+
+<script setup lang="ts">
+
+const props = defineProps({
+    length: Number,
+    emptyListPhrase: String
+})
+
+</script>
+<template>
+<div v-if="props.length" container flex flex-col items-center p-t-2 p-b-2>
+    <slot></slot>
+</div>
+<div v-else flex flex-row justify-center><p italic >{{ props.emptyListPhrase }}</p></div>
+</template>
+
+
+
+
+

src/components/ui/drag-and-drop/DragAndDropItem.vue

+<script setup lang="ts">
+
+
+interface Item {
+    id: number
+    [key: string]: any 
+}
+const props = defineProps({
+    item: {
+        type: Object as PropType<Item>,
+            required: true
+    },
+    items: {
+    type: Array as PropType<Item[]>,
+    required: true
+}
+})
+
+const startDrag = (evt: DragEvent, item: Item) => {
+    if(evt.dataTransfer){
+        evt.dataTransfer.dropEffect = 'move'
+        evt.dataTransfer.effectAllowed = 'move'
+        evt.dataTransfer.setData('itemID', item.id.toString())
+    }
+}
+
+const onDrop = (evt: DragEvent, anotherItem: Item) => {
+    if (evt.dataTransfer){
+        const itemID = evt.dataTransfer.getData('itemID')
+        const item = props.items.find((item) => item.id == parseInt(itemID))
+        if (!item) {
+            console.error("Item not found!")
+            return
+        }
+        const oldPosition = item.position
+        const newPosition = anotherItem.position
+        item.position = newPosition
+        anotherItem.position = oldPosition
+        props.items.sort((a, b) => a.position - b.position)
+    }
+}
+
+</script>
+<template>
+    <div @drop="onDrop($event, props.item)" @dragover.prevent @dragenter.prevent draggable="true" @dragstart="startDrag($event, props.item)"  
+    w-86 h-40 m-t-2 m-b-2 rounded-0.5rem flex flex-col items-center p-4 border-1.5 border-black-500 bg-white>
+        <div class="w-100% flex flex-row justify-between">
+            <div class=" w-60%  flex flex-row justify-between items-center">
+                <Checkbox></Checkbox>
+                <h1>{{ props.item.title }}</h1>
+            </div>
+            <div>
+                <IconTooling></IconTooling>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file