ADD: Prepare draggable implementation

package-lock.json

@@ -29,6 +29,7 @@
         "vee-validate": "^4.12.4",
         "vue": "^3.4.15",
         "vue-i18n": "^9.9.0",
+        "vuedraggable": "^4.1.0",
         "zod": "^3.22.4"
       },
       "devDependencies": {
@@ -9943,6 +9944,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -10905,6 +10911,17 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -18358,6 +18375,11 @@
         "dot-prop": "^8.0.2"
       }
     },
+    "sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -19035,6 +19057,14 @@
         "@vue/devtools-api": "^6.5.0"
       }
     },
+    "vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "requires": {
+        "sortablejs": "1.14.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "vee-validate": "^4.12.4",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.0",
+    "vuedraggable": "^4.1.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/components/profile/ProfileManager.vue

@@ -55,12 +55,14 @@
             v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
             v-model:open="collapse[profileTag]"
             :default-open="true">
+            <!-- TODO: Make profile groups computed instead defining them of using v-for -->
             <CollapsibleTrigger
               class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b">
               <ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
               {{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
             </CollapsibleTrigger>
             <CollapsibleContent>
+              <!-- TODO: Insert draggable component here -->
               <ProfileButton
                 v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
                 :selected="store.selectedProfile?.id === profile.id"