carnet uix layout

app/carnet/page.tsx

@@ -7,9 +7,7 @@ import Navigation from "@/components/carnet/navigation";
 import { NotesView } from "@/components/carnet/notes-view";
 import { Editor } from "@/components/carnet/editor";
 import { PanelResizer } from "@/components/carnet/panel-resizer";
-import Header from "@/components/carnet/header";
 import { useMediaQuery } from "@/hooks/use-media-query";
-import { toast } from "sonner";
 
 // Layout modes
 export enum PaneLayout {
@@ -26,19 +24,10 @@ interface Note {
   lastEdited: Date;
 }
 
-interface NextcloudStatus {
-  isConnected: boolean;
-  folders: string[];
-  error?: string;
-}
-
 export default function CarnetPage() {
   const { data: session, status } = useSession();
-  const [layout, setLayout] = useState<PaneLayout>(PaneLayout.ItemSelection);
-  const [nextcloudFolders, setNextcloudFolders] = useState<string[]>([]);
-  const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [layoutMode, setLayoutMode] = useState<PaneLayout>(PaneLayout.ItemSelection);
   const [selectedNote, setSelectedNote] = useState<Note | null>(null);
   const [isMobile, setIsMobile] = useState(false);
   const [showNav, setShowNav] = useState(true);
@@ -54,27 +43,6 @@ export default function CarnetPage() {
   const isSmallScreen = useMediaQuery("(max-width: 768px)");
   const isMediumScreen = useMediaQuery("(max-width: 1024px)");
 
-  useEffect(() => {
-    const fetchNextcloudFolders = async () => {
-      try {
-        const response = await fetch('/api/nextcloud/status');
-        if (!response.ok) {
-          throw new Error('Failed to fetch Nextcloud folders');
-        }
-        const data = await response.json();
-        setNextcloudFolders(data.folders || []);
-        setError(null);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'An error occurred');
-        setNextcloudFolders([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchNextcloudFolders();
-  }, []);
-
   useEffect(() => {
     if (status === "unauthenticated") {
       redirect("/signin");
@@ -129,64 +97,78 @@ export default function CarnetPage() {
     console.log('Saving note:', note);
   };
 
-  const handleFolderSelect = (folder: string) => {
-    setSelectedFolder(folder);
-    setLayout(PaneLayout.ItemSelection);
-  };
-
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-carnet-primary"></div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-red-500">{error}</div>
+      <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 (
-    <div className="flex h-screen bg-carnet-background">
-      <Navigation 
-        layout={layout}
-        onLayoutChange={setLayout}
-        nextcloudFolders={nextcloudFolders}
-        onFolderSelect={handleFolderSelect}
-      />
-      <div className="flex-1 flex flex-col mt-14">
-        <div className="flex-1 overflow-hidden">
-          {selectedFolder ? (
-            <div className="p-6">
-              <h2 className="text-2xl font-semibold mb-4">{selectedFolder}</h2>
-              {/* Add your folder content here */}
-            </div>
-          ) : (
-            <div className="flex h-full">
-              {showNotes && (
-                <>
-                  <div style={{ width: notesWidth }}>
-                    <NotesView onNoteSelect={handleNoteSelect} />
-                  </div>
-                  <PanelResizer
-                    isDragging={isDraggingNotes}
-                    onDragStart={() => setIsDraggingNotes(true)}
-                    onDragEnd={() => setIsDraggingNotes(false)}
-                    onDrag={handleNotesResize}
-                  />
-                </>
-              )}
-              <div className="flex-1">
-                <Editor note={selectedNote} onSave={handleNoteSave} />
-              </div>
-            </div>
-          )}
-        </div>
+    <main className="flex h-[calc(100vh-3.5rem)] mt-14 bg-carnet-bg">
+      {/* Navigation Panel */}
+      {showNav && (
+        <>
+          <div 
+            className="flex flex-col h-full bg-carnet-sidebar"
+            style={{ width: `${navWidth}px` }}
+          >
+            <Navigation onLayoutChange={setLayoutMode} />
+          </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} />
+          </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>
-    </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>
+      )}
+    </main>
   );
-} 
+}