From 351f1435af35385c0434405facb3970c5a5670de Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 29 Jan 2024 16:08:31 +0100
Subject: [PATCH] UPD: Redo main col layout

---
 src/App.vue                                   |  10 +-
 src/components/config/pages/HapticConfig.vue  |  84 +++--
 src/components/config/pages/LEDsConfig.vue    |  27 +-
 src/components/config/pages/MappingConfig.vue | 316 +++++++++---------
 src/components/config/pages/ProfileConfig.vue |  96 +++---
 src/components/device/DevicePreview.vue       |  67 ++--
 6 files changed, 272 insertions(+), 328 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0eeb29a..7375e12 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,17 +14,17 @@ const currentConfigPage = ref('profile_settings')
 <template>
   <main class="select-none">
     <Navbar />
-    <div class="flex flex-row">
-      <ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30"/>
-      <div class="border-solid border-0 border-r" style="width: 25rem">
+    <div class="grid grid-cols-11">
+      <ProfileManager class="col-span-3 border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
+      <div class="col-span-4 border-solid border-0 border-r">
         <DevicePreview />
         <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="col-span-4 border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
+        :page="currentConfigPage" />
     </div>
   </main>
 </template>
\ No newline at end of file
diff --git a/src/components/config/pages/HapticConfig.vue b/src/components/config/pages/HapticConfig.vue
index 75f5259..d70e1c6 100644
--- a/src/components/config/pages/HapticConfig.vue
+++ b/src/components/config/pages/HapticConfig.vue
@@ -1,56 +1,48 @@
 <template>
-  <TabsContent value="haptic-config" class="mt-0">
-    <div class="w-96 bg-zinc-900 bg-opacity-40">
-      <ScrollArea class="h-[720px]">
-        <ConfigSection
-          :title="$t('config_options.feedback_designer.feedback_type.title')"
-          :icon-component="GaugeCircle">
-          <div class="flex font-heading">
-            <FeedbackTypeButton
-              v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
-              :icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
-          </div>
-        </ConfigSection>
-        <ConfigSection
-          :title="$t('config_options.feedback_designer.haptic_response.title')"
-          :icon-component="AudioWaveform"
-          :show-toggle="true">
-          <SteppedSlider
-            v-model="feedbackStrength"
-            :label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
-          <Separator />
-          <SteppedSlider
-            v-model="bounceBackStrength"
-            :label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
-          <Separator />
-          <SteppedSlider
-            v-model="outputRampDampening"
-            :label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
-        </ConfigSection>
-        <ConfigSection
-          :title="$t('config_options.feedback_designer.auditory_response.title')"
-          :icon-component="AudioLines" :show-toggle="true">
-          <SteppedSlider
-            v-model="auditoryHapticLevel"
-            :label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
-          <Separator />
-          <SteppedSlider
-            v-model="auditoryMagnitude"
-            :label="$t('config_options.feedback_designer.auditory_response.magnitude')"
-            :max="3"
-            :named-positions="[
+  <ConfigSection
+    :title="$t('config_options.feedback_designer.feedback_type.title')"
+    :icon-component="GaugeCircle">
+    <div class="flex font-heading">
+      <FeedbackTypeButton
+        v-for="(option, key) in feedbackTypeOptions" :key="key" :title="$t(option.titleKey)"
+        :icon="option.icon" :selected="feedbackType===key" @select="feedbackType=key" />
+    </div>
+  </ConfigSection>
+  <ConfigSection
+    :title="$t('config_options.feedback_designer.haptic_response.title')"
+    :icon-component="AudioWaveform"
+    :show-toggle="true">
+    <SteppedSlider
+      v-model="feedbackStrength"
+      :label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
+    <Separator />
+    <SteppedSlider
+      v-model="bounceBackStrength"
+      :label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
+    <Separator />
+    <SteppedSlider
+      v-model="outputRampDampening"
+      :label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
+  </ConfigSection>
+  <ConfigSection
+    :title="$t('config_options.feedback_designer.auditory_response.title')"
+    :icon-component="AudioLines" :show-toggle="true">
+    <SteppedSlider
+      v-model="auditoryHapticLevel"
+      :label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
+    <Separator />
+    <SteppedSlider
+      v-model="auditoryMagnitude"
+      :label="$t('config_options.feedback_designer.auditory_response.magnitude')"
+      :max="3"
+      :named-positions="[
               {value:0, label: 'Faint'},
               {value:1, label: 'Soft'},
               {value:2, label: 'Normal'},
               {value:3, label: 'Loud'}]" />
