UPD: Refactoring

src/App.vue

@@ -1,9 +1,9 @@
 <script setup>
 import ProfileManager from '@/components/ProfileManager.vue'
-import DevicePreview from '@/DevicePreview.vue'
+import DevicePreview from '@/components/device-gui/DevicePreview.vue'
-import ConfigPane from '@/ConfigPane.vue'
+import ConfigPane from '@/components/ConfigPane.vue'
-import Navbar from '@/Navbar.vue'
+import Navbar from '@/components/Navbar.vue'
-import ConfigSelect from '@/ConfigSelect.vue'
+import ConfigSelect from '@/components/ConfigSelect.vue'
 import { ref } from 'vue'
 
 const currentConfigPage = ref('program_settings')

src/ConfigPane.vue

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <component :is="configPages[page]" />
-  </div>
-</template>
-<script setup>
-import LEDsConfig from '@/LEDsConfig.vue'
-import ProgramConfig from '@/ProgramConfig.vue'
-import MappingConfig from '@/MappingConfig.vue'
-import HapticConfig from '@/HapticConfig.vue'
-
-const props = defineProps({
-  page: {
-    type: String,
-    default: 'program_settings',
-  },
-})
-
-const configPages = {
-  program_settings: ProgramConfig,
-  feedback_designer: HapticConfig,
-  mapping_configuration: MappingConfig,
-  light_designer: LEDsConfig,
-}
-</script>

src/components/ConfigPane.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div
+      class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40"
+      @mouseenter="$refs.configPaneTitle.scramble(0.15, 100)">
+      <div>
+        <h1 class="text-lg">
+          <ScrambleText ref="configPaneTitle" class="align-middle" :text="$t(`config_options.${page}.title`)" />
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          {{ $t(`config_options.${page}.subtitle`) }}
+        </p>
+      </div>
+    </div>
+    <component :is="configPages[page]" />
+  </div>
+</template>
+<script setup>
+import LEDsConfig from '@/components/config/LEDsConfig.vue'
+import ProgramConfig from '@/components/config/ProgramConfig.vue'
+import MappingConfig from '@/components/config/MappingConfig.vue'
+import HapticConfig from '@/components/config/HapticConfig.vue'
+import ScrambleText from '@/components/effects/ScrambleText.vue'
+
+defineProps({
+  page: {
+    type: String,
+    default: 'program_settings',
+  },
+})
+
+const configPages = {
+  program_settings: ProgramConfig,
+  feedback_designer: HapticConfig,
+  mapping_configuration: MappingConfig,
+  light_designer: LEDsConfig,
+}
+</script>

src/components/ConfigSelect.vue

@@ -10,7 +10,7 @@
       @mouseenter="$refs.configSelect[index].scramble(0.15, 100)">
       <div>
         <h1 class="text-lg" :class="{'text-muted-foreground': config.disabled}">
-          <ScrambleReveal ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
+          <ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
           <Badge
             v-if="config.hasOwnProperty('badgeKey')"
             v-t="config.badgeKey"
@@ -25,7 +25,7 @@
 </template>
 <script setup>
 import { ref } from 'vue'
