ADD: Dev Playground (for testing components) & LEDRing

src/components/config/ConfigPane.vue

@@ -22,6 +22,7 @@ import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
 import MappingConfig from '@/components/config/pages/MappingConfig.vue'
 import HapticConfig from '@/components/config/pages/HapticConfig.vue'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
+import DevPlayground from '@/components/config/pages/DevPlayground.vue'
 
 defineProps({
   page: {
@@ -35,5 +36,6 @@ const configPages = {
   feedback_designer: HapticConfig,
   mapping_configuration: MappingConfig,
   light_designer: LEDsConfig,
+  dev_playground: DevPlayground,
 }
 </script>

src/components/config/ConfigSelect.vue

@@ -8,7 +8,7 @@
       :class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
       @click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
       <div class="w-full">
-        <h1 class="text-lg" :class="{'text-muted-foreground': config.disabled}">
+        <h1 class="text-lg text-nowrap" :class="{'text-muted-foreground': config.disabled}">
           <ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
           <Badge
             v-if="config.hasOwnProperty('badgeKey')"
@@ -39,6 +39,7 @@ const config_tabs = ref([
     disabled: true,
     badgeKey: 'common.coming_soon',
   },
+  { id: 'dev_playground' },
 ])
 
 const current_tab = defineModel({

src/components/config/pages/DevPlayground.vue

@@ -0,0 +1,8 @@
+<template>
+  <WIP />
+  <DeviceLEDRing />
+</template>
+<script setup>
+import WIP from '@/components/WIP.vue'
+import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
+</script>