UPD: Optionally foldable sections

src/App.vue

@@ -5,6 +5,8 @@ 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 ConfigSection from '@/components/config/ConfigSection.vue'
+import { Bolt } from 'lucide-vue-next'
 
 const currentConfigPage = ref('profile_settings')
 
@@ -13,14 +15,16 @@ const currentConfigPage = ref('profile_settings')
   <main class="select-none">
     <Navbar />
     <div class="flex flex-row">
-      <ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" style="width: 20rem"/>
+      <ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" style="width: 20rem" />
       <div class="border-solid border-0 border-r" style="width: 25rem">
         <DevicePreview />
-        <ConfigSelect v-model="currentConfigPage" />
+        <ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
+          <ConfigSelect v-model="currentConfigPage" />
+        </ConfigSection>
       </div>
       <ConfigPane
         :page="currentConfigPage"
-        class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30"/>
+        class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
     </div>
   </main>
 </template>

src/components/config/ConfigSection.vue

@@ -5,14 +5,13 @@
         class="flex-1 flex items-center px-4"
         :class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
         @click="toggle = !toggle">
-        <component :is="iconComponent" class="h-4 w-4" />
-        <h2 class="text-sm px-2 py-4">{{ title }}</h2>
+        <component :is="iconComponent" v-if="iconComponent" class="h-4 w-4 mr-2" />
+        <h2 class="text-sm py-4">{{ title }}</h2>
         <Switch
           v-if="showToggle" :checked="toggle"
           class="ml-auto" @click.stop="toggle=!toggle" />
       </div>
-
-      <CollapsibleTrigger class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
+      <CollapsibleTrigger v-if="foldable" class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
         <ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
       </CollapsibleTrigger>
     </div>
@@ -41,12 +40,16 @@ defineProps({
   },
   iconComponent: {
     type: [String, Object],
-    default: 'div',
+    default: undefined,
   },
   showToggle: {
     type: Boolean,
     default: false,
   },
+  foldable: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 </script>

src/components/device/DevicePreview.vue

@@ -31,9 +31,6 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-      <h2>{{ $t('config_options.title') }}</h2>
-    </div>
   </div>
 </template>
 <script>