add button for deleting task

delete task from db

web/components/ui/Sidebar.vue

@@ -19,6 +19,7 @@ watch(currentTheme, () => {
 
 const emits = defineEmits<{
 	(e: 'createTask', name: string): void
+	(e: 'deleteTask', id: number): void
 }>()
 
 const dropDownItems = computed<DropdownMenuItem[][]>(() => [
@@ -73,17 +74,37 @@ const selectedDate = computed({
 	}
 })
 
+type Task = {
+  id: number
+  userid: string
+  title: string
+  description: string
+  done: number
+  estimated_time: string
+  due_date: string
+  created_at: string
+  updated_at: string
+}
+
 defineProps<{
-	todos: string[]
+  todos: Task[]
 }>()
 
-function addTodo(){
+
+function addTodo() {
 	const name = prompt("Todo name:")
 	console.log(name)
 	if (name !== null) {
 		emits('createTask', name)
 	}
 }
+function deleteTodo(todo: Task) {
+	console.log(todo.id)
+	emits('deleteTask', todo.id)
+}
+function editTodo() {
+
+}
 
 </script>
 
@@ -98,7 +119,21 @@ function addTodo(){
 				<div class="flex flex-col gap-2">
 					<Title1>Todos</Title1>
 					<div class="flex gap-2 flex-col">
-						<ListItem v-for="todo in todos">{{ todo }}</ListItem>
+						<ListItem v-for="todo in todos">
+							<div class="flex justify-between">
+								<span>
+									{{ todo.title }}
+								</span>
+								<div class="flex gap-1">
+									<UButton size="xs" color="neutral" class="flex justify-center" @click="editTodo">
+										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>
+									</UButton>
+									<UButton size="xs" class="flex justify-center" color="primary" @click="() => deleteTodo(todo)">
+										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-2 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
+									</UButton>
+								</div>
+							</div>
+					</ListItem>
 					</div>
 				</div>
 				<div class="flex">