937 lines
48 KiB
TypeScript
937 lines
48 KiB
TypeScript
/**
|
|
* @license
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import React, { useState, useMemo } from 'react';
|
|
import {
|
|
Plus,
|
|
Search,
|
|
Share2,
|
|
Archive,
|
|
Settings,
|
|
Lock,
|
|
ChevronRight,
|
|
MoreVertical,
|
|
ArrowLeft,
|
|
Sparkles,
|
|
MessageSquare,
|
|
Wand2,
|
|
FileCode,
|
|
Globe,
|
|
Send,
|
|
RefreshCw,
|
|
Clock,
|
|
BookOpen,
|
|
Layout,
|
|
Scissors,
|
|
Zap,
|
|
Languages,
|
|
ArrowRightLeft,
|
|
History
|
|
} from 'lucide-react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
|
|
// --- Types ---
|
|
|
|
type AITone = 'Professional' | 'Creative' | 'Academic' | 'Casual';
|
|
type AITab = 'discussion' | 'actions' | 'resources';
|
|
|
|
interface Note {
|
|
id: string;
|
|
carnetId: string;
|
|
title: string;
|
|
content: string;
|
|
imageUrl: string;
|
|
date: string;
|
|
}
|
|
|
|
interface Carnet {
|
|
id: string;
|
|
name: string;
|
|
initial: string;
|
|
type: 'Private' | 'Project' | 'Shared';
|
|
isPrivate?: boolean;
|
|
}
|
|
|
|
// --- Mock Data ---
|
|
|
|
const CARNETS: Carnet[] = [
|
|
{ id: '1', name: 'Daily Notes', initial: 'D', type: 'Private', isPrivate: true },
|
|
{ id: '2', name: 'Project: Neo', initial: 'P', type: 'Project' },
|
|
{ id: '3', name: 'Shared Docs', initial: 'S', type: 'Shared' },
|
|
{ id: '4', name: 'Architecture Research', initial: 'A', type: 'Project' },
|
|
];
|
|
|
|
const ALL_NOTES: Note[] = [
|
|
{
|
|
id: 'n1',
|
|
carnetId: '4',
|
|
title: 'Grid Systems',
|
|
date: 'Oct 26, 2024',
|
|
content: 'Grid Systems is streathen in ognitiacs clesign and simulhere desipmalt: complded structurer and manamateriai-s: ci arevenuatingly used, asiller straterty of insaee to the tmn and usaes of disrension, architecture of emiornabious tracious structures.',
|
|
imageUrl: 'https://images.unsplash.com/photo-1503387762-592dea58ef23?auto=format&fit=crop&q=80&w=800&h=600'
|
|
},
|
|
{
|
|
id: 'n2',
|
|
carnetId: '4',
|
|
title: 'Materiality',
|
|
date: 'Oct 24, 2024',
|
|
content: 'Materiality is combinated by relliaitic structureirs measure of plastics, natural, materials and priotical structures. Materialed coasts erabiocera alann light spaces and octicm employed design on thodolen of materiality, and tohlite tersev/ used in the gridin structures en obain materials, coms pathetic structure.',
|
|
imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800&h=600'
|
|
},
|
|
{
|
|
id: 'n3',
|
|
carnetId: '4',
|
|
title: 'Light & Space',
|
|
date: 'Oct 22, 2024',
|
|
content: 'Light & Space is a creaivity of light & Space inralicated in sizazant or dark crotrcning and netrescenations of avant trurme sivonpaltures for in inncr-en allimativefiting is cerriadating and sityle.',
|
|
imageUrl: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=800&h=600'
|
|
},
|
|
{
|
|
id: 'n4',
|
|
carnetId: '2',
|
|
title: 'Neo-Brutalism study',
|
|
date: 'Sep 12, 2024',
|
|
content: 'Exploring the raw aesthetic of neo-brutalism in urban environments. Focus on concrete textures and massive forms.',
|
|
imageUrl: 'https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&q=80&w=800&h=600'
|
|
}
|
|
];
|
|
|
|
// --- Components ---
|
|
|
|
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 text-ink font-medium' : 'text-muted-ink hover:text-ink hover:bg-white/30'}`}
|
|
>
|
|
<div className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-ink' : 'bg-transparent border border-muted-ink/30'}`} />
|
|
<span className="truncate">{note.title}</span>
|
|
</motion.button>
|
|
);
|
|
|
|
interface SidebarItemProps {
|
|
carnet: Carnet;
|
|
isActive: boolean;
|
|
notes: Note[];
|
|
activeNoteId: string | null;
|
|
onCarnetClick: () => void;
|
|
onNoteClick: (noteId: string) => void;
|
|
}
|
|
|
|
const SidebarItem: React.FC<SidebarItemProps> = ({
|
|
carnet,
|
|
isActive,
|
|
notes,
|
|
activeNoteId,
|
|
onCarnetClick,
|
|
onNoteClick
|
|
}) => {
|
|
return (
|
|
<div className="space-y-1">
|
|
<motion.button
|
|
whileHover={{ x: 4 }}
|
|
onClick={() => {
|
|
onCarnetClick();
|
|
}}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
|
|
${isActive ? 'active-nav-item' : 'hover:bg-white/40'}`}
|
|
>
|
|
<motion.div
|
|
animate={{ rotate: isActive ? 90 : 0 }}
|
|
className="text-muted-ink"
|
|
>
|
|
<ChevronRight size={14} />
|
|
</motion.div>
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border
|
|
${isActive ? 'bg-ink text-paper border-ink' : 'bg-white/60 text-ink border-border'}`}>
|
|
{carnet.initial}
|
|
</div>
|
|
<div className="flex-1 text-left">
|
|
<div className="flex items-center gap-2">
|
|
<span className={`text-[13px] font-medium transition-colors ${isActive ? 'text-ink' : 'text-muted-ink'}`}>
|
|
{carnet.name}
|
|
</span>
|
|
{carnet.isPrivate && <Lock size={10} className="text-muted-ink" />}
|
|
</div>
|
|
</div>
|
|
</motion.button>
|
|
|
|
<AnimatePresence>
|
|
{isActive && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
|
|
className="overflow-hidden space-y-0.5"
|
|
>
|
|
{notes.map(note => (
|
|
<NoteLink
|
|
key={note.id}
|
|
note={note}
|
|
isActive={activeNoteId === note.id}
|
|
onClick={() => onNoteClick(note.id)}
|
|
/>
|
|
))}
|
|
{notes.length === 0 && (
|
|
<p className="pl-12 text-[11px] text-muted-ink/50 py-2 italic font-light">No notes yet</p>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function App() {
|
|
const [carnets, setCarnets] = useState<Carnet[]>(CARNETS);
|
|
const [notes, setNotes] = useState<Note[]>(ALL_NOTES);
|
|
const [activeCarnetId, setActiveCarnetId] = useState('4');
|
|
const [activeNoteId, setActiveNoteId] = useState<string | null>(null);
|
|
const [isAISidebarOpen, setIsAISidebarOpen] = useState(false);
|
|
const [aiTab, setAiTab] = useState<AITab>('discussion');
|
|
const [selectedTone, setSelectedTone] = useState<AITone>('Professional');
|
|
|
|
// Modal States
|
|
const [showNewCarnetModal, setShowNewCarnetModal] = useState(false);
|
|
const [showNewNoteModal, setShowNewNoteModal] = useState(false);
|
|
|
|
// Form States
|
|
const [newCarnetName, setNewCarnetName] = useState('');
|
|
const [newNoteTitle, setNewNoteTitle] = useState('');
|
|
const [newNoteContent, setNewNoteContent] = useState('');
|
|
|
|
const filteredNotes = useMemo(() =>
|
|
notes.filter(n => n.carnetId === activeCarnetId),
|
|
[activeCarnetId, notes]);
|
|
|
|
const activeNote = useMemo(() =>
|
|
notes.find(n => n.id === activeNoteId),
|
|
[activeNoteId, notes]);
|
|
|
|
const activeCarnet = useMemo(() =>
|
|
carnets.find(c => c.id === activeCarnetId),
|
|
[activeCarnetId, carnets]);
|
|
|
|
const handleAddCarnet = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newCarnetName.trim()) return;
|
|
|
|
const newCarnet: Carnet = {
|
|
id: Date.now().toString(),
|
|
name: newCarnetName,
|
|
initial: newCarnetName.charAt(0).toUpperCase(),
|
|
type: 'Project'
|
|
};
|
|
|
|
setCarnets([...carnets, newCarnet]);
|
|
setNewCarnetName('');
|
|
setShowNewCarnetModal(false);
|
|
setActiveCarnetId(newCarnet.id);
|
|
};
|
|
|
|
const handleAddNote = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newNoteTitle.trim() || !newNoteContent.trim()) return;
|
|
|
|
const newNote: Note = {
|
|
id: `n-${Date.now()}`,
|
|
carnetId: activeCarnetId,
|
|
title: newNoteTitle,
|
|
date: new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date()),
|
|
content: newNoteContent,
|
|
imageUrl: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=800&h=600'
|
|
};
|
|
|
|
setNotes([newNote, ...notes]);
|
|
setNewNoteTitle('');
|
|
setNewNoteContent('');
|
|
setShowNewNoteModal(false);
|
|
setActiveNoteId(newNote.id);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4 md:p-8 lg:p-12 overflow-hidden">
|
|
<div className="absolute inset-0 z-0 bg-[#DEDEDE]" />
|
|
|
|
<div className="relative w-full max-w-7xl h-[85vh] flex rounded-2xl overflow-hidden shadow-2xl sidebar-shadow bg-paper">
|
|
<div className="absolute -right-4 -bottom-4 w-full h-full bg-white/40 rounded-2xl -z-10 translate-x-2 translate-y-2 opacity-50" />
|
|
<div className="absolute -right-2 -bottom-2 w-full h-full bg-white/60 rounded-2xl -z-10 translate-x-1 translate-y-1 opacity-70" />
|
|
|
|
<aside className="w-80 bg-white/30 backdrop-blur-md border-right border-border p-6 flex flex-col z-20 shrink-0">
|
|
<div className="mb-10">
|
|
<div className="w-10 h-10 rounded-full bg-slate-200 border border-border flex items-center justify-center text-ink font-serif text-lg shadow-sm">
|
|
A
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto space-y-6 -mx-2 px-2 custom-scrollbar">
|
|
<div>
|
|
<p className="text-[10px] font-bold text-muted-ink tracking-widest uppercase mb-4 px-4">
|
|
Architecture Grid
|
|
</p>
|
|
<div className="space-y-1">
|
|
{carnets.map(carnet => (
|
|
<SidebarItem
|
|
key={carnet.id}
|
|
carnet={carnet}
|
|
isActive={activeCarnetId === carnet.id}
|
|
notes={notes.filter(n => n.carnetId === carnet.id)}
|
|
activeNoteId={activeNoteId}
|
|
onCarnetClick={() => {
|
|
setActiveCarnetId(carnet.id);
|
|
setActiveNoteId(null);
|
|
}}
|
|
onNoteClick={(id) => {
|
|
setActiveCarnetId(carnet.id);
|
|
setActiveNoteId(id);
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setShowNewCarnetModal(true)}
|
|
className="w-full mt-4 flex items-center gap-3 px-4 py-2 text-[13px] text-muted-ink hover:text-ink transition-colors font-medium rounded-lg hover:bg-white/40"
|
|
>
|
|
<Plus size={16} />
|
|
<span>New Carnet</span>
|
|
</button>
|
|
</div>
|
|
</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">
|
|
<Archive size={16} />
|
|
<span>Archive</span>
|
|
</button>
|
|
<button className="flex items-center gap-3 px-4 text-[13px] text-muted-ink hover:text-ink transition-colors font-medium">
|
|
<Settings size={16} />
|
|
<span>Settings</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="flex-1 paper-texture relative overflow-hidden z-10 flex flex-col h-full">
|
|
<AnimatePresence mode="wait">
|
|
{!activeNoteId ? (
|
|
<motion.div
|
|
key="notebook"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="h-full flex flex-col overflow-y-auto"
|
|
>
|
|
<header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-paper/80 backdrop-blur-md z-30">
|
|
<div className="flex justify-between items-start">
|
|
<h1 className="text-4xl font-serif font-medium tracking-tight text-ink leading-tight pr-12">
|
|
{activeCarnet?.name} — {filteredNotes[0]?.date || 'Oct 26'}
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between border-b border-ink/5 pb-4">
|
|
<div className="flex items-center gap-6">
|
|
<button
|
|
onClick={() => setShowNewNoteModal(true)}
|
|
className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity"
|
|
>
|
|
<Plus size={16} />
|
|
<span>Add Note</span>
|
|
</button>
|
|
<button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
|
|
<Search size={16} />
|
|
<span>Search</span>
|
|
</button>
|
|
</div>
|
|
<button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
|
|
<Share2 size={16} />
|
|
<span>Share</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="px-12 flex-1 pb-20">
|
|
<div className="max-w-3xl space-y-16">
|
|
{filteredNotes.map((note, index) => (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 * index, duration: 0.8 }}
|
|
key={note.id}
|
|
className="space-y-4 group cursor-pointer"
|
|
onClick={() => setActiveNoteId(note.id)}
|
|
>
|
|
<h2 className="text-2xl font-serif font-medium text-ink flex items-center justify-between">
|
|
{note.title}
|
|
<button className="opacity-0 group-hover:opacity-40 transition-opacity">
|
|
<ChevronRight size={20} />
|
|
</button>
|
|
</h2>
|
|
<div className="flex flex-col md:flex-row gap-8 items-start">
|
|
<div className="w-full md:w-56 aspect-[4/3] bg-white/50 border border-border overflow-hidden rounded shadow-sm flex-shrink-0">
|
|
<img
|
|
src={note.imageUrl}
|
|
alt={note.title}
|
|
className="w-full h-full object-cover mix-blend-multiply opacity-80 grayscale contrast-125 hover:grayscale-0 hover:opacity-100 transition-all duration-500"
|
|
referrerPolicy="no-referrer"
|
|
/>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-[14px] leading-relaxed text-ink/80 font-light max-w-lg line-clamp-4">
|
|
{note.content}
|
|
</p>
|
|
<span className="text-[11px] text-muted-ink uppercase tracking-widest font-medium">Read more</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
{filteredNotes.length === 0 && (
|
|
<div className="h-64 flex flex-col items-center justify-center text-center space-y-4">
|
|
<p className="font-serif text-xl italic text-muted-ink">This notebook is waiting for its first vision.</p>
|
|
<button
|
|
onClick={() => setShowNewNoteModal(true)}
|
|
className="px-6 py-2 border border-ink text-[13px] uppercase tracking-[0.2em] hover:bg-ink hover:text-paper transition-all"
|
|
>
|
|
Begin Drawing
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<footer className="px-12 py-6 border-t border-ink/5 text-center mt-auto">
|
|
<p className="text-[11px] text-muted-ink uppercase tracking-[0.2em] font-medium">
|
|
© 2024 Architectural Grid. All rights reserved.
|
|
</p>
|
|
</footer>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
key="focused-note"
|
|
initial={{ opacity: 0, scale: 0.98 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 1.02 }}
|
|
className="h-full flex flex-col overflow-y-auto bg-white"
|
|
>
|
|
<div className="flex-1 flex overflow-hidden transition-all duration-500">
|
|
<div className="flex-1 flex flex-col overflow-y-auto bg-white">
|
|
<div className="px-12 py-8 flex items-center justify-between sticky top-0 bg-white/90 backdrop-blur-sm z-40 border-b border-border">
|
|
<button
|
|
onClick={() => setActiveNoteId(null)}
|
|
className="flex items-center gap-2 text-ink hover:opacity-60 transition-opacity"
|
|
>
|
|
<ArrowLeft size={18} />
|
|
<span className="text-sm font-medium">Back to collection</span>
|
|
</button>
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => setIsAISidebarOpen(!isAISidebarOpen)}
|
|
className={`flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all duration-300
|
|
${isAISidebarOpen ? 'bg-ink text-paper border-ink' : 'border-border text-ink hover:bg-white/50'}`}
|
|
>
|
|
<Sparkles size={16} />
|
|
<span className="text-xs font-medium">AI Assistant</span>
|
|
</button>
|
|
<button className="p-2 text-muted-ink hover:text-ink transition-colors">
|
|
<Share2 size={18} />
|
|
</button>
|
|
<button className="p-2 text-muted-ink hover:text-ink transition-colors">
|
|
<MoreVertical size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto w-full px-12 py-16 space-y-12">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3 text-[12px] text-muted-ink uppercase tracking-[.25em] font-bold">
|
|
<span>{activeCarnet?.name}</span>
|
|
<ChevronRight size={10} />
|
|
<span>{activeNote?.date}</span>
|
|
</div>
|
|
<h1 className="text-5xl md:text-6xl font-serif font-bold text-ink leading-tight">
|
|
{activeNote?.title}
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="aspect-[16/9] w-full bg-slate-100 rounded-xl overflow-hidden shadow-xl">
|
|
<img
|
|
src={activeNote?.imageUrl}
|
|
alt={activeNote?.title}
|
|
className="w-full h-full object-cover grayscale contrast-110"
|
|
referrerPolicy="no-referrer"
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-w-2xl mx-auto space-y-8 pb-32">
|
|
<p className="text-xl md:text-2xl font-serif leading-relaxed text-ink italic">
|
|
{activeNote?.content.split('.')[0]}.
|
|
</p>
|
|
<div className="h-px bg-border w-32" />
|
|
<p className="text-lg leading-relaxed text-ink/80 font-light space-y-4 text-justify whitespace-pre-line">
|
|
{activeNote?.content}
|
|
{activeNote?.id.startsWith('n-') && (
|
|
<>
|
|
<br /><br />
|
|
Architectural grids serve as the invisible scaffolding upon which spatial experiences are constructed. Beyond mere structural repetition, they facilitate a rhythmic dialogue between materiality and void. In this exploration, we examine how light fractures these rigid boundaries, creating a dynamic interplay that evolves with the passage of time.
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<AnimatePresence>
|
|
{isAISidebarOpen && (
|
|
<motion.aside
|
|
initial={{ x: 400, opacity: 0 }}
|
|
animate={{ x: 0, opacity: 1 }}
|
|
exit={{ x: 400, opacity: 0 }}
|
|
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
|
|
className="w-[400px] border-l border-border bg-white shadow-2xl flex flex-col z-50 shrink-0 relative"
|
|
>
|
|
{/* Sidebar Header */}
|
|
<div className="p-6 border-b border-border space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="flex items-center gap-2 font-serif text-xl font-medium text-ink">
|
|
<Sparkles size={18} className="text-amber-500" />
|
|
IA Note
|
|
</h3>
|
|
<button
|
|
onClick={() => setIsAISidebarOpen(false)}
|
|
className="p-1 hover:bg-slate-100 rounded-full transition-colors text-muted-ink"
|
|
>
|
|
<ChevronRight size={20} />
|
|
</button>
|
|
</div>
|
|
<p className="text-[11px] text-muted-ink uppercase tracking-wider font-medium opacity-60 truncate">
|
|
"{activeNote?.title}"
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tabs Nav */}
|
|
<div className="flex border-b border-border px-2">
|
|
{(['discussion', 'actions', 'resources'] as AITab[]).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setAiTab(tab)}
|
|
className={`flex-1 py-3 text-[11px] uppercase tracking-widest font-bold transition-all relative
|
|
${aiTab === tab ? 'text-ink' : 'text-muted-ink hover:text-ink/60'}`}
|
|
>
|
|
{tab}
|
|
{aiTab === tab && (
|
|
<motion.div
|
|
layoutId="activeTab"
|
|
className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink"
|
|
/>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
|
|
<AnimatePresence mode="wait">
|
|
{aiTab === 'discussion' && (
|
|
<motion.div
|
|
key="discussion"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="space-y-8"
|
|
>
|
|
<div className="h-64 flex flex-col items-center justify-center text-center space-y-4 text-muted-ink/40">
|
|
<div className="w-16 h-16 rounded-full border border-dashed border-muted-ink/20 flex items-center justify-center">
|
|
<MessageSquare size={24} />
|
|
</div>
|
|
<p className="text-xs font-serif italic leading-relaxed px-8">Posez une question à l'Assistant pour commencer.</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-3">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Contexte</label>
|
|
<div className="w-full p-3 bg-slate-50 border border-border rounded-lg text-xs flex items-center justify-between cursor-pointer hover:bg-slate-100 transition-colors">
|
|
<div className="flex items-center gap-2">
|
|
<FileCode size={14} className="text-muted-ink" />
|
|
<span>Cette note</span>
|
|
</div>
|
|
<ChevronRight size={14} className="rotate-90 text-muted-ink" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Ton d'écriture</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{(['Professional', 'Creative', 'Academic', 'Casual'] as AITone[]).map((tone) => (
|
|
<button
|
|
key={tone}
|
|
onClick={() => setSelectedTone(tone)}
|
|
className={`p-3 rounded-xl border text-[11px] font-medium transition-all
|
|
${selectedTone === tone ? 'bg-ink text-paper border-ink' : 'bg-white border-border text-muted-ink hover:border-ink/20'}`}
|
|
>
|
|
{tone.charAt(0).toUpperCase() + tone.slice(1, 3)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{aiTab === 'actions' && (
|
|
<motion.div
|
|
key="actions"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="space-y-8"
|
|
>
|
|
<div className="space-y-8">
|
|
{/* Transformations Section */}
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
<h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Transformations</h4>
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{[
|
|
{ icon: <Sparkles size={14} />, label: 'Clarifier' },
|
|
{ icon: <Scissors size={14} />, label: 'Raccourcir' },
|
|
{ icon: <Zap size={14} />, label: 'Améliorer' },
|
|
{ icon: <Languages size={14} />, label: 'Traduire' },
|
|
].map((action, i) => (
|
|
<button
|
|
key={i}
|
|
className="flex flex-col items-center gap-3 p-4 bg-white border border-border rounded-xl transition-all group hover:border-ink/20"
|
|
>
|
|
<div className="p-2 rounded-lg bg-slate-50 transition-colors group-hover:bg-ink group-hover:text-paper shadow-sm text-ink/60">
|
|
{action.icon}
|
|
</div>
|
|
<span className="text-[11px] font-bold text-ink/80 uppercase tracking-wider">{action.label}</span>
|
|
</button>
|
|
))}
|
|
<button className="col-span-2 flex items-center justify-center gap-3 py-3 px-4 bg-white border border-border rounded-xl text-[11px] font-bold text-ink/80 hover:bg-slate-50 transition-colors hover:border-ink/20 uppercase tracking-widest">
|
|
<FileCode size={14} className="text-muted-ink" />
|
|
Convertir en Markdown
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Generation Section */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
<h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Generation Tools</h4>
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
</div>
|
|
|
|
{/* Presentation Tool */}
|
|
<div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-ink/20 transition-all duration-500 overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<Layout size={80} className="text-ink" />
|
|
</div>
|
|
|
|
<div className="relative space-y-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-slate-50 rounded-lg text-ink/70">
|
|
<Layout size={18} />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<h5 className="text-sm font-bold text-ink leading-none">Présentation</h5>
|
|
<p className="text-[10px] text-muted-ink uppercase tracking-tight">Convertir en slides interactives</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Thème</span>
|
|
<select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
|
|
<option>Architectural Mono</option>
|
|
<option>Vibrant Tech</option>
|
|
<option>Minimal Silk</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Style</span>
|
|
<select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
|
|
<option>Professional</option>
|
|
<option>Creative</option>
|
|
<option>Brutalist</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button className="w-full py-3.5 bg-ink text-paper rounded-xl text-[12px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-ink/10 uppercase tracking-widest">
|
|
Générer
|
|
<ArrowRightLeft size={14} className="opacity-60" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Diagram Tool */}
|
|
<div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-ink/20 transition-all duration-500 overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<BookOpen size={80} className="text-ink" />
|
|
</div>
|
|
|
|
<div className="relative space-y-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-slate-50 rounded-lg text-ink/70">
|
|
<BookOpen size={18} />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<h5 className="text-sm font-bold text-ink leading-none">Diagramme</h5>
|
|
<p className="text-[10px] text-muted-ink uppercase tracking-tight">Visualisation de structure</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Type</span>
|
|
<select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
|
|
<option>Logic Flow</option>
|
|
<option>Mind Map</option>
|
|
<option>Hierarchy</option>
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Style</span>
|
|
<select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
|
|
<option>Draft</option>
|
|
<option>Polished</option>
|
|
<option>Handwritten</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button className="w-full py-3.5 bg-ink text-paper rounded-xl text-[12px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-ink/10 uppercase tracking-widest">
|
|
Tracer
|
|
<ArrowRightLeft size={14} className="opacity-60" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Activity section placeholder */}
|
|
<div className="flex flex-col items-center gap-2 opacity-20 py-4">
|
|
<History size={16} />
|
|
<span className="text-[10px] font-bold uppercase tracking-widest whitespace-nowrap">Auto-Save Enabled</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{aiTab === 'resources' && (
|
|
<motion.div
|
|
key="resources"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="space-y-8"
|
|
>
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">URL (Optionnel)</label>
|
|
<div className="relative">
|
|
<input type="text" placeholder="https://..." className="w-full bg-slate-50 border border-border rounded-lg pl-3 pr-10 py-3 text-xs outline-none focus:border-ink transition-colors" />
|
|
<Globe size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-ink/40" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Texte de la ressource</label>
|
|
<textarea
|
|
rows={8}
|
|
placeholder="Collez votre texte ici (markdown, HTML, texte brut...)"
|
|
className="w-full bg-slate-50 border border-border rounded-lg p-4 text-xs outline-none focus:border-ink transition-colors resize-none leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Mode d'intégration</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{[
|
|
{ id: 'replace', label: 'Remplacer', sub: 'Direct, sans IA' },
|
|
{ id: 'append', label: 'Compléter', sub: 'Ajoute sans réécrire' },
|
|
{ id: 'merge', label: 'Fusionner', sub: 'Réécrit et intègre' },
|
|
].map((mode) => (
|
|
<button key={mode.id} className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-all text-center ${mode.id === 'append' ? 'bg-emerald-50 border-emerald-500/30 ring-1 ring-emerald-500/10' : 'bg-white border-border hover:bg-slate-50'}`}>
|
|
<span className={`text-[11px] font-bold ${mode.id === 'append' ? 'text-emerald-700' : 'text-ink'}`}>{mode.label}</span>
|
|
<span className="text-[8px] text-muted-ink opacity-60 leading-tight mt-1 font-medium">{mode.sub}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<button className="w-full py-4 bg-[#75B2D6] text-white rounded-xl text-sm font-bold flex items-center justify-center gap-3 hover:opacity-90 transition-opacity shadow-lg shadow-blue-200">
|
|
<Sparkles size={18} />
|
|
Générer l'aperçu
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Chat Input (Sticky bottom for Discussion) */}
|
|
<AnimatePresence>
|
|
{aiTab === 'discussion' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 20 }}
|
|
className="p-6 bg-white border-t border-border"
|
|
>
|
|
<div className="relative">
|
|
<textarea
|
|
rows={3}
|
|
placeholder="Posez une question sur cette note..."
|
|
className="w-full bg-slate-50 border border-border rounded-2xl p-4 pr-12 text-sm outline-none focus:border-ink transition-colors resize-none leading-relaxed font-light"
|
|
/>
|
|
<div className="absolute right-3 bottom-3 flex gap-2">
|
|
<button className="p-2 text-muted-ink hover:text-ink rounded-lg transition-colors">
|
|
<Globe size={16} />
|
|
</button>
|
|
<button className="p-2 bg-[#75B2D6] text-white rounded-lg transition-transform hover:scale-105 active:scale-95 shadow-sm">
|
|
<Send size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p className="text-[9px] text-muted-ink text-center mt-3 uppercase tracking-widest font-bold opacity-30 italic">Maj+Entrée = nouvelle ligne</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.aside>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</main>
|
|
</div>
|
|
|
|
{/* Modals */}
|
|
<AnimatePresence>
|
|
{showNewCarnetModal && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={() => setShowNewCarnetModal(false)}
|
|
className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
className="relative w-full max-w-md bg-paper border border-border shadow-2xl rounded-2xl p-8"
|
|
>
|
|
<h3 className="text-2xl font-serif font-medium text-ink mb-6">Create New Carnet</h3>
|
|
<form onSubmit={handleAddCarnet} className="space-y-6">
|
|
<div>
|
|
<label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Notebook Name</label>
|
|
<input
|
|
autoFocus
|
|
type="text"
|
|
value={newCarnetName}
|
|
onChange={(e) => setNewCarnetName(e.target.value)}
|
|
placeholder="E.g., Sustainable Patterns"
|
|
className="w-full bg-white border border-border rounded-lg px-4 py-3 outline-none focus:border-ink transition-colors font-serif italic text-lg"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-4 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowNewCarnetModal(false)}
|
|
className="flex-1 py-3 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 py-3 bg-ink text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
|
|
>
|
|
Create Notebook
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
|
|
{showNewNoteModal && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={() => setShowNewNoteModal(false)}
|
|
className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
className="relative w-full max-w-2xl bg-paper border border-border shadow-2xl rounded-2xl p-10"
|
|
>
|
|
<h3 className="text-3xl font-serif font-medium text-ink mb-8">Add Architectural Note</h3>
|
|
<form onSubmit={handleAddNote} className="space-y-8">
|
|
<div>
|
|
<label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Concept Title</label>
|
|
<input
|
|
autoFocus
|
|
type="text"
|
|
value={newNoteTitle}
|
|
onChange={(e) => setNewNoteTitle(e.target.value)}
|
|
placeholder="Enter the title of your study..."
|
|
className="w-full bg-white border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-serif text-2xl"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Observations & Analysis</label>
|
|
<textarea
|
|
value={newNoteContent}
|
|
onChange={(e) => setNewNoteContent(e.target.value)}
|
|
placeholder="Describe the spatial logic, materiality, and light interactions..."
|
|
rows={6}
|
|
className="w-full bg-white border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-light leading-relaxed resize-none"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-4 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowNewNoteModal(false)}
|
|
className="flex-1 py-4 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 py-4 bg-ink text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
|
|
>
|
|
Save Note
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|