From 287444e9b79f298cfcf8a429d99a4fe82bdc4c12 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Tue, 6 Feb 2024 16:47:28 +0100
Subject: [PATCH] ADD: Profile drag&drop (includes config restructure)

---
 src/components/profile/ProfileButton.vue  |  26 +-
 src/components/profile/ProfileManager.vue |  50 +-
 src/data/nanoConfig.json                  | 830 +++++++++++-----------
 src/store.js                              | 157 ++--
 4 files changed, 550 insertions(+), 513 deletions(-)

diff --git a/src/components/profile/ProfileButton.vue b/src/components/profile/ProfileButton.vue
index fdeab34..43a30ae 100644
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -7,7 +7,7 @@
       v-if="nameEditable && editing"
       class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
       :class="{'bg-zinc-300' : selected}"
-      @submit.prevent="profile.name = nameInput; editing=false">
+      @submit.prevent="store.renameProfile(profile.id, nameInput); editing=false">
       <input
         ref="profileNameInput" v-model="nameInput"
         onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
@@ -30,7 +30,7 @@
       'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
       class="flex-1 h-12 rounded-r-lg text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-all"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
-      <span class="ml-2 w-4 mr-2" :class="{'ml-2': !draggable}">
+      <span class="ml-2 w-4 mr-2 cursor-grab" :class="{'ml-2': !draggable}">
         <GripHorizontal
           v-if="draggable"
           :class="{'text-zinc-600': selected,
