UPD: Remove profile list icon

src/components/device/DevicePreview.vue

@@ -2,7 +2,7 @@
   <div class="aspect-[800/1100]">
     <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) 10%), url(${RenderNano})`}">
+      :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.2) 95%, black), url(${RenderNano})`}">
       <div class="flex px-4 pt-5 pb-3 items-baseline font-heading text-lg">
         {{ $t('preview.title') }}
       </div>

src/components/profile/ProfileButton.vue

@@ -7,18 +7,10 @@
       class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
       :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">
-        <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="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="flex-1 pl-10 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}"
         @blur="onNameInputBlur">
@@ -37,11 +29,13 @@
       'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
       class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
-      <component
-        :is="draggable && hover ? GripHorizontal : FileDigit"
-        :class="{'text-zinc-600': selected,
+      <span class="ml-4 w-4 mr-2" :class="{'ml-8': !draggable}">
+        <GripHorizontal
+          v-if="draggable"
+          :class="{'text-zinc-600': selected,
         'text-muted-foreground': !selected}"
-        class="ml-4 mr-2 mb-0.5 h-4 w-4 inline-block" />
+          class="mb-0.5 h-4 w-4 inline-block" />
+      </span>
       <ScrambleText
         ref="profileTitle"
         :class="{'text-black': selected, 'text-zinc-100': !selected}"
@@ -49,7 +43,7 @@
       <span
         v-if="showId"
         class="text-xs text-zinc-600"
-        :class="{'hidden': hover}"> uID:{{ profile.id }}</span>
+        :class="{'hidden': hover}"> UID:{{ profile.id }}</span>
     </button>
     <template v-if="!confirmDelete">
       <button
@@ -99,7 +93,7 @@
   </div>
 </template>
 <script setup>
-import { Check, Copy, FileDigit, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
+import { Check, Copy, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { nextTick, ref } from 'vue'
 

src/components/profile/ProfileManager.vue

@@ -2,18 +2,21 @@
   <div>
     <div>
       <div
-        class="w-full p-4 flex items-center">
-        <div>
-          <h1 class="text-lg">
-            {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ store.profiles.length }}/{{ maxProfiles
-            }})</span>
-          </h1>
-        </div>
+        class="w-full p-4 flex items-center justify-between">
+        <h1 class="text-lg">
+          {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ store.profiles.length }}/{{ maxProfiles
+          }})</span>
+        </h1>
+        <button
+          class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square w-8 flex justify-center items-center"
+          @click="store.addProfile">
+          <Plus class="h-4" />
+        </button>
       </div>
       <Separator />
     </div>
     <div>
-      <div class="flex w-full h-12 items-center">
+      <div v-if="showFilter" 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>
@@ -71,6 +74,13 @@ import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { useStore } from '@/store.js'
 import ProfileButton from '@/components/profile/ProfileButton.vue'
 
+defineProps({
+  showFilter: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const maxProfiles = 32
 
 const store = useStore()

src/store.js

@@ -41,6 +41,9 @@ export const useStore = defineStore('main', {
       this.selectedProfileId = id
       return true
     },
+    addProfile() {
+      console.log('addProfile is not implemented')
+    },
     duplicateProfile(id) {
       const originalProfile = this.profiles.find(p => p.id === id)
       const newProfile = JSON.parse(JSON.stringify(originalProfile))