From cdefe3ecc17641a55964fb0d385a40b571416656 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 9 Aug 2023 15:38:20 -0300
Subject: [PATCH] Allow searching for icon name in the `GenericIndicator`
 mini-widget

---
 .../mini-widgets/GenericIndicator.vue          | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/mini-widgets/GenericIndicator.vue b/src/components/mini-widgets/GenericIndicator.vue
index 752681780..1fd035cea 100644
--- a/src/components/mini-widgets/GenericIndicator.vue
+++ b/src/components/mini-widgets/GenericIndicator.vue
@@ -30,7 +30,15 @@
           <span class="mr-1 text-slate-100">Icon</span>
           <input v-model="options.iconName" class="w-40 px-2 py-1 rounded-md bg-slate-200" />
         </div>
+        <div class="flex items-center justify-center w-full mt-2">
+          <input
+            v-model="iconSearchString"
+            class="w-40 px-2 py-1 rounded-md bg-slate-200"
+            placeholder="Search icons..."
+          />
+        </div>
         <RecycleScroller
+          v-if="iconSearchString === ''"
           v-slot="{ item }"
           class="w-full h-40 mt-3"
           :items="iconsNames.filter((name) => name.includes(iconSearchString))"
@@ -40,6 +48,15 @@
           <span class="m-1 text-white cursor-pointer mdi icon-symbol" :class="[item]" @click="options.iconName = item">
           </span>
         </RecycleScroller>
+        <div v-else class="grid w-full h-40 grid-cols-6 mt-3 overflow-x-hidden overflow-y-scroll">
+          <span
+            v-for="icon in iconsNames.filter((name) => name.includes(iconSearchString))"
+            :key="icon"
+            class="m-1 text-white cursor-pointer mdi icon-symbol"
+            :class="[icon]"
+            @click="options.iconName = icon"
+          />
+        </div>
       </div>
     </div>
   </Dialog>
@@ -94,6 +111,7 @@ watch(options, updateVariableState)
 let iconsNames: string[] = []
 
 const showConfigurationMenu = ref(false)
+const iconSearchString = ref('')
 </script>
 
 <style>