carnet layout

app/api/nextcloud/files/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { PrismaClient } from '@prisma/client';
+import { authOptions } from '@/lib/auth';
+import { WebDAVClient } from 'webdav';
+
+// Use a single PrismaClient instance
+declare global {
+  var prisma: PrismaClient | undefined;
+}
+
+const prisma = global.prisma || new PrismaClient();
+if (process.env.NODE_ENV !== 'production') global.prisma = prisma;
+
+export async function GET(request: Request) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.email) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const folder = searchParams.get('folder') || 'Notes';
+
+    // Get WebDAV credentials
+    const credentials = await prisma.webDAVCredentials.findUnique({
+      where: { userId: session.user.email },
+    });
+
+    if (!credentials) {
+      return NextResponse.json({ error: 'No WebDAV credentials found' }, { status: 404 });
+    }
+
+    // Initialize WebDAV client
+    const client = new WebDAVClient({
+      username: credentials.username,
+      password: credentials.password,
+      baseURL: process.env.NEXTCLOUD_URL,
+    });
+
+    // List files in the specified folder
+    const files = await client.getDirectoryContents(`/remote.php/dav/files/${credentials.username}/Private/${folder}`);
+
+    // Filter for .md files and format the response
+    const markdownFiles = files
+      .filter((file: any) => file.basename.endsWith('.md'))
+      .map((file: any) => ({
+        id: file.filename,
+        title: file.basename.replace('.md', ''),
+        lastModified: new Date(file.lastmod).toISOString(),
+        size: file.size,
+      }));
+
+    return NextResponse.json(markdownFiles);
+  } catch (error) {
+    console.error('Error fetching files:', error);
+    return NextResponse.json({ error: 'Failed to fetch files' }, { status: 500 });
+  }
+} 

app/carnet/page.tsx

