From 4cf55efb2f0eded3f1e405083e66c16705df6786 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 24 Jan 2024 14:20:37 +0100
Subject: [PATCH] UPD: Style profile filter

---
 src/components/ProfileManager.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/ProfileManager.vue b/src/components/ProfileManager.vue
index 3c7eb04..7ca0f1f 100644
--- a/src/components/ProfileManager.vue
+++ b/src/components/ProfileManager.vue
@@ -13,8 +13,17 @@
     </div>
     <Separator />
     <div>
-      <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
-      <Input v-model="filter" :placeholder="$t('profiles.filter_placeholder')" class="border-none outline-none rounded-none" />
+      <div class="flex w-full h-12 items-center">
+        <label for="filter" class="flex h-full items-center cursor-text">
+          <MagnifyingGlassIcon class="ml-4 mr-1 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 disabled:cursor-not-allowed disabled:opacity-50">
+      </div>
+      <Separator />
       <template v-if="filter===''">
         <div v-for="[profileTag, tagProfiles] in profilesByTag" :key="profileTag">
           {{ profileTag }}
@@ -40,6 +49,7 @@ import { FileDigit } from 'lucide-vue-next'
 import axios from 'axios'
 import { computed, onMounted, ref } from 'vue'
 import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils.js'
 
 const profiles = ref([])