carnet panel

components/carnet/navigation.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, ChevronRight } from 'lucide-react';
 
 interface NavigationProps {
@@ -23,30 +23,18 @@ const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
   'Contacts': { icon: Users, order: 4 }
 };
 
-interface ContactGroup {
-  name: string;
-  contacts: string[];
+interface ContactFile {
+  id: string;
+  filename: string;
+  basename: string;
+  lastmod: string;
 }
 
 export default function Navigation({ nextcloudFolders, onFolderSelect }: NavigationProps) {
   const [searchQuery, setSearchQuery] = useState('');
-  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
-  const [contactGroups, setContactGroups] = useState<ContactGroup[]>([
-    { name: 'Family', contacts: [] },
-    { name: 'Friends', contacts: [] },
-    { name: 'Work', contacts: [] },
-    { name: 'Other', contacts: [] }
-  ]);
-
-  const toggleGroup = (groupName: string) => {
-    const newExpanded = new Set(expandedGroups);
-    if (newExpanded.has(groupName)) {
-      newExpanded.delete(groupName);
-    } else {
-      newExpanded.add(groupName);
-    }
-    setExpandedGroups(newExpanded);
-  };
+  const [expandedContacts, setExpandedContacts] = useState(false);
+  const [contactFiles, setContactFiles] = useState<ContactFile[]>([]);
+  const [isLoadingContacts, setIsLoadingContacts] = useState(false);
 
   const getFolderIcon = (folder: string) => {
     switch (folder) {
@@ -70,6 +58,28 @@ export default function Navigation({ nextcloudFolders, onFolderSelect }: Navigat
     return orderA - orderB;
   });
 
+  const fetchContactFiles = async () => {
+    try {
+      setIsLoadingContacts(true);
+      const response = await fetch('/api/nextcloud/files?folder=Contacts');
+      if (response.ok) {
+        const files = await response.json();
+        const vcfFiles = files.filter((file: any) => file.basename.endsWith('.vcf'));
+        setContactFiles(vcfFiles);
+      }
+    } catch (error) {
+      console.error('Error fetching contact files:', error);
+    } finally {
+      setIsLoadingContacts(false);
+    }
+  };
+
+  useEffect(() => {
+    if (expandedContacts) {
+      fetchContactFiles();
+    }
+  }, [expandedContacts]);
+
   return (
     <div className="flex flex-col h-full bg-carnet-sidebar">
       {/* Search */}
@@ -102,43 +112,42 @@ export default function Navigation({ nextcloudFolders, onFolderSelect }: Navigat
             return (
               <div key={folder}>
                 <button
-                  onClick={() => onFolderSelect(folder)}
+                  onClick={() => {
+                    if (folder === 'Contacts') {
+                      setExpandedContacts(!expandedContacts);
+                    } else {
+                      onFolderSelect(folder);
+                    }
+                  }}
                   className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
                 >
                   <Icon className="h-4 w-4" />
                   <span>{folder}</span>
+                  {folder === 'Contacts' && (
+                    <ChevronRight 
+                      className={`h-4 w-4 transition-transform ${
+                        expandedContacts ? 'transform rotate-90' : ''
+                      }`}
+                    />
+                  )}
                 </button>
-                {folder === 'Contacts' && (
+                {folder === 'Contacts' && expandedContacts && (
                   <div className="ml-4 mt-1 space-y-1">
-                    {contactGroups.map((group) => (
-                      <div key={group.name}>
+                    {isLoadingContacts ? (
+                      <div className="px-3 py-2 text-sm text-carnet-text-muted">Chargement...</div>
+                    ) : contactFiles.length === 0 ? (
+                      <div className="px-3 py-2 text-sm text-carnet-text-muted">Aucun contact</div>
+                    ) : (
+                      contactFiles.map((file) => (
                         <button
-                          onClick={() => toggleGroup(group.name)}
-                          className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
+                          key={file.id}
+                          onClick={() => onFolderSelect(`Contacts/${file.basename}`)}
+                          className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-muted hover:bg-carnet-hover"
                         >
-                          <ChevronRight 
-                            className={`h-4 w-4 transition-transform ${
-                              expandedGroups.has(group.name) ? 'transform rotate-90' : ''
-                            }`}
-                          />
-                          <Folder className="h-4 w-4" />
-                          <span>{group.name}</span>
+                          <span>{file.basename.replace('.vcf', '')}</span>
                         </button>
-                        {expandedGroups.has(group.name) && (
-                          <div className="ml-4 space-y-1">
-                            {group.contacts.map((contact) => (
-                              <button
-                                key={contact}
-                                onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)}
-                                className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-muted hover:bg-carnet-hover"
-                              >
-                                <span>{contact}</span>
-                              </button>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    ))}
+                      ))
+                    )}
                   </div>
                 )}
               </div>