-import ScrambleReveal from '@/components/ScrambleText.vue'
+import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { Badge } from '@/components/ui/badge/index.js'
 
 const config_tabs = ref([

src/components/ProfileManager.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="p-4">
       <h1 class="text-lg">
-        <ScrambleReveal :text="$t('profiles.title')" />
+        <ScrambleText :text="$t('profiles.title')" />
       </h1>
       <p class="text-xs text-muted-foreground">
         {{ $t('profiles.subtitle') }}
@@ -10,15 +10,19 @@
     </div>
     <Separator />
     <Pop />
+    <DeviceBar />
+    <SchemaTest />
   </div>
 </template>
 <script>
-import Pop from '@/components/patterns/Pop.vue'
+import Pop from '@/components/old/Pop.vue'
-import ScrambleReveal from '@/components/ScrambleText.vue'
+import ScrambleReveal from '@/components/effects/ScrambleText.vue'
 import { Separator } from '@/components/ui/separator/index.js'
+import SchemaTest from '@/components/SchemaTest.vue'
+import DeviceBar from '@/components/device-gui/DeviceBar.vue'
 
 export default {
   name: 'ProfileManager',
-  components: { Separator, Pop, ScrambleReveal },
+  components: { DeviceBar: DeviceBar, SchemaTest, Separator, Pop, ScrambleText: ScrambleReveal },
 }
 </script>

src/components/config/HapticConfig.vue

@@ -30,7 +30,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-fd.svg">
+                  <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')
@@ -40,7 +40,7 @@
             <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">
+                  <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')
@@ -50,7 +50,7 @@
             <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">
+                  <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')
@@ -60,7 +60,7 @@
             <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">
+                  <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') }}

src/components/config/LEDsConfig.vue

@@ -29,7 +29,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-fd.svg">
+                  <img src="../../assets/gui-ico/ico-fd.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Fine Detents
@@ -39,7 +39,7 @@
             <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">
+                  <img src="../../assets/gui-ico/ico-cd.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Coarse Detents
@@ -49,7 +49,7 @@
             <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">
+                  <img src="../../assets/gui-ico/ico-vf.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Viscous Rotation
@@ -59,7 +59,7 @@
             <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">
+                  <img src="../../assets/gui-ico/ico-rc.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Return to Center

src/components/config/MappingConfig.vue

@@ -30,7 +30,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="@/assets/gui-ico/ico-key-o.svg">
+                  <img src="../../assets/gui-ico/ico-key-o.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
@@ -41,7 +41,7 @@
             <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-key.svg">
+                  <img src="../../assets/gui-ico/ico-key.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
@@ -52,7 +52,7 @@
             <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-key-g.svg">
+                  <img src="../../assets/gui-ico/ico-key-g.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
@@ -63,7 +63,7 @@
             <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-key-d.svg">
+                  <img src="../../assets/gui-ico/ico-key-d.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}

src/components/config/ProgramConfig.vue

@@ -30,7 +30,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="w-24 size-w mb-2">
-                  <img src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
+                  <img src="../../assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.program_settings.connection_type.usb')
@@ -40,7 +40,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="w-24 size-w mb-2">
-                  <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
+                  <img src="../../assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.program_settings.connection_type.midi') }}

src/components/device-gui/DevicePreview.vue

@@ -14,9 +14,9 @@
   </div>
 </template>
 <script>
-import QuickPreview from '@/components/patterns/QuickPreview.vue'
+import QuickPreview from '@/components/old/QuickPreview.vue'
-import ScrambleReveal from '@/components/ScrambleText.vue'
+import ScrambleReveal from '@/components/effects/ScrambleText.vue'
-import ConfigSelect from '@/ConfigSelect.vue'
+import ConfigSelect from '@/components/ConfigSelect.vue'
 
 export default {
   name: 'DevicePreview',

src/components/effects/ScrambleText.vue

@@ -28,6 +28,8 @@ const props = defineProps({
   },
 })
 
+let scrambling = false
+
 const content = ref('')
 
 function randomCharacter(characterSet = props.characterSet) {
@@ -35,6 +37,8 @@ function randomCharacter(characterSet = props.characterSet) {
 }
 
 function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props.replaceInterval, fillInterval = props.fillInterval, characterSet = props.characterSet, text = props.text) {
+  if (scrambling) return
+  scrambling = true
   content.value = ''
   const fillContent = function() {
     if (content.value.length < text.length) {
@@ -59,6 +63,8 @@ function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props
           const index = indices[Math.floor(Math.random() * indices.length)]
           content.value = content.value.substring(0, index) + text.charAt(index) + content.value.substring(index + 1)
           setTimeout(replaceContent, replaceInterval * (1 + Math.random()))
+        } else {
+          scrambling = false
         }
       }
       replaceContent()

src/components/old/Pop.vue

@@ -12,18 +12,12 @@ import {
   CommandShortcut,
 } from '@/components/ui/command'
 import { Input } from '@/components/ui/input'
-import PixelBarTest from '@/components/device-gui/PixelBarTest.vue'
+import PixelBarTest from '@/components/device-gui/DeviceBar.vue'
 import SchemaTest from '@/components/SchemaTest.vue'
 </script>
 
 <template>
-
+  <div class="h-60">
-  <!-- Dumping ground for testing components -->
-
-  <PixelBarTest />
-
-  <SchemaTest />
-
     <input
       v-model="defaultName"
       type="text"
@@ -49,7 +43,7 @@ import SchemaTest from '@/components/SchemaTest.vue'
       <CommandSeparator />
 
     </Command>
-
+  </div>
 </template>
 
 <script>