@@ -98,21 +98,23 @@
 import { Check, Copy, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
 import ScrambleText from '@/components/common/ScrambleText.vue'
 import { nextTick, ref } from 'vue'
+import { useStore } from '@/store'
+
+const store = useStore()
 
 defineEmits(['select', 'duplicate', 'delete'])
 
 const nameSubmitButton = ref(null)
 
-const profile = defineModel({
-  type: Object,
-  required: true,
-  default: () => ({
-    id: '1234',
-    name: 'Profile Name',
-  }),
-})
-
 const props = defineProps({
+  profile: {
+    type: Object,
+    default: () => ({
+      id: '1234',
+      name: 'Profile Name',
+    }),
+    required: true,
+  },
   selected: {
     type: Boolean,
     default: false,
@@ -149,7 +151,7 @@ function onNameInputBlur(e) {
 
 const profileNameInput = ref(null)
 
-const nameInput = ref(profile.value.name)
+const nameInput = ref(props.profile.name)
 
 const editing = ref(props.initEditing)
 
diff --git a/src/components/profile/ProfileManager.vue b/src/components/profile/ProfileManager.vue
index 0edfb52..adbbf33 100644
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -52,23 +52,35 @@
         </div>
         <div v-else>
           <Collapsible
-            v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
-            v-model:open="collapse[profileTag]"
+            v-for="(category, categoryIndex) in store.profileCategories" :key="categoryIndex"
+            v-model:open="collapse[index]"
             :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>
+              {{ category.name }}<span class="font-heading text-sm text-zinc-600"> ({{ category.profiles?.length || 0
+              }})</span>
             </CollapsibleTrigger>
             <CollapsibleContent>
+              <draggable
+                :list="category.profiles"
+                group="profiles"
+                item-key="name"
+                v-bind="dragOptions"
+                @change="(event)=>onProfileDrop(event, categoryIndex)"
+              >
+                <template #item="{ element }">
+                  <ProfileButton
+                    :key="element.id"
+                    :profile="element"
+                    :selected="store.selectedProfile?.id === element.id"
+                    @select="store.selectProfile(element.id); showProfileList=false"
+                    @duplicate="store.duplicateProfile(element.id)"
+                    @delete="store.removeProfile(element.id)" />
+                </template>
+              </draggable>
               <!-- 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"
-                @select="store.selectProfile(profile.id); showProfileList=false"
-                @duplicate="store.duplicateProfile(profile.id)"
-                @delete="store.deleteProfile(profile.id)" />
             </CollapsibleContent>
           </Collapsible>
         </div>
@@ -88,6 +100,7 @@ import ScrambleText from '@/components/common/ScrambleText.vue'
 import { useStore } from '@/store.js'
 import ProfileButton from '@/components/profile/ProfileButton.vue'
 import ProfileConfig from '@/components/profile/ProfileConfig.vue'
+import draggable from 'vuedraggable'
 
 defineProps({
   showFilter: {
@@ -129,6 +142,25 @@ const filteredProfilesByTag = computed(() => {
   return map
 })
 
+const onProfileDrop = (event, categoryIndex) => {
+  if (event.moved) {
+    const profile = event.moved.element
+    const oldIndex = event.moved.oldIndex
+    const newIndex = event.moved.newIndex
+    store.moveProfile(profile.id, oldIndex, newIndex)
+  }
+  if (event.added) {
+    const profile = event.added.element
+    const newIndex = event.added.newIndex
+    store.changeProfileCategory(profile.id, categoryIndex, newIndex)
+  }
+}
+
+const dragOptions = {
+  group: 'profiles',
+  animation: 150,
+}
+
 </script>
 <style scoped>
 [data-state=open] > .chevrot {
diff --git a/src/data/nanoConfig.json b/src/data/nanoConfig.json
index 4c14ea0..bdcbe8b 100644
--- a/src/data/nanoConfig.json
+++ b/src/data/nanoConfig.json
@@ -1,423 +1,443 @@
 {
-  "profiles": [
+  "categories": [
     {
-      "id": "1732",
-      "name": "Official Profile #1",
-      "profileTag": "Binaris",
-      "profileConfig": {
-        "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "pos": 140,
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
+      "name": "Binaris",
+      "profiles": [
+        {
+          "id": "1732",
+          "name": "Official Profile #1",
+          "profileTag": "Binaris",
+          "profileConfig": {
+            "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "pos": 140,
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "secondary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 10
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
         },
-        "secondary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 10
+        {
+          "id": "1232",
+          "name": "DUPLICATE ID",
+          "profileTag": "Binaris",
+          "profileConfig": {
+            "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "pos": 140,
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "secondary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 10
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
         }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
+      ]
     },
     {
-      "id": "5867",
-      "name": "My First Profile 😳",
-      "profileTag": "Custom",
-      "profileConfig": {
-        "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "pos": 140,
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "secondary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 10
+      "name": "Third Party",
+      "profiles": [
+        {
+          "id": "2891",
+          "name": "Color Grading M-2",
+          "profileTag": "Third Party",
+          "profileConfig": {
+            "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "pos": 140,
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "secondary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 10
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
         }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
+      ]
     },
     {
-      "id": "1232",
-      "name": "AN0Th3R Pr0f1l3",
-      "profileTag": "Custom",
-      "profileConfig": {
-        "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "pos": 140,
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
+      "name": "Custom",
+      "profiles": [
+        {
+          "id": "5867",
+          "name": "My First Profile 😳",
+          "profileTag": "Custom",
+          "profileConfig": {
+            "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "pos": 140,
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "secondary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 10
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
         },
-        "secondary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
+        {
+          "id": "1232",
+          "name": "AN0Th3R Pr0f1l3",
+          "profileTag": "Custom",
+          "profileConfig": {
+            "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "pos": 140,
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "secondary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 10
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
         },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 10
+        {
+          "id": "1337",
+          "name": "Brought to you by...",
+          "profileTag": "Custom",
+          "profileConfig": {
+            "profileDesc": "Hwhawdhuawhdaddjwidjaiwdiawjdijaidjiawjdj",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "pos": 140,
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "secondary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 10
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
+        },
+        {
+          "id": "0420",
+          "name": "Overflow Testing Inc.",
+          "profileTag": "Custom",
+          "profileConfig": {
+            "profileDesc": "whaduwhawhdwadhwaudhuwahdu huwadhuawhduhwadhuawhu dwaijdwajiawjdijawidiwajidawidiawjddhawgdjzgesfgkhsfsza",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "pos": 140,
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "secondary": {
+              "h": 255,
+              "s": 255,
+              "v": 100
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 10
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
         }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
+      ]
     },
     {
-      "id": "1232",
-      "name": "DUPLICATE ID",
-      "profileTag": "Binaris",
-      "profileConfig": {
-        "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "pos": 140,
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "secondary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 10
+      "name": "Uncategorized",
+      "profiles": [
+        {
+          "id": "5238",
+          "name": "sdfsdf (Invalid)",
+          "profileTag": "Uncategorized",
+          "profileConfig": {
+            "profileDesc": "",
+            "profileType": 1,
+            "showDesc": true
+          },
+          "feedbackConfig": {
+            "feedbackEn": true,
+            "feedbackType": "fd",
+            "multiRev": false,
+            "feedbackStrength": 1,
+            "endstopStrength": 1,
+            "outputRamp": 10000,
+            "minMaxPos": [
+              0,
+              156
+            ],
+            "secondaryHaptic": true,
+            "secondaryVol": 5
+          },
+          "mappingConfig": {
+            "internalMacro": false,
+            "knobMap": "arrL",
+            "switchA": "shift",
+            "switchB": "ctrl",
+            "switchC": "alt",
+            "switchD": "esc"
+          },
+          "ledConfig": {
+            "ledEnable": true,
+            "ledBrightness": 100,
+            "ledMode": 1,
+            "primary": {
+              "h": 100,
+              "s": 100,
+              "v": 100
+            },
+            "secondary": {
+              "h": 120,
+              "s": 120,
+              "v": 120
+            },
+            "pointer": {
+              "h": 255,
+              "s": 255,
+              "v": 255
+            }
+          },
+          "guiConfig": {
+            "guiEnable": true
+          }
         }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
-    },
-    {
-      "id": "2891",
-      "name": "Color Grading M-2",
-      "profileTag": "Third Party",
-      "profileConfig": {
-        "profileDesc": "KORG MINILOGUE OSCILLATOR 1",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "pos": 140,
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "secondary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 10
-        }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
-    },
-    {
-      "id": "5238",
-      "name": "sdfsdf (Invalid)",
-      "profileTag": "Uncategorized",
-      "profileConfig": {
-        "profileDesc": "",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "minMaxPos": [
-          0,
-          156
-        ],
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 100,
-          "s": 100,
-          "v": 100
-        },
-        "secondary": {
-          "h": 120,
-          "s": 120,
-          "v": 120
-        },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 255
-        }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
-    },
-    {
-      "id": "1337",
-      "name": "Brought to you by...",
-      "profileTag": "Custom",
-      "profileConfig": {
-        "profileDesc": "Hwhawdhuawhdaddjwidjaiwdiawjdijaidjiawjdj",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "pos": 140,
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "secondary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 10
-        }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
-    },
-    {
-      "id": "0420",
-      "name": "Overflow Testing Inc.",
-      "profileTag": "Custom",
-      "profileConfig": {
-        "profileDesc": "whaduwhawhdwadhwaudhuwahdu huwadhuawhduhwadhuawhu dwaijdwajiawjdijawidiwajidawidiawjddhawgdjzgesfgkhsfsza",
-        "profileType": 1,
-        "showDesc": true
-      },
-      "feedbackConfig": {
-        "feedbackEn": true,
-        "feedbackType": "fd",
-        "multiRev": false,
-        "feedbackStrength": 1,
-        "endstopStrength": 1,
-        "outputRamp": 10000,
-        "pos": 140,
-        "secondaryHaptic": true,
-        "secondaryVol": 5
-      },
-      "mappingConfig": {
-        "internalMacro": false,
-        "knobMap": "arrL",
-        "switchA": "shift",
-        "switchB": "ctrl",
-        "switchC": "alt",
-        "switchD": "esc"
-      },
-      "ledConfig": {
-        "ledEnable": true,
-        "ledBrightness": 100,
-        "ledMode": 1,
-        "primary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "secondary": {
-          "h": 255,
-          "s": 255,
-          "v": 100
-        },
-        "pointer": {
-          "h": 255,
-          "s": 255,
-          "v": 10
-        }
-      },
-      "guiConfig": {
-        "guiEnable": true
-      }
+      ]
     }
   ]
 }
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index 1a93301..5056e78 100644
--- a/src/store.js
+++ b/src/store.js
@@ -13,7 +13,7 @@ const ajv = new Ajv()
 export const useStore = defineStore('main', {
   state: () => {
     return {
-      profiles: [],
+      profileCategories: [],
       selectedProfileId: null,
       connected: false,
       selectedFeature: 'knob',
@@ -22,108 +22,97 @@ export const useStore = defineStore('main', {
       configPages: {
         knob: {
           mapping: {
-            titleKey: 'config_options.mapping_configuration.title',
-            component: MappingConfig,
+            titleKey: 'config_options.mapping_configuration.title', component: MappingConfig,
+          }, feedback: {
+            titleKey: 'config_options.feedback_designer.title', component: KnobFeedbackConfig,
+          }, lighting: {
+            titleKey: 'config_options.light_designer.title', component: KnobLightConfig,
           },
-          feedback: {
-            titleKey: 'config_options.feedback_designer.title',
-            component: KnobFeedbackConfig,
-          },
-          lighting: {
-            titleKey: 'config_options.light_designer.title',
-            component: KnobLightConfig,
-          },
-        },
-        key: {
+        }, key: {
           mapping: {
-            titleKey: 'config_options.mapping_configuration.title',
-            component: MappingConfig,
-          },
-          lighting: {
-            titleKey: 'config_options.light_designer.title',
-            component: KeyLightConfig,
+            titleKey: 'config_options.mapping_configuration.title', component: MappingConfig,
+          }, lighting: {
+            titleKey: 'config_options.light_designer.title', component: KeyLightConfig,
           },
         },
       },
     }
-  },
-  getters:
-    {
-      profileIds: (state) => state.profiles.map(p => p.id),
-      selectedProfile: (state) => state.profiles.find(p => p.id === state.selectedProfileId),
-      currentConfigComponent: (state) => state.configPages[state.selectedFeature][state.currentConfigPage]?.component || WIP,
-      currentConfigPages: (state) => state.configPages[state.selectedFeature] || {},
-    }
-  ,
-  actions: {
+  }, getters: {
+    profiles: (state) => state.profileCategories.flatMap(c => c.profiles),
+    profileIds: (state) => state.profiles.map(p => p.id),
+    selectedProfileCategory: (state) => state.profileCategories.find(c => c.profiles.find(p => p.id === state.selectedProfileId)),
+    selectedProfile: (state) => state.profiles.find(p => p.id === state.selectedProfileId),
+    currentConfigComponent: (state) => state.configPages[state.selectedFeature][state.currentConfigPage]?.component || WIP,
+    currentConfigPages: (state) => state.configPages[state.selectedFeature] || {},
+  }, actions: {
     selectProfile(id) {
       if (!this.profileIds.includes(id)) return false
       this.selectedProfileId = id
       return true
-    }
-    ,
-    addProfile() {
-      console.log('addProfile is not implemented')
-    }
-    ,
-    duplicateProfile(id) {
-      const originalProfile = this.profiles.find(p => p.id === id)
+    }, addProfile(profile, categoryIndex, newIndex) {
+      const category = this.profileCategories[categoryIndex]
+      category.profiles.splice(newIndex, 0, profile)
+    }, removeProfile(profileId) {
+      const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
+      const index = category.profiles.findIndex(p => p.id === profileId)
+      category.profiles.splice(index, 1)
+    }, duplicateProfile(profileId) {
+      const originalProfile = this.profiles.find(p => p.id === profileId)
       const newProfile = JSON.parse(JSON.stringify(originalProfile))
       newProfile.id = this.newProfileId(originalProfile.id)
       newProfile.name = this.newProfileName(originalProfile.name)
-      this.profiles.push(newProfile)
-      this.selectedProfileId = newProfile.id
+      const category = this.categories.find(c => c.profiles.find(p => p.id === profileId))
+      category.profiles.push(newProfile)
       return newProfile.id
-    }
-    ,
-    deleteProfile(id) {
-      const index = this.profiles.findIndex(p => p.id === id)
-      if (index >= 0) {
-        this.profiles.splice(index, 1)
-        if (this.selectedProfileId === id) {
-          this.selectedProfileId = this.profiles[0]?.id || null
-        }
-        return true
-      }
-      return false
-    }
-    ,
-    fetchProfiles() {
-      Axios.get('http://localhost:3001/profiles').then((res) => {
-        const profiles = res.data
-        console.log(profiles)
+    }, moveProfile(profileId, oldIndex, newIndex) {
+      // Find the profile category, then swap the profiles at the old and new indices
+      const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
+      const tmpProfile = category.profiles[newIndex]
+      category.profiles[newIndex] = category.profiles[oldIndex]
+      category.profiles[newIndex] = tmpProfile
+    }, changeProfileCategory(profileId, newCategoryIndex, newIndex) {
+      const profile = this.profiles.find(p => p.id === profileId)
+      const oldCategory = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
+      const newCategory = this.profileCategories[newCategoryIndex]
+      oldCategory.profiles = oldCategory.profiles.filter(p => p.id !== profileId)
+      newCategory.profiles.splice(newIndex, 0, profile)
+    }, renameProfile(profileId, newName) {
+      const profile = this.profiles.find(p => p.id === profileId)
+      profile.name = newName
+    }, fetchProfiles() {
+      Axios.get('http://localhost:3001/categories').then((res) => {
+        const categories = res.data
+        console.log(categories)
         const ids = new Set()
         const validate = ajv.compile(schema)
         this.$patch({
-          profiles: profiles.filter((profile) => {
-            if (!validate(profile)) {
-              console.error('Failed to validate profile: ' + profile.name, validate.errors)
-              return false
-            }
-            if (ids.has(profile.id)) {
-              console.error('Duplicate profile id: ' + profile.id + ' for profile: ' + profile.name)
-              return false
-            }
-            ids.add(profile.id)
-            return true
-          }),
-          //selectedProfileId: profiles[0]?.id || null,
+          profileCategories: categories.map((category) => ({
+            name: category.name, profiles: category.profiles.filter((profile) => {
+              // TODO: Validation seems to be broken right now
+              if (!validate(profile)) {
+                console.error('Failed to validate profile: ' + profile.name, validate.errors)
+                return false
+              }
+              if (ids.has(profile.id)) {
+                console.error('Duplicate profile id: ' + profile.id + ' for profile: ' + profile.name)
+                return false
+              }
+              ids.add(profile.id)
+              return true
+            }),
+          })), selectedProfileId: categories[0]?.profiles[0]?.id || null,
         })
       }).catch((err) => {
         console.error(err)
       })
-    }
-    ,
-    newProfileName(originalName = '') {
+    }, newProfileName(originalName = '') {
       let name = originalName
       let i = 1
       while (this.profiles.find(p => p.name === name)) {
         name = `${originalName} (${i++})`
       }
       return name
-    }
-    ,
-    newProfileId(originalId = '') {
+    }, newProfileId(originalId = '') {
       let id = originalId
       if (originalId) {
         do {
@@ -135,21 +124,15 @@ export const useStore = defineStore('main', {
         } while (this.profileIds.includes(id))
       }
       return id
-    }
-    ,
-    selectConfigFeature(feature) {
+    }, selectConfigFeature(feature) {
       this.selectedFeature = feature
-      if (!this.currentConfigPages[this.currentConfigPage])
-        this.setCurrentConfigPage('mapping')
-    },
-    selectKey(key) {
+      if (!this.currentConfigPages[this.currentConfigPage]) this.setCurrentConfigPage('mapping')
+    }, selectKey(key) {
       this.selectedKey = key
       this.selectConfigFeature('key')
-    },
-    setCurrentConfigPage(page) {
+    }, setCurrentConfigPage(page) {
       this.currentConfigPage = page
-    },
-    setConnected(connected) {
+    }, setConnected(connected) {
       this.connected = connected
     },
   },