UPD: Lots of refactoring

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import ProfileManager from '@/components/ProfileManager.vue'
+import ProfileManager from '@/components/profile/ProfileManager.vue'
 import DevicePreview from '@/components/device/DevicePreview.vue'
 import ConfigPane from '@/components/config/ConfigPane.vue'
 import Navbar from '@/components/Navbar.vue'

src/components/config/ConnectionTypeButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <button
+    class="flex-1 flex flex-col justify-center items-center py-4"
+    :class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
+    'hover:bg-zinc-800 text-muted-foreground' : !selected}"
+    @click="$emit('select'); $refs.title.scramble()">
+    <img
+      draggable="false"
+      :src="icon" alt="connection-type-icon"
+      class="w-24 size-w mb-2"
+      :class="{'invert': selected}">
+    <ScrambleText ref="title" class="text-xs text-wrap" :text="title" />
+  </button>
+</template>
+<script setup>
+import ScrambleText from '@/components/effects/ScrambleText.vue'
+
+defineEmits(['select'])
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>

src/components/config/PaletteInput.vue

@@ -2,17 +2,17 @@
   <div class="flex font-heading">
     <button
       v-for="(option, key) in options" :key="key"
-      class="flex-1 pt-2 items-center text-center relative"
+      class="flex-1 pt-2 items-center text-center"
       :class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
       @click="currentOption = key">
       {{ $t(option.key) }}
-      <div class="h-4 w-full mt-2" :style="{background: option.color.hex()}" />
+      <span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />
     </button>
   </div>
   <HSVInput v-model="options[currentOption].color" class="relative z-20" />
 </template>
 <script setup>
-import HSVInput from '@/components/HSVInput.vue'
+import HSVInput from '@/components/config/HSVInput.vue'
 import Color from 'color'
 import { onBeforeMount, reactive, ref } from 'vue'
 

src/components/config/pages/LEDsConfig.vue

@@ -21,7 +21,7 @@
 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/pages/PaletteInput.vue'
+import PaletteInput from '@/components/config/PaletteInput.vue'
 import Color from 'color'
 import { computed, ref } from 'vue'
 import { store } from '@/store.js'

src/components/config/pages/ProfileConfig.vue

@@ -1,23 +1,5 @@
 <template>
   <div class="w-96">
-    <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
-      <div class="w-full flex text-muted-foreground">
-        <button
-          class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
-          <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
-          <span
-            class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
-            }}</span>
-        </button>
-        <button
-          class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
-          <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
-          <span
-            class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.midi')
-            }}</span>
-        </button>
-      </div>
-    </ConfigSection>
     <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
       <div class="flex flex-col p-8 py-4">
                       <span
@@ -51,6 +33,13 @@
         </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>
 
     <ConfigSection
       :title="$t('config_options.profile_settings.internal_profile_toggle.title')"
@@ -58,11 +47,12 @@
       <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="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
+        <span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
-          }}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
+          }}:<br>
+          <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
             class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-        <Separator class="my-4" />
+        <Separator/>
-        <span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
+        <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
       </p>
     </ConfigSection>
   </div>
@@ -70,24 +60,26 @@
 <script setup>
 import { Label } from '@/components/ui/label/index.js'
 import { Switch } from '@/components/ui/switch/index.js'
-import { Replace, Type, Cable } from 'lucide-vue-next'
+import { Cable, Replace, Type } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import { Separator } from '@/components/ui/separator/index.js'
 import { ref } from 'vue'
+import UsbIcon from '@/assets/gui-ico/ico-usb-logo.svg'
+import MidiIcon from '@/assets/gui-ico/ico-midi-logo.svg'
+import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
+import { Badge } from '@/components/ui/badge'
 
-const connectionType = ref('usb')
+const connectionType = ref('usb') // TODO: replace with actual value
 
