carnet

app/carnet/page.tsx

@@ -106,12 +106,12 @@ export default function CarnetPage() {
   }
 
   return (
-    <main className="flex h-screen bg-background">
+    <main className="flex h-[calc(100vh-3.5rem)] mt-14 bg-carnet-bg">
       {/* Navigation Panel */}
       {showNav && (
         <>
           <div 
-            className="flex flex-col h-full bg-sidebar"
+            className="flex flex-col h-full bg-carnet-sidebar"
             style={{ width: `${navWidth}px` }}
           >
             <Navigation onLayoutChange={setLayoutMode} />
@@ -131,7 +131,7 @@ export default function CarnetPage() {
       {showNotes && (
         <>
           <div 
-            className="flex flex-col h-full bg-panel"
+            className="flex flex-col h-full bg-carnet-bg"
             style={{ width: `${notesWidth}px` }}
           >
             <NotesView onNoteSelect={handleNoteSelect} />
@@ -148,7 +148,7 @@ export default function CarnetPage() {
       )}
 
       {/* Editor Panel */}
-      <div className="flex-1 flex flex-col h-full bg-background">
+      <div className="flex-1 flex flex-col h-full bg-carnet-bg">
         <Editor note={selectedNote} onSave={handleNoteSave} />
       </div>
 

components/carnet/editor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from 'react';
-import { Image, FileText } from 'lucide-react';
+import { Image, FileText, Link, List } from 'lucide-react';
 
 interface EditorProps {
   note?: {
@@ -42,42 +42,48 @@ export const Editor: React.FC<EditorProps> = ({ note, onSave }) => {
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full bg-carnet-bg">
       {/* Title Bar */}
-      <div className="p-4 border-b">
+      <div className="p-4 border-b border-carnet-border">
         <input
           type="text"
           value={title}
           onChange={handleTitleChange}
           placeholder="Note title"
-          className="w-full text-xl font-semibold focus:outline-none bg-transparent"
+          className="w-full text-xl font-semibold text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none bg-transparent"
         />
       </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">
         <textarea
           value={content}
           onChange={handleContentChange}
           placeholder="Start writing..."
-          className="w-full h-full resize-none focus:outline-none bg-transparent"
+          className="w-full h-full resize-none focus:outline-none bg-transparent text-carnet-text-primary placeholder-carnet-text-muted"
         />
       </div>
-
-      {/* Toolbar */}
-      <div className="p-4 border-t">
-        <div className="flex space-x-2">
-          <button 
-            className="p-2 text-gray-500 hover:text-gray-700"
-            onClick={handleSave}
-          >
-            <FileText className="h-5 w-5" />
-          </button>
-          <button className="p-2 text-gray-500 hover:text-gray-700">
-            <Image className="h-5 w-5" />
-          </button>
-        </div>
-      </div>
     </div>
   );
 }; 

hooks/use-media-query.ts

@@ -6,19 +6,15 @@ export function useMediaQuery(query: string): boolean {
   const [matches, setMatches] = useState(false);
 
   useEffect(() => {
-    const media = window.matchMedia(query);
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
 
-    // Set initial value
+    const handler = (event: MediaQueryListEvent) => {
-    setMatches(media.matches);
+      setMatches(event.matches);
+    };
 
-    // Create event listener
+    mediaQuery.addEventListener('change', handler);
-    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+    return () => mediaQuery.removeEventListener('change', handler);
-    
-    // Add the listener
-    media.addEventListener('change', listener);
-
-    // Clean up
-    return () => media.removeEventListener('change', listener);
   }, [query]);
 
   return matches;

types/carnet.d.ts

@@ -0,0 +1,51 @@
+import { PaneLayout } from "@/app/carnet/page";
+
+declare module "@/components/carnet/navigation" {
+  interface NavigationProps {
+    onLayoutChange: (layout: PaneLayout) => void;
+  }
+  export const Navigation: React.FC<NavigationProps>;
+}
+
+declare module "@/components/carnet/notes-view" {
+  interface Note {
+    id: string;
+    title: string;
+    content: string;
+    lastEdited: Date;
+    category?: string;
+    tags?: string[];
+  }
+  interface NotesViewProps {
+    onNoteSelect: (note: Note) => void;
+  }
+  export const NotesView: React.FC<NotesViewProps>;
+}
+
+declare module "@/components/carnet/editor" {
+  interface Note {
+    id: string;
+    title: string;
+    content: string;
+    lastEdited: Date;
+  }
+  interface EditorProps {
+    note: Note | null;
+    onSave: (note: Note) => void;
+  }
+  export const Editor: React.FC<EditorProps>;
+}
+
+declare module "@/components/carnet/panel-resizer" {
+  interface PanelResizerProps {
+    isDragging: boolean;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    onDrag: (e: MouseEvent) => void;
+  }
+  export const PanelResizer: React.FC<PanelResizerProps>;
+}
+
+declare module "@/hooks/use-media-query" {
+  export function useMediaQuery(query: string): boolean;
+}