-        </ConfigSection>
-      </ScrollArea>
-      <Separator />
-    </div>
-  </TabsContent>
+  </ConfigSection>
 </template>
 <script setup>
-import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import SteppedSlider from '@/components/config/SteppedSlider.vue'
diff --git a/src/components/config/pages/LEDsConfig.vue b/src/components/config/pages/LEDsConfig.vue
index f68341e..a06cac8 100644
--- a/src/components/config/pages/LEDsConfig.vue
+++ b/src/components/config/pages/LEDsConfig.vue
@@ -1,24 +1,17 @@
 <template>
-  <TabsContent value="led-config" class="mt-0">
-    <div class="w-96 bg-zinc-900 bg-opacity-40">
-      <ScrollArea class="h-[720px]">
-        <ConfigSection
-          :title="$t('config_options.light_designer.led_feedback')" :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>
-      </ScrollArea>
+  <ConfigSection
+    :title="$t('config_options.light_designer.led_feedback')" :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>
-  </TabsContent>
+  </ConfigSection>
+  <ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
+    <PaletteInput v-model="colors" />
+  </ConfigSection>
 </template>
 <script setup>
-import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Lightbulb, Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import PaletteInput from '@/components/config/PaletteInput.vue'
diff --git a/src/components/config/pages/MappingConfig.vue b/src/components/config/pages/MappingConfig.vue
index 9a96df4..7534807 100644
--- a/src/components/config/pages/MappingConfig.vue
+++ b/src/components/config/pages/MappingConfig.vue
@@ -1,187 +1,175 @@
 <template>
-  <TabsContent value="map-config" class="mt-0">
-    <div class="w-96 bg-zinc-900 bg-opacity-40">
-      <ScrollArea class="h-[720px]">
-        <ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
-          <Tabs default-value="fd">
-            <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
-              <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">
-                  </div>
-                  <span class="text-xs leading-3 text-wrap">
+  <ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
+    <Tabs default-value="fd">
+      <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
+        <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">
+            </div>
+            <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
                               <Badge class="bg-orange-400 mt-2">Shift</Badge>
                             </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-key.svg">
-                  </div>
-                  <span class="text-xs leading-3 text-wrap">
+          </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-key.svg">
+            </div>
+            <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
                               <Badge class="bg-zinc-400 mt-2">Fn1</Badge>
                             </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-key-g.svg">
-                  </div>
-                  <span class="text-xs leading-3 text-wrap">
+          </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-key-g.svg">
+            </div>
+            <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
                               <Badge class="bg-zinc-400 mt-2">Fn2</Badge>
                             </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-key-d.svg">
-                  </div>
-                  <span class="text-xs leading-3 text-wrap">
+          </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-key-d.svg">
+            </div>
+            <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
                               <Badge class="bg-zinc-400 mt-2">M0</Badge>
                             </span>
-                </div>
-              </TabsTrigger>
-            </TabsList>
-
-          </Tabs>
-
-          <Separator />
-          <Command>
-
-            <CommandList>
-              <CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
-
-              </CommandEmpty>
-              <CommandInput
-                :placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
-              <CommandGroup heading="Common">
-                <CommandItem value="backspace">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Backspace
-                </CommandItem>
-                <CommandItem value="delete">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Delete
-                </CommandItem>
-                <CommandItem value="enter">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Enter
-                </CommandItem>
-                <CommandItem value="end">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  End
-                </CommandItem>
-                <CommandItem value="arrow up">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Arrow Up
-                </CommandItem>
-                <CommandItem value="arrow down">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Arrow Down
-                </CommandItem>
-                <CommandItem value="arrow left">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Arrow Left
-                </CommandItem>
-                <CommandItem value="arrow right">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Arrow Right
-                </CommandItem>
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup heading="MIDI Control Changes">
-                <CommandItem value="cc0">
-                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                  Bank Select (CC0)
-                </CommandItem>
-                <CommandItem value="cc2">
-                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                  Modulation (CC1)
-                </CommandItem>
-                <CommandItem value="cc3">
-                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                  Foot Controller (CC4)
-                </CommandItem>
-                <CommandItem value="cc4">
-                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                  Portamento (CC5)
-                </CommandItem>
-                <CommandItem value="cc5">
-                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                  Volume (CC7)
-                </CommandItem>
-              </CommandGroup>
-              <CommandGroup heading="Macros">
-                <CommandItem value="Page Scroll">
-                  <Squircle color="grey" class="w-4 h-4 mr-2" />
-                  Page Scroller (M0)
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-            <CommandSeparator />
-
-          </Command>
-          <Separator />
-        </ConfigSection>
-
-        <ConfigSection
-:title="$t('config_options.mapping_configuration.knob_mapping.title')"
-                       :icon-component="GaugeCircle">
-          <div class="flex flex-col p-8 pt-4">
-            <span class="text-sm text-muted-foreground font-mono">Feedback Strength</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 />
-          <div class="flex flex-col p-8 pt-4">
-            <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</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 />
-          <div class="flex flex-col p-8 pt-4">
-            <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
-            <Slider :default-value="[4]" :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>
+        </TabsTrigger>
+      </TabsList>
 