-</script>
+const connectionTypeOptions = {
-<style scoped>
+  usb: {
-input::-webkit-outer-spin-button,
+    icon: UsbIcon,
-input::-webkit-inner-spin-button {
+    titleKey: 'config_options.profile_settings.connection_type.usb',
-  -webkit-appearance: none;
+  },
-  margin: 0;
+  midi: {
+    icon: MidiIcon,
+    titleKey: 'config_options.profile_settings.connection_type.midi',
+  },
 }
 
-/* Firefox */
+</script>
-input[type=number] {
-  -moz-appearance: textfield;
-  text-align: center;
-}
-</style>

src/components/profile/ProfileButton.vue

@@ -3,22 +3,25 @@
     class="h-12 flex profile-row"
     @mouseenter="hover=true" @mouseleave="hover=false">
     <form
-      v-if="editing"
+      v-if="nameEditable && editing"
       class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
-      :class="{'bg-zinc-200' : selected}" @submit.prevent="editing=false">
+      :class="{'bg-zinc-200' : selected}"
+      @submit.prevent="profile.name = nameInput; editing=false">
       <span class="ml-4 mr-1 h-full w-4 flex items-center">
-        <FileDigit
+        <component
+          :is="draggable && hover ? GripHorizontal : FileDigit"
           :class="{'text-zinc-600': selected,
           'text-muted-foreground': !selected}"
           class="w-4 h-4 mb-0.5"
         />
       </span>
       <input
-        ref="profileNameInput" v-model="profile.name"
+        ref="profileNameInput" v-model="nameInput"
         onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
         class="flex-1 pl-1 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none"
         :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
-        'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}">
+        'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
+        @blur="editing=false">
       <button
         type="submit"
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
@@ -31,9 +34,10 @@
       v-else
       :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
       'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
-      class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis"
+      class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
-      <FileDigit
+      <component
+        :is="draggable && hover ? GripHorizontal : FileDigit"
         :class="{'text-zinc-600': selected,
         'text-muted-foreground': !selected}"
         class="ml-4 mr-2 mb-0.5 h-4 w-4 inline-block" />
@@ -47,11 +51,12 @@
     </button>
     <template v-if="!confirmDelete">
       <button
+        v-if="nameEditable"
         :class="{'bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
                 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
                 'w-12' : hover && !editing}"
         class="flex w-0 h-12 justify-center items-center flex-shrink-0"
-        @click="editing=true; $nextTick(()=>{$refs.profileNameInput.focus()})">
+        @click="startEditing">
         <PenLine class="h-4 w-4" />
       </button>
       <button
@@ -92,9 +97,9 @@
   </div>
 </template>
 <script setup>
-import { Check, Copy, FileDigit, PenLine, Trash2, X } from 'lucide-vue-next'
+import { Check, Copy, FileDigit, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 defineEmits(['select', 'duplicate', 'delete'])
 
@@ -112,12 +117,31 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  nameEditable: {
+    type: Boolean,
+    default: false,
+  },
   initEditing: {
     type: Boolean,
     default: false,
   },
+  draggable: {
+    // Not implemented yet
+    type: Boolean,
+    default: false,
+  },
 })
 
+async function startEditing() {
+  editing.value = true
+  await nextTick()
+  profileNameInput.value.focus()
+}
+
+const profileNameInput = ref(null)
+
+const nameInput = ref(profile.value.name)
+
 const editing = ref(props.initEditing)
 
 const confirmDelete = ref(false)

src/components/profile/ProfileManager.vue

@@ -60,13 +60,13 @@
   </div>
 </template>
 <script setup>
-import { Separator } from '@/components/ui/separator/index.js'
+import { Separator } from '@/components/ui/separator'
 import { ChevronRight, Plus, Search } from 'lucide-vue-next'
 import { computed, ref, watch } from 'vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { store } from '@/store.js'
-import ProfileButton from '@/components/ProfileButton.vue'
+import ProfileButton from '@/components/profile/ProfileButton.vue'
 
 const maxProfiles = 32
 
@@ -112,7 +112,7 @@ function newProfileName(originalName) {
   let name = originalName
   let i = 1
   while (profiles.value.find(p => p.name === name)) {
-    name = `${originalName}-${i++}`
+    name = `${originalName} (${i++})`
   }
   return name
 }