@@ -33,6 +33,7 @@ export default function CarnetPage() {
   const [showNav, setShowNav] = useState(true);
   const [showNotes, setShowNotes] = useState(true);
   const [nextcloudFolders, setNextcloudFolders] = useState<string[]>([]);
+  const [selectedFolder, setSelectedFolder] = useState<string>('Notes');
   
   // Panel widths state
   const [navWidth, setNavWidth] = useState(220);
@@ -140,7 +141,7 @@ export default function CarnetPage() {
 
   const handleFolderSelect = (folder: string) => {
     console.log('Selected folder:', folder);
-    // TODO: Implement folder selection logic
+    setSelectedFolder(folder);
     setLayoutMode(PaneLayout.ItemSelection);
   };
 
@@ -188,7 +189,10 @@ export default function CarnetPage() {
                 className="flex flex-col h-full bg-carnet-bg"
                 style={{ width: `${notesWidth}px` }}
               >
-                <NotesView onNoteSelect={handleNoteSelect} />
+                <NotesView 
+                  onNoteSelect={handleNoteSelect} 
+                  currentFolder={selectedFolder}
+                />
               </div>
 
               {/* Notes Resizer */}

components/carnet/notes-view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useState } from 'react';
-import { Plus, Search, X } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Search, Plus, X, FileText, Calendar, Heart, Users } from 'lucide-react';
 import { format } from 'date-fns';
 import { fr } from 'date-fns/locale';
 
@@ -16,20 +16,34 @@ interface Note {
 
 interface NotesViewProps {
   onNoteSelect?: (note: Note) => void;
+  currentFolder?: string;
 }
 
-export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
+export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect, currentFolder = 'Notes' }) => {
   const [searchQuery, setSearchQuery] = useState('');
-  const [notes, setNotes] = useState<Note[]>([
-    {
-      id: '1',
-      title: 'Budget and expenses',
-      content: 'Created with Secure Spreadsheets',
-      lastEdited: new Date('2022-03-24T19:16:00'),
-      category: 'Finance',
-      tags: ['Finance']
-    }
-  ]);
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchNotes = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch(`/api/nextcloud/files?folder=${currentFolder}`);
+        if (!response.ok) {
+          throw new Error('Failed to fetch notes');
+        }
+        const data = await response.json();
+        setNotes(data.files || []);
+      } catch (err) {
+        console.error('Error fetching notes:', err);
+        setNotes([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchNotes();
+  }, [currentFolder]);
 
   const handleNewNote = () => {
     const newNote: Note = {
@@ -46,6 +60,23 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
     return format(date, 'EEEE d MMM yyyy, HH:mm', { locale: fr });
   };
 
+  const getFolderIcon = (folder: string) => {
+    switch (folder) {
+      case 'Notes':
+        return FileText;
+      case 'Diary':
+        return Calendar;
+      case 'Health':
+        return Heart;
+      case 'Contacts':
+        return Users;
+      default:
+        return FileText;
+    }
+  };
+
+  const Icon = getFolderIcon(currentFolder);
+
   return (
     <div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border">
       {/* Search Header */}
@@ -55,7 +86,7 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
             type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Link tags, notes, files..."
+            placeholder="Rechercher des notes..."
             className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
           />
           <Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
@@ -70,13 +101,11 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
         </div>
       </div>
 
-      {/* Category Header */}
+      {/* Folder Header */}
       <div className="px-4 py-3 border-b border-carnet-border flex items-center justify-between">
         <div className="flex items-center">
-          <div className="w-6 h-6 bg-carnet-tag-finance-bg rounded-md flex items-center justify-center">
-            <span className="text-xs font-medium text-carnet-tag-finance-text">F</span>
-          </div>
-          <span className="ml-2 text-sm font-medium text-carnet-text-primary">Finance</span>
+          <Icon className="w-4 h-4 mr-2 text-carnet-text-muted" />
+          <span className="text-sm font-medium text-carnet-text-primary">{currentFolder}</span>
         </div>
         <button 
           className="p-1.5 rounded-md hover:bg-carnet-hover"
@@ -88,38 +117,48 @@ export const NotesView: React.FC<NotesViewProps> = ({ onNoteSelect }) => {
 
       {/* Notes List */}
       <div className="flex-1 overflow-y-auto">
-        {notes.map((note) => (
-          <div 
-            key={note.id}
-            className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
-            onClick={() => onNoteSelect?.(note)}
-          >
-            <div className="flex flex-col">
-              <div className="flex items-center">
-                <span className="text-sm font-medium text-carnet-text-primary">
-                  {note.title}
-                </span>
-                {note.tags?.map((tag) => (
-                  <span 
-                    key={tag}
-                    className="ml-2 px-1.5 py-0.5 bg-carnet-tag-finance-bg rounded text-xs font-medium text-carnet-tag-finance-text"
-                  >
-                    {tag}
+        {loading ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
+          </div>
+        ) : notes.length === 0 ? (
+          <div className="flex items-center justify-center h-full">
+            <p className="text-sm text-carnet-text-muted">Aucune note trouvée</p>
+          </div>
+        ) : (
+          notes.map((note) => (
+            <div 
+              key={note.id}
+              className="px-4 py-3 border-b border-carnet-border hover:bg-carnet-hover cursor-pointer"
+              onClick={() => onNoteSelect?.(note)}
+            >
+              <div className="flex flex-col">
+                <div className="flex items-center">
+                  <span className="text-sm font-medium text-carnet-text-primary">
+                    {note.title}
                   </span>
-                ))}
-              </div>
-              <div className="mt-1 flex items-center text-xs text-carnet-text-muted">
-                <span>{formatDate(note.lastEdited)}</span>
-                {note.content && (
-                  <>
-                    <span className="mx-1.5">•</span>
-                    <span>{note.content}</span>
-                  </>
-                )}
+                  {note.tags?.map((tag) => (
+                    <span 
+                      key={tag}
+                      className="ml-2 px-1.5 py-0.5 bg-carnet-tag-finance-bg rounded text-xs font-medium text-carnet-tag-finance-text"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <div className="mt-1 flex items-center text-xs text-carnet-text-muted">
+                  <span>{formatDate(note.lastEdited)}</span>
+                  {note.content && (
+                    <>
+                      <span className="mx-1.5">•</span>
+                      <span>{note.content}</span>
+                    </>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          ))
+        )}
       </div>
     </div>
   );

lib/auth.ts

@@ -0,0 +1,32 @@
+import { NextAuthOptions } from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: { label: 'Email', type: 'email' },
+        password: { label: 'Password', type: 'password' }
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) {
+          return null;
+        }
+
+        // TODO: Implement actual authentication logic
+        return {
+          id: '1',
+          email: credentials.email,
+          name: credentials.email.split('@')[0],
+        };
+      }
+    })
+  ],
+  session: {
+    strategy: 'jwt',
+  },
+  pages: {
+    signIn: '/login',
+  },
+};