UPD: Key-/Knob-Components

src/components/config/keys/KeyFeedbackConfig.vue

@@ -37,14 +37,10 @@
               {value:2, label: 'Normal'},
               {value:3, label: 'Loud'}]" />
   </ConfigSection>
-  <ConfigSection title="Ring Light" :icon-component="Lightbulb">
-    <PaletteInput v-model="ringColors" />
-  </ConfigSection>
 </template>
 <script setup>
-import { AudioLines, AudioWaveform, GaugeCircle, Lightbulb } from 'lucide-vue-next'
+import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
-import PaletteInput from '@/components/common/PaletteInput.vue'
 import Color from 'color'
 import { ref } from 'vue'
 import TabSelect from '@/components/common/TabSelect.vue'
@@ -81,19 +77,4 @@ const outputRampDampening = ref(2)
 
 const auditoryHapticLevel = ref(2)
 const auditoryMagnitude = ref(2)
-
-const ringColors = ref({
-  primary: {
-    titleKey: 'config_options.light_designer.primary_color',
-    color: Color('#4f25ef'),
-  },
-  secondary: {
-    titleKey: 'config_options.light_designer.secondary_color',
-    color: Color('#1a1498'),
-  },
-  pointer: {
-    titleKey: 'config_options.light_designer.pointer_color',
-    color: Color('#ffa346'),
-  },
-})
 </script>

src/components/config/knob/KnobFeedbackConfig.vue

@@ -0,0 +1,79 @@
+<template>
+  <ConfigSection
+    :title="$t('config_options.feedback_designer.feedback_type.title')"
+    :icon-component="GaugeCircle">
+    <TabSelect v-model="feedbackType" :options="feedbackTypeOptions" />
+  </ConfigSection>
+  <ConfigSection
+    :title="$t('config_options.feedback_designer.haptic_response.title')"
+    :icon-component="AudioWaveform"
+    :show-toggle="true">
+    <SteppedSlider
+      v-model="feedbackStrength"
+      :label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
+    <Separator />
+    <SteppedSlider
+      v-model="bounceBackStrength"
+      :label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
+    <Separator />
+    <SteppedSlider
+      v-model="outputRampDampening"
+      :label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
+  </ConfigSection>
+  <ConfigSection
+    :title="$t('config_options.feedback_designer.auditory_response.title')"
+    :icon-component="AudioLines" :show-toggle="true">
+    <SteppedSlider
+      v-model="auditoryHapticLevel"
+      :label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
+    <Separator />
+    <SteppedSlider
+      v-model="auditoryMagnitude"
+      :label="$t('config_options.feedback_designer.auditory_response.magnitude')"
+      :max="3"
+      :named-positions="[
+              {value:0, label: 'Faint'},
+              {value:1, label: 'Soft'},
+              {value:2, label: 'Normal'},
+              {value:3, label: 'Loud'}]" />
+  </ConfigSection>
+</template>
+<script setup>
+import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
+import ConfigSection from '@/components/common/ConfigSection.vue'
+import { ref } from 'vue'
+import TabSelect from '@/components/common/TabSelect.vue'
+import FdIcon from '@/assets/icons/iconFineDetents.svg'
+import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
+import VfIcon from '@/assets/icons/iconViscousRotation.svg'
+import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
+import SteppedSlider from '@/components/common/SteppedSlider.vue'
+
+const feedbackType = ref('fineDetents') // TODO: replace with actual value
+
+const feedbackTypeOptions = {
+  fineDetents: {
+    icon: FdIcon,
+    titleKey: 'config_options.feedback_designer.feedback_type.fine_detents',
+  },
+  coarseDetents: {
+    icon: CdIcon,
+    titleKey: 'config_options.feedback_designer.feedback_type.coarse_detents',
+  },
+  viscousRotation: {
+    icon: VfIcon,
+    titleKey: 'config_options.feedback_designer.feedback_type.viscous_rotation',
+  },
+  returnToCenter: {
+    icon: RcIcon,
+    titleKey: 'config_options.feedback_designer.feedback_type.return_to_center',
+  },
+}
+
+const feedbackStrength = ref(2)
+const bounceBackStrength = ref(2)
+const outputRampDampening = ref(2)
+
+const auditoryHapticLevel = ref(2)
+const auditoryMagnitude = ref(2)
+</script>

src/components/config/knob/KnobLightConfig.vue

@@ -0,0 +1,27 @@
+<template>
+  <ConfigSection title="Ring Light" :icon-component="Lightbulb">
+    <PaletteInput v-model="ringColors" />
+  </ConfigSection>
+</template>
+<script setup>
+import { Lightbulb } from 'lucide-vue-next'
+import ConfigSection from '@/components/common/ConfigSection.vue'
+import PaletteInput from '@/components/common/PaletteInput.vue'
+import Color from 'color'
+import { ref } from 'vue'
+
+const ringColors = ref({
+  primary: {
+    titleKey: 'config_options.light_designer.primary_color',
+    color: Color('#4f25ef'),
+  },
+  secondary: {
+    titleKey: 'config_options.light_designer.secondary_color',
+    color: Color('#1a1498'),
+  },
+  pointer: {
+    titleKey: 'config_options.light_designer.pointer_color',
+    color: Color('#ffa346'),
+  },
+})
+</script>

