alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carnet

Browse Source
This commit is contained in:
alma 2025-04-20 11:30:07 +02:00
parent cecac44917
commit b14908a6c0
4 changed files with 88 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/carnet/page.tsx
View File

@ -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>

46
components/carnet/editor.tsx
View File

@ -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>
);
};

18
hooks/use-media-query.ts
View File

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

51
types/carnet.d.ts vendored Normal file
View File

@ -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;
}