import React from 'react'; import { Plus, Archive, Settings, ChevronRight, BookOpen, Bot, Microscope, Activity, Pin, Moon, Sun, Bell, Lock, Edit3, Trash2, Users, Clock } from 'lucide-react'; import { motion, AnimatePresence } from 'motion/react'; import { NavigationView, Carnet, Note } from '../types'; interface NoteLinkProps { note: Note; isActive: boolean; onClick: () => void; } const NoteLink: React.FC = ({ note, isActive, onClick }) => (
{note.title}
{note.isPinned && } ); interface SidebarItemProps { carnet: Carnet; isActive: boolean; notes: Note[]; activeNoteId: string | null; onCarnetClick: () => void; onNoteClick: (noteId: string) => void; onAddSubCarnet: () => void; onRename: () => void; onDelete: () => void; children?: React.ReactNode; level: number; isExpanded: boolean; toggleExpand: () => void; } const SidebarItem: React.FC = ({ carnet, isActive, notes, activeNoteId, onCarnetClick, onNoteClick, onAddSubCarnet, onRename, onDelete, children, level, isExpanded, toggleExpand }) => { const hasChildren = React.Children.count(children) > 0; return (
{/* Hierarchy Guide Line */} {level > 0 && (
)} {level > 0 && (
)}
{hasChildren ? ( ) : (
// Spacer for alignment )} {/* Hierarchy Connector Line */} {hasChildren && level > 0 && (
)} {/* active indicator dot */} {isActive && ( )}
{carnet.initial}
{carnet.name} {carnet.isPrivate && }
{notes.length > 0 && ( {notes.length} )}
{(isExpanded || (isActive && !hasChildren)) && (
{/* Vertical line for nested content */}
{children} {isActive && !hasChildren && notes.map(note => ( onNoteClick(note.id)} /> ))} {isActive && !hasChildren && notes.length === 0 && (

No notes found

)}
)}
); }; interface SidebarProps { activeView: NavigationView; isDarkMode: boolean; setIsDarkMode: (val: boolean) => void; setActiveView: (view: NavigationView) => void; carnets: Carnet[]; notes: Note[]; activeCarnetId: string; activeNoteId: string | null; setActiveCarnetId: (id: string) => void; setActiveNoteId: (id: string | null) => void; setShowNewCarnetModal: (show: boolean, parentId?: string, isRenaming?: boolean, carnetId?: string) => void; onDeleteCarnet: (id: string) => void; } export const Sidebar: React.FC = ({ activeView, isDarkMode, setIsDarkMode, setActiveView, carnets, notes, activeCarnetId, activeNoteId, setActiveCarnetId, setActiveNoteId, setShowNewCarnetModal, onDeleteCarnet }) => { const [expandedIds, setExpandedIds] = React.useState>(new Set(['4'])); // Default expand Research const toggleExpand = (id: string) => { const newSet = new Set(expandedIds); if (newSet.has(id)) newSet.delete(id); else newSet.add(id); setExpandedIds(newSet); }; const renderCarnetTree = (parentId: string | undefined = undefined, level: number = 0) => { return carnets .filter(c => c.parentId === parentId && !c.isDeleted) .map(carnet => ( n.carnetId === carnet.id && !n.isDeleted)} activeNoteId={activeNoteId} level={level} isExpanded={expandedIds.has(carnet.id)} toggleExpand={() => toggleExpand(carnet.id)} onAddSubCarnet={() => { if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id); setShowNewCarnetModal(true, carnet.id); }} onRename={() => { setShowNewCarnetModal(true, undefined, true, carnet.id); }} onDelete={() => { onDeleteCarnet(carnet.id); }} onCarnetClick={() => { setActiveCarnetId(carnet.id); setActiveNoteId(null); // Auto expand when clicking if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id); }} onNoteClick={(id) => { setActiveCarnetId(carnet.id); setActiveNoteId(id); }} > {renderCarnetTree(carnet.id, level + 1)} )); }; return ( ); };