carnet panel3

app/api/nextcloud/files/[id]/route.ts

@@ -12,6 +12,30 @@ declare global {
 const prisma = global.prisma || new PrismaClient();
 if (process.env.NODE_ENV !== 'production') global.prisma = prisma;
 
+// Helper function to create WebDAV client
+const createWebDAVClient = async (userId: string) => {
+  const credentials = await prisma.webDAVCredentials.findUnique({
+    where: { userId },
+  });
+
+  if (!credentials) {
+    throw new Error('No WebDAV credentials found');
+  }
+
+  const baseURL = process.env.NEXTCLOUD_URL;
+  if (!baseURL) {
+    throw new Error('NEXTCLOUD_URL environment variable is not set');
+  }
+
+  const normalizedBaseURL = baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL;
+  
+  return createClient(`${normalizedBaseURL}/remote.php/dav`, {
+    username: credentials.username,
+    password: credentials.password,
+    authType: 'password',
+  });
+};
+
 export async function GET(
   request: Request,
   { params }: { params: { id: string } }
@@ -22,33 +46,9 @@ export async function GET(
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
     }
 
-    // Get WebDAV credentials
+    const client = await createWebDAVClient(session.user.id);
-    const credentials = await prisma.webDAVCredentials.findUnique({
-      where: { userId: session.user.id },
-    });
-
-    if (!credentials) {
-      console.error('No WebDAV credentials found for user:', session.user.id);
-      return NextResponse.json({ error: 'No WebDAV credentials found' }, { status: 404 });
-    }
-
-    // Initialize WebDAV client
-    const baseURL = process.env.NEXTCLOUD_URL;
-    if (!baseURL) {
-      throw new Error('NEXTCLOUD_URL environment variable is not set');
-    }
-
-    // Remove trailing slash if present
-    const normalizedBaseURL = baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL;
-    
-    const client = createClient(`${normalizedBaseURL}/remote.php/dav`, {
-      username: credentials.username,
-      password: credentials.password,
-      authType: 'password',
-    });
 
     try {
-      // Get the file content
       const content = await client.getFileContents(params.id);
       const textContent = content.toString('utf-8');
       
@@ -70,3 +70,65 @@ export async function GET(
     return NextResponse.json({ error: 'Failed to fetch file' }, { status: 500 });
   }
 }
+
+export async function POST(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { content } = await request.json();
+    const client = await createWebDAVClient(session.user.id);
+
+    try {
+      await client.putFileContents(params.id, content);
+      return NextResponse.json({ success: true });
+    } catch (error) {
+      console.error('Error saving file content:', error);
+      return NextResponse.json({ error: 'Failed to save file content' }, { status: 500 });
+    }
+  } catch (error) {
+    console.error('Error saving file:', error);
+    return NextResponse.json({ error: 'Failed to save file' }, { status: 500 });
+  }
+}
+
+export async function PUT(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { title, content, folder } = await request.json();
+    const client = await createWebDAVClient(session.user.id);
+
+    try {
+      const path = `/files/${client.credentials.username}/Private/${folder}/${title}.md`;
+      await client.putFileContents(path, content);
+      return NextResponse.json({ 
+        success: true,
+        id: path,
+        title,
+        lastModified: new Date().toISOString(),
+        size: content.length,
+        type: 'file',
+        mime: 'text/markdown',
+        etag: ''
+      });
+    } catch (error) {
+      console.error('Error creating file:', error);
+      return NextResponse.json({ error: 'Failed to create file' }, { status: 500 });
+    }
+  } catch (error) {
+    console.error('Error creating file:', error);
+    return NextResponse.json({ error: 'Failed to create file' }, { status: 500 });
+  }
+} 

app/carnet/page.tsx

@@ -1,234 +1,98 @@
 "use client";
 