-          </div>
-        </ConfigSection>
-      </ScrollArea>
-      <Separator />
+    </Tabs>
+    <Separator />
+    <Command>
 
+      <CommandList>
+        <CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
+
+        </CommandEmpty>
+        <CommandInput
+          :placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
+        <CommandGroup heading="Common">
+          <CommandItem value="backspace">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Backspace
+          </CommandItem>
+          <CommandItem value="delete">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Delete
+          </CommandItem>
+          <CommandItem value="enter">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Enter
+          </CommandItem>
+          <CommandItem value="end">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            End
+          </CommandItem>
+          <CommandItem value="arrow up">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Arrow Up
+          </CommandItem>
+          <CommandItem value="arrow down">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Arrow Down
+          </CommandItem>
+          <CommandItem value="arrow left">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Arrow Left
+          </CommandItem>
+          <CommandItem value="arrow right">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Arrow Right
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="MIDI Control Changes">
+          <CommandItem value="cc0">
+            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+            Bank Select (CC0)
+          </CommandItem>
+          <CommandItem value="cc2">
+            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+            Modulation (CC1)
+          </CommandItem>
+          <CommandItem value="cc3">
+            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+            Foot Controller (CC4)
+          </CommandItem>
+          <CommandItem value="cc4">
+            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+            Portamento (CC5)
+          </CommandItem>
+          <CommandItem value="cc5">
+            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+            Volume (CC7)
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Macros">
+          <CommandItem value="Page Scroll">
+            <Squircle color="grey" class="w-4 h-4 mr-2" />
+            Page Scroller (M0)
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+      <CommandSeparator />
+
+    </Command>
+    <Separator />
+  </ConfigSection>
+
+  <ConfigSection
+    :title="$t('config_options.mapping_configuration.knob_mapping.title')"
+    :icon-component="GaugeCircle">
+    <div class="flex flex-col p-8 pt-4">
+      <span class="text-sm text-muted-foreground font-mono">Feedback Strength</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>
-  </TabsContent>
+    <Separator />
+    <div class="flex flex-col p-8 pt-4">
+      <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</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 />
+    <div class="flex flex-col p-8 pt-4">
+      <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
+      <Slider :default-value="[4]" :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>
+  </ConfigSection>
 </template>
 <script setup>
-import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Badge } from '@/components/ui/badge/index.js'
 import { Tabs } from '@/components/ui/tabs/index.js'
 import {
diff --git a/src/components/config/pages/ProfileConfig.vue b/src/components/config/pages/ProfileConfig.vue
index 18c5fda..e8ca78c 100644
--- a/src/components/config/pages/ProfileConfig.vue
+++ b/src/components/config/pages/ProfileConfig.vue
@@ -1,64 +1,62 @@
 <template>
-  <div class="w-96">
-    <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
-      <WIP />
-      <div class="hidden">
-        <div class="flex flex-col p-8 py-4">
+  <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
+    <WIP />
+    <div class="hidden">
+      <div class="flex flex-col p-8 py-4">
                       <span
                         class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
                         }}</span>
-          <Input
-            type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
-            class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
-            default-value="Oscillator 1" maxlength="20" />
+        <Input
+          type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
+          class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
+          default-value="Oscillator 1" maxlength="20" />
 
-          <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 py-4">
+        <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
+      </div>
+      <Separator />
+      <div class="flex flex-col p-8 py-4">
                       <span
                         class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_description')
                         }}</span>
