feat: edit and delete sidebar item

frontend/src/components/Controls/IconPicker.vue

@@ -6,32 +6,35 @@
 		<div class="w-full">
 			<Popover>
 				<template #target="{ togglePopover }">
-					<FormControl
-						v-model="selectedIcon"
-						@focus="openPopover(togglePopover)"
-						:placeholder="__('Choose an icon')"
-						class="w-full"
+					<button
+						@click="openPopover(togglePopover)"
+						class="flex w-full items-center space-x-2 focus:outline-none bg-gray-100 rounded h-7 py-1.5 px-2 hover:bg-gray-200 focus:bg-white border border-gray-100 hover:border-gray-200 focus:border-gray-500"
 					>
-						<template #prefix>
-							<component
-								v-if="selectedIcon"
-								class="w-4 h-4 text-gray-700 stroke-1.5"
-								:is="icons[selectedIcon]"
-							/>
-							<component
-								v-else
-								class="w-4 h-4 text-gray-700 stroke-1.5"
-								:is="icons.Folder"
-							/>
-						</template>
-					</FormControl>
+						<component
+							v-if="selectedIcon"
+							class="w-4 h-4 text-gray-700 stroke-1.5"
+							:is="icons[selectedIcon]"
+						/>
+						<component
+							v-else
+							class="w-4 h-4 text-gray-700 stroke-1.5"
+							:is="icons.Folder"
+						/>
+						<span v-if="selectedIcon">
+							{{ selectedIcon }}
+						</span>
+						<span v-else class="text-gray-600">
+							{{ __('Choose an icon') }}
+						</span>
+					</button>
 				</template>
 				<template #body-main="{ close, isOpen }" class="w-full">
 					<div class="p-3 max-h-56 overflow-auto w-full">
 						<FormControl
+							ref="search"
 							v-model="iconQuery"
 							:placeholder="__('Search for an icon')"
-							class="search-input"
+							autocomplete="off"
 						/>
 						<div class="grid grid-cols-10 gap-4 mt-4">
 							<div v-for="(iconComponent, iconName) in filteredIcons">
@@ -51,12 +54,13 @@
 <script setup>
 import { FormControl, Popover } from 'frappe-ui'
 import * as icons from 'lucide-vue-next'
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 
 const iconQuery = ref('')
 const selectedIcon = ref('')
+const search = ref(null)
 const emit = defineEmits(['update:modelValue', 'change'])
-
+console.log(icons)
 const iconArray = ref(
 	Object.keys(icons)
 		.sort(() => 0.5 - Math.random())
@@ -78,6 +82,11 @@ const props = defineProps({
 	},
 })
 
+onMounted(() => {
+	selectedIcon.value = props.modelValue
+	console.log(search.value)
+})
+
 const setIcon = (icon, close) => {
 	emit('update:modelValue', icon)
 	selectedIcon.value = icon
@@ -102,8 +111,9 @@ const filteredIcons = computed(() => {
 
 const openPopover = (togglePopover) => {
 	togglePopover()
-	setTimeout(() => {
-		document.querySelector('.search-input').focus()
-	}, 0)
+	nextTick(() => {
+		/* search.value.focus() */
+		console.log(search.value.children)
+	})
 }
 </script>