-import { useEffect, useState, useRef } from "react";
+import React, { useState, useEffect } from 'react';
-import { useSession } from "next-auth/react";
+import { FileList } from '@/components/carnet/file-list';
-import { redirect } from "next/navigation";
+import { Editor } from '@/components/carnet/editor';
-import Navigation from "@/components/carnet/navigation";
+import { Plus } from 'lucide-react';
-import { NotesView } from "@/components/carnet/notes-view";
-import { Editor } from "@/components/carnet/editor";
-import { PanelResizer } from "@/components/carnet/panel-resizer";
-import { useMediaQuery } from "@/hooks/use-media-query";
-
-// Layout modes
-export enum PaneLayout {
-  TagSelection = "tag-selection",
-  ItemSelection = "item-selection",
-  TableView = "table-view",
-  Editing = "editing"
-}
 
 interface Note {
   id: string;
   title: string;
-  content: string;
+  lastModified: string;
-  lastEdited: Date;
+  size: number;
+  type: string;
+  mime: string;
+  etag: string;
+  content?: string;
 }
 
 export default function CarnetPage() {
-  const { data: session, status } = useSession();
+  const [notes, setNotes] = useState<Note[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [layoutMode, setLayoutMode] = useState<PaneLayout>(PaneLayout.ItemSelection);
   const [selectedNote, setSelectedNote] = useState<Note | null>(null);
-  const [isMobile, setIsMobile] = useState(false);
+  const [currentFolder, setCurrentFolder] = useState('Notes');
-  const [showNav, setShowNav] = useState(true);
+  const [loading, setLoading] = 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);
-  const [notesWidth, setNotesWidth] = useState(400);
-  const [isDraggingNav, setIsDraggingNav] = useState(false);
-  const [isDraggingNotes, setIsDraggingNotes] = useState(false);
-
-  // Check screen size
-  const isSmallScreen = useMediaQuery("(max-width: 768px)");
-  const isMediumScreen = useMediaQuery("(max-width: 1024px)");
-
-  // Cache for Nextcloud folders
-  const foldersCache = useRef<{ folders: string[]; timestamp: number } | null>(null);
 
   useEffect(() => {
-    const fetchNextcloudFolders = async () => {
+    fetchNotes();
-      // Check cache first
+  }, [currentFolder]);
-      if (foldersCache.current) {
+
-        const cacheAge = Date.now() - foldersCache.current.timestamp;
+  const fetchNotes = async () => {
-        if (cacheAge < 5 * 60 * 1000) { // 5 minutes cache
+    try {
-          setNextcloudFolders(foldersCache.current.folders);
+      setLoading(true);
-          return;
+      const response = await fetch(`/api/nextcloud/files?folder=${encodeURIComponent(currentFolder)}`);
-        }
+      if (!response.ok) {
+        throw new Error('Failed to fetch notes');
       }
-
+      const data = await response.json();
-      try {
+      setNotes(data);
-        const response = await fetch('/api/nextcloud/status');
+    } catch (err) {
-        if (!response.ok) {
+      console.error('Error fetching notes:', err);
-          throw new Error('Failed to fetch Nextcloud folders');
+    } finally {
-        }
+      setLoading(false);
-        const data = await response.json();
-        const folders = data.folders || [];
-        
-        // Update cache
-        foldersCache.current = {
-          folders,
-          timestamp: Date.now()
-        };
-        
-        setNextcloudFolders(folders);
-      } catch (err) {
-        console.error('Error fetching Nextcloud folders:', err);
-        setNextcloudFolders([]);
-      }
-    };
-
-    if (status === "authenticated") {
-      fetchNextcloudFolders();
-    }
-  }, [status]);
-
-  useEffect(() => {
-    if (status === "unauthenticated") {
-      redirect("/signin");
-    }
-    if (status !== "loading") {
-      setIsLoading(false);
-    }
-  }, [status]);
-
-  useEffect(() => {
-    if (isSmallScreen) {
-      setIsMobile(true);
-      setShowNav(false);
-      setShowNotes(false);
-    } else if (isMediumScreen) {
-      setIsMobile(false);
-      setShowNav(true);
-      setShowNotes(false);
-    } else {
-      setIsMobile(false);
-      setShowNav(true);
-      setShowNotes(true);
-    }
-  }, [isSmallScreen, isMediumScreen]);
-
-  // Handle panel resizing
-  const handleNavResize = (e: MouseEvent) => {
-    if (!isDraggingNav) return;
-    const newWidth = e.clientX;
-    if (newWidth >= 48 && newWidth <= 400) {
-      setNavWidth(newWidth);
-    }
-  };
-
-  const handleNotesResize = (e: MouseEvent) => {
-    if (!isDraggingNotes) return;
-    const newWidth = e.clientX - navWidth - 2; // 2px for the resizer
-    if (newWidth >= 200) {
-      setNotesWidth(newWidth);
     }
   };
 
   const handleNoteSelect = (note: Note) => {
     setSelectedNote(note);
-    if (isMobile) {
-      setShowNotes(false);
-    }
   };
 
-  const handleNoteSave = (note: Note) => {
+  const handleNoteSave = (updatedNote: Note) => {
-    // TODO: Implement note saving logic
+    setNotes(prevNotes => {
-    console.log('Saving note:', note);
+      const index = prevNotes.findIndex(n => n.id === updatedNote.id);
+      if (index === -1) {
+        return [...prevNotes, updatedNote];
+      }
+      const newNotes = [...prevNotes];
+      newNotes[index] = updatedNote;
+      return newNotes;
+    });
+    setSelectedNote(updatedNote);
   };
 
-  const handleFolderSelect = (folder: string) => {
+  const handleNewNote = () => {
-    console.log('Selected folder:', folder);
+    setSelectedNote(null);
-    setSelectedFolder(folder);
-    setLayoutMode(PaneLayout.ItemSelection);
   };
 
-  if (isLoading) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        <div className="h-32 w-32 animate-spin rounded-full border-t-2 border-b-2 border-gray-900"></div>
-      </div>
-    );
-  }
-
   return (
-    <main className="w-full h-screen bg-black">
+    <div className="flex h-screen bg-carnet-bg">
-      <div className="w-full h-full px-4 pt-12 pb-4">
+      {/* Sidebar */}
-        <div className="flex h-full bg-carnet-bg">
+      <div className="w-64 border-r border-carnet-border">
-          {/* Navigation Panel */}
+        <div className="p-4">
-          {showNav && (
+          <button
-            <>
+            onClick={handleNewNote}
-              <div 
+            className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90"
-                className="flex flex-col h-full bg-carnet-sidebar"
+          >
-                style={{ width: `${navWidth}px` }}
+            <Plus className="h-4 w-4" />
-              >
+            <span>Nouvelle note</span>
-                <Navigation 
+          </button>
-                  layout={layoutMode}
-                  onLayoutChange={setLayoutMode}
-                  nextcloudFolders={nextcloudFolders}
-                  onFolderSelect={handleFolderSelect}
-                />
-              </div>
-
-              {/* Navigation Resizer */}
-              <PanelResizer
-                isDragging={isDraggingNav}
-                onDragStart={() => setIsDraggingNav(true)}
-                onDragEnd={() => setIsDraggingNav(false)}
-                onDrag={handleNavResize}
-              />
-            </>
-          )}
-
-          {/* Notes Panel */}
-          {showNotes && (
-            <>
-              <div 
-                className="flex flex-col h-full bg-carnet-bg"
-                style={{ width: `${notesWidth}px` }}
-              >
-                <NotesView 
-                  onNoteSelect={handleNoteSelect} 
-                  currentFolder={selectedFolder}
-                />
-              </div>
-
-              {/* Notes Resizer */}
-              <PanelResizer
-                isDragging={isDraggingNotes}
-                onDragStart={() => setIsDraggingNotes(true)}
-                onDragEnd={() => setIsDraggingNotes(false)}
-                onDrag={handleNotesResize}
-              />
-            </>
-          )}
-
-          {/* Editor Panel */}
-          <div className="flex-1 flex flex-col h-full bg-carnet-bg">
-            <Editor note={selectedNote} onSave={handleNoteSave} />
-          </div>
-
-          {/* Mobile Navigation Toggle */}
-          {isMobile && (
-            <div className="fixed bottom-4 right-4 flex space-x-2">
-              <button
-                className="p-2 rounded-full bg-primary text-white"
-                onClick={() => setShowNav(!showNav)}
-              >
-                {showNav ? 'Hide Nav' : 'Show Nav'}
-              </button>
-              <button
-                className="p-2 rounded-full bg-primary text-white"
-                onClick={() => setShowNotes(!showNotes)}
-              >
-                {showNotes ? 'Hide Notes' : 'Show Notes'}
-              </button>
-            </div>
-          )}
         </div>
+        <FileList
+          notes={notes}
+          onNoteSelect={handleNoteSelect}
+          currentFolder={currentFolder}
+          onFolderChange={setCurrentFolder}
+          loading={loading}
+        />
       </div>
-    </main>
+
+      {/* Editor */}
+      <div className="flex-1">
+        <Editor
+          note={selectedNote}
+          onSave={handleNoteSave}
+          currentFolder={currentFolder}
+        />
+      </div>
+    </div>
   );
 }

components/carnet/editor.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import React, { useState, useEffect } from 'react';
-import { Image, FileText, Link, List } from 'lucide-react';
+import { Save } from 'lucide-react';
+import dynamic from 'next/dynamic';
+
+// Dynamically import the editor to avoid SSR issues
+const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
+import 'react-quill/dist/quill.snow.css';
 
 interface Note {
   id: string;
@@ -15,110 +20,92 @@ interface Note {
 }
 
 interface EditorProps {
-  note?: Note | null;
+  note: Note | null;
-  onSave?: (note: Note) => void;
+  onSave: (note: Note) => void;
+  currentFolder: string;
 }
 
-export const Editor: React.FC<EditorProps> = ({ note, onSave }) => {
+export function Editor({ note, onSave, currentFolder }: EditorProps) {
-  const [title, setTitle] = useState(note?.title || '');
+  const [content, setContent] = useState('');
-  const [content, setContent] = useState(note?.content || '');
+  const [isSaving, setIsSaving] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    const fetchNoteContent = async () => {
+    if (note?.content) {
-      if (note?.id) {
+      setIsLoading(true);
-        try {
+      setContent(note.content);
-          setLoading(true);
+      setIsLoading(false);
-          const response = await fetch(`/api/nextcloud/files/${encodeURIComponent(note.id)}`);
-          if (!response.ok) {
-            throw new Error('Failed to fetch note content');
-          }
-          const data = await response.json();
-          setContent(data.content || '');
-        } catch (err) {
-          console.error('Error fetching note content:', err);
-        } finally {
-          setLoading(false);
-        }
-      }
-    };
-
-    if (note) {
-      setTitle(note.title);
-      fetchNoteContent();
     } else {
-      setTitle('');
       setContent('');
     }
   }, [note]);
 
-  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSave = async () => {
-    setTitle(e.target.value);
+    if (!note) return;
-  };
     
-  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setIsSaving(true);
-    setContent(e.target.value);
+    try {
-  };
+      const updatedNote = {
-
-  const handleSave = () => {
-    if (note?.id) {
-      onSave?.({
         ...note,
-        title,
+        content,
-        content
+        lastModified: new Date().toISOString(),
-      });
+        size: content.length
+      };
+      onSave(updatedNote);
+    } catch (error) {
+      console.error('Failed to save note:', error);
+    } finally {
+      setIsSaving(false);
     }
   };
 
+  if (isLoading) {
+    return (
+      <div className="p-4">
+        <div className="h-4 w-full bg-gray-200 rounded animate-pulse"></div>
+      </div>
+    );
+  }
+
+  if (!note) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-gray-500">Select a note to edit</p>
+      </div>
+    );
+  }
+
   return (
-    <div className="flex flex-col h-full bg-carnet-bg">
+    <div className="flex flex-col h-full">
-      {/* Title Bar */}
+      <div className="flex items-center justify-between p-4 border-b">
-      <div className="p-4 border-b border-carnet-border">
+        <h2 className="text-xl font-semibold">{note.title}</h2>
-        <input
+        <button
-          type="text"
+          onClick={handleSave}
-          value={title}
+          disabled={isSaving}
-          onChange={handleTitleChange}
+          className="flex items-center space-x-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
-          placeholder="Titre"
+        >
-          className="w-full text-xl font-semibold text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none bg-transparent"
+          <Save className="h-4 w-4" />
+          <span>{isSaving ? 'Saving...' : 'Save'}</span>
+        </button>
+      </div>
+      
+      <div className="flex-1 overflow-y-auto p-4">
+        <ReactQuill
+          theme="snow"
+          value={content}
+          onChange={setContent}
+          className="h-full"
+          modules={{
+            toolbar: [
+              [{ header: [1, 2, 3, false] }],
+              ['bold', 'italic', 'underline', 'strike'],
+              [{ list: 'ordered' }, { list: 'bullet' }],
+              ['link', 'image'],
+              ['clean']
+            ]
+          }}
         />
       </div>
-
-      {/* Toolbar */}
-      <div className="px-4 py-2 border-b border-carnet-border">
-        <div className="flex space-x-1">
-          <button className="p-1.5 rounded hover:bg-carnet-hover">
-            <List className="h-4 w-4 text-carnet-text-muted" />
-          </button>
-          <button className="p-1.5 rounded hover:bg-carnet-hover">
-            <Link className="h-4 w-4 text-carnet-text-muted" />
-          </button>
-          <button className="p-1.5 rounded hover:bg-carnet-hover">
-            <Image className="h-4 w-4 text-carnet-text-muted" />
-          </button>
-          <button 
-            className="p-1.5 rounded hover:bg-carnet-hover"
-            onClick={handleSave}
-          >
-            <FileText className="h-4 w-4 text-carnet-text-muted" />
-          </button>
-        </div>
-      </div>
-
-      {/* Editor Area */}
-      <div className="flex-1 p-4">
-        {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>
-        ) : (
-          <textarea
-            value={content}
-            onChange={handleContentChange}
-            placeholder="Ecrire..."
-            className="w-full h-full resize-none focus:outline-none bg-transparent text-carnet-text-primary placeholder-carnet-text-muted"
-          />
-        )}
-      </div>
     </div>
   );