-          <Textarea
-            class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
-            :placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
-            default-value="Adjust Korg Oscillator Waveform " rows="2"
-            maxlength="50" />
-          <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
-          <div class="flex items-center space-x-4 space-y-1">
-            <Switch id="airplane-mode" :default-checked="true" />
-            <Label
-              for="airplane-mode"
-              class="text-xs text-muted-foreground">{{
-                $t('config_options.profile_settings.profile_properties.show_description')
-              }}</Label>
-          </div>
+        <Textarea
+          class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
+          :placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
+          default-value="Adjust Korg Oscillator Waveform " rows="2"
+          maxlength="50" />
+        <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
+        <div class="flex items-center space-x-4 space-y-1">
+          <Switch id="airplane-mode" :default-checked="true" />
+          <Label
+            for="airplane-mode"
+            class="text-xs text-muted-foreground">{{
+              $t('config_options.profile_settings.profile_properties.show_description')
+            }}</Label>
         </div>
       </div>
-    </ConfigSection>
-    <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
-      <div class="flex font-heading">
-        <ConnectionTypeButton
-          v-for="(option, key) in connectionTypeOptions" :key="key" :title="$t(option.titleKey)"
-          :icon="option.icon" :selected="connectionType===key" @select="connectionType=key" />
-      </div>
-    </ConfigSection>
+    </div>
+  </ConfigSection>
+  <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
+    <div class="flex font-heading">
+      <ConnectionTypeButton
+        v-for="(option, key) in connectionTypeOptions" :key="key" :title="$t(option.titleKey)"
+        :icon="option.icon" :selected="connectionType===key" @select="connectionType=key" />
+    </div>
+  </ConfigSection>
 
-    <ConfigSection
-      :title="$t('config_options.profile_settings.internal_profile_toggle.title')"
-      :icon-component="Replace" :show-toggle="true">
-      <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
-        {{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
-        <Separator class="mt-4" />
-        <span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
-          }}:<br>
+  <ConfigSection
+    :title="$t('config_options.profile_settings.internal_profile_toggle.title')"
+    :icon-component="Replace" :show-toggle="true">
+    <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
+      {{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
+      <Separator class="mt-4" />
+      <span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
+        }}:<br>
           <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
-            class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-        <Separator />
-        <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
-      </p>
-    </ConfigSection>
-  </div>
+          class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
+      <Separator />
+      <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
+    </p>
+  </ConfigSection>
 </template>
 <script setup>
 import { Label } from '@/components/ui/label/index.js'
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 953e4e8..6c108e9 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -1,57 +1,30 @@
 <template>
   <div>
-    <div>
-      <div class="px-4 py-5">
-        <h1 class="text-lg">
-          {{ $t('preview.title')}}
-        </h1>
-      </div>
-      <div class="flex justify-center">
-        <div
-          class="flex bg-cover w-72 h-72 mb-7"
-          style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
-          <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
-            <div class="self-center w-8 mb-1 opacity-50">
-              <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
-            </div>
-            <h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
-              {{ feedbackConfig.pos }}</h2>
-
-            <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
-            <DeviceBar class="self-center"/>
-            <div id="scales" class="flex self-center text-xs py-0" />
-
-            <div
-              v-for="profileConfig in profiles"
-              :key="profileConfig"
-              class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
-              {{ profileConfig.profileDesc }}
-            </div>
+    <div class="px-4 py-5">
+      <h1 class="text-lg">
+        {{ $t('preview.title') }}
+      </h1>
+    </div>
+    <div class="flex justify-center">
+      <div
+        class="flex bg-cover m-6 w-full aspect-square"
+        style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
+        <div class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
+          <div class="self-center w-8 mb-1 opacity-50">
+            <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
           </div>
+          <h2 class="self-center font-pixellg text-5xl ">1337</h2>
+          <div class="self-center font-pixelsm text-md pt-1 pb-2">Profile name</div>
+          <DeviceBar class="self-center" />
+          <span
+            class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
+            Profile description will go here!
+          </span>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
-import axios from 'axios'
+<script setup>
 import DeviceBar from '@/components/device/DeviceBar.vue'
-
-export default {
-  name: 'DevicePreview',
-  components: { DeviceBar },
-  data() {
-    return {
-      profiles: [],
-    }
-  },
-  async created() {
-    try {
-      const res = await axios.get('http://localhost:3001/profiles/5867')
-      this.profiles = res.data
-    } catch (e) {
-      console.error(e)
-    }
-  },
-}
 </script>
\ No newline at end of file