carnet uix layout

app/carnet/page.tsx

@@ -33,12 +33,11 @@ interface NextcloudStatus {
 
 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 [nextcloudStatus, setNextcloudStatus] = useState<NextcloudStatus>({
+  const [error, setError] = useState<string | null>(null);
-    isConnected: false,
-    folders: []
-  });
-  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,36 +53,26 @@ export default function CarnetPage() {
   const isSmallScreen = useMediaQuery("(max-width: 768px)");
   const isMediumScreen = useMediaQuery("(max-width: 1024px)");
 
-  // Check Nextcloud connection and get folders
   useEffect(() => {
-    async function checkNextcloudConnection() {
+    const fetchNextcloudFolders = async () => {
       try {
         const response = await fetch('/api/nextcloud/status');
-        const data = await response.json();
-
         if (!response.ok) {
-          throw new Error(data.error || 'Failed to connect to Nextcloud');
+          throw new Error('Failed to fetch Nextcloud folders');
         }
-
+        const data = await response.json();
-        setNextcloudStatus({
+        setNextcloudFolders(data.folders || []);
-          isConnected: true,
+        setError(null);
-          folders: data.folders || []
+      } catch (err) {
-        });
+        setError(err instanceof Error ? err.message : 'An error occurred');
-      } catch (error) {
+        setNextcloudFolders([]);
-        console.error('Nextcloud connection error:', error);
+      } finally {
-        setNextcloudStatus({
+        setIsLoading(false);
-          isConnected: false,
-          folders: [],
-          error: error instanceof Error ? error.message : 'Failed to connect to Nextcloud'
-        });
-        toast.error("Impossible de se connecter à Nextcloud. Veuillez vérifier votre connexion.");
       }
-    }
+    };
 
-    if (session?.user) {
+    fetchNextcloudFolders();
-      checkNextcloudConnection();
+  }, []);
-    }
-  }, [session]);
 
   useEffect(() => {
     if (status === "unauthenticated") {
@@ -139,99 +128,50 @@ export default function CarnetPage() {
     console.log('Saving note:', note);
   };
 
+  const handleFolderSelect = (folder: string) => {
+    setSelectedFolder(folder);
+    setLayout(PaneLayout.ItemSelection);
+  };
+
   if (isLoading) {
     return (
-      <div className="flex h-screen items-center justify-center">
+      <div className="flex items-center justify-center h-screen">
-        <div className="h-32 w-32 animate-spin rounded-full border-t-2 border-b-2 border-gray-900"></div>
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-carnet-primary"></div>
       </div>
     );
   }
 
-  if (!nextcloudStatus.isConnected) {
+  if (error) {
     return (
-      <div className="flex h-[calc(100vh-3.5rem)] mt-14 items-center justify-center bg-carnet-bg">
+      <div className="flex items-center justify-center h-screen">
-        <div className="text-center">
+        <div className="text-red-500">{error}</div>
-          <h2 className="text-xl font-semibold text-carnet-text-primary mb-2">
-            Connexion à Nextcloud impossible
-          </h2>
-          <p className="text-carnet-text-muted mb-4">
-            {nextcloudStatus.error || "Veuillez vérifier votre connexion et réessayer."}
-          </p>
-          <button
-            onClick={() => window.location.reload()}
-            className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90"
-          >
-            Réessayer
-          </button>
-        </div>
       </div>
     );
   }
 
   return (
-    <main className="flex h-[calc(100vh-3.5rem)] mt-14 bg-carnet-bg">
+    <div className="flex h-screen bg-carnet-background">
-      {/* Navigation Panel */}
+      <Navigation 
-      {showNav && (
+        layout={layout}
-        <>
+        onLayoutChange={setLayout}
-          <div 
+        nextcloudFolders={nextcloudFolders}
-            className="flex flex-col h-full bg-carnet-sidebar"
+        onFolderSelect={handleFolderSelect}
-            style={{ width: `${navWidth}px` }}
+      />
-          >
+      <div className="flex-1 flex flex-col">
-            <Navigation onLayoutChange={setLayoutMode} nextcloudFolders={nextcloudStatus.folders} />
+        <Header />
-          </div>
+        <div className="flex-1 overflow-hidden">
-
+          {selectedFolder ? (
-          {/* Navigation Resizer */}
+            <div className="p-6">
-          <PanelResizer
+              <h2 className="text-2xl font-semibold mb-4">{selectedFolder}</h2>
-            isDragging={isDraggingNav}
+              {/* Add your folder content here */}
-            onDragStart={() => setIsDraggingNav(true)}
+            </div>
-            onDragEnd={() => setIsDraggingNav(false)}
+          ) : (
-            onDrag={handleNavResize}
+            <div className="flex items-center justify-center h-full">
-          />
+              <p className="text-carnet-text-muted">Select a folder to view its contents</p>
-        </>
+            </div>
-      )}
+          )}
-
-      {/* 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>
-
-      {/* 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>
-    </main>
+    </div>
   );
 } 

components/carnet/header.tsx

@@ -0,0 +1,11 @@
+interface HeaderProps {
+  title: string;
+}
+
+export default function Header({ title }: HeaderProps) {
+  return (
+    <div className="h-16 border-b border-carnet-border flex items-center px-6">
+      <h1 className="text-xl font-semibold text-carnet-text-primary">{title}</h1>
+    </div>
+  );
+} 

components/carnet/navigation.tsx

@@ -5,11 +5,13 @@ import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder } from 'lucide-
 import { PaneLayout } from '@/app/carnet/page';
 
 interface NavigationProps {
-  onLayoutChange?: (layout: PaneLayout) => void;
+  layout: PaneLayout;
-  nextcloudFolders?: string[];
+  onLayoutChange: (layout: PaneLayout) => void;
+  nextcloudFolders: string[];
+  onFolderSelect: (folder: string) => void;
 }
 
-export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange, nextcloudFolders = [] }) => {
+export default function Navigation({ layout, onLayoutChange, nextcloudFolders, onFolderSelect }: NavigationProps) {
   const [searchQuery, setSearchQuery] = useState('');
 
   return (
@@ -75,29 +77,10 @@ export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange, nextclou
           </div>
         </div>
 
-        {/* Favorites Section */}
+        {/* Nextcloud Folders Section */}
-        <div className="mt-6 px-3">
-          <h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Vues</h3>
-          <div className="space-y-0.5">
-            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
-              <span className="text-sm text-carnet-text-primary">Journal</span>
-              <span className="ml-auto text-xs text-carnet-text-muted">2</span>
-            </div>
-            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
-              <span className="text-sm text-carnet-text-primary">Santé</span>
-              <span className="ml-auto text-xs text-carnet-text-muted">1</span>
-            </div>
-            <div className="flex items-center px-3 py-2 rounded-md hover:bg-carnet-hover cursor-pointer">
-              <span className="text-sm text-carnet-text-primary">Daily Notes</span>
-              <span className="ml-auto text-xs text-carnet-text-muted">7</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Nextcloud Folders */}
         {nextcloudFolders.length > 0 && (
           <div className="mt-6 px-3">
-            <h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Dossiers Nextcloud</h3>
+            <h3 className="px-3 mb-2 text-xs font-medium text-carnet-text-muted uppercase">Vues</h3>
             <div className="space-y-0.5">
               {nextcloudFolders.map((folder) => (
                 <div 
@@ -114,4 +97,4 @@ export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange, nextclou
       </div>
     </div>
   );
-}; 
+}