-}; 
+} 

components/carnet/file-list.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import React from 'react';
+import { Folder, File } from 'lucide-react';
+
+interface Note {
+  id: string;
+  title: string;
+  lastModified: string;
+  size: number;
+  type: string;
+  mime: string;
+  etag: string;
+  content?: string;
+}
+
+interface FileListProps {
+  notes: Note[];
+  onNoteSelect: (note: Note) => void;
+  currentFolder: string;
+  onFolderChange: (folder: string) => void;
+  loading: boolean;
+}
+
+export function FileList({ notes, onNoteSelect, currentFolder, onFolderChange, loading }: FileListProps) {
+  const folders = ['Notes', 'Diary', 'Health', 'Contacts'];
+
+  if (loading) {
+    return (
+      <div className="p-4">
+        <div className="h-4 w-full bg-gray-200 rounded animate-pulse"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Folders */}
+      <div className="p-4 space-y-2">
+        {folders.map((folder) => (
+          <button
+            key={folder}
+            onClick={() => onFolderChange(folder)}
+            className={`w-full flex items-center space-x-2 px-4 py-2 rounded-lg ${
+              currentFolder === folder
+                ? 'bg-primary/10 text-primary'
+                : 'hover:bg-gray-100'
+            }`}
+          >
+            <Folder className="h-4 w-4" />
+            <span>{folder}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* Notes */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-2">
+        {notes.map((note) => (
+          <button
+            key={note.id}
+            onClick={() => onNoteSelect(note)}
+            className="w-full flex items-center space-x-2 px-4 py-2 rounded-lg hover:bg-gray-100"
+          >
+            <File className="h-4 w-4" />
+            <span className="truncate">{note.title}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}