feat: création de l'API de gestion des projets et liaison dynamique avec le Dashboard

frontend/dashboard.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AETHAS38 - Dashboard</title>
-    <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
@@ -14,14 +13,11 @@
             }
         }
     </script>
-    <!-- Vue.js 3 -->
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <!-- Icônes Lucide -->
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
         body { background-color: #0f172a; color: #f8fafc; font-family: 'Inter', sans-serif; }
         .neon-text { background: linear-gradient(to right, #06b6d4, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-        /* Style de la scrollbar pour le champ de texte */
         ::-webkit-scrollbar { width: 6px; }
         ::-webkit-scrollbar-track { background: transparent; }
         ::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
@@ -31,10 +27,8 @@
 
 <div id="app" class="flex w-full h-full relative bg-aethas-dark">
 
-    <!-- Overlay assombrissant pour mobile si la sidebar est ouverte -->
     <div v-if="isSidebarOpen" @click="toggleSidebar" class="md:hidden fixed inset-0 bg-black/60 z-40 transition-opacity"></div>
 
-    <!-- 1. BARRE LATÉRALE (Rétractable) -->
     <div :class="['transition-all duration-300 flex-shrink-0 relative z-50', isSidebarOpen ? 'w-72' : 'w-0']">
         <aside :class="['absolute top-0 left-0 h-full w-72 bg-aethas-panel border-r border-gray-700 flex flex-col transition-transform duration-300', isSidebarOpen ? 'translate-x-0' : '-translate-x-full']">
             <div class="p-4 border-b border-gray-700 flex items-center justify-between">
@@ -48,23 +42,21 @@
             </div>
             
             <div class="p-4">
-                <button class="w-full bg-gray-800 hover:bg-gray-700 text-white border border-gray-600 rounded-lg py-2.5 px-4 flex items-center gap-2 transition-colors">
+                <button @click="createNewProject" :disabled="isLoading" class="w-full bg-gray-800 hover:bg-gray-700 text-white border border-gray-600 rounded-lg py-2.5 px-4 flex items-center justify-center gap-2 transition-colors disabled:opacity-50">
                     <i data-lucide="plus" class="w-5 h-5 text-aethas-cyan"></i>
                     Nouveau Projet IA
                 </button>
             </div>
 
             <div class="flex-1 overflow-y-auto p-4 space-y-6">
-                <div>
-                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Épinglés</h3>
-                    <ul class="space-y-1">
-                        <li class="p-2 hover:bg-gray-800 rounded cursor-pointer text-sm text-gray-300 truncate">Projet Assistant Code</li>
-                    </ul>
-                </div>
                 <div>
                     <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Récents</h3>
                     <ul class="space-y-1">
-                        <li class="p-2 hover:bg-gray-800 rounded cursor-pointer text-sm text-gray-300 truncate">Traduction Document</li>
+                        <li v-if="projects.length === 0" class="text-sm text-gray-500 italic p-2">Aucun projet pour le moment.</li>
+                        <li v-for="project in projects" :key="project.id" class="p-2 hover:bg-gray-800 rounded cursor-pointer text-sm text-gray-300 truncate transition-colors flex items-center gap-2">
+                            <i data-lucide="message-square" class="w-4 h-4 text-gray-500"></i>
+                            {{ project.title }}
+                        </li>
                     </ul>
                 </div>
             </div>
@@ -81,7 +73,6 @@
         </aside>
     </div>
 
-    <!-- ZONE PRINCIPALE -->
     <main class="flex-1 flex flex-col min-w-0 z-10 transition-all duration-300">
         <header class="flex items-center justify-between p-4 border-b border-gray-700 bg-aethas-panel h-[73px]">
             <div class="flex items-center gap-3">
@@ -131,10 +122,10 @@
             const isSidebarOpen = ref(true);
             const prompt = ref("");
             const promptTextarea = ref(null);
+            const projects = ref([]);
+            const isLoading = ref(false);
 
-            const toggleSidebar = () => {
-                isSidebarOpen.value = !isSidebarOpen.value;
-            };
+            const toggleSidebar = () => { isSidebarOpen.value = !isSidebarOpen.value; };
 
             const autoResize = () => {
                 const el = promptTextarea.value;
@@ -143,11 +134,45 @@
                 el.style.height = el.scrollHeight + 'px'; 
             };
 
+            const fetchProjects = async () => {
+                try {
+                    const response = await fetch('/api/projects');
+                    if (response.ok) {
+                        projects.value = await response.json();
+                        nextTick(() => lucide.createIcons());
+                    }
+                } catch (error) {
+                    console.error("Erreur lors de la récupération des projets", error);
+                }
+            };
+
+            const createNewProject = async () => {
+                isLoading.value = true;
+                try {
+                    const response = await fetch('/api/projects', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ title: "Nouvelle discussion" })
+                    });
+                    
+                    if (response.ok) {
+                        const newProject = await response.json();
+                        projects.value.unshift(newProject); // Ajoute le nouveau projet en haut de la liste
+                        nextTick(() => lucide.createIcons());
+                    }
+                } catch (error) {
+                    console.error("Erreur lors de la création du projet", error);
+                } finally {
+                    isLoading.value = false;
+                }
+            };
+
             onMounted(() => {
                 lucide.createIcons();
+                fetchProjects();
             });
 
-            return { username, isSidebarOpen, toggleSidebar, prompt, autoResize, promptTextarea };
+            return { username, isSidebarOpen, toggleSidebar, prompt, autoResize, promptTextarea, projects, createNewProject, isLoading };
         }
     }).mount('#app');
 </script>