UPD: Layout changes (profiles)

src/App.vue

@@ -18,7 +18,7 @@ store.fetchProfiles()
         class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
       <DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
       <ConfigPane
-        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
+        class="flex-1 basis-1/3 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
     </div>
   </main>
 </template>

src/components/config/ConfigPane.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <div class="flex">
+    <div v-if="showTabs" class="flex">
+      <!-- TODO: Remove later if not needed -->
       <div v-for="(option, index) in configPageOptions" :key="index" class="flex flex-1 items-center">
         <button
           class="flex-1 h-12 items-center text-center group px-3 font-heading"
@@ -28,7 +29,14 @@ import HapticConfig from '@/components/config/pages/HapticConfig.vue'
 import { Separator } from '@/components/ui/separator'
 import { ref } from 'vue'
 
-const currentPage = ref(0)
+defineProps({
+  showTabs: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const currentPage = ref(1)
 
 const configPageOptions = [
   {

src/components/config/pages/ProfileConfig.vue

@@ -2,7 +2,10 @@
   <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
     <WIP />
   </ConfigSection>
-  <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
+  <ConfigSection
+    v-if="false" :title="$t('config_options.profile_settings.connection_type.title')"
+    :icon-component="Cable">
+    <!-- TODO: Remove later if not needed -->
     <TabSelect v-model="connectionType" :options="connectionTypeOptions" />
   </ConfigSection>
 

src/components/device/DevicePreview.vue

@@ -3,7 +3,8 @@
     <div
       class="bg-contain bg-top bg-no-repeat h-full w-full relative"
       :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 12%, rgba(0,0,0,0.3) 95%, black), url(${RenderNano})`}">
-      <div class="px-4 h-12 flex justify-center items-center">
+      <div v-if="false" class="px-4 h-12 flex justify-center items-center">
+        <!-- TODO: Remove later if not needed -->
         <div v-if="store.selectedProfile" class="font-mono text-sm">
           <span class="text-muted-foreground">Profile: </span>
           <ScrambleText :text="store.selectedProfile.name" />

src/components/profile/ProfileManager.vue

@@ -3,11 +3,20 @@
     <div>
       <div
         class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
-        <h2 class="mr-2">
-          {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ store.profiles.length }}/{{ maxProfiles
-          }})</span>
-        </h2>
+        <button class="flex items-center" @click="showProfileList=true">
+          <ArrowLeft v-if="!showProfileList" class="w-5 h-full mr-1" />
+          <h2 class="mr-2">
+            <ScrambleText :text="showProfileList ? $t('profiles.title') : store.selectedProfile.name" />
+            <ScrambleText
+              v-if="showProfileList" class="text-sm text-zinc-600"
+              scramble-on-mount
+              fill-interval="20"
+              delay="500"
+              :text="`(${store.profiles.length}/${ maxProfiles})`" />
+          </h2>
+        </button>
         <button
+          v-if="showProfileList"
           class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
           @click="store.addProfile">
           <Plus class="h-4" />
@@ -15,64 +24,70 @@
       </div>
       <Separator />
     </div>
-    <div v-if="showFilter">
-      <div class="flex w-full h-12 items-center">
-        <label for="filter" class="flex h-full items-center cursor-text">
-          <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
-        </label>
-        <input
-          id="filter"
-          v-model="filter"
-          :placeholder="$t('profiles.filter_placeholder')"
-          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
-        <button
-          class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
-          <Plus />
-        </button>
+    <template v-if="showProfileList">
+      <div v-if="showFilter">
+        <div class="flex w-full h-12 items-center">
+          <label for="filter" class="flex h-full items-center cursor-text">
+            <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
+          </label>
+          <input
+            id="filter"
+            v-model="filter"
+            :placeholder="$t('profiles.filter_placeholder')"
+            class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
+          <button
+            class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
+            <Plus />
+          </button>
+        </div>
+        <Separator />
       </div>
-      <Separator />
-    </div>
-    <div class="grow overflow-y-auto">
-      <div v-if="filteredProfiles.length === 0">
-        <div class="flex flex-col items-center justify-center h-32">
-          <ScrambleText
-            scramble-on-mount :fill-interval="5" class="text-sm text-muted-foreground"
-            :text="$t('profiles.not_found')" />
+      <div class="grow overflow-y-auto">
+        <div v-if="filteredProfiles.length === 0">
+          <div class="flex flex-col items-center justify-center h-32">
+            <ScrambleText
+              scramble-on-mount :fill-interval="5" class="text-sm text-muted-foreground"
+              :text="$t('profiles.not_found')" />
+          </div>
+        </div>
+        <div v-else>
+          <Collapsible
+            v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
+            v-model:open="collapse[profileTag]"
+            :default-open="true">
+            <CollapsibleTrigger
+              class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b">
+              <ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
+              {{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <ProfileButton
+                v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
+                class="border-0 border-b"
+                :selected="store.selectedProfile.id === profile.id"
+                @select="store.selectProfile(profile.id); showProfileList=false"
+                @duplicate="store.duplicateProfile(profile.id)"
+                @delete="store.deleteProfile(profile.id)" />
+              <Separator />
+            </CollapsibleContent>
+          </Collapsible>
         </div>
       </div>
-      <div v-else>
-        <Collapsible
-          v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
-          v-model:open="collapse[profileTag]"
-          :default-open="true">
-          <CollapsibleTrigger
-            class="w-full h-12 py-2 text-left text-muted-foreground text-sm bg-zinc-900 border-0 border-b">
-            <ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
-            {{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <ProfileButton
-              v-for="(profile, index) in tagProfiles" :key="profile.id" v-model="tagProfiles[index]"
-              class="border-0 border-b"
-              :selected="store.selectedProfile.id === profile.id"
-              @select="store.selectProfile(profile.id)"
-              @duplicate="store.duplicateProfile(profile.id)"
-              @delete="store.deleteProfile(profile.id)" />
-            <Separator />
-          </CollapsibleContent>
-        </Collapsible>
-      </div>
+    </template>
+    <div v-else class="grow overflow-y-auto">
+      <ProfileConfig />
     </div>
   </div>
 </template>
 <script setup>
 import { Separator } from '@/components/ui/separator'
-import { ChevronRight, Plus, Search } from 'lucide-vue-next'
-import { computed, ref, watch } from 'vue'
+import { ChevronRight, Plus, Search, ArrowLeft } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { useStore } from '@/store.js'
 import ProfileButton from '@/components/profile/ProfileButton.vue'
+import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
 
 defineProps({
   showFilter: {
@@ -87,6 +102,8 @@ const store = useStore()
 const filter = ref('')
 const collapse = ref({})
 
+const showProfileList = ref(true)
+
 const filteredProfiles = computed(() => {
   if (!filter.value) {
     return store.profiles