chnaged deleteProjectByNameButton to have a dropdown, also added a...

chnaged deleteProjectByNameButton to have a dropdown, also added a confirmation dialog before deleting

UnicadoGUI/Frontend/src/lib/DeleteProjectByNameButton.svelte

 <script lang="ts">
-    import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Icon } from "@sveltestrap/sveltestrap";
-    import { removeProject } from '../stores/projects';
-    import { createEventDispatcher } from 'svelte';
+    import {
+        Modal,
+        ModalHeader,
+        ModalBody,
+        ModalFooter,
+        Button,
+        Icon,
+    } from "@sveltestrap/sveltestrap";
+    import { userProjects, removeProject } from "../stores/projects";
+    import { onDestroy, createEventDispatcher } from "svelte";
+    let projects: any = [];
+    export let projectToRemove = "";
+
+    const unsubscribe = userProjects.subscribe((value) => {
+        projects = value;
+    });
 
-    export let projectToRemove = ''; // Der Name des zu löschenden Projekts
     const dispatch = createEventDispatcher();
     let isModalOpen = false;
 
     function openModal() {
         isModalOpen = true;
-        dispatch('openModal'); // Optional: Benachrichtige Hauptkomponente
+        dispatch("openModal");
     }
 
     function closeModal() {
         isModalOpen = false;
-        dispatch('closeModal'); // Optional: Benachrichtige Hauptkomponente
+        dispatch("closeModal");
     }
 
     function handleDeleteProject() {
-        if (projectToRemove.trim() !== '') {
-            removeProject(projectToRemove);
-            projectToRemove = ''; // Eingabefeld leeren
-            closeModal(); // Modal schließen nach dem Löschen
+        if (projectToRemove.trim() !== "") {
+            if (
+                confirm(
+                    `Are you sure you want to delete the project "${projectToRemove}"?`,
+                )
+            ) {
+                removeProject(projectToRemove);
+                projectToRemove = "";
+                closeModal();
+            }
         }
     }
 
-    function handleKeyDown(event: KeyboardEvent) {
-        if (event.key === 'Enter') {
-            handleDeleteProject();
-        }
-    }
+    onDestroy(() => {
+        unsubscribe();
+    });
 </script>
 
 <!-- Button zum Öffnen des Modals -->
@@ -41,16 +57,17 @@
 <Modal isOpen={isModalOpen} toggle={closeModal}>
     <ModalHeader toggle={closeModal}>Remove Project</ModalHeader>
     <ModalBody>
-        <input
-            type="text"
-            bind:value={projectToRemove}
-            placeholder="Enter project name to remove..."
-            class="form-control"
-            on:keydown={handleKeyDown}
-        />
+        <select bind:value={projectToRemove} class="form-control">
+            <option value="" disabled>Select a project to remove...</option>
+            {#each projects as project}
+                <option value={project.name}>{project.name}</option>
+            {/each}
+        </select>
     </ModalBody>
     <ModalFooter>
-        <Button color="danger" on:click={handleDeleteProject}>Remove Project</Button>
+        <Button color="danger" on:click={handleDeleteProject}
+            >Remove Project</Button
+        >
         <Button color="secondary" on:click={closeModal}>Cancel</Button>
     </ModalFooter>
 </Modal>