src/components/old/MappingConfig.vue

@@ -1,6 +1,6 @@
 <template>
-  <ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
-    <div class="flex font-heading">
+  <ConfigSection title="Map some stuff idk" :icon-component="Keyboard">
+    <div v-if="false" class="flex font-heading">
       <KeySelectButton
         v-for="(option, key) in keySelectOptions" :key="key" :title="$t(option.titleKey)"
         :invert="option.invert" :badge="option.badge"
@@ -84,51 +84,8 @@
     </Command>
     <Separator />
   </ConfigSection>
-
-  <ConfigSection
-    :title="$t('config_options.mapping_configuration.knob_mapping.title')"
-    :icon-component="GaugeCircle">
-    <div class="flex flex-col p-8 pt-4">
-      <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-
-    </div>
-    <Separator />
-    <div class="flex flex-col p-8 pt-4">
-      <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-    </div>
-    <Separator />
-    <div class="flex flex-col p-8 pt-4">
-      <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
-      <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-    </div>
-  </ConfigSection>
 </template>
 <script setup>
-import { Badge } from '@/components/ui/badge'
-import { Tabs } from '@/components/ui/tabs'
 import {
   Command,
   CommandEmpty,
@@ -137,15 +94,14 @@ import {
   CommandItem,
   CommandList, CommandSeparator,
 } from '@/components/ui/command'
-import { Slider } from '@/components/ui/slider'
-import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, Play, Pause } from 'lucide-vue-next'
+import { KeyboardMusic, Squircle, Keyboard } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
 import KeyO from '@/assets/icons/iconKeyOrange.svg'
 import Key from '@/assets/icons/iconKeyWhite.svg'
 import KeyG from '@/assets/icons/iconKeyGrey.svg'
 import KeyD from '@/assets/icons/iconKeyDark.svg'
 import { ref } from 'vue'
-import KeySelectButton from '@/components/config/old/KeySelectButton.vue'
+import KeySelectButton from '@/components/old/KeySelectButton.vue'
 
 const selectedKey = ref('a') // TODO: replace with actual value
 

src/store.js

@@ -19,9 +19,14 @@ import { createPinia, defineStore } from 'pinia'
 import Axios from 'axios'
 import schema from '@/data/profileSchema.json'
 import Ajv from 'ajv'
-import KnobConfig from '@/components/config/knob/KnobConfig.vue'
-import KeyConfig from '@/components/config/keys/KeyConfig.vue'
+import KnobConfig from '@/components/config/knob/KnobFeedbackConfig.vue'
+import KeyConfig from '@/components/config/keys/KeyLightConfig.vue'
 import WIP from '@/components/WIP.vue'
+import MappingConfig from '@/components/old/MappingConfig.vue'
+import KnobFeedbackConfig from '@/components/config/knob/KnobFeedbackConfig.vue'
+import KnobLightConfig from '@/components/config/knob/KnobLightConfig.vue'
+import KeyLightConfig from '@/components/config/keys/KeyLightConfig.vue'
+import KeyFeedbackConfig from '@/components/config/keys/KeyFeedbackConfig.vue'
 
 const ajv = new Ajv()
 
@@ -38,29 +43,25 @@ export const useStore = defineStore('main', {
         knob: {
           mapping: {
             titleKey: 'config_options.mapping_configuration.title',
-            component: KnobConfig,
+            component: MappingConfig,
           },
           feedback: {
             titleKey: 'config_options.feedback_designer.title',
-            component: KnobConfig,
+            component: KnobFeedbackConfig,
           },
           lighting: {
             titleKey: 'config_options.light_designer.title',
-            component: KnobConfig,
+            component: KnobLightConfig,
           },
         },
         key: {
           mapping: {
             titleKey: 'config_options.mapping_configuration.title',
-            component: KeyConfig,
-          },
-          feedback: {
-            titleKey: 'config_options.feedback_designer.title',
-            component: KeyConfig,
+            component: MappingConfig,
           },
           lighting: {
             titleKey: 'config_options.light_designer.title',
-            component: KeyConfig,
+            component: KeyLightConfig,
           },
         },
       },
@@ -159,7 +160,7 @@ export const useStore = defineStore('main', {
     ,
     selectConfigFeature(feature) {
       this.selectedFeature = feature
-      if (!this.configPages[this.currentConfigFeature])
+      if (!this.currentConfigPages[this.currentConfigPage])
         this.setCurrentConfigPage('mapping')
     },
     setCurrentConfigPage(page) {