const { useState, useEffect, useRef, useMemo } = React; const translations = { vi: { appName: 'Notebook', newNote: 'Tạo ghi chú mới', searchPlaceholder: 'Tìm kiếm ghi chú...', allNotes: 'Tất cả ghi chú', favorites: 'Yêu thích', pinned: 'Đã ghim', lockedNotes: 'Ghi chú mã hóa', trash: 'Thùng rác', emptyTrash: 'Dọn sạch thùng rác', folders: 'Thư mục', tags: 'Thẻ tag', addFolder: 'Thêm thư mục', noNotes: 'Chưa có ghi chú nào', noNotesDesc: 'Bấm nút "Tạo ghi chú mới" để bắt đầu ghi chép ý tưởng của bạn.', noteTitlePlaceholder: 'Tiêu đề ghi chú...', wysiwyg: 'Trực quan', markdown: 'Markdown', save: 'Lưu', delete: 'Xóa', restore: 'Khôi phục', deletePermanent: 'Xóa vĩnh viễn', pin: 'Ghim', unpin: 'Bỏ ghim', favorite: 'Yêu thích', lock: 'Mã khóa mật khẩu', unlock: 'Mở khóa', export: 'Xuất file', import: 'Nhập file', backup: 'Sao lưu Toàn bộ', wordCount: 'Từ', charCount: 'Ký tự', readTime: 'Phút đọc', passwordPrompt: 'Nhập mật khẩu để giải mã ghi chú này', passwordMismatch: 'Mật khẩu không chính xác', cookieTitle: 'Thông báo Cookie', cookieMessage: 'Trang web sử dụng bộ nhớ cục bộ để lưu trữ các ghi chú.', cookieAcceptAll: 'Chấp nhận', cookieLearnMore: 'Xem thêm', saved: 'Đã lưu', saving: 'Đang lưu...', print: 'In ghi chú', copy: 'Sao chép văn bản', pageFormat: 'Định dạng trang', formatStandard: '📄 Chuẩn', formatLined: '📑 Kẻ ngang', formatGrid: '🔲 Ô vuông', formatCode: '💻 Mã nguồn', formatReader: '📖 Đọc tập trung' }, en: { appName: 'Notebook', newNote: 'New Note', searchPlaceholder: 'Search notes...', allNotes: 'All Notes', favorites: 'Favorites', pinned: 'Pinned', lockedNotes: 'Encrypted', trash: 'Trash', emptyTrash: 'Empty Trash', folders: 'Folders', tags: 'Tags', addFolder: 'Add Folder', noNotes: 'No notes found', noNotesDesc: 'Click "New Note" to start.', noteTitlePlaceholder: 'Note title...', wysiwyg: 'WYSIWYG', markdown: 'Markdown', save: 'Save', delete: 'Delete', restore: 'Restore', deletePermanent: 'Delete Permanently', pin: 'Pin', unpin: 'Unpin', favorite: 'Favorite', lock: 'Lock with Password', unlock: 'Unlock', export: 'Export', import: 'Import', backup: 'Full Backup', wordCount: 'words', charCount: 'chars', readTime: 'min read', passwordPrompt: 'Enter password to decrypt', passwordMismatch: 'Incorrect password', cookieTitle: 'Cookie Notice', cookieMessage: 'This site uses local storage to keep your notes.', cookieAcceptAll: 'Accept', cookieLearnMore: 'Learn more', saved: 'Saved', saving: 'Saving...', print: 'Print', copy: 'Copy', pageFormat: 'Page Format', formatStandard: '📄 Standard', formatLined: '📑 Lined', formatGrid: '🔲 Grid', formatCode: '💻 Code', formatReader: '📖 Reader' } }; class DB { constructor() { this.name = 'SingleNotebook_v3'; this.version = 1; this.db = null; } async init() { if (this.db) return this.db; return new Promise((resolve, reject) => { const req = indexedDB.open(this.name, this.version); req.onupgradeneeded = (e) => { const db = e.target.result; if (!db.objectStoreNames.contains('notes')) db.createObjectStore('notes', { keyPath: 'id' }); if (!db.objectStoreNames.contains('folders')) db.createObjectStore('folders', { keyPath: 'id' }); if (!db.objectStoreNames.contains('tags')) db.createObjectStore('tags', { keyPath: 'id' }); }; req.onsuccess = (e) => { this.db = e.target.result; this.seed().then(() => resolve(this.db)); }; req.onerror = (e) => reject(e.target.error); }); } async seed() { const notes = await this.getNotes(); if (notes.length === 0) { const demo = { id: 'note-welcome', title: 'Chào mừng đến với Siêu Notebook 🔥', content: '

Bản nâng cấp toàn diện!

Ghi chú của bạn đã có đầy đủ mọi tính năng:

', folderId: '', tags: ['Chào mừng', 'Hướng dẫn'], color: '#3b82f6', emoji: '🔥', isPinned: true, isFavorite: true, isTrashed: false, isLocked: false, passwordHash: '', pageFormat: 'standard', mode: 'wysiwyg', createdAt: Date.now(), updatedAt: Date.now() }; await this.saveNote(demo); } } async getNotes() { await this.init(); return new Promise(res => { const req = this.db.transaction('notes', 'readonly').objectStore('notes').getAll(); req.onsuccess = () => res(req.result || []); }); } async saveNote(note) { await this.init(); return new Promise(res => { const tx = this.db.transaction('notes', 'readwrite'); tx.objectStore('notes').put(note); tx.oncomplete = () => res(note); }); } async deleteNote(id, perm = false) { await this.init(); return new Promise(res => { const tx = this.db.transaction('notes', 'readwrite'); const store = tx.objectStore('notes'); if (perm) store.delete(id); else { const req = store.get(id); req.onsuccess = () => { if (req.result) store.put({ ...req.result, isTrashed: true }); }; } tx.oncomplete = () => res(true); }); } async emptyTrash() { await this.init(); const notes = await this.getNotes(); const tx = this.db.transaction('notes', 'readwrite'); const store = tx.objectStore('notes'); notes.filter(n => n.isTrashed).forEach(n => store.delete(n.id)); return new Promise(res => tx.oncomplete = () => res(true)); } async restoreNote(id) { await this.init(); return new Promise(res => { const tx = this.db.transaction('notes', 'readwrite'); const store = tx.objectStore('notes'); const req = store.get(id); req.onsuccess = () => { if (req.result) store.put({ ...req.result, isTrashed: false }); }; tx.oncomplete = () => res(true); }); } async getFolders() { await this.init(); return new Promise(res => { const req = this.db.transaction('folders', 'readonly').objectStore('folders').getAll(); req.onsuccess = () => res(req.result || []); }); } async saveFolder(folder) { await this.init(); return new Promise(res => { const tx = this.db.transaction('folders', 'readwrite'); tx.objectStore('folders').put(folder); tx.oncomplete = () => res(folder); }); } } const db = new DB(); function Icon({ name, className = 'w-5 h-5' }) { const paths = { plus: , search: , trash: , star: , pin: , lock: , unlock: , folder: , download: , upload: , sun: , moon: , cookie: , x: , check: , fileText: , tag: , layout: , refresh: , copy: , print: }; return {paths[name] || paths.fileText}; } function ExportModal({ isOpen, onClose, note, allNotes, folders }) { const [format, setFormat] = useState('json'); const [scope, setScope] = useState('single'); const [isExporting, setIsExporting] = useState(false); if (!isOpen) return null; const generateContent = async (n, fmt) => { const filename = (n.title || 'ghi-chu').replace(/[/\\?%*:|"<>]/g, '-'); let content = n.content || ''; let type = 'text/plain'; if (fmt === 'json') return { data: JSON.stringify(n, null, 2), filename: `${filename}.json`, type: 'application/json' }; if (fmt === 'txt') return { data: n.title + '\n\n' + content.replace(/<[^>]+>/g, ''), filename: `${filename}.txt`, type }; if (fmt === 'md') return { data: '# ' + n.title + '\n\n' + (window.TurndownService ? new TurndownService().turndown(content) : content), filename: `${filename}.md`, type: 'text/markdown' }; if (fmt === 'html') return { data: `${n.title}

${n.title}

${content}`, filename: `${filename}.html`, type: 'text/html' }; if (fmt === 'docx') return { data: `

${n.title}

${content}`, filename: `${filename}.docx`, type: 'application/msword' }; if (fmt === 'pdf') { const el = document.createElement('div'); el.style.padding = '20px'; el.style.fontFamily = 'sans-serif'; el.innerHTML = `

${n.title}

${content}
`; if (window.html2pdf) { const opt = { margin: 15, filename: `${filename}.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } }; const pdfBlob = await html2pdf().set(opt).from(el).output('blob'); return { blob: pdfBlob, filename: `${filename}.pdf` }; } } }; const handleExport = async () => { const targetNotes = scope === 'single' ? (note ? [note] : []) : allNotes; if (targetNotes.length === 0) return alert('Không có ghi chú nào'); setIsExporting(true); try { if (targetNotes.length === 1 && scope === 'single') { const res = await generateContent(targetNotes[0], format); saveAs(res.blob || new Blob([res.data], { type: `${res.type};charset=utf-8` }), res.filename); } else { const zip = new JSZip(); for (const n of targetNotes) { const res = await generateContent(n, format); zip.file(res.filename, res.blob || res.data); } saveAs(await zip.generateAsync({ type: 'blob' }), `Notebook_Export_${Date.now()}.zip`); } onClose(); } catch (err) { alert('Có lỗi xảy ra khi xuất file.'); } setIsExporting(false); }; return (

Xuất dữ liệu

{['json', 'txt', 'docx', 'md', 'html', 'pdf'].map(f => ( ))}
); } function ImportModal({ isOpen, onClose, onImport }) { const [isLoading, setIsLoading] = useState(false); if (!isOpen) return null; const handleFile = async (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; setIsLoading(true); const ext = file.name.split('.').pop().toLowerCase(); const title = file.name.replace(/\.[^/.]+$/, ''); try { if (ext === 'json') { const data = JSON.parse(await file.text()); (Array.isArray(data) ? data : [data]).forEach(n => onImport(n)); } else if (['txt', 'md', 'html', 'docx', 'doc'].includes(ext)) { const text = await file.text(); let content = ext === 'md' && window.marked ? marked.parse(text) : (ext === 'txt' ? `

${text.replace(/\n/g, '
')}

` : text); onImport({ id: `import-${Date.now()}`, title, content, createdAt: Date.now(), updatedAt: Date.now(), mode: 'wysiwyg', pageFormat: 'standard' }); } else if (ext === 'pdf' && window.pdfjsLib) { pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; const pdf = await pdfjsLib.getDocument({ data: await file.arrayBuffer() }).promise; let fullText = ''; for (let i = 1; i <= pdf.numPages; i++) { const textContent = await (await pdf.getPage(i)).getTextContent(); fullText += `

${textContent.items.map(item => item.str).join(' ')}

`; } onImport({ id: `import-${Date.now()}`, title, content: fullText || '

PDF trống

', createdAt: Date.now(), updatedAt: Date.now(), pageFormat: 'standard', mode: 'wysiwyg' }); } onClose(); } catch (err) { alert('Lỗi khi đọc file!'); } setIsLoading(false); }; return (

Nhập tập tin

document.getElementById('importInp').click()}>

{isLoading ? 'Đang đọc...' : 'Chọn file từ máy tính'}

Hỗ trợ: MD, TXT, JSON, DOCX, PDF, HTML

); } function LockModal({ isOpen, onClose, onConfirm, isSetting }) { const [pwd, setPwd] = useState(''); if (!isOpen) return null; return (

{isSetting ? 'Đặt mật khẩu khóa ghi chú' : 'Nhập mật khẩu mở khóa'}

setPwd(e.target.value)} className="w-full px-3 py-2 border rounded-xl dark:bg-slate-800 border-slate-200 outline-none text-sm" />
); } function App() { const [notes, setNotes] = useState([]); const [folders, setFolders] = useState([]); const [activeNoteId, setActiveNoteId] = useState(null); const [activeView, setActiveView] = useState('all'); const [activeFolder, setActiveFolder] = useState(null); const [activeTag, setActiveTag] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [theme, setTheme] = useState('light'); const [lang, setLang] = useState('vi'); const [showCookie, setShowCookie] = useState(() => localStorage.getItem('notebook_cookie_consent') !== 'true'); const [unlocked, setUnlocked] = useState({}); const [showExport, setShowExport] = useState(false); const [showImport, setShowImport] = useState(false); const [showLock, setShowLock] = useState(false); const [lockAction, setLockAction] = useState('unlock'); const [isSaving, setIsSaving] = useState(false); const editorRef = useRef(null); const t = translations[lang] || translations.vi; useEffect(() => { async function load() { const n = await db.getNotes(); const f = await db.getFolders(); setNotes(n); setFolders(f); if (n.length > 0) setActiveNoteId(n[0].id); } load(); }, []); const activeNote = notes.find(n => n.id === activeNoteId); const handleCreate = async () => { const newN = { id: `note-${Date.now()}`, title: t.noteTitlePlaceholder, content: '

', folderId: activeFolder || '', tags: activeTag ? [activeTag] : [], color: '#3b82f6', emoji: '📝', isPinned: false, isFavorite: false, isTrashed: false, isLocked: false, passwordHash: '', pageFormat: 'standard', mode: 'wysiwyg', createdAt: Date.now(), updatedAt: Date.now() }; await db.saveNote(newN); setNotes([newN, ...notes]); setActiveNoteId(newN.id); }; const handleSave = async (updated) => { setIsSaving(true); const n = { ...updated, updatedAt: Date.now() }; await db.saveNote(n); setNotes(prev => prev.map(item => item.id === n.id ? n : item)); setTimeout(() => setIsSaving(false), 300); }; const handleDelete = async (id, perm = false) => { await db.deleteNote(id, perm); setNotes(prev => perm ? prev.filter(n => n.id !== id) : prev.map(n => n.id === id ? { ...n, isTrashed: true } : n)); }; const execCmd = (cmd, val = null) => { document.execCommand(cmd, false, val); if (editorRef.current && activeNote) handleSave({ ...activeNote, content: editorRef.current.innerHTML }); }; const allTags = useMemo(() => Array.from(new Set(notes.flatMap(n => n.tags || []))), [notes]); const filtered = useMemo(() => notes.filter(n => { if (activeView === 'trash') return n.isTrashed; if (n.isTrashed) return false; if (activeView === 'favorites') return n.isFavorite; if (activeView === 'pinned') return n.isPinned; if (activeView === 'locked') return n.isLocked; if (activeFolder && n.folderId !== activeFolder) return false; if (activeTag && !n.tags?.includes(activeTag)) return false; if (searchQuery.trim()) { const q = searchQuery.toLowerCase(); return (n.title || '').toLowerCase().includes(q) || (n.content || '').toLowerCase().includes(q); } return true; }), [notes, activeView, searchQuery, activeFolder, activeTag]); const stats = useMemo(() => { if (!activeNote) return { words: 0, chars: 0 }; const text = activeNote.content.replace(/<[^>]+>/g, ' ').trim(); return { chars: text.length, words: text ? text.split(/\s+/).length : 0 }; }, [activeNote]); return (
{}
📝{t.appName}
setSearchQuery(e.target.value)} className="w-full bg-slate-100 dark:bg-slate-800 rounded-xl pl-9 pr-4 py-1.5 text-sm outline-none" />
{} {}
{filtered.map(n => (
setActiveNoteId(n.id)} style={{ borderLeftColor: n.color || '#3b82f6' }} className={`p-3 rounded-2xl cursor-pointer border-l-4 border-y border-r transition ${n.id === activeNoteId ? 'bg-white dark:bg-slate-800 border-y-slate-200 shadow-sm' : 'bg-white/60 border-transparent hover:bg-white'}`}>

{n.emoji} {n.title}

{n.isPinned && } {n.isFavorite && } {n.isLocked && }

{n.isLocked && !unlocked[n.id] ? '🔒 [Đã mã hóa]' : (n.content.replace(/<[^>]+>/g, '') || 'Trống')}

))}
{}
{activeNote ? ( activeNote.isLocked && !unlocked[activeNote.id] ? (

{t.passwordPrompt}

) : (
{}
handleSave({ ...activeNote, emoji: e.target.value })} className="w-8 text-xl bg-transparent outline-none text-center" /> handleSave({ ...activeNote, title: e.target.value })} placeholder={t.noteTitlePlaceholder} className="text-2xl font-bold bg-transparent outline-none flex-1" />
{}
{activeNote.isTrashed ? ( <> ) : }
{}
{['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6'].map(c =>
{isSaving ? t.saving : t.saved}
{} {activeNote.mode === 'wysiwyg' && (
)} {} {activeNote.mode === 'wysiwyg' ? (
handleSave({ ...activeNote, content: e.target.innerHTML })} dangerouslySetInnerHTML={{ __html: activeNote.content || '' }} className="min-h-[400px] outline-none editor-content leading-relaxed" /> ) : (