UPD: Feedback type buttons

src/components/config/FeedbackTypeButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <button
+    class="flex-1 flex flex-col justify-center items-center py-2"
+    :class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
+    'hover:bg-zinc-800 text-muted-foreground' : !selected}"
+    @click="$emit('select'); $refs.title.scramble()">
+    <img
+      draggable="false"
+      :src="icon" alt="connection-type-icon"
+      class="p-4"
+      :class="{'invert': selected}">
+    <ScrambleText ref="title" class="text-xs text-wrap" :text="title" />
+  </button>
+</template>
+<script setup>
+import ScrambleText from '@/components/effects/ScrambleText.vue'
+
+defineEmits(['select'])
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: [String, Object, Function],
+    default: '',
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>

src/components/config/pages/HapticConfig.vue

@@ -5,78 +5,11 @@
         <ConfigSection
           :title="$t('config_options.feedback_designer.feedback_type.title')"
           :icon-component="GaugeCircle">
-          <Tabs default-value="fd">
+          <div class="flex font-heading">
-            <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
+            <FeedbackTypeButton
-              <TabsTrigger value="fd">
+              v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
-                <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+              :icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
-                  <div class="size-16 mb-2">
-                    <img src="../../../assets/gui-ico/ico-fd.svg">
           </div>
-                  <span
-                    class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
-                    }}</span>
-                </div>
-              </TabsTrigger>
-              <TabsTrigger value="cd">
-                <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                  <div class="size-16 mb-2">
-                    <img src="../../../assets/gui-ico/ico-cd.svg">
-                  </div>
-                  <span
-                    class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
-                    }}</span>
-                </div>
-              </TabsTrigger>
-              <TabsTrigger value="vr">
-                <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                  <div class="size-16 mb-2">
-                    <img src="../../../assets/gui-ico/ico-vf.svg">
-                  </div>
-                  <span
-                    class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
-                    }}</span>
-                </div>
-              </TabsTrigger>
-              <TabsTrigger value="rt">
-                <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                  <div class="size-16 mb-2">
-                    <img src="../../../assets/gui-ico/ico-rc.svg">
-                  </div>
-                  <span class="text-xs leading-3 text-wrap">
-                              {{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}
-                            </span>
-                </div>
-              </TabsTrigger>
-            </TabsList>
-
-          </Tabs>
-
-          <Separator />
-          <div class="flex flex-col p-8 pt-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono h-8 text-center">{{ $t('config_options.feedback_designer.total_positions')
-                        }}</span>
-
-            <div class="flex w-full max-w-sm items-center gap-0">
-              <Button
-                type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
-                @click="count--">
-                -
-              </Button>
-              <Input
-                id="positions"
-                v-model="count"
-                class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
-                type="number" placeholder="10" max="65535" min="10" />
-              <Button
-                type="submit" class="rounded-none text-xl font-pixellg font-bold"
-                @click="count++">
-                +
-              </Button>
-            </div>
-
-          </div>
-          <Separator />
         </ConfigSection>
         <ConfigSection
           :title="$t('config_options.feedback_designer.haptic_response.title')"
@@ -97,19 +30,9 @@
         <ConfigSection
           :title="$t('config_options.feedback_designer.auditory_response.title')"
           :icon-component="AudioLines" :show-toggle="true">
-          <div class="flex flex-col p-8 pt-4">
+          <SteppedSlider
-            <span
+            v-model="auditoryHapticLevel"
-              class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.haptic_level')
+            :label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
-              }}</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 />
           <SteppedSlider
             v-model="auditoryMagnitude"
@@ -128,12 +51,36 @@
 </template>
 <script setup>
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
-import { Tabs } from '@/components/ui/tabs/index.js'
-import { Slider } from '@/components/ui/slider/index.js'
 import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import SteppedSlider from '@/components/config/SteppedSlider.vue'
 import { ref } from 'vue'
+import FdIcon from '@/assets/gui-ico/ico-fd.svg'
+import CdIcon from '@/assets/gui-ico/ico-cd.svg'
+import VfIcon from '@/assets/gui-ico/ico-vf.svg'
+import RcIcon from '@/assets/gui-ico/ico-rc.svg'
+import FeedbackTypeButton from '@/components/config/FeedbackTypeButton.vue'
+
+const feedbackType = ref('usb') // 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)