UPD: Styling

src/App.vue

@@ -4,17 +4,28 @@ import DevicePreview from '@/components/device/DevicePreview.vue'
 import ConfigPane from '@/components/config/ConfigPane.vue'
 import Navbar from '@/components/Navbar.vue'
 import ConfigSelect from '@/components/config/ConfigSelect.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import { Bolt } from 'lucide-vue-next'
 import { useStore } from '@/store'
 
-const currentConfigPage = ref('profile_settings')
+const currentConfigPage = ref(0)
 
 const store = useStore()
 
 store.fetchProfiles()
 
+const windowWidth = ref(window.innerWidth)
+const windowHeight = ref(window.innerHeight)
+
+onMounted(() => {
+  window.addEventListener('resize', e => {
+    windowWidth.value = window.innerWidth
+    windowHeight.value = window.innerHeight
+  })
+})
+
+
 </script>
 <template>
   <main class="select-none w-screen h-screen flex flex-col">
@@ -28,4 +39,7 @@ store.fetchProfiles()
         :page="currentConfigPage" />
     </div>
   </main>
+  <p
+    class="absolute bottom-2 left-0 right-0 text-center font-heading text-white opacity-15">
+    {{ windowWidth }} x {{ windowHeight }}</p>
 </template>

src/components/Navbar.vue

@@ -51,7 +51,7 @@
           <MenubarTrigger class="app-titlebar-button text-muted-foreground">Help</MenubarTrigger>
         </MenubarMenu>
       </div>
-      <div class="text-sm">
+      <div class="text-sm text-nowrap">
         Status: <span class="text-zinc-200">Connected :: Syncing...</span>
       </div>
       <Button variant="outline" class="app-titlebar-button">

src/components/config/ConfigPane.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
     <div class="flex font-heading">
-      <button
-        v-for="(option, key) in configPageOptions" :key="key"
-        class="flex-1 p-4 items-center text-center"
-        :class="currentPage!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
-        @click="currentPage = key">
-        {{ $t(option.titleKey) }}
-      </button>
+      <div v-for="(option, index) in configPageOptions" :key="index" class="flex items-center">
+        <button
+          class="flex-1 p-4 items-center text-center group"
+          :class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200 bg-zinc-950'"
+          @click="currentPage = index">
+          {{ $t(option.titleKey) }}
+        </button>
+        <div
+          class="group-hover:h-full"
+          :class="index===currentPage || index+1===currentPage ? 'h-full' : 'h-7'">
+          <Separator orientation="vertical" />
+        </div>
+      </div>
     </div>
     <div class="grow overflow-y-auto">
       <component :is="configPageOptions[currentPage].component" />
@@ -19,30 +25,32 @@ import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'
 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 { Separator } from '@/components/ui/separator'
+import { ref } from 'vue'
 
 defineProps({
   currentPage: {
-    type: String,
-    default: 'profileConfig',
+    type: Number,
+    default: '0',
   },
 })
 
-const configPageOptions = {
-  profileConfig: {
+const configPageOptions = [
+  {
     titleKey: 'config_options.profile_settings.title',
     component: ProfileConfig,
   },
-  hapticConfig: {
+  {
     titleKey: 'config_options.feedback_designer.title',
     component: HapticConfig,
   },
-  mappingConfig: {
+  {
     titleKey: 'config_options.mapping_configuration.title',
     component: MappingConfig,
   },
-  ledsConfig: {
+  {
     titleKey: 'config_options.light_designer.title',
     component: LEDsConfig,
   },
-}
+]
 </script>

src/components/config/pages/LEDsConfig.vue

@@ -1,18 +1,32 @@
 <template>
   <ConfigSection
-    :title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
+    title="Ring Lights" :icon-component="Lightbulb"
     :show-toggle="true">
     <h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
     <div class="px-6 py-2">
       <Slider v-model="brightnessSliderModel" max="100" class="h-10" />
     </div>
   </ConfigSection>
-  <ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
-    <PaletteInput v-model="colors" />
+  <ConfigSection
+    title="Key Lights" :icon-component="Lightbulb"
+    :show-toggle="true">
+    <h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
+    <div class="px-6 py-2">
+      <Slider v-model="brightnessSliderModel" max="100" class="h-10" />
+    </div>
+  </ConfigSection>
+  <ConfigSection title="Ring Colors" :icon-component="Circle">
+    <PaletteInput v-model="ringColors" />
+  </ConfigSection>
+  <ConfigSection title="Key Colors" :icon-component="PanelBottom">
+    <PaletteInput v-model="keyColors" />
+  </ConfigSection>
+  <ConfigSection title="Key Colors (Pressed)" :icon-component="PanelBottomClose">
+    <PaletteInput v-model="keyColors" />
   </ConfigSection>
 </template>
 <script setup>
-import { Lightbulb, Palette } from 'lucide-vue-next'
+import { Lightbulb, PanelBottomClose, Circle, PanelBottom } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import PaletteInput from '@/components/config/PaletteInput.vue'
 import Color from 'color'
@@ -29,7 +43,7 @@ const brightnessSliderModel = computed({
   set: (val) => ledConfig.value.ledBrightness = val[0],
 })
 
-const colors = ref({
+const ringColors = ref({
   primary: {
     key: 'config_options.light_designer.primary_color',
     color: computed({
@@ -52,4 +66,23 @@ const colors = ref({
     }),
   },
 })
+
+const keyColors = ref({
+  a: {
+    key: 'a',
+    color: Color('#ff2a7d'),
+  },
+  b: {
+    key: 'b',
+    color: Color('#f32a9c'),
+  },
+  c: {
+    key: 'c',
+    color: Color('#d12ab1'),
+  },
+  d: {
+    key: 'd',
+    color: Color('#a92ac3'),
+  },
+})
 </script>

src/renderer.js

@@ -47,4 +47,7 @@ const i18n = createI18n({
 const app = createApp(App)
 app.use(pinia)
 app.use(i18n)
+
+app.config.globalProperties.window = window
+
 app.mount('#app')