cleanup: remove unused components to trigger deployment

architectural-grid/src/components/Sidebar.tsx

@@ -0,0 +1,350 @@
+import React from 'react';
+import { 
+  Plus, 
+  Archive, 
+  Settings, 
+  ChevronRight,
+  BookOpen,
+  Bot,
+  Microscope,
+  Activity,
+  Pin,
+  Moon,
+  Sun,
+  Bell,
+  Lock
+} 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<NoteLinkProps> = ({ note, isActive, onClick }) => (
+  <motion.button
+    initial={{ opacity: 0, x: -10 }}
+    animate={{ opacity: 1, x: 0 }}
+    onClick={onClick}
+    className={`w-full flex items-center gap-2 pl-12 pr-4 py-2 text-[12px] transition-colors rounded-lg
+      ${isActive ? 'bg-white/50 dark:bg-white/10 text-ink font-medium' : 'text-muted-ink hover:text-ink hover:bg-white/30'}`}
+  >
+    <div className="flex items-center gap-2 flex-1 truncate">
+      <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${isActive ? 'bg-ink' : 'bg-transparent border border-muted-ink/30'}`} />
+      <span className="truncate">{note.title}</span>
+    </div>
+    {note.isPinned && <Pin size={10} className="text-amber-500 shrink-0" />}
+  </motion.button>
+);
+
+interface SidebarItemProps {
+  carnet: Carnet;
+  isActive: boolean;
+  notes: Note[];
+  activeNoteId: string | null;
+  onCarnetClick: () => void;
+  onNoteClick: (noteId: string) => void;
+  onAddSubCarnet: () => void;
+  children?: React.ReactNode;
+  level: number;
+  isExpanded: boolean;
+  toggleExpand: () => void;
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = ({ 
+  carnet, 
+  isActive, 
+  notes,
+  activeNoteId,
+  onCarnetClick,
+  onNoteClick,
+  onAddSubCarnet,
+  children,
+  level,
+  isExpanded,
+  toggleExpand
+}) => {
+  const hasChildren = React.Children.count(children) > 0;
+
+  return (
+    <div className="space-y-0.5">
+      <div 
+        className="flex items-center group relative h-10"
+        style={{ paddingLeft: `${level * 12}px` }}
+      >
+        {/* Hierarchy Guide Line */}
+        {level > 0 && (
+          <div className="absolute left-[8px] top-[-10px] bottom-1/2 w-px bg-border/40" />
+        )}
+        {level > 0 && (
+          <div className="absolute left-[8px] top-1/2 w-[8px] h-px bg-border/40" />
+        )}
+
+        <div className="flex-1 flex items-center gap-1">
+          {hasChildren ? (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleExpand();
+              }}
+              className="p-1 hover:bg-ink/5 dark:hover:bg-white/5 rounded-md transition-colors text-muted-ink"
+            >
+              <motion.div animate={{ rotate: isExpanded ? 90 : 0 }} transition={{ duration: 0.2 }}>
+                <ChevronRight size={14} />
+              </motion.div>
+            </button>
+          ) : (
+            <div className="w-6" /> // Spacer for alignment
+          )}
+
+          <motion.button
+            whileHover={{ x: 2 }}
+            onClick={onCarnetClick}
+            className={`flex-1 flex items-center gap-2.5 px-2 py-1.5 rounded-lg transition-all duration-300
+              ${isActive ? 'bg-white shadow-sm border border-border/40 dark:bg-white/10' : 'hover:bg-white/40 dark:hover:bg-white/5'}`}
+          >
+            <div className={`w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold border transition-all
+              ${isActive ? 'bg-ink text-paper border-ink' : 'bg-paper dark:bg-white/10 text-concrete border-border dark:border-white/10'}`}>
+              {carnet.initial}
+            </div>
+            <div className="flex-1 text-left flex items-center gap-2">
+              <span className={`text-[12px] font-medium transition-colors truncate ${isActive ? 'text-ink' : 'text-muted-ink hover:text-ink'}`}>
+                {carnet.name}
+              </span>
+              {carnet.isPrivate && <Lock size={10} className="text-concrete/60 shrink-0" />}
+            </div>
+            
+            <div className="flex items-center gap-1.5">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAddSubCarnet();
+                }}
+                className="opacity-0 group-hover:opacity-100 p-1 hover:bg-ink/10 dark:hover:bg-white/10 rounded-md transition-all text-concrete hover:text-ink"
+                title="Add sub-carnet"
+              >
+                <Plus size={10} />
+              </button>
+              
+              {notes.length > 0 && (
+                <span className="text-[9px] font-bold text-concrete/40 px-1.5 border border-border/40 rounded-full group-hover:text-concrete transition-colors">
+                  {notes.length}
+                </span>
+              )}
+            </div>
+          </motion.button>
+        </div>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {(isExpanded || (isActive && !hasChildren)) && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
+            className="overflow-hidden"
+          >
+            <div className="relative" style={{ marginLeft: `${(level + 1) * 12 + 10}px` }}>
+              {/* Vertical line for nested content */}
+              <div className="absolute left-[-6px] top-0 bottom-4 w-px bg-border/30" />
+              
+              <div className="space-y-1 py-1">
+                {children}
+                {isActive && !hasChildren && notes.map(note => (
+                  <NoteLink 
+                    key={note.id} 
+                    note={note} 
+                    isActive={activeNoteId === note.id}
+                    onClick={() => onNoteClick(note.id)}
+                  />
+                ))}
+                {isActive && !hasChildren && notes.length === 0 && (
+                  <p className="pl-8 py-2 text-[10px] italic text-concrete/40 font-light">
+                    No notes found
+                  </p>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+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) => void;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  activeView,
+  isDarkMode,
+  setIsDarkMode,
+  setActiveView,
+  carnets,
+  notes,
+  activeCarnetId,
+  activeNoteId,
+  setActiveCarnetId,
+  setActiveNoteId,
+  setShowNewCarnetModal
+}) => {
+  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(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)
+      .map(carnet => (
+        <SidebarItem 
+          key={carnet.id} 
+          carnet={carnet} 
+          isActive={activeCarnetId === carnet.id}
+          notes={notes.filter(n => n.carnetId === carnet.id)}
+          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);
+          }}
+          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)}
+        </SidebarItem>
+      ));
+  };
+
+  return (
+    <aside className="w-80 bg-white/30 dark:bg-[#151515] backdrop-blur-md border-r border-border p-6 flex flex-col z-20 shrink-0 transition-colors duration-500">
+      <div className="mb-10 flex items-center justify-between">
+        <div className="w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 border border-border flex items-center justify-center text-ink font-serif text-lg shadow-sm">
+          A
+        </div>
+        <div className="flex items-center gap-2">
+          <button 
+            onClick={() => setIsDarkMode(!isDarkMode)}
+            className="p-2 text-muted-ink hover:text-ink transition-all bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10"
+          >
+            {isDarkMode ? <Sun size={14} /> : <Moon size={14} />}
+          </button>
+
+          <button className="p-2 text-muted-ink hover:text-ink transition-all relative group bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10">
+            <Bell size={14} />
+            <span className="absolute -top-1 -right-1 w-4 h-4 bg-rose-500 text-white text-[9px] font-bold flex items-center justify-center rounded-full border border-white shadow-sm">
+              3
+            </span>
+          </button>
+
+          <div className="flex bg-white/50 dark:bg-white/10 p-1 rounded-full border border-border dark:border-white/10 transition-all">
+            <button 
+              onClick={() => setActiveView('notebooks')}
+              className={`p-1.5 rounded-full transition-all ${activeView === 'notebooks' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
+              title="Carnets"
+            >
+              <BookOpen size={14} />
+            </button>
+            <button 
+              onClick={() => setActiveView('agents')}
+              className={`p-1.5 rounded-full transition-all ${activeView === 'agents' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
+              title="Agents"
+            >
+              <Bot size={14} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto space-y-8 -mx-2 px-2 py-4 custom-scrollbar">
+        {activeView === 'notebooks' ? (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between px-4">
+              <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase">
+                Architecture Grid
+              </p>
+              <button 
+                onClick={() => setShowNewCarnetModal(true)}
+                className="p-1 hover:bg-paper dark:hover:bg-white/5 rounded-md text-concrete hover:text-ink transition-colors"
+                title="New Carnet"
+              >
+                <Plus size={14} />
+              </button>
+            </div>
+            
+            <nav className="space-y-0.5">
+              {renderCarnetTree()}
+            </nav>
+          </div>
+        ) : activeView === 'agents' ? (
+          <div>
+            <p className="text-[10px] font-bold text-muted-ink tracking-widest uppercase mb-4 px-4">
+              Intelligence OS
+            </p>
+            <div className="space-y-1">
+              {[
+                { id: 'a1', name: 'Mes Agents', icon: <Bot size={16} /> },
+                { id: 'a2', name: 'Le Lab AI', icon: <Microscope size={16} /> },
+                { id: 'a3', name: 'Activités', icon: <Activity size={16} /> },
+              ].map(item => (
+                <button
+                  key={item.id}
+                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
+                    ${item.id === 'a1' ? 'active-nav-item' : 'text-muted-ink hover:bg-white/40 dark:hover:bg-white/5 hover:text-ink'}`}
+                >
+                  <div className={`w-8 h-8 rounded-full flex items-center justify-center border transition-colors
+                    ${item.id === 'a1' ? 'bg-ink text-paper border-ink' : 'bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-ink/20'}`}>
+                    {item.icon}
+                  </div>
+                  <span className="text-[13px] font-medium">{item.name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="pt-6 border-t border-border space-y-4">
+        <button className="flex items-center gap-3 px-4 text-[13px] text-muted-ink hover:text-ink transition-colors font-medium group">
+          <Archive size={16} className="text-muted-ink group-hover:text-ink" />
+          <span>Archive</span>
+        </button>
+        <button 
+          onClick={() => setActiveView('settings')}
+          className={`flex items-center gap-3 px-4 text-[13px] transition-colors font-medium group ${activeView === 'settings' ? 'text-ink' : 'text-muted-ink hover:text-ink'}`}
+        >
+          <Settings size={16} className={activeView === 'settings' ? 'text-ink' : 'text-muted-ink group-hover:text-ink'} />
+          <span>Settings</span>
+        </button>
+      </div>
+    </aside>